@charset "utf-8";

@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-Regular-webfont.eot');
    src: url('../font/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Roboto-Regular-webfont.woff') format('woff'),
         url('../font/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../font/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-Bold-webfont.eot');
    src: url('../font/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Roboto-Bold-webfont.woff') format('woff'),
         url('../font/Roboto-Bold-webfont.ttf') format('truetype'),
         url('../font/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
    font-weight: bold;
    font-style: normal;}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;}


/* reset */
body, div,
h1, h2, h3, h4, h5, h6,
span, p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
summary, hgroup {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  -webkit-font-kerning: auto;
  -webkit-font-smoothing: antialiased;
  font-family:'Roboto', sans-serif;}


@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }


html {
  height: 100%;}

body {
  height: 100%;
  position: relative;
  background: #f5f5f5;
  overflow-x: hidden;}

span {
  vertical-align:middle}

table {
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom:20px;}

.full {
  min-width:inherit !important;
  min-height:100% !important;
  display:table;}

.full #section {
  padding-right:20px;}

a {
    text-decoration:none;
    color:inherit;}

a:active,
a:hover {
  outline: 0;}

img {
  border:0;}

/* input 공통 */

input {
  font-family:'Roboto', sans-serif;}

input[type="radio"] {
  vertical-align:middle;}

input[type="text"], input[type="number"], input[type="password"]{
  width:auto;
  min-height: 18px;
  padding:2px 2px 3px 8px;
  border-radius:3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-border-radius: 3px;
  outline: 0;
  border:1px solid #999;
  -moz-outline-style: none;
  margin-right:5px;}

input[type="checkbox"] {
  width:16px;
  height:16px;
  margin:0 6px 0 0;
  vertical-align:middle;}

input[readonly] {
  background:#ebebeb}

textarea {
  outline: 0;
  width: auto;
  height: 80px;
  font-size: 14px;
  font-family:'Roboto', sans-serif;
  border:1px solid #999;
  padding:6px 2px 2px 8px;
  border-radius:3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-border-radius: 3px;}


/* iframe */

#iframesite {
  width:100%;
  height:100%;}


/* Side menu */
.sideLeft, .sideRight {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: 250px;
  background: #FFF;
  color:#666;
  padding: 12px;}
.sideLeft {
  opacity: 0;
  -webkit-transform: translatex(-40px);
          transform: translatex(-40px);
  -webkit-transition: 0.33s;
  transition: 0.33s;
  border-right:1px solid #ccc;}
.sideRight {
  left: auto;
  right: 0;
  opacity: 0;
  -webkit-transition: 0.33s;
  transition: 0.33s;
  border-left:1px solid #ccc;}
nav { }
nav ul {
  padding: 0;
  list-style: none;}
nav ul li {
  position: relative;}
nav ul li a {
  color: #666;
  text-decoration: none;
  display: block;
  line-height: 1.5;
  font-size: 15px;
  margin:20px 0;
  padding-left:10px;
  overflow: hidden;
  white-space: nowrap;}
nav ul li a:hover {
  color: #0071bc;}
nav ul li a::before {
  content: attr(data-value);
  color: #666;
  float: left;
  width: 250px;
  margin-left: -250px;}
nav ul ul li {
  margin-left: 20px;}
nav ul li.current-menu a {
  border-left: 3px solid #0071bc;
  color:#0071bc;}

nav ul li.current-menu li a {
  border:none;
  color:#666;}

/* Toggle button */

#media_header {
  width: 100%;
  display: block;
  position:relative;
  height: 45px;
  z-index: 20;
  background-color: #fff;
  border-bottom:1px solid #999;}
#media_header a {
  width: 100%;
  text-align: center;
  z-index: 2;
  padding-top:12px;
  position: absolute;}
  #media_header a img {
    vertical-align: middle;}

.menuBtn {
  display: inline-block;
  color: #444a57;
  cursor: pointer;
  display: block;
  width: 45px;
  height: 45px;
  padding:12px;
  z-index: 10;
  -webkit-transition: 0.15s;
  transition: 0.15s;
  z-index: 10;
  position: absolute;}

.menuleft {
  left:0;}
.menuright {
  right:0px;}

/* Content handing */

#wrap {
  min-height: 100%;
  position: relative;
  z-index: 1;
  background: #f5f5f5;
  -webkit-transition: 0.33s cubic-bezier(0.7, 0.15, 0.36, 1);
  transition: 0.33s cubic-bezier(0.7, 0.15, 0.36, 1);}

#sideToggle1:checked ~ #wrap {
  -webkit-transform: translatex(250px);
          transform: translatex(250px);
  height: 100vh;
  position: fixed;
  overflow: hidden;}
#sideToggle2:checked ~ #wrap {
  -webkit-transform: translatex(-250px);
          transform: translatex(-250px);
  height: 100vh;
  position: fixed;
  overflow: hidden;}

