@charset "utf-8";
@font-face {font-family:'Nanum Gothic';font-style:normal;font-weight:700;src: url(./font/NanumGothic-Bold.eot);src: url(./font/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),url(./font/NanumGothic-Bold.woff2) format('woff2'),url(./font/NanumGothic-Bold.woff) format('woff');}@font-face {font-family:'Nanum Gothic';font-style:normal;font-weight:400;src:url(./font/NanumGothic-Regular.eot);src:url(./font/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),url(./font/NanumGothic-Regular.woff2) format('woff2'),url(./font/NanumGothic-Regular.woff) format('woff');}@font-face {font-family:'NanumGothic';font-style:normal;font-weight:700;src:url(./font/NanumGothic-Bold.eot);src:url(./font/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),url(./font/NanumGothic-Bold.woff2) format('woff2'),url(./font/NanumGothic-Bold.woff) format('woff');}@font-face {font-family:'NanumGothic';font-style:normal;font-weight:400;src:url(./font/NanumGothic-Regular.eot);src:url(./font/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),url(./font/NanumGothic-Regular.woff2) format('woff2'),url(./font/NanumGothic-Regular.woff) format('woff');}

/* Reset */
*{-webkit-text-size-adjust:none;}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0;}
body,input,textarea,select,button,table,h1,h2,h3,h4,h5{font-family:Nanum Gothic,HelveticaNeue-Light,AppleSDGothicNeo-Light,sans-serif;font-size:12px;line-height:1.267em;}
body{*word-break:break-all;-ms-word-break:break-all;background:#7EBCDA;padding:45px 0 25px 0;}
img,fieldset,iframe{border:0 none;}
li{list-style:none;}
input,select,button{vertical-align:middle;}
img{vertical-align:middle;}
i,em,address{font-style:normal;}
label,button{cursor:pointer;}
button{margin:0;padding:0;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
button *{position:relative;}d
button img{left:-3px;*left:auto;}
html:first-child select{height:20px;padding-right:6px;}
option{padding-right:6px;}hr{display:none;}
legend{*width:0;}
table{border-collapse:collapse;border-spacing:0;}
.clear {display:block;height:0px;font-size:0px;font-size:0em;line-height:0px;content:'';zoom:1;overflow:hidden;clear:both;}

/* Layout */
#header {position:fixed;top:0;left:0;right:0;height:45px;background:#383E4B;z-index:9999;}
#header h1 {display:block;float:left;margin:0 0 0 70px;height:45px;font-size:16px;font-weight:bold;color:#fff;line-height:45px;}
#header h1 img {max-height:30px;}
#header h1 span {font-size:11px;color:#ccc;}
#header #top-info {display:block;float:right;}
#header #top-info a {display:block;padding:0 15px;height:45px;font-size:12px;color:#eee;line-height:45px;border-left:1px #555 solid;}
#header #top-info a:hover {background:#555;}
#header #top-loader {display:block;float:right;padding:0 30px;font-size:11px;color:#bbb;line-height:45px;}
#header #top-loader img {opacity:0.7;}
#header #nav-open {display:block;position:absolute;top:0;left:0;padding-top:7px;width:45px;height:38px;border-right:1px #555 solid;}
#header #nav-open span {display:block;margin:6px 12px 0 12px;height:0px;border-bottom:3px #777 solid;overflow:hidden;}
#header #top-btn {display:block;float:right;}
#header #top-btn a {display:block;float:right;padding:0 15px;height:45px;font-size:12px;color:#eee;line-height:45px;border-left:1px #555 solid;}
#header #top-btn a img {max-height:20px;}
#header #siren {display:block;width:0;height:0;overflow:0;}

#nav {display:block;position:absolute;width:220px;z-index:10;overflow:hidden;/*box-shadow:5px 0 6px #ddd;*/background:#1E8FC6;border-bottom:1px #147CAE solid;}
#nav h2 {display:block;height:30px;font-size:12px;font-weight:bold;color:#A8ACB6;line-height:30px;text-align:center;background:#383E4B;}
#nav ul {display:block;}
#nav ul li {display:block;position:relative;}
#nav ul li img {max-height:20px;margin-right:3px;}
#nav ul li a {display:block;padding:0 0 0 20px;height:32px;font-size:13px;font-weight:bold;color:#fff;line-height:32px;border-bottom:1px #147CAE solid;}
#nav ul li a:hover {background:#219FDD;}
#nav ul li span.arrow {display:block;position:absolute;top:8px;right:10px;font-size:14px;font-weight:bold;color:#fff;}
#nav ul li span.count {display:block;position:absolute;top:6px;right:10px;padding:0 6px;height:20px;font-size:13px;font-weight:bold;color:#fff;line-height:20px;background:#EE1414;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
#nav ul li b {display:block;padding:0 0 0 20px;height:32px;font-size:12px;font-weight:bold;color:#fff;line-height:32px;cursor:pointer;}
#nav > #nav-holder > ul > li > b {border-bottom:1px #147CAE solid;}
#nav ul li b span {display:block;float:right;margin:0 15px 0 0;}
#nav ul li ul {padding:3px 0;background:#36A9E1;}
#nav ul li ul li a {padding:0 0 0 38px;height:28px;line-height:28px;border:0px none;}
#nav ul li ul li b {display:block;padding:0 0 0 38px;height:28px;font-size:12px;font-weight:bold;color:#fff;line-height:28px;}
#nav ul li ul li span.arrow {top:6px;}
#nav ul li ul li ul {display:none;padding:3px 0;background:#36A9E1;}
#nav ul li ul li ul li a {padding:0 0 0 56px;height:28px;line-height:28px;border:0px none;}
#nav .curr {background:#62BAE5 !important;border-bottom:1px #219FDD solid;}
/*
#nav ul li ul li a {padding:6px 0 4px 40px;font-size:12px;color:#666;background:#E8EFF7;}
#nav ul li ul li ul li a {padding:6px 0 4px 55px;font-size:11px;color:#777;background:#F2F6FC;}
*/

#footer {position:fixed;bottom:0;left:0;right:0;height:25px;background:#5F7F93;border-top:1px #4A6D82 solid;z-index:9999;}
#footer #copyright {float:right;margin:0 20px 0 0;height:25px;font-size:12px;color:#eee;line-height:25px;}
#footer #custom {float:left;margin:0 0 0 20px;height:25px;font-size:12px;color:#eee;line-height:25px;}

#alarm-realtime {display:none;position:fixed;bottom:20px;right:10px;width:180px;min-height:120px;background:rgba(255,255,255,0.9) url(../images/icon_siren_s.png) 140px 10px no-repeat;border:3px #F65314 solid;box-shadow:2px 4px 6px #D45252;z-index:999;}
#alarm-realtime ul {display:block;padding:10px 0;}
#alarm-realtime ul li {display:block;padding:5px 5px 5px 15px;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;-ms-text-overflow:ellipsis;text-overflow:ellipsis;}
#alarm-realtime ul li a {font-weight:bold;color:#000;text-decoration:underline;}

#content {position:relative;margin:0 0 0 220px;min-width:1100px;background:#fff;}
#content.alarmon {
	background:#FFFFFF -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #FFFFFF), color-stop(51%, #FFFFFF), color-stop(51%, #FFFFFF), color-stop(100%, #F79797));
	background:#FFFFFF -webkidt-linear-gradient(top, #FFFFFF, #FFFFFF 60%, #A70505 100%);
	background:#FFFFFF -moz-linear-gradient(top, #FFFFFF, #FFFFFF 60%, #A70505 100%);
	background:#FFFFFF -ms-linear-gradient(top, #FFFFFF, #FFFFFF 60%, #A70505 100%);
	background:#FFFFFF -o-linear-gradient(top, #FFFFFF, #FFFFFF 60%, #A70505 100%);
	background:#FFFFFF linear-gradient(top, #FFFFFF, #FFFFFF 60%, #A70505 100%);
}
#content #content-holder {padding:20px 30px 25px 30px;}
#content h3 {display:block;margin:0 0 20px 0;padding:5px 0 5px 15px;width:120px;font-size:14px;font-weight:bold;color:#333;text-shadow:2px 2px 4px #ddd;border-left:8px #219FDD solid;box-shadow:0 2px 3px #ddd;background:#fff;}
#content h4 {display:block;margin:10px 0 5px 0;font-size:13px;font-weight:bold;color:#444;}
#content .content-item {position:relative;margin:10px 0 20px 0;}

/* box */
#content .box-holder {display:block;}
#content .box-holder h4 {display:block;margin:0 0 10px 0;font-family:Nanum Gothic;font-size:15px;font-weight:bold;text-align:left;}
#content .box {display:block;float:left;}

/* window */
.info-window {display:none;position:absolute;margin:5px 0 0 20px;padding:35px 15px 15px 15px;width:250px;font-size:12px;line-height:20px;box-shadow:0 4px 4px #888;background:rgba(255,255,255,0.95);border:2px #666 solid;}
.info-window h5 {display:block;margin:0 0 3px 0;padding:3px 0;font-family:Nanum Gothic;font-size:12px;font-weight:bold;text-align:center;background:#aaa;}
.info-window h6 {display:block;position:absolute;top:0;left:0;width:100%;padding:3px 0;font-family:Nanum Gothic;font-size:12px;font-weight:bold;color:#fff;text-align:center;background:#777;}
.info-window p {margin:0;padding:0 12px;}
.info-window img {max-height:17px;}
.info-window .btn_close {display:block;float:right;margin:0 8px 0 0;font-size:15px;font-weight:bold;color:#fff;}
.info-window table td {text-align:center !important;}
.info-icon {display:block;position:absolute;min-width:40px;text-align:center;z-index:99;}
.info-icon div {text-align:center;}
.info-icon div img {border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;overflow:hidden;}
.info-icon h5 {display:block;margin:0 auto 3px auto;padding:2px 4px;font-family:Nanum Gothic;font-size:11px;font-weight:bold;color:#111;background-color:rgba(255,255,255,0.8);/*letter-spacing:-1px;text-shadow:1px 1px 3px #222;*/}
/*.info-icon img {box-shadow:2px 2px 3px #666;}*/
.info-icon img {width:28px;}
.info-holder {display:block;position:absolute;top:120px;right:0;width:430px;height:auto;}
.info-holder h5 {display:block;margin:0 0 5px 0;font-family:Nanum Gothic;font-size:14px;font-weight:bold;color:#333;text-align:left;}
.info-holder table {width:400px !important;}

/* modal */
.modal-holder {display:block;position:absolute;top:180px;right:180px;width:260px;height:360px;z-index:999;border:1px #aaa solid;box-shadow:3px 3px 6px #bbb;background:#fafafa;}
.modal-holder h5 {display:block;margin:0 0 3px 0;padding:8px 0;font-family:Nanum Gothic;font-size:14px;font-weight:bold;color:#fff;text-align:center;background:#666;}
.modal-holder h5 span.modal-close {display:block;position:absolute;top:3px;right:8px;font-size:18px;font-weight:bold;color:#eee;cursor:pointer;}
.modal-holder ul {display:block;margin:15px;padding:0;}
.modal-holder ul li {display:block;padding:8px 0 6px 4px;font-size:12px;color:#444;line-height:18px;border-bottom:1px #dfdfdf solid;}
.modal-holder ul li span.title {display:inline-block;width:60px;font-weight:bold;}
.modal-holder input {padding-left:3px;height:20px;line-height:1.8em;background:#fff;border:1px solid #ced9de;vertical-align:middle;}
#modal {display:none;position:absolute;top:45px;left:50%;margin-left:-150px;padding:15px;width:300px;background:#fff;border:3px #EE1414 solid;border-top:0px none;z-index:9999;}

/* table */
table {width:100%;font-size:12px;border-collapse:collapse;background-color:#ffffff;}
table.list {border-left:1px #dbdbdb solid;box-shadow:3px 3px 8px #ccc;}
table.list th, table.list td {text-align:center;}
table.list thead {border:1px #A7C5DC solid;}
table.list th {padding:7px 0;color:#444;background-color:#D8EBFA;border-right:1px #A7C5DC solid;border-bottom:1px #A7C5DC solid;}
table.list td {padding:4px 0;font-size:12px;color:#545454;border-right:1px #dbdbdb solid;border-bottom:1px #dbdbdb solid;}
table.hover tr:hover td {background:#FBFADF;}
table.list td img {max-height:15px;}
table.list tr.total td {background:#DBEEF3;font-weight:bold;}
table.list td.sort {background:#FDE9D9;font-weight:bold;}
table.list td.al-l {text-align:left;padding-left:8px;}
/*table.list tr.total td {background:#F1DED8;font-weight:bold;color:#7C3E1C;}*/
table.form {border-top:1px #aaa solid;border-left:1px #aaa solid;box-shadow:3px 3px 6px #ddd;}
table.form th, table.form td {border-right:1px #aaa solid;border-bottom:1px #aaa solid;}
table.form th {color:#444;text-align:center;background-color:#D8EBFA;}
table.form td {padding:6px 4px 6px 8px;color:#545454;text-align:left;}
td span.red, td span.blue, td span.green, td span.yellow, td span.gray {display:inline-block;width:18px;height:18px;overflow:hidden;}
td span.red {background:url(../images/status_error.png) center no-repeat;}
td span.yellow {background:url(../images/status_warning.png) center no-repeat;}
td span.blue {background:url(../images/status_success.png) center no-repeat;}
td span.green {background:url(../images/status_success.png) center no-repeat;}
td span.gray {background:url(../images/status_non.png) center no-repeat;}

/* search form */
.search {margin:0 0 10px 0;font-size:12px;text-align:right;}
.form-input {padding-left:3px;height:20px;font-size:12px;line-height:20px;background:#fff;border:1px solid #ced9de;vertical-align:middle;}
.form-select {padding:2px 6px;font-size:12px;border:1px #ddd solid;}

/* button */
.btn-line {display:inline-block;padding:0 7px;height:22px;font-size:12px;color:#fff;line-height:22px;border:0;background:#444;text-decoration:none;cursor:pointer;}
.btn-line.delete {background:#ff3300;}
.btn-area {display:block;margin:10px 0;text-align:center;}
.btn-area .btn {display:inline-block;padding:5px 10px;margin:5px 0;font-family:Nanum Gothic;font-size:12px;font-weight:bold;color:#fff;line-height:1.5;text-align:center;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;cursor:pointer;}
.btn-area .btn-ss {display:inline-block;padding:2px 5px;font-size:12px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
.btn-area .btn-s {display:inline-block;padding:5px 10px;font-size:12px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
.btn-area .btn-m {display:inline-block;padding:6px 12px;font-size:14px;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;}
.btn-area .btn-l {display:inline-block;padding:10px 16px;font-size:18px;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;}
.btn-area .btn-submit {
	background-image:-webkit-gradient(linear, left top, left bottom, from(#428bca), to(#2d6ca2 ));
	background-image:-webkidt-linear-gradient(#428bca, #2d6ca2 );
	background-image:-moz-linear-gradient(#428bca, #2d6ca2 );
	background-image:-ms-linear-gradient(#428bca, #2d6ca2 );
	background-image:-o-linear-gradient(#428bca, #2d6ca2 );
	background-image:linear-gradient(#428bca, #2d6ca2 );
	border:0px none;
	/*border-color:#2b669a;*/
}
.btn-area .btn-info {
	background-image:-webkit-gradient(linear, left top, left bottom, from(#5bc0de ), to(#2aabd2 ));
	background-image:-webkidt-linear-gradient(#5bc0de , #2aabd2 );
	background-image:-moz-linear-gradient(#5bc0de , #2aabd2 );
	background-image:-ms-linear-gradient(#5bc0de , #2aabd2 );
	background-image:-o-linear-gradient(#5bc0de , #2aabd2 );
	background-image:linear-gradient(#5bc0de , #2aabd2 );
	border:0px none;
}
.btn-area .btn-cancel {
	background-image:-webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c12e2a ));
	background-image:-webkidt-linear-gradient(#d9534f, #c12e2a );
	background-image:-moz-linear-gradient(#d9534f, #c12e2a );
	background-image:-ms-linear-gradient(#d9534f, #c12e2a );
	background-image:-o-linear-gradient(#d9534f, #c12e2a );
	background-image:linear-gradient(#d9534f, #c12e2a );
	border:0px none;
}

/* pagelist */
.pagelist {padding:5px 0 10px 0;text-align:center;}
.pagelist a {font-size:12px;color:#666;}
/*
.pagelist {display:block;margin:15px 0;text-align:center;}
.pagelist a {display:inline-block;padding:0 5px;height:20px;font-size:12px;color:#444;line-height:20px;text-decoration:none;}
.pagelist a:hover {background:#f3f3f3;}
.AtStart, .AtEnd {display:inline-block;width:30px;height:20px;font-size:12px;line-height:20px;text-align:center;background:#fff;border-right:1px #c3c3c3 solid;border-bottom:1px #c3c3c3 solid;}
.Prev, .Next {display:inline-block;width:50px;height:20px;font-size:12px;line-height:20px;text-align:center;background:#fff;border-right:1px #ccc solid;border-bottom:1px #ccc solid;}
.this-page {display:inline-block;padding:0 5px;height:20px;font-size:13px;font-weight:bold;color:#ff6600;line-height:20px;background:#fff;border-right:1px #ccc solid;border-bottom:1px #ccc solid;}
*/

/* alarm */
#alarm {display:none;position:fixed;bottom:25px;left:0;right:0;height:35px;z-index:999;}
#alarm-btn {position:relative;margin:0 auto;width:180px;height:35px;font-size:14px;font-weight:bold;color:#fff;line-height:35px;text-align:center;background:#EE1414;border-radius:8px 8px 0 0;-moz-border-radius:8px 8px 0 0;-webkit-border-radius:8px 8px 0 0;cursor:pointer;z-index:999;}
#alarm-holder {padding:20px;height:272px;background:#fff;border-top:2px #EE1414 solid;overflow-y:scroll;overflow-x:hidden;/*box-shadow:0 -3px 6px #888;*/}

/* loading */
.ajax_loader {background: url("spinner_squares_circle.gif") no-repeat center center transparent;width:100%;height:100%;}

/* Page - login */
#login {position:absolute;top:50%;left:50%;margin:-200px 0 0 -150px;width:300px;text-align:center;}
#login h2 {display:block;margin:0 0 20px 0;font-size:15px;color:#444;}
#login h2 img {display:block;margin:0 auto 10px auto;}
#login-form {padding:40px 50px;min-height:100px;line-height:40px;background:#fff;border:3px #888 solid;border-radius:12px;-moz-border-radius:12px;-webkit-border-radius:12px;box-shadow:0 0 10px #444;}
#login-form label {display:block;float:left;width:60px;height:30px;font-size:13px;font-weight:bold;color:#444;line-height:30px;text-align:left;}
#login-form input {display:block;float:right;padding:0 10px;width:100px;height:26px;line-height:26px;background:#fafafa;border:2px #ccc solid;}
#login-form .btn-login {
	display:block;float:none;margin-top:10px;width:100%;height:40px;font-size:16px;font-weight:bold;color:#fff;line-height:40px;text-align:center;
	border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#428bca), to(#2d6ca2 ));
	background-image:-webkidt-linear-gradient(#428bca, #2d6ca2 );
	background-image:-moz-linear-gradient(#428bca, #2d6ca2 );
	background-image:-ms-linear-gradient(#428bca, #2d6ca2 );
	background-image:-o-linear-gradient(#428bca, #2d6ca2 );
	background-image:linear-gradient(#428bca, #2d6ca2 );
	border:0px none;
	cursor:pointer;
}
#login-form #login-caption {margin:20px 0 0 0;font-size:13px;line-height:20px;text-align:left;}

/* chart */
.chart {height:550px;}

/* Add */
#alarm-realtime {left:15px;right:auto;}
#alarm-realtime ul li {font-size:14px;font-weight:bold;color:#ff0000;}