@charset "utf-8";
 
/* 리셋 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, select { margin: 0; padding: 0; border: 0; font-family: 'Noto Sans Korean',sans-serif; font-weight: 400;}
body {width:100%;height:100%;padding:0px;margin:0px;}
h1, h2, h3, h4, h5, h6 { font-weight: 400; font-size: inherit; }
button { margin: 0; padding: 0; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color:transparent; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-width: 0; background-color: transparent;}


.gb_wrap {width: 100%; height: 100%;}
.gb_header {position:fixed;width:100%; height:50px; background:#1E3169;}
.gb_header h1 {position:absolute; top:0px; left:50%; width:60%; transform: translateX(-50%); text-align: center; line-height:50px; font-size:18px; color:#fff;}
.gb_header .btn-header-right {position:absolute; top:50%; right:10px; width:28px; height:28px; margin-top:-16px; text-align: center; font-size:18px; color:#fff;}
.gb_header .btn-header-right button.gb-menu {width:28px; height:28px; background:#fff;}

/* PUSHBAR */
.pushbar_locked { overflow: hidden; -ms-touch-action: none; touch-action: none; }
.pushbar_locked .pushbar_main_content.pushbar_blur { filter: blur(15px); }
.pushbar_locked .pushbar_main_content.pushbar_push { margin-left: 200px; -ms-touch-action: none; touch-action: none; }
.pushbar_overlay { z-index: -999; position: fixed; top: 0; left: 0; width: 100%; max-width: 100%; height: 100%; min-height: 100vh; will-change: opacity; transition: opacity 0.5s ease; opacity: 0; will-change: opacity; background: #21252B; }
html.pushbar_locked .pushbar_overlay { opacity: 0.2; z-index: 9999; transition: opacity 0.5s ease; -ms-touch-action: none; touch-action: none; }

/* 사이드메뉴 */
/* .gb-side-nav {z-index: 10000; position: fixed; will-change: transform; transition: transform 0.5s ease; will-change: transform; background: #fff; top:55px; right:0; width:180px; height: 370px; transform: translateZ(0) translateX(100%);border-radius:10px 0px 0px 10px; letter-spacing:-0.05rem;} */
.gb-side-nav {z-index: 10000; position: fixed; will-change: transform; transition: transform 0.5s ease; will-change: transform; background: #fff; top:55px; right:0; width:180px; height: auto; transform: translateZ(0) translateX(100%);padding-bottom: 10px; border-radius:10px 0px 0px 10px; letter-spacing:-0.05rem;}
.gb-side-nav.opened { display: block; transform: translateX(0px) translateY(0px); box-shadow: 1px 0px 10px 0px rgba(0, 0, 0, 0.5); }
.gb-side-nav .gb-side-header { position: relative; width: 100%; height: 95px; border-bottom:1px solid #ccc;}
.gb-side-nav .gb-side-header ul.usermenu {position: absolute; top: 55px; right: 0px; width:100%; padding:0px 16px; line-height: 18px; list-style: none; text-align:right; font-size: 12px; color: #272727; box-sizing: border-box;}
.gb-side-nav .gb-side-header ul.usermenu li {display:inline-block;}
.gb-side-nav .gb-side-header ul.usermenu li a {text-decoration: none; color:#272727;}
.gb-side-nav .gb-side-header ul.usermenu li a.gb-logout {color:#1e3169; font-weight:500;}
.gb-side-nav .gb-side-header .usermenu li+li {margin-left:9px;}
.gb-side-nav .gb-side-header .usermenu li+li::before {content:''; display:inline-block; width:1px; height:11px; background: #ccc; margin-right:10px; vertical-align: middle;}
.gb-side-nav .gb-side-header p.username { position: absolute; top: 22px; right: 0px; width:100%; padding:0px 16px; line-height: 28px; text-align:right; font-size: 18px; color: #272727; box-sizing: border-box; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
.gb-side-nav .gb-side-header p.username i.ico-user {display:inline-block; width:18px; height:28px; margin-right:3px; background:url(../../images/app/ico_menu_user.png) no-repeat 50%; background-size: 100%; vertical-align: text-top;}
.gb-side-nav .gb-side-header p.username strong {font-weight: 700; }
.gb-side-nav ul.gb-side-menu {list-style: none;}
.gb-side-nav ul.gb-side-menu a { display: none; position:relative; width: 100%; height: 44px; padding:0px 14px 0px 36px; line-height: 44px; text-align:right; font-size: 14px; color: #272727; font-weight:500; text-decoration: none; box-sizing: border-box;}
/*.gb-side-nav ul.gb-side-menu a::before {content:''; display: block; position:absolute; top:50%; left:14px; width:18px; height:18px; margin-top:-9px;}
.gb-side-nav ul.gb-side-menu a.ico-list::before {background:url(../../images/app/ico_menu_list.png); background-size: cover;}
.gb-side-nav ul.gb-side-menu a.ico-list:active::before {background:url(../../images/app/ico_menu_list_on.png); background-size: cover;}
.gb-side-nav ul.gb-side-menu a.ico-alarm::before {background:url(../../images/app/ico_menu_alarm.png); background-size: cover;}
.gb-side-nav ul.gb-side-menu a.ico-alarm:active::before {background:url(../images/app/ico_menu_alarm_on.png); background-size: cover;}
.gb-side-nav ul.gb-side-menu a.ico-time::before {background:url(../../images/app/ico_menu_time.png); background-size: cover;}
.gb-side-nav ul.gb-side-menu a.ico-time:active::before {background:url(../images/app/ico_menu_time_on.png); background-size: cover;}
.gb-side-nav ul.gb-side-menu a.ico-info::before {background:url(../../images/app/ico_menu_info.png); background-size: cover;}
.gb-side-nav ul.gb-side-menu a.ico-info:active::before {background:url(../images/app/ico_menu_info_on.png); background-size: cover;}
.gb-side-nav ul.gb-side-menu a.ico-load::before {background:url(../../images/app/ico_menu_location.png); background-size: cover;}
.gb-side-nav ul.gb-side-menu a.ico-load:active::before {background:url(../images/app/ico_menu_location_on.png); background-size: cover;}
*/
.gb-side-nav ul.gb-side-menu a::before {position: absolute;font-family: 'Font Awesome 5 Free';top: 0;left: 10px; content: "";color:#79ace2;font-weight: 900;}
.gb-side-nav ul.gb-side-menu a:active::before {position: absolute;font-family: 'Font Awesome 5 Free';top: 0;left: 10px; content: "";color:#58afcc;font-weight: 900;}
.gb-side-nav ul.gb-side-menu a:hover {color:#588acc;backgroud:#eeeeee}
.gb-side-nav ul.gb-side-menu a.ico-home::before {content: "\f015";}
.gb-side-nav ul.gb-side-menu a.ico-list::before {content: "\f0c9";}
.gb-side-nav ul.gb-side-menu a.ico-alarm::before {content: "\f0f3";}
.gb-side-nav ul.gb-side-menu a.ico-time::before {content: "\f017";}
.gb-side-nav ul.gb-side-menu a.ico-info::before {content: "\f005";}
.gb-side-nav ul.gb-side-menu a.ico-marker::before {content: "\f3c5";}
.gb-side-nav ul.gb-side-menu a.ico-users::before {content: "\f0c0";}
.gb-side-nav ul.gb-side-menu a.ico-mrs::before {content: "\f6d1";}
.gb-side-nav ul.gb-side-menu a.ico-userplus::before {content: "\f234";}
.gb-side-nav ul.gb-side-menu a.ico-usercog::before {content: "\f509";}
.gb-side-nav ul.gb-side-menu a.ico-map::before {content: "\f279";}
.gb-side-nav ul.gb-side-menu a.ico-list:active::before {content: "\f0c9"}
.gb-side-nav ul.gb-side-menu a.ico-alarm:active::before {content: "\f0f3";}
.gb-side-nav ul.gb-side-menu a.ico-time:active::before {content: "\f017";}
.gb-side-nav ul.gb-side-menu a.ico-info:active::before {content: "\f005";}
.gb-side-nav ul.gb-side-menu a.ico-marker:active::before {content: "\f3c5";}
.gb-side-nav ul.gb-side-menu a.ico-users:active::before {content: "\f0c0";}
.gb-side-nav ul.gb-side-menu a.ico-mrs:active::before {content: "\f6d1";}
.gb-side-nav ul.gb-side-menu a.ico-userplus:active::before {content: "\f234";}
.gb-side-nav ul.gb-side-menu a.ico-usercog:active::before {content: "\f509";}
.gb-side-nav ul.gb-side-menu a.ico-map:active::before {content: "\f279";}

.gb-side-nav ul.gb-side-menu.admin_level_2 a::before
{position: absolute;font-family: 'Font Awesome 5 Free';top: 0;left: 10px; content: "";color:#a0d177;font-weight: 900;}


.gb-side-nav ul.gb-side-menu a:focus,.gb-side-nav ul.gb-side-menu a:active, gb-side-nav ul.gb-side-menu a:hover {background:#f3f3f3; color:#1e3169;}

.gb-side-nav ul.gb-side-menu a.isDisabled {
    cursor: not-allowed;
    opacity: 0.5;
    text-decoration: none;
    pointer-events:none;
}

.gb-side-nav ul.gb-side-menu a {
    cursor: pointer;
    opacity: 1;
    text-decoration: none;
    pointer-events:auto;
}
/* 모달 팝업 */
/* 모달 공통 */
.gb-modal { display: none; position: fixed; z-index: 10000; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); letter-spacing:-0.05rem;}
.gb-modal .gb-modal-layer { position: absolute; top: 50%; left: 50%; }
.gb-modal .gb-modal-close { position: absolute; top: 11px; right: 18px; width: 28px; height: 28px; background: url("../../images/app/btn_pop_close.png") no-repeat; background-size: cover; -webkit-background-size: cover; text-indent: -9999px; z-index:1;}
.gb-modal .gb-modal-layer .selected{z-index:1}
/* 관측정보 모달 */
.gb-pop-system { width:90%; height:460px; padding-top:50px; border-radius:10px; overflow:hidden;}
.gb-pop-system .gb-modal-header {position:absolute; top:0px; left:0px; width:100%; height:50px; background:#1E3169;}
.gb-pop-system .gb-modal-header h2.title {padding-left:18px; line-height:50px; font-size:18px; color:#fff; font-weight:700; }
.gb-pop-system .gb-modal-content {width:100%; height:100%; padding:12px; background:#e1e1eb; border-radius: 0px 0px 10px 10px; overflow-y: scroll; -webkit-overflow-scrolling:touch;  box-sizing:border-box;}
.gb-pop-system .gb-modal-content.selected {width:100%; height:100%; padding:12px; background:#e1e1eb; border-radius: 0px 0px 0px 0px; overflow-y: scroll; -webkit-overflow-scrolling:touch;  box-sizing:border-box;}

/* 관측소박스 */
.gb-pop-system .gb-modal-content .gb-observe-box {width:100%; height:auto; background:#fff; border-radius:10px; box-sizing:border-box;}
.gb-pop-system .gb-modal-content .gb-observe-box+.gb-observe-box {margin-top:10px;}
.gb-go-graph {width: 100%;height: 40px;cursor: pointer;background: #10a7ff;border-radius: 10px;box-sizing: border-box;line-height: 40px;margin-bottom: 13px;text-align: center;color: #fff;font-weight: 500;}
.gb-go-graph span {margin-right:5px;color: #fff;}
.gb-go-graph:hover{background: #1481e9;color:#fff}
.gb-go-graph:hover span{color:#fff}
.gb-go-graph:active {background: #005eb8 !important;color:#fff}
.level-container .observe-span {
    margin: 0 2px 0 0;
    font-size: 13px;
    font-weight: 450;
    text-align: center;
}
.level-container {
    display: flex;
    align-items: center;
    margin-left: 10px;
}
.lev-circle { margin-right: 2px; }
.lev1, .lev2, .lev3 {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.gb-observe-box .box-head {position:relative; width:100%; height:56px; padding:10px 120px 10px 14px; box-sizing:border-box;}
.gb-observe-box .box-head h3.observe-name {position:relative;width:100%;line-height:36px;font-size: 18px;color:#1E3169;font-weight:700;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;}
.gb-observe-box .box-head p.observe-date {position:absolute;top:15px;right:14px;width:100px;line-height:18px;text-align:right;font-size: 14px;color:#888;}
.gb-observe-box .box-head span.observe-location {display:inline-block;position:absolute;top:28px;right:14px;padding-left:12px;line-height:18px;text-align:right;font-size: 14px;font-weight:700;color:#272727;}
.gb-observe-box .box-head span.observe-location::before {display:inline-block; position:absolute; top:50%; left:0px; width:10px; height:12px; margin-top:-6px; vertical-align:middle; background:url(../../images/app/ico_pop_location.png); background-size: cover; content:'';}
.gb-observe-box .box-cont {position:relative; width:100%; height:auto; padding:0px 4px 10px; box-sizing: border-box;}
.gb-observe-box .box-cont ul.observe-icon-list {position:relative; width:100%; height:auto; list-style: none;}
.gb-observe-box .box-cont ul.observe-icon-list::after {display:block; clear:both; content:'';}
.gb-observe-box .box-cont ul.observe-icon-list li {float:left; width: 33%; height: 100%; margin-bottom: 10px; }
.gb-observe-box .box-cont ul.observe-icon-list .admin-list{ display: flex; align-items: center; width:100%; height:25px; line-height:25px; border-bottom:1px solid #eee; margin:1px 0;}
.gb-observe-box .box-cont ul.observe-icon-list .admin-list div{display:inline-block;font-size:14px;padding:0px 5px}
.gb-observe-box .box-cont ul.observe-icon-list .admin-list-label {color:#888;font-weight:700;width: calc(60% - 60px);text-align: right;}
.gb-observe-box .box-cont ul.observe-icon-list .admin-list-value {color:#272727;font-weight:700;width: 45%;text-align: center;background-color:#eee; border-radius:5px;}
.gb-observe-box .box-cont ul.observe-icon-list .admin-list-unit {color:#888;font-weight:700;text-align: left;width: 40px;}

.gb-observe-box .box-cont li.icon-list-box .observe-icon {width: 50px;height: 50px;margin:0 auto;}
.gb-observe-box .box-cont li.icon-list-box .m3l { margin: 0 auto; display: flex; align-items: center; justify-content: space-between; max-width: 60px; }
.gb-observe-box .box-cont li.icon-list-box .observe-icon img {width:100%;}
.gb-observe-box .box-cont li.icon-list-box p.observe-label {width:100%;line-height: 14px;font-size: 12px;color:#888;font-weight:700;text-align: center; margin-bottom: 3px; }
.gb-observe-box .box-cont li.icon-list-box p.observe-value {width:100%; font-size: 13px;color:#272727;font-weight:450;text-align: center; }

.gb-pop-system .gb-modal-content .privacy-cont {width:100%; height:100%; line-height: 1.6; text-align: left; font-size: 14px; color: #565656; }
.gb-pop-system .gb-modal-content .privacy-cont h4 { display: block; padding-top: 15px; padding-bottom: 5px; color: #21252B; font-size: 16px; }
.gb-pop-system .gb-modal-content .privacy-cont > p { display: block; padding-bottom: 5px; color: #666; }
.gb-pop-system .gb-modal-content .privacy-cont > p.out { padding-left: 0px; }
.gb-pop-system .gb-modal-content .privacy-cont > ol { padding-bottom: 5px; list-style: decimal; list-style-position: inside; color: #565656; }
.gb-pop-system .gb-modal-content .privacy-cont > ul { padding-bottom: 5px; list-style: disc; list-style-position: inside; color: #565656; }
.gb-pop-system .gb-modal-content .privacy-cont li { padding-bottom: 5px; }