#sideToggle1:checked ~ .sideLeft {
  opacity: 1;
  -webkit-transform: none;
          transform: none;}
#sideToggle1:checked ~ .sideRight {
  display: none;}
#sideToggle2:checked ~ .sideRight {
  opacity: 1;}

::-webkit-scrollbar {
    -webkit-appearance: none;}

::-webkit-scrollbar:vertical {
    width: 4px;}

::-webkit-scrollbar:horizontal {
    height: 4px;}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    border-radius: 10px;
    border: 2px solid transparent;}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent;}

#logo {
  display: none;}

#wrap {
  width:100%;
  height: 100%;
  clear:both;}

.autoscroll {
  overflow: auto;}

/* 분기 */
section {
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-bottom:40px;
  display:inline-block;
  margin:20px 0;}

#account {
  padding:15px 6px;
  overflow: hidden;}

#account div {
  float:left;
  width: 100%;
  margin:0}

#account span {
  font-size:12px;
  color:#666;}

#account p {
  font-size:15px;
  line-height:100%;}

#account a {
  color:#000;}

#account button {
  float: left;
  background-color:#fff;
  color:#666;
  border:1px solid #666;
  border-radius:3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-border-radius: 3px;
  margin-top:10px;

  padding:5px 10px;
  font-size:13px;
  cursor: pointer;
  font-family:'Roboto', sans-serif;}

/* remark box */

#remarkbox {
  width:300px; 
  border:1px; 
  border-color:#444444; 
  border-style:dotted;
  padding:4px 10px 4px 10px;
}

#remarkbox h5 {
  color:#666;}
  
#remarkbox p {
  font-size:12px;
  font-weight:normal;
  padding:4px;
  color:#666;}

/* command box */

#box {
  width:100%;
  min-height:80%;
  height:80vh;
  background:#fff;
  padding:10px 8px;}

#box h4 {
  color:#000;}

#box p {
  font-size:12px;
  margin:4px 0 10px 0;
  color:#666;}

.command li {
  font-size:14px;
  line-height: 2;
  padding:5px 0;}

.command li:before {
  content:">\00A0"}

