/******************************** LOGIN ************************************/ @charset "UTF-8"; body.index {position:relative; display:flex; justify-content:center; align-items:center; padding:0 !important; background-image: url('../img/bg_illur.png'); background-repeat: no-repeat; background-position:50% 100%; background-size: 100%} @media screen and (max-width: 940px) { body.index {background-position:35% 114%; background-size:302%} } @media screen and (max-width: 640px) { body.index {background-position:33% 108%; background-size:278%} } body.index .sys_tit {font-weight:bold; text-align:center; margin:0 0 40px;width: 100%;} body.index .sys_tit > .ci {margin-bottom: 15px; font-size: 18px; color: #2a539b;} body.index .sys_tit > .ci img {width: 250px; height:auto; margin-bottom: 15px;} body.index .sys_tit > .ciTit {font-size:1.3rem; text-align:center; white-space:nowrap; color: #2a539b;} body.index .loginBox {display:flex; flex-direction:column; align-items:center; gap:1rem; animation-name:s1; animation-duration:1s; animation-delay:0s; animation-fill-mode:both; animation-timing-function:ease} body.index .loginBox .inputDiv {width:100%; height:40px; display:flex; flex-direction:row; background-color:#fff; border-radius:3px; align-items:center; border:1px solid #dcdcdc} body.index .loginBox .inputDiv label {margin:0 6px 0 10px; flex:0 0 85px; font-size:0.875rem; letter-spacing:0; border-right:1px solid #aaa; text-align:left; display:block} body.index .loginBox .inputDiv input, body.index .loginBox .inputDiv select {border:none !important; width:100%; height:38px; font-size:1rem} body.index .loginBox .btnLogin {max-width:unset; width:100%; margin-top:8px;} body.index .loginBox .loginFuction {text-align:center; margin:20px 0; color:#000} body.index .copyright {width:100%; font-size:12px; display:flex; align-items:end; justify-content:center} body.index .copyright img {width:70px; height:auto; margin:0 10px} body.index .loginContainer {display:flex; flex-direction:column; align-items:center; width: 260px; height: 600px;} body.index .userInstallContainer {height: unset; align-items: center; justify-content: center; width: unset; background-color: #0000002e; padding: 3rem;} body.index .installItemContainer {height: 850px;display: flex;flex-direction: column;align-items: center;width: 260px;justify-content: center;} body.index .installItemContainer form {flex: unset;} body.index .installItemContainer .copyright {margin-top: 40px;} body.index .loginContainer form {width: 100%;overflow: hidden;} body.index .loginContainer .explain{width: 100%;font-size: 14px;text-shadow: none;background-color: #f8eebe;padding: 1rem 0;line-height: 1.4;color: #555;font-weight: 500;} @media screen and (max-width: 640px) { body.index .loginContainer .explain {width: 200%; transform: translate(-25%, 0);} } @keyframes s1 { from {opacity:0.2} to {opacity:1} } @media screen and (max-width: 940px) { body.index .loginContainer {background-color: unset; border: none;} body.index .loginContainer form {width: 100%;overflow: auto;} body.index .loginContainer {padding: 2rem 0 4rem} body.index .loginContainer.userInstallContainer{height: 100%;} body.index .installItemContainer {height: 100%}; } body.index #selectSiteModal .item {padding: 0.25rem 1rem !important;} @media screen and (max-width: 640px) { body.index .loginContainer {height: auto;} } /************************* 화면공통 **********************/ .wrapper {flex:1 1 auto; padding:30px 20px 20px 30px; display:flex; flex-direction:column; overflow:hidden; margin: 65px 0 0 160px; -webkit-trasition: margin 0.3s; transition: margin 0.3s; /* max-width: 1640px; */} .wrapper.margin{margin: 65px 0 0 0;} .titDiv {display:flex; width:auto; align-items:start; margin-bottom:20px; flex-flow:row wrap; color:#034364; letter-spacing:-1px; gap:1rem} .titDiv .backBtnDiv {flex:0 0 100%; display:flex; align-items:center; } .titDiv .backBtnDiv .arrowBack {font-size:28px; height:30px; width:30px} .titDiv .backBtnDiv .arrowBack::before {content:"\f177"; font-family:"fa"; font-weight:300} .titDiv .pageTit {display:inline-flex; align-items:center; font-size:1rem; font-weight:700; height:30px;} .titDiv .pageTit>span{font-size: 1.125rem;} .titDiv .pageTit .proTit::after {content:'\f054'; font-family:'fa'; font-weight:900; margin:0 0.5rem} .titDiv .comment {padding:6px 8px 5px 28px; background-color:#e0e1e2; color:#474e5a; border-radius:15px; font-size:0.895rem; line-height:1.2; font-weight:normal; word-break:break-all; position:relative} .titDiv .comment::before {content:'\f05a'; font-family:'fa'; font-weight:700; margin-right:6px; color:#91a1bd; position:absolute; top:7px; left:7px} .titDiv button {margin-left:4px; color:#034364; display:none !important} .titDiv input {margin-left:9px; color:#034364; display:none !important} .titDiv .btn-srch {margin-left:auto} .titDiv .help {width:24px; height:24px; margin-left:-8px;; border-radius:15px; font-size:1em; cursor:pointer} .titDiv .help::before {content:'\f128'; font-family:'fa'; font-weight:700; color:#234c79; background-color:#f1c13b; width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:50%} .titDiv .viewOptionBtn {height:30px} .bodyDiv {flex:1; overflow-y:auto; position:relative; background-color:#fff} .contentDiv {display:flex; width:100%; } .pageBtnDiv {display:flex; flex-direction:row; align-items:center; justify-content:flex-start; padding:1rem 0; gap:10px; flex-flow:wrap} .pageBtnDiv .btn {min-width:100px} .pageBtnDiv .btn-yellow {margin-left:5%} .tabDiv {display:flex; font-size:0.875rem; border-bottom:1px solid #3972a6; gap:0.25rem} .tabDiv .bTab {display:flex; align-items:flex-end; gap:4px; padding-right:1rem; flex-flow:row wrap} .tabDiv .subTab {min-width:120px; height:36px; border-top-left-radius:6px; border-top-right-radius:6px; font-weight:600; background-color:#dedfe0; color:#484848; padding:0 10px; display:flex; align-items:center; justify-content:center; cursor:pointer; white-space:nowrap} .tabDiv .subTab.focus {background-color:#193870; color:#fff} .tabDiv .subTab .sum {background-color:#c0ccd9; color:#193870; border-radius:20px; margin-left:4px; padding:2px 4px; font-weight:500; font-size:0.875rem} .tabDiv .subTab .new {background-color:#c20316; color:#ffffff; border-radius:20px; margin-left:4px; padding:2px 4px; font-weight:500; font-size:0.875rem} .input-delete input:disabled ~ span {display: none;} .input-delete span {position: absolute;display: flex;right: 8px;width:16px;height:16px;border-radius:20px; background-color:#ccc; cursor: pointer} .input-delete span:after {content:'\f00d'; font-family:'fa'; color:#fff; font-size:10px; font-weight:900; margin:auto} input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none;} input[type=number] {-moz-appearance: textfield;} input[type='time'] {border: 1px solid #aaa;background-color: #fff;border-radius: 3px;font-family: 'Pretendard';} .onlyHM::-webkit-datetime-edit-second-field {background: white;color: transparent;margin-left: -4px;position: absolute;width: 2px;} body .wrapper .srchDiv .btnDiv:not(.srchFooter) {height: 100%;} /* body .wrapper .addModalBtn {width: 70px; height: 34px;} */ /* body .wrapper .srchDiv .btnDiv .divLine {width: 1px;height: 34px;border-left: 1px dotted #999;margin: 0 0.5rem;} */ body .wrapper .listDiv .listBodyDiv .row .item {word-break: break-word;} .fileDiv input[type=file] {display: none;} .autoTxtList {display: none; width: 100%;position: absolute;bottom: -95%;height: fit-content;left: 0;background-color: #fff;z-index: 10;border: 1px solid #aaa;} .autoTxtList .autoRow {padding: 0.5rem;} .hasAutoTxtList:focus .autoTxtList{display: unset;} table thead tr td.item.scrollTd{border-left: none;} table thead tr td.item:nth-last-child(2){border-right: none;} /* .fileExtension {display: flex;justify-content: center;align-items: center;border: 1px solid #e9e9e9;border-radius: 4px;text-transform: uppercase;user-select: none;} */ @media screen and (max-width: 940px) { .titDiv {margin-bottom:10px; gap:0.5rem} .wrapper{margin: 65px 0 0 0; transition: none; padding: 15px 20px 30px;} .wrapper.margin{margin: 65px 0 0 0;} body.forTablet .titDiv button{width: 30px !important; height: 30px !important; display: flex !important;} body.forTablet .titDiv .checkAll{width: 30px !important; height: 30px !important;} body.forTablet .bodyDiv {background-color: transparent !important;} .titDiv .pageTit {margin-right:20px} } /* @media screen and (min-width: 941px) { body.responsive .wrapper{min-width: unset;} body:not(.responsive) .wrapper { min-width: 1400px; } } */ @media screen and (max-width: 640px) { body.forMobile .titDiv .comment {display: none;} .titDiv .pageTit {margin:0 0 8px; } } .answer .fa.fa-calendar-alt{margin: auto 0.5rem;text-align: center; font-size: 1.1rem;} .itemColor1{background-color: #d4daef !important;} .itemColor2{background-color: #d7d9ea !important;} .itemColor3{background-color: #deebff !important;} .itemColor4{background-color: #efe7d4 !important;} option{font-size: 1rem;} @media screen and (min-width: 941px) { body option {font-size: 1.1rem !important;} } .delableItem{display: flex;gap: 0.2rem;align-items: center;} .delableItem span {background-color: #ec3232;position: unset;transform: translateY(0);} .delableItem span::after {position: unset;} .fileAttach {color: #2a539b;} /************************************* table flex width *************************************/ /*주의, 경고, 위험, push, sms, 상황종료상태, 센서 선택*/ body .wrapper .listDiv .item.cautionYn, body .wrapper .listDiv .item.warnYn, body .wrapper .listDiv .item.dangerYn, body .wrapper .listDiv .item.pushYn, body .wrapper .listDiv .item.smsYn, body .wrapper .listDiv .item.selectSpeakerItem, body .wrapper .listDiv .item.selectDisplayItem, body .wrapper .listDiv .item.finState, body .wrapper .listDiv .item.selectEquipment {flex: 0 0 50px;width: 50px;min-width: 50px;} /*NVR, 스피커, 인원, 센서갯수, 발생 레벨, 감지유예, 이력알람확인여부, 단위, 재고현황수량, 경과일, 발생타입*/ body .wrapper .listDiv .item.nvrItem, body .wrapper .listDiv .item.speakerItem, body .wrapper .listDiv .item.personnel, body .wrapper .listDiv .item.sensorNum, body .wrapper .listDiv .item.occLevel, body .wrapper .listDiv .item.chkMoratorium, body .wrapper .listDiv .item.figure, body .wrapper .listDiv .item.alarmChk, body .wrapper .listDiv .item.unit, body .wrapper .listDiv .item.invenStat, body .wrapper .listDiv .item.overDt, body .wrapper .listDiv .item.occType, body .wrapper .listDiv .item.safeEventCode, body .wrapper .listDiv .item.safeEventType {flex: 0 0 70px;width: 70px;min-width: 70px;} body .wrapper .listDiv .item.no {justify-content: center;} /*no, 노출순서, 등록자, 사용자 이름, 업체구분, QnA 기술지원, 사용여부, 수정, 순서변경, 추가, 읽기, 수정, 삭제, 등록인원수, 사용자선택, 알림경계, 음성파일, 통신방향, 진척률, 장비상태, 차수, 팝업공지유무, 맵핑정보, 옵션기능, 배터리상태, 사용자맵핑, 체류시간, 이동속도, 기기구분, 배정, 모듈, 성공여부, 메뉴여부, 클릭횟수*/ body .wrapper .listDiv .item.no, body .wrapper .listDiv .item.orderNm, body .wrapper .listDiv .item.regUser, body .wrapper .listDiv .item.userNm, body .wrapper .listDiv .item.companyDiv, body .wrapper .listDiv .item.qnaYn, body .wrapper .listDiv .item.useYn, body .wrapper .listDiv .item.modYn, body .wrapper .listDiv .item.changeOrder, body .wrapper .listDiv .item.allowAddYn, body .wrapper .listDiv .item.allowReadYn, body .wrapper .listDiv .item.allowModYn, body .wrapper .listDiv .item.allowDelYn, body .wrapper .listDiv .item.permUserCnt, body .wrapper .listDiv .item.selectUserInput, body .wrapper .listDiv .item.brodcastBoundary, body .wrapper .listDiv .item.brodcastMusicFile, body .wrapper .listDiv .item.communiteDir, body .wrapper .listDiv .item.distanceP, body .wrapper .listDiv .item.equipmentStat, body .wrapper .listDiv .item.orderNm, body .wrapper .listDiv .item.noticePopYn, body .wrapper .listDiv .item.mappingInfo, body .wrapper .listDiv .item.optionFunc, body .wrapper .listDiv .item.battaryState, body .wrapper .listDiv .item.userMapping, body .wrapper .listDiv .item.stayTime, body .wrapper .listDiv .item.speed, body .wrapper .listDiv .item.deviceCls, body .wrapper .listDiv .item.allocation, body .wrapper .listDiv .item.moduleNm, body .wrapper .listDiv .item.successYn, body .wrapper .listDiv .item.menuYn, body .wrapper .listDiv .item.clickCnt {flex: 0 0 90px; width: 90px;min-width: 90px;} /*등록일, 전송테스트, 로케이션, 작업일시, 검수항목, 점검구분, 발생 감지기준, 장비입고일자, 상태변경일, 차량번호, 보고서 상태, 토글버튼, 이력알람분류, 방송장비, 통신상태*/ body .wrapper .listDiv .item.regDt, body .wrapper .listDiv .item.sendTest, body .wrapper .listDiv .item.location, body .wrapper .listDiv .item.distanceDt, body .wrapper .listDiv .item.confirmItem, body .wrapper .listDiv .item.checkItem, body .wrapper .listDiv .item.occSensing, body .wrapper .listDiv .item.getEquipDt, body .wrapper .listDiv .item.changeStatDt, body .wrapper .listDiv .item.carNum, body .wrapper .listDiv .item.reportStat, body .wrapper .listDiv .item.switchItem, body .wrapper .listDiv .item.alarmType, body .wrapper .listDiv .item.equipNm, body .wrapper .listDiv .item.heartRate, body .wrapper .listDiv .item.skinTemp, body .wrapper .listDiv .item.safeEventNm, body .wrapper .listDiv .item.communiteStat {flex: 0 0 100px; width: 100px;min-width: 100px;} /*설계거리, 일진척량, 진척량누계, 시스템문의 상태, 개인지급장비(비콘,안전고리등) */ body .wrapper .listDiv .item.distance, body .wrapper .listDiv .item.progressDay, body .wrapper .listDiv .item.progressTotal, body .wrapper .listDiv .item.sysInqStat, body .wrapper .listDiv .item.perEquip {flex:0 0 110px; width: 110px;min-width: 110px;} /*사용자 구분, 사용자 소속, 사용자 ID, 사용자 직종, 대분류, 중분류, 소분류, 센서종류, 시스템명, 보고서 구분, cctv맵핑 스피커맵핑, AS구분, 접속시간, 사번*/ body .wrapper .listDiv .item.userClass, body .wrapper .listDiv .item.userTeam, body .wrapper .listDiv .item.userId, body .wrapper .listDiv .item.userOcc, body .wrapper .listDiv .item.largeGroup, body .wrapper .listDiv .item.mediumGroup, body .wrapper .listDiv .item.smallGroup, body .wrapper .listDiv .item.sensorType, body .wrapper .listDiv .item.reportClass, body .wrapper .listDiv .item.cctvMapping, body .wrapper .listDiv .item.speakerMapping, body .wrapper .listDiv .item.asClass, body .wrapper .listDiv .item.loginDt, body .wrapper .listDiv .item.logOutDt, body .wrapper .listDiv .item.accessDt, body .wrapper .listDiv .item.empNo {flex: 0 0 120px; width: 120px;min-width: 120px;} /*존, 시스템문의 등록일, 발생일시, 확인일시, 확인자, 들어간시간, 나온시간, 이력알람전송일시, 복구일시*/ body .wrapper .listDiv .item.zone, body .wrapper .listDiv .item.sysInqRegDt, body .wrapper .listDiv .item.occDt, body .wrapper .listDiv .item.chkDt, body .wrapper .listDiv .item.chkUser, body .wrapper .listDiv .item.finDt, body .wrapper .listDiv .item.inTime, body .wrapper .listDiv .item.outTime, body .wrapper .listDiv .item.alarmDt, body .wrapper .listDiv .item.repairDt{flex:0 0 130px; width: 130px;min-width: 130px;} /*분류코드*/ body .wrapper .listDiv .item.itemCd {flex:0 0 140px; width:140px;min-width: 140px;} /*사용자 연락처, 시스템명, API명, 발생일시, 품명, 명칭, 기기사양, 최종등록시간(위치&), 수신일시, 이력알람수신자*/ body .wrapper .listDiv .item.userContactNum, body .wrapper .listDiv .item.sysNm, body .wrapper .listDiv .item.apiNm, body .wrapper .listDiv .item.occDate, body .wrapper .listDiv .item.productNm, body .wrapper .listDiv .item.designation, body .wrapper .listDiv .item.DeviceSpe, body .wrapper .listDiv .item.lastCheckTime, body .wrapper .listDiv .item.sensingDt, body .wrapper .listDiv .item.alarmTgUser {flex: 0 0 170px; width: 170px;min-width: 170px;} /*설계거리 포함 선택, 시리얼넘버s/n, 센서 ID, 작업일자*/ body .wrapper .listDiv .item.distanceYn, body .wrapper .listDiv .item.serialNumber, body .wrapper .listDiv .item.sensorId, body .wrapper .listDiv .item.workDt {flex:0 0 170px; width: 170px;min-width: 170px;} /*업체명, 대메뉴, 소메뉴, 사용자 사이트, 공지기간, 등록자(회사 포함)*/ body .wrapper .listDiv .item.companyNm, body .wrapper .listDiv .item.largeMenu, body .wrapper .listDiv .item.smallMenu, body .wrapper .listDiv .item.siteNm, body .wrapper .listDiv .item.noticePrd, body .wrapper .listDiv .item.regCompanyNUser {flex: 0 0 190px; width: 190px;min-width: 190px;} /*사용자 이메일, 관리, 등록, 검토, 확인, 로그인시간, 메뉴ID*/ body .wrapper .listDiv .item.userEmail, body .wrapper .listDiv .item.management, body .wrapper .listDiv .item.regInfo, body .wrapper .listDiv .item.reviewInfo, body .wrapper .listDiv .item.checkInfo, body .wrapper .listDiv .item.loginDt, body .wrapper .listDiv .item.menuId {flex: 0 0 200px; width: 200px;min-width: 200px;} /*권한명, url이력, 메뉴이름, 공지대상, 감지내용*/ body .wrapper .listDiv .item.permissionNm, body .wrapper .listDiv .item.urlChk, body .wrapper .listDiv .item.menuNm, body .wrapper .listDiv .item.noticeTg, body .wrapper .listDiv .item.sensingDetail {flex: 0 0 250px; width: 250px;min-width: 250px;} /*수신시간 설정, 시스템문의 등록자, 이력알람sms수신자*/ body .wrapper .listDiv .item.setReceiveTime, body .wrapper .listDiv .item.sysInqRegUser {flex: 0 0 270px; width: 270px;min-width: 270px;} /*보고서 메모*/ body .wrapper .listDiv .item.reportMemo {flex: 0 0 300px; width: 300px;min-width: 300px;} /*분류명, 요청메세지, 시스템 오류메세지, 공지사항 제목, 시스템문의 제목*/ body .wrapper .listDiv .item.sysInqRegUser, body .wrapper .listDiv .item.alarmSmsTgUser {flex: 0 0 270px; width: 270px;min-width: 270px;} /*보고서 메모, 이력알람내용*/ body .wrapper .listDiv .item.reportMemo, body .wrapper .listDiv .item.alarmText {flex: 0 0 300px; width: 300px;min-width: 300px;} /*점검 내용, 작업내용, 검수내용*/ body .wrapper .listDiv .item.checkDetail, body .wrapper .listDiv .item.confirmDetail, body .wrapper .listDiv .item.workDetail {flex: 0 0 400px; width: 400px;min-width: 400px;} /*분류명, 요청메세지, 시스템 오류메세지, 공지사항 제목, 시스템문의 제목, 비고*/ body .wrapper .listDiv .item.itemNm, body .wrapper .listDiv .item.reqMsg, body .wrapper .listDiv .item.sysErrorMsg, body .wrapper .listDiv .item.noticeTit, body .wrapper .listDiv .item.sysInqTit, body .wrapper .listDiv .item.note {flex:0 0 550px; width:550px;min-width: 550px;} body .wrapper .listDiv .item.file {flex:0 0 550px; width:550px;min-width: 550px;} /*사용자, 안내멘트, faq타이틀*/ body .wrapper .listDiv .item.permUser, body .wrapper .listDiv .item.brodcastMent, body .wrapper .listDiv .item.faqTit {flex: 0 0 800px; width: 800px;min-width: 800px;} .ui-widget.ui-widget-content{border: none; box-shadow: none;} /* .dateDiv {display: flex; align-items: center;} .dateDiv input {background-color: transparent; width: 100%; cursor: default;} */ .dateDiv {border: 1px solid #aaa; background-color: #fff;border-radius: 3px;} .dateDiv input {background-color: transparent; text-align: center; width: 80px;cursor: default; height: 36px; min-height: 36px;} .rangeDtPickDiv .dateDiv input {width: 100%;} .modal .dateDiv input {text-align: left;} .dateDiv input.timeInput{width: 70px;} .ui-timepicker-standard .ui-menu-item {width: 100% !important;} .ui-timepicker-standard a {font-size: 0.925rem;} .modal .duplBtn, .modal label {margin-left: 5px;} .modal .popupCloseBtn {position: absolute;top: 15px;right: 15px;} .divLine {width:1px; height:100%; border-left:1px dotted #999} .articleTit {display: flex;flex-direction: column;gap: 0.5rem; font-size:1.125rem; min-height: 40px; margin-bottom: 0.5rem;} .articleTit .tit {display: flex;align-items: center;font-weight: 700; height: 100%;} .articleTit .ment {font-size: 0.925rem;font-weight: 400;color: #7f94a9;} .changeOrder i{cursor:pointer; overflow: hidden;font-style: normal; cursor:pointer} .banSelect {user-select: none;} .banSelect * {user-select: none;} .listBodyBtnList .btnDiv.excelBtnDiv {display: flex; justify-content: flex-end; margin: 1rem 0; gap: 0.5rem;} .btnDiv .btn.btn-excel {background-color: #fff;color: #197059 !important;border: 1px solid #197059;font-weight: 500;} .btnDiv .btn.btn-excel i {margin-right: 5px;} @media screen and (max-width:940px) { body.forTablet .wrapper {padding:16px 16px 0px;margin-left: 0;} body.forTablet .wrapper .listDiv .item {min-width: auto !important;} body.forTablet .titDiv {width:unset; margin-bottom:10px} body.forTablet .titDiv .backBtnDiv {flex:unset; margin-right:14px} body.forTablet .titDiv .pageTit {color:#213a63; margin-right:auto} body.forTablet .titDiv .pageTit .selectDiv {width:94px; margin-right:6px; font-size:18px} body.forTablet .titDiv .comment {flex:0 0 100%; margin-top:14px; order:3} body.forTablet .titDiv .viewOptionBtn {margin-left:auto} body.forTablet .titDiv button, .titDiv input {display:flex !important;} body.forTablet .tabDiv {border:unset} body.forTablet .tabDiv .subTab {min-width:unset; flex:1; border-top-left-radius:6px; border-top-right-radius:6px;} body.forTablet .tabDiv {flex-direction:column; justify-content:unset} body.forTablet .tabDiv .bTab {padding:unset} body.forTablet .pageBtnDiv button[title="추가"] {display:none} .titDiv .comment{margin-left: 0;} } @media screen and (min-width:941px) { .bodyDiv {overflow-y:auto; } } @media screen and (max-width:640px) { body.forMobile .titDiv .pageTit .proTit{display: none;} } /* 태블릿 모바일 센서 및 장비 반응형 카드형식 공통*/ body.forTablet .sensorItemDiv .listBodyDiv .item.forEnter{display: none;} body.forTablet .sensorItemDiv .item.battaryState.lowBattary{color: #e30b0b; font-weight: 600;} body.forTablet .sensorItemDiv .item.userMapping span {position: relative} @media screen and (max-width:940px) { body.forTablet .sensorItemDiv .listDiv {width:unset !important;} body.forTablet .sensorItemDiv .listDiv .listHeaderDiv {display:none !important} body.forTablet .sensorItemDiv .listDiv .listBodyDiv .row {flex-flow:wrap; align-items:unset; position:relative; padding:0.725rem; background-color:#fff; margin-bottom:0.5rem; overflow:hidden;} body.forTablet .sensorItemDiv .listDiv .listBodyDiv .row .item {flex:unset; width:unset; padding:4px 5px; min-height:unset; border-bottom: none;} body.forTablet .sensorItemDiv .listBodyDiv .item.no {position:absolute !important; top:50%; color:rgba(0,0,0,0.05); font-size:4rem; font-weight:700; letter-spacing:-1px; word-break: keep-all;left: 50%; transform: translate(-50%,-50%);} body.forTablet .sensorItemDiv .item.siteNm {width:unset !important; justify-content:unset; text-align: start;} body.forTablet .sensorItemDiv .item.smallGroup{gap: 0; flex: unset !important;} body.forTablet .sensorItemDiv .item.productNm{gap: 0; flex: unset !important;} body.forTablet .sensorItemDiv .item.designation{width: 100% !important; justify-content: unset !important;} body.forTablet .sensorItemDiv .item.DeviceSpe{width: 100% !important; justify-content: unset !important;} body.forTablet .sensorItemDiv .item.zone {width: unset !important; justify-content: unset;text-align: start;} body.forTablet .sensorItemDiv .item.location {width:unset !important; justify-content:unset !important;} body.forTablet .sensorItemDiv .item.equipmentStat {color:#87949f; font-weight:500} body.forTablet .sensorItemDiv .item.equipmentStat span {border-radius: 40px;width: 67px;font-size: 14px;text-align: center;padding: 0.4rem 0 !important;} body.forTablet .sensorItemDiv .item.equipmentStat.using span{background-color: #186fd5;color: #fff !important;} body.forTablet .sensorItemDiv .item.equipmentStat.warehouse span{background-color: #777;color: #fff !important;} body.forTablet .sensorItemDiv .item.equipmentStat.disuse span{background-color: #777;color: #fff !important;} body.forTablet .sensorItemDiv .item.communiteStat span {font-size: 14px;text-align: center;padding:0.4rem; border-radius: 40px; min-width: 70px;} body.forTablet .sensorItemDiv .item.communiteStat.normal span{background-color: #186fd5;color: #fff !important;} body.forTablet .sensorItemDiv .item.communiteStat.faulty span{background-color: #e30b0b;color: #fff !important;} body.forTablet .sensorItemDiv .item.communiteStat span::before{width: auto; content: "\e585";margin-right: 0; font-weight: 900; font-family: 'fa'; color: #fff; margin-right: 0.25rem;} body.forTablet .sensorItemDiv .item.battaryState span{margin-left:0.5rem; font-weight: 600; min-width:unset !important;display: flex;flex-direction: column;align-items: center;} body.forTablet .sensorItemDiv .item.battaryState span::before{content: "\f240"; font-family: 'fa'; font-size:32px; font-weight: 700; width: auto; padding: 0; margin: 0; background-color: unset; padding-right: 0.25rem;} body.forTablet .sensorItemDiv .item.battaryState.lowBattary span::before{content: "\f243";} body.forTablet .sensorItemDiv .item.sensorNum {width: unset !important;justify-content: unset !important;} body.forTablet .sensorItemDiv .item.sensorNum span {border-radius: 40px;width: 50px;font-size: 14px;text-align: center;padding: 0.4rem 0 !important; background-color: #7a7979;color: #fff !important;} body.forTablet .sensorItemDiv .item.sensorNum span::before{content: "센서";} body.forTablet .sensorItemDiv .item.sensorNum span::after{content: "개";} body.forTablet .sensorItemDiv .item.userMapping p {font-size:1rem; font-weight:600} body.forTablet .sensorItemDiv .item.userMapping span {position: relative; background-color:#1db6c3; color:#fff; font-weight:500; min-width:78px !important; display:inline-block; padding:4px} body.forTablet .sensorItemDiv .item.userMapping span::before {content:'\f007' !important; font-family:'fa'; font-size:0.825rem; font-weight:600; color:#07818c; position:relative !important; margin-right:8px; bottom:unset !important; left:unset !important; border:unset !important} body.forTablet .sensorItemDiv .listBodyDiv .item.forEnter{display: block; width: 100% !important; padding: 0 !important; height: 0;} body.forTablet .sensorItemDiv .item.siteNm{order: 1; padding: 0.25rem 0 !important; padding-left: 0.25rem !important;} body.forTablet .sensorItemDiv .item.zone{order: 2; padding: 0.25rem 0 !important; padding-left: 0.25rem !important;} body.forTablet .sensorItemDiv .item.location{order: 3; padding: 0.25rem 0 !important; padding-left: 0.25rem !important;} body.forTablet .sensorItemDiv .item.forEnter{order: 4;} body.forTablet .sensorItemDiv .item.smallGroup{order: 5; padding: 0.25rem 0 !important; padding-left: 0.25rem !important;} body.forTablet .sensorItemDiv .item.productNm{order: 6; padding: 0.25rem 0 !important; padding-left: 0.25rem !important;} body.forTablet .sensorItemDiv .item.designation{order: 7; padding: 0.25rem 0 !important; padding-left: 0.25rem !important;} body.forTablet .sensorItemDiv .item.equipmentStat{order: 8; padding: 0.25rem 0 !important; padding-left: 0.25rem !important;} body.forTablet .sensorItemDiv .item.communiteStat{order: 9; padding: 0.25rem 0 !important; padding-left: 0.25rem !important;} body.forTablet .sensorItemDiv .item.battaryState{order: 10; padding: 0.25rem 0 !important; padding-left: 0.25rem !important;} body.forTablet .sensorItemDiv .item.sensorNum{order: 11; padding: 0.25rem 0 !important; padding-left: 0.25rem !important;} body.forTablet .sensorItemDiv .item.userMapping{order: 7; padding: 0.25rem 0 !important; padding-left: 0.25rem !important;} body.forTablet .sensorItemDiv .item.DeviceSpe{display: none !important;} body.forTablet .sensorItemDiv .item.userContactNum{order: 11; padding: 0.25rem 0 !important; padding-left: 0.25rem !important;} body.forTablet .sensorItemDiv .item.siteNm, body.forTablet .sensorItemDiv .item.zone, body.forTablet .sensorItemDiv .item.location {font-size: 14px;} /* 매핑제거? */ body.forTablet .sensorItemDiv .item.DeviceSpe {} body.forTablet .sensorItemDiv .item.nvrItem {order:12} body.forTablet .sensorItemDiv .item.speakerItem {order:13} body.forTablet .sensorItemDiv .item.cctvMapping {order:14} body.forTablet .sensorItemDiv .item.speakerMapping {order:15} body.forTablet .sensorItemDiv .item.nvrItem, body.forTablet .sensorItemDiv .item.speakerItem, body.forTablet .sensorItemDiv .item.cctvMapping, body.forTablet .sensorItemDiv .item.speakerMapping {margin-left:0.5rem} body.forTablet .sensorItemDiv .item.smallGroup, body.forTablet .sensorItemDiv .item.productNm {font-size: 16px;font-weight: 700;} body.forTablet .sensorItemDiv .item.designation {font-size: 14px; font-weight: 700;} .bodyDiv .listBodyDiv .item.userMapping p span::before {border-color: #fff;} } .bodyDiv .listBodyDiv .item.userMapping p {color: blue; position: relative;} .bodyDiv .listBodyDiv .item.userMapping p span::before {width: 100%; content: ''; height: 0px; bottom: 4px; position: absolute; left: 0; border-bottom: 1px solid; padding: 0; left: 50%; transform: translateX(-50%);} /*********************** list view write edit srch 공통**************************/ .listDiv {width:fit-content; display:flex; flex-direction:column; padding:1.5rem; gap:0.5rem; min-height:400px} body div.wrapper .listDiv {gap:0rem !important} .listDiv thead {height:50px} .listDiv .listHeaderDiv .row {align-items:center; border-top:1px solid #999; border-bottom:1px solid #999; background-color:#f1f1f1; font-size:0.875rem; font-weight:600} .listDiv .listHeaderDiv .row .item {height:34px} .listDiv .listHeaderDiv .row .item::before {content:""; width:1px; height:14px; position:absolute; top:50%; left:0; transform:translateY(-7px)} .listDiv table {font-size:0.938rem; font-weight:500; color:#000} .listDiv table thead {background-color:#d7dfea; position:sticky; top:0; left:0; z-index:1} .listDiv table thead td {border:1px solid #a7a9ad; padding:8px 4px; text-align:center} .listDiv table tbody td {border:1px solid #c8c4bf; padding:14px 8px} .listDiv table tbody {background-color:#fff; overflow:auto} .listDiv table tfoot {background-color:#efede9; position:sticky; bottom:0; left:0} .listDiv table tfoot td {border:1px solid #c8c4bf; padding:8px} .listDiv table td .btn {position:unset} .listDiv .row {display:flex} .listDiv .listBodyDiv {overflow-x:hidden;width: fit-content;} .listDiv .listBodyDiv .row {border-bottom:1px solid #cbc4bc; align-items:flex-start; background-color:transparent} .listDiv .listBodyDiv .row.selectShow {background-color: #bdcbeb;} .listDiv .listBodyDiv .row.selectShow:hover {background-color: #bdcbeb;} /* 모바일에서 hover 제외. 브라우저에서만 작동 */ @media (hover:hover) { .listDiv .listBodyDiv .row:hover { /* color:#047dcf; */ background-color:#f4f4f4; cursor:pointer} .listDiv table tbody tr:hover { /* color:#047dcf; */ background-color:#f4f4f4; cursor:pointer} } .listDiv .listBodyDiv .row.focus {background-color:#f4f4f4; cursor:pointer} .listDiv .listBodyDiv .row .item {display:flex; align-items:center; min-height:54px; padding:12px 8px; position:relative; word-break:keep-all; flex-flow:row wrap} .listDiv .moreListDiv {display:flex; align-items:center; justify-content:center; padding:1.5rem; border:none} .listDiv .moreListDiv .moreListBtn {border:1px solid #aaa; background-color:#fff; border-radius:4px; padding:11px 60px 9px} .listDiv .moreListDiv .moreListBtn::after {content:"더보기 +20"} .listDiv .moreListDiv .moreListBtn:hover {color:#047dcf; border:1px solid #047dcf} @media screen and (max-width:940px) { body.forTablet .listDiv {min-height:200px; padding: 0;} body.forTablet .listDiv .listBodyDiv {background-color:transparent; width: unset;} body.forTablet .wrapper .listDiv .listBodyDiv {padding-bottom: 5rem;} body.forTablet .bodyDiv .listDiv .listHeaderDiv {display: none;} } .listDiv .listBtnDiv {display:flex; align-items:center} .listDiv .listBtnDiv .btn {min-width:6rem} @media screen and (max-width:760px) { body.forTablet .row.bCode .inputTip {width:100%} } @media screen and (max-width:640px) { body.forMobile .listDiv {padding: 0;} } body .srchSection {margin-bottom: 1rem!important;} .listDiv .srchDiv .srchHead{display: none;} /*데이터 없을 때 문구*/ #othereqlist .row.noData{padding: 1rem; border-bottom: none;} #othereqlist .row.noData:hover{background-color: transparent; cursor: default;} /*상태 표시*/ .sensorItemDiv .listBodyDiv .row .item span:not(.input-delete span, .slider){min-width: 70px; border-radius: 40px; text-align: center; padding:6px 10px; font-size:0.9rem} .sensorItemDiv .listBodyDiv .row .item.communiteStat span::before{width: auto;content: "\e585";margin-right: 0;font-weight: 900;font-family: 'fa';color: #fff; margin-right: 0.25rem;} .sensorItemDiv .item.equipmentStat.using span{background-color: #186fd5;color: #fff !important;} .sensorItemDiv .item.equipmentStat.warehouse span{background-color: #777;color: #fff !important;} .sensorItemDiv .item.equipmentStat.disuse span{background-color: #777;color: #fff !important;} .sensorItemDiv .item.communiteStat.normal span{background-color: #186fd5;color: #fff !important;} .sensorItemDiv .item.communiteStat.faulty span{background-color: #e30b0b;color: #fff !important;} /* .srchDiv {display:flex; align-items:center; flex-flow:row wrap; padding:1rem; font-size:0.9rem; gap:0.5rem; background-color:#efefef; height: 100%;} */ .srchDiv {display:flex; align-items:center; flex-flow:row wrap; font-size:0.9rem; gap:0.5rem; height: 100%;} .srchDiv .row {display:flex; flex-direction:row; align-items:center; gap:6px} .srchDiv .row .item {font-weight:700} .srchDiv .row .answer {display:flex; align-items:center; font-size:0.925rem} .srchDiv .row .answer * {font-size:0.925rem !important; } .srchDiv .row .selectDiv{height: 38px;} .srchDiv .row.bCode .answer {gap:0.125rem; width:140px} .srchDiv .row.bCode input {padding:0; text-align:center} .srchDiv .row.bCode .selectDiv {flex:0 0 40px; height:34px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .srchDiv .row.bCode .selectDiv label::after {content:''} .srchDiv .row.bCode .digit2 {flex:0 0 30px} .srchDiv .row.bCode .select {flex:0 0 37px} .srchDiv .row.multiInput .answer {display:flex; align-items:center; gap:0.25rem} .srchDiv .row.multiLabel .answer {display:flex; flex-flow:row wrap; gap:0.875rem; padding:0.5rem 0} .srchDiv .row.multiLabel .answer label {white-space:nowrap} .srchDiv .row.multiLabel .answer label input {margin-right:6px} .srchDiv .row.btnDiv {gap:0.5rem} .srchDiv .row input[type="text"], .srchDiv .btnDiv {display:flex; align-items:center; gap:0.5rem} .srchDiv .btnDiv .btn-close {display:none} .srchDiv .answer.mail {display:flex} @media screen and (max-width:940px) { body.forTablet .listDiv div:not(.mbShow) .srchDiv .srchHead{display: inline-block; font-size: 1em; font-weight: 800; padding: 2rem 0 0.5rem; text-align: left; width: 100%;} body.forTablet .listDiv div:not(.mbShow) .srchDiv .srchBody.row {justify-content: unset; flex-flow: wrap;gap: 1rem;} body.forTablet .listDiv div:not(.mbShow) .srchDiv .row.unsetRow{width: unset} body.forTablet:not(.eventAsafe) .listDiv.eventDiv .srchDiv .row.unsetRow{width: 15% !important;} body.forTablet:not(.eventAsafe) .listDiv.eventDiv .srchDiv .row.unsetRow:nth-of-type(7){width: 80% !important;} body.forTablet .listDiv .srchSection:not(.mbShow) {display:none; background-color: rgba(3,19,41,0.5); height: 100%; position: fixed; z-index: 21; width: 100%;bottom: 0;left: 0; margin-bottom: 0 !important;align-items: end;} body.forTablet .listDiv div:not(.mbShow) .srchDiv {height: auto; flex-direction: column; align-items: flex-start; z-index: 10; width: 100%;margin-bottom: 0 !important;gap: 0.8rem; padding: 0.5rem 2rem 1rem;border-radius: 1rem 1rem 0 0;background-color: #fff;} body.forTablet .listDiv div:not(.mbShow) .srchDiv .row.srchBody{width: 100%;} body.forTablet .listDiv div:not(.mbShow) .srchDiv .row {width:100%; justify-content:space-between} body.forTablet .listDiv div:not(.mbShow) .srchDiv .row .item {width:80px} body.forTablet .listDiv div:not(.mbShow) .srchDiv .row .answer {flex:1;} body.forTablet .listDiv div:not(.mbShow) .srchDiv .btnDiv {margin-top: auto; width: 100%; justify-content:space-between;} body.forTablet .listDiv div:not(.mbShow) .srchDiv .btnDiv .btn-srch {width:49%; height: 45px;} body.forTablet .listDiv div:not(.mbShow) .srchDiv .btnDiv .btn-reset {display:none} body.forTablet .listDiv div:not(.mbShow) .srchDiv .btnDiv .btn-download {display:none} body.forTablet div:not(.mbShow) .srchDiv .btnDiv .btn-close {display:flex; width:49%; height: 45px;} body.forTablet div:not(.mbShow) .srchDiv .btnDiv {height: unset;} body.forTablet div:not(.mbShow) .srchDiv .btnDiv .divLine{display: none;} body.forTablet div:not(.mbShow) .srchDiv .btnDiv .addModalBtn{display: none;} } @media screen and (max-width:760px) { body.forTablet .listDiv div:not(.mbShow) .srchDiv .row {width:100%} body.forTablet .listDiv div:not(.mbShow) .srchDiv .row .answer {padding-right:unset} body.forTablet .listDiv div:not(.mbShow) .srchDiv .btnDiv {padding-top:0.5rem;} body.forTablet:not(.eventAsafe) .listDiv.eventDiv .srchDiv .row.unsetRow{width: 25% !important;} body.forTablet:not(.eventAsafe) .listDiv.eventDiv .srchDiv .row.unsetRow:nth-of-type(7){width: 50% !important;} } .multidropdown {position:relative} .multidropdown .dropdown {width:100%; position:absolute; top:33px; left:0; z-index:1; background-color:#fff; padding:0.5rem; border:1px solid #aaa; border-radius:4px} .multidropdown label {display:block} .multidropdown label+label {margin-top:6px} body .wrapper .listFooterDiv.btnDiv {padding: 1rem; gap: 0.5rem; display: flex;} .listDiv .listBodyDiv .row.noItemsRow ~ * {height: 0 !important;border: 0 !important;overflow: hidden !important;background: none !important;} /*************************** 모달 공통 ********************************/ .modal {position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.2); top:0; left:0; display:none; z-index:100} .modal .modal_content form {background-color: #fff;} .modal .modal_content .titDiv{color: unset; margin-bottom: 1rem; align-items: center;} .modal .modal_content .titDiv .tit{margin-bottom: 0; margin-right: 1rem;} .modal form > .tit {font-weight: 700;padding: 2rem 1.5rem 1.5rem !important;font-size: 1.1rem;} .modal form > .tit .comment {display:inline-block; margin-left:20px; padding: 6px 8px 5px 28px; background-color: #e0e1e2; color: #cb0000; border-radius: 15px; font-size: 0.895rem; line-height: 1.2; font-weight: normal; word-break: break-all; position: relative;} .modal form > .tit .comment::before {content: '\f05a'; font-family: 'fa'; font-weight: 700; margin-right: 6px; color: #cb0000; position: absolute; top: 7px; left: 7px;} .modal .modal_content pre {line-height:1.6; font-size:1rem; font-weight:500; font-family:Pretendard} .modal:not(.infoModal) .modalBody {padding-top: 0 !important;} .modal .modalWrap {width:100%; height:100%; display:flex; align-items:center; justify-content:center} /* .modal_content {display:flex; flex-direction:column; min-width:320px; max-width:1000px; max-height:98%; overflow:auto; background-color: #e7eaec; line-height:23px; border-radius:1rem; position:relative; box-shadow:0 12px 30px rgba(0,0,0,0.5); */ /* opacity:0; transform:translate(0, 100%); animation:modalShow 0.5s forwards;} */ .modal_content {display:flex; flex-direction:column; min-width:320px; max-width:600px; max-height:98%; overflow:auto; background-color: #e7eaec; line-height:23px; border-radius:1rem; position:relative; box-shadow:0 12px 30px rgba(0,0,0,0.5); opacity:0; /* transform:translate(0, 100%); */ animation:modalShow 0.5s forwards;} .modalComment{height: fit-content; padding: 0.75rem 1.5rem; background: #fff8bc; word-break: break-all; flex:1; line-height: 1.25rem; color: #444; font-size: 0.94rem; letter-spacing: -0.5px;} .modalComment .fa{font-size: 0.875rem; color: #949494} .modal_content.show { opacity:1; transform:translateY(0); } @keyframes modalShow { 0% { opacity:0; transform:translate(0, -5%); } 100% { opacity:1; transform:translate(0, 0); } } @media screen and (max-width:940px) { .modal_content .modalBtnGroup{padding: 0 0.5rem !important;} body.forTablet .modal_content {min-width:280px; max-width:98% !important;} body.dash_integration #dashSettingModal .modal_content .imageModeBtn{width: 150px;text-align: center;font-size: 0.9rem;} } .modal_content .modalTitle {padding:1rem 1.5rem; font-size:1.125rem; font-weight:700; color:#24435d; text-align:center} .modal_content .modalBody {flex:1; display:flex; padding:1.5rem; background-color:#fff; overflow:auto;} .modal_content .modalBody .commonMent {padding:30px 20px;font-size:16px; text-align:center; line-height:1.4; flex:1; position:relative} .modal_content .modalBody .commonMent p {line-height:1.4; word-break:keep-all} .modal_content .modalBody .commonMent .finishCount {position:absolute; right:0; top:0; font-size:16px; color:red} .modal_content .modalInfo {padding:16px; background-color:#ffdc2c; line-height:1.2} .modal_content .modalInfo li {list-style:disc !important; margin-left:20px !important; line-height:1.4; word-break:keep-all} .modal_content .modalInfo li+li {margin-top:6px} .modal_content .modalBtnGroup {display:flex; flex-direction:row; justify-content:space-between; padding: 0 1rem; box-shadow: inset 0 6px 10px rgba(0,0,0,0.1); background-color: #e7eaec;gap: 0.4rem;} .modal .modalBtnGroup .btn-md{min-width: 80px;} .modal_content .modalBtnGroup.onlyR{justify-content: flex-end;} .modal_content .modalBtnDiv {display:flex; flex-direction:row; justify-content:center; padding:0.725rem 0; gap:0.725rem} .modal_content .modalBtnDiv > .btn {flex:0 0 auto;} /* .modal_content .modalBtnDiv .btn-yellow {margin-right:10px} */ @media screen and (max-width:940px) { body.forTablet .modal_content .modalBody .commonMent {padding:20px 0 !important} body.forTablet .modal_content .modalBtnDiv {gap: 0.4rem;} } @media screen and (max-width:760px) { .modal_content .modalBody {padding:1rem;flex-direction: column;} .modal_content .modalBody .commonMent {padding:20px 0 !important} } @media screen and (max-width:400px) { .modal .modalBtnGroup .btn-md{min-width: 60px !important;} } .modal_content .xBtn {position:absolute; top:10px; right:10px; cursor:pointer; z-index:101} .modal_content .xBtn::before {content:'\f00d'; font-family:'fa'; font-size:30px; font-weight:100; color:#444} .modal_content .optionDiv {margin-top:20px} .modal_content textarea {width:100%; border: 1px solid #aaa;background-color: #fff;border-radius: 3px;outline: none;font-family: 'Pretendard', 'malgun-gothic', sans-serif;font-size: 1rem;font-weight: 400;max-height: 400px;padding: 8px 4px;overflow: auto;resize: none;} .modal_content .optionDiv input+label {margin-left:6px} .modal .modalFormDiv .row {display:flex; flex-direction:row} .modal .modalFormDiv .row.useYnRow {width: 100%; display: inline-flex;} /* .modal .modalFormDiv .row > .item {margin-bottom: 0.25rem;} */ .modal .modalFormDiv .row > .answer {min-height:38px} .modal .modalFormDiv .row+.row {margin-top:1rem} .modal .modalFormDiv .row .item {display:flex; min-width:100px; align-items:center; letter-spacing: -1px; word-break: break-word; font-weight:600} .modal .modalFormDiv .row .answer{flex:1 1 auto; min-width:300px; display:flex} .modal .modalFormDiv .row .answer.flex-direction-column .selectDiv+.selectDiv {margin-top:6px;} .datePickerModal .modal_content {min-height:420px } @media screen and (max-width:640px) { body.forMobile .modal .modalFormDiv {flex: 1; height: 100%;width: 100%;} .modal .modalFormDiv .row {flex-direction:column} body.forMobile .modal .modalFormDiv .row+.row {margin-top:10px} body.forMobile .modal .modalFormDiv .row .item {display:flex; min-width:1px; padding:4px 0} body.forMobile .modal .modalFormDiv .row .answer{display:flex; min-width:1px} } .alertMent {font-size:1rem; min-width:320px; text-align:center; padding:1rem; font-weight:500; line-height:1.4; word-break:keep-all;display: flex;align-items: center; justify-content:center; gap: 0.25rem;} .memoSection {display:flex; flex-direction:column; gap:0.5rem !important; padding:1rem !important; border-radius:6px; background-color:#eaeef0} .memoSection .inputLine {display:flex; flex-direction:row; gap:4px} .memoSection .listLine {font-size:0.925rem} .memoSection .listLine li+li {margin-top:0.5rem} .memoSection .regUser {font-size:0.875rem; color:#7f94a9; margin-left:8px} .memoSection .regDate {font-size:0.875rem; color:#7f94a9; margin-left:4px} .modal .answer label:not(.btn) {margin: 0 0.5rem 0 0.2rem;} .modal .modalBody{gap: 1rem;} .modalBody .tit {font-weight: 700;padding: 0.5rem 0; margin-bottom: 1rem;font-size: 1.1rem;} .modal .modalBody .lDiv, .modal .modalBody .rDiv {display: flex;flex-direction: column; flex: 1;} .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{top: 50%;transform: translateY(-50%);} .ui-datepicker select.ui-datepicker-year, .ui-datepicker select.ui-datepicker-month{width: 30%;height: 30px;padding: 5px 2px;font-size: 14px;} .ui-datepicker select.ui-datepicker-year{margin: 1px 0.25rem 1px 0;} .ui-datepicker select.ui-datepicker-month{margin: 1px 0 1px 0.7rem;} .modal .modalFormDiv .srchSection .srchDiv .row {margin-top: 0;} .modal .modalFormDiv .srchSection .srchDiv .row .answer {min-width: auto;} .modal .modalFormDiv .listDiv{padding: 0;} /*no, 사용자 선택, 주의, 경고, 위험, PUSH, SMS, 사용유무*/ .modal .modalFormDiv .listDiv .item.no, .modal .modalFormDiv .listDiv .item.permCheckYn, .modal .modalFormDiv .listDiv .item.cautionYn, .modal .modalFormDiv .listDiv .item.warnYn, .modal .modalFormDiv .listDiv .item.dangerYn, .modal .modalFormDiv .listDiv .item.pushYn, .modal .modalFormDiv .listDiv .item.smsYn, .modal .modalFormDiv .listDiv .item.selectBroadcast, .modal .modalFormDiv .listDiv .item.delYn {width: 50px;flex: 0 0 50px;min-width: 50px;} /* 업체인원수, 업체장비수 */ .modal .modalFormDiv .listDiv .item.companyCnt, .modal .modalFormDiv .listDiv .item.equipCnt{width: 60px;flex: 0 0 60px;min-width: 60px;} /*사이트명, 알림 경계 */ .modal .modalFormDiv .listDiv .item.siteNm, .modal .modalFormDiv .listDiv .item.brodcastBoundary{width: 120px;flex: 0 0 120px;min-width: 120px;} /* 장비상태, 배터리잔량, 스마트밴드공통(체온,심박수,산소포화도,혈압), 센서 선택, 미리듣기 */ .modal .modalFormDiv .listDiv .item.equipmentStat, .modal .modalFormDiv .listDiv .item.battaryState, .modal .modalFormDiv .listDiv .item.bandCom, .modal .modalFormDiv .listDiv .item.sensorCheckYn, .modal .modalFormDiv .listDiv .item.audioPreview {width: 80px;flex: 0 0 80px;min-width: 80px;} /*대분류, 중분류, 스피커 옵션, 삭제, 순서변경, 추가버튼*/ .modal .modalFormDiv .listDiv .item.largeGroup, .modal .modalFormDiv .listDiv .item.mediumGroup, .modal .modalFormDiv .listDiv .item.speakerOption, .modal .modalFormDiv .listDiv .item.equipNum, .modal .modalFormDiv .listDiv .item.allowDelYn, .modal .modalFormDiv .listDiv .item.changeOrder, .modal .modalFormDiv .listDiv .item.addBtn {width: 90px;flex: 0 0 90px;min-width: 90px;} /*업체분류, 사용자명, 사용자 아이디, 로케이션, 모달시간공통(진입,진출,체류,체결,해제,누적), 직종, 해상도 정보ㅡ CCTV_고유키*/ .modal .modalFormDiv .listDiv .item.companyDiv, .modal .modalFormDiv .listDiv .item.userNm, .modal .modalFormDiv .listDiv .item.userId, .modal .modalFormDiv .listDiv .item.location, .modal .modalFormDiv .listDiv .item.sensorType, .modal .modalFormDiv .listDiv .item.timeCom, .modal .modalFormDiv .listDiv .item.userOcc, .modal .modalFormDiv .listDiv .item.checkType, .modal .modalFormDiv .listDiv .item.specialNote, .modal .modalFormDiv .listDiv .item.resolutionInfo, .modal .modalFormDiv .listDiv .item.cctvKey {width: 100px;flex: 0 0 100px;min-width: 100px;} /*부서*/ .modal .modalFormDiv .listDiv .item.userTeam {width: 120px;flex: 0 0 120px;min-width: 120px;} /* 존, 연락처 */ .modal .modalFormDiv .listDiv .item.zone, .modal .modalFormDiv .listDiv .item.userContactNum, .modal .modalFormDiv .listDiv .item.sensingDt {width: 130px;flex: 0 0 130px;min-width: 130px;} /*품명, 명칭, 설치 장소, CCTV 종류, 카테고리*/ .modal .modalFormDiv .listDiv .item.productNm, .modal .modalFormDiv .listDiv .item.designation, .modal .modalFormDiv .listDiv .item.installLoc, .modal .modalFormDiv .listDiv .item.cctvType, .modal .modalFormDiv .listDiv .item.category {width: 150px;flex: 0 0 150px;min-width: 150px;} .modal .modalFormDiv .listDiv .item.language {width: 150px;flex: 0 0 150px;min-width: 150px;} /* 시리얼넘버s/n */ .modal .modalFormDiv .listDiv .item.serialNumber {width: 170px;flex: 0 0 170px;min-width: 170px;} /*소분류, 업체명, CCTV play url*/ .modal .modalFormDiv .listDiv .item.smallGroup, .modal .modalFormDiv .listDiv .item.companyNm, .modal .modalFormDiv .listDiv .item.cctvPlayUrl {width: 200px;flex: 0 0 200px;min-width: 200px;} .modal .modalFormDiv .listDiv .item.brodcastMent {width: 300px;flex: 0 0 300px;min-width: 300px;} /*수신시간 설정*/ .modal .modalFormDiv .listDiv .item.setReceiveTime{width: 270px;flex: 0 0 270px;min-width: 270px;} /* 소계 */ .modal .modalFormDiv .listDiv .item.putTotal{width: 350px;flex: 0 0 350px;min-width: 350px;} .modal .modalFormDiv .listDiv .listBodyDiv .item.setReceiveTime{display: flex;flex-flow: row;gap: 1rem;} .modal .modalFormDiv .listDiv .listBodyDiv .item{min-width: unset;} /*no, 사용자checkbox, 사용자 radio, 알림경계*/ .modal .modalFormDiv .listDiv .item.no, .modal .modalFormDiv .listDiv .item.permCheckYn, .modal .modalFormDiv .listDiv .item.cautionYn, .modal .modalFormDiv .listDiv .item.warnYn, .modal .modalFormDiv .listDiv .item.dangerYn, .modal .modalFormDiv .listDiv .item.pushYn, .modal .modalFormDiv .listDiv .item.smsYn, .modal .modalFormDiv .listDiv .item.setReceiveTime, .modal .modalFormDiv .listDiv .item.selectBroadcast, .modal .modalFormDiv .listDiv .item.brodcastBoundary, .modal .modalFormDiv .listDiv .item.category {text-align: center; justify-content: center;} .modal .modalFormDiv.listDiv{padding: 0;} .modal .modalFormDiv.listDiv .listDiv {gap: 0;} .modal .modalFormDiv.listDiv .listDiv table{position: sticky;align-self: baseline;} .modal .modalFormDiv.listDiv .listBodyDiv .row {margin-top: 0;} .modal .modalBody article .tit {font-weight:700; padding:0.5rem 0} .modal .modalBody article table {width:100%} .modal .modalBody article td {border:1px solid #999; height:32px} .modal .modalBody article td.item {background-color:#efefef; padding:0.25rem; width:86px} .modal .modalBody article td.item.ver {width:38px} .modal .modalBody article td.answer.ver {width:60px} .modal .modalBody article td.answer {padding:2px} .modal .modalBody article td.input-delete.answer {display: revert;} .modal .modalBody article td select {height:38px; padding:6px 4px} /*.selectDiv::after {content: '\f107';font-family: 'fa';font-weight: 700;width: 0;height: 100%;position: absolute;top: 0;right: 10px;font-size: 14px;color: rgba(0, 0, 0, 0.4);display: flex;align-items: center;justify-content: center;z-index: 0;user-select: none;}*/ .selectDiv label::after {content: '' ;} .modal .modalBody article td.cdkeyInput {width: calc( 100% - 49px );} .modal .modalBody article td.answer .ipInput+.ipInput {margin-top:2px} .modal .modalBody article td.answer label+label {margin-left:8px} .modal .modalBody article td.answer.input-delete span{top: 50%;transform: translateY(-50%);} .modal .answer .equipmentStatList {flex-flow: row wrap;gap: 0.5rem;padding: 0.3rem;} .modal .answer .strengthList {flex-flow: row wrap;gap: 0.5rem;padding: 0.3rem;} .modal .answer .fileListDiv {margin: auto 0;display: flex;flex-direction: column; gap:0.5rem;} .modal .answer .fileListDiv .fileItem {display: flex;gap: 0.2rem;align-items: center; position: relative;} .modal .answer .fileListDiv .fileItem .fileNm {display: flex;} .modal .answer .fileListDiv .fileItem .fileNm .fileTitle {max-width: 100px;} .modal .answer .fileListDiv .fileItem .fileDelBtn span {background-color: #ec3232; position: unset;transform: translateY(0);} .modal .answer .fileListDiv .fileItem .fileDelBtn span::after {position: unset;} .listDiv .row .item .fileListDiv {margin: auto 0;display: flex;flex-direction: column; gap:0.5rem;} .listDiv .row .item .fileListDiv .fileItem {display: flex;gap: 0.2rem;align-items: center; position: relative;} .listDiv .row .item .fileListDiv .fileItem .fileNm {display: flex;} .listDiv .row .item .fileListDiv .fileItem .fileNm .fileTitle {max-width: 100px;} .listDiv .row .item .fileListDiv .fileItem .fileDelBtn span {background-color: #ec3232; position: unset;transform: translateY(0);} .listDiv .row .item .fileListDiv .fileItem .fileDelBtn span::after {position: unset;} .listDiv .row .item .fileListDiv1 {margin: auto 0;display: flex;flex-direction: column; gap:0.5rem;} .listDiv .row .item .fileListDiv1 .fileItem {display: flex;gap: 0.2rem;align-items: center; position: relative;} .listDiv .row .item .fileListDiv1 .fileItem .fileNm {display: flex;} .listDiv .row .item .fileListDiv1 .fileItem .fileNm .fileTitle {max-width: 500px;} .listDiv .row .item .fileListDiv1 .fileItem .fileDelBtn span {background-color: #ec3232; position: unset;transform: translateY(0);} .listDiv .row .item .fileListDiv1 .fileItem .fileDelBtn span::after {position: unset;} .tooltip {position: absolute; background: #fff; bottom: -30px; left: 0; display: none; padding: 0.375rem 0.5rem; border-radius: 0.5rem; box-shadow: 0 4px 8px rgba(0,0,0,0.2); border: 1px solid #aaa; z-index: 8;} .tooltip.active{display: flex;} .tooltip .tooltiptext{display: flex; flex-direction: row;} .tooltip a{width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; color: #555;} .tooltip a i{font-size: 1.125rem;} .tooltip .divLine{display: flex; width: 1px; height: 25px; margin: 0 0.375rem;} .modal table.tableMinHeight td{height: 43px !important;} .modal table.tableMinHeight td input[type='text']{height: 100% !important;} /*********************** 모달 로드 애니메이션 **************************/ .loadingAnimation:before{content: "";position: absolute;top: 0px;left: -25px;height: 10px;width: 10px;border-radius: 10px;-webkit-animation: loadingAnimationg 2s ease-in-out infinite;animation: loadingAnimationg 2s ease-in-out infinite;} .loadingAnimation{position: relative;width: 10px;height: 10px;border-radius: 10px;-webkit-animation: loadingAnimationm 2s ease-in-out infinite;animation: loadingAnimationm 2s ease-in-out infinite;} .loadingAnimation:after{content: "";position: absolute;top: 0px;left: 25px;height: 10px;width: 10px;border-radius: 10px;-webkit-animation: loadingAnimationd 2s ease-in-out infinite;animation: loadingAnimationd 2s ease-in-out infinite;} @-webkit-keyframes loadingAnimationg{ 0%{background-color: rgba(0, 0, 0, .5);} 25%{background-color: rgba(0, 0, 0, 1);} 50%{background-color: rgba(0, 0, 0, .5);} 75%{background-color: rgba(0, 0, 0, .5);} 100%{background-color: rgba(0, 0, 0, .5);} } @keyframes loadingAnimationg{ 0%{background-color: rgba(0, 0, 0, .5);} 25%{background-color: rgba(0, 0, 0, 1);} 50%{background-color: rgba(0, 0, 0, .5);} 75%{background-color: rgba(0, 0, 0, .5);} 100%{background-color: rgba(0, 0, 0, .5);} } @-webkit-keyframes loadingAnimationm{ 0%{background-color: rgba(0, 0, 0, .5);} 25%{background-color: rgba(0, 0, 0, .5);} 50%{background-color: rgba(0, 0, 0, 1);} 75%{background-color: rgba(0, 0, 0, .5);} 100%{background-color: rgba(0, 0, 0, .5);} } @keyframes loadingAnimationm{ 0%{background-color: rgba(0, 0, 0, .5);} 25%{background-color: rgba(0, 0, 0, .5);} 50%{background-color: rgba(0, 0, 0, 1);} 75%{background-color: rgba(0, 0, 0, .5);} 100%{background-color: rgba(0, 0, 0, .5);} } @-webkit-keyframes loadingAnimationd{ 0%{background-color: rgba(0, 0, 0, .5);} 25%{background-color: rgba(0, 0, 0, .5);} 50%{background-color: rgba(0, 0, 0, .5);} 75%{background-color: rgba(0, 0, 0, 1);} 100%{background-color: rgba(0, 0, 0, .5);} } @keyframes loadingAnimationd{ 0%{background-color: rgba(0, 0, 0, .5);} 25%{background-color: rgba(0, 0, 0, .5);} 50%{background-color: rgba(0, 0, 0, .5);} 75%{background-color: rgba(0, 0, 0, 1);} 100%{background-color: rgba(0, 0, 0, .5);} } /*********************** 모달 내 정보 상세보기 **************************/ #userInfoModal .modalBody {flex-direction:column; gap:0.5rem; align-items:center; width:330px; padding:2rem 1rem !important} #userInfoModal .modalBody > div {display:flex; gap:0.5rem; align-items:center} #userInfoModal .modalBody > div.userVersion {width:100%; font-weight: bold;display: flex;justify-content: center;} #userInfoModal .ci {display:flex; justify-content:center; margin-bottom:0.725rem} #userInfoModal .ci img {width:46%; height:auto} #userInfoModal .staffPic {width:180px; height:240px; border:1px solid #dae0e4; border-radius:1rem; display:flex; margin:0 auto; overflow:hidden; position:relative} #userInfoModal .staffPic::after {content:'\f508'; font-family:'fa'; font-size:9rem; font-weight:700; color:#dae0e4; margin:auto} #userInfoModal .staffPic img {position:absolute} #userInfoModal .location {color:#456fae; background-color:#e3e3e3; border-radius:3px; padding:4px} #userInfoModal input[type='text'] {height:34px; font-size:1rem; text-align:center} #userInfoModal #passinputMy {display:flex; flex-direction:column; gap:0.5rem} #userInfoModal .name {font-size:1.5rem; font-weight:700; display:flex; align-items:center; margin-bottom:1rem} #userInfoModal .name > span {font-size:0.875rem; font-weight:700; margin-right:0.5rem} #userInfoModal .modal_content .modalBtnDiv .btn-yellow {margin-left:unset} #userInfoModal .passDiv {width:70%; display:flex; flex-direction:column; gap:0.25rem; margin-top:0.725rem} #userInfoModal .team {font-weight:700} #userInfoModal .memberInfo {display:flex; flex-direction:column; gap:0.25rem} #userInfoModal .id, #userInfoModal .mobile, #userInfoModal .email {font-size:0.825rem; width:fit-content; color:#346aa7} #userInfoModal .memberInfo *:before {font-weight:700; width:50px; display:inline-block; color:#333} #userInfoModal .id:before {content:'user ID'} #userInfoModal .mobile:before {content:'Mobile'} #userInfoModal .email:before {content:'eMail'} /*********************** 모달 내 정보 상세보기 **************************/ #noticeModal .modalBody {width:500px; flex-direction:column} /*********************** 모달 트리구조 **************************/ .tree-multiselect {flex:1; display:flex; flex-direction:row; gap:1rem; overflow:auto} .tree-multiselect > .selections {flex:1; display:flex; flex-direction:column; overflow:auto; padding:0.5rem; border:1px solid #ababab; border-radius:6px; height:100%; overflow:auto} .tree-multiselect > .selected {flex:1; padding:0.5rem; border:1px solid #ababab; border-radius:6px; height:100%; gap:6px; background-color:#f1f1f1; overflow:auto} .tree-multiselect > .selections div.item {margin-left:27px} .tree-multiselect > .selections div.item label {cursor:pointer; display:inline} .tree-multiselect > .selections div.item label.disabled {color:#D8D8D8} .tree-multiselect > .selections *[searchhit=false] {display:none} .tree-multiselect > .selected > div.item {display:inline-flex; align-items:center; gap:6px; background:#fff; border-radius:6px; padding:4px 7px; font-size:0.975rem; margin:0 6px 6px 0; overflow:auto} .tree-multiselect .section > div.section, .tree-multiselect .section > div.item {padding-left:26px !important; position:relative} .tree-multiselect .section.collapsed > div.title span.collapse-section:after {content:"\f0fe"; font-family:'fa'; font-weight:700} .tree-multiselect .section.collapsed:not([searchhit]) > .item, .tree-multiselect .section.collapsed:not([searchhit]) > .section {display:none} .tree-multiselect .item {padding:2px 0} .tree-multiselect .title {color:#333; padding:6px 0; position:relative} .tree-multiselect .title > * {display:inline-block} .tree-multiselect .title > span.collapse-section {margin:0 4px; width:19px} .tree-multiselect .title > span.collapse-section:after {content:"\f146"; font-family:'fa'; font-weight:700; color:#9aa8b8} .tree-multiselect .title:hover {cursor:pointer} .tree-multiselect input[type=checkbox] {display:inline; margin-right:5px} .tree-multiselect input[type=checkbox]:not([disabled]):hover {cursor:pointer} .tree-multiselect span.remove-selected, .tree-multiselect span.description {order:1} .tree-multiselect span.remove-selected:hover {cursor:pointer} .tree-multiselect span.remove-selected:after {content:"\f057"; font-family:'fa'; font-weight:700; color:red} .tree-multiselect span.description:hover {cursor:help} .tree-multiselect div.temp-description-popup {background:#EAEAEA; border:2px solid #676767; border-radius:3px; padding:5px} .tree-multiselect span.section-name {display:none} .tree-multiselect .auxiliary {display:table; width:100%} .tree-multiselect .auxiliary input.search {border:2px solid #D8D8D8; display:table-cell; margin:0; padding:5px; width:100%} .tree-multiselect .auxiliary .select-all-container {display:table-cell; text-align:right} .tree-multiselect .auxiliary .select-all-container span.select-all, .tree-multiselect .auxiliary .select-all-container span.unselect-all {margin-right:5px; padding-right:5px} .tree-multiselect .auxiliary .select-all-container span.select-all:hover, .tree-multiselect .auxiliary .select-all-container span.unselect-all:hover {cursor:pointer} .tree-multiselect .auxiliary .select-all-container span.select-all {border-right:2px solid #D8D8D8} .tree-multiselect .selections > .section {position:relative} .tree-multiselect .section > .section > .title::before {content:''; width:17px; height:1px; border-bottom:1px dotted #9aa8b8; display:block; position:absolute; top:16px; left:-14px} .tree-multiselect .selections > .section > .section::before {content:''; width:1px; height:calc( 100% + 5px ); border-right:1px dotted #9aa8b8; display:block; position:absolute; top:-7px; left:11px} .tree-multiselect .selections > .section > .section:last-child::before {content:''; width:1px; height:17px; border-right:1px dotted #9aa8b8; display:block; position:absolute; top:0; left:11px} .tree-multiselect .section > .section > .item::before {content:''; width:14px; height:23px; border-left:1px dotted #9aa8b8; border-bottom:1px dotted #9aa8b8; display:block; position:absolute; top:-11px; left:10px} .tree-multiselect .section > .section > .item:nth-child(2)::before {height:17px !important; top:-5px !important} .tree-multiselect .selections > .section > .section > .section::before {content:''; width:1px; height:calc( 100% + 24px ); border-right:1px dotted #9aa8b8; display:block; position:absolute; top:-6px; left:11px} .tree-multiselect .selections > .section > .section > .section:last-child::before {display:none} .tree-multiselect .section > .item+.section::before {height:calc( 100% + 47px ) !important; top:-28px !important} @media screen and (max-width:760px) { body.forTablet .tree-multiselect {flex-direction:column} body.forTablet .tree-multiselect > .selections {flex:2 } body.forTablet .tree-multiselect > .selected {flex:1} } .btn_float_box {display: none;} /* btn-float */ @media screen and (max-width:940px) { body.forTablet .btn_float {position: fixed; bottom: .8em; right: 0.7em; padding: 1.2em 1.4em 1.2em 2.9em; box-shadow: 0px 19px 40px 0 rgb(0 0 0 / 10%); background-image: linear-gradient(135deg, #0c4da2, #0981f1); border-radius: 1.5em; border: 0; font-size: 1.2em; font-weight: 700; letter-spacing: 0; color: #fff; transition: box-shadow .15s ease-in-out;} body.forTablet .btn_float.add:after {content: ''; position: absolute; width: 1em; height: 1em; background-image: url("/kosmoplus/img/icon-plus-w.png"); background-size: contain; background-repeat: no-repeat; left: 1.3em; transform: translateY(1px);} body.forTablet .btn_float.top {bottom: 5em; height: 3.5em;} body.forTablet .btn_float.top:after {content: ''; position: absolute; width: 1em; height: 1em; background-image: url("/kosmoplus/img/icon-chevron-w-r.png"); background-size: contain; background-repeat: no-repeat; background-position: center center; left: 1.7em; transform: rotate(-90deg);} body.forTablet .btn_float_box {display: block; z-index: 5; position: fixed; bottom: 0.7em; right: 0.7em; font-size: 1.2em; font-weight: 700;} body.forTablet .btn_float_box > a {display: block;} body.forTablet .btn_float_box > a+a {margin-top: 0.7em;} body.forTablet .btn_floatN {box-shadow: 0px 8px 8px 0 rgb(0 0 0 / 20%); background-color: #445777; border-radius: 100%; width: 3.2em; height: 3.2em; position: relative;} body.forTablet .btn_floatN.add:after {content: ''; position: absolute; width: 100%; height: 100%; background-image: url("/kosmoplus/img/icon-plus-w.png"); background-size: 48%; background-repeat: no-repeat; background-position: center center;} body.forTablet .btn_floatN.camera:after {content: ''; position: absolute; width: 100%; height: 100%; background-image: url("/kosmoplus/img/icon-camera-w.png"); background-size: 45%; background-repeat: no-repeat; background-position: center center;} body.forTablet .btn_floatN.top {opacity: 50%; display: none;} body.forTablet .btn_floatN.top:after {content: ''; position: absolute; width: 100%; height: 100%; background-image: url("/kosmoplus/img/icon-chevron-w-r.png"); background-size: 20%; background-repeat: no-repeat; background-position: center center; left: 0; transform: rotate(-90deg);} body.forTablet .btn_floatN.mic i{position: absolute; width: 1em; height: 1em; left: 1.3em; transform: translateY(1px); top: 50%; transform: translateY(-50%); color: #fff;} body.forTablet .btn_floatN.phone {display: flex;align-items: center;justify-content: center;background-color: #fff;color: #232e48;} body.forTablet .btn_floatN.phone i {font-size: 1.5rem;} } /******************************** 모달 검색 반응형 ************************************/ body.forTablet .modal.srchModal .modal_content .titDiv {display: none;} @media screen and (max-width:940px) { body.forTablet .modal.srchModal .modal_content form > .tit {display: none;} body.forTablet .modal.srchModal .modal_content .titDiv {display: flex !important;margin: 0;padding: 2rem 1.5rem 1.5rem !important;align-items: center;} body.forTablet .modal.srchModal .modal_content .titDiv .tit {font-weight: 700;font-size: 1.1rem;color: #000;} body.forTablet .modal.srchModal .modal_content .titDiv button {color: #292929;} body.forTablet .modal.srchModal div.srchSection {position: relative; height: unset;} body.forTablet .modal.srchModal div.srchSection .srchDiv{border-radius: 0; padding: 1rem 0rem;height: 100%;} body.forTablet .modal.srchModal div.srchSection .srchBody {flex-flow: row wrap;} body.forTablet .modal.srchModal div.srchSection .srchBody .row .answer {width: 100%;} body.forTablet .modal.srchModal div.srchSection .srchBody .selectDiv select {width: 100%;} body.forTablet .modal.srchModal div.srchSection .srchFooter {padding-bottom: 1rem;border-bottom: 1px solid #dee2e6;} } /******************************** 프로젝트 카드구조 ************************************/ .wrapper .cardWrapDiv{display: flex; flex-direction: column; height:fit-content; background: #c5d1e6; border-radius: 10px; box-shadow: 0 4px 6px 0 rgba(0, 29, 87, 0.1); position: relative; overflow: hidden; padding: 0 0 1rem;} .wrapper .cardWrapDiv .cardDiv{padding: 40px 30px; display: flex; flex-direction: row; gap: 30px; justify-content: space-between; font-weight: 500; position: relative;} .wrapper .cardWrapDiv .cardDiv .left, .wrapper .cardWrapDiv .cardDiv .right{display: flex; flex-direction: column; gap:8px; height: fit-content; flex:1} .wrapper .cardWrapDiv .cardDiv .item{ word-break: break-all;} .wrapper .cardWrapDiv .cardDiv .item.hide{display: none;} .wrapper .cardWrapDiv .cardDiv .answer{ word-break: break-all;} .wrapper .cardWrapDiv .cardDiv .row{display: flex; flex-direction: row; gap:10px} .wrapper .cardWrapDiv .cardDiv .row.gap{gap: 22px; flex-wrap: wrap;} .wrapper .cardWrapDiv .cardDiv .column{display: flex; flex-direction: column; gap: 5px;} .wrapper .cardWrapDiv .cardDiv .highlight {align-items: center;} .wrapper .cardWrapDiv .cardDiv .highlight .answer{font-size: 1.75rem; font-weight: 800; color: #c51212;} .wrapper .cardWrapDiv .cardDiv .name{font-size: 1.75rem; font-weight: 700;} .wrapper .cardWrapDiv .cardDiv .date{font-size: 1.25rem; font-weight: 600;} .wrapper .cardWrapDiv .cardDiv .cardTitle{font-weight: 700; font-size: 1.125rem; color: #001d57; width: 100%;border-bottom: 1px solid #001d57; padding-bottom: 10px;} .wrapper .cardWrapDiv .cardDiv .cardEditBtn{position: absolute; right: 0.5rem; top: 0.5rem;} .wrapper .cardWrapDiv .cardDiv .newWinBtn{position: absolute; right: 3.5rem; top: 0.5rem;} .wrapper .cardWrapDiv:not(.siteWrap) .cardDiv .left{width: 350px;} .wrapper .cardWrapDiv:not(.siteWrap) .cardDiv .right{width:400px;} .wrapper .cardWrapDiv .mainWrap{color: #223c69;} .wrapper .cardWrapDiv .mainWrap .item{color: #6980a9; font-weight: 600; letter-spacing:-1px} .wrapper .cardWrapDiv .mainWrap .freeText.scroll{line-height: 1.3; max-height: 120px; overflow-x: hidden; margin-top: 10px;} .wrapper .cardWrapDiv .subWrap {padding: 20px 30px 15px 30px; background: #fff;} .wrapper .cardWrapDiv .subWrap>div{flex-direction: row; flex-wrap: wrap;} .wrapper .cardWrapDiv .subWrap .item, .wrapper .cardWrapDiv .subWrap .answer{font-size: 0.875rem; color: #000000; font-weight: 400;} .wrapper .cardWrapDiv .subWrap .item{width: 50px; color: #084b8d; font-weight: 600;} .wrapper .cardWrapDiv .subWrap .answer{flex:1; /* width: calc(100% - 55px); */} .wrapper .cardWrapDiv .subWrap .contentsDiv{padding: 10px; width: 100%; display: flex; gap: 10px; flex-direction: column;} @media screen and (max-width: 940px) { body.forTablet .wrapper .cardWrapDiv:not(.siteWrap) .cardDiv .left{width: 50%;} body.forTablet .wrapper .cardWrapDiv:not(.siteWrap) .cardDiv .right{width:50%;} } @media screen and (max-width: 640px) { body.forMobile .wrapper .cardWrapDiv .cardDiv{flex-direction: column;} body.forMobile .wrapper .cardWrapDiv:not(.siteWrap) .cardDiv .right{width:100%;} body.forMobile .wrapper .cardWrapDiv:not(.siteWrap) .cardDiv .left{width: 100%;} } /******************************** 사이트 카드구조 ************************************/ .wrapper .cardSection{display: flex; gap: 20px; flex-wrap: wrap; height: fit-content; width:100%} .wrapper .cardWrapDiv.siteWrap {overflow: hidden; position:relative; flex:0 0 370px; max-height:320px} /* .wrapper .cardWrapDiv.siteWrap:hover {background-color: #a1b7dd;} */ /* 사용중지, 종료 카드상태 */ .wrapper .cardWrapDiv.siteWrap.stopWork{background-color: #d0afac; cursor: default;} .wrapper .cardWrapDiv.siteWrap.stopWork::after {content: '공사중지'; display: block; background-color: #000; color: #d0afac; font-weight: 600; position: absolute; top: 34%; right: -20%; padding: 1.6rem; font-size: 2rem; transform: rotate(-25deg); width: 140%; opacity:0.2; text-align:center} .wrapper .cardWrapDiv.siteWrap.stopWork .siteName .name{background: #a08585; color: #dacaca;} .wrapper .cardWrapDiv.siteWrap.stopWork .cardDiv{color: #666;} .wrapper .cardWrapDiv.siteWrap.stopWork .mainWrap .item{color: #666;} .wrapper .cardWrapDiv.siteWrap.stopWork .cardDiv.mainWrap .siteManager{border-bottom: 1px solid #888;} .wrapper .cardWrapDiv.siteWrap.finishWork{background-color: #bbb; cursor: default;} .wrapper .cardWrapDiv.siteWrap.finishWork::after {content: '공사종료'; display: block; background-color: #000; color: #bbb; font-weight: 600; position: absolute; top: 34%; right: -20%; padding: 1.6rem; font-size: 2rem; transform: rotate(-25deg); width: 140%; opacity:0.2; text-align:center} .wrapper .cardWrapDiv.siteWrap.finishWork .siteName .name{background: #888; color: #ddd;} .wrapper .cardWrapDiv.siteWrap.finishWork .cardDiv{color: #666;} .wrapper .cardWrapDiv.siteWrap.finishWork .mainWrap .item{color: #666;} .wrapper .cardWrapDiv.siteWrap.finishWork .cardDiv.mainWrap .siteManager{border-bottom: 1px solid #888;} /* 순서변경 호버 및 클릭 용도 */ .wrapper .cardWrapDiv.siteWrap.sortable:hover {background-color: #a1b7dd;} .wrapper .cardWrapDiv.siteWrap.stopWork.sortable:hover {background-color: #a0a0a0;} .wrapper .cardWrapDiv.siteWrap.sortable .cardDiv{height: 75px; overflow: hidden;} .wrapper .cardWrapDiv.siteWrap .cardDiv {font-size: 0.875em; padding:0 1rem 1rem; width:350px; height:310px; overflow-y: auto; background: none; box-shadow: none; justify-content: flex-start; } .wrapper .cardWrapDiv .siteName{color: #fff; font-weight:600; margin:1rem 1rem 1rem 0; word-break: break-all; display:flex; gap:10px } .wrapper .cardWrapDiv .siteName .item{display: none;} .wrapper .cardWrapDiv .siteName .name{min-width:70%; font-size: 1.125rem; font-weight:500; display:flex; align-items:center; background: #445777; padding:0 1rem; border-radius: 0 10px 10px 0; margin-right:auto } .wrapper .cardWrapDiv .cardEditBtn {font-size: 1.125rem; background: #2f5593; padding: 8px; border-radius:10px; border:unset; align-self: start;} .wrapper .cardWrapDiv .cardEditBtn::after {content:'\f304'; font-family:'fa'; font-weight:700; color:#fff} .wrapper .cardWrapDiv .newWinBtn {font-size: 1.125rem; background: #2f5593; padding: 8px; border-radius:10px; border:unset; align-self: start;} .wrapper .cardWrapDiv .newWinBtn::after {content:'\f35d'; font-family:'fa'; font-weight:700; color:#fff} .wrapper .cardWrapDiv .cardSortBtn {height:30px; font-size: 1.125rem; color:#fff; background: #2f5593; padding: 8px; border-radius:10px; border:unset} .wrapper .cardWrapDiv .cardSortBtn::after {content:'\e030'; font-family:'fa'; font-weight:700; color:#fff} .wrapper .cardWrapDiv.siteWrap .cardDiv .date{font-size: 1.25rem;} .wrapper .cardWrapDiv.siteWrap .cardDiv .row.gap .row{width: calc(50% - 5px);} .wrapper .cardWrapDiv.siteWrap .cardDiv .row{ min-width: calc(50% - 15px);} .wrapper .cardWrapDiv.siteWrap .cardDiv.mainWrap .row>.item{flex:0 0 56px; line-height: 1.3; } .wrapper .cardWrapDiv.siteWrap .cardDiv.mainWrap .row>.bgitem {background-color: #0000001c; text-align: center; border-radius: 4px; align-self: start; color: #445777;} .wrapper .cardWrapDiv.siteWrap .cardDiv.mainWrap .row>.answer{flex:1; line-height: 1.3; } .wrapper .cardWrapDiv.siteWrap .cardDiv.mainWrap .siteManager{border-bottom: 1px solid #7b92c1; padding:0 0 10px 0; margin-bottom: 10px; justify-content: center; gap: 10px; width: 100%;} .wrapper .cardWrapDiv.siteWrap .cardDiv.mainWrap .siteManager .item{width: fit-content !important; white-space:nowrap; font-weight: 700; font-size: 1rem;} .wrapper .cardWrapDiv.siteWrap .cardDiv.mainWrap .siteManager .answer{width: fit-content; font-weight:700; font-size: 1rem; word-break:keep-all} .wrapper .cardWrapDiv.siteWrap .cardDiv.mainWrap .siteManager .answer > span {margin-right:10px} .wrapper .cardSection .siteButtonBox {display: inline-flex; flex-direction:row; gap:1rem} .wrapper .titDiv .siteButtonBox > button {display:inline-block !important} @media screen and (max-width: 940px) { body.forTablet .wrapper .cardSection .siteButtonBox>button{display: none;} } @media screen and (max-width: 770px) { body.forTablet .wrapper .cardWrapDiv.siteWrap{width: 100%; height: auto; max-height: 360px;} body.forTablet .wrapper .cardWrapDiv.siteWrap .cardDiv{width: auto;} body.forTablet .wrapper .cardWrapDiv .siteName .name{min-width: 40%;} body.forTablet .wrapper .cardWrapDiv .cardDiv .left, .wrapper .cardWrapDiv .cardDiv .right{width: 100%;} } @media screen and (max-width: 640px) { body.forMobile .wrapper .cardWrapDiv .siteName .name{min-width: 50%;} } /* 탭버튼 */ .tabContentsDiv .tabContentsList {display: none;} .tabContentsDiv .tabContentsList.show {display: block;} body .wrapper .tabZone{padding: 1.5rem; width: 100%;} body .wrapper .tabBtnDiv .tabBtnList.on,body .modal .tabBtnDiv .tabBtnList.on{background-color: #2a539b; color: #fff;} body .wrapper .tabBtnDiv {height: 40px; margin-bottom: 0.5rem; min-width: 300px;} @media screen and (max-width: 940px) { body.forTablet .wrapper .tabZone{padding: 0;} } /* 리스트 상단고정 */ /* body .wrapper .listDiv .listBodyDiv .row.topFix{background-color: #fdf0e5;} */ /*body .wrapper .listDiv .listBodyDiv .row.topFix .item.no {margin-right: 0; padding: 0;}*/ body .wrapper .listDiv .listBodyDiv .row.topFix .item.no .num{display: none;} body .wrapper .listDiv .listBodyDiv .row.topFix .item.no::after{content: "\f08d"; font-family: 'fa'; font-weight: 700; color: #0b3a52; font-size: 1.25rem !important; transform: rotate(21deg);} /* 리스트 반응형 태블릿,모바일 카드형식 */ body .wrapper .list-card .listBodyDiv .item.forEnter{display: none;} @media screen and (max-width: 940px) { body .wrapper .listDiv .listBodyDiv .row.topFix .item.no::after{position:absolute; top:0; left:0} body.forTablet .wrapper .list-card .display-flex{width: 100%; display: block;} body.forTablet .wrapper .list-card .listDiv{width: 100%;} body.forTablet .wrapper .list-card .listHeaderDiv{display: none;} body.forTablet .wrapper .list-card .listBodyDiv {background-color: unset;} body.forTablet .wrapper .list-card .listBodyDiv .row{ flex-flow: wrap; align-items: unset; position: relative; border: 0; border-radius: 0.375rem; padding: 0.75rem; background-color: #fff; box-shadow: 0 6px 6px rgba(0,0,0,0.05); margin-bottom: 0.5rem; overflow: hidden;} body.forTablet .wrapper .list-card .listBodyDiv .item{flex:unset; width: unset; height: unset; width: fit-content; padding: 0.5rem; min-height: auto; justify-content: unset !important;} body.forTablet .wrapper .item.no{position: absolute !important; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 3rem !important; color: rgba(0,0,0,0.05); width: fit-content; font-weight: 700; padding: 0; margin: 0;} body.forTablet .wrapper .list-card .listBodyDiv .item.siteNm{padding: 0; font-weight: 600; padding-right: 0.5rem; padding-top: 0.125rem; max-width: 80%;} body.forTablet .wrapper .list-card .listBodyDiv .item.zone{font-size: 1.25rem; font-weight: 600; padding: 0 7rem 0 0;} body.forTablet .wrapper .list-card .listBodyDiv .item.forEnter{display: block; width: 100%; padding: 0; height: 0;} body.forTablet .wrapper .list-card .listBodyDiv .item.allowDelYn{position: absolute; right: 0.75rem; bottom: 0.75rem; background-color: #e48181; border-radius: 5px; } body.forTablet .wrapper .list-card .listBodyDiv .item.allowDelYn p{color: #fff !important; border-bottom: none !important;} body.forTablet .wrapper .list-card .listBodyDiv .item.distanceDt{ position: absolute; right: 0.75rem; top: 0.75rem; font-weight: 600; padding: 0;} body.forTablet .wrapper .list-card .listBodyDiv .item.regUser{position: absolute; right: 5.5rem; top: 0.75rem; font-weight: 600; padding: 0;} body.forTablet .wrapper .list-card .listBodyDiv .item.distance{padding: 16px 8px 0 0; min-width: 140px;} body.forTablet .wrapper .list-card .listBodyDiv .item.progressDay{padding: 16px 8px 0 0; min-width: 130px;} body.forTablet .wrapper .list-card .listBodyDiv .item.progressTotal{padding: 16px 8px 0 0; min-width: 150px;} body.forTablet .wrapper .list-card .listBodyDiv .item.distanceP{padding: 16px 8px 0 0; min-width: 110px;} body.forTablet .wrapper .list-card .listBodyDiv .item::before{ display: inline-block; padding: 0.375rem; margin-right: 0.5rem; text-align: center; font-size: 0.875rem; background-color: #e2e4e6; border-radius: 3px; } body.forTablet .wrapper .list-card .listBodyDiv .item.distance::before{content: '설계거리';} body.forTablet .wrapper .list-card .listBodyDiv .item.progressDay::before{content: '일 진척량';} body.forTablet .wrapper .list-card .listBodyDiv .item.progressTotal::before{content: '진척량 누계';} body.forTablet .wrapper .list-card .listBodyDiv .item.distanceP::before{content: '진척률';} } @media screen and (max-width: 640px) { body.forMobile .wrapper .list-card .listBodyDiv .row{padding-bottom: 3.5rem;} body.forMobile .wrapper .list-card .listBodyDiv .item.distanceDt{top: auto; right: 4rem; bottom: 0.75rem; height: 32px;} body.forMobile .wrapper .list-card .listBodyDiv .item.regUser{top: auto; right: 8.5rem; bottom: 0.75rem; height: 32px;} body.forMobile .wrapper .list-card .listBodyDiv .item.distance{width: 50%; min-width: none;} body.forMobile .wrapper .list-card .listBodyDiv .item.progressDay{width: 45%; min-width: none;} body.forMobile .wrapper .list-card .listBodyDiv .item.progressTotal{width: 50%; min-width: none;} body.forMobile .wrapper .list-card .listBodyDiv .item.distanceP{width: 45%; min-width: none;} body.forMobile .wrapper .list-card .listBodyDiv .item::before{min-width: 80px;} } @media screen and (max-width: 360px) { body.forMobile .wrapper .list-card .listBodyDiv .item.siteNm{width: 100%; padding: 0;} body.forMobile .wrapper .list-card .listBodyDiv .item.zone{width: 100%; padding: 0;} body.forMobile .wrapper .list-card .listBodyDiv .item.distance{width: 100%;} body.forMobile .wrapper .list-card .listBodyDiv .item.progressDay{width: 100%;} body.forMobile .wrapper .list-card .listBodyDiv .item.progressTotal{width: 100%;} body.forMobile .wrapper .list-card .listBodyDiv .item.distanceP{width: 100%;} } /* 리스트 반응형 태블릿,모바일 게시판형식 */ @media screen and (max-width: 940px) { body.forTablet .bodyDiv.bgNone{background-color: unset;} body.forTablet .display-flex{width: 100%; display: block;} body.forTablet .list-board.listDiv{width: 100%;} body.forTablet .list-board .listHeaderDiv{display: none;} body.forTablet .list-board .listBodyDiv {background-color: unset; width:unset} body.forTablet .list-board .listBodyDiv .row{ flex-flow: wrap; align-items: unset; padding:1rem; background-color: #fff; overflow: hidden; width: 100%; border-bottom: none; position: relative; border-radius:0.5rem; margin-bottom:0.725rem} /* body.forTablet .list-board .listBodyDiv .row::after{content: ""; height: 1px; background: #cbc4bc; width: calc(100% - 2rem); position: absolute; bottom: 0;}*/ /* body.forTablet .list-board .listBodyDiv .row:first-child{border-radius: 10px 10px 0 0;}*/ /* body.forTablet .list-board .listBodyDiv .row:last-child{border-radius: 0 0 10px 10px;}*/ /* body.forTablet .list-board .listBodyDiv .row:last-child::after{display: none;}*/ body.forTablet .list-board .listBodyDiv .item{flex:unset; width: unset; height: unset; padding: 0.125rem 0.375rem; min-height: auto; justify-content: unset !important; font-size: 0.875rem; border-radius: 5px; margin-right: 0.5rem;} body.forTablet .list-board .listBodyDiv .row.topFix .item.no{position: absolute; right: unset; bottom: unset; top:1rem; left: 1rem; transform: translate(0,0); font-size: 1.5rem !important;} body.forTablet .list-board .listBodyDiv .item.no {width:100% !important; justify-content:center !important} body.forTablet .list-board .listBodyDiv .item.regDt{order: 5; color: #011c2b; margin-top: 1rem; margin-right: 0; font-weight: 500;} body.forTablet .list-board .listBodyDiv .item.changeOrder{display: none;} body.forTablet .list-board .listBodyDiv .item::before{ display: inline-block; padding: 0.25rem; margin-right: 0.25rem; text-align: center; font-size: 0.875rem;} body.forTablet .listDiv .listBodyBtnList{display: none;} body.forTablet .list-board .listBodyBtnList{display: none;} } /*****************wooker 추가*****************/ /*****************wooker 추가*****************/ /*****************wooker 추가*****************/ /*****************wooker 추가*****************/ @keyframes blinkBackRed { 0% { background-color: red; } 50% { background-color: black; } 100% { background-color: red; } } .blinkBackRed { animation: blinkBackRed 1s infinite; } .cctvBox {width:20%; height:fit-content; border-left:1px solid #000; border-right:1px solid #000; position:relative; background-color:#000} .cctvBox .cctvImg {padding:0; margin:0} .cctvBox .cctvImg img {width:100%} .cctvBox .cctvTit {width:fit-content; padding:2px 8px 2px 2px; border-radius:0 4px 0 0; background-color:#000; color:#fff; font-size:1em; position:absolute; bottom:0; left:0} .cctvBox .btnGroupBox {display:none; position:absolute; bottom:20px; left:50%; transform:translate( -50%, 0); white-space:nowrap; z-index:1} .cctvBox .btnGroupBox li {cursor:pointer; display:inline-block; width:36px; height:36px; background-color:#ffffff; border: 1px solid #000; border-radius:3px; box-shadow: 0 2px 5px #00000099} .cctvBox .btnGroupBox li:active {position:relative; bottom:-3px} .cctvBox .btnGroupBox li::after {content:''; width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:20px; color:#000 } .cctvBox .btnGroupBox li.buttonPopup::after {content:'\f31e'; font-family:'fa'; font-weight:700} .cctvBox .btnGroupBox li.buttonMic::after {content:'\f3c9'; font-family:'fa'; font-weight:700} .cctvBox .btnGroupBox li.buttonInfo::after {content:'\f129'; font-family:'fa'; font-weight:700} .cctvBox .btnGroupBox li.buttonDel::after {content:'\f2ed'; font-family:'fa'; font-weight:700} .cctvBox .btnGroupBox li.buttonChange::after {content:'\f0ec'; font-family:'fa'; font-weight:700} #cctvExpModal .modal_content {width:fit-content; height:fit-content; min-width:unset !important; max-width:unset !important; max-height:unset !important; position: relative; border-radius:unset} #cctvExpModal .cctvExpImg {height:80vh; position:relative} #cctvExpModal .cctvExpImg > table {position:absolute; top:0; left:0; width:100%; height:100%;} #cctvExpModal .cctvExpImg > table td.btnTd {font-size:10vh; cursor:pointer; padding: 2vh;} #cctvExpModal .cctvExpImg > table td i {visibility:hidden; text-shadow: 0 0 10px #ffffff;} #cctvExpModal .cctvExpImg > table td:hover i {visibility:visible} #cctvExpModal .cctvExpImg > table td {width:25%; height:33.3%; text-align:center; vertical-align:middle} #cctvExpModal .cctvExpImg > table td:not(.btnTd){z-index: -10; pointer-events: none;} #cctvExpModal .cctvExpImg > div.btnTd {position: absolute; width:25%; height:33.3%; display:flex;font-size:10vh; cursor:pointer; padding: 2vh;} #cctvExpModal .cctvExpImg > div.btnTd i {visibility:hidden; text-shadow: 0 0 10px #ffffff;} #cctvExpModal .cctvExpImg > div.btnTd:hover i {visibility:visible} #cctvExpModal .cctvExpImg > div.btnTd.btnTop {top: 0; left: 50%; transform: translateX(-50%);align-items: flex-start;justify-content: center;} #cctvExpModal .cctvExpImg > div.btnTd.btnLeft {top: 50%; left: 0; transform: translateY(-50%);align-items: center;justify-content: flex-start;} #cctvExpModal .cctvExpImg > div.btnTd.btnRight {top: 50%; right: 0; transform: translateY(-50%);align-items: center;justify-content: flex-end;} #cctvExpModal .cctvExpImg > div.btnTd.btnBottom {bottom: 0; left: 50%; transform: translateX(-50%);align-items: flex-end;justify-content: center;} .textAlignLeft {text-align:left !important} .textAlignRight {text-align:right !important} .textAlignTop {vertical-align:top !important} .textAlignbottom {vertical-align:bottom !important} #cctvExpModal .cctvControl {padding:10px; background-color:#000; display:flex; justify-content:space-between; align-items:center; z-index: 10;} #cctvExpModal .cctvControl .cctvTit {position:unset; color: #fff;} #cctvExpModal .cctvControl button {min-width:80px} #cctvExpModal .cctvControl button i {margin-right:1em} /*****************wooker 추가 끝*****************/ /*****************wooker 추가 끝*****************/ /*****************wooker 추가 끝*****************/ /*****************wooker 추가 끝*****************/ /* cctv 부분 수정 방지 화영 추가 */ @keyframes blinkO {0%{opacity: 1;} 50%{opacity: 0.3;} 100%{opacity: 1;}} /* 해당 cctv 방송 시 .broadcast 추가 */ .cctvBox.broadcast::before{content: ""; position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; left: 0; box-shadow: inset 0 0 0 3px #ffe520;} /* .cctvBox.broadcast::after{content: "\f3c9"; font-family: 'fa'; position: absolute; z-index: 1; top: 8px; right: 8px; color: #ffe520; font-size: 2rem; font-weight: 900; animation: blinkO 1.5s infinite;} */ /* cctv 확대 모달 내 공통수정 */ #cctvExpModal .cctvControl .longClick:active{background-color: #3779eb;} #cctvExpModal .cctvControl .cctvExpMicBtn i, #cctvExpModal .cctvControl .cctvExpInfoBtn i {margin-right:0;} #cctvExpModal .cctvControl .cctvExpMicBtn, #cctvExpModal .cctvControl .cctvExpInfoBtn{min-width: 50px;} @media screen and (max-width: 940px) { .cctvBox.broadcast::after{font-size: 1.5rem;} } /*****************대시보드 공통*****************/ body.dashboard .modalWrap{position: relative;} body.dashboard .modal_content{position: absolute;} /* 센서 감지 별 배경 색상 공통 */ body.dashboard .normal{background-color: #11a52a;} body.dashboard .caution{background-color: #ffd200; color: #705c03 !important;} body.dashboard .warning{background-color: #ff7a00;} body.dashboard .danger{background-color: #f31313;} /* 모달 내 마이크 아이콘 공통 */ .modal .micAnimation{position: relative;} .modal .micAnimation::before{content: "\f3c9"; font-family: 'fa'; font-weight: 900; font-size: 5rem; color: #ffbc00; animation: blinkO 1.5s infinite;} .modal .micAnimation::after{content: "ON AIR"; font-size: 0.75rem; color: #ffbc00; position: absolute; animation: blinkO 1.5s infinite;} /* 방송 onair 모달 공통 */ #micBroadcastModal .alertMent{font-weight: 700; font-size: 1.2rem; color: #000;} /* #micBroadcastModal.micWorker .alertMent{font-size: 1.1rem;} */ #micBroadcastModal .modal_content .modalBody{padding: 1rem;} #micBroadcastModal .modal_content .modalBody .tit{display: none; font-size: 1.3rem; gap: 0.25rem; color: #2a6ac8; margin-bottom: 0rem; padding: 0 0 0.25rem;} #micBroadcastModal .modal_content .modalBody .tit.show{display: flex;} .cctvBoradcastSelcetModal .modal_content, .cctvSelcetModal .modal_content, .cctvChangeModal .modal_content{max-width: unset;} /* 닫기버튼 있는 모달 제목 공통 */ .modal .tit.dashTit{font-weight: 700; padding: 1.5rem 1rem 1.5rem !important; font-size: 1.1rem; background-color: #fff; display: flex;} .modal .tit.dashTit .close{border: none; background: unset; margin-left: auto;} .modal .tit.dashTit .close::before{content: "\f00d"; font-family: 'fa'; font-weight: 900; font-size: 1.3rem;} /* 대시보드 내 스위치 모달 공통 */ body.dashboard .modal .item.switchItem {display: flex; align-items: center;} body.dashboard .modal .item.switchItem .switch input:checked + .slider:after{content: "켜기"; color: #fff;} body.dashboard .modal .item.switchItem .switch input:checked +.slider{background-color: #2a539b;} /* cctv 삭제 모달 공통 */ #cctvDelModal .modalBody{padding-top: 1.5rem !important;} #cctvDelModal .modalBody .alertMent{justify-content: center;} /* 이벤트발생 형 리스트 모달 */ .modal.listModal .modal_content {min-width: 500px;} .modal.listModal .modal_content .modalBody{padding: 1rem; flex-direction: column;} .modal.listModal .modal_content .modalBody .row {display: flex; gap:0.5rem; padding: 0.725rem; border-radius: 0.325rem; color: #fff;position: relative; flex-flow:row wrap; justify-content:space-between} .modal.listModal .modal_content .modalBody .row .eventBox{display: flex; flex-flow: row wrap; font-size: 0.9rem;} /*.modal.listModal .modal_content .modalBody .row .eventBox.eventL{flex:2;}*/ /*.modal.listModal .modal_content .modalBody .row .eventBox.eventL .item{padding: 0.125rem 0.25rem 0.125rem 0;}*/ /*.modal.listModal .modal_content .modalBody .row .eventBox.eventC{flex:2;}*/ /*.modal.listModal .modal_content .modalBody .row .eventBox.eventR{flex:1; justify-content: flex-end; align-items: center;}*/ .modal.listModal .modal_content .modalBody .row .eventBox.eventL{order:3; width:100%} .modal.listModal .modal_content .modalBody .row .eventBox.eventL .item {display:none} .modal.listModal .modal_content .modalBody .row .eventBox.eventC{order:1; width:50%} .modal.listModal .modal_content .modalBody .row .eventBox.eventR{order:2; display:flex; justify-content: end; gap:0.5rem; font-weight:500; background-color: #00000022; padding: 0 0.5rem;} .modal.listModal .modal_content .modalBody .row .item{display: flex; align-items: center; letter-spacing: -1px; word-break: break-word} .modal.listModal .modal_content .modalBody .row .item.designation{width: 100%; font-size: 1rem; font-weight: 400;} .modal.listModal .modal_content .modalBody .row .item.eventOcc{font-size: 1.5rem; font-weight: 600;} /*.modal.listModal .modal_content .modalBody .row.caution .item{font-weight: 400;}*/ /*.modal.listModal .modal_content .modalBody .row.caution .item.designation{font-weight: 500;}*/ /*.modal.listModal .modal_content .modalBody .row.caution .item.eventOcc{font-weight: 700;}*/ /*.modal.listModal .modal_content .modalBody .row .item.date{width: 100%; justify-content: flex-end;}*/ .modal.listModal .modal_content .modalBody .row.danger .item.eventOcc, .modal.listModal .modal_content .modalBody .row.warning .item.eventOcc, .modal.listModal .modal_content .modalBody .row.caution .item.eventOcc{margin-top: 0.3rem;} .modal.listModal .modal_content .modalBody .row .eventBox.eventC {flex-direction: column;justify-content: center;flex: 1.2;} .modal.listModal .modal_content .modalBody .row .eventBox.eventC .eventOcc {width: fit-content;} .modal.listModal .modal_content .modalBody .row .eventBox.eventC .date {width: fit-content;} .modal.listModal .modal_content .modalBody .row.title {background-color: #d1d1d1;color: #000;} .modal.listModal .modal_content .modalBody .row.title .item {font-size: 0.9rem;font-weight: 400;} body.dashboard #alarmListModal .modal_content .modalBody .row.checked::after{content: '확인완료'; position: absolute; right: 0.375rem;background-color: #2a539b;border-radius: 40px;color: #fff;font-weight: 500;font-size: 0.875rem;display: inline-flex;width: 75px;height: 30px;align-items: center;justify-content: center;} body.dashboard #alarmListModal .modal_content .modalBody .row.checked .eventBox.eventR {opacity: 0;} /* 대시보드 설정 모달 */ #dashSettingModal .modal_content {max-width: 400px !important;} #dashSettingModal .modal_content > form{gap: 0.5rem;} #dashSettingModal .modalBody {flex-direction: column; padding: 1rem; gap: 0;} #dashSettingModal .modalBody .settingWrap{display: flex; flex-direction: column; border: 1px solid #2a539b; border-radius: 0.325rem; padding-top: 0.5rem; background: #f8f9fd; overflow: hidden;} #dashSettingModal .modalBody .settingWrap .row{padding: 0.5rem;} #dashSettingModal .modalBody .settingWrap .row:last-child{padding: 1rem 0 0 0;} #dashSettingModal .modalBody .tit.sub{margin-bottom: 0; padding: 0 0 0.75rem 0; font-size: 1rem; font-weight: 600;} #dashSettingModal .modalBody .row{display: flex; width: 100%; min-height: 38px; gap: 0.5rem;} #dashSettingModal .modalBody.top .row .item{flex:1; display: flex; align-items: center; justify-content: start; font-size: 0.9rem;} #dashSettingModal .modalBody.top .row .answer{flex:2; display: flex; align-items: center;} #dashSettingModal .modalBody.top .row .answer input{text-align: center; border: none; border-bottom: 1px solid #aaa; border-radius: 3px 3px 0 0; padding: 3px; flex:1; background: unset;} #dashSettingModal .modalBody.top .row .answer input:focus{background-color: #eef3ff;} #dashSettingModal .modalBody .row .answer button{width: 100%;} #dashSettingModal .modalBody.center .row .answer {width: 100%;} #dashSettingModal .modalBody.btm .row .answer{justify-content: center; align-items: center; display: flex; margin-right: 0.5rem; font-size: 0.9rem;} #dashSettingModal .modalBody.btm .tit.sub{padding: 0 0 0.25rem 0;} #dashSettingModal .modalBody .cctvTotal{margin-left: 1rem; padding-left: 1rem; border-left: 1px solid #fff; display: block;} #dashSettingModal .modalBody .cctvTotal::after{content: " 개";} /* 대시보드 설정 - 근로자 */ #dashSettingModal.worker .modal_content{min-width: unset;} #dashSettingModal.worker .tit{padding: 1.5rem 1rem 0.5rem !important;} /* 대시보드 설정 - 사이트터널 */ #dashSettingModal.siteTunnel .modalBody .settingWrap{padding-top: 1rem;} #dashSettingModal.siteTunnel .modal_content .modalBody .row .item.moratorium{justify-content: center;} #dashSettingModal.siteTunnel .modal_content .modalBody .row .item.moratorium input{text-align: center; border: none; border-bottom: 1px solid #000; border-radius: 3px 3px 0 0; padding: 0; margin: 0 3px; background: unset; color: #000;} #dashSettingModal.siteTunnel .modal_content .modalBody .row .item.moratorium input:focus{background: rgba(0,0,0,0.05);} /* cctv 순서변경 스위치 햄버거 */ body.dashboard .order-hamburger {width:30px; height:30px; display:block; position:relative; overflow:hidden; cursor:pointer; margin-left:auto; outline:none; display:none} body.dashboard .order-hamburger > .layer {background-color:#fff; border-radius:1px; display:block; height:2px; overflow:hidden; position:absolute; left:5px; width:18px} body.dashboard .order-hamburger .layer.top { top:7px; left:6px} body.dashboard .shy-menu-div.is-open .order-hamburger .layer.top {top:14px; left:6px; transform:rotate(45deg)} body.dashboard .order-hamburger .layer.mid { top:14px; left:6px } body.dashboard .shy-menu-div.is-open .order-hamburger .layer.mid {opacity:0; left:0} body.dashboard .order-hamburger .layer.btm { top:21px; left:6px } body.dashboard .shy-menu-div.is-open .order-hamburger .layer.btm {top:14px; left:6px; transform:rotate(-45deg)} body.dashboard .changeOrder {text-align: center; justify-content: center; flex: 0 0 70px; width: 70px;} body.dashboard .changeOrder .order-hamburger {display: block; margin-left: 0;} body.dashboard .changeOrder .order-hamburger span{background-color: #191919; min-width: unset !important; padding: 0 !important; border-radius: 0 !important;} /*elTit cctv 순서변경 스위치 햄버거 */ .selTit .order-hamburger1 {width:30px; height:30px; display:block; position:relative; overflow:hidden; cursor:pointer; margin-left:auto; outline:none;} .selTit .order-hamburger1 > .layer {background-color:#fff; border-radius:1px; display:block; height:2px; overflow:hidden; position:absolute; left:5px; width:18px} .selTit .order-hamburger1 .layer.top { top:7px; left:10px} .selTit .shy-menu-div.is-open .order-hamburger1 .layer.top {top:14px; left:6px; transform:rotate(45deg)} .selTit .order-hamburger1 .layer.mid { top:14px; left:6px } .selTit .shy-menu-div.is-open .order-hamburger1 .layer.mid {opacity:0; left:0} .selTit .order-hamburger1 .layer.btm { top:21px; left:6px } .selTit .shy-menu-div.is-open .order-hamburger1 .layer.btm {top:14px; left:6px; transform:rotate(-45deg)} .selTit .changeOrder1 {text-align: center; justify-content: center; flex: 0 0 70px; width: 70px;} .selTit .changeOrder1 .order-hamburger1 span{background-color: #b4bbc5; min-width: unset !important; padding: 0 !important; border-radius: 0 !important;} /* 팝업형 알림 모달 공통 */ .popupModal:not(.ssCheck) .modal_content{color: #fff;} .popupModal .modal_content.normal .modalBtnGroup{background-color: #0b7b1e;} .popupModal .modal_content.caution .modalBtnGroup{background-color: #c19003;} .popupModal .modal_content.warning .modalBtnGroup{background-color: #9d560c;} .popupModal .modal_content.danger .modalBtnGroup{background-color: #a90000;} .popupModal:not(.ssCheck) .modal_content form{background-color: unset;} .popupModal .modal_content .modalBody{background-color: unset; flex-direction: column; padding: 2rem 1.5rem 1.5rem !important; gap: 1.5rem; position: relative;} .popupModal .modal_content .modalBody .row{display: flex; justify-content: center;} .popupModal:not(.ssCheck) .modal_content .modalBody::before{content: "\f071"; font-family: 'fa'; font-weight: 900; font-size: 9rem; justify-content: center; display: flex; opacity: 0.1; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); animation: blinkO_2 1.5s infinite; color: #fff !important;} @keyframes blinkO_2 {0%{opacity: 0.3;} 50%{opacity: 0.1;} 100%{opacity: 0.3;}} .popupModal:not(.ssCheck) .modal_content .modalBody .row:last-child{margin-top: 1.5rem;} .popupModal .modal_content .modalBody .row .item{text-align: center;} .popupModal .modal_content .modalBody .row .item.eventOcc{font-size: 3rem; font-weight: 600; letter-spacing: 3px;} .popupModal .modal_content .modalBody .row .item.text{line-height: 1.3; font-size: 1.05rem; font-weight: 300;} .popupModal .modal_content.caution .modalBody .row .item.text{font-weight: 500;} .popupModal .modal_content .modalBody .row .item.switchItem{margin-right: 0.75rem;} .popupModal .modal_content .modalBody .row .item.switchItem label{margin: 0;} .popupModal .modal_content .modalBody .row .item.moratorium{font-weight: 300; font-size: 0.9rem; display: flex; align-items: center;} .popupModal .modal_content.caution .modalBody .row .item.moratorium{font-weight: 400;} .popupModal .modal_content .modalBody .row .item.moratorium input{text-align: center; border: none; border-bottom: 1px solid #fff; border-radius: 3px 3px 0 0; padding: 0; margin: 0 3px; background: unset; color: #fff;z-index: 10;} .popupModal .modal_content.caution .modalBody .row .item.moratorium input{border-bottom: 1px solid #000; color: #000;} .popupModal .modal_content .modalBody .row .item.moratorium input:focus{background: rgba(255,255,255,0.2);} .popupModal .modalBtnGroup .modalBtnDiv{gap:1rem;} .popupModal .modalBtnGroup .btn-white{color: #fff !important; background: unset; border: 1px solid #fff;} .popupModal .modalBtnGroup .link-btn{background: #fff; color: #222 !important; display: inline-flex; align-items: center;} /* 팝업형 감지유예 모달 */ .popupModal.ssCheck .tit{padding: 2rem 1.5rem 0 !important;} .popupModal.ssCheck .modal_content .modalBody .row .item.moratorium {font-weight: 500;} .popupModal.ssCheck .modal_content .modalBody .row .item.moratorium input{border-bottom: 1px solid #000; color: #000;} .popupModal.ssCheck .modal_content .modalBody .row .item.moratorium input:focus{background: rgba(0,0,0,0.05);} /* 리스트 유지형 모달 공통 (투입현황 등) */ .modal .modalFormDiv .listDiv .item.companyCnt, .modal .modalFormDiv .listDiv .item.equipCnt, .modal .modalFormDiv .listDiv .item.putTotal{text-align: center; justify-content: center;} .modal.modalList .modalFormDiv {overflow: auto; display: flex; flex-direction: column;} .modal.modalList .modalFormDiv .listDiv{gap: 0; min-height: auto;} .modal.modalList .modalFormDiv .listBodyDiv{display: flex; flex-direction: column;} .modal.modalList .modalFormDiv .listDiv .column{display: flex; flex-direction: column;} .modal.modalList .modalFormDiv .listDiv .row{flex-direction: row; position: relative;} .modal.modalList .modalFormDiv .listDiv .row .item{min-height: 42px;} .modal.modalList .modalFormDiv .listDiv .row+.row{margin: 0;} .modal.modalList .modalFormDiv .listDiv .row.total{background-color: #deebff; font-weight: 600;} .modal.modalList .modalFormDiv .listDiv .row.allTotal{background-color: #f8efda;} /* CCTV 목록 모달 */ #cctvListModal .modalBody.top {flex-direction: column; gap: 0.75rem;} #cctvListModal .modalBody.top .row {display: flex; flex-direction: row; align-items: center;} #cctvListModal .modalBody.top .row .answer {max-width: 350px;} #cctvListModal .modalBody.top .row .answer input{margin-right: 0.5rem;} #cctvListModal .modalBody.btm{padding-top: 0.5rem !important; flex-direction: column; min-height: 70px;} #cctvListModal .modalBody.btm::before{content: ""; width: 100%; height: 1px; background: #aaa;} /* #cctvListModal .modalBody.btm .row{min-height: 50px;} */ #cctvListModal .modalBody.btm .row .answer{justify-content: center; align-items: center; display: flex; margin-right: 0.5rem; font-size: 0.9rem;} /* 인원별 장비정보 모달 */ .modal .modalFormDiv .listDiv .item.equipNum, .modal .modalFormDiv .listDiv .item.timeCom, .modal .modalFormDiv .listDiv .item.bandCom, .modal .modalFormDiv .listDiv .item.location, .modal .modalFormDiv .listDiv .item.battaryState, .modal .modalFormDiv .listDiv .item.userNm, .modal .modalFormDiv .listDiv .item.userOcc, .modal .modalFormDiv .listDiv .item.userContactNum {text-align: center; justify-content: center;} .keepList .tit{display: flex; gap: 0.5rem; align-items: center; font-weight: 500; font-size: 1rem; flex-flow: row wrap;} .keepList .tit .userNm{font-size: 1.5rem; font-weight: 700;} .keepList .tabDiv {border-bottom: 1px solid #aaa; margin: 0 1.5rem 0.5rem;} .keepList .tabDiv .bTab{flex-flow: unset;} .keepList .tabDiv .subTab{min-width: 100px;} .keepList .modalBody{margin-bottom: 0.5rem;} .keepList .modalFormDiv {overflow: auto; display: flex; flex-direction: column;} .keepList .modalFormDiv .listDiv{gap: 0; min-height: auto;} .keepList .modalFormDiv .listDiv .row .item{min-height: 42px;} body.forTablet .keepList .modalFormDiv .listDiv .row+.row{margin: 0;} .keepList .modalFormDiv .listBodyDiv{display: flex; flex-direction: column;} .keepList .tabContentsDiv{display: flex; flex-direction: column; overflow: auto;} .keepList .personEquipMoWrap{display: flex; flex-direction: column; overflow: auto;} .keepList .personEquipMoWrap>li{flex-direction: column; overflow: auto;} .keepList .tabContentsDiv .tabContentsList.show{display: flex;} body.forTablet .keepList .modal_content{min-width: 650px; min-height: 50%;} .keepList .listBodyDiv .item.stayTime::after{content: "분"; margin-left: 0.125rem;} .keepList .listBodyDiv .item.accTime::after{content: "분"; margin-left: 0.125rem;} .keepList .listBodyDiv .item.battaryState::after{content: "%"; margin-left: 0.125rem;} /* 존, 로케이션 투입현황 모달 */ #dashZoneListModal .tit, #dashLocationListModal .tit{justify-content: center; font-size: 1.25rem; gap: 0.375rem;} #dashZoneListModal .tit .zone{margin-right: 0.5rem;} #dashLocationListModal .tit .location{margin-right: 0.5rem;} #dashZoneListModal .tit .peopleCnt, #dashZoneListModal .tit .equipCnt, #dashZoneListModal .tit .peopleCnt, #dashZoneListModal .tit .equipCnt, #dashLocationListModal .tit .peopleCnt, #dashLocationListModal .tit .equipCnt{color: #2a539b;} #dashZoneListModal .tit .peopleCnt::after, #dashLocationListModal .tit .peopleCnt::after{content: "명";} #dashZoneListModal .tit .equipCnt::after, #dashLocationListModal .tit .equipCnt::after{content: "대";} #dashZoneListModal .modal_content, #dashLocationListModal .modal_content{max-width: 98%; min-height: unset;} /* 센서 상세 모달 */ #sensorDetailModal .tit{justify-content: center; display: flex; font-size: 1.25rem;} #sensorDetailModal .modal_content .modalBody .row{min-width: 500px; aspect-ratio: 5/3; justify-content: center; align-items: center;} #sensorDetailModal .modal_content .modalBody {padding: 1.5rem !important;} #selectCctvModal .modal_content .modalBody .row{cursor: pointer;} #selectCctvModal .modal_content .modalBody .row+.row{margin-top: 1.5rem;} #selectCctvModal .modal_content .modalBody .row:hover{color: #2a539b;} @media screen and (max-width: 940px) { .cctvBoradcastSelcetModal .modal_content{min-width: 98% !important;} .cctvBoradcastSelcetModal .modalFormDiv.listDiv{width: 100%;} body.dashboard .modal .modalFormDiv.listDiv .item.permCheckYn{z-index: 1; position: absolute !important; top: 50%; right: 0.725rem; color: #87949f; font-weight: 500; transform: translateY(-50%);} body.dashboard .modal .modalFormDiv.listDiv .item.changeOrder{z-index: 1; position: absolute !important; top: 50%; right: 0.725rem; color: #87949f; font-weight: 500; transform: translateY(-50%);} body.forTablet .cctvBoradcastSelcetModal .sensorItemDiv .item.forEnter{order: 3;} body.forTablet .cctvBoradcastSelcetModal .sensorItemDiv .listDiv .listBodyDiv .row{padding-right:3rem;} body.forTablet .modal.listModal .modal_content{min-width: 500px;height: 60vh;overflow-y: scroll;background: #fff;padding-bottom: 1.5rem;} } @media screen and (max-width: 760px) { #micBroadcastModal .alertMent{min-width: unset;} #putTotalModal .tit{padding: 2rem 1rem 1.5rem !important;} .modal.keepList .tit{padding: 2rem 1rem 1.5rem !important;} .modal.keepList .tabDiv {min-width: unset; overflow-y: hidden; margin: 0 1rem 0.5rem;} body.forTablet .keepList .modal_content{min-width: 98%; min-height: unset;} } @media screen and (max-width: 640px) { body.forMobile.dashboard .modal .modalFormDiv .row .item{padding: 14px 8px;} #dashSettingModal .modal_content {max-width: 340px !important;} body.forTablet .modal.listModal .modal_content{min-width: 280px;} .popupModal .modal_content .modalBody{padding: 2rem 1rem 1.5rem !important;} .popupModal .modal_content .modalBody .row .item.switchItem{margin-right: 0.5rem;} .popupModal .modal_content .modalBody .row .item.moratorium input{margin: 0; width: 45px !important;} #putTotalModal .modal_content{min-width: unset !important;} .modal.modalList .modalFormDiv .listDiv {width: 100%; overflow: auto;} .modal.modalList .modalFormDiv .listDiv .listBodyDiv{width: fit-content;} /* .modal .modalFormDiv .listDiv .item.companyCnt, .modal .modalFormDiv .listDiv .item.equipCnt{justify-content: flex-end;} .modal.modalList .modalFormDiv .listDiv .listHeaderDiv{display: none;} .modal.modalList .modalFormDiv .listDiv .listBodyDiv .column.mainComp .row:first-child{border-top: 1px solid #cbc4bc;} .modal.modalList .modalFormDiv .listDiv .row {padding: 0 0.5rem; font-size: 0.9rem;} .modal.modalList .modalFormDiv .listDiv .row .item{min-height: 50px;} .modal.modalList .modalFormDiv .listDiv .row .item.no{display: none;} .modal.modalList .modalFormDiv .listDiv .row .item.companyDiv, .modal.modalList .modalFormDiv .listDiv .row .item.companyNm, .modal.modalList .modalFormDiv .listDiv .row .item.putTotal{width: unset; flex: unset;} .modal.modalList .modalFormDiv .listDiv .row .item.companyCnt::after{content: "명"; margin-left: 0.2rem;} .modal.modalList .modalFormDiv .listDiv .row .item.equipCnt::after{content: "대"; margin-left: 0.2rem;} .modal.modalList .modalFormDiv .listDiv .row .item.none::after{display: none;} .modal.modalList .modalFormDiv .listDiv .row .item.companyDiv{min-width: 60px;} .modal.modalList .modalFormDiv .listDiv .row .item.companyNm{margin-right: auto;} .modal.modalList .modalFormDiv .listDiv .row .item.putTotal{width: 100%;} */ .modal.keepList .modalFormDiv .listDiv .row{flex-direction: row;} #sensorDetailModal .modal_content .modalBody .row{min-width: 300px;} } /******************************** page error ************************************/ body.pageError { position: relative; display: flex; justify-content: center; align-items: center; padding: 0 !important;background-image: url( '../img/bg_illur.png'); background-repeat: no-repeat; background-position: 50% 100%; background-size: 100%} @media screen and ( max-width: 940px) { body.pageError { background-position: 35% 114%; background-size: 302%} .modal.listModal .modal_content .modalBody .row .item.siteNm {width: 100%;} .modal.listModal .modal_content .modalBody .row.danger .item.eventOcc, .modal.listModal .modal_content .modalBody .row.warning .item.eventOcc, .modal.listModal .modal_content .modalBody .row.caution .item.eventOcc{font-size: 1rem; margin-top: 0;} } @media screen and ( max-width: 640px) { body.pageError { background-position: 33% 108%; background-size: 278%} } body.pageError .sys_tit { font-weight: bold; text-align: center; margin: 0 0 40px; width: 100%;} body.pageError .sys_tit > .ci { margin-bottom: 15px; font-size: 50px; color: #2f6097;} body.pageError .sys_tit > .ci img { width: 100px; height: auto; margin-top: 50px} body.pageError .sys_tit > .ciTit { font-size: 1.3rem; text-align: center; white-space: nowrap; color: #2a539b;} body.pageError .loginBox { display: flex; flex-direction: column; align-items: center; gap: 1rem} body.pageError .loginBox .inputDiv { width: 100%; height: 40px; display: flex; flex-direction: row; background-color: #fff; border-radius: 3px; align-items: center; border: 1px solid #dcdcdc} body.pageError .loginBox .inputDiv label { margin: 0 6px 0 10px; flex: 0 0 85px; font-size: 0.875rem; letter-spacing: 0; border-right: 1px solid #aaa; text-align: left; display: block} body.pageError .loginBox .inputDiv input, body.pageError .loginBox .inputDiv select { border: none !important; width: 100%; height: 38px; font-size: 1rem} body.pageError .loginBox .btnLogin { max-width: unset; width: 100%; margin-top: 8px;} body.pageError .loginBox .loginFuction { text-align: center; margin: 20px 0; color: #000} body.pageError .installItemContainer { height: fit-content; display: flex; flex-direction: column; align-items: center; width: 260px; justify-content: center} #dashSettingModal .modalBody.top .row .answer{flex: 1.5;} /******************************** 공지 팝업 ************************************/ body.popupNotice .popupNoticeDiv {width: 100%; height: 100%; background-color: #fff;display: flex;flex-direction: column;} body.popupNotice .popupNoticeDiv .tit {font-weight: 700;padding: 2rem 1.5rem 1.5rem !important;font-size: 1.1rem;} body.popupNotice .popupNoticeDiv .noticeBody{flex: 1;display: flex;padding: 0 1.5rem 1.5rem;background-color: #fff;overflow: auto;} body.popupNotice .popupNoticeDiv .noticeBody pre {line-height: 1.6;font-size: 1rem;font-weight: 500;font-family: Pretendard;} body.popupNotice .popupNoticeDiv .noticeBtnGroup {display: flex;flex-direction: row;justify-content: space-between;padding: 0 1rem;box-shadow: inset 0 6px 10px rgba(0, 0, 0, 0.1);background-color: #e7eaec;gap: 0.4rem;} body.popupNotice .popupNoticeDiv .noticeBtnGroup .noticeBtnDiv {display: flex;flex-direction: row;justify-content: center;padding: 0.725rem 0;gap: 0.725rem;} body.popupNotice .popupNoticeDiv .noticeBtnGroup .noticeBtnDiv #dontShowAgainYn {margin-right: 0.5rem;} /******************************** 통계 로딩 오버레이 ************************************/ #loading-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display:flex; justify-content: center; align-items: center; z-index: 9999;} #loading-overlay .spinner {border: 16px solid #f3f3f3; border-top: 16px solid #2a539b; border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite;} @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }