@charset "UTF-8"; body.loading:before { position:fixed;top:50%;left:50%;width:50px;height:50px;line-height:50px;font-size:44px;padding:5px;z-index:1000;margin-left:-30px;margin-top:-30px; display:block;content:''; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAAFoCAYAAAB65WHVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjBGQ0M4NkIzREU2MTFFQzlCMTRBMUYwMjUxMkJDRUUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjBGQ0M4NkMzREU2MTFFQzlCMTRBMUYwMjUxMkJDRUUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MEZDQzg2OTNERTYxMUVDOUIxNEExRjAyNTEyQkNFRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2MEZDQzg2QTNERTYxMUVDOUIxNEExRjAyNTEyQkNFRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PikJxRUAADj/SURBVHja7J0HnB5V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); background-size: 50px;background-position:center; background-repeat:no-repeat;background-color:#fff; overflow:hidden;border-radius: 50%;text-align: center; animation: spin 1s linear infinite;will-change: transform, opacity; box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.2); } body.loading:after { display:block;position:fixed;top:0px;left:0px;right:0px;bottom:0px;background:rgba(0,0,0,0);z-index:999;will-change: transform, opacity;content:''; } /*body.dashboard.loading:before { display:none; } /mrjoo::x::왜막았지?*/ /*body.dashboard.loading:after { display:none; } /mrjoo::x::왜막았지?*/ body{min-width: 320px; overflow: hidden} @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #wrap{width:100%;height:100%; overflow:hidden; position:relative; min-width:320px;} #wrap.main { overflow-y:scroll; } .login_Loading{display: none; position: fixed; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0,0,0,0.4) url(../images/videoLoading.gif) no-repeat center ; } .login_Loading.on{display: block} .clearFix{} .clearFix::before{content: ""; clear: both; display: block;} .clearFix::after{content: ""; clear: both; display: block;} /* {transition: all .4s; -webkit-transition: all .4s;} */ #header{width: 230px; height: 100%; box-sizing: border-box; position: fixed; left: 0; background: #015794; transition: all .4s; -webkit-transition: all .4s; box-shadow: 2px 0 20px rgba(0,0,0,0.1); z-index: 111;} #header h1{display: flex; justify-content:center; align-items: center; width: 100%; height: 60px; text-align: center; box-shadow:2px 0 15px rgba(9, 51, 68, 0.51); position:relative; z-index:50; z-index: 110}/*background: #015794 url(../images/logo.png) no-repeat center; background-size: 150px 29px; text-indent: -9999px;*/ #header #navToggle{width: 40px; height: 60px; background:#fff; border: 0; position: absolute; top: 0; text-indent: -9999px; left: 100%; border-right:1px solid #dcdcdc; transition: all .4s; -webkit-transition: all .4s; z-index: 112;} #header #navToggle::after{content: ""; display: block; width: 8px; height: 15px; background:#fff url(../images/btn_navToggle.png) no-repeat center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all .4s; -webkit-transition: all .4s;} #header h1.h1On{background: none !important; z-index: -1;} #header h1.h1On img{display: none !important;} #wrap #header h1 img.cLogo{display: block} #wrap #header h1 img.emblem{display: none;} #wrap.menuOff #header h1 img.cLogo{display: none} #wrap.menuOff #header h1 img.emblem{display: block; width: 25px;} #header #navToggle.active::after{transform: translate(-50%, -50%) rotate(180deg);} #header .mobileshow{display: none; width: 50px; height: 60px; background:#015794; border: 0; position: absolute; top: -60px; text-indent: -9999px; left: 100%;z-index: 112; position:relative;} #header .mobileshow span{display:inline-block; width:25px; height:2px; background:#fff; position:absolute; transition: all .4s; -webkit-transition: all .4s; left:15px;} #header .mobileshow span:nth-child(1){top:20px;} #header .mobileshow span:nth-child(2){top:30px;} #header .mobileshow span:nth-child(3){top:40px;} .moNavtop{ padding:9px 15px; border-bottom:1px solid #818181; display:none;} .moNavtop .moNavtop_name{background: url(../images/icon_user.png) no-repeat left center; background-size:30px; color:#fff; font-size:18px; height:30px; line-height:30px; padding:10px 45px;} .moNavtop .moNavtop_menu{overflow:hidden;} .moNavtop .moNavtop_menu li{width:50%; float:left; color:#fff; font-size:13px; line-height:2; font-weight:400; padding-left:25px; box-sizing:border-box;} .moNavtop .moNavtop_menu li:nth-child(1){background: url(../images/icon_tg_user.png?2) no-repeat left center; background-size: 20px; filter : brightness(300%);} .moNavtop .moNavtop_menu li:nth-child(2){background: url(../images/icon_tg_admin.png?2) no-repeat left center; background-size: 20px; filter : brightness(300%);} .moNavtop .moNavtop_menu li:nth-child(3){background: url(../images/icon_logout.png?2) no-repeat left center; background-size: 20px; filter : brightness(300%);} .moNavtop .moNavtop_menu li:nth-child(4){background: url(../images/icon_pwc.png?2) no-repeat left center; background-size: 20px; filter : brightness(300%);} .moNavtop .monavClose{ width: 30px; position:fixed; left:310px; text-indent:-9999px; top: 10px; color:#fff; font-size:20px; cursor:pointer; background : url(../img/icon_monavClose.png) no-repeat center; background-size: 25px auto; height: 30px; } .mopass_info_box {display:none; position: fixed; transform:translate(-50%, -50%); top: 50%; left: 50%; width: 200px;padding: 10px 17px;background: #fff;border: 1px solid #ddd;border-radius: 10px;box-sizing: border-box;z-index:99999;line-height:1.5;} .mopass_info_box .passTit{ margin-bottom:10px; color:#666;} .mopass_info_box .passipBox{margin-bottom:5px;} .mopass_info_box .passipBox input{height:32px; line-height:32px; font-weight:400;} .mopass_info_box .passBtn{text-align:center; margin-top:10px;} .mopass_info_box .passBtn button, .pass_info_box .passBtn a{ display: inline-block; height: 30px; line-height: 30px; padding: 0 12px; background: #015794; color: #fff; font-size: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.1); font-weight:400; vertical-align : middle; } .pass_info_box .passBtn a.passCh{background:#ddd; color:#666;} #container{width: 100%; padding:0 0 0 230px; background: #f4f8fb; box-sizing: border-box; transition: all .4s; -webkit-transition: all .4s;} #container.main { margin-top:60px !important; height:calc( 100% - 60px );overflow: hidden; overflow-y: scroll;} #nav::-webkit-scrollbar { width:2px; } #nav::-webkit-scrollbar-thumb { background:transparent; } #nav::-webkit-scrollbar-track { background:transparent; } #nav{ height:calc(100% - 70px); overflow:auto; } #nav .depth1{} #nav .depth1 > li{} #nav .depth1 > li > a{display: block; line-height: 50px; color: #fff; font-weight: 500; padding: 0 0 0 10px; box-sizing: border-box; font-size: 16px;} #nav .depth1 > li > a > .icon{display: inline-block; margin-right: 5px; width: 25px; height: 50px; vertical-align: bottom;background-repeat:no-repeat;background-position:left center;baground-size:25px;filter:brightness(10);} #nav .depth1 > li > a > .dep2Toggle{display:inline-block; float: right; margin:20px 20px 0 0; width: 12px; height: 8px; text-indent: -9999px; background: url(../images/btn_depToggle.png) no-repeat center / contain; transform: rotate(180deg);} #nav .depth1 > li.active > a{color:#fff; } #nav .depth1 > li.active > a > .dep2Toggle{transform: rotate(0);} #nav .depth1 > li.active > a > .icon { filter:none; } #nav .depth1 > li > .depth2{display:none; position: relative} #nav .depth1 > li.active > .depth2 { display:block; } #nav .depth1 > li > .depth2 > li{position: relative} /*#nav .depth1 > li > .depth2 > li > a{display: block; font-size: 15px; font-weight: 400; padding-left:45px; line-height: 40px; } 이전거*/ #nav .depth1 > li > .depth2 > li > a { display:block; font-size:14px; font-weight:400; padding-left:35px; line-height:35px; } #nav .depth1.user > li:nth-child(1) > a > .icon{background: url(../images/gnb_icon_user_01.png?2) no-repeat left center / contain !important;} #nav .depth1.user > li:nth-child(2) > a > .icon{background: url(../images/gnb_icon_user_02.png?2) no-repeat left center / contain !important;} #nav .depth1.user > li:nth-child(3) > a > .icon{background: url(../images/gnb_icon_user_03.png?2) no-repeat left center / contain !important;} #nav .depth1.user > li:nth-child(4) > a > .icon{background: url(../images/gnb_icon_user_04.png?2) no-repeat left center / contain !important;} #nav .depth1.user > li:nth-child(5) > a > .icon{background: url(../images/gnb_icon_user_05.png?2) no-repeat left center / contain !important;} #nav .depth1.user > li:nth-child(6) > a > .icon{background: url(../images/gnb_icon_user_06.png?2) no-repeat left center / contain !important;} #nav .depth1.user > li:nth-child(7) > a > .icon{background: url(../images/gnb_icon_user_07.png?2) no-repeat left center / contain !important;} #nav .depth1.user > li:nth-child(8) > a > .icon{background: url(../images/gnb_icon_user_08.png?2) no-repeat left center / contain !important;} #nav .depth1.user > li:nth-child(9) > a > .icon{background: url(../images/gnb_icon_user_09.png?2) no-repeat left center / contain !important;} #nav .depth1.admin > li:nth-child(1) > a > .icon{background: url(../images/gnb_icon_admin_01.png?2) no-repeat left center;background-size:contain;} #nav .depth1.admin > li:nth-child(2) > a > .icon{background: url(../images/gnb_icon_admin_02.png?2) no-repeat left center;background-size:contain;} #nav .depth1.admin > li:nth-child(3) > a > .icon{background: url(../images/gnb_icon_admin_03.png?2) no-repeat left center;background-size:contain;} #nav .depth1.admin > li:nth-child(4) > a > .icon{background: url(../images/gnb_icon_admin_04.png?2) no-repeat left center;background-size:contain;} #nav .depth1.admin > li:nth-child(5) > a > .icon{background: url(../images/gnb_icon_admin_05.png?2) no-repeat left center;background-size:contain;} #nav .depth1.admin > li:nth-child(6) > a > .icon{background: url(../images/gnb_icon_admin_06.png?2) no-repeat left center;background-size:contain;} #nav .depth2 > li.active > .depth3 { display:block; } #nav .depth2 > li > .depth3 > li{} /*#nav .depth2 > li > .depth3 > li > a{display: block; font-size: 14px; font-weight: 300; padding-left:50px; line-height: 30px; position: relative;} 이전거*/ #nav .depth2 > li > .depth3 > li > a { display:block; font-size:13px; font-weight:300; padding-left:50px; line-height:20px; position:relative; } #nav .depth2 > li.active > a > .dep3Toggle{background: url(../images/icon_dep3_off.png) no-repeat center / contain;} #nav .depth2 > li > a > .dep3Toggle{right: 20px; top: 15px; display:inline-block; position:absolute; width: 11px; height: 11px; text-indent: -9999px; background: url(../images/icon_dep3.png) no-repeat center / contain; filter: brightness(0.7) invert(1);} /* GNB색상 */ #nav .depth1 > li > a{} #nav .depth1 > li.active > a{background: rgba(0,0,0,0.7)} #nav .depth2{} #nav .depth1 > li > .depth2 > li > a{color: #fff; background: rgba(0,0,0,0.25)} #nav .depth1 > li > .depth2 > li.active > a, #nav .depth1 > li > .depth2 > li:hover > a{background: rgba(0,0,0,0.45) } #nav .depth1 > li > .depth2 > li.hover > a:before{content: ""; } #nav .depth2 > li > .depth3 > li > a{background: rgba(0,0,0,0.25); color: #ddd; position: relative; padding-top: 5px; padding-bottom: 5px;} #nav .depth2 > li > .depth3 > li > a:before{content: ""; background: #ddd; display: inline-block; width: 5px; height: 1px; margin-right: 5px; margin-bottom:5px;} #nav .depth2 > li > .depth3 > li:hover a, #nav .depth2 > li > .depth3 > li.active a{background: rgba(255,255,255,0.15); color:#fff; font-weight: 500;} /* 서브페이지 검색영역 */ .subSch_wrap{margin-bottom:20px;} .schTable{width: 100%; border-top: 1px solid #aaa; background: #fff;} .schTable > tbody th, .schTable > tbody > tr > td{vertical-align: middle; line-height: 30px; text-align: left; padding:5px; border-bottom: 1px solid #eee; font-size: 14px;} .schTable > tbody > tr > th{font-size: 14px; font-weight: 500; background: #fbfbfb; padding: 5px 10px;} .schTable > tbody > tr > td > select{width: 200px;} .schTable > tbody > tr > td > textarea{ border: 1px solid #dcdcdc; width: 100%; padding: 10px; box-sizing: border-box; height: 100px; overflow-y: auto;} .schTable > tbody > tr > td .schtdTitle:first-child{margin-left: 0; padding-left: 0;} .schTable > tbody > tr > td .schtdTitle:first-child::before{display: none;} .schTable > tbody > tr > td .chkbox_wrap{display: inline-block;} .schTable > tbody > tr > td .radio_wrap{display: inline-block;} .schTable > tbody > tr > td .dateinput_area{display: inline-block;} .schTable > tbody > tr > td .schtdTitle{display: inline-block; margin-left:20px; margin-right: 20px; line-height: 2.3; font-weight: bold; position: relative; padding-left: 20px;} .schTable > tbody > tr > td .schtdTitle::before{position: absolute; content: ""; width: 1px; height: 14px; background: #999; top:50%; margin-top: -7px; left: 0;} .schBtn_wrap{text-align: center;} .schBtn_wrap .schEnter{display: inline-block; width: 120px; background: #015794; height: 34px; line-height: 34px; text-align: center; border: 0; font-size: 16px; font-weight: 500; color: #fff; margin-top: 10px; } .dateinput_wrap{width: 120px; display: inline-block;} /* 콘텐츠 상단 */ .topInfo_wrap{position: fixed; z-index: 100; width: calc( 100% - 230px ); height: 60px; box-shadow: 2px 0px 20px rgba(0,0,0,0.10); background: #fff; line-height: 60px; font-size: 14px; color: #333;font-weight:600;top:0px;} .topInfo_wrap .topInfo_sch{margin-left: 60px; float: left; overflow: hidden;} .topInfo_wrap .topInfo_sch div{ float:left; margin:0;/* 15px;*/ font-size:14px; } /*.topInfo_wrap .topInfo_sch div select { width:180px; height:35px; line-height:35px; font-size:14px; vertical-align:baseline; background-color:#f8f8f8; margin-left:5px; font-weight:400; }*/ .topInfo_wrap .topInfo_sch div select { width:180px; min-height:40px; border:none; margin:0; vertical-align:baseline; font-size:14px; font-weight:400; cursor:pointer; background-color:transparent } .topInfo_wrap .topInfo_sch div select option { font-size:14px; } .topInfo_wrap .topInfo_sch div:nth-of-type(1) select { width:120px; background:transparent url(../images/icon_selectArrowX.png) no-repeat right 10px center; } .topInfo_wrap .topInfo_sch div:nth-of-type(2) select { background:transparent url(../images/icon_selectArrowX.png) no-repeat right 10px center; } .topInfo_wrap .topInfo_sch div:nth-of-type(3) select { width:300px; background:none; } .topInfo_wrap .topInfo_sch div:last-child select { font-size:15px; font-weight:500; } .topInfo_wrap .topInfo_sch .time{ font-size:14px;color:#999;line-height: 60px;display:inline-block;vertical-align: bottom;padding-left:10px;font-weight:400;} .topInfo_wrap .topInfo_sch .time::before{content: ""; display: inline-block; width: 18px; height: 60px; background: url(../images/icon_time.png) no-repeat center;background-size: contain;margin-right: 5px; vertical-align: bottom;} .topInfo_wrap .topInfo_member{ float: right;} .topInfo_wrap .topInfo_member .portletSet{float: left; background: url(../images/icon_portletSet.png) no-repeat left center; padding:0 30px 0 30px; margin-right: 30px; position: relative; cursor: pointer;font-weight:400;font-size:14px;opacity:0.6;} .topInfo_wrap .topInfo_member .portletSet::before{ content: ""; display: inline-block; width: 1px; height: 18px; background: #999; position: absolute; top: 22px; right: 0; } .topInfo_wrap .topInfo_member > .member{display: inline-block; background: url(../images/icon_user.png) no-repeat left 13px; font-weight: 500; color: #333; padding:0 0 0 48px; margin-right: 20px;position: relative;} .topInfo_wrap .topInfo_member > .member p{padding-right: 20px; cursor: pointer;font-weight: 600;font-size:15px;} .topInfo_wrap .topInfo_member > .member p:after{content:""; display:inline-block; width:10px; height:6px; background: url(../images/btn_userToggle.png) no-repeat center center; position:absolute; right:0; top:28px; } .topInfo_wrap .topInfo_member > .member.on p:after{transform:rotate(180deg);} .topInfo_wrap .topInfo_member > .member .memberSub {display: none; position: absolute; top: 90%; left: 50%; transform: translateX(-50%); width: 146px; padding: 10px 17px; background: #fff; border: 1px solid #ddd; border-radius: 10px; box-sizing: border-box;z-index:20;} .topInfo_wrap .topInfo_member > .member .memberSub::after{ content: ""; display: block; background: url(../images/icon_memberSub_arrow.png) no-repeat center; position: absolute; width: 15px; height: 9px; left: 50%; transform: translateX(-50%); top: -9px; } .topInfo_wrap .topInfo_member > .member .memberSub li {line-height: 30px;} .topInfo_wrap .topInfo_member > .member .memberSub li a{color: #666; font-size: 14px; display: inline-block; padding-left: 25px;} .topInfo_wrap .topInfo_member > .member .memberSub li a.logout{background: url(../images/icon_logout.png?2) no-repeat left center;background-size:20px;} .topInfo_wrap .topInfo_member > .member .memberSub li a.pwc{background: url(../images/icon_pwc.png?2) no-repeat left center;background-size:20px; } .topInfo_wrap .topInfo_member > .member .memberSub li a.user{background: url(../images/icon_tg_user.png?2) no-repeat left center; background-size:20px;} .topInfo_wrap .topInfo_member > .member .memberSub li a.admin{background: url(../images/icon_tg_admin.png?2) no-repeat left center; background-size:20px; } .contents{padding:75px 15px 15px 15px; overflow-y:hidden; } .contents_ii{padding:0px 0px 22px 0px; overflow-y:hidden; } #container.main > .contents { padding-top:15px; } .grid { margin-left:-15px;/*font-size:0px;*/padding-bottom:0px; } .portlet{ width: calc(50% - 30px);margin-left:15px;margin-bottom:15px; background: #fff; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); display:inline-block; overflow: hidden; border-radius:5px; } .portlet .title { border-bottom:1px solid transparent;/*#efefef;*/ cursor:move; position:relative; } .portlet .title.border { border-bottom:1px solid #efefef; } .portlet .title > span { font-size:14px;color:#999;vertical-align: baseline;margin-left:5px;font-weight:400;} .portlet .title h2{ font-size: 18px; font-weight: 500; color: #333; line-height: 50px;height: 50px; padding:0 20px; box-sizing: border-box;} .portlet .title h2 > span { font-size:14px;color:#999;vertical-align: baseline;margin-left:5px;font-weight:400;} .portlet .title h2 > span > b { font-size:14px;color:#999;vertical-align: baseline;font-weight:400; } .portlet .title h2 > span.right { float:right;margin-right:30px; } .portlet .title h2 > div { display:inline-block;font-size:13px;cursor:pointer; } .portlet .title > span > div { position:relative;top:5px;right:10px;line-height:50px;font-size:0px;display:block;} .portlet .title > span > div > input { display:inline-block; vertical-align: top; font-size:13px; cursor:pointer; margin-right:60px; width:110px; height: 30px; } .portlet .title > span.select { display:flex; vertical-align: top; font-size:13px; cursor:pointer; margin-right:70px; margin-top:5px; height: 30px; } .portlet .title > span.select .searchYear { margin-right: 5px; width: 70px;} .portlet .title > span.select .searchMonth { margin-right: 5px; width: 50px;} .portlet .title > span.select .searchDay { margin-right: 5px; width: 50px;} .portlet .title > span > div .tui-ico-date{position: absolute; right: 70px; top:10px; cursor:pointer;} .portlet .title > span { position: absolute;top:5px;right:10px;line-height:50px;font-size:0px;display:block;} .portlet .title > span > a {display:inline-block;font-size:13px;cursor:pointer;} .portlet .title > span > a.more {width:30px;height:40px; background: url(../images/icon_list_more.png) no-repeat center center;} .portlet .title > span > a.more.txtMore{width: auto; background: unset;} .portlet .title > span > a.reload {width:30px;height:40px; background: url(../images/icon_list_reload.png) no-repeat center center;background-size:22px;opacity:0.4;transform: rotate(0deg);transition: 1s; } .portlet .title > span > a.reload.roll {transform: rotate(360deg);transition: 1s;} .portlet .title > span > a.popup { width:30px; height:40px; background:url("../images/icon_moDate.png") no-repeat center center; background-size:18px; opacity:0.8; } .portlet .title > span > a.maptype { width:30px; height:40px; background:url("../images/map_icon.png") no-repeat center center; background-size:28px; opacity:0.4; } .portlet .title > span > a.save { width:30px; height:40px; background:url("../images/save.png") no-repeat center center; background-size:23px; opacity:0.4; } .portlet .title > span > a + a { margin-left:0px; } .portlet .title h2 a{background: url(../images/btn_portlet_more.png) no-repeat right center; padding-right: 16px;} .portlet .title h2 a.normalLink { color:#1c71c6; text-decoration:underline; padding:0; background:none; } /*mrjoo::0302*/ .portlet .title .total{float: right; font-size: 12px; position: absolute; right: 20px; top: 20px;} .portlet .cont { position:relative; overflow-y:auto; height:235px; min-height:225px; /*border-top:1px solid #efefef;*/ box-sizing:border-box; background:#fff; } .portlet .cont .mCSB_inside > .mCSB_container { margin-right:0px; } .portlet .cont.work_history { padding:0 5px; /*border-top:1px solid transparent;*/ } .cont.saftyNotice{overflow-y:hidden;} .portlet .title > h2 > span.select { display:inline-block; vertical-align: top; font-size:13px; cursor:pointer; height: 30px; } .portlet .title > h2 > span.select .searchYear { margin-right: 5px; width: 70px;} .portlet .title > h2 > span.select .searchMonth { margin-right: 5px; width: 50px;} .portlet .title > h2 > span.select .searchDay { margin-right: 5px; width: 50px;} .portlet .title > span.alarmSearchDate { float: right; margin-right: 70px; font-size: 14px; top: -1px} /* 현장정보 */ .areaInfo{padding: 30px 0px;} .areaInfo ul{margin:20px 0 60px; overflow: hidden; text-align: center; font-size: 0;} .areaInfo ul li{display: inline-block; width: calc(100% / 3); box-sizing: border-box; line-height: 1;} .areaInfo ul li:nth-child(2){border-left: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9;} .areaInfo ul li .t{color:#111; font-size:17px; margin-bottom: 25px; font-weight: 500;} .areaInfo ul li .day{font-size:15px; color: #101010;} .areaInfo ul li .day strong{font-size: 48px; font-weight: 500; margin-right: 10px} .areaInfo .graph_wrap{overflow: hidden; text-align: center; height: 30px;} .areaInfo .graph_wrap > div{display: inline-block; vertical-align: middle;} .areaInfo .graph_wrap > div.startDay{font-size: 16px; color: #666;} .areaInfo .graph_wrap > div.graph{width: 420px; height: 6px; background: #dadada; border-radius: 3px; position: relative; margin: 0 25px; } .areaInfo .graph_wrap > div.graph div{position: absolute; height: 6px; border-radius: 3px; background: #00a2e1;} .areaInfo .graph_wrap > div.graph div span{display: inline-block; position: absolute; right: 0; top: -11px; font-size: 14px; color: #666; border:3px solid #00a2e1; background: #fff; z-index: 1; height: 28px; line-height: 22px; box-sizing: border-box; text-align: center; padding: 0 20px; transform: translate(-50% -50%); border-radius: 14px;} .areaInfo .graph_wrap > div.endDay{font-size: 16px; color: #666;} /* 환경정보 */ .weatherInfo{padding: 20px 0;} .weatherInfo ul{text-align: center; font-size: 0;display:block;padding:10px 0px;} .weatherInfo ul li{border-right: 1px solid #eee; display: inline-block; width: 30%; box-sizing: border-box;padding:5px 0px; } .weatherInfo ul li:last-child{border-right: 0;width:40%;} .weatherInfo ul li .t{line-height: 1; font-size: 16px; color: #666; font-weight: 400;} .weatherInfo ul li .icon{ height: 90px; font-size: 0;} .weatherInfo ul li .icon:after{display:inline-block; height:100%; content:""; vertical-align:middle;} .weatherInfo ul li .icon img{vertical-align: middle;height:90px;width:auto;} .weatherInfo ul li .desc{line-height: 30px; font-size: 16px; color: #333; display: block; width: 100%;} .weatherInfo ul li .desc b{font-size:18px;vertical-align: top;font-weight:600;} .weatherInfo ul li .desc.big { font-size:18px; } .weatherInfo ul li .desc.big > b { font-size:26px; } .weatherInfo ul li .spec { font-size:16px;color:#999; } .weatherInfo ul li .spec > b { font-weight:500; } .weatherInfo ul li.dlrow { padding:0px 0px; } .weatherInfo ul li.dlrow > dl.rows { display:block;padding:0px 30px 0px 30px; text-align: left;} .weatherInfo ul li.dlrow > dl.rows > dd { display:block;position: relative;padding-left:36px;} .weatherInfo ul li.dlrow > dl.rows > dd + dd { border-top: 0px solid #eee; } .weatherInfo ul li.dlrow > dl.rows > dd > span { display:inline-block;line-height:34px;font-size:16px;color:#666; } .weatherInfo ul li.dlrow > dl.rows > dd > img { position: absolute;top:50%;left:0px;width:24px;transform: translateY(-50%); } .weatherInfo ul li.dlrow > dl.rows > dd > p { display:inline-block;line-height:32px;font-size:15px;float:right; } .weatherInfo ul li.dlrow > dl.rows > dd > p > b { font-size:15px;vertical-align: bottom;margin-right:2px;line-height:34px;display:inline-block;font-weight:600;} /* 작업구역별 안전고리 현황 */ .workZone{padding: 0;} .portlet_table_wrap{overflow-x: auto; overflow-y: auto; height: 100%; } .portlet_table{ width: 100%;} /*.portlet_table thead th { background:#f4f8fb; font-size:14px !important; border-bottom:1px solid #ddd; line-height:35px; font-weight:600; color:#333; font-weight:500; text-align:center; position:sticky; top:0px; padding:0 10px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; z-index:1; }*/ .portlet_table thead th { background:#efefef;/*#e8ebed*/ font-size:14px !important; /*border-bottom:1px solid #ddd;*/ line-height:33px; font-weight:600; color:#666; font-weight:500; text-align:center; position:sticky; top:0px; padding:0 2px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; z-index:1; } .portlet_table thead tr.stickyTr th{top:37px;} /*.portlet_table tbody td { overflow:hidden; border-bottom:1px solid #ddd; padding:9px 5px; font-size:16px !important; line-height:21px; vertical-align:middle; font-weight:400; color:#333; text-align:center; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box; }*/ .portlet_table tbody td { overflow:hidden; border-bottom:1px solid #ddd; padding:5px 5px; font-size:14px; line-height:21px; vertical-align:middle; font-weight:400; color:#333; text-align:center; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box; } .portlet_table tbody td.box_ver { padding: 5px 20px; } .portlet_table tbody td.box_ver > span { line-height: 21px; max-height: 42px; white-space: normal; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .portlet_table tbody th img, .portlet_table tbody td.img { padding-top:0px;padding-bottom:0px; } .portlet_table tbody td img { vertical-align: middle;height:21px; } .portlet_table tbody td img.status { vertical-align: middle;height:21px; } .portlet_table tbody td img.cam { vertical-align: middle;height:16px; } .portlet_table tbody th.left, .portlet_table tbody td.left { text-align:left; padding:5 3px 5 10px;} .portlet_table tbody th.right, .portlet_table tbody td.right { text-align:right; padding:5px 20px 5px 0;} .portlet_table tbody tr:last-child td { border-bottom: 0px solid #ddd; } .portlet_table.bbi tbody td { padding-top:5px;padding-bottom:5px;line-height:39px; } .portlet_table.bbi tbody tr:last-child td { border-bottom: 0px solid #ddd; } .popupTable_wrap .portlet_table{border-top:2px solid #00a2e1} .popupTable_wrap.mainDisasterPop{max-height: 400px; overflow-y: auto;} .popupTable_wrap.mainDisasterPop .resultReg{display: inline-block; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; border: 1px solid #00a2e1} .popupTable_wrap.mainDisasterPop .resultReg.on{background: #00a2e1;} .popupChart_wrap{margin-top: 20px; height: 270px; overflow: hidden} .popupChart_wrap.riskAssessmentPop canvas{margin-top: 0px;} .mCSB_scrollTools_vertical {z-index:2;} .mCSB_scrollTools_vertical + .mCSB_container { position:absolute !important;top:0px !important;left:0px !important;right:0px !important;height:36px;overflow:hidden;z-index:1;} .outputAreaTable_wrap .mCustomScrollBox .mCSB_scrollTools_vertical + .mCSB_container {height: 74px;} /* 환경관리 모니터링 현황 */ .milieuMonit{padding: 0; height:260px;} .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.3) !important; } #nav .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: rgba(255,255,255,0) !important; } /* 안전알림현황 */ .saftyNotice{padding: 0px;} .saftyNotice .legend{background: #fff; padding-left:0px; width: 100%; box-sizing: border-box;height:35px;overflow: hidden;} .saftyNotice .legend ul{overflow: hidden; display: flex; align-items: center; height: 35px; justify-content: flex-start; } .saftyNotice .legend ul li{font-size: 14px; line-height: 35px; padding: 0px 20px;} .saftyNotice .legend ul li > i {display: flex; align-items: center; gap: 5px;} .saftyNotice .legend ul li:before{content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;} .saftyNotice .legend ul li.i::before{background: #aca1fe/*#05c7e8*/;} .saftyNotice .legend ul li.a::before{background: #ffcb2b;} .saftyNotice .legend ul li.w::before{background: #f53455;} .saftyNotice .legend ul li span:first-child{margin: 0 3px;} .saftyNotice .legend ul li span:last-child{font-weight: 600;} /* .saftyNotice .legend ul li > span { font-size:44px;font-weight:500; display:inline-block;margin-left:0px;line-height:58px;vertical-align: middle;float:right;} .saftyNotice .legend ul li > span.blue { color:#7b66ff; } .saftyNotice .legend ul li > span.orange { color:#ffa62f; } .saftyNotice .legend ul li > span.red { color:#ff587b; } .saftyNotice .legend ul li > i.i::after{content: "관심"; font-size:16px;} .saftyNotice .legend ul li > i.a::after{content: "주의"; font-size:16px;} .saftyNotice .legend ul li > i.w::after{content: "경고"; font-size:16px;} */ .saftyNotice .alert_list{ background: #fff;border-left: 1px solid #eee;box-sizing: border-box;height:200px;overflow: hidden;} .saftyNotice .list li{box-sizing: border-box; line-height: 1; padding: 15px 20px;} .saftyNotice .list li > a { display:block; cursor:default; } /*.saftyNotice .list li:hover > a{background: url(../images/icon_list_more.png) no-repeat right center; }*/ .saftyNotice .list li:nth-child(odd){background: #f9fafc;} .saftyNotice .list li .iconArea{width: 40px; float: left;} .saftyNotice .list li .text{font-size: 15px; color: #999; padding-left: 56px;} .saftyNotice .list li .text .t{font-weight: 500;font-size:16px;line-height:20px;} .saftyNotice .list li .text .t .state{display: inline-block; font-size: 12px; height: 18px; line-height: 18px; width: 33px; text-align: center; margin-left: 10px; vertical-align: top;border-radius: 3px;} .saftyNotice .list li .text .t .state.comp{border: 1px solid #7b66ff; color: #7b66ff;} .saftyNotice .list li .text .conts{ margin:6px 0 12px;color:#666;font-size:15px;} .saftyNotice .list li .text .date{font-size: 15px; color: #999;} /* 안전상황알림 */ .safetyState{padding: 0; } .safetyState_graph{background: #f64141; width: calc(100% - 40px); margin: 0 auto; height: 20px; border-radius: 10px; overflow: hidden; vertical-align: middle; display: inline-block;} .safetyState_graph > p { background: #15c570; top: 0; bottom: 0; left: 0; text-align: center; font-size: 12px; color: #fff; line-height: 20px; font-weight: 500 ;} /* cctv */ .cont.cctv{height: 530px;} .cont.cctv .cctvList{float: left; width: 200px;height: 480px;margin-top: 0px; background: #fff;} .cont.cctv .cctvList li{font-size: 16px; color: #666; padding: 0 20px; line-height: 2; position: relative;line-height:39px;cursor: pointer} .cont.cctv .cctvList li + li { border-top: 1px solid #ddd; } .cont.cctv .cctvList li.on{ color: #fff;background: #015794;} .cont.cctv .cctvView{float: left; width: 100%; background: #000;height: 480px;} .cont.cctv .cctvView img{display:block;width: 100%; height: 480px;} .cont.cctv .cctvView video {display:block;width: 100%; height: 480px; object-fit:none;} .cont.cctv .cctvView video::-webkit-media-controls-panel { display: none !important; opacity: 1 !important;} .cont.cctv .ptz{float: left; width: 200px;height: 480px; margin-top: 0px; background:url(../images/ptzImg.png?1) #343434 no-repeat center center;background-size:160px; font-size:13px;color:#bbb;text-align: center; position: relative;} .cont.cctv .cctvView.ptz_none { width: 100%; overflow:hidden; } .cont.cctv .cctvView.ptz_none + .ptz { display:none; } .cont.cctv .cctvView.ptz_none img{ height: 480px;} .cont.cctv .cctvView.ptz_none video {height: 480px;} .cont.cctv .ptz .zoomBtn{margin-top: 36px;} .cont.cctv .ptz .zoomBtn div{width:42px; height:42px; border-radius: 50%; display: inline-block; text-indent: -9999px; cursor:pointer} .cont.cctv .ptz .zoomBtn .zoomBtn_plus{margin-right:10px;} .cont.cctv .ptz .zoomBtn .zoomBtn_minus{margin-left:10px;} .cont.cctv .ptz .moveBtn{position: absolute; width: 100%; top:85px; bottom: 0;} .cont.cctv .ptz .moveBtn div{position: absolute; text-indent: -9999px; cursor:pointer} .cont.cctv .ptz .moveBtn .moveBtn_up{ left: 50px; top: 5px; width:40px; height: 0; border-top:40px solid transparent; border-left:30px solid transparent; border-right:30px solid transparent; border-radius:50% 50% 0 0; } .cont.cctv .ptz .moveBtn .moveBtn_right{right: 40px; top: 15px; width: 0; height: 40px; border-right:40px solid transparent; border-top:30px solid transparent; border-bottom:30px solid transparent; border-radius:0 50% 50% 0; } .cont.cctv .ptz .moveBtn .moveBtn_down{left: 50px; bottom: 28px; width:40px; height: 0; border-bottom:40px solid transparent; border-left:30px solid transparent; border-right:30px solid transparent; border-radius:0 0 50% 50% ; } .cont.cctv .ptz .moveBtn .moveBtn_left{left: 40px; top: 15px; width: 0; height: 40px; border-left:40px solid transparent; border-top:30px solid transparent; border-bottom:30px solid transparent; border-radius:50% 0 0 50%; } /* cctv 영상관제 */ .cont.mainVideo{height: 300px; overflow: hidden; position: relative;} .cont.mainVideo .selectArea{} .cont.mainVideo .selectArea select{border-radius: 0; border:0; height:40px; line-height:40px; box-sizing: border-box} .cont.mainVideo .videoArea{width: 100%; height: 495px; margin: 0 auto; display: flex; align-items: center; background: #2c2828} .cont.mainVideo .videoArea video, .cont.mainVideo .videoArea img {width: 100%; height: auto;} .cont.broadCast .movie_wrap .cctvBtn_wrap{display: flex; position: absolute; bottom: 0; padding: 15px; justify-content: space-between; width: 100%; box-sizing: border-box;} .cont.broadCast .movie_wrap .cctvBtn_wrap > div{width: calc( (100% - 10px) / 2 ); height:40px; line-height: 40px; background: #c9c9c9; text-align: center; border: 0; font-size: 14px;} .cont.broadCast .movie_wrap .cctvBtn_wrap > div span{text-indent: -9999px; width: 24px; height: 24px; margin-top: 7px; margin-left: 5px; display:inline-block; filter: brightness(0);} .cont.broadCast .movie_wrap .cctvBtn_wrap > div.on{background: #f64141; color: #fff; font-weight: 500;} .cont.broadCast .movie_wrap .cctvBtn_wrap > div.gr{background: #35c36a; color: #fff; font-weight: 500;} .cont.broadCast .movie_wrap .cctvBtn_wrap > div.gr span, .cont.broadCast .movie_wrap .cctvBtn_wrap > div.on span{filter: brightness(1);} .cont.broadCast .movie_wrap .cctvBtn_wrap > div.emergDoor span{ background: url(../images/icon_emergDoor_off.png) no-repeat center / 23px auto; } .cont.broadCast .movie_wrap .cctvBtn_wrap > div.emergDoor.on span{ background: url(../images/icon_emergDoor_on.png) no-repeat center / 23px auto } .cont.broadCast .movie_wrap .cctvBtn_wrap > div.emergCall span{background: url(../images/icon_emergCall_off.png) no-repeat center / 23px auto; } .cont.broadCast .movie_wrap .cctvBtn_wrap > div.emergCall.on span{ background: url(../images/icon_emergCall_on.png) no-repeat center / 23px auto } /* 영상방송시스템 */ .cont.broadCast{height: 536px; display: flex; justify-content: space-between;} .cont.broadCast.hoist{height: 536px; display: flex; justify-content: space-between;} .cont.broadCast .movie_wrap{ position: relative; width: calc(100% - 250px); padding: 0px; background: #2c2828 } .cont.broadCast.hoist .movie_wrap{ position: relative; width: calc(100% - 350px); padding: 0px; background: #2c2828; text-align: center; } .cont.broadCast .movie_wrap:after{display:inline-block; height:100%; content:""; vertical-align:middle;} .cont.broadCast .movie_wrap video, .cont.broadCast .movie_wrap img{ width: calc(100% - 3px); vertical-align: middle; height: auto;} .cont.broadCast .control_wrap{ width: 250px; padding: 15px;} .cont.broadCast.hoist .control_wrap{ width: 350px; padding: 15px;} .cont.broadCast .control_wrap div + div{margin-top: 5px;} .cont.broadCast .control_wrap textarea, .cont.broadCast .control_wrap select{ width: 100%; border-radius: 0;} .cont.broadCast .control_wrap textarea{height: 125px; padding: 10px; border: 1px solid #aaa; border-radius: 0 !important;} .cont.broadCast .control_wrap textarea::placeholder{ } .cont.broadCast .control_wrap select{height: 40px; line-height: 40px; vertical-align: middle;} .cont.broadCast .control_wrap div.multiSelect{height: 220px; box-sizing: border-box; padding:10px; overflow-y: auto; border: 1px solid #dcdcdc; } .cont.broadCast .control_wrap div.multiSelect label{display: block; font-size: 13px; line-height: 25px; padding:0 5px; margin-bottom: 5px;} .cont.broadCast .control_wrap div.multiSelect input[type=radio]:checked + label{background: #62aaf4; color: #fff;} .cont.broadCast .control_wrap div.castSel{display: flex; justify-content: space-between;} .cont.broadCast .control_wrap div.castSel button{width: 70px;} .cont.broadCast .control_wrap div.castSel > div, .cont.broadCast .control_wrap div.castSel > select{width: calc( 100% - 75px);} .cont.broadCast .control_wrap button{height: 40px; vertical-align: middle; border: 0; font-weight: 500; background: #62aaf4; color: #fff; } .cont.broadCast .control_wrap div.btnWrap{display: flex; justify-content: space-between;} .cont.broadCast .control_wrap div.btnWrap button{ } .cont.broadCast .control_wrap div.btnWrap button:nth-child(1){ background: #fff; color: #101010; border: 1px solid #b0b0b0; width: calc( 50% - 2.5px)} .cont.broadCast .control_wrap div.btnWrap button:nth-child(2){margin:0 2.5px; width: calc( 50% - 46.5px ) } .cont.broadCast .control_wrap div.btnWrap button:nth-child(3){text-indent: -9999px; width: 40px; background:#22445c url(../images/icon_call.png) no-repeat center; background-size: 20px auto;} /*영상방송 시스템 1 셀*/ .cont.broadCast.row1{height: 235px; display: flex; justify-content: space-between;} .cont.broadCast.row1 .control_wrap{ width: 350px; padding: 15px;} .cont.broadCast.row1 .movie_wrap{width: calc(100% - 350px); height: 235px; overflow: hidden} .cont.broadCast.row1 .movie_wrap img{width: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .cont.broadCast.row1 .control_wrap {display: flex; justify-content: space-between; flex-wrap: wrap; gap:5px;} .cont.broadCast.row1 .control_wrap > div{width: calc( 50% - 2.5px );} .cont.broadCast.row1 .control_wrap > .btnWrap{width: 100%;} .cont.broadCast.row1 .control_wrap div + div{margin-top: 0px;} .cont.broadCast.row1 .control_wrap textarea{height:50px;} .cont.broadCast2{display: flex; justify-content: space-between;} .cont.broadCast2 .multiSelect{width: calc(100% - 250px ); box-sizing: border-box; height: 235px; box-sizing: border-box; padding:10px; overflow-y: auto; } .cont.broadCast2 .multiSelect label{display: block; font-size: 13px; line-height: 25px; padding:0 5px; margin-bottom: 5px;} .cont.broadCast2 .multiSelect input[type=radio]:checked + label{background: #62aaf4; color: #fff;} .cont.broadCast2 .control_wrap{ width: 250px; padding: 10px;} .cont.broadCast2 .control_wrap div + div{margin-top: 5px;} .cont.broadCast2 .control_wrap textarea, .cont.broadCast2 .control_wrap select{ width: 100%; border-radius: 0;} .cont.broadCast2 .control_wrap textarea{height: 55px; padding: 10px; border: 1px solid #dcdcdc;} .cont.broadCast2 .control_wrap select{height: 35px; line-height: 35px; vertical-align: middle;} .cont.broadCast2 .control_wrap div.castSel{display: flex; justify-content: space-between;} .cont.broadCast2 .control_wrap div.castSel button{width: 70px;} .cont.broadCast2 .control_wrap div.castSel > div{width: calc( 100% - 75px);} .cont.broadCast2 .control_wrap button{height: 35px; vertical-align: middle; border: 0; font-weight: 500; background: #62aaf4; color: #fff; } .cont.broadCast2 .control_wrap div.btnWrap{display: flex; justify-content: space-between;} .cont.broadCast2 .control_wrap div.btnWrap button{width: calc( (100% - 46px ) / 2) } .cont.broadCast2 .control_wrap div.btnWrap button:nth-child(1){ background: #fff; color: #101010; border: 1px solid #b0b0b0;} .cont.broadCast2 .control_wrap div.btnWrap button:nth-child(2){margin:0 3px;} .cont.broadCast2 .control_wrap div.btnWrap button:nth-child(3){text-indent: -9999px; width: 40px; background:#22445c url(../images/icon_call.png) no-repeat center; background-size: 20px auto;} /* 기기 등록 현황 */ .portlet .cont.deviceRegStat{height: 536px;} .deviceRegSelect {height: 35px; padding: 10px; display: flex; align-items: flex-start;} .deviceRegSelect div{ margin:0 15px 0 5px;font-size:14px; white-space:nowrap; } .deviceRegSelect div select{width: 180px; height: 35px; line-height: 35px; font-size: 14px; vertical-align: baseline;background-color: #f8f8f8;margin-left:5px;font-weight:400;} .deviceRegSelect div select.cctvBox {width: 280px; height: 35px; line-height: 35px; font-size: 14px; vertical-align: baseline;background-color: #f8f8f8;margin-left:5px;font-weight:400;} .deviceRegSelect div input{box-sizing: border-box} .portlet .cont.deviceRegStat .deviceRegTable { height:481px; padding:0 5px; } .portlet .cont.deviceRegStat .deviceRegTable table { /*border-top:1px solid #ccc;*/ } .iconBox_wrap{display: flex; justify-content: flex-start; flex-wrap: wrap; margin-bottom: -5px;} .iconBox_wrap .iconBox { width:50%; min-width:50px; margin-bottom:5px; text-align:left; } .iconBox_wrap .iconBox2 { width:50%; min-width:50px; margin-bottom:5px; text-align:center; } .iconBox{} .iconBox2{} .iconBox img{width: 20px; height: 20px; vertical-align: top} .iconBox2 img{width: 20px; height: 20px; vertical-align: top} .portlet .cont.mainFieldStat { overflow:hidden; height:536px; } .portlet .cont.mainFieldStat #mainFieldMapWrapper { height:calc(100% - 50px); min-height:480px; } .mainFieldSelect {padding: 10px; display: flex; align-items: flex-start} .mainFieldSelect div{ margin:0 15px 0 5px; font-size:14px; white-space:nowrap; } .mainFieldSelect div select{width: 180px; height: 35px; line-height: 35px; font-size: 14px; vertical-align: baseline;background-color: #f8f8f8;margin-left:5px;font-weight:400;} /* TBM 현황 */ .portlet .cont.tbm{height: 837px;} .portlet .cont.tbm .tbmChart{height:300px; overflow: hidden;} .portlet .cont.tbm .tbmTable{border-top: 1px solid #ccc;} ul.summary { display:block;height:115px;font-size:0px; } ul.summary > li { padding:35px 0px;display:inline-block;width:calc( 100% / 6 );text-align:center; } ul.summary.sp_1 > li { width:100%; } ul.summary.sp_2 > li { width:calc( 100% / 2 ); } ul.summary.sp_3 > li { width:calc( 100% / 3 ); } ul.summary.sp_4 > li { width:calc( 100% / 4 ); } ul.summary.sp_5 > li { width:calc( 100% / 5 ); } ul.summary.sp_6 > li { width:calc( 100% / 6 ); } ul.summary > li > span { display:inline-block;line-height:20px;font-size:15px;color:#666;margin-bottom:25px;padding:5px 15px;border: 1px solid #ddd;background:#eee;border-radius:15px; } ul.summary > li > strong { display:block;line-height:30px;font-size:28px;color:#999;font-weight: 500;letter-spacing: -1px;vertical-align: baseline;} ul.summary > li > strong > b { font-weight: 600;color:#333; vertical-align: baseline;} ul.summary > li > strong.red > b { color:#e12a27; } ul.summary > li > strong.orange > b { color:#f7941c; } ul.summary > li > strong.green > b { color:#25c058; } ul.summary > li > strong.red::before { content:''; display:block; height:50px;background: url(../images/icon_waringlight_03.png) no-repeat center center / contain; margin-bottom: 25px;} ul.summary > li > strong.orange::before { content:''; display:block; height:50px;background: url(../images/icon_waringlight_02.png) no-repeat center center / contain; margin-bottom: 25px;} ul.summary > li > strong.green::before { content:''; display:block; height:50px;background: url(../images/icon_waringlight_01.png) no-repeat center center / contain; margin-bottom: 25px;} ul.summary + ul.summary { border-top: 1px solid #eee; } ul.summary_m { display:ruby-text;height:231px;font-size:0px; } ul.summary_m > li { padding:35px 0px;display:inline-block;text-align:center; } ul.summary_m.sp_1 > li { width:100%; } ul.summary_m.sp_2 > li { width:calc( 100% / 2 ); } ul.summary_m.sp_3 > li { width:calc( 100% / 3 ); } ul.summary_m.sp_4 > li { width:calc( 100% / 4 ); } ul.summary_m.sp_5 > li { width:calc( 100% / 5 ); } ul.summary_m.sp_6 > li { width:calc( 100% / 6 ); } ul.summary_m > li > span { display:inline-block;line-height:20px;font-size:14px;color:#666;margin-bottom:20px;padding:5px 10px;border: 1px solid #ddd;background:#eee;border-radius:15px; } ul.summary_m > li > strong { display:block;line-height:24px;font-size:20px;color:#999;font-weight: 500;letter-spacing: -1px;vertical-align: baseline;} ul.summary_m > li > strong > b { font-weight: 700;color:#333;font-size:23px;line-height:70px;vertical-align: baseline;display:block;margin-bottom:15px;position:relative;} ul.summary_m > li > strong > b:before {display:block;position:absolute;top:5px;left:50%;margin-left:-30px;width:60px;height:60px;border: 3px solid #eee;border-radius:50%;box-sizing:border-box;content:'';} ul.summary_m > li > strong.red > b { color:#e12a27; } ul.summary_m > li > strong.red > b:before { border-color:#e12a27; } ul.summary_m > li > strong.orange > b { color:#f7941c; } ul.summary_m > li > strong.orange > b:before { border-color:#f7941c; } ul.summary_m > li > strong.green > b { color:#25c058; } ul.summary_m > li > strong.green > b:before { border-color:#25c058; } ul.summary_m + ul.summary_m { border-top: 1px solid #eee; } .chartTitle{font-weight: 500; text-align: center; font-size:14px; height:20px; } .chartWrap {} .chartWrap.workState {width: 45%; height: 235px; float: left;position: relative;} .chartWrap.workState + .workState { box-sizing: border-box;border-left: 1px solid #eee; } .chartWrap.workState .chartTitle{position: absolute;top:15px;left:20px;font-size:16px;font-weight:400;z-index:10;line-height: 20px;color:#666;} .chartWrap.burn {width: 25%; float: left; height: 235px;position: relative;} .chartWrap.burn .chartTitle{position: absolute;top:35px;left:0px;right:0px;font-size:16px;font-weight:400;z-index:10;line-height: 20px;color:#666;} .chartWrap.burn .chartValue { position: absolute;top:63px;left:0px;right:0px;text-align:center;display:block;line-height:30px; font-size:20px;color:#999;font-weight: 500;letter-spacing: -1px;z-index:10;} .chartWrap.burn .chartValue > b { font-weight: 600;color:#333;font-size:24px;vertical-align: baseline;} .chartWrap.burn .chartValue.red > b { color:#e12a27; } .chartWrap.burn .chartValue.orange > b { color:#f7941c; } .chartWrap.burn .chartValue.green > b { color:#25c058; } .chartWrap.burn .toastui-chart-wrapper { display:block;width:100% !important; } .chartWrap.burn .toastui-chart-wrapper > canvas { width:100% !important; } .chartWrap.tbm {width: 50%; float: left;} .chartWrap.tbm canvas { display:block;margin:0 auto; } .chartWrap.tbm .chartTitle{margin-top: 20px;color:#666;font-size:14px;font-weight:400;} .chartWrap.workerState {width: 50%; float: right;height: 235px;position: relative;} .chartWrap.workerState .chartTitle{position: absolute;top:15px;left:20px;font-size:16px;font-weight:400;z-index:10;line-height: 20px;color:#666;} #workerState_chart{height:235px; overflow: hidden; position: relative;} #workerState_chart .toastui-chart-wrapper{position: absolute; top: 20px;} .workerNum_wrap{width: 50%; float: left; padding: 25px 0; box-sizing: border-box;border-right: 1px solid #eee;} .workerNum_wrap_r{width: 55%; float: left; padding: 25px 20px 25px 0; box-sizing: border-box;border-left: 1px solid #eee;background:#f9fafc;} .workerNum{display: inline-block; box-sizing: border-box;padding:10px 0px; line-height: 1; ; width: calc(100% - 170px); float: left;height:185px;} .workerNum .t{ font-size:16px; font-weight: 400; padding: 0 0px; text-align: center;color:#666;line-height:20px;} .workerNum .tn{ font-size: 80px; font-weight: 600; margin-right: 10px; text-align: center; margin-top: 20px; margin: 0px 0 ;color:#015794;letter-spacing:-1; margin-top:8px} .workingNum{display: inline-block; box-sizing: border-box;padding:10px 0px; line-height: 1; ; width: calc(100% - 160px); float: left;height:185px;} .workingNum .t{ font-size:14px; font-weight: 400; padding: 0 0px; text-align: center;color:#666;line-height:20px;} .workingNum .tn{ font-size: 80px; font-weight: 600; margin-right: 10px; text-align: center; margin-top: 20px; margin: 0px 0 ;color:#015794;letter-spacing:-1; margin-top:8px} .working_bd{ display:block;height:185px; border-left: 0px dotted #eee;box-sizing: border-box;} .working_bd li{font-size: 16px; color: #666; padding: 0 40px; position: relative; line-height:30px;} .working_bd li + li { } .working_bd li strong{float: right;font-size:16px;font-weight:600;color:#333;} .working_bd li.tot { border-top: 1px solid #eee;color:#015794; } .working_bd li.tot > strong { color:#015794;font-size:18px; } .workerNum .n {text-align: center;margin-top:15px; } .workerNum .n div{font-size:18px; color: #666; display: inline-block; margin: 0 10px;} .workerNum .n div strong{ font-weight:600;color:#333; } .workerNum .total {text-align: center;margin-top:10px;color:#999;font-size:16px; } .companyworker{ width: 170px;height:185px; float: right;border-left: 2px dotted #eee;box-sizing: border-box;} .companyworker li{font-size: 15px; color: #666; padding: 0 20px; line-height: 2; position: relative; padding-left: 22px;padding-right:25px;line-height:30px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} .companyworker li::before{content: ""; position: absolute; background: #000; width: 2px; height: 2px; top: 14px; left: 15px;} .companyworker li strong{position:absolute;display:block;line-height:30px;top:0px;right:0px;font-size:16px;font-weight:600;color:#333;text-align:right;} .portlet_table.type2 tbody th{background: #f4f8fb;} .portlet_table.type2 tbody th, .portlet_table.type2 tbody td{line-height: 58px; } #workState_chart01, #workState_chart02{height:235px; overflow: hidden; position: relative;} #workState_chart01 .toastui-chart-wrapper, #workState_chart02 .toastui-chart-wrapper{position: absolute; top:20px;bottom: 0px;} #burnChart01, #burnChart02, #burnChart03, #burnChart04{height:205px; margin-top:0px;overflow: hidden; position: relative;} #burnChart01 .toastui-chart-wrapper, #burnChart02 .toastui-chart-wrapper, #burnChart03 .toastui-chart-wrapper, #burnChart04 .toastui-chart-wrapper{position: absolute; bottom:0px;height:205px;} #tbmChart01, #tbmChart02{position: relative;} #tbmChart01 .toastui-chart-wrapper, #tbmChart02 .toastui-chart-wrapper{position: absolute; bottom: 30px;} .twoHeaderTable .portlet_table { border-top:2px solid #00a2e1; } .twoHeaderTable .portlet_table thead th { border:1px solid #ddd; vertical-align:middle; } .twoHeaderTable .portlet_table tbody td { padding:10px; cursor:pointer; } /* 사업단 출역 및 관리자 현황 */ .portlet .cont.outputArea{height: 536px} .outputArea_wrap{display: flex; justify-content: space-between; overflow: hidden} .outputArea_wrap > div{ width: calc( 100% / 5); height: 200px; padding: 25px 15px 0px; box-sizing: border-box; text-align: left; display: flex; flex-direction: column; justify-content: space-between; } .outputArea_wrap > div:nth-child(even){background: #f9fafc;} .outputArea_wrap > div .t{font-size: 16px; font-weight: 500; color: #777; height: 64px; line-height: 1; padding-right: 40px;} .outputArea_wrap > div .t span{font-size: 12px; color: #666; display: block; margin-top: 5px;} .outputArea_wrap > div .num { text-align:right; font-size:30px; font-weight:700; color:#333; margin:35px 0 0; } .outputArea_wrap > div .num span{font-size: 15px; color: #333; vertical-align: baseline; margin-left: 5px; font-weight: 400; } .outputArea_wrap > div .num2 { text-align:right; font-size:23px; font-weight:700; color:#333; } .outputArea_wrap > div .num2 span{font-size: 15px; color: #333; vertical-align: baseline; margin-left: 5px; font-weight: 400; } .outputArea_wrap > div:nth-of-type(1) .t{background: url(../images/icon_entryStat_01.png) no-repeat right top; } .outputArea_wrap > div:nth-of-type(2) .t{background: url(../images/icon_entryStat_02.png) no-repeat right top; } .outputArea_wrap > div:nth-of-type(3) .t{background: url(../images/icon_entryStat_03.png) no-repeat right top; } .outputArea_wrap > div:nth-of-type(4) .t{background: url(../images/icon_entryStat_04.png) no-repeat right top; } .outputArea_wrap > div:nth-of-type(5) .t{background: url(../images/icon_entryStat_05.png) no-repeat right top; } .outputAreaTable_wrap { padding:0 5px; /*border-top:1px solid #ddd;*/ height:334px; } .outputAreaTable .portlet_table{border-top:2px solid #00a2e1;} .outputAreaTable .portlet_table thead th{border: 1px solid #ddd; vertical-align: middle} .outputAreaTable .portlet_table thead tr > th:first-child{border-left: 0;} .outputAreaTable .portlet_table thead tr > th:last-child{border-right: 0;} .outputAreaTable .portlet_table tbody td{padding: 10px; cursor: pointer} .outputAreaTable .portlet_table tbody tr > td:nth-child(2){color: #f9b93e; } .outputAreaTable .portlet_table tbody tr > td:nth-child(5){color: #6d71f8; } .outputAreaTable .portlet_table tbody tr.none-fmt > td { color:inherit; } .outputAreaTable .portlet_table tbody tr > td.color_blue{color: #11b7d4; } .outputAreaTable .portlet_table tbody tr > td.color_red{color: #f65050; } .outputAreaTable .portlet_table tbody tr > td.color_yellow{color: #f7a308; } .outputAreaTable .portlet_table tbody tr > td.color_purple{color: #6d71f8; } /* 안전보건 예산 운영현황 */ .cont.safeBudget{ height:536px; } .cont.safeBudget .portlet_table tbody td{padding: 10px; } .cont.safeBudget .portlet_table tbody tr > td:nth-child(6){padding: 0 20px; } .cont.safeBudget .portlet_table tbody tr > td.c_blue{color: #00a9ff; } .cont.safeBudget .portlet_table tbody tr > td.c_red{color: #ff5a46;} .cont.safeBudget .portlet_table tbody td .graphDiv2_wrap{display: flex; justify-content: space-between;} .cont.safeBudget .portlet_table tbody td .graphT{ line-height: 16px; font-size: 12px; width: 65px; border: 1px solid #ddd; border-right: 0;} .cont.safeBudget .portlet_table tbody td .graphDiv2{width: calc( 100% - 55px); height: 8px; padding: 3px 0; background: #d1d1d1; color: #fff; text-align: center; position: relative; width: 200px;} .cont.safeBudget .portlet_table tbody td .graphDiv2 div{background: #00bd1b; position: absolute; left: 0; top: 0; bottom: 0; } .cont.safeBudget .portlet_table tbody td .graphDiv2 div.bg_red{ background: #ff5a46} .cont.safeBudget .portlet_table tbody td .graphDiv2 div.bg_blue{ background: #00a9ff} .cont.safeBudget .portlet_table tbody td .graphDiv2_wrap.bgnone{background: ; margin-top: 3px;} .cont.safeBudget .portlet_table tbody td .graphDiv2{height: 12px; padding: 3px 0; background: #d1d1d1; color: #fff; text-align: center; position: relative} .cont.safeBudget .portlet_table tbody td .graphDiv2 .process{background: #9d9d9d;} #mainSafeBudget .title h2 .legend{float: right; font-size: 14px; display: flex; justify-content: flex-start} #mainSafeBudget .title h2 .legend div{margin-left: 8px; color: #999; } #mainSafeBudget .title h2 .legend div span{display: inline-block; width: 8px; height: 8px; vertical-align: baseline; margin-right: 3px;} #mainSafeBudget .title h2 .legend div span.b{background: #2a82c1} #mainSafeBudget .title h2 .legend div span.r{background: #ec5051} /* 중대재해 처벌법 준수 */ .cont.disaster .chartBox{height: 235px; overflow: hidden} .cont.disaster .chartBox canvas{margin:10px 0 0 10px;} /* 재해현황 */ .cont.disasterStatus{display: flex; justify-content: space-between; padding: 10px 0;} .cont.disasterStatus .chart_wrap{width: calc(100% / 3); overflow: hidden; position: relative; height: 210px; } .cont.disasterStatus .chart_wrap .chartTitle{ position: absolute; width: 100%; top: 100px; z-index: 10; } .cont.disasterStatus .chart_wrap .chartTitle span{position: absolute; color: #777; display: block; z-index: 5; width: 100%;} .cont.disasterStatus .chart_wrap .chartTitle span.t{ top: 20px; } .cont.disasterStatus .chart_wrap .chartTitle span.t strong{color: #333; font-weight: 500} .cont.disasterStatus .chart_wrap .chartTitle span.b{color: #777} .cont.disasterStatus .chart_wrap .chartTitle span.b strong{color: #96f; font-weight: 500} .cont.disasterStatus .chart_wrap .chartTitle span.l{top: -100px; font-size: 18px; color: #777; font-weight: 500} .cont.disasterStatus .chart_wrap .chartTitle span.l strong{font-size: 18px; color: #777; font-weight: 500} /* 위험성평가 */ .cont.riskAssessment{height: 536px; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 10px; overflow: hidden} .cont.riskAssessment .chartBox_wrap{width: calc( 50% - 3px); height: 50%; overflow: hidden; position: relative } .cont.riskAssessment .chartBox_wrap .chartTitle{text-align: left; font-size: 16px; position: relative; z-index: 5; height: 40px; line-height: 40px; } .cont.riskAssessment .chartBox_wrap .chartTitle span{margin: 3px 10px; color: #777; } .cont.riskAssessment .chartBox_wrap .chartTitle span strong{color: #333; font-weight: 500} .cont.riskAssessment .chartBox_wrap .chartBox{position: absolute; top: 25px;} .cont.riskAssessment .chartBox_wrap:nth-of-type(3), .cont.riskAssessment .chartBox_wrap:nth-of-type(4){margin-top: 10px;} /* 상단 현장정보 */ .mainFieldInfo{display: flex; justify-content: space-between; width: calc(100% - 30px); margin: 0 auto; background: #fff; margin-top: 20px; padding:0 15px; border-radius:12px; box-shadow: 0px 0px 10px rgb(0 0 0 / 10%); box-sizing: border-box; align-items: center;} .mainFieldInfo .mainFieldInfo_name{font-size: 20px; font-weight: 500; padding: 15px 0;} .mainFieldInfo .mainFieldInfo_link{} .mainFieldInfo .mainFieldInfo_link a{font-size: 14px; font-weight: 500; display: inline-block; background: #2a82c1; color: #fff; padding: 5px 20px; border-radius: 20px;} .mainFieldInfo .mainFieldInfo_admin_link{} .mainFieldInfo .mainFieldInfo_admin_link a{font-size: 14px; font-weight: 500; display: inline-block; background: #2a82c1; color: #fff; padding: 5px 20px; border-radius: 20px;} /**************** 본사대시 보드 Start **************************************/ .dashboard.comp-dashbrd { .portlet .cont { height: 536px; } .portlet .cont.disaster, .portlet .cont.disasterStatus{ height:235px; } } /**************** 본사대시 보드 End **************************************/ /* 로그인 2022-05-19*/ @font-face { font-family: 'Pretendard'; font-weight: 800; font-display: swap; src: local('Pretendard ExtraBold'), url('webfonts/Pretendard/Pretendard-ExtraBold.woff2') format('woff2'), url('font/Pretendard/Pretendard-ExtraBold.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 700; font-display: swap; src: local('Pretendard Bold'), url('webfonts/Pretendard/Pretendard-Bold.woff2') format('woff2'), url('font/Pretendard/Pretendard-Bold.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 600; font-display: swap; src: local('Pretendard SemiBold'), url('webfonts/Pretendard/Pretendard-SemiBold.woff2') format('woff2'), url('font/Pretendard/Pretendard-SemiBold.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 500; font-display: swap; src: local('Pretendard Medium'), url('webfonts/Pretendard/Pretendard-Medium.woff2') format('woff2'), url('font/Pretendard/Pretendard-Medium.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 400; font-display: swap; src: local('Pretendard Regular'), url('webfonts/Pretendard/Pretendard-Regular.woff2') format('woff2'), url('font/Pretendard/Pretendard-Regular.woff') format('woff'); } body.login{background: #e0e5f6; min-width: 1920px; font-family: "Pretendard"} .login_wrap{position: relative; padding: 45px; width: 100%; height: 100vh; min-height: 900px; box-sizing: border-box;} .login_wrap > .logoWrap{width: 115px; height:30px; position: absolute; top: 100px; left: 100px; z-index: 1;} .login_wrap > .logoWrap > img{width: 100%;} .videoWrap2{position: absolute; height: 800px; top: 50%; left: -7%; transform: translateY(-50%); outline: 5px solid #e0e5f6; outline-offset: -4px;} .videoWrap2 > video{object-fit: contain; width: 100%; height: 100%; z-index: -1;} .login_right{position: absolute; top: 0; bottom: 0; width: 540px; margin: 45px 0; background: #fff; right: 45px; border-radius: 40px; padding: 70px; box-sizing: border-box;} .loginTxt, .loginInput_bottom, button{padding: 0 6px;} .loginTxt{margin: 70px auto;} .loginTxt span{display: block; text-transform: uppercase;} .loginTxt span:first-child{font-size: 16px; color: #7d8494; letter-spacing: 6px; margin-bottom: 30px;} .loginTxt span:last-child{font-size: 43px; color: #3a3a41; font-weight: 800; line-height: 1.1} .loginInput{margin-bottom: 53px;} .loginInput > input{width: 100%; display: block; margin-bottom: 40px; font-size: 15px;} .loginInput > input:last-child{margin-bottom: 30px;} .loginInput .loginInput_bottom{display: flex; align-items: center; justify-content: space-between;} .loginInput .loginInput_bottom label{font-size: 16px; font-weight: 500;} .loginInput .loginInput_bottom a{color: #404498; font-size: 16px; font-weight: 500;} .loginForm button{font-family:"Pretendard"; border: none; text-align: center; width:100%; height: 60px; line-height: 60px; border-radius: 16px; background: linear-gradient(to right, #8484e1, #2f2f93); color: #fff; text-transform: uppercase; font-size: 20px; font-weight: 700;} .login_right > span{position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); color: #7d8494; font-size: 15px; font-weight: 500;} .login_right > span > a{text-decoration: underline; color: #7d8494; font-size: 15px; font-weight: 500;} .login input{appearance: none;} .login input[type=checkbox]{position:relative; margin-right:3px; width:20px; height: 20px; background: url(../images/icon_chkoff.png) no-repeat center center / contain;} .login input[type=checkbox]::before, .login input[type=checkbox]::after{ background: var(--spriteImg); } .login input[type=checkbox]:before{display:block; content:''; position:absolute; width:20px; height:20px; z-index:2; cursor:pointer; background-position: 0 85px;} .login input[type=checkbox]:checked:after{display:block; content:''; position:absolute; width:20px; height:20px; z-index:2; background-position: 0 120px; background: url(../images/icon_chkon.png) no-repeat center center / contain;} .login input[type=checkbox] + label{margin-right: 15px; color: #acb3c2;} .login input[type=checkbox]:checked + label{color: #404498;} .login input[type=text], .login input[type=password]{border:unset; border-radius:unset; color: unset; height: unset; line-height: unset; font-weight:unset; border-bottom: 1px solid #dedede; padding: 0 6px 16px;} .loginImg{display: none;} .portlet.ui-draggable-dragging, .portlet.is-positioning-post-drag { background: #62aaf4; z-index: 2; } .portlet.ui-draggable-dragging .title h2, .portlet.is-positioning-post-drag .title h2 {color: #fff ;} .portlet.ui-draggable-dragging .title h2 > span, .portlet.is-positioning-post-drag .title h2 > span {color: #fff ;} .portlet.ui-draggable-dragging .title span a, .portlet.is-positioning-post-drag .title span a { filter: brightness(10); } .packery-drop-placeholder { border-radius: 15px; margin-left:15px; overflow: hidden; background: #e0edf7; border: 2px dotted rgba(0,0,0,0.05); box-sizing: border-box; /*outline: 2px dashed hsla(0, 0%, 0%, 0.5);*/ outline-offset: -10px; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; } /* 로그인 2022-05-19 이전*/ /* body.login video{ height: calc(100% - 3.9px); width: 100%; object-fit: fill; // use "cover" to avoid distortion position: absolute;} .memberLogin_wrap{} .memberLogin_wrap .form_wrap{position:fixed; width: 580px; left:20%; top:50%; transform: translate(-50%, -50%);} .memberLogin_wrap .form .login_title{text-align: center; margin-bottom:40px; } .memberLogin_wrap .form .login_title img{} .memberLogin_wrap .form{width: 580px; padding: 80px; box-sizing: border-box; background: rgba(39, 40, 67, 0.7); box-shadow:0 0 10px rgba(0,0,0,0.15)} .memberLogin_wrap .form .login_box{display: ;} .memberLogin_wrap .form .login_box .login_box_input{} .memberLogin_wrap .form .login_box .login_box_input:first-child{margin-bottom:50px; background: url(../images/icon_loginID.png) no-repeat right center;} .memberLogin_wrap .form .login_box .login_box_input:nth-child(2){background: url(../images/icon_loginPW.png) no-repeat right center;} .memberLogin_wrap .form .login_box .login_box_input label{color: #9697a3; font-size: 13px; line-height: 1; display: block;} .memberLogin_wrap .form .login_box .login_box_input input[type="text"], .memberLogin_wrap .form .login_box .login_box_input input[type="password"]{width: 100%; height: 50px; line-height: 50px; padding:0; font-size: 16px !important; box-sizing: border-box; border-bottom: 1px solid #fff; border-radius: 0; border-right: 0; border-left: 0; border-top: 0; color: #fff;} .memberLogin_wrap .form .login_box .login_box_input input:-webkit-autofill, .memberLogin_wrap .form .login_box .login_box_input input:-webkit-autofill:hover, .memberLogin_wrap .form .login_box .login_box_input input:-webkit-autofill:focus, .memberLogin_wrap .form .login_box .login_box_input input:-webkit-autofill:active { -webkit-text-fill-color: #fff !important; transition: background-color 5000s; font-size: 16px !important; } .memberLogin_wrap .form .login_box .login_box_input input:-webkit-autofill::first-line { font-size: 16px !important; font-family: "Noto Sans KR","Malgun Gothic","맑은 고딕" ,helvetica, 'Dotum', "Apple SD Gothic Neo", sans-serif; font-weight: 500 !important; } .memberLogin_wrap .form .login_box .login_box_input input:-internal-autofill-previewed, .memberLogin_wrap .form .login_box .login_box_input input:-internal-autofill-previewed:hover, .memberLogin_wrap .form .login_box .login_box_input input:-internal-autofill-previewed:focus, .memberLogin_wrap .form .login_box .login_box_input input:-internal-autofill-previewed:active { font-size: 16px !important; } .memberLogin_wrap .form .login_box .login_box_input input::placeholder{color: #fff;} .memberLogin_wrap .form .loginbtn_wrap{text-align: center; margin-top: 50px;} .memberLogin_wrap .form .loginbtn_wrap button[type="submit"]{width: 280px; background: #015794; height: 56px; text-align: center; border: 0; font-size: 19px; font-weight: 500; color: #fff; border-radius: 28px;} .memberLogin_wrap .form .bottombtn{ margin-top: 50px; text-align: center; box-sizing: border-box;} .memberLogin_wrap .form .bottombtn a{font-size: 16px; color: #fff; font-weight: 500; border-bottom: 1px solid #9f9ca4; padding-bottom: 5px;} .memberLogin_wrap .form_wrap .bottomtxt{font-size: 11px; color: #fff; text-align: center; margin-top: 20px; letter-spacing: 7px;} */ /* 현재페이지 */ .breadCrumb{overflow: hidden; margin-bottom:10px;} .breadCrumb li{float: left; font-size: 14px; margin-right: 10px;} .breadCrumb li.page{font-weight: 500;} .breadCrumb li::after{content: " > "; padding-left: 5px} .breadCrumb li:last-child::after{display: none;} /* 검색영역 */ .contents > .hgroup { display:block;position: relative;font-size:0px;margin-bottom:10px;} .contents_ii > .hgroup { display:block;position: relative;font-size:0px;margin-bottom:10px;} .contents > .hgroup > h2 { display:inline-block;font-size:22px;line-height:32px; color:#111;font-weight:500;vertical-align:bottom;} .contents > .hgroup > .grid_total_area { display:inline-block;line-height:32px;height:32px; color:#999;font-weight:400;font-size:0px;vertical-align:bottom; margin-left:10px;} .contents > .hgroup > .grid_total_area > span.total { display:inline-block;line-height:32px; color:#999;font-weight:400;font-size:14px; } .contents > .hgroup > .grid_total_area > span.total > strong { font-weight:600;font-size:15px; } .contents > .hgroup > p { display:inline-block;font-size:0px;line-height:40px;color:#999;float:right; } .contents > .hgroup > p > span { display:inline-block;font-size:13px;line-height:40px;vertical-align: middle;} .contents > .hgroup > p > span + span::before { content: ">";display:inline-block;width:30px;text-align: center;} .contents > .hgroup > .btns { position: absolute;top:0px;right:0px;} .contents_ii > .hgroup > .btns { position: absolute;top:0px;right:0px;} .contents > .hgroup > .btns > span { display:inline-block;height: 30px; line-height: 30px; font-size:14px;margin-right:10px; } .contents > .hgroup > .btns > a { display:inline-block;height: 30px; line-height: 30px; padding: 0 12px; font-size: 14px;border-radius: 4px; border:1px solid rgba(0,0,0,0.1);vertical-align: middle;} .contents_ii > .hgroup > .btns > a { display:inline-block;height: 30px; line-height: 30px; padding: 0 12px; font-size: 14px;border-radius: 4px; border:1px solid rgba(0,0,0,0.1);vertical-align: middle;} .contents > .hgroup > .btns > a + a { margin-left:4px; } .contents > .hgroup > .btns > a.blue_bg { background:#015794;color:#fff;} .contents > .hgroup > .btns > a.red_bg { background:#ec5051;color:#fff;} .contents > .hgroup > .btns > a.green_bg { background:#197b30;color:#fff;} .contents_ii > .hgroup > .btns > a.green_bg { background:#197b30;color:#fff;} .contents > .hgroup > .btns > a.orange_bg { background:#ef8903;color:#fff;} .contents > .hgroup > .btns > a.black_bg { background:#535353;color:#fff;} .contents > .hgroup > .btns > a.gray_bg { background:#999;color:#fff;} .contents table { font-size:14px; } .contents table td { font-size:14px; } .contents table td > div { font-size:14px; } .contents .search_wrapper { display:block;background: #e0edf7;padding:7px 20px;font-size:0px;margin-bottom:0px;box-sizing: border-box;} .contents .search_wrapper > div { display: inline-block;vertical-align: bottom;position: relative;padding:1px 0px;font-size:0px; position:relative} .contents .search_wrapper > div + div { margin-left:41px; } .contents .search_wrapper > div + div::before { width:1px;height:16px;position: absolute;top:8px;left:-21px;background: rgba(0,0,0,0.15);content: '';display:block;} .contents .search_wrapper > div > strong {display:inline-block;padding:0px 10px 0px 0px; line-height:30px;font-size:14px;font-weight:400;color:#777;vertical-align: bottom;text-align:right;} .contents .search_wrapper > div > strong.hide { display:none; } .contents .search_wrapper > div > strong.fixed { min-width:65px; } .contents .search_wrapper > div > span { display:inline-block; line-height:30px;font-size:13px;vertical-align: bottom;position:relative;} .contents .search_wrapper > div > span > select { width:auto;line-height:28px;height:30px;padding-right:28px;border:1px solid #aaa;border-radius: 4px;display: inline-block;vertical-align: bottom;font-size:14px;} .contents .search_wrapper > div > span > label { display:inline-block;width:auto;line-height:30px;height:30px;vertical-align: bottom;font-size:14px;} .contents .search_wrapper > div > span > label + label { margin-left:10px; } .contents .search_wrapper > div > span > label > input { width:18px;height:18px;margin-right:5px;background: #fff;border:1px solid #bbb;} .contents .search_wrapper > div > span input[type=date], .contents .search_wrapper > div > span input[type=time], .contents .search_wrapper > div > span input[type=number], .contents .search_wrapper > div > span input[type=text] { width:140px;line-height:30px;height:30px;background: #fff;border:1px solid #aaa;border-radius: 4px;display: inline-block;padding: 0 10px;vertical-align: bottom;font-size:14px;} .contents .search_wrapper > div > span input[type=text]::placeholder { color:#999; } .contents .search_wrapper > div > span.text > input[type=date], .contents .search_wrapper > div > span.text > input[type=time], .contents .search_wrapper > div > span.text > input[type=number], .contents .search_wrapper > div > span.text > input[type=text] { width:180px; } .contents .search_wrapper > div > span.text > .input_btn_search {background:url("../img/input_btn_search.png") no-repeat 0 0; width:13px; height:13px; position:absolute; right:7px; top:9px; text-indent:-9999px; overflow:hidden;} .contents .search_wrapper > div > span.term > span { display:inline-block;vertical-align: bottom;position: relative;} .contents .search_wrapper > div > span.term > span input[type=date], .contents .search_wrapper > div > span.term > span input[type=time], .contents .search_wrapper > div > span.term > span input[type=number], .contents .search_wrapper > div > span.term > span input[type=text] { width:120px;min-width:auto;} .contents .search_wrapper > div > span.term > span::after {position: absolute;background: #888;width:14px;height:12px;content: '';display:block;top:10px;right:10px;background:url(../images/tuiicon.png) no-repeat;background-repeat: no-repeat;background-position: -16px 0px;} .contents .search_wrapper > div > span.term > span.noafter::after{display:none;} .contents .search_wrapper > div > span.term > span.select input[type=date], .contents .search_wrapper > div > span.term > span.select input[type=time], .contents .search_wrapper > div > span.term > span.select input[type=number], .contents .search_wrapper > div > span.term > span.select input[type=text]{width:100px;} .contents .search_wrapper > div > span.term > span.select::after {position: absolute;background: #888;width:14px;height:12px;content: '';display:block;top:10px;right:10px;background:url(../images/tuiicon.png) no-repeat;background-repeat: no-repeat;background-position: 0px -30px;} .contents .search_wrapper > div > span.term > b { display:inline-block;width:20px;text-align: center;font-size:16px;font-weight: 400;} .contents .search_wrapper > div > span.em > em { position:absolute;display:block;top:0px;right:10px;color:#999;font-size:12px;font-style:normal;line-height:30px;height:30px; } .contents .search_wrapper > div > button { display:inline-block;height: 30px; padding: 0 12px;background: #015794;color:#fff;font-size: 14px;border-radius: 4px; border:1px solid rgba(0,0,0,0.1);vertical-align: bottom;margin:0px 0px;margin-left:5px;} .contents .search_wrapper > span.unit { display:inline-block;line-height:32px;float:right;font-size:14px; } /* 게시판 상단 영역 */ .board_top{width:100%; height:40px; margin-bottom: 15px; clear:both;} .board_top:after{display:block; content:""; clear:both;} .board_btn_L{float:left; } .board_btn_R{float:right;font-size:0px;} .board_btn_text{line-height:40px; font-size:13px; display:inline-block;} .board_btn_L a { display:inline-block;height: 38px; line-height: 38px; padding: 0 20px; font-size: 14px;border-radius: 5px;border:1px solid rgba(0,0,0,0.1);vertical-align: middle;} .board_btn_R a { display:inline-block;height: 38px; line-height: 38px; padding: 0 20px; font-size: 14px;border-radius: 5px; border:1px solid rgba(0,0,0,0.1);vertical-align: middle;} .board_btn_R a + a { margin-left:4px; } .board_btn_R a.blue_bg { background:#015794;color:#fff;} .board_btn_R a.red_bg { background:#ec5051;color:#fff;} .board_btn_R a.green_bg { background:#197b30;color:#fff;} .board_btn_R a.orange_bg { background:#ef8903;color:#fff;} .board_btn_R a.black_bg { background:#535353;color:#fff;} .board_btn_R a.gray_bg { background:#999;color:#fff;} .board_total{font-size:13px; line-height: 40px;color:#888;} .board_total strong{color:#111;font-weight:600;font-size:13px;} .board_total select{margin-left:5px;} /* 버튼 */ .btn_black{display:inline-block; height:27px; background:#535353; padding:0 10px; line-height:27px; color:#fff !important; vertical-align:middle; cursor:pointer; font-size:13px; border:1px solid rgba(0,0,0,0.1);border-radius: 4px;} .btn_white{display:inline-block; height:27px; background:#fff; padding:0 10px; line-height:27px; color:#999 !important; vertical-align:middle; cursor:pointer; font-size:13px; border:1px solid rgba(0,0,0,0.1);border-radius: 4px;} /* 레이어팝업 */ .layer_popup{display:none; overflow:hidden; border:1px solid #015794; position:fixed; z-index:9999; top:50%; left:50%; transform: translate(-50%, -50%); background:#f4f8fb; box-shadow: rgba(0,0,0,0.10);} .layer_popupBg{display: none; background: rgba(0,0,0,0.40); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999;} .layer_popup_header{width:100%; height:54px; background:#015794; color:#fff; text-indent:20px; line-height:54px; font-weight: 500; position:Relative; font-size: 18px;} .layer_popup_header a{width:32px; height:32px; background:url(../img/btn_popup_close.png) no-repeat center; position:absolute; right:10px; top:10px; cursor:pointer; text-indent:-9999px; border:0;} .layer_popup_cont{padding: 20px; background: #fff;} .layerpopup_bottom{width:100%; margin:15px 0; padding:0 20px ; text-align: center;} .layerpopup_bottom .btn_black{font-size:14px; padding:0 30px; height:40px; line-height:40px; } .portletSet{overflow: hidden;} .portletSet li{float: left; width: calc( (100% - 60px) / 2 ); line-height: 44px; margin-right:60px;font-size:14px; } .portletSet li .switch{float:right; margin-top: 7px;} .portletSet li:nth-child(even){margin-right: 0;} /* 체크박스 슬라이드 */ .switch {position: relative; display: inline-block; width:50px; height: 30px; vertical-align: middle; margin-left: 10px;} .switch input {opacity:1; width:0px; height:0px;display:none; } .slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: all .4s; -webkit-transition: all .4s; } .slider:before {position: absolute; content: ""; height: 22px; width: 22px; left:4px; bottom: 4px; background-color: white; transition: all .4s; -webkit-transition: all .4s;} input[type="checkbox"]:checked + .slider { background-color: #015794;} input[type="checkbox"]:focus + .slider {box-shadow: 0 0 0px #015794;} input[type="checkbox"]:checked + .slider:before {-webkit-transform: translateX(24px); -ms-transform: translateX(22px); transform: translateX(20px); transition: all .4s; -webkit-transition: all .4s;} .slider.round { border-radius: 34px; } .slider.round:before {border-radius: 50%;} #nav .mCSB_container{overflow: unset; left: 0 !important; width: 100% !important;} #nav .mCustomScrollBox{overflow: unset;} .mCSB_scrollTools_horizontal{display: none !important;} /*@media all and (min-width:1281px) and (max-width:1599.99px) {*/ /* .topInfo_wrap .topInfo_sch .time{display:none;}*/ /* .grid{margin-left: 0;}*/ /* .portlet {float: none; width: calc(100% - 30px); margin-left: 0 }*/ /* .topInfo_wrap .topInfo_sch div select{width:150px;}*/ /* .topInfo_wrap .topInfo_sch div:nth-of-type(3) select{width: 250px;}*/ /*}*/ body.fixed{overflow: hidden;} @media all and (max-width: 1919px) { body.login{min-width: unset;} } @media all and (max-width: 1440px){ .videoWrap2{height: 530px;} } @media all and (max-width: 1024px){ .wrap{min-width: unset;} .loginTxt{margin: 0 auto 35px;} .videoWrap2{display: none;} .login_right{background: #e0e5f6; position: absolute; top: 0; bottom: 0; width: unset; margin: 30px; right: 0; left: 0; border-radius: 40px; padding: 0; box-sizing: border-box;} .login_wrap > .logoWrap{display: none;} .loginImg{display: block; text-align: center; margin-bottom: 35px;} } @media all and (max-width: 768px){ .login.wrap{height: unset !important;} .login_right{margin: 0; border-radius: 0; padding: 40px;} .login_wrap > .logoWrap{left: 40px; top: 40px; width: 80px;} .loginTxt{margin: 20px auto 40px;} .loginTxt span:last-child{font-size: 40px; margin-bottom: 10px;} .loginTxt span:first-child{font-size: 14px} .loginImg img{width: 100%;} .cont.broadCast{display: block !important;} .cont.broadCast .control_wrap {display: flex;justify-content: space-between;flex-wrap: wrap;gap:5px;} .cont.broadCast .control_wrap > div{width: calc( 50% - 2.5px ); margin-top: 0px !important;} .cont.broadCast .control_wrap > .btnWrap{width: 100%;} .cont.broadCast .control_wrap{width: 100% !important; height: 240px; box-sizing: border-box} .cont.broadCast .control_wrap textarea{height: 50px} .cont.broadCast .movie_wrap img{ width: calc(100% - 3px); height: auto; position: unset; top: unset; left: unset; transform:unset; } .cont.broadCast .movie_wrap{width: 100% !important; height: 380px !important; overflow: hidden;} .cont.broadCast.hoist .movie_wrap{padding-bottom: 70px} .cont.mainVideo .videoArea{height: auto !important;} .cont.mainVideo .videoArea video, .cont.mainVideo .videoArea img{height: auto !important;} .popup_contents .worker_info_wrap .table_area > table > tbody > tr > th, .popup_contents .worker_info_wrap .table_area > table > tbody > tr > td{height: auto} .popup_contents .worker_info_wrap .table_area > table > tbody > tr > td .input_area{width: 100% !important;} .popup_contents .worker_info_wrap .table_area > table > tbody > tr > td .select_area{width: 100% !important;} #photo_area > #preview{ width: 100% !important; height: auto !important;} .cctvSize_Control .cctvSizeS, .cctvSize_Control .cctvSizeM, .cctvSize_Control .cctvSizeF{display: none;} } @media all and (max-width: 425px){ .login_wrap {min-height: 800px;} .loginTxt span:last-child{font-size: 25px;} .loginInput > input{margin-bottom: 30px;} .loginInput {margin-bottom: 40px;} } @media all and (max-width: 320px){ body{overflow: scroll;} .wrap{min-width: 320px;} .login_wrap > .logoWrap{width: 50px} .loginTxt span:first-child{margin-bottom: 10px; font-size: 11px;} .login input[type=checkbox]{width: 17px; height: 17px;} .loginInput .loginInput_bottom label{font-size: 13px;} .loginInput{margin-bottom: 40px;} .loginForm button{height: 50px; line-height: 50px;} } @media all and (max-height: 800px){ body{overflow-y: auto;} } @media all and (min-width:0px) and (max-width:500px) { /* 모바일&태블릿 */ .memberLogin_wrap:before{content:""; background: rgba(39, 40, 67, 0.9); position:absolute; top:0; right:0; left:0; bottom:0;} .memberLogin_wrap .form_wrap{width: 95%; left:50%; margin: 0 auto;} .memberLogin_wrap .form{width: 100%; padding:30px 40px; background:transparent; box-shadow:none;} .memberLogin_wrap .form .login_title img {width:220px;} } @media all and (min-width:0px) and (max-width:390px) { .search_wrapper .dateinput_wrap.time .dateinput input[type="text"]{padding:0 5px;} .search_wrapper .dateinput_wrap.time .dateinput span{display:none;} } @media all and (max-width:1024px) { .contents .search_wrapper { padding-left:7px;padding-right:7px;} .contents .search_wrapper > div { display: inline-block;margin-right:15px;} .contents .search_wrapper > br { display: none; } .contents .search_wrapper > div + div { margin-left:0px; } .contents .search_wrapper > br + div { margin-left:0px; } .contents .search_wrapper > div + div::before { display:none;} .contents .search_wrapper > div > span { display:inline-block; line-height:30px;font-size:13px;} .contents .search_wrapper > div > span > select { width:auto;line-height:30px;height:30px;padding-right:28px;border:1px solid #bbb;border-radius: 4px;display: inline-block;} .contents .search_wrapper > div > span > label { display:inline-block;width:auto;line-height:30px;height:30px; font-size:12px;} .contents .search_wrapper > div > span > label + label { margin-left:10px; } .contents .search_wrapper > div > span > label > input { width:18px;height:18px;margin-right:5px;background: #fff;border:1px solid #bbb;} .contents .search_wrapper > div > span input[type=date], .contents .search_wrapper > div > span input[type=time], .contents .search_wrapper > div > span input[type=number], .contents .search_wrapper > div > span input[type=text] { width:140px;line-height:30px;height:30px;background: #fff;border:1px solid #bbb;border-radius: 4px;display: inline-block;padding: 0 10px;} .contents .search_wrapper > div > span.text > input[type=date], .contents .search_wrapper > div > span.text > input[type=time], .contents .search_wrapper > div > span.text > input[type=number] .contents .search_wrapper > div > span.text > input[type=text] { width:180px; } .contents .search_wrapper > div > span.term > span { display:inline-block;vertical-align: middle;position: relative;} .contents .search_wrapper > div > span.term > span input[type=date], .contents .search_wrapper > div > span.term > span input[type=time], .contents .search_wrapper > div > span.term > span input[type=number], .contents .search_wrapper > div > span.term > span input[type=text] { width:120px;min-width:auto;} .contents .search_wrapper > div > span.term > span::after {position: absolute;background: #888;width:14px;height:12px;content: '';display:block;top:10px;right:10px;background:url(../images/tuiicon.png) no-repeat;background-repeat: no-repeat;background-position: -16px 0px;} .contents .search_wrapper > div > span.term > b { display:inline-block;width:20px;text-align: center;font-size:16px;font-weight: 400;} .contents .search_wrapper > div > button { display:inline-block;height: 30px; } } /* 3finex공장 종합현황 */ .finex3Check{overflow: hidden;} .finex3Check_box{width: 25%; height: 235px; float: left; padding: 25px 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between;} .finex3Check_box:nth-child(odd){background: #f9fafc;} .finex3Check_box .t{font-size: 18px; font-weight: 500; color: #333; height: 48px; line-height: 1;} .finex3Check_box .b { text-align:right; font-size:25px; color:#333; margin-top:auto; margin-bottom:5px; } .finex3Check_box .b strong{font-size: 40px; font-weight: 700;} .finex3Check_box .s{font-size: 14px; color: #999;} .finex3Check_box:nth-child(1) .t{background: url(../images/icon_3finex_01.png) no-repeat right top / 40px 40px;} .finex3Check_box:nth-child(2) .t{background: url(../images/icon_3finex_02.png) no-repeat right top / 40px 40px;} .finex3Check_box:nth-child(3) .t{background: url(../images/icon_3finex_03.png) no-repeat right top / 40px 40px;} .finex3Check_box:nth-child(4) .t{background: url(../images/icon_3finex_04.png) no-repeat right top / 40px 40px;} /* 차량출입현황 */ .acc_vehicle_check{overflow: hidden;} .acc_vehicle_check_box{width: 25%; height: 235px; float: left; padding: 25px 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between;} .acc_vehicle_check_box.extend5 { width:20%; } .acc_vehicle_check_box:nth-child(odd){background: #f9fafc;} .acc_vehicle_check_box .t{font-size: 20px; font-weight: 500; color: #333; height: 64px; line-height: 1;} .acc_vehicle_check_box .b { text-align:right; font-size:25px; color:#333; } .acc_vehicle_check_box .b strong{font-size: 40px; font-weight: 700;} .acc_vehicle_check_box .s{font-size: 16px; color: #999;} .acc_vehicle_check_box:nth-child(1) .t{background: url(../img/icon/ico_truck_LG.png) no-repeat right top !important;} .acc_vehicle_check_box:nth-child(2) .t{background: url(../img/icon/ico_truck_LB.png) no-repeat right top !important;} .acc_vehicle_check_box:nth-child(3) .t{background: url(../img/icon/ico_truck_LB.png) no-repeat right top !important;} .acc_vehicle_check_box:nth-child(4) .t{background: url(../img/icon/ico_truck_LB.png) no-repeat right top !important;} .acc_vehicle_check_box:last-child .t{background: url(../img/icon/ico_truck_B.png) no-repeat right top !important;} /* 중장비출입현황 */ .acc_heavy_check{overflow: hidden;} .acc_heavy_check_box{width: 20%; height: 235px; float: left; padding: 25px 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between;} /* .acc_heavy_check_box:nth-child(odd){background: #f9fafc;} */ .acc_heavy_check_box .t{font-size: 16px; font-weight: 500; color: #777; height: 64px; line-height: 1; padding-right: 40px;} .acc_heavy_check_box .b { text-align:right; font-size:25px; color:#333; } .acc_heavy_check_box .b strong{font-size: 40px; font-weight: 700;} .acc_heavy_check_box .s{font-size: 16px; color: #999;} .acc_heavy_check_box:nth-child(1) .t{background: url(../img/icon/icon_truck.png) no-repeat right top !important;} .acc_heavy_check_box:nth-child(2) .t{background: url(../img/icon/icon_bulldozer.png) no-repeat right top !important;} .acc_heavy_check_box:nth-child(3) .t{background: url(../img/icon/icon_crane.png) no-repeat right top !important;} .acc_heavy_check_box:nth-child(4) .t{background: url(../img/icon/icon_forklift.png) no-repeat right top !important;} .acc_heavy_check_box:last-child .t{background: url(../img/icon/icon_truck.png) no-repeat right top !important;} /* 주요설비 안전상황 */ .cont.mainEquipment2{height: 837px;padding-left:0px;} .cont.mainEquipment2 > dl { display:block;font-size:0px; } .cont.mainEquipment2 > dl > dd { display:inline-block;width:20%; } .cont.mainEquipment2 > dl > dd > span { display:block;margin:0px 0px;line-height:36px;font-size:13px;font-weight:500;color:#333;text-align: center;background: #f4f8fb;} .cont.mainEquipment2 > dl > dd + dd > span { border-left: 1px solid #ddd;margin-left:-1px; } .mainEquipment2_row{width:100%; height: calc( (100% - 36px) / 4 ); box-sizing: border-box; background: #fff;position: relative;padding-top:40px;} .mainEquipment2_row:nth-child(even){background: #fff;} .mainEquipment2_row .mainEquipment_wrap .mainEquipment_box { width:20%;padding:0px 0px;height: auto;} .mainEquipment2_row .mainEquipment_wrap .mainEquipment_box.type1 .m_wrap .m_graph{float:none;margin:0 auto; } .mainEquipment2_row .mainEquipment_wrap .mainEquipment_box .t { display:none; } .mainEquipment2_row .btit { display:block;line-height:40px;font-size:16px;font-weight:400;position: absolute;top:0px;background: #fff;color:#111;padding:0px 0px;right:0px;left:0px;text-align:center;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;} .mainEquipment2_row .mainEquipment_wrap .mainEquipment_box .b_wrap{overflow: hidden;margin-top: 15px;border-top: 0px solid #f9fafc; padding:15px 10px;background: #f4f8fb;margin-bottom:0px !important;} .mainEquipment2_row .mainEquipment_wrap .mainEquipment_box.type1 .m_wrap { padding-top:25px;padding-bottom:12px;height:auto !important; } .mainEquipment2_row .mainEquipment_wrap .mainEquipment_box.type2 .m { padding:16px 10px 15px 10px;text-align:center; } .mainEquipment2_row .mainEquipment_wrap .mainEquipment_box.type3 .m_wrap { padding:16px 10px 15px 10px;text-align:center; } .mainEquipment2_row .mainEquipment_wrap .mainEquipment_box.type4 .m_wrap { padding:16px 10px 15px 10px;text-align:center; } /* 현장정보 */ #workAreaInfo{background: url(../images/bg_portlet_workAreaInfo.png) no-repeat left center / cover; } #workAreaInfo .title span{float: right; color: #fff;} #workAreaInfo .title, #workAreaInfo .title h2{color: #fff;} .cont.workAreaInfo { min-height:auto; padding:20px; background:none; } .workAreaInfo_wrap{display: flex; flex-wrap: no-wrap; gap: 12px; justify-content: space-between} .workAreaInfo_wrap > div{width: 25%; height: 195px; padding: 20px; box-sizing: border-box; border: 1px solid #1360b1; border-radius: 10px;} .workAreaInfo_wrap > div:nth-of-type(1){width: 30%; background: none; border-radius: 0; border:0; padding: 0; color: #fefefe; font-size: 16px; font-weight: 500;} .workAreaInfo_wrap > div .t{font-size: 17px; font-weight: 500; color: #c3dbf8; } .workAreaInfo_wrap > div .num{font-size: 35px; font-weight: 700; color: #fff; margin-top: 80px; } .workAreaInfo_wrap > div .num span{font-size: 14px; vertical-align: baseline; font-weight: 400; margin-left: 5px;} .workAreaInfo_wrap > div:nth-of-type(2) { background:rgba(0, 80, 170, 0.5) url("../images/icon_workArea_01.png") no-repeat left 20px top 20px ;} .workAreaInfo_wrap > div:nth-of-type(3) { background:rgba(0, 80, 170, 0.5) url("../images/icon_workArea_02.png") no-repeat left 20px top 20px ;} .workAreaInfo_wrap > div:nth-of-type(4) { background:rgba(0, 80, 170, 0.5) url("../images/icon_workArea_03.png") no-repeat left 20px top 20px ;} /* 출입현황 */ .cont.entryStat{height: 235px; box-sizing: border-box;} .cont.entryStat.entryTable{height: 536px;} .entryStat_total { height:35px; line-height:35px; border-bottom:1px solid #efefef; text-align:right; padding:0 20px; box-sizing:border-box; font-size:15px; color:#999; } .entryStat_total strong { font-weight:500; color:#444; } .entryStat_wrap{display: flex; justify-content: space-between; } .entryStat_wrap > div{ width: calc( 100% / 5); height: 200px; padding:20px; box-sizing: border-box; text-align: left; display: flex; flex-direction: column; justify-content: space-between} .entryStat_wrap > div:last-child{display: none;} .entryStat_wrap > div:nth-child(even){background: #f9fafc;} .entryStat_wrap > div .t{font-size: 16px; font-weight: 500; color: #777; height: 64px; line-height: 1;} .entryStat_wrap > div .num { text-align:right; font-size:30px; font-weight:700; color:#333; } .entryStat_wrap > div .num span{font-size: 15px; color: #333; vertical-align: baseline; margin-left: 5px; font-weight: 400; } .entryStat_wrap > div:nth-of-type(1) .t{background: url(../images/icon_entryStat_01.png) no-repeat right top; } .entryStat_wrap > div:nth-of-type(2) .t{background: url(../images/icon_entryStat_02.png) no-repeat right top; } .entryStat_wrap > div:nth-of-type(3) .t{background: url(../images/icon_entryStat_03.png) no-repeat right top; } .entryStat_wrap > div:nth-of-type(4) .t{background: url(../images/icon_entryStat_04.png) no-repeat right top; } .entryStat_wrap > div:nth-of-type(5) .t{background: url(../images/icon_entryStat_05.png) no-repeat right top; } .entryStat_wrap > div:nth-of-type(6) .t{background: url(../images/icon_entryStat_06.png) no-repeat right top; } .entryTable_wrap { padding:0 5px; /*border-top:1px solid #ddd;*/ height:300px; box-sizing:border-box; } .entryTable .portlet_table{border-top:2px solid #00a2e1;} .entryTable .portlet_table thead th { /*line-height:45px;*/ } .entryTable .portlet_table tbody td { padding:10px 5px; font-size:20px !important; } .entryTable .portlet_table tbody td:first-child { font-size:14px !important; } .entryTable .portlet_table tbody td.color_01{color: #2bde8c;} .entryTable .portlet_table tbody td.color_02{color: #f65050;} .entryTable .portlet_table tbody td.color_03{color: #f9b93e;} .entryTable .portlet_table tbody td.color_04{color: #6d71f8;} .cont.mainEquipment{height: 837px;} .mainEquipment_wrap{overflow: hidden;} .mainEquipment_row{width:100%; height: calc( 100% / 5 ); box-sizing: border-box; background: #f9fafc;} .mainEquipment_row:nth-child(even){background: #fff;} .mainEquipment_row .btit{font-size: 16px; font-weight: 500; color: #111; padding-left: 20px; padding-top: 10px; box-sizing: border-box;padding-bottom:2px;} .mainEquipment_wrap .mainEquipment_box { float:left; width:25%; height:122px; border-right:1px solid #ccc; box-sizing:border-box; padding:0 20px; } .mainEquipment_wrap .mainEquipment_box:last-child{border-right: 0;} .mainEquipment_wrap .mainEquipment_box .t{font-size: 14px; color: #777; line-height: 1;} .mainEquipment_wrap .mainEquipment_box.type1 .m_wrap{overflow: hidden; height: 52px; margin-bottom: 0px;padding-bottom:0px; } .mainEquipment_wrap .mainEquipment_box.type1 .m_wrap .m_graph { width:94px; height:47px; float:default; display:block; margin:0 auto; background:url(../images/bg_gasGraph.png) no-repeat center; background-size:auto 100%; overflow:hidden; position:relative; } .mainEquipment_wrap .mainEquipment_box.type1 .m_wrap .m_graph .arrow { width:53px; height:53px; background:url(../images/gasGraph_pin.png?11) no-repeat center; position:absolute; left:50%; top:15px; } .mainEquipment_wrap .mainEquipment_box.type1 .m_wrap .m_graph .res { position:absolute; left:50%; bottom:0px; font-size:12px; color:#333; transform:translate(-50%); } .mainEquipment_wrap .mainEquipment_box.type1 .b_wrap{overflow: hidden;margin: 5px 0 10px; } .mainEquipment_wrap .mainEquipment_box.type1 .b_wrap .b{width: 50%; float: left; text-align: center; position: relative; padding: 0px 0; box-sizing: border-box;} .mainEquipment_wrap .mainEquipment_box.type1 .b_wrap .b:first-child::after{content: ""; position: absolute; right: 0; top:10px; display: block; width: 1px; height: 20px; background: #ededed;} .mainEquipment_wrap .mainEquipment_box.type1 .b_wrap .b .b_t{font-size: 12px; color: #555;} .mainEquipment_wrap .mainEquipment_box.type1 .b_wrap .b .num{font-size: 16px; font-weight: 600; color: #00a9ff;} .mainEquipment_wrap .mainEquipment_box.type1 .b_wrap .b.warn {background: #f8edf0; border:2px solid #ff587b; box-sizing: border-box; border-radius: 5px;} .mainEquipment_wrap .mainEquipment_box.type1 .b_wrap .b:last-child .num{color: #ff587b;} .mainEquipment_wrap .mainEquipment_box.type2 .m{font-size: 16px; color: #999; text-align: center;} .mainEquipment_wrap .mainEquipment_box.type2 .m strong{font-size: 35px; font-weight: 600; padding: 0 3px;color:#333;} .mainEquipment_wrap .mainEquipment_box.type2 .b_wrap{overflow: hidden; margin: 5px 0 10px;} .mainEquipment_wrap .mainEquipment_box.type2 .b_wrap .b{width: 50%; float: left; text-align: center; position: relative; padding: 0px 0; box-sizing: border-box;} .mainEquipment_wrap .mainEquipment_box.type2 .b_wrap .b:first-child::after{content: ""; position: absolute; right: 0; top:10px; display: block; width: 1px; height: 22px; background: #ededed;} .mainEquipment_wrap .mainEquipment_box.type2 .b_wrap .b .b_t{font-size: 12px; color: #555;} .mainEquipment_wrap .mainEquipment_box.type2 .b_wrap .b .num{font-size: 16px; font-weight: 600; color: #00a9ff;} .mainEquipment_wrap .mainEquipment_box.type3 .m_wrap {overflow: hidden; margin: 10px 0 0;} .mainEquipment_wrap .mainEquipment_box.type3 .m_wrap .m {width: 33.3333%; float: left; text-align: center; position: relative;} .mainEquipment_wrap .mainEquipment_box.type3 .m_wrap .m::after{content: ""; position: absolute; right: 0; top:10px; display: block; width: 1px; height: 22px; background: #ededed; transform: skew(-15deg);} .mainEquipment_wrap .mainEquipment_box.type3 .m_wrap .m:last-child:after{display: none;} .mainEquipment_wrap .mainEquipment_box.type3 .m_wrap .m .num{font-size: 18px; font-weight: 500;line-height:24px;} .mainEquipment_wrap .mainEquipment_box.type3 .m_wrap .m .lv{font-size: 12px;color:#999;line-height:18px;} .mainEquipment_wrap .mainEquipment_box.type3 .b_wrap{overflow: hidden; margin: 5px 0 10px;} .mainEquipment_wrap .mainEquipment_box.type3 .b_wrap .b{width: 50%; float: left; text-align: center; position: relative; padding: 0px 0; box-sizing: border-box;} .mainEquipment_wrap .mainEquipment_box.type3 .b_wrap .b:first-child::after{content: ""; position: absolute; right: 0; top:10px; display: block; width: 1px; height: 22px; background: #ededed;} .mainEquipment_wrap .mainEquipment_box.type3 .b_wrap .b .b_t{font-size: 12px; color: #777;font-weight:300;} .mainEquipment_wrap .mainEquipment_box.type3 .b_wrap .b .num{font-size: 16px; font-weight: 600; color: #00a9ff;} .mainEquipment_wrap .mainEquipment_box.type3 .b_wrap .b .num.blue{color: #00a9ff;} .mainEquipment_wrap .mainEquipment_box.type3 .b_wrap .b .num.red{color: #ff587b} .mainEquipment_wrap .mainEquipment_box.type4 .m_wrap {overflow: hidden; margin: 10px 0 0;} .mainEquipment_wrap .mainEquipment_box.type4 .m_wrap .m {width: 25%; float: left; text-align: center; position: relative;} .mainEquipment_wrap .mainEquipment_box.type4 .m_wrap .m::after{content: ""; position: absolute; right: 0; top:10px; display: block; width: 1px; height: 22px; background: #ededed; transform: skew(-15deg);} .mainEquipment_wrap .mainEquipment_box.type4 .m_wrap .m:last-child:after{display: none;} .mainEquipment_wrap .mainEquipment_box.type4 .m_wrap .m .num{font-size: 18px; font-weight: 500;line-height:24px;} .mainEquipment_wrap .mainEquipment_box.type4 .m_wrap .m .m_t{font-size: 12px;color:#999;line-height:18px;} .mainEquipment_wrap .mainEquipment_box.type4 .b_wrap{overflow: hidden; margin: 5px 0 10px;} .mainEquipment_wrap .mainEquipment_box.type4 .b_wrap .b{width: 50%; float: left; text-align: center; position: relative; padding: 0px 0; box-sizing: border-box;} .mainEquipment_wrap .mainEquipment_box.type4 .b_wrap .b:first-child::after{content: ""; position: absolute; right: 0; top:10px; display: block; width: 1px; height: 22px; background: #ededed;} .mainEquipment_wrap .mainEquipment_box.type4 .b_wrap .b .b_t{font-size: 12px; color: #555;} .mainEquipment_wrap .mainEquipment_box.type4 .b_wrap .b .num{font-size: 16px; font-weight: 600; color: #00a9ff;} .mainEquipment_wrap .mainEquipment_box.type4 .b_wrap .b .num.blue{color: #00a9ff;} .mainEquipment_wrap .mainEquipment_box.type4 .b_wrap .b .num.red{color: #ff587b} @media all and (min-width:320px) and (max-width:1599.99px) { #workAreaInfo { background: rgb(125, 186, 233) url(../images/bg_portlet_workAreaInfo.png) no-repeat left ; background: linear-gradient(45deg, rgba(125, 186, 233, 1) 0%, rgba(29, 109, 167, 1) 100%); } } .colgroupPc{display:table-column-group;} .colgroupMobile{display:none;} /*반응형*/ @media all and (min-width:0px) and (max-width:1280px) { /* 모바일&태블릿 */ .colgroupPc{display:none;} .colgroupMobile{display:table-column-group;} #header #nav .depth1 > li[data-mobile="N"] { display:none; } #header #nav .depth1 > li > .depth2 > li[data-mobile="N"] { display:none; } #header{top: 60px; background: none; box-shadow: none; width: 0;} #wrap #header h1{position: fixed; top: 0; background: #015794 url(../images/logo.png) no-repeat center;} #header #navToggle{display: none;} #header .mobileshow{display: block;} #container.main { margin-top:120px !important;padding-top:0px !important; height: calc( 100% - 120px );} #wrap #container{padding: 60px 0 0 0; } #nav{display:none;} #nav.navon{display:block; position: fixed; top: 60; width: 300px; left: 0; bottom: 0; background: #015794; z-index: 9999; overflow-y: auto } .navonBg{display: none; background: rgba(0,0,0,0.80); position: fixed; top: 0; left: 300px; right: 0; bottom: 0; z-index: 50;} #header {top: 60px;} #header h1{position: fixed; top: 0;} .topInfo_wrap .topInfo_sch div select{padding:0 20px 0 10px} .moNavtop{display:block;} .topInfo_wrap{height: auto; width: 100%;top:60px;} .topInfo_wrap .topInfo_sch{float: none; width: 100%; margin-left: 0; padding: 0 20px; box-sizing: border-box; } .topInfo_wrap .topInfo_sch div { width:calc(100% / 3); margin:0; } /*mrjoo::x:: width: calc( (100% - 30px ) / 3); margin: 0 15px 0 0;}*/ .topInfo_wrap .topInfo_sch div span { display:none; } .topInfo_wrap .topInfo_sch div select { width:100% !important; }/*calc(100% - 37px)*/ .topInfo_wrap .topInfo_sch div:nth-child(3) {margin-right: 0;} .topInfo_wrap .topInfo_member{display:none;} .topInfo_wrap .topInfo_member > .member{float: right;} .topInfo_wrap .topInfo_sch .time{display:none;} .contents{padding: 80px 15px 20px 15px;} .areaInfo .graph_wrap > div.graph {display: none;} .areaInfo .graph_wrap > div.endDay::before{content: "~ ";} .portlet .title h2{ font-size: 16px; padding:0 15px;} .grid{margin-left: 0} .portlet {float: none; width: calc( 100% - 30px); margin-left: 0;} /*.portlet .cont{height: auto !important; min-height: 235px;}*/ .cont.broadCast.row1{height: auto;} .cont.broadCast.row1 .control_wrap, .cont.broadCast.row1 .movie_wrap{width: 100%;} .portlet .cont.sp_2{height: 195px;} /*작업구역별 안전고리 현황*/ .cont.covidInfo{height: 205px;} .cont.weatherInfo{height: 230px;} .topInfo_wrap .topInfo_member .portletSet{display: none;} .saftyNotice .legend {float: none; width: 100%;} .saftyNotice .list {float: none; width: 100%;} body.Mofixed{overflow: hidden;} /*현장정보*/ .portlet .cont.areaInfo {height: 180px; padding: 10px 0px;} .areaInfo ul {margin-bottom: 20px;} .areaInfo ul li .day strong {font-size: 25px;} /*환경정보*/ .weatherInfo {padding: 20px 0px;} .weatherInfo ul li .t {font-size: 13px;} .weatherInfo ul li .desc p {font-size: 12px;} /*작업구역별 안전고리 현황*/ .portlet_table thead th { line-height: 36px;} .portlet_table tbody td {line-height: 36px;} .portlet_table.type2 tbody th, .portlet_table.type2 tbody td{line-height: 36px; font-size: 13px; } .portlet .cont.tbm{height: auto;} .portlet .cont.mainFieldStat #mainFieldMapWrapper{height: calc( 100% - 30px)} } li[data-mobile='M']{display: none} @media all and (min-width:1280px) { #wrap.menuOff #header{width: 66px; } #wrap.menuOff #header h1{background: #015794 url(../images/logo_small.png) no-repeat center; background-size: 36px 33px; } #wrap.menuOff #header #nav .depth1 > li > a{ padding: 0 0 0 0;height:50px; } #wrap.menuOff #header #nav .depth1 > li > a > .icon{text-align:center; margin-right: 0; width: 66px;height:50px; background-position: center !important;background-size: 25px !important;display:block;} #wrap.menuOff #header #nav .depth1 > li > a > .navSmall{display:none;} #wrap.menuOff #container{width: 100%; padding:0 0 0 66px;} #wrap.menuOff #header #nav{overflow-y: unset; overflow-x: unset;} #wrap.menuOff #header #nav .depth1 > li{position: relative; z-index:1;} #wrap.menuOff #header #nav .depth1 > li > .depth2{display:none; background: #e2e9ef; position: absolute; left: 100%; top: 0; width: 260px; z-index:-1;box-shadow: 0px 0px 10px rgba(0,0,0,0.3);} #wrap.menuOff #header #nav .depth1 > li > .depth2 > li{} #wrap.menuOff #header #nav .depth1 > li > .depth2 > li > a{display: block; color: #333; font-size: 15px; font-weight: 500; padding-left:60px; line-height: 50px;} #wrap.menuOff #header #nav .depth1 > li > .depth2 > li:hover a, #wrap.menuOff #header #nav .depth1 > li > .depth2 > li.active a{background: #cee9f4; color:#007aa9; font-weight: 500;} #wrap.menuOff .topInfo_wrap{ width: calc( 100% - 66px ); } #wrap.menuOff #header #nav .depth1 > li.active > a::after{ content: ""; display: block; border-top: 9px solid transparent; border-left: 9px solid #022f50; /**/ border-bottom: 9px solid transparent; position: absolute; right: -9px; top : 18px; } .contents .search_wrapper > div > span.text > input[type=text]::placeholder{color: transparent;} } @media all and (min-width:0px) and (max-width:780px) { .topInfo_wrap{line-height: 40px} .topInfo_wrap .topInfo_sch{float: none; width: 100%; margin-left: 0; padding: 5px 15px; box-sizing: border-box; } .topInfo_wrap .topInfo_sch div{ margin: 0;} .topInfo_wrap .topInfo_sch div select { /*width:calc(100% - 37px) !important*/; } .topInfo_wrap .topInfo_sch div:nth-child(1) { width:calc(50% - 5px); margin-right:10px; } .topInfo_wrap .topInfo_sch div:nth-child(2) { width:calc(50% - 5px); } .topInfo_wrap .topInfo_sch div:nth-child(3) { width:100%; margin-right:0; } .topInfo_wrap .topInfo_sch div:nth-child(3) select { font-size:17px; font-weight:600; } .contents{padding-top: 105px} #container.main{margin-top:150px !important; padding-top:0px !important; height: calc( 100% - 150px );} .workerNum_wrap{width: 100%;} .workerNum .tn{margin: 29px 0;} .mCSB_scrollTools_horizontal{display:unset !important;} .chartWrap.workerState, .chartWrap.workState {width: 100%;} .chartWrap.burn{width: 50%;} .toastui-chart-wrapper{position: relative !important;} .portlet .cont.tbm .tbmChart{/*height: ;*/} #tbmChart01 canvas, #tbmChart02 canvas{margin: 0 auto; width: 220px !important; height: 220px !important;} .portlet .cont.tbm .tbmChart{height: 220px; overflow: hidden;} .workerNum{ calc(100% - 160px); padding:10px; box-sizing:border-box; } .companyworker{width:160px;} .workerNum .n div{margin: 0 0px; width: calc( 100% / 3); font-size:14px;} .popup_contents .popup_bottom_btn a{padding: 0 15px;} .portlet .title{touch-action: unset !important;} .portlet .title h2{ font-size: 14px; line-height: 44px; height: 44px;} #mainSafeBudget .title h2 .legend{font-size: 12px} } @media all and (max-width:767px) { .portlet#audioBroadCastStatus .cont {height: 525px;} .broadCast ul { width: 97%; min-height: 258px; } } /* 가스실시간차트 */ .gasChart_wrap{} .gasChart_wrap > div{margin:0 10px 10px 0; background:#fff; box-shadow:1px 2px 6px #ccc; width: calc(50% - 5px); height:250px; float:left; overflow:hidden;} #gasChart02, #gasChart04, #gasChart06 {margin-right:0;} .gasChart_wrap > div > .toastui-chart-wrapper{margin-top:20px;} /* 레이어팝업 */ .layerPopup_wrap{display: none;} .layerPopup_wrap::before{content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index:900;} .layerPopup{position: absolute; z-index: 910; transform: translate(-50%, -50%); left:50%; top: 50%; box-sizing: border-box; } .layerPopup{} .layerPopup_top{ text-align: left; font-size: 18px; padding: 20px; font-weight: 500; color: #fff; line-height: 20px; position: relative; background: #015794; } .layerPopup_top .close{position: absolute; display: block; width: 30px; height: 30px; right: 15px; top: 15px; background: transparent; border: 0; font-size: 18px; color: #fff;} .layerPopup_mid{padding: 15px 15px 0; overflow-y: auto; background: #fff; } .layerPopup_bot{padding: 15px; overflow: hidden; text-align: right; background: #fff;} .layerPopup_bot .layerbtn{height:30px; line-height:30px; padding: 0 25px; vertical-align: middle;} .layerPopup_bot .layerbtn.enter{} .layerPopup_bot .layerbtn.cancel{height:28px; line-height:28px;} .layerTable{width: 100%; border-top: 1px solid #aaa;} .layerTable > tbody th, .layerTable > tbody > tr > td{vertical-align: middle; line-height: 30px; text-align: left; padding:5px; border-bottom: 1px solid #eee; font-size: 14px;} .layerTable > tbody > tr > th{font-size: 14px; font-weight: 500; background: #fbfbfb; padding: 5px 10px;} .layerTable > tbody > tr > td > input[type="text"], .layerTable > tbody > tr > td > input[type="password"], .layerTable > tbody > tr > td > input[type="date"], .layerTable > tbody > tr > td > input[type="file"], .layerTable > tbody > tr > td > input[type="email"], .layerTable > tbody > tr > td > input[type="number"], .layerTable > tbody > tr > td > select{width: 100%;} .layerTable > tbody > tr > td > textarea{ border: 1px solid #dcdcdc; width: 100%; padding: 10px; box-sizing: border-box; height: 100px; overflow-y: auto;} .btninput{font-size: 0;} .btninput input[type="text"]{width : calc( 100% - 55px) !important; } .btninput .btn_black{width: 50px; padding: 0; text-align: center; height: 29px; line-height: 29px; border-radius: 5px; float: right;} .dateinput{position: relative;} .dateinput input[type="text"]{width : 100%; } .dateinput .tui-ico-date{position: absolute; right: 10px; top:10px} .search_wrapper .dateinput input[type="text"]{width:115px !important;} .popup_contents div.unit { display:block;text-align:right; } .popup_contents a{color:#00affe; text-decoration:underline;} /* 작업구역별영상 */ .cctvListH_wrap{} .cctvListH_wrap > ul > div{font-size: 17px; font-weight: 500; margin: 10px 0;margin-left:20px;padding-top:10px;} .cctvListH_wrap > ul > div:before {content: ''; display: inline-block; width: 6px; height: 6px; vertical-align: middle; background: #F18A00; margin-right: 6px;} .cctvListH_wrap > ul > div > span{display: inline-block; margin-left: 10px; font-size: 13px; background: #F18A00; padding: 3px 6px; border-radius: 4px; font-weight: normal; color: #fff;} .cctvListH_wrap > ul > div > span > b{margin-left: 2px;} .cctvListH_wrap ul{overflow:hidden;font-size:0px;margin-left:-20px;display:block;font-size: 15px; font-weight:bold; border-bottom: 0px solid #ccc; margin-bottom: 10px;} .cctvListH_wrap ul li{display:inline-block; width: calc(25% - 20px); margin-bottom:20px; overflow:hidden; margin-left:20px; cursor:pointer; background:#666; position:relative; background:url( ../img/icon/no_cctv.jpg) no-repeat center / cover; } .cctvListH_wrap ul li div.img{ padding-top:60%; position:relative; display: block; align-items: center; background:#2c2828;position:relative; } .cctvListH_wrap ul li video, .cctvListH_wrap ul li div.img video, .cctvListH_wrap ul li div.img iframe, .cctvListH_wrap ul li div.img img{ position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width: 100%; height: 100%; /* min-height: 360px; max-height: 400px; min-width:700px; */} .cctvListH_wrap ul li div.txt{background: #003051; height:40px; line-height:40px; text-align:center; font-size:15px; color:#fff; bottom:0; } .cctvListH_wrap ul li video, .cctvListH_wrap ul li div.img img, .cctvListH_wrap ul li div.img iframe, .cctvListH_wrap ul li div.img video{} #cctvUrl2{font-size: 0} #cctvUrl2.on{display: flex; align-items: center; justify-content: center} #tgcctv{min-height: 300px;} #viewCctvList{top: 15px; left: 15px;} #cctvUrl2 img{width:100% !important; height:100% !Important; min-width:1510px !important; min-height:850px !important; max-width:1510px !important; max-height:850px !important; background: #000;} #cctvUrl2 iframe{width:100% !Important; height:100% !Important; min-width:1510px !important; min-height:850px !important; max-width:1510px !important; max-height:850px !important;} #cctvUrl2 video{width:100% !Important; height:100% !Important; min-width:1510px !important; min-height:850px !important; max-width:1510px !important; max-height:850px !important; object-fit:cover;} .timeinputH {position: absolute;background: #888;width:14px;height:12px;content: '';display:block;top:10px;right:10px;background:url(../images/tuiicon.png) no-repeat;background-repeat: no-repeat;background-position: 0px -30px;} .schdiv4{} .schdiv3{} .schdivBtn{position:relative;} .schdivW100{} .divW100{} .pcView{display:inline-block;width:15px;text-align:center;letter-spacing:0px;font-style:normal;} .moView{display:none;} .pcview2{display:inline-block;} .pcInlineBlock{display: inline-block !important;} @media all and (min-width:781px) and (max-width:1000px) { .cctvListH_wrap ul li{display:inline-block; width: calc(33.3333% - 20px); } .popup_wrap{width: 90% !important; } #cctvViewListPopWrap, #realPopWrap{width: unset !important} .popup_top_area{width:100% !important;} .popup_contents{position:relative;} .cctvpopC{ width:100% !important; height:445px !important; box-sizing: border-box;} #cctvUrl2 video, #cctvUrl2 img{width:100% !important; height:415px !important; min-width: unset !important; min-height: unset !important;} } .moLabel{display:inline-block;} @media all and (min-width:0px) and (max-width:1199.99px) { /*.popup_wrap{position:fixed;}*/ .contents .search_wrapper > div > strong {display:none} .contents .search_wrapper > div > strong.moLabel{display:none; position:absolute; left:10px; z-index:10; } .popup_contents .search_wrap .search_area .search_box label.moLabel{display:none; position:absolute; left:10px; z-index:10; } .alarmBtn label.moLabel{display:none; position:absolute; left:10px; z-index:10; width:100% !important; } .popup_contents .search_wrap .search_area .search_box label{display:none;} .popup_contents .worker_info_wrap{padding:0;} .moScroll{overflow-x:auto;} .moScroll::-webkit-scrollbar { width:3px; height:3px; } .moScroll::-webkit-scrollbar-thumb { border-radius:3px; background:#ccc; } .moScroll::-webkit-scrollbar-track { background:transparent; } .pcView{display:none;} .moView{display:block;} .moShow{display:inline-block !important;} .popup_contents .worker_info_wrap .table_area > table.wokerTable > tbody > tr > td .input_area{width:100% !important} .table_area > table.wokerTable > tbody > tr > td .select_area{width:100% !important} .dateTd span{width : calc( 100% - 65px) !important;} .dateTd .dateinput{width : 100% !important;} .dateTd .popupBtn {width:60px; float:right;} .wokerTable th, .wokerTable colgroup, .wokerTable col{display:none;} .wokerTable td{ width: calc( (100% - 5px) / 2 ) !important;} .portlet .title h2 > span{display:none;} } .search_wrapper .dateinput_wrap.time .dateinput input[type="text"]{width:150px !important;} @media all and (min-width:0px) and (max-width:780px) { .cctvListH_wrap ul { margin-left:-10px;padding-bottom:15px; } .cctvListH_wrap ul > div { margin-left:10px; } .cctvListH_wrap ul li{display:inline-block; width: calc(50% - 10px);margin-left:10px;margin-bottom:10px; } body:not(.dashboard) .topInfo_wrap{ display: none; } body:not(.dashboard) .contents{ padding-top: 15px; } .hgroup{overflow: hidden} .grid_top_con2 .grid_total_area{float: right;} .hgroup h2{float: left; font-size: 18px;} .popup_wrap{width: 90% !important; } .popup_top_area{width:100% !important;} .popup_contents{position:relative;} .pcInlineBlock{display: none !important;} .divW100{width:100% !important;} .divW100.schdivBtn {width :100% !important;} .divW100.schdivBtn > span{width : calc( 100% - 65px);} .divW100.schdivBtn > span > input[type="text"]{width : 100% !important;} .divW100.schdivBtn .btn_search{position:absolute; right:0; top:2px;} .divW100.schdivBtn.btnBottom .btn_search{bottom:1px; top:unset;} .search_wrapper .dateinput_wrap.time .dateinput input[type="text"]{width:100% !important;} .divWspan{width:100% !important;} .contents .search_wrapper > div{margin-right:5px;} .schdiv2{width: calc( (100% - 5px) / 2 ) !important; } .schdiv3{width: calc( (100% - 10px) / 3 ) !important; } .schdiv4{width: calc( (100% - 15px) / 4 ) !important; } .nomgR {margin-right:0 !important} .nomgL {margin-left:0 !important} .divW100 span, .schdiv2 span, .schdiv3 span, .schdiv4 span{width:100%;} .divW100 span.select select, .schdiv2 span.select select, .schdiv3 span.select select, .schdiv2 span.select .select_area, .schdiv3 span.select .select_area, .schdiv4 span.select .select_area, .schdiv4 span.select select{width:100% !important;} .wfull{width:100%; padding-right:0 !Important} .dateTimeWrap.wfull{width:100%; padding-right:0 !Important} .dateTimeWrap.wfull .term{width:100%;} .dateTimeWrap.wfull .term .dateinput_wrap.time{width:100%;} .dateTimeWrap.wfull .term .dateinput_wrap.time .dateinput{width:100%;} .dateTimeWrap.wfull .term .dateinput_wrap.time .dateinput input{width:100% !important;} .dateTimeWrap.wfull .btn_search{width:60px; position:absolute; right:0; top:2px;} .divW100 span.text input[type="text"], .schdiv2 span.text input[type="text"], .schdiv3 span.text input[type="text"], .schdiv4 span.text input[type="text"]{width:100% !important;} .select.schdiv2 input[type="text"]{width:100% !important;} .search_wrapper .dateinput input[type="text"]{width:100% !important;} .schdiv2.select select{width:100% !important;} .schdiv3 .select input[type="text"]{width:100% !important;} .schdiv3 .text select{width:100% !important;} .schdiv4 .text select{width:100% !important;} .schdiv2 .dateinput_wrap{width:100% !important;} .schdiv3 .dateinput_wrap{width:100% !important;} .schdiv4 .dateinput_wrap{width:100% !important;} .schdiv4 .timeFormatInput{width:100% !important;} .search_wrapper .dateinput input[type="text"]{width:100% !important;} .schdiv3 .select_area select{width:100% !important;} .schdiv4.noafter{} .schdiv4.select{} .dateTimeWrap{ padding-right:65px !important;} .dateTimeWrap .btn_search{width:60px; position:absolute; right:0; top:2px;} .dateTimeWrap .schdiv4.noafter{ width: calc( (100% - 160px) / 2 ); } .dateTimeWrap .schdiv4.select{ width: 75px !important; } .popmoschBox > div:nth-child(1), .popmoschBox > div:nth-child(3){width: 100% !important; height: 100px !important;} .popmoschBox > div:nth-child(1) select, .popmoschBox > div:nth-child(3) select{height: 100px !important;} .popmoschBox > div:nth-child(2){width:100% !important; text-align: center; height: auto !important; padding: 10px 0 !important;} .popmoschBox > div:nth-child(2) > div{display: inline-block; padding: 0 !important;} .popmoschBox > div:nth-child(2) > div:nth-of-type(1) button{transform: rotate(90deg);} .popmoschBox > div:nth-child(2) > div:nth-of-type(2) button{transform: rotate(90deg);} .popmoschBox > div:nth-child(2) > div:nth-of-type(3) button{transform: rotate(90deg);} .popmoschBox > div:nth-child(2) > div:nth-of-type(4) button{transform: rotate(90deg);} .tui-ico-time{width:auto !Important} .schdivBtn .select, .schdivBtn .select select, .schdivBtn .text{width : calc( 100% - 65px);} .schdivBtn .select select, .schdivBtn .text input[type="text"]{width:100% !important;} .schdiv2 .btn_search{width:60px; display: inline-block; height: 30px; padding: 0 12px; background: #015794; color: #fff; font-size: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.1); vertical-align: bottom; margin: 0px 0px; margin-left: 5px;} .schdivBtn .btn_search{width:60px; float:right; display: inline-block; height: 30px; padding: 0 12px; background: #015794; color: #fff; font-size: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.1); vertical-align: bottom; margin: 0px 0px; margin-left: 5px;} .search_wrapper .dateinput input[type="text"], .search_wrapper .dateinput input[type="date"]{width:100% !Important;} .search_wrapper .dateinput input[type="date"]::-webkit-inner-spin-button, .search_wrapper .dateinput input[type="date"]::-webkit-calendar-picker-indicator { opacity: 1; display: block; background: url(../images/icon_moDate.png) no-repeat -17px 0px; width: 12px; height: 12px; position: absolute; right: 10px; top: 10px; } span.tui-ico-date{width:12px !important;} .cctvpopC{ width:100% !important; height:264px !important; box-sizing: border-box;} #cctvUrl2 video, #cctvUrl2 img{width:100% !important; height:232px !important; min-width: unset !important; min-height: unset !important;} .contents .search_wrapper > div > strong.fixed{min-width:unset} .alarmBtn{} .alarmBtn .input_area{width : calc( 100% - 65px) !important; margin-left:0 !important;} .alarmBtn .input_area input[type="text"]{width:100% !important;} .alarmBtn .btn_search{width:60px; float:right;} .pcview2{display:none;} .con2mo{display: block; margin-left: 0;} #frmStandard .input_area, #frmStandard .select_area, #frmStandard textarea, #frmStandard .dateinput, #frmStandard input, #popFormAdd .input_area, #popFormAdd .select_area, #popFormAdd textarea, #popFormAdd .dateinput, #popFormAdd input {width: 100% !important;} #frmStandard .radio_input input {width: unset !important;} } @media all and (min-width:0px) and (max-width:700px) { .contents .search_wrapper > div > span.text > input[type=date], .contents .search_wrapper > div > span.text > input[type=time], .contents .search_wrapper > div > span.text > input[type=number], .contents .search_wrapper > div > span.text > input[type=text]{width:100%;} .popupBtn.aSchBtn{width:60px;} .search_box label{display:none} .cctvListH_wrap ul li div.txt{font-size: 13px; height: 30px; line-height: 30px; font-weight: 400;} } #cctvViewListPopWrap .popup_contents { padding: 0; border-top: none; } #viewCctvList {color: #fff; position: absolute; left: 10px; top: 10px;} .cctvClose{right: 10px !important; top: 10px !important; background: rgba(0,0,0,0.5) ; font-size: 0; padding: 8px; } @media all and (min-width:0px) and (max-width:700px) { .cctvpopC{height:auto !important;} #cctvUrl2 video, #cctvUrl2 img{width:auto !important; height:100% !important; max-width:unset !important; max-height:unset !important; min-width: unset !important; min-height: unset !important; } #cctvUrl2{background: #000;} #cctvUrl2 img{display: block; margin: 0 auto;} #realPopWrap, #photosPopWrap{transform:translate(-50%, -50%) rotate(90deg); width:unset !important;} .cctvClose2, #realPopWrap .popup_contents{background: transparent;} #actTg{display:none;} .finex3Check_box .b{margin: 0; height: 60px; } .finex3Check_box .s{font-size:12px; height: 18px;} .finex3Check_box:nth-child(1) .t, .finex3Check_box:nth-child(2) .t, .finex3Check_box:nth-child(3) .t, .finex3Check_box:nth-child(4) .t{background-size:35px;} .finex3Check_box{height:auto; pointer-events: none;} .cont.riskAssessment .chartBox_wrap{width: 100%;} } .portlet .title > span > a.more{display: inline-block;} @media all and (min-width:0px) and (max-width:999px) { /* 메인 대시보드 */ .acc_vehicle_check_box{width:50%; padding:15px 15px; height: 120px;} .acc_vehicle_check_box .t{font-size: 16px;} .acc_vehicle_check_box:nth-child(1) .t{background: url(../img/icon/ico_truck_LG.png) no-repeat right top / 40px 40px;} .acc_vehicle_check_box:nth-child(2) .t{background: url(../img/icon/ico_truck_LB.png) no-repeat right top / 40px 40px;} .acc_vehicle_check_box:nth-child(3) .t{background: url(../img/icon/ico_truck_LB.png) no-repeat right top / 40px 40px;} .acc_vehicle_check_box:nth-child(4) .t{background: url(../img/icon/ico_truck_LB.png) no-repeat right top / 40px 40px;} .acc_vehicle_check_box:last-child .t{background: url(../img/icon/ico_truck_B.png) no-repeat right top / 40px 40px;} .acc_vehicle_check_box .b{ margin: 0;} .acc_vehicle_check_box .b strong{font-size: 25px;} .finex3Check_box .t{font-size: 16px; height: 40px} .finex3Check_box .b{font-size: 18px; height: 40px;} .finex3Check_box .b strong{font-size: 25px;} .finex3Check_box{width:50%; padding:15px 15px;} .workerNum_wrap_r{width:100%; padding: 0; } .cont.workState{overflow:hidden;} .companyworker{overflow-y:auto; width:200px;} .chartWrap.workState{float:unset;} .workerNum {width: calc(100% - 200px);} .workerNum, .companyworker{height:170px;} .companyworker li strong{right:20px;} .workerNum_wrap_r{float:unset; height:228px;} .portlet .cont.sp_2{height: 195px;} ul.summary{height:235px; overflow:Hidden;} ul.summary > li { height: 170px; padding: 12px 0;} /* ul.summary.sp_1, ul.summary.sp_2, ul.summary.sp_3 {height: 195px;} */ ul.summary.sp_4{height: 388px;} ul.summary.sp_4 > li { width:calc( 100% / 2 ); } ul.summary.sp_4 > li > span{font-size: 12px; padding: 5px 10px;} ul.summary.sp_5 > li { width:calc( 100% / 3 ); } ul.summary.sp_6 > li { width:calc( 100% / 3 ); } ul.summary_m{height:388px; overflow:Hidden; overflow-y: auto;} ul.summary_m > li {height: 170px; padding: 12px 0;} ul.summary_m.sp_1, ul.summary_m.sp_2, ul.summary_m.sp_3 {height: 195px;} ul.summary_m.sp_4{height: 388px;} ul.summary_m.sp_4 > li { width:calc( 100% / 2 ); } ul.summary_m.sp_4 > li > span{font-size: 12px; padding: 5px 10px;} ul.summary_m.sp_5 > li { width:calc( 100% / 3 ); } ul.summary_m.sp_6 > li { width:calc( 100% / 3 ); } .entryStat_total{display: none;} .entryStat_wrap{display: block; overflow: hidden} .entryStat_wrap > div:nth-child(even){background: unset} .entryTable_wrap{height: 209px; overflow: hidden; overflow-x: auto} .entryTable .portlet_table tbody td{padding: 8px 5px;} .entryStat_wrap > div .t{height:40px;} .entryStat_wrap > div .num{font-size: 25px;} .entryStat_wrap > div:nth-of-type(1) {width:50%; padding:15px 15px; float: left; background: #f9fafc;} .entryStat_wrap > div:nth-of-type(2) {width:50%; padding:15px 15px; float: left; background: #f9fafc;} .entryStat_wrap > div:nth-of-type(3) {width:50%; padding:15px 15px; float: left;} .entryStat_wrap > div:nth-of-type(4) {width:50%; padding:15px 15px; float: left;} .entryStat_wrap > div:nth-of-type(5) {/*width:100%; padding:15px 15px; float: left;*/width:50%; padding:15px 15px; float: left; background: #f9fafc;} .entryStat_wrap > div:nth-of-type(6) {display: block; float: left; width:50%; padding:15px 15px; float: left; background: #f9fafc;} .entryStat_wrap > div .num{margin-top:10px;} .entryStat_wrap > div{height: 110px; display: block} .outputArea_wrap{display: block} .outputAreaTable_wrap{ height: 300px; overflow-x: auto} .outputArea_wrap > div{width: 33.33%; background: #fff !important; float: left; height: auto; padding: 15px; display: flex; flex-direction: row;} .outputArea_wrap > div:nth-of-type(4), .outputArea_wrap > div:nth-of-type(5) {width: 50%; background: #f9fafc !important;} .outputArea_wrap > div .num{margin: 0; font-size: 24px;} .outputArea_wrap > div .t{height: 50px;} .outputArea_wrap > div:nth-of-type(1) .t{background: url(../images/icon_entryStat_01.png) no-repeat right top / 30px auto; } .outputArea_wrap > div:nth-of-type(2) .t{background: url(../images/icon_entryStat_02.png) no-repeat right top / 30px auto; } .outputArea_wrap > div:nth-of-type(3) .t{background: url(../images/icon_entryStat_03.png) no-repeat right top / 30px auto; } .outputArea_wrap > div:nth-of-type(4) .t{background: url(../images/icon_entryStat_04.png) no-repeat right top / 30px auto; } .outputArea_wrap > div:nth-of-type(5) .t{background: url(../images/icon_entryStat_05.png) no-repeat right top / 30px auto; } .cont.disasterStatus{height: auto; display: block} .cont.disasterStatus .chart_wrap{width: 100%;} .saftyNotice .list li .text .t{font-size: 14px;} .saftyNotice .list li .text .conts{font-size: 14px; margin: 5px 0 8px;} .saftyNotice .list li .text .date{font-size: 12px;} .portlet .cont.mainFieldStat{height: 536px} .portlet .cont.deviceRegStat{height: 400px} .mainFieldSelect{justify-content: space-between} .portlet .cont.mainFieldStat #mainFieldMapWrapper{ height: calc( 100% - 80px); } .mainFieldSelect div{margin: 5px 0 0 0; width: 48%; display: flex; line-height: 35px;} .mainFieldSelect div select{ width: calc( 100% - 35px)} .deviceRegSelect{justify-content: space-between} .deviceRegSelect div{margin: 5px 0 0 0; width: 48%; display: flex; line-height: 35px;} .deviceRegSelect div input, .deviceRegSelect div select{ width: calc( 100% - 35px)} .cont.workAreaInfo{padding:0 15px 15px 15px !important;} .workAreaInfo_wrap{display: block; } .workAreaInfo_wrap > div{padding: 10px; height: 130px;} .workAreaInfo_wrap > div .num{font-size: 20px; margin-top: 50px;} .workAreaInfo_wrap > div .num span, .workAreaInfo_wrap > div .t{font-size: 13px;} .workAreaInfo_wrap > div:nth-of-type(1){width: 100%; height: 40px; line-height: 40px;} .workAreaInfo_wrap > div:nth-of-type(2), .workAreaInfo_wrap > div:nth-of-type(3), .workAreaInfo_wrap > div:nth-of-type(4){width: calc( (100% - 20px) / 3 ); float: left;} .workAreaInfo_wrap > div:nth-of-type(2) {background:rgba(0, 80, 170, 0.5) url("../images/icon_workArea_01.png") no-repeat left 10px top 20px ;} .workAreaInfo_wrap > div:nth-of-type(3) {background:rgba(0, 80, 170, 0.5) url("../images/icon_workArea_02.png") no-repeat left 10px top 20px ; margin: 0 10px;} .workAreaInfo_wrap > div:nth-of-type(4) {background:rgba(0, 80, 170, 0.5) url("../images/icon_workArea_03.png") no-repeat left 10px top 20px ;} .cont.mCustomScrollbar {height:235px;} .mScrollbar {height:235px !important;} .cont.cctv{padding-top:235px; height:480px;} .cont.cctv .cctvList {height: 79px; border-bottom:1px solid #ddd; position:absolute; bottom:0;} .cont.cctv .cctvList li{width:50%; box-sizing : border-box; float:left; border-bottom:1px solid #ddd; border-right:1px solid #ddd; border-top:none !Important} .cont.cctv .cctvList li:nth-child(2n+2){border-right:0;} .cont.cctv .cctvList li:last-child{border-bottom: none;} .cont.cctv .cctvView.ptz_none {width:100%;} .cont.cctv .cctvView { position: absolute; top: 0; width: 100%;} .cont.cctv .ptz{float:right;} .cont.cctv .cctvList{width: 100%;} .cont.saftyNotice{height:280px;} .saftyNotice .alert_list{width:100%; float:unset;} /*.cont.weatherInfo{height:360px; padding: 0 }*/ .weatherInfo ul li{width:50%;} .weatherInfo ul li:last-child{width:100%;} .weatherInfo ul li {height: 170px} .gasChart_wrap > div{width: 100%; } .portlet .title > span > a.more{display: none} .portlet .cont.fieldArea {height: auto !important;} .portlet .cont.outputArea {height: 536px !important;} .portlet .cont.outputArea.mainOutputArea {height: 659px !important;} .windchill-current {height: 77px} .cont.entryStat.entryTable{height: 600px;} }cont outputArea outputAreaTable @media all and (min-width:320px) and (max-width:500px) { .cont.weatherInfo{height: 390px;} .weatherInfo ul li .desc b, .weatherInfo ul li .desc.big > b{font-size: 16px;} .weatherInfo ul li .spec{font-size: 14px;} .outputArea_wrap > div{width: 50%;} .outputArea_wrap > div:nth-of-type(3), .outputArea_wrap > div:nth-of-type(4) { background: #f9fafc !important;} .outputArea_wrap > div:nth-of-type(5) {background: #fff !important; width: 100%;} } .cctvView_Control{ position: absolute; width:137px; height:197px; right:30px; bottom:30px; opacity:0.8; background: url(../images/popPtzimg.png); z-index:10; } .cctvView_Control .zoomBtn {margin-top:10px;} .cctvView_Control .zoomBtn div{width:42px; height:42px; border-radius: 50%; display: inline-block; text-indent: -9999px; cursor:pointer} .cctvView_Control .zoomBtn .zoomBtn_plus{margin-left:12px;} .cctvView_Control .zoomBtn .zoomBtn_minus{margin-left:27px;} .cctvView_Control .moveBtn{position: absolute; width: 100%; top:60px; bottom: 0;} .cctvView_Control .moveBtn div{position: absolute; text-indent: -9999px; cursor:pointer} .cctvView_Control .moveBtn .moveBtn_up{ left: 30px; top: 5px; width:15px; height: 0; border-top:40px solid transparent; border-left:30px solid transparent; border-right:30px solid transparent; border-radius:50% 50% 0 0; } .cctvView_Control .moveBtn .moveBtn_right{right: 0px; top: 30px; width: 0; height: 15px; border-right:40px solid transparent; border-top:30px solid transparent; border-bottom:30px solid transparent; border-radius:0 50% 50% 0; } .cctvView_Control .moveBtn .moveBtn_down{left: 30px; bottom: 0px; width:15px; height: 0; border-bottom:40px solid transparent; border-left:30px solid transparent; border-right:30px solid transparent; border-radius:0 0 50% 50% ; } .cctvView_Control .moveBtn .moveBtn_left{left: 0px; top: 30px; width: 0; height: 15px; border-left:40px solid transparent; border-top:30px solid transparent; border-bottom:30px solid transparent; border-radius:50% 0 0 50%; } .cctvClose2, .cctvClose{position:absolute; right:-30px; top:none; z-index:800;} .cctvSize_Control{position: absolute; right: 41px; top: 10px; font-size: 0;} .cctvSize_Control button{width: 35px; height: 30px; text-indent: -9999px; border: 0; display: inline-block} .cctvSize_Control .cctvSizeS{background:rgba(0,0,0,0.5) url(../images/icon_sizeS.png) no-repeat center;} .cctvSize_Control .cctvSizeM{background:rgba(0,0,0,0.5) url(../images/icon_sizeM.png) no-repeat center;} .cctvSize_Control .cctvSizeF{background:rgba(0,0,0,0.5) url(../images/icon_sizeF.png) no-repeat center;} @media all and (min-width:0px) and (max-width:1200px) { .cctvClose2, .cctvClose{position:absolute; right:0px; top:-50px; z-index:800;} .popup_dim{min-width:unset;} body{overflow:auto;} #wrap{height:auto;} #container.main{overflow-y: hidden} .snapShotBtn.cctvPlay{top: 50% !important;} li[data-mobile='M']{display: block} .m_marker_wrap{flex-direction: column;} .m_marker_wrap.marker_wrap #imgViewBox{padding: 20px; box-sizing: border-box;} .m_marker_wrap.marker_wrap #imgViewBox, .m_marker_wrap.marker_wrap .device_list{width: 100%; margin-top: 30px;} .mapMarker_wrap #imgViewBox, .mapMarker_wrap .device_list{width: 100% !important; margin-top: 30px;} .cont.riskAssessment .chartBox_wrap{height: 240px; margin-top: 10px;} .cont.riskAssessment{padding: 0 10px 15px 10px} } /*히트맵관제css*/ .hitmap_wrap{width:100%; max-height:1080px; background:url(../images/hitmapImg.png) no-repeat left top -50px / cover; position:relative;} /* 컬러 */ .hitcolor100{fill : rgb(255,87,75); opacity:0.100;} .hitcolor50{ fill : rgb(7,225,226); opacity:0.50;} #hitmap g text{letter-spacing:-0.05em;} .hitmap_wrap svg{margin-top:-50px;} /*search*/ .hitsearch_wrap {position: absolute; left: 10px; top:0; color: #fff; display: flex; align-items: center; background: rgba(255,255,255,0.7); box-shadow: 3px 3px 8px #222; padding: 10px; box-sizing: border-box;} .hitsearch_wrap .btn_wrap{border: 2px solid #6788e8; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow:hidden;} .hitsearch_wrap .btn_wrap button{text-align: center; padding: 12px 22px; background: #25314c; color: #7c8394; font-size: 14px; font-weight: 400; border:0;} .hitsearch_wrap .btn_wrap button.on{background: #6788e8; color: #fff; font-weight: 500;} .hitsearch_wrap .date_wrap{display: flex; display: none; background: #6788e8; border-radius: 8px; padding: 5px; position: relative; padding: 10px 15px; margin: 0 20px;} .hitsearch_wrap .date_wrap:before{content: ''; display: inline-block; border-top:5px solid transparent; border-left: 0px solid transparent; border-right: 8px solid #6788e8; border-bottom: 5px solid transparent; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);} .hitsearch_wrap .date_wrap input{border-radius: 3px; padding: 5px 10px; font-size: 16px; background:#fff;} .hitsearch_wrap > button{background: url(../images/ico_search.png) no-repeat left 20px top 12px / 20px auto, linear-gradient(90deg, #f47414, #fe9f18); color: #fff; font-size: 16px; font-weight: 500; padding:11px 20px 10px 50px; border-radius: 8px; text-align: right; display: none; border:0;} .hitsearch_wrap > .date_wrap > table > tbody > tr > td{position: relative;} .hitsearch_wrap > .date_wrap > table > tbody > tr > td:nth-child(1) > .tui-datepicker-input.tui-datetime-input.tui-has-focus:after{content: '~'; display: inline-block; margin: 0 20px; color: #fff; position: absolute; line-height: 33px;} .hitsearch_wrap > .date_wrap > table > tbody > tr > td:nth-child(2) > .tui-datepicker-input.tui-datetime-input.tui-has-focus{margin-left: 22px;} /*graph img*/ .graph_wrap{position: absolute; top: 35px; right: 35px; width: 100px;} .graph_wrap img{width: 100%;} /*table*/ .table_wrap{position: absolute; right: 35px; bottom: 35px; background: #fff;} .table_wrap > table{border: 1px solid #000; border-collapse: collapse; width: 300px; text-align: center;} .table_wrap > table tr, .table_wrap > table td{border: 1px solid #000; height: 25px;} .table_wrap > table > thead > tr > th{border-right: 1px solid #fff; font-weight: 500;} .table_wrap > table > thead > tr > th:last-child{border-right: none;} .table_wrap > table > thead > tr{background: #000; color: #fff;} .table_wrap > table > tbody > tr:nth-child(1) > td:nth-child(2), .table_wrap > table > tbody > tr:nth-child(1) > td:nth-child(3){position: relative;} .table_wrap > table > tbody > tr:nth-child(1) > td:nth-child(2):after, .table_wrap > table > tbody > tr:nth-child(1) > td:nth-child(3):after{content: ''; position: absolute; width: 10px; height: 1px; display: block; background: #000; top: 50%; left: 50%; transform: translate(-50%,-50%);} /*//히트맵관제css*/ .lineTabletd {overflow:Hidden; height:15px;} .lineTabletd > div{ display:inline-block; font-weight:500; position:relative;} .lineTabletd > div:after{content:""; display:inline-block; background:#999; margin:0 15px; width:1px; height:10px; vertical-align:middle;} .lineTabletd > div:last-child:after{ display:none;} .lineTabletd > div span{ font-weight:400; color:#666;} .popNewCCTV{width:1260px;} .hotcctv_wrap{ overflow:hidden; width:1220px; margin-top:20px;} .hotcctv_main{float:left; width: 680px; margin-left:25px;} .hotcctv_main img, .hotcctv_main iframe, .hotcctv_main video {width: 680px; height: 330px;} .hotcctv_main > p.txt{line-height:34px; text-align:center; font-size:16px; font-weight:400; background:#003051; color:#fff;} .hotcctv_thum{float:left; width:515px } .hotcctv_thum > div{width:250px; margin-bottom:15px; margin-right:15px; float:left;} .hotcctv_thum > div:nth-child(2n+1){margin-right:0;} .hotcctv_thum > div:nth-child(3), .hotcctv_thum > div:nth-child(4){margin-bottom:0;} .hotcctv_thum > div > p:nth-child(2){line-height:34px; text-align:center; font-size:16px; font-weight:400; background:#003051; color:#fff;} .hotcctv_thum > div > p{position:relative} .hotcctv_thum > div > p span{position:absolute; width:24px; height:24px; line-height:24px; right:0; top:0; font-size:14px; font-weight:500; text-align:center; background:orange; color:#fff;opacity:0.9;} .popTitle{font-size:16px; margin-bottom:10px; font-weight:500;} .cctvTable{ text-align:center; border-top:2px solid #015794; font-size:14px; width:100%;} .cctvTable thead th, .cctvTable tbody th{background: #eee; font-weight:500; padding:8px;vertical-align:middle;} .cctvTable tbody td{ padding:8px; border-bottom:1px solid #ddd;} .cctvTable tbody td > input[type=date], .cctvTable tbody td > input[type=time], .cctvTable tbody td > input[type=number], .cctvTable tbody td > input[type=text] { height:30px;line-height:30px; } .snapshotPop img, .snapshotPop iframe, .snapshotPop video {width: 900px; height: 600px;} ::-ms-reveal {display: none;} .webcam_wrap{} #loadingMessage{ line-height:200px; text-align:center;} /* 위치마커 */ .marker_wrap{display: flex; justify-content: space-between; } .marker_wrap #imgViewBox{width: 58%; overflow:hidden; background: #000; border-radius: 10px; position: relative; display: flex; align-items: center;} .marker_wrap #imgViewBox.noDrag .imgView{transform: none !important;} .marker_wrap #imgViewBox .imgView{position: relative} .marker_wrap .imgView{ } .marker_wrap .imgView img{width: 100%; height: 100%; } .makerBox{position: absolute; z-index: 11;} .makerBox .marker{position: absolute; width: 23px; height: 23px; background: url(../images/color_icon/icon_cctv.png) no-repeat center / cover; transform: translate(-50%, -50%); filter: brightness(0.6);cursor:pointer;} .makerBox .marker[data-role="CCTV"] { background: url(../images/color_icon/icon_cctv.png) no-repeat center / cover; } .makerBox .marker[data-role="고정형"] { background: url(../images/color_icon/icon_cctv.png) no-repeat center / cover; } .makerBox .marker[data-role="이동형"] { background: url(../images/color_icon/icon_cctv_yellow.png) no-repeat center / cover; } .makerBox .marker[data-role="12배줌"] { background: url(../images/color_icon/icon_cctv_green.png) no-repeat center / cover; } .makerBox .marker[data-role="32배줌"] { background: url(../images/color_icon/icon_cctv_blue.png) no-repeat center / cover; } .makerBox .marker[data-role="방송장비"] { background: url(../images/color_icon/icon_cctv_yellow.png) no-repeat center / cover; } .makerBox .marker[data-role="음성방송"] { background: url(../images/color_icon/icon_noise_green.png) no-repeat center / cover; } .makerBox .marker[data-role="기울기"] { background: url(../images/color_icon/icon_angle_green.png) no-repeat center / cover; } .makerBox .marker[data-role="GAS안전관리"] { background: url(../images/color_icon/icon_gas_blue.png) no-repeat center / cover; } .makerBox .marker[data-role="SmartILS"] { background: url(../images/color_icon/icon_open_green.png) no-repeat center / cover; } .makerBox .marker[data-role="소음관리"] { background: url(../images/color_icon/icon_noise_yellow.png) no-repeat center / cover; } .makerBox .marker[data-role="개폐관리"] { background: url(../images/color_icon/icon_open_green.png) no-repeat center / cover; } .makerBox .marker[data-role="위치관리"] { background: url(../images/color_icon/icon_beacon_blue.png) no-repeat center / cover; } .makerBox .marker[data-role="중장비안전"] { background: url(../images/color_icon/icon_equip_yellow.png) no-repeat center / cover; } .makerBox .marker[data-role="SafetyBall"] { background: url(../images/color_icon/icon_safety_green.png) no-repeat center / cover; } /*ils safety ball 중장비uwb? 차량출입관리 wearable*/ .makerBox .marker[data-role="중장비UWB"] { background: url(../images/color_icon/icon_equip_yellow.png) no-repeat center / cover; } .makerBox .marker[data-role="차량출입관리"] { background: url(../images/color_icon/icon_open_blue.png) no-repeat center / cover; } .makerBox .marker[data-role="Smart Wearable"] { background: url(../images/color_icon/icon_gas_yellow.png) no-repeat center / cover; } .makerBox .marker[data-role="풍향/풍속관리"] { background: url(../images/color_icon/icon_wind_blue.png) no-repeat center / cover; } .makerBox .marker[data-role="환기제어/전원감시"] { background: url(../images/color_icon/icon_vent_yellow.png) no-repeat center / cover; } .makerBox .marker[data-role="화재연기감지"] { background: url(../images/color_icon/icon_gas_yellow.png) no-repeat center / cover; } .makerBox .marker[data-role="작업구역관리"] { background: url(../images/color_icon/icon_beacon.png) no-repeat center / cover; } .makerBox .marker[data-role="크람쉘"] { background: url(../images/color_icon/icon_equip_green.png) no-repeat center / cover; } .makerBox .marker[data-role="미세먼지"] { background: url(../images/color_icon/icon_gas_green.png) no-repeat center / cover; } .makerBox .marker[data-role="이산화질소"] { background: url(../images/color_icon/icon_gas_blue.png) no-repeat center / cover; } .makerBox.on{} .makerBox .makerDel{width: 28px; height: 28px; background: url(../images/icon_makerDel.png) no-repeat center; position: absolute; top: -30px; right: -30px; text-indent: -9999px; padding: 0; border: 0; display: none} .makerBox .makerTxt{min-width: 60px; text-align: center; padding: 4px; background: #fff; color:#666;font-size: 13px; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); border-radius: 3px;white-space:nowrap;padding:0px 5px;letter-spacing:0px;opacity:0.9; display: none} .makerBox .makerTxt:before{content: ""; display: block; width: 10px; height: 10px; position: absolute; bottom: -5px; background: #fff; left: 50%; transform: rotate(45deg) translateX(-50%);z-index:-1;} .makerBox .nodragArea{width: 40px; height: 40px; background: #fff; position: absolute; top: -20px; left: -20px; z-index: 5; display: none} .makerBox.dragOn {z-index:15; } .makerBox.dragOn .marker{filter: brightness(1);} .makerBox.dragOn .makerTxt{display: block;} .makerBox.dragOn .makerDel{display: block;} .makerBox.dragOn .nodragArea{display: block;} .makerBox.dragOn .makerTxt { opacity:1;color:#111;font-weight:500; } .marker_wrap .device_list{ width: calc( (100% - 28px) - 58% ); padding:20px 20px; box-sizing: border-box; background: #fff; overflow:hidden; overflow-y: auto; border-radius: 10px;} .marker_wrap .device_list .tit{font-size: 20px;line-height:30px; font-weight: 600; margin-bottom: 0px;} .marker_wrap .device_list .tit button{width: 30px; height: 30px; margin-left: 5px; border: 0; text-indent: -9999px; background: url(../images/btn_depToggle.png) no-repeat center; filter: brightness(1) invert(1); } .marker_wrap .device_list .tit button.active{transform: rotate(180deg); } .marker_wrap .device_list .makerSelect{ margin-bottom: 0px; display: block;padding:10px 0px; } .marker_wrap .device_list .makerSelect + .tit { margin-top:30px; } .marker_wrap .device_list .makerSelect ul { display:block;font-size:0px;margin-left:-5px; } .marker_wrap .device_list .makerSelect li{display:inline-block;vertical-align:top;font-size: 15px; border: 1px solid #ddd; width: calc( 33.3333% - 5px );margin-left:5px; margin-bottom:5px;padding:10px; letter-spacing: -0.5px; box-sizing: border-box; color: #606060; background: #e6e8ec; border-radius: 5px; cursor: pointer; position: relative; box-shadow : 0px 0px 5px rgb(65 109 255 / 20%);height:80px;} .marker_wrap .device_list .makerSelect li > span { display:block;font-size:13px;color:#999; } .marker_wrap .device_list .makerSelect li.mapOn{border: 2px solid #4263d0; color: #303030; background: #e6e8ec url( ../images/icon_newMaker_off.png ) no-repeat right 10px center;} .marker_wrap .device_list .makerSelect li.mapOn.on{background: #4263d0 url( ../images/icon_newMaker_on.png ) no-repeat right 10px center; color: #fff;} .marker_wrap .device_list .makerSelect li.mapOn.on > span { color:#ccc; } .marker_wrap .device_list .makerSelect li.on{border: 2px solid #4263d0; box-sizing: border-box; z-index: 10;} .makerDel{position: absolute; z-index: 10; } /* 신규 cctv팝업 */ #cctvPopup2 {width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; z-index: 500; overflow: hidden; background: rgba(0,0,0,0.8); /*display: none;*/ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 500;} #cctvPopup2 .cctvPopup2_inner { position:relative; overflow:hidden; width:1280px; height:760px; border:1px solid #444; z-index:2; pointer-events:none; } #cctvPopup2.cctvFview .cctvPopup2_inner{width: 100%; height: 100vh;} #cctvPopup2 .cctvContentsBox{position: absolute; background: #000; overflow: hidden; font-size:0; margin-top: 60px} #cctvPopup2 .cctvContentsBox:before{content: ""; display: block; position: absolute; width: 64px; height: 64px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url(../images/videoLoading.gif) no-repeat center} #cctvPopup2.cctvFview .cctvContentsBox{width: 100%; height: calc(100% - 60px); text-align: center} .onoffControl{position: absolute; bottom: 40px; width: 100%; display: none; align-items: center; justify-content: space-between; padding: 0 50px; flex-direction: row-reverse; box-sizing: border-box} #cctvPopup2 iframe#cctvContents, #cctvPopup2 video#cctvContents, #cctvPopup2 img#cctvContents{min-width: 100%; min-height: 100%; width: 1280px ; height: 700px } #cctvPopup2 .cctv_controler2{width: 200px; height: 200px; background: url("../images/controler_web.png") no-repeat center / cover; position: relative; pointer-events:auto;} #cctvPopup2 .cctv_controler2 div{position: absolute; text-indent: -9999px; cursor:pointer;} #cctvPopup2 .cctv_controler2 .moveBtn_up{ left: 40px; top: 5px; width:60px; height: 0; border-top:55px solid transparent; border-left:30px solid transparent; border-right:30px solid transparent; border-radius:50% 50% 0 0; } #cctvPopup2 .cctv_controler2 .moveBtn_right{right: 0px; top: 40px; width: 0; height: 60px; border-right:55px solid transparent; border-top:30px solid transparent; border-bottom:30px solid transparent; border-radius:0 50% 50% 0; } #cctvPopup2 .cctv_controler2 .moveBtn_down{left: 40px; bottom: 0px; width:60px; height: 0; border-bottom:55px solid transparent; border-left:30px solid transparent; border-right:30px solid transparent; border-radius:0 0 50% 50% ; } #cctvPopup2 .cctv_controler2 .moveBtn_left{left: 0px; top: 40px; width: 0; height: 60px; border-left:55px solid transparent; border-top:30px solid transparent; border-bottom:30px solid transparent; border-radius:50% 0 0 50%; } #cctvPopup2 .cctv_zoom_controler2 {margin-top: 30px; pointer-events:auto;} #cctvPopup2 .cctv_zoom_controler2 .zoom_in{margin-bottom: 15px;} #cctvPopup2 .cctv_zoom_controler2 .zoom_in, #cctvPopup2 .cctv_zoom_controler2 .zoom_out{width: 70px; height: 70px;} #cctvPopup2 .cctv_zoom_controler2 .zoom_in img, #cctvPopup2 .cctv_zoom_controler2 .zoom_out img{width: 100%; cursor: pointer} #cctvPopup2 .cctv_controler2 img{width: 100%;} #cctvPopup2 .cctvPopup2_control{position: absolute; z-index: 501; background: rgba(0,0,0,0.8); width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 35px; color: #fff; height: 60px; box-sizing: border-box;} .cctvPopup2_tit{color: #fff; font-weight: 500; font-size: 28px;pointer-events:auto;} .cctvPopup2_control_btn{display: flex; align-items: center; pointer-events : auto} .cctvPopup2_control_btn .cctv_wrap_all{display: flex; align-items: center; position: relative;} .cctvPopup2_control_btn .cctv_wrap_all::after{content: ''; width: 2px; height: 24px; background: #606060; margin: 0 24px;} .cctvPopup2_control_btn .cctv_wrap_all.cctv_wrap1{margin-right: 20px;} .cctvPopup2_control_btn .cctv_wrap_all.cctv_wrap1::after{display: none} .cctvPopup2_control_btn button{text-indent: -99999px; padding: 0; border: 0} .cctvPopup2_control_btn .cctv_cap{display: block; width: 30px; height: 30px; background: url(../images/cap_web.png) no-repeat center center/contain; margin-right: 5px;} .cctv_wrap2 button{width: 32px; height: 24px; background-repeat: no-repeat; background-position: center center; background-size: contain; margin-right: 24px; background-color: transparent; border: 0} .cctv_wrap2 button.cctv_btnS{background-image: url(../images/small_pic_web.png);} .cctv_wrap2 button.cctv_btnM{background-image: url(../images/mid_pic_web.png);} .cctv_wrap2 button.cctv_btnF{background-image: url(../images/full_pic_web.png); margin-right: 0; opacity: 0.5;} .cctv_none{display: block; width: 24px; height: 24px; background: url(../images/none_web.png) no-repeat center center } .cctv_wrap1.cctv_wrap_all .cctv_cap{display: none;} /*toggle*/ .toggleSwitch .switch {position: relative; display: inline-block; width: 40px; height: 22px; background: transparent; transition: 0.4s; border-radius: 20px; border: 2px solid #ddd; opacity: 0.4;} .toggleSwitch span {display: inline-block; width: 50%; height: 22px; line-height: 22px; text-align: center; font-size: 10px; color: #ddd; position: absolute; top: 50%; transform: translateY(-50%);} .toggleSwitch span.ontxt{left: 0px;} .toggleSwitch span.offtxt{right: 2px;} .toggleSwitch .switch input {display: none; position: absolute; left: 0;} .toggleSwitch .switch .switchBtn {position: absolute; top: 50%; left: 3px; transform: translateY(-50%); width: 16px; height: 16px; background: #ddd; transition: 0.4s; border-radius: 15px; text-align: center;} .typeChange:checked + .switchBtn{left: 22px;} #cctvPopup2 .cctvPopup2_inner > .cctvPopup2_alert { display:none;position:absolute;bottom:50px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.5);color:#fff;font-size:16px;padding:5px 20px;border-radius: 20px; z-index:50;} @media all and (min-width: 1280px) { #cctvPopup2.cctvFview video#cctvContents, #cctvPopup2.cctvFview img#cctvContents { min-width: unset; min-height: 100%; width: auto; height: 100% } } @media all and (max-width: 1280px) { #cctvPopup2 .cctvPopup2_inner .cctv_controler2{width: 153px; height: 153px;} #cctvPopup2 .cctvPopup2_inner { width: 1280px; height: 100%; } #cctvPopup2 .cctvContentsBox { position: absolute; background: #000; overflow: hidden; width: 100%; height: 100%; display: flex; align-items: center;} #cctvPopup2 video#cctvContents, #cctvPopup2 img#cctvContents { min-width: unset; min-height: unset; width: 100% !important; height: auto !important } .cctvPopup2_control_btn .cctv_wrap2{display: none;} .cctv_wrap1.cctv_wrap_all .cctv_cap{display: block;} .cctvPopup2_control_btn .cctv_wrap_all.cctv_wrap1::after{display: block} } @media screen and (max-width: 500px){ #cctvPopup2 { background: rgba(0,0,0,1); } #cctvPopup2.cctvFview .cctvPopup2_inner {height: 100vw;} #cctvPopup2 .cctvPopup2_inner{transform: rotate(90deg); width: 100vh; height: 100vw; min-width: 100vh;} #cctvPopup2 .cctvContentsBox{width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;} #cctvPopup2 video#cctvContents{transform: rotate(90deg)} #cctvPopup2 video#cctvContents, #cctvPopup2 img#cctvContents{min-width: unset; min-height: unset;} #cctvPopup2 .cctv_zoom_controler2 .zoom_in, #cctvPopup2 .cctv_zoom_controler2 .zoom_out {width: 60px; height: 60px;} #cctvPopup2 .cctv_zoom_controler2 .zoom_in {margin-bottom: 15px;} #cctvPopup2 .cctvPopup2_inner .cctv_controler2 > div:hover, #cctvPopup2 .cctvPopup2_inner .cctv_controler2 > div:active, #cctvPopup2 .cctvPopup2_inner .cctv_controler2 > div:focus{background: transparent;} #cctvPopup2 .cctvPopup2_inner .cctv_controler2 > div{-webkit-tap-highlight-color: transparent;} #cctvPopup2 .cctv_controler2 .moveBtn_up{ left: 40px; top: 0px; width: 25px; height: 0; border-top: 40px solid transparent; border-left: 30px solid transparent; border-right: 30px solid transparent; border-radius: 50% 50% 0 0; } #cctvPopup2 .cctv_controler2 .moveBtn_right{ right: 0px; top: 35px; width: 0; height: 25px; border-right: 40px solid transparent; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-radius: 0 50% 50% 0; } #cctvPopup2 .cctv_controler2 .moveBtn_down{ left: 40px; bottom: 0px; width: 25px; height: 0; border-bottom: 40px solid transparent; border-left: 30px solid transparent; border-right: 30px solid transparent; border-radius: 0 0 50% 50%; } #cctvPopup2 .cctv_controler2 .moveBtn_left{ left: 0px; top: 35px; width: 0; height: 25px; border-left: 40px solid transparent; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-radius: 50% 0 0 50%; } } @media screen and (max-width: 425px){ #cctvPopup2 .cctvPopup2_control{height: 50px;} .cctvPopup2_tit{font-size: 25px;} .onoffControl{padding: 0 30px;} #cctvPopup2 .cctvPopup2_inner .cctv_controler2{width: 130px; height: 130px;} #cctvPopup2 .cctv_zoom_controler2 .zoom_in, #cctvPopup2 .cctv_zoom_controler2 .zoom_out{width: 50px; height: 50px;} .m_marker_wrap.marker_wrap .device_list .makerSelect li{font-size: 12px;} .m_marker_wrap.marker_wrap .marker_wrap .device_list .makerSelect li > span{font-size: 10px;} .snapShotBtn{width: 40px; height: 40px;} } @media screen and (max-width: 360px){ } /*22-06 근로자 조회 및 등록 추가*/ /*근로자 조회*/ #resultTbody {background: #fff;} #resultTbody .list_noData{display: block; text-align: center; line-height: 200px; height: 200px; font-size: 14px; color: #ccc;} #resultTbody .list_Data{display: flex; align-items: center; gap: 10px; padding: 5px 7px; border-bottom: 1px solid #ddd;} #resultTbody .list_Data:last-child{border-bottom: none;} #resultTbody .list_Data .rightTop{display: flex; align-items: baseline; gap: 7px; margin-bottom: 7px;} #resultTbody .list_Data .rightTop .workerNm{font-size: 18px; font-weight: 500;} #resultTbody .list_Data .rightTop .workerId{color: #888;} #resultTbody .list_Data .partnerNm, #resultTbody .list_Data .mobile{display: block; font-size: 14px;} #resultTbody .list_Data .partnerNm{margin-bottom: 2px;} #resultTbody .list_Data .listLeft{width: 90px; height: 100px; background-repeat: no-repeat; background-position: center center; background-size: contain;} /*근로자 등록*/ #saveForm input[type*="text"], #saveForm select{height: 40px;} #saveForm input[type*="text"]{background: #fff;} #saveForm .workerAdd_item{margin-bottom: 10px;} #saveForm .workerAdd_item label{display: inline-block; margin-bottom: 5px; font-size: 14px; font-weight: 500;} .workerAdd_item .rightsub{float: right;} .workerAdd_item .rightsub.mr10{margin-right: 10px;} .workerAdd_item .rightsub input[type="radio"]{margin-right: 3px;} .workerAdd_item_photo{position: relative;} .workerAdd_item_photo .item_thum{width: 150px; height: 160px; overflow: hidden;} .workerAdd_item_photo label{display: block; text-align: center; width: 150px; margin-bottom: 0 !important; padding: 7px 0; background: rgba(0,0,0,.6); color: #fff;} .workerAdd_item_btn{padding: 15px 0px 0px 0px; text-align: center;} .workerAdd_item_btn button{padding: 0 15px; width: auto; height: 34px; display: inline-block; text-align: center; font-size: 14px; border-radius: 26px;} .workerAdd_item_btn button#btnSave{color: #fff; background: #015794; cursor: pointer; border: 1px solid rgba(0,0,0,0.2);} .workerAdd_item_btn button#btnCancel{margin-left: 2px; color: #666; background: #ddd; cursor: pointer; border: 1px solid #ccc;} /* 그리드 색상추가, 페이징 셀렉트 추가 */ .contents_area{position: relative} td.colorOn{background: #e0edf7 !important;} .noPageSet .perPageSet{display: none;} .perPageSet{position: absolute; left: 0; bottom: 10px;} .perPageSet{width: 80px;} .perPageSet_ {position: absolute; left: 0; bottom: 10px;} .perPageSet_ {width: 80px;} @media all and (max-width: 1200px) { .tui-grid-container .tui-grid-pagination{text-align: right;} .tui-grid-container a, .tui-grid-container strong{text-align: center} .tui-pagination .tui-first+.tui-prev{border-left:1px solid #ccc !important;} .tui-pagination .tui-first, .tui-pagination .tui-last{display: none !important;} .tui-pagination .tui-next{margin-left: 0 !important; border-left: 0 !important;} .tui-pagination .tui-prev{margin-right: 0 !important; border-right: 0 !important;} } /* 지도위치등록 */ .mapMarker_wrap{display: flex; justify-content: space-between; } .mapMarker_wrap #imgViewBox{width: 58%; overflow:hidden; background: #000; border-radius: 10px; position: relative; display: flex; align-items: center;} .mapMarker_wrap #imgViewBox.noDrag .imgView{transform: none !important;} .mapMarker_wrap #imgViewBox .imgView{position: relative} .mapMarker_wrap #imgViewBox2{width: 100%; overflow:hidden; background: #000; border-radius: 10px; position: relative; display: flex; align-items: center;} .mapMarker_wrap #imgViewBox2.noDrag .imgView{transform: none !important;} .mapMarker_wrap #imgViewBox2 .imgView{position: relative} .mapMarker_wrap .makerBox2{z-index: 11;} .mapMarker_wrap .makerBox2 .marker{position: absolute; width: 23px; height: 23px; background: url(../images/icon_cctvMaker.png) no-repeat center / cover; transform: translate(-50%, -50%); filter: brightness(0.6);cursor:pointer;} .mapMarker_wrap .makerBox2 .marker[data-role="위치관리"] { background: url(../images/color_icon/icon_beacon_blue.png) no-repeat center / cover; } .mapMarker_wrap .makerBox2 .marker[data-role="방송장비"] { background: url(../images/icon_cctvMaker.png) no-repeat center / cover; } .mapMarker_wrap .makerBox2.on{} .mapMarker_wrap .makerBox2 .makerDel{width: 28px; height: 28px; background: url(../images/icon_makerDel.png) no-repeat center; position: absolute; top: -15px; right: -15px; text-indent: -9999px; padding: 0; border: 0; display: } .mapMarker_wrap .makerBox2 .makerTxt{ padding: 4px; background: #fff; color:#666;font-size: 13px; letter-spacing:0px;opacity:0.9; display:; text-align: center; } .mapMarker_wrap .makerBox2 .makerTxt:before{content: ""; display: block; width: 10px; height: 10px; position: absolute; bottom: -5px; background: #fff; left: 50%; transform: rotate(45deg) translateX(-50%);z-index:-1;} .mapMarker_wrap .makerBox2 .nodragArea{width: 40px; height: 40px; background: #fff; position: absolute; top: -20px; left: -20px; z-index: 5; display: none} .mapMarker_wrap .makerBox2.dragOn {z-index:15; } .mapMarker_wrap .makerBox2.dragOn .marker{filter: brightness(1);} .mapMarker_wrap .makerBox2.dragOn .makerTxt{display: block;} .mapMarker_wrap .makerBox2.dragOn .makerDel{display: block;} .mapMarker_wrap .makerBox2.dragOn .nodragArea{display: block;} .mapMarker_wrap .makerBox2.dragOn .makerTxt { opacity:1;color:#111;font-weight:500; } .mapMarker_wrap .device_list{ width: calc( (100% - 28px) - 58% ); padding:20px 20px; box-sizing: border-box; background: #fff; overflow:hidden; overflow-y: auto; border-radius: 10px;} .mapMarker_wrap .device_list .tit{font-size: 20px;line-height:30px; font-weight: 600; margin-bottom: 0px;} .mapMarker_wrap .device_list .tit button{width: 30px; height: 30px; margin-left: 5px; border: 0; text-indent: -9999px; background: url(../images/btn_depToggle.png) no-repeat center; filter: brightness(1) invert(1); } .mapMarker_wrap .device_list .tit button.active{transform: rotate(180deg); } .mapMarker_wrap .device_list .makerSelect{ margin-bottom: 0px; display: block;padding:10px 0px; } .mapMarker_wrap .device_list .makerSelect + .tit { margin-top:30px; } .mapMarker_wrap .device_list .makerSelect ul { display:block;font-size:0px;margin-left:-5px; } .mapMarker_wrap .device_list .makerSelect li{display:inline-block;vertical-align:top;font-size: 15px; border: 1px solid #ddd; width: calc( 33.3333% - 5px );margin-left:5px; margin-bottom:5px;padding:10px; letter-spacing: -0.5px; box-sizing: border-box; color: #606060; background: #e6e8ec; border-radius: 5px; cursor: pointer; position: relative; box-shadow : 0px 0px 5px rgb(65 109 255 / 20%);height:80px;} .mapMarker_wrap .device_list .makerSelect li > span { display:block;font-size:13px;color:#999; } .mapMarker_wrap .device_list .makerSelect li.mapOn{border: 2px solid #4263d0; color: #303030; background: #e6e8ec url( ../images/icon_newMaker_off.png ) no-repeat right 10px center;} .mapMarker_wrap .device_list .makerSelect li.active{border: 2px solid #4263d0; background: #4263d0 url( ../images/icon_newMaker_on.png ) no-repeat right 10px center; color: #fff; border: 2px solid #4263d0; box-sizing: border-box; z-index: 10;} .mapMarker_wrap .device_list .makerSelect li.on{border: 2px solid #4263d0; box-sizing: border-box; z-index: 10;} .mapMarker_wrap .device_list .makerSelect li.active > span { color:#ccc; } .mapMarker_wrap .makerDel{position: absolute; z-index: 10; } .markerImg > img{width: 30px !important; height: auto !important; filter: brightness(0.6);} .markerImg[aria-controls="on"] img{filter: brightness(1);} /* 자동로그인 */ .autoLogin{color: #acb3c2; font-size: 16px; font-weight: 500} .toggleInputN {position: relative; display: inline-block; width:36px; height: 12px; border-radius: 6px; background: #edf0f9; margin: 3px 0 0 3px} .toggleInputN input {opacity:0; width:0; height:0;} .toggleInputN span{position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #edf0f9; border-radius: 6px;} .toggleInputN span:before {border-radius: 50%; position: absolute; content: ""; height: 20px; width: 20px; left:0px; top: 50%; transform: translateY(-50%) translateX(-4px); background: #fff; box-shadow: 3px 0 10px rgba(73, 75, 83, 0.3); transition: all 0.5s;} .toggleInputN .slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: all .4s; -webkit-transition: all .4s; } .toggleInputN .slider:before {position: absolute; content: ""; height: 22px; width: 22px; left:4px; bottom: 4px; background-color: white; transition: all .4s; -webkit-transition: all .4s;} .toggleInputN input[type="checkbox"]:checked + .slider { background-color: #015794;} .toggleInputN input[type="checkbox"]:focus + .slider {box-shadow: 0 0 0px #015794;} .toggleInputN input[type="checkbox"]:checked + .slider:before {-webkit-transform: translateY(-50%) translateX(12px); -ms-transform: translateY(-50%) translateX(12px); transform: translateY(-50%) translateX(12px); transition: all .4s; -webkit-transition: all .4s;} .snapShotBtn{content: ""; display: none; width: 60px; height: 60px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background:rgba(0,0,0,0.5) url("../images/icon_snapShotPlay.png") no-repeat center / cover; text-indent: -9999px; border-radius: 50%; cursor: pointer} .snapShotBtn.on{display: block} .snapShotBtn.changeCctvPlay{margin-top: 20px;} .snapShotBtn.cctvPlay, .snapShotBtn.hoistcctvPlay{top: calc( 50% - 35px) } #cctvStatus .cctvView{ min-height: 250px; background: #2c2828} @media (orientation: landscape) { /* 가로모드일 때 적용할 CSS */ } @media (orientation: portrait) { /* 세로모드일 때 적용할 CSS */ } @media all and (min-width:1000px) and (max-width:1400px) { .grid{margin-left: -15px} .portlet {float: none; width: calc( (100% - 60px) / 2); margin-left: 15px; } .portlet .cont{height: 235px;} .entryStat_wrap > div{padding: 15px} .entryStat_wrap > div .t{padding-top: 50px; } .entryStat_wrap > div .num{font-size: 30px; font-weight: 700; color: #333; margin: 55px 0 0;} .entryStat_wrap > div:nth-of-type(1) .t{background: url(../images/icon_entryStat_01.png) no-repeat left top; } .entryStat_wrap > div:nth-of-type(2) .t{background: url(../images/icon_entryStat_02.png) no-repeat left top; } .entryStat_wrap > div:nth-of-type(3) .t{background: url(../images/icon_entryStat_03.png) no-repeat left top; } .entryStat_wrap > div:nth-of-type(4) .t{background: url(../images/icon_entryStat_04.png) no-repeat left top; } .entryStat_wrap > div:nth-of-type(5) .t{background: url(../images/icon_entryStat_05.png) no-repeat left top; } .entryStat_wrap > div:nth-of-type(6) .t{background: url(../images/icon_entryStat_06.png) no-repeat left top; } .outputArea_wrap > div .num{font-size: 16px; margin: 55px 0 0;} .outputArea_wrap > div .num span{margin-left: 0; font-size: 13px;} .finex3Check_box{padding: 15px 8px;} .finex3Check_box .t{padding-top: 60px; font-size: 18px;} .finex3Check_box .b{font-size: 22px; color: #333; margin: 20px 0 5px;} .finex3Check_box .b strong{font-size: 30px; font-weight: 700;} .finex3Check_box .s{font-size: 12px; color: #999;} .finex3Check_box:nth-child(1) .t{background: url(../images/icon_3finex_01.png) no-repeat left top / 40px 40px;} .finex3Check_box:nth-child(2) .t{background: url(../images/icon_3finex_02.png) no-repeat left top / 40px 40px;} .finex3Check_box:nth-child(3) .t{background: url(../images/icon_3finex_03.png) no-repeat left top / 40px 40px;} .finex3Check_box:nth-child(4) .t{background: url(../images/icon_3finex_04.png) no-repeat left top / 40px 40px;} .acc_vehicle_check_box{padding: 15px;} .acc_vehicle_check_box .t{padding-top: 60px;} .acc_vehicle_check_box .b{margin-top: 35px} .acc_vehicle_check_box .b strong{font-size: 30px; font-weight: 700;} .acc_vehicle_check_box:nth-child(1) .t{background: url(../img/icon/ico_truck_LG.png) no-repeat left top / 40px auto;} .acc_vehicle_check_box:nth-child(2) .t{background: url(../img/icon/ico_truck_LB.png) no-repeat left top / 40px auto;} .acc_vehicle_check_box:nth-child(3) .t{background: url(../img/icon/ico_truck_LB.png) no-repeat left top / 40px auto;} .acc_vehicle_check_box:nth-child(4) .t{background: url(../img/icon/ico_truck_LB.png) no-repeat left top / 40px auto;} .acc_vehicle_check_box:last-child .t{background: url(../img/icon/ico_truck_B.png) no-repeat left top / 40px auto;} .cont.safeBudget { height:536px; } .cont.fieldArea { height:235px; } .cont.covidInfo, .cont.weatherInfo, .cont.saftyNotice{height: 235px;} .cont.broadCast, .cont.mainVideo, .cont.riskAssessment{height: 536px} .broadCastStatus .snapShotBtn{top: 50%;} .cont.workAreaInfo{padding:0 15px 15px 15px} .workAreaInfo_wrap > div{height: 170px;} .workAreaInfo_wrap{display: block; } .workAreaInfo_wrap > div:nth-of-type(1){width: 100%; height: 40px; line-height: 40px;} .workAreaInfo_wrap > div:nth-of-type(2), .workAreaInfo_wrap > div:nth-of-type(3), .workAreaInfo_wrap > div:nth-of-type(4){width: calc( (100% - 20px) / 3 ); float: left;} .workAreaInfo_wrap > div:nth-of-type(3){margin: 0 10px;} .weatherInfo ul{padding: 0;} .weatherInfo ul, .weatherInfo ul li:nth-child(1){border-right: 0} .weatherInfo ul li:nth-child(2){border-left: 1px solid #eee} .weatherInfo ul li {padding: 0; } .topInfo_wrap .topInfo_member .portletSet{display: none;} .weatherInfo ul li .desc{line-height: 25px;} .weatherInfo ul li.dlrow > dl.rows{padding: 0 10px;} .weatherInfo ul li .spec, .weatherInfo ul li .desc, .weatherInfo ul li .desc b, .weatherInfo ul li.dlrow > dl.rows > dd > p > b, .weatherInfo ul li.dlrow > dl.rows > dd > span{font-size: 14px;} .weatherInfo ul li.dlrow > dl.rows > dd > img{width: 17px;} .weatherInfo ul li.dlrow > dl.rows > dd{padding-left: 25px} .weatherInfo ul li .desc.big > b{font-size: 20px} .workAreaInfo_wrap > div{padding: 20px 10px;} .workAreaInfo_wrap > div .num{font-size: 25px;} .workAreaInfo_wrap > div .t{font-size: 16px;} .topInfo_wrap .topInfo_sch div select{width: 120px;} .cont.broadCast{height: 536px !important; display: block !important; overflow: hidden} .cont.broadCast .movie_wrap{width: 100% !important; height: 286px !important; overflow: hidden; padding-bottom: 0px; box-sizing: border-box; text-align: center} .cont.broadCast .movie_wrap img{height: 100% !important; width: auto !important;} .snapShotBtn.cctvPlay{top: 50%;} .cont.broadCast .control_wrap{width: 100% !important; box-sizing: border-box; height: 250px; display: flex; flex-wrap: wrap; justify-content: space-between} .cont.broadCast .control_wrap div{width: 49%;} .cont.broadCast .control_wrap div.btnWrap{width: 100%;} .cont.broadCast .control_wrap div + div{margin-top: 0;} .cont.broadCast .control_wrap textarea{height: 50px} /*.cont.mainVideo .videoArea{height: ;}*/ .cont.mainVideo .videoArea video, .cont.mainVideo .videoArea img{height: auto !important;} .workerNum .n div{display: flex; margin: 5px 0; font-size: 15px; justify-content: space-between; padding: 0 15px;} .portlet .title h2 > span{font-size: 12px;} .deviceRegSelect div select, .deviceRegSelect div input{width: 155px;} } @media all and (min-width:1000px) and (max-width:1600px) { .topInfo_wrap .topInfo_sch .time{display: none} .topInfo_wrap .topInfo_sch div:nth-of-type(3) select { width:250px; } } @media all and (min-width:1400px) and (max-width:1700px) { .cont.broadCast.row1 .movie_wrap{width: calc(100% - 300px); } .cont.broadCast.row1 .control_wrap{width:300px;} .outputArea_wrap > div .t{font-size: 15px;} .outputArea_wrap > div .num{font-size: 26px; } } @media all and (max-width:1700px) { .outputArea_wrap > div{padding: 15px 15px;} .outputArea_wrap > div .t{padding-right: 0px; padding-top: 50px; box-sizing: border-box; font-size: 14px;} .outputArea_wrap > div .num2{margin-top: 0px; font-size: 18px;} .outputArea_wrap > div:nth-of-type(1) .t{background: url(../images/icon_entryStat_01.png) no-repeat left top; } .outputArea_wrap > div:nth-of-type(2) .t{background: url(../images/icon_entryStat_02.png) no-repeat left top; } .outputArea_wrap > div:nth-of-type(3) .t{background: url(../images/icon_entryStat_03.png) no-repeat left top; } .outputArea_wrap > div:nth-of-type(4) .t{background: url(../images/icon_entryStat_04.png) no-repeat left top; } .outputArea_wrap > div:nth-of-type(5) .t{background: url(../images/icon_entryStat_05.png) no-repeat left top; } .outputArea_wrap2 > div .t > span {font-size: 14px;} .outputArea_wrap2 > div .num2 > em {margin-top: 23px; font-size: 23px;} .outputArea_wrap2 > div:nth-of-type(1) .t{background-size: 30px 30px;} .outputArea_wrap2 > div:nth-of-type(2) .t{background-size: 30px 30px;} .outputArea_wrap2 > div:nth-of-type(3) .t{background-size: 30px 30px;} .outputArea_wrap2 > div:nth-of-type(4) .t{background-size: 30px 30px;} } /* 앱 */ .appWrap{height: calc( 100vh - 80px); position: relative} .app_log{ background: #dfdfdd; height: 50%; position: absolute; width: 100%; top: 15px; overflow-y: auto; padding: 15px; box-sizing: border-box} .app_log div{} .app_log div + div{margin-top:10px;} .app_log div.qr{color: #0b8f5f} .app_log div.em{color: #cd2222} .app_log div.bc{color: #3936bb} .app_btn_wrap{ position: absolute; top: calc( 50% + 30px); height: 50%; width: 100%;} .app_btn_wrap .appBtn{background: #fcfcfc; border-radius: 10px; box-shadow: 0 5px 12px rgba(0,0,0,0.1); height: calc( 50% / 3); padding: 15px; cursor:pointer; position: relative} .app_btn_wrap .appBtn + .appBtn{margin-top: 15px;} .app_btn_wrap .appBtn:nth-of-type(1){ background: #fcfcfc url(../images/app_icon_qrcode.png) right 15px center no-repeat; background-size: 40px auto;} .app_btn_wrap .appBtn:nth-of-type(2){ background: #fcfcfc url(../images/app_icon_em.png) right 15px center no-repeat; background-size: 40px auto;} .toggleInputA {position: absolute; right: 15px; top: 50%; transform: translateY(-50%); display: inline-block; width:55px; height: 24px; border-radius: 6px; background: #edf0f9; margin: 3px 0 0 3px; pointer-events: none} .toggleInputA input {opacity:0; width:0; height:0;} .toggleInputA span{position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #edf0f9; border-radius: 6px;} .toggleInputA span:before {border-radius: 50%; position: absolute; content: ""; height:26px; width: 26px; left:0px; top: 50%; transform: translateY(-50%) translateX(-18px); background: #fff; box-shadow: 3px 0 10px rgba(73, 75, 83, 0.3); transition: all 0.5s;} .toggleInputA .slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: all .4s; -webkit-transition: all .4s; } .toggleInputA .slider:before {position: absolute; content: ""; height: 26px; width: 26px; left:18px; bottom: 4px; background-color: white; transition: all .4s; -webkit-transition: all .4s;} .toggleInputA input[type="checkbox"]:checked + .slider { background-color: #015794;} .toggleInputA input[type="checkbox"]:focus + .slider {box-shadow: 0 0 0px #015794;} .toggleInputA input[type="checkbox"]:checked + .slider:before {-webkit-transform: translateY(-50%) translateX(12px); -ms-transform: translateY(-50%) translateX(12px); transform: translateY(-50%) translateX(12px); transition: all .4s; -webkit-transition: all .4s;} .toggleInputA span b{height: 24px; line-height: 24px; font-weight: normal; font-size: 11px; color: #747474; padding-left: 28px;} .toggleInputA input[type="checkbox"]:checked + .slider b{color: #fff; padding-left: 9px;} .app_btn_wrap .appBtn .t{font-weight: 500; color: #101010; font-size: 18px;} .app_btn_wrap .appBtn .d{color: #7a7a7d; font-size: 14px; margin-top: 5px;}