.command li:hover {
  color:#0071bc;}

.command li:hover span {
  border-bottom:1px solid #0071bc}

.command li.red:hover {
  color:#F33;}

.command li.red:hover span {
  border-bottom:1px solid #F33}

.copyright {
  width: 100%;
  font-size:10px;
  text-align:center;
  color:#999;
  padding:8px 0;
  border-top:1px solid #CCC;
  position:absolute;
  bottom:0;
  left:0;}


/* content */

article {
  padding:20px;
  display:block;
  overflow-x:scroll;}

article h3 {
  font-size:16px;
  color:#333;
  padding:10px 0;}


/* data table */

.table_bt {
  margin-left:20px;} /* margin-left:164px 버튼에 적용*/


.data table {
  background:#FFF;}

.data table th {
  background:#1fa6d5;
  color:#fff;
  font-size:11px;
  font-weight:normal;}

.data table td {
  color:#000;
  font-size:11px;}

.data table a {
  color:#0071bc}

.data table a:hover {
  text-decoration:underline}

.data .table-02 td {
  padding:6px 0px 6px 10px;}

.th_red th {
  background-color:#ed0f39 !important}

/* table_basic */

table input {
  max-width: 100% !important}

.table_basic {
  width:100%;
  table-layout:fixed;
  word-break:break-all;
  font-size:11px;}

.table_basic th, .table_basic td {
  text-align:center;
  padding:6px 0;}

.table_basic td {
  border-bottom:1px solid #E8E8E8;}

.table_basic tr:hover {
  background:#fcfce1;}

.table_basic tr:last-child td {
  border:0;}

.table_basic .number {
  width:5%}
  
/* table_upload */

.table_upload {
  width:100%;
  table-layout:fixed;
  word-break:break-all;
  font-size:11px;}

.table_upload th, .table_upload td {
  text-align:center;
  border-right:1px solid #E8E8E8;
  border-bottom:1px solid #E8E8E8;}

/* table-02 */

.table-02 {
  width:100%;
  table-layout:fixed;
  word-break:break-all;}

.table-02 th {
  border-bottom:1px solid rgba(242,242,242,.5);
  text-align:center;
  width:15%;
  padding:6px 0;
  font-size:11px;}

.table-02 tr:last-child > th, .table-02 tr:last-child > td  {
  border-bottom:0;}

.table-02 td {
  border-bottom:1px solid #E8E8E8;
  padding:0 0 0 10px;
  font-size:11px;}

.table-02 td:hover {
  background:#fcfce1;}

/* sub head table */

.data .sub-th th {
  background: #e6f7ff;
  border-radius: 0px;
  color:#000;}


/* search */

.search {
  width:100%;
  overflow:hidden;
  padding:10px 0 8px 0;}

.search p {
  display:inline-block;
  float:left;
  padding:0;
  font-size:14px;
  font-weight:bold;
  line-height:28px}

.search input {
  position: relative;
  background: transparent;
  border:1px solid #999;
  outline: none;
  font-size: 14px;
  font-family:'Roboto', sans-serif;
  padding:2px;}

.searchbox {
  display:inline-block;
  border-bottom:1px solid #999;
  float:left;}
.searchbox input {
  position: relative;
  background: transparent;
  width: 160px;
  border: none !important;
  outline: none;
  font-size: 14px;
  font-family:'Roboto', sans-serif;
  padding:2px;}

.search-wrap {
  float:right;}
  
.search-wrap button {
  border: 0 !important;
  padding: 0 !important;
  margin:0 !important;
  width:32px;
  height:28px;
  cursor: pointer;
  background:none;}
  
  .search-upload {
  float:right;}
  
.search-upload button {
  margin:10px 10px 10px 0;
  padding:0 20px;
  height:30px;
  font-size:13px;
  font-family:'Roboto', sans-serif;
  border:0;
  background-color:#1fa6d5;
  color:#fff;
  border-radius:2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  -ms-border-radius: 2px;
  -webkit-border-radius: 2px;
  cursor:pointer;}


.search-option  {
	float:right;
}

.search-option label {
	font-size: 10px;
}

.search-option .srch-date {
	display: inline-block;
	margin-right:20px;
	float: left;
}
.search-option .srch-opt {
	display: inline-block;
	float:left;
}


.search-option input {
	background-color: white;
	position: relative;
  outline: none;
	width: 80px;
	border:1px solid #999;
  font-size: 12px;
  font-family:'Roboto', sans-serif;
  padding:2px;
	vertical-align: middle;
	margin-left: 3px;
}



.search-option button {
	line-height: 12px;
	padding: 0 20px;
	height: 24px;
	float:left;
	margin:0;
}

label.dateto {
	margin-left:4px
}

/* combo */

.combo {
  width:100%;
  overflow:hidden;
  padding:10px 0 8px 0;}

.combo p {
  display:inline-block;
  float:left;
  padding:0;
  font-size:14px;
  font-weight:bold;
  line-height:28px}

.combo-wrap {
  float:right;}

.combo-wrap span {
  float:left;
  font-size:15px;
  line-height:26px;
  padding:0 10px 0 0;}

.combobox {
  float:left;
  display:inline-block;
  padding: 0;
    margin: 0;
    width: auto;
  border-radius:3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-border-radius: 3px;
    overflow: hidden;
    background-color: #fff;
    background: #fff url("../images/arrowdown.gif") no-repeat 96% 50%;}


/* edit list */

.selectbox {
  display:inline-block;
  padding: 0;
  margin: 0;
  border: 1px solid #999;
  width: 210px;
  border-radius:3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-border-radius: 3px;
  overflow: hidden;
  background-color: #fff;
  background: #fff url("../images/arrowdown.gif") no-repeat 95% 50%;}


select {
  width: 120%;
  padding: 3px 8px;
  box-shadow: none;
  border:0;
  background-color: transparent;
   background-image: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;}

select:focus {
    outline: none;}


.attention {
  font-size:13px;
  color:#F30;}

.radio-label {
  font-size:13px;
  padding:0 8px 0 2px;}

.help {
  font-size:13px;
  padding:0 8px 0 4px;
  color:#333;}

.table-03 {
  width:100%;}

.table-03 th {
  font-size:10px;
  font-weight:normal;
  text-align:left;
  width:160px;
  padding:8px 10px 8px 0;
  border-bottom:1px solid #E5E5E5;
  vertical-align:top;}

.table-03 td {
  border-bottom:1px solid #e5e5e5;
  font-size:10px;
  vertical-align:middle;
  padding:8px 0;}

.list-form li label {
  display:inline-block;
  width: 100px;
  font-size:10px;
  vertical-align:top;}

.required:after {
  content:"\00A0*";
  color:#F33;}

.list-form li {
  padding:6px 0;
  font-size:10px;}


/* breadcrumbs */

.breadcrumbs {
  overflow:hidden;
  padding:0 0 20px 20px;}

.breadcrumbs li {
  float:left;
  font-size:13px;
  color:#666;}
.breadcrumbs li:before {
  content:"\00A0>\00A0"}
.breadcrumbs li:last-child {
  font-weight:bold;
  color:#000;}

.breadcrumbs li:first-child:before {
  content:""}


/* Status Icon */

.progate:before {
  content: url(../images/progate.png);
  vertical-align: middle;
  display:inline-block;
  padding:0 3px 0 0;}

.phone:before {
  content: url(../images/phone.png);
  vertical-align: middle;
  display:inline-block;
  padding:0 3px 0 0;}

.crossconnect:before {
  content: url(../images/crossconnect.png);
  vertical-align: middle;
  display:inline-block;
  padding:0 3px 0 0;}
  
.normal:before {
  content:url(../images/normal.png);
  vertical-align:middle;
  display:inline-block;
  padding:0 3px 0 0;}

.stopped:before {
  content:url(../images/stopped.png);
  vertical-align:middle;
  display:inline-block;
  padding:0 3px 0 0;}

.deleted:before {
  content:url(../images/deleted.png);
  vertical-align:middle;
  display:inline-block;
  padding:0 3px 0 0;}
.trial:before {
  content:url(../images/trial.png);
  vertical-align:middle;
  display:inline-block;
  padding:0 3px 0 0;}

/* button */

article button {
  margin:10px 10px 10px 0;
  padding:0 20px;
  height:30px;
  font-size:13px;
  font-family:'Roboto', sans-serif;
  border:0;
  background-color:#1fa6d5;
  color:#fff;
  border-radius:2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  -ms-border-radius: 2px;
  -webkit-border-radius: 2px;
  cursor:pointer;}

button.red {
  background-color:#F33}

/* pagination */

.pagination {
  text-align:center}

.pagination ul {
  list-style: none;
  display: inline-block;
  padding: 0;
  margin-top: 10px;}
  .pagination li {
    display: inline;
    text-align: center;}

.pagination img {
  vertical-align:middle}

.pagination .active {
  cursor: default;
  color:#224099;
  border:1px solid #0071bc;
  font-weight:bold;
  border-radius:3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-border-radius: 3px;}

.pagination a {
  float: left;
  display: block;
  font-size: 12px;
  text-decoration: none;
  padding: 2px 4px;
  margin:0 4px;
  color:#333;
  margin-left: -1px;
  border:1px solid transparent;
  line-height: 1.4;}

.pagination  a:hover {
  border:1px solid #999;
  border-radius:3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-border-radius: 3px;}

.pagination .active:hover {
  border:1px solid #0071bc;}

.pagination .prev:hover, .pagination .next:hover {
  border:1px solid #f5f5f5;}

/* login */

#loginbox {
	display: block;
  margin:0 auto;
  width:320px;
  height:540px;
  background:#fff;
  border-radius:3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-border-radius: 3px;
  border:1px solid #ccc;
  margin-top:80px;
  text-align:center;}

#loginbox p {
  font-size:13px;
  color:#808080;}

#loginbox img {
  display:inline-block;
  position:relative;
  margin-top:-30px;}

#loginform {
  margin:20px 30px;
  text-align:left;}

#loginform label {
  display:block;
  padding:5px 2px;
  font-size:13px;
  font-weight:bold}

#loginform input[type='text'], #loginform input[type='password'] {
  width:240px;
  padding:4px 8px;
  font-size:15px;
  margin-bottom:15px;}

#loginform button {
  font-family:'Roboto', sans-serif;
  width:100%;
  border:0;
  color:#fff;
  font-size:15px;
  font-weight:bold;
  background-color:#0071bc;
  padding:10px 0;
  margin-top:28px;
  border-radius:3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-border-radius: 3px;
  cursor:pointer;}

#loginform button:hover {
  background-color:#224099;}

#loginform .find {
    text-align: center;
}

#loginform .find a {
    display: inline-block;
    font-size: 14px;
    line-height: 1.2;
    border-bottom: 1px solid #999
}

#loginform .find a:first-child {
    margin-right: 10px
}

#captcha {
    margin: 0;
    padding: 0;
}

#loginform .change div {
    display: inline-block;
    text-align: center;
    width: 70px;
    margin: 0;
    padding: 6px 0;
    border: 1px solid #b3b3b3;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0px;
}

#loginform .change span {
    display: block;
    color: #000;
    font-size: 13px;
}

#loginform .change img {
    display: inline-block;
    margin-top:0px;
}

/* MAP */

#map-view-wrap {
  width:100%;
  height:50vh;
  display:block;
  position:relative;}

#map-view {
  width:95%;
  height:100%;
  margin:0 auto;
  margin-top:20px;}

#map-func {
  width:95%;
  height:auto;
  margin:0 auto;
  padding-top:10px}

#map-func>div {
  float:left}

#map-func img {
  vertical-align:middle}

#map-func span {
  font-size:13px;
  margin-right:10px;}

#map-func span.gray {
  color:#999;}

#map-func a {
  float:right;
  font-size:13px;
  color:#fff;
  background:#0071bc;
  padding:4px 10px;}


#map-side-wrap {
  display:block;
  overflow: hidden;
  width:95%;
  margin:0 auto;
  padding-top:20px;}

#map-side {
  width:100%;
  padding:20px;
  display: inline-block;
  background:#fff;
  top:80px;
  z-index:5;
  margin-bottom: 20px;}

#refresher {
  border-bottom:1px solid #ccc;
  overflow:hidden;
  padding:0 0 10px 0;
  margin-bottom:10px;}

#refresher span {
  font-size:13px;}

#map-side button, #map-full-side button {
  float:left;
  width:72px;
  display:inline-block;
  background:#007abc;
  padding:5px 10px;
  border:none;
  border-radius:3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-border-radius: 3px;
  color:#fff;
  font-size:13px;
  margin-right:15px;}


#map-side p, #map-full-side p {
  font-size:14px;
  line-height:28px;}

#map-side .selectbox {
  width:98%}

#map-side ul {
  margin:15px 0 0 0}

#map-side ul li {
  font-size:15px;
  font-weight:bold;
  padding:3px 0;}


#map-side ul li span {
  font-weight:normal;
  font-size:14px;
  margin-left:10px;
  line-height:18px;
  vertical-align:auto;}


/* MAP Full-screen */

#map-full-side button {
  width:90%;
  margin-bottom:10px;}

#map-full {
  width:100% !important;
  height:100vh !important;
  background:#9CF;}

#map-full-side {
  width:100% !important;
  position:relative;
  right:0;
  top:0;
  height:auto !important; /* modern Browser */
  background:#FFF;}

#map-full-side select {
  width:130%;}

#map-full-side .selectbox {
  width:90%;}

#map-full-side>div {
  padding:20px 10px 10px 15px;
  height:100%;}

#map-full-side ul li {
  font-size:15px;
  font-weight:bold;
  padding:3px 0;}

#map-full-side ul li span {
  font-weight:normal;
  font-size:14px;
  margin-left:10px;
  line-height:18px;
  vertical-align:auto;}


/* Setup */

.system-info {
  background:#087bb6;
  margin:10px;
  overflow:hidden;
  clear: both}

.system-info h3 {
  color:#fff;
  font-size:13px;
  padding:10px 0 2px 20px;}

.system-info table {
  background:#fff;
  width:100%;
  margin-bottom:0;
  word-break:break-all;}

.inner-box {
  border:6px solid #087bb6;}

.system-info table th {
  width:15%;
  font-size:12px;
  border-bottom:1px solid rgba(232,232,232,0.5);
  padding: 6px 2px;}

.system-info table td {
  font-size:12px;
  border-bottom:1px solid rgba(232,232,232,0.5);
  padding: 8px 2px;}

.system-info table tr:last-child th, .system-info table tr:last-child td{
  border-bottom:0;}

.system-info table button {
  margin:10px 10px 10px 0;
  padding:0 20px;
  height:30px;
  font-size:15px;
  font-family:'Roboto', sans-serif;
  border:0;
  background-color:#087bb6;
  color:#fff;
  border-radius:3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-border-radius: 3px;
  cursor:pointer}

.add-attrib h3 {
  float:left;}
.add-attrib>div {
  float:right;
  padding:0 0 6px 0;}

.add-attrib>div span {
  font-size:13px}

.add-attrib>div input {
  margin-right:10px}

.add-attrib>div button {
  padding:2px 20px;
  height:26px;
  margin-right:4px;}


.licenseInfo {
  min-width:200px;
  height:150px;}

/* meter gauge table */

table.meter {
  float:left;
  margin-right:20px;
  table-layout: fixed;
  width:100% !important;}

table.meter td {
  font-size:14px;
  padding:6px 4px;}
table.meter th {
  font-size:16px;
  background:#FFF;
  color:#000;
  padding:8px 0;
  border-top-left-radius:6px;
  -moz-border-top-left-radius: 6px;
  -o-border-top-left-radius: 6px;
  -ms-border-top-left-radius: 6px;
  -webkit-border-top-left-radius: 6px;
  border-top-right-radius:6px;
  -moz-border-top-right-radius: 6px;
  -o-border-top-right-radius: 6px;
  -ms-border-top-right-radius: 6px;
  -webkit-border-top-left-radius: 6px;
  border-bottom:1px solid #e8e8e8;}
table.meter td.meter-chart {
  width:300px;
  vertical-align:middle;}
table.meter td:last-child {
 text-align:left}
table.meter span {
  display:inline-block;
  padding:0 4px;}
table.meter div.bar {
  display:inline-block;
  background:#1fa6d5;}
table.meter td.center {
  text-align:center}
/* message page */

#msgbox {
  max-width:400px;
  margin:0 auto;
  overflow: hidden;
  padding-top:36px;
  text-align: center;}

#msgbox p {font-size: 14px; font-size: 1em; margin:10px 0;}
#msgbox button {
  margin:10px 0;
  padding:0 40px;
  height:30px;
  font-size:15px;
  font-family:'Roboto', sans-serif;
  border:0;
  background-color:#1fa6d5;
  color:#fff;
  border-radius:3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-border-radius: 3px;
  cursor:pointer}



/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* MEDIA QUERIES - DESKTOP *******************************************/



@media screen and (min-width: 1024px) {

* {
  box-sizing:content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;}
#media_header {
  display: none;}
#sideToggle1:checked ~ #wrap {
  -webkit-transform: none;
          transform: none;}
#sideToggle2:checked ~ #wrap {
  -webkit-transform: none;
          transform: none;}
#sideToggle1:checked ~ .sideRight {
  display: block;}
#sideToggle2:checked ~ .sideRight {
  opacity: 1;}


/* iframe */
#iframesite {
  margin-top:54px;
  width:100%;
  height:calc(100% - 54px);}

/* Side menu */

.sideLeft {
  min-width:1024px;
  height:52px;
  position: fixed;
  border-bottom:1px solid #999;
  top: 0;
  bottom: 0;
  z-index: 999;
  width: 100%;
  background: #FFF;
  color:#666;
  padding:0;
  opacity:1;
  -webkit-transform: none;
          transform: none;
  -webkit-transition: none;
  transition: none;
  border-right: none;}

#logo {
  float:left;
  overflow:hidden;
  padding:15px 20px 15px 20px;
  border-right:1px solid #999;}

#logo img {
  vertical-align:middle;
  padding:0 4px 0 0;}

nav {
  position: relative;
  top: auto;
  float:left;
  margin-top:0;
  margin-left:10px;}

nav ul {
  position:relative;
  float:left;
  padding: 0;
  margin: 0;}
nav  ul li {
  position: relative !important;
  float: left;}
nav ul li a {
  color: #666;
  padding:17px 8px 15px 8px;
  text-decoration: none;
  display: block;
  line-height:1.4;
  font-size: 13px;
  font-weight: normal;
  margin:0;
  overflow: hidden;
  white-space: nowrap;}

nav ul li a:hover {
  color: #0071bc;}

nav ul li.current-menu {
  color:#0071bc;
  border-bottom:3px solid #0071bc;}

nav ul li.current-menu a {
  border-left: none;
  color:#0071bc;}

nav ul ul {
  display:none;
  position:absolute;
  top:95%;
  left:0;
  background:#fff;
  border-radius:3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-border-radius: 3px;
  border:1px solid #999;
  z-index:50;}

nav ul li:hover > ul {
  display:block !important;}

nav ul ul li {
  float:none;
  min-width:100px;
  margin-left: 0;}
nav ul ul li a {
  padding:12px;}
nav ul ul li a:hover {
  color:#fff;}
nav ul ul li:hover {
  background:#0071bc;}

.sideRight {
  display: inline-block;
  background: none;
  z-index: 99;
  float: right;
  width:250px;
  padding:80px 0 0 0;
  opacity: 1;
  -webkit-transition: none;
  transition: none;
  border-left:none;}

#box {
  width:180px !important;
  min-height:70%;
  height:70vh;
  border:1px solid #1fa6d5;
  border-radius:3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-border-radius: 3px;
  background:#fff;
  padding:15px 12px !important;
  margin:0 0 0 15px;
  position:fixed;
  top:80px;}

#box p {
  font-size:12px;
  margin:4px 0 10px 0;
  color:#666;}

.command li {
  font-size:14px;
  line-height: 1.2;
  padding:5px 0;}

.command li:before {
  content:">\00A0"}

.command li:hover {
  color:#0071bc;}

.command li:hover span {
  border-bottom:1px solid #0071bc}

.command li.red:hover {
  color:#F33;}

.command li.red:hover span {
  border-bottom:1px solid #F33}

.copyright {
  font-size:10px;
  text-align:center;
  color:#999;
  width:180px;
  padding:4px 0 8px 0;
  margin:0 12px;
  border-top:1px solid #CCC;
  position:absolute;
  bottom:0;
  left:0;}

#logo {
  display: inline-block;}


#account {
  position: relative;
  float: right;
  padding:11px 30px 10px 5px;
  top:0;}

#account div {
  width: auto;
  float:left;
  margin:-4px 20px 0 0;}

#account span {
  font-size:12px;
  color:#666;}

#account p {
  font-size:14px;
  line-height:100%;
  max-width:120px;
  overflow:hidden;}

#account a {
  color:#000;}

#account button {
  float:right;
  background-color:#fff;
  color:#666;
  border:1px solid #666;
  border-radius:3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-border-radius: 3px;
  margin-top:0;
  padding:5px 10px;
  cursor: pointer;
  font-size:13px;
  font-family:'Roboto', sans-serif;}

#wrap {
  min-width: 1024px;}

/* 분기 */
section {
  padding-right:250px;
  margin:70px 0 20px 0;}

article {
  padding:10px 20px 0 40px;
  display:block;
  overflow-x:hidden;}
.breadcrumbs {
  overflow:hidden;
  padding:0 0 20px 40px;}

.breadcrumbs li {
  float:left;
  font-size:17px;
  color:#666;}
.data table td {
  color:#000;
  font-size:13px;}

.data table th, .data table td {
  font-size:13px;}
.table_basic {
  font-size: 13px;}
.table-02 th {
  font-size: 13px;}
.table-03 th, .table-03 td {
  font-size: 15px;}
.list-form li label {
  display:inline-block;
  width: 160px;
  font-size:15px;
  vertical-align:top;}

.required:after {
  content:"\00A0*";
  color:#F33;}

.list-form li {
  padding:6px 0;
  font-size:15px;}

table {
  border-radius:6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  -webkit-border-radius: 6px;}

.table_basic th:first-child {
  border-top-left-radius:6px;
  -moz-border-top-left-radius: 6px;
  -o-border-top-left-radius: 6px;
  -ms-border-top-left-radius: 6px;
  -webkit-border-top-left-radius: 6px;}

.table_basic th:last-child {
  border-top-right-radius:6px;
  -moz-border-top-right-radius: 6px;
  -o-border-top-right-radius: 6px;
  -ms-border-top-right-radius: 6px;
  -webkit-border-top-right-radius: 6px;}

.table-02 tr:first-child > th:first-child {
  border-top-left-radius:6px;
  -moz-border-top-left-radius: 6px;
  -o-border-top-left-radius: 6px;
  -ms-border-top-left-radius: 6px;
  -webkit-border-top-left-radius: 6px;}

.table-02 tr:last-child > th:first-child {
  border-bottom-left-radius:6px;
  -moz-border-bottom-left-radius: 6px;
  -o-border-bottom-left-radius: 6px;
  -ms-border-bottom-left-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;}


article button {
  margin:10px 10px 10px 0;
  padding:0 40px;
  height:30px;
  font-size:15px;
  font-family:'Roboto', sans-serif;
  border:0;
  background-color:#1fa6d5;
  color:#fff;
  border-radius:3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-border-radius: 3px;
  cursor:pointer}

.table_bt {
  margin-left:164px}


.pagination a {
  float: left;
  display: block;
  font-size: 13px;
  text-decoration: none;
  padding: 2px 8px;
  margin:0 6px;
  color:#333;
  margin-left: -1px;
  border:1px solid transparent;
  line-height: 1.5;}



/* MAP */

#map-view-wrap {
  min-width:855px;
  width:75%;
  display:block;
  height:100%;
  position:fixed;
  left:0;
  top:0;}

#map-view {
  width:95%;
  height:84%;
  min-height:360px;
  margin:0 auto;
  margin-top:70px;}

#map-func {
  width:95%;
  height:auto;
  margin:0 auto;
  padding-top:10px}

#map-func>div {
  float:left}

#map-func img {
  vertical-align:middle}

#map-func span {
  font-size:13px;
  margin-right:10px;}

#map-func span.gray {
  color:#999;}

#map-func a {
  float:right;
  font-size:13px;
  color:#fff;
  background:#0071bc;
  border-radius:3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-border-radius: 3px;
  height:20px;
  padding:4px 10px;}


#map-side-wrap {
  display:inline-block;
  float:right;
  width:25%;
  height:inherit;
  overflow: auto;
  padding-top:0px;}

#map-side {
  width:80%;
  margin:70px 0 20px 0;
  padding:15px 15px 30px 20px;
  float:right;
  margin-right:30px;
  background:#fff;
  border-radius:3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-border-radius: 3px;
  min-height:600px;
  top:80px;
  z-index:5;}


#refresher {
  border-bottom:1px solid #ccc;
  overflow:hidden;
  padding:0 0 10px 0;
  margin-bottom:10px;}


#refresher span {
  font-size:13px;}


#map-side button, #map-full-side button {
  float:left;
  width:72px;
  display:inline-block;
  background:#007abc;
  padding:5px 10px;
  border:none;
  border-radius:3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-border-radius: 3px;
  color:#fff;
  font-size:13px;
  margin-right:15px;}


#map-side p, #map-full-side p {
  font-size:14px;
  line-height:28px;}

#map-side .selectbox {
  width:98%}

#map-side ul {
  margin:15px 0 0 0}

#map-side ul li {
  font-size:15px;
  font-weight:bold;
  padding:3px 0;}


#map-side ul li span {
  font-weight:normal;
  font-size:14px;
  margin-left:10px;
  line-height:18px;
  vertical-align:auto;}


/* MAP Full-screen */

#map-full-side button {
  width:90%;
  margin-bottom:10px;}

#map-full {
  width:inherit;
  height:100%;
  float:left;
  background:#9CF;
  position:fixed;
  top:0;
  left:0;}

#map-full-side {
  width:inherit;
  float:right;
  position:relative;
  right:0;
  top:0;
  min-height: 100%;
  height:auto !important; /* modern Browser */
  height:100%; /* IE */
  background:#FFF;}

#map-full-side select {
  width:130%;}

#map-full-side .selectbox {
  width:90%;}

#map-full-side>div {
  padding:20px 10px 10px 15px;
  height:100%;}

#map-full-side ul li {
  font-size:15px;
  font-weight:bold;
  padding:3px 0;}

#map-full-side ul li span {
  font-weight:normal;
  font-size:14px;
  margin-left:10px;
  line-height:18px;
  vertical-align:auto;}



.system-info {
  background:#087bb6;
  margin:10px 20px 20px 40px;
  border-radius:6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  -webkit-border-radius: 6px;
  overflow:hidden}

.system-info h3 {
  color:#fff;
  font-size:16px;
  padding:10px 0 2px 20px;}

.system-info table {
  background:#fff;
  width:100%;
  border-radius:6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  -webkit-border-radius: 6px;
  margin-bottom:0;}

.inner-box {
  border:6px solid #087bb6;}

.system-info table th {
  width:15%;
  font-size:14px;
  border-bottom:1px solid rgba(232,232,232,0.5);
  padding: 6px 2px;}

.system-info table td {
  font-size:14px;
  border-bottom:1px solid rgba(232,232,232,0.5);
  padding: 8px 2px;}

.system-info table tr:last-child th, .system-info table tr:last-child td{
  border-bottom:0;}

.system-info table button {
  margin:10px 10px 10px 0;
  padding:0 40px;
  height:30px;
  font-size:15px;
  font-family:'Roboto', sans-serif;
  border:0;
  background-color:#087bb6;
  color:#fff;
  border-radius:3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-border-radius: 3px;
  cursor:pointer}

.add-attrib h3 {
  float:left;}
.add-attrib>div {
  float:right;
  padding:0 0 6px 0;}

.add-attrib>div span {
  font-size:13px}

.add-attrib>div input {
  margin-right:10px}

.add-attrib>div button {
  padding:2px 20px;
  height:26px;
  margin-right:4px;}

.licenseInfo {
  width:500px;
  height:130px
}



/* meter gauge table */

table.meter {
  float:left;
  margin-right:20px;
  table-layout: fixed;
  width:inherit !important}

table.meter td {
  font-size:14px;
  padding:6px 4px;}
table.meter th {
  font-size:16px;
  background:#FFF;
  color:#000;
  padding:8px 0;
  border-top-left-radius:6px;
  -moz-border-top-left-radius: 6px;
  -o-border-top-left-radius: 6px;
  -ms-border-top-left-radius: 6px;
  -webkit-border-top-left-radius: 6px;
  border-top-right-radius:6px;
  -moz-border-top-right-radius: 6px;
  -o-border-top-right-radius: 6px;
  -ms-border-top-right-radius: 6px;
  -webkit-border-top-left-radius: 6px;
  border-bottom:1px solid #e8e8e8;}
table.meter td.meter-chart {
  width:300px;
  vertical-align:middle;}
table.meter td:last-child {
 text-align:left}
table.meter span {
  display:inline-block;
  padding:0 4px;}
table.meter div.bar {
  display:inline-block;
  background:#1fa6d5;}
table.meter td.center {
  text-align:center}


.full {
  min-width:inherit !important;
  min-height:100% !important;
  display:table;
  width: 100%;
  clear:both;}

.max section {
  margin: 20px 0 20px 0;}

/* MAP Full-screen */

#map-full-side button {
  width:90%;
  margin-bottom:10px;}

#map-full {
  width:90% !important;
  height:100% !important;
  float:left !important;
  background:#9CF;
  position:fixed;
  top:0;
  left:0;}

#map-full-side {
  width:10% !important;
  float:right;
  position:relative;
  right:0;
  top:0;
  min-height: 100%;
  height:auto !important; /* modern Browser */
  height:100%; /* IE */
  background:#FFF;}

#map-full-side select {
  width:130%;}

#map-full-side .selectbox {
  width:90%;}

#map-full-side>div {
  padding:20px 10px 10px 15px;
  height:100%;}

#map-full-side ul li {
  font-size:15px;
  font-weight:bold;
  padding:3px 0;}

#map-full-side ul li span {
  font-weight:normal;
  font-size:14px;
  margin-left:10px;
  line-height:18px;
  vertical-align:auto;}

	
.search-option label {
	font-size: 13px;
}

.search-option input {
  font-size: 14px;
	width: 100px;
}

.search-option select {
  font-size: 14px;
	width: 100px;
	background-color: white;
	border:1px solid #999;
	padding:2px;
	vertical-align: middle;
	margin-left: 3px;
}

.search-option .srch-date input {
	width: 80px;
}
	
	
  } /* MEDIAQUERY END*/