@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: 'NotoSansKR-Bold';
  font-style: normal;
  src: url(/fonts/NanumGothic/NotoSansKR-Bold.eot);
  src: url(/fonts/NanumGothic/NotoSansKR-Bold.eot?#iefix) format('embedded-opentype'),
	   url(/fonts/NanumGothic/NotoSansKR-Bold.otf) format('truetype'),
	   url(/fonts/NanumGothic/NotoSansKR-Bold.woff) format('woff'),
	   url(/fonts/NanumGothic/NotoSansKR-Bold.ttf) format('truetype');
}

@font-face {
  font-family: 'NotoSansKR-Regular';
  font-style: normal;
  src: url(/fonts/NanumGothic/NotoSansKR-Regular.eot);
  src: url(/fonts/NanumGothic/NotoSansKR-Regular.eot?#iefix) format('embedded-opentype'),
	   url(/fonts/NanumGothic/NotoSansKR-Regular.otf) format('truetype'),
	   url(/fonts/NanumGothic/NotoSansKR-Regular.woff) format('woff'),
	   url(/fonts/NanumGothic/NotoSansKR-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'NotoSansKR-Medium';
  font-style: normal;
  src: url(/fonts/NanumGothic/NotoSansKR-Medium.eot);
  src: url(/fonts/NanumGothic/NotoSansKR-Medium.eot?#iefix) format('embedded-opentype'),
	   url(/fonts/NanumGothic/NotoSansKR-Medium.otf) format('truetype'),
	   url(/fonts/NanumGothic/NotoSansKR-Medium.woff) format('woff'),
	   url(/fonts/NanumGothic/NotoSansKR-Medium.ttf) format('truetype');
}


@font-face {
  font-family: 'NotoSansKR-Light';
  font-style: normal;
  src: url(/fonts/NanumGothic/NotoSansKR-Light.eot);
  src: url(/fonts/NanumGothic/NotoSansKR-Light.eot?#iefix) format('embedded-opentype'),
	   url(/fonts/NanumGothic/NotoSansKR-Light.otf) format('truetype'),
	   url(/fonts/NanumGothic/NotoSansKR-Light.woff) format('woff'),
	   url(/fonts/NanumGothic/NotoSansKR-Light.ttf) format('truetype');
}


@font-face {
  font-family: 'NotoSansKR-Black';
  font-style: normal;
  src: url(/fonts/NanumGothic/NotoSansKR-Black.eot);
  src: url(/fonts/NanumGothic/NotoSansKR-Black.eot?#iefix) format('embedded-opentype'),
	   url(/fonts/NanumGothic/NotoSansKR-Black.otf) format('truetype'),
	   url(/fonts/NanumGothic/NotoSansKR-Black.woff) format('woff'),
	   url(/fonts/NanumGothic/NotoSansKR-Black.ttf) format('truetype');
}


body{/*background-image:url(../images_extra/bg/img1.jpg);*/ background-size:cover; background-attachment:fixed; background-color:#eae9e9; font-family:'NotoSansKR-Regular';}
#wrap{ position:relative; width:100%; min-width:1300px;}

/*header*/
#header{ height:60px; background-color:#2e4962;}

/*header_로고*/
#header .logo{ width:390px !important; display:inline-block; padding-left:30px; vertical-align: top; float:left; padding-top:12px;}




/*header_메뉴*/
#main_nav {
	position: relative;
	display:inline-block;
	border-bottom:0px solid #be2d3a;
	float:left;
	margin-top:12px;
}

#main_nav .gnb{padding-top:0px;}
#main_nav ul li {
	/*min-width:110px;*/
	float: left;
	position: relative;
	-webkit-border-radius: 2px 2px 0 0;
	-moz-border-radius: 2px 2px 0 0;
	border-radius: 2px 2px 0 0;
	margin-right:20px;
	/*background: #fafafa;*/
}
#main_nav ul li ul {
	padding: 0;
	position: absolute;
	top: 47px;
	left: 0;
	width: 160px;
	display: none;
	opacity: 0;
	visibility: hidden;
	z-index: 100;
	/*border-top: 5px solid #be2d3a;*/ /* 빨간색 */
}

#main_nav ul li ul li ul{
	position:relative;
	top:0;
	left:0;
}
#main_nav ul li, #main_nav ul li ul {
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
#main_nav ul li ul li {
	background: #2e4962; /* 파란색 */
	display: block;
	margin-right: 0;
	color: #FFF;
	float: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2); /*서브 메뉴사이 보더*/
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}
#main_nav ul li ul li:hover {
	background: #327258; /* 기본 오버 : 하늘색 */
}
#main_nav ul li ul li .active { /* 활성 서브 : 검정색 */
	border-radius: 0;
	background: #094d86;
	color:#fff;
}
#main_nav ul li ul li:hover .active {
	background: #23b7f5; /* 활성 서브 : 파랑색 */
}
#main_nav ul li ul li:last-child {
	-webkit-border-radius: 0 0 2px 2px;
	-moz-border-radius: 0 0 2px 2px;
	border-radius: 0 0 2px 2px;
	border-bottom: 0;
}
#main_nav ul li ul li a {
	line-height: 14px;
}
#main_nav ul li a {
	line-height: 18px;
	display: block;
	padding: 10px 10px 20px 10px;
	font-size: 14px;
	text-align: left;
	color:#fff;
	font-family:'NotoSansKR-Medium';
}

#main_nav ul li ul li a {
	line-height: 18px;
	display: block;
	padding: 10px;
	font-size: 14px;
	text-align: left;
	color:#fff;
	font-family: 'NotoSansKR-Medium';
}

#main_nav ul li a i {
	float: left;
	margin: 1px 5px 0 0;
	line-height: 18px;
	font-size:12px;
	width: 15px;
}
#main_nav ul li .active {
	-webkit-border-radius: 2px 2px 0 0;
	-moz-border-radius: 2px 2px 0 0;
	border-radius: 2px 2px 0 0;
	/*background: #195f98;  파랑색 */
	color: #ffbb44;
}
#main_nav ul li:last-child {
	margin-right: 0;
}
#main_nav ul li:hover {
	/*background: #be2d3a;  빨간색 */
	color: #fff;
}

#main_nav ul .sub-menu:hover a {
	color: #fff;
}


#main_nav ul li:hover ul {
	display: block;
	opacity: 1;
	visibility: visible;
}



#main_nav .menu_select {
	text-align:center;
}
#main_nav .menu_select select {
	width:90%;
	background-color:#880000;
	border:1px #63040c solid;
	text-align:center;
}





#topmenu{position:relative;}
#topmenu .menu-step01{position:relative;}
#topmenu .menu-step01 div{display:none;}
#topmenu .menu-step01:hover div{ display:block; position:absolute; top:0px; left:160px; transition: all 0.2s ease;}

#topmenu .submenu ul li{background-color:#742b31; padding-top:0px; padding-bottom:0px;}




/*header-오른쪽, 시계, 로그아웃*/
#header .header-right{position:absolute; top:0px; right:0px; color:#FFF;}
#header .header-right .time{ display:inline-block; font-size:20px; vertical-align:middle;}
#header .header-right .time input{height:20px; width:120px; font-size:12px; margin-right:10px; border-radius: 8px; padding: 11px;}
#header .header-right .time span{font-size:12px; vertical-align:middle; font-family: 'Nanum Gothic Bold';}
#header .header-right .logout{height:60px; display:inline-block; background-color:#2e4962; font-size:25px; margin-left:20px;vertical-align:middle; padding-top:15px; padding-left:20px; padding-right:17px; }
#header .header-right .logout i{text-shadow:2px 2px 2px rgba(0, 0, 0, 0.5); font-size: 32px;}
#header .header-right .logout a:link {color: #fff; text-decoration: none;}
#header .header-right .logout a:visited {color: #fff; text-decoration: none;}
#header .header-right .logout a:active {color: #fff; text-decoration: none;}
#header .header-right .logout a:hover {color: #f47324; text-decoration: none;}

#header .header-right .admin{display:inline-block; margin-left:15px;}
#header .header-right .admin span{vertical-align:middle; font-family: 'Nanum Gothic Bold'; font-size:15px; color:#33e5f9;}



/*패킷현황 : header_메뉴*/
#newSub_wrap{margin:20px; border:1px #ccc solid;}
#new_nav .newMain-nav{background-color:#2e4473; font-family: 'Nanum Gothic Bold'; font-size:15px; color:#fff; padding:15px;}
#new_nav .newMain-nav ul, #new_nav .newSub-nav{overflow:hidden;}
#new_nav .newMain-nav ul li, #new_nav .newSub-nav div{ float:left; margin-right:40px;}

#new_nav .newMain-nav ul li i{margin-right:7px; font-size:12px;}
#new_nav .newSub-nav ul li>ul>li{ float:left; margin-right:10px;}

#new_nav .newMain-nav ul li a{color: #f2f2f2; text-decoration: none;}
#new_nav .newMain-nav ul li:hover a{color: #d23333; text-decoration: none;}
#new_nav .newMain-nav ul .active a{color: #abe2bf; text-decoration: none;}


#new_nav .newSub-nav{background-color:#358bcd; font-family: 'Nanum Gothic Bold'; font-size:13px; color:#fff; padding:10px 15px;}
#new_nav .newSub-nav div a{color: #fff;; text-decoration: none;}
#new_nav .newSub-nav div:hover a{color: #fbf888; text-decoration: none;}
#new_nav .newSub-nav div .active a{color: #fbf888; text-decoration: none;}

#new_nav .newSub-nav .packet-ip{margin-right:10px;}


#new_nav select, #new_nav input{height:22px;}

/*---------------------------------------------------------------------------------------------------------------------*/


/*container*/
#container-wrap{ width:100%; position:relative;/*  padding-top:10px; 프레임 상단 여백때문에 주석처리  */}


/*container 왼쪽*/
#container-wrap .left{ position:absolute; left:10px; top:0px; width:370px; height:calc(100% - 30px); background-color:#ecebeb;}
/*#container-wrap .left{ position:relative; width:380px; height:calc(100% - 30px); background-color:#fff; float:left;}*/

/*container 왼쪽 로그인*/
#container-wrap .left .left-top{width:100%; height:140px;background-color:#494949; color:#FFF; text-align:center; padding-top:10px;}
#container-wrap .left .left-top .login {height:60px; box-shadow:0px 2px 5px 0px rgba(0,0,0, 0.3); }
#container-wrap .left .left-top .login .login-text{display:inline-block;  margin-left:10px; vertical-align:middle;}
#container-wrap .left .left-top .login .login-text p{text-align:left;}
#container-wrap .left .left-top .login .login-text p:first-child{font-size:16px; margin-bottom:5px;  font-family: 'Nanum Gothic Bold';}
#container-wrap .left .left-top .login .login-text .admin-set{width:70px; text-align:center; box-shadow:1px 1px 2px 1px rgba(0,0,0, 0.2);}
#container-wrap .left .left-top .login .login-text .admin-set i{margin-right:5px;}


/*container 왼쪽 검색*/
#container-wrap .left .left-top .search{margin-top:25px;}
#container-wrap .left .left-top .search ul li{display:inline-block;}
#container-wrap .left .left-top .search ul li input{width:250px; height:24px; margin-right:10px;}
#container-wrap .left .left-top .search ul li i{font-size:16px;}


/*container 왼쪽 메뉴*/
#container-wrap .left .left-menu .left-nav{background-color:#8e8e8e; color:#fff; border:0px #b3d4de solid; padding:5px 0px; border-radius: 5px 5px 0px 0px;}
#container-wrap .left .left-menu .left-nav .left-ic {color:#7a0000;}
#container-wrap .left .left-menu .left-nav .left-ic a:link {color: #7a0000;; text-decoration: none;}
#container-wrap .left .left-menu .left-nav .left-ic a:visited {color: #7a0000; text-decoration: none;}
#container-wrap .left .left-menu .left-nav .left-ic a:active {color: #7a0000; text-decoration: none;}
#container-wrap .left .left-menu .left-nav .left-ic a:hover {color: #fff; text-decoration: none; box-shadow:1px 2px 5px 1px rgba(0,0,0, 0.3);}
#container-wrap .left .left-menu .left-nav ul li{display:inline-block; font-size:18px; padding:6px 20px 6px 20px; border-right:0px #7fcce8 solid;}
#container-wrap .left .left-menu .left-nav ul li .fa{color:#FFF;}
/*#container-wrap .left .left-menu .left-nav ul li i{text-shadow:2px 2px 2px rgba(0, 0, 0, 0.3);}*/


/*container 왼쪽 메뉴*/
/*.left-nav{background-color:#be2d3a; color:#fff;}
.left-nav .left-ic {color:#7a0000;}
.left-nav .left-ic a:link {color: #7a0000;; text-decoration: none;}
.left-nav .left-ic a:visited {color: #7a0000; text-decoration: none;}
.left-nav .left-ic a:active {color: #7a0000; text-decoration: none;}
.left-nav .left-ic a:hover {color: #fff; text-decoration: none; text-shadow:2px 2px 2px rgba(0, 0, 0, 0.3); }
.left-nav ul li{display:inline-block; font-size:18px; padding:6px 20px 6px 20px; border-right:1px #cd4450 solid;}*/
/*.left-nav ul li i{text-shadow:2px 2px 2px rgba(0, 0, 0, 0.3);}

/*container 왼쪽 트리*/
#container-wrap .left .left-menu .left-tree{padding:0px;}
#container-wrap .left .left-menu .left-tree #_treeWindow{width:370px;  height: 88vh !important;}
#container-wrap .left .left-menu .left-tree #_treeWindow::-webkit-scrollbar{height:15px; width:15px;}



/*---------------------------------------------------------------------------------------------------------------------*/

/*container 내용*/
#container-wrap .contents-box{margin-left:30px; margin-left:395px; margin-right:10px;}
#container-wrap .contents-box .contents-iframe{border:0px #ccc solid; margin-top:10px;}

#container-wrap .contents-box .contents-iframe

/*---------------------------------------------------------------------------------------------------------------------*/


/*iframe 서브*/
#sub-wrap{ padding:25px; background-color:#fff; border: 1px #ddd solid; border-radius:10px 10px 0px 0px;}
#sub-wrap h2{color: #404040; font-family: "Nanum Gothic Bold"; font-size: 17px;}
#sub-wrap .tabs{position:relative; margin-top:15px; /*background-image: -webkit-linear-gradient(top, #777777, #444444);*/ background-color:#14777a; line-height:25px; border-radius: 5px 5px 0px 0px; }

#sub-wrap .tabs ul li{ font-size:12px; display:inline-block; color:#fff; padding:7px 5px; margin-right:30px; font-family: 'Nanum Gothic Bold';}
#sub-wrap .tabs ul li:first-child{margin-left:10px;}
#sub-wrap .tabs ul li img{margin-right:10px;}
#sub-wrap .tabs h1{font-size:15px; padding:8px; font-family: 'Nanum Gothic Bold'; color:#fff; }

#sub-wrap .tabs a:link {color: #fff; text-decoration: none;}
#sub-wrap .tabs a:visited {color: #fff; text-decoration: none;}
#sub-wrap .tabs a:active {color: #fff; text-decoration: none;}
#sub-wrap .tabs a:hover {color: #f47324; text-decoration: none;}

.tabs{position:relative; margin-top:15px; /*background-color: #666666; background-image: -webkit-linear-gradient(top, #777777, #444444);*/}
.tabs h1{font-size:15px; padding:8px; font-family: 'Nanum Gothic Bold'; color:#fff; }


	
/*container 상태 테이블*/
#sub-wrap .con-list { position:relative; width:100%; background-color:#fff; padding:30px; border:1px #ccc solid;}
#sub-wrap .con-list .state-box{position:relative; margin-bottom:30px; margin-top:20px}
#sub-wrap .con-list .state-box:first-child, #sub-wrap .con-list .state-box2{margin-top:0px; margin-bottom:0px;}
#sub-wrap .con-list .state-box .state-list{ margin-bottom:40px;}
#sub-wrap .con-list .state-box .state-table table tr th{ text-align:center; width:200px; font-size:13px; }
#sub-wrap .con-list .state-box .state-table table tr td:first-child{vertical-align:middle; width:12%;}
	
#sub-wrap .con-list .state-box .state-table .system-table tr td{text-align:left; padding-left:20px;}
#sub-wrap .con-list .state-box .state-table .system-table tr th{background-color:#f9f9f9;}


/*ic-list*/
#sub-wrap .con-list .state-box .state-table .ic-list ul{margin-bottom:10px; margin-top:-10px;}
#sub-wrap .con-list .state-box .state-table .ic-list ul li{display:inline-block; padding:2px; vertical-align:middle;  font-family: 'Nanum Gothic Bold';}
#sub-wrap .con-list .state-box .state-table .ic-list ul li img{margin-left:15px; vertical-align:top; border-left:1px #ddd solid;padding-left:20px;}
#sub-wrap .con-list .state-box .state-table .ic-list ul li .ic-img{border:0px; margin-left:0px; padding-left:0px;}
#sub-wrap .con-list .state-box .state-table table tr td span{margin-right:10px;}
#sub-wrap .con-list .state-box .state-table table tr td p{margin-left:20px;}


/*SNMP상태*/

#sub-wrap .con-list .snmp-box{padding:20px; background:#f9f4f0; border:1px #ece0ce solid; margin-top:15px;}
#sub-wrap .con-list .snmp-box h4{font-size:15px; margin-bottom:10px; font-family: 'Nanum Gothic Bold'; text-align:left; vertical-align:middle;}
#sub-wrap .con-list .category-box h4{font-size:15px; font-family: 'Nanum Gothic Bold'; text-align:left; vertical-align:middle; color:#fff; padding:5px 15px; border-top-left-radius: 4px;  border-top-right-radius: 4px;}

#sub-wrap .con-list .snmp-box .table{ border:0px; margin-top:-8px; margin-bottom: 0px;background:#f9f4f0;}		/* 2016-07-26 18:28 손대호 : background:#f9f4f0; 추가 */
#sub-wrap .con-list .snmp-box .table tr td{border:0px;}
#sub-wrap .con-list .snmp-box .snmp{ position:relative; padding:20px; background-color:#fff; border:1px #ddd solid; text-align:center; height:177px;}
#sub-wrap .con-list .snmp-box .snmp img{margin-bottom:10px;}
#sub-wrap .con-list .snmp-box .snmp p{margin:0 auto; }

#sub-wrap .con-list .snmp-box .snmp .cupChart-list{position:absolute; top:20px; right:20px;}
#sub-wrap .con-list .snmp-box .snmp .cupChart-list ul{overflow:hidden;}
#sub-wrap .con-list .snmp-box .snmp .cupChart-list ul li{ width:60px; float:left; padding:5px; font-family: 'Nanum Gothic Bold'; border-left:1px #ddd solid;border-top:1px #ddd solid;}
#sub-wrap .con-list .snmp-box .snmp .cupChart-list ul li:first-child{background:#f5f5f5;}
#sub-wrap .con-list .snmp-box .snmp .cupChart-list ul li:last-child{border-right:1px #ddd solid;}
#sub-wrap .con-list .snmp-box .snmp .cupChart-list .cup-ul li{ border-bottom:1px #ddd solid;}



/*interface-graph*/
#sub-wrap .con-list .interface-graph{margin-bottom:50px; position:relative;}		/* 2016-06-29 21:01 손대호 : 신규 추가 */ 
#sub-wrap .con-list .interface-graph .graph-box{ background-color:#f9f9f9; padding:30px 20px 0px 20px; border:1px #ddd solid; text-align:center;}
#sub-wrap .con-list .interface-graph .graph-box .graph-list{width:750px; margin:0 auto;}
#sub-wrap .con-list .interface-graph .graph-box .graph-list .graph-common{ background-color:#fff; padding:20px; border:1px #ddd solid;}
#sub-wrap .con-list .interface-graph .graph-box .graph-list .graph-common h3{ border-bottom:0px #ddd solid; margin-bottom:20px;}
#sub-wrap .con-list .interface-graph .graph-box .graph-list .interface-table{background-color:#fff; margin-top:15px; margin-bottom:50px;}
#sub-wrap .con-list .interface-graph .graph-box .graph-list .interface-table tr td{text-align:right;}
#sub-wrap .con-list .interface-graph .graph-box .graph-list .interface-table tr td:first-child{background-color:#f5f5f5; text-align:left;}
#sub-wrap .con-list .interface-graph .graph-box .graph-list .interface-table tr td span{margin-right:5px;}

/* 2016-06-29 21:01 손대호 : 차트를 grid 형식으로 배열 */
#sub-wrap .con-list .interface-graph-02{margin-bottom:50px; position:relative;}		
#sub-wrap .con-list .interface-graph-02 .graph-box-02{ background-color:#f9f9f9; padding:30px 20px 0px 20px; border:1px #ddd solid; text-align:center;}
#sub-wrap .con-list .interface-graph-02 .graph-box-02 .graph-list{margin:0 auto; display:inline-block; width:initial;}


/*category-box*/

#sub-wrap .con-list .category-box {margin-top:30px;}
#sub-wrap .con-list .category-box2 {margin-top:0px;}
#sub-wrap .con-list .layout-box{padding:0px; border:0px #ddd solid;}
#sub-wrap .con-list .category-box .layout{margin-bottom:30px;}
#sub-wrap .con-list .category-box .category{margin-bottom:50px; position:relative;}
#sub-wrap .con-list .category-box .category:last-child{margin-bottom:0px;}
#sub-wrap .con-list .category-box .category .white-hr {position: absolute;top: 0;left: 0; display: block; margin: 0; padding: 0; width: 100%; height: 1px; border: 1px solid rgba(255,255,255, 0.4);}
#sub-wrap .con-list .category-box .category-title{padding:20px; border:1px #ddd solid;}
#sub-wrap .con-list .category-box .category-title h4{font-size:15px; margin-bottom:10px; font-family: 'Nanum Gothic Bold'; text-align:left; vertical-align:middle; color:#fff; padding:5px 15px;}
#sub-wrap .con-list .category-box .category-title2 table td{ text-align:center;}
#sub-wrap .con-list .category-box .category-title3{padding:0px; border:0px #ddd solid;}
#sub-wrap .con-list .category-box .category-title3 h4{ color:#333; padding-left:0px;}
#sub-wrap .con-list .category-box .category-title .system-table{margin-bottom:10px;}
#sub-wrap .con-list .category-box .category-title table{margin-bottom:0px;}
#sub-wrap .con-list .category-box .category-title th{text-align:center; background-color:#ececec; vertical-align:middle; font-family: 'Nanum Gothic Bold';}
#sub-wrap .con-list .category-box .category-title td{height:35px; vertical-align:middle; text-align:left; font-family: 'Nanum Gothic Bold';}
#sub-wrap .con-list .category-box .category-title td span img{margin-left:10px;}
#sub-wrap .con-list .category-box .interface-packet .bg-gray5{width:400px; font-f  amily: 'Nanum Gothic Bold';}


/* 
	2016-06-29 14:17 손대호 : 성능관리 세부 페이지에서 사용
*/
/* 성능관리 => 시스템 성능 => 특정 인터페이스 선택 => 인터페이스 정보 => 테이블*/
#sub-wrap .con-list .category-box .category .category-table-type1 .perform-table-type1 tr td{text-align:left; padding-left:20px; width:30%}
#sub-wrap .con-list .category-box .category .category-table-type1 .perform-table-type1 tr th{background-color:#f9f9f9; width:200px}

/* 성능관리 => 시스템 성능 => 특정 인터페이스 선택 => 5분 평균 트래픽 => 테이블*/
#sub-wrap .con-list .category-box .category .category-table-type1 .perform-table-type2 tr td{text-align:left; padding-left:20px; width:20%}
#sub-wrap .con-list .category-box .category .category-table-type1 .perform-table-type2 tr th{background-color:#f9f9f9; width:200px}

/* 성능관리 => 시스템 성능 => 특정 인터페이스 선택 => 인터페이스 기간 조회 => 테이블*/
#sub-wrap .con-list .category-box .category .category-table-type1 .perform-table-type3 tr td{text-align:left; padding-left:20px; width:90%}
#sub-wrap .con-list .category-box .category .category-table-type1 .perform-table-type3 tr th{background-color:#f9f9f9; width:200px}

/* 성능관리 => 시스템 성능 => 특정 인터페이스 선택 => 인터페이스 패킷유형 => 테이블*/
#sub-wrap .con-list .category-box .category .category-table-type1 .perform-table-type4 tr td{text-align:left; padding-left:20px;}
#sub-wrap .con-list .category-box .category .category-table-type1 .perform-table-type4 tr th{background-color:#f9f9f9;width:200px}







/*category-box*/

.category-box {margin-top:30px;}
.category-box2 {margin-top:0px;}
.layout-box{padding:0px; border:0px #ddd solid;}
.category-box .layout{margin-bottom:30px;}
.category-box .category{margin-bottom:50px; position:relative;}
.category-box .category:last-child{margin-bottom:0px;}
.category-box .category .white-hr {position: absolute;top: 0;left: 0; display: block; margin: 0; padding: 0; width: 100%; height: 1px; border: 1px solid rgba(255,255,255, 0.4);}
.category-box .category-title{padding:10px; border:1px #ddd solid; background:#fff;}
/*.category-box .category-title table th:first-child{ width:300px;}
.category-box .category-title table th:last-child{ width:200px;}*/

.category-box  h4{font-size:15px; font-family: 'Nanum Gothic Bold'; text-align:left; vertical-align:middle; color:#fff; padding:8px 15px; border-radius: 5px 5px 0px 0px;}
.category-box .category-title2 p{ text-align:center;}
.category-box .category-title3{padding:0px; border:0px #ddd solid;}
.category-box .category-title4{border:0px;}
.category-box .category-title .system-table{margin-bottom:10px;}
.category-box .category-title table{margin-bottom:0px;}
.category-box .category-title th{text-align:center; background-color:#ececec; vertical-align:middle; font-family: 'Nanum Gothic Bold';}
.category-box .category-title td height:35px; vertical-align:middle; text-align:left; font-family: 'Nanum Gothic Bold';}
.category-box .category-title td span img{margin-left:10px;}
.category-box .interface-packet .bg-gray5{width:400px; font-family: 'Nanum Gothic Bold';}
.category-box .category-config{ padding:10px 0px; border: 0px #888888 solid; background: #fff; overflow:hidden;}
.config-title{margin-bottom:10px;}

.dashbd-table01{margin-bottom:10px;}
.topN-table01{height:410px;}
.dashbd-td-type2{ vertical-align:top; background-color:#fff;}


/*container 장애 테이블*/
#sub-wrap .con-list .error-box{margin-top:30px; background-color:#fff;}
#sub-wrap .con-list .error-box .error-title{ position:relative; color:#fff;  border-top-left-radius: 4px; border-top-right-radius: 4px;}
#sub-wrap .con-list .error-box .error-title .white-hr {position: absolute;top: 0;left: 0; display: block; margin: 0; padding: 0; width: 100%; height: 1px; border: 1px solid rgba(255,255,255, 0.4);}
#sub-wrap .con-list .error-box .error-title h3{font-size:15px; padding:8px; font-family: 'Nanum Gothic Bold'; margin:0px;  border-top-left-radius: 4px; border-top-right-radius: 4px;}

#sub-wrap .con-list .error-box .error-table{border:1px #ccc solid; padding:10px 20px 20px 20px;}
#sub-wrap .con-list .error-box .error-table .error-top{ position:relative;}

#sub-wrap .con-list .error-box .error-search{padding:10px 10px 10px 0px; background-color:#fff; border:0px #ddd solid;} 
#sub-wrap .con-list .error-box .error-search ul li, {display:inline-block; margin-right:5px; vertical-align:middle;}
#sub-wrap .con-list .error-box .error-search ul li select{vertical-align:top;}
#sub-wrap .con-list .error-box .error-search ul li .input-set{ height:25px; vertical-align:top;}


#sub-wrap .con-list .error-box .error-table .error-button{ position:absolute; top:10px; right:0px;}
#sub-wrap .con-list .error-box .error-table .error-button ul{ overflow:hidden; }
#sub-wrap .con-list .error-box .error-table .error-button ul li{ float:left; margin-right:5px;}

#sub-wrap .con-list .error-box .error-table .error-right{float:right;}


#sub-wrap .con-list .error-box .error-table table input{width:17px; height:17px;}
#sub-wrap .con-list .error-box .error-table table tr .time-line {width:12%;}
#sub-wrap .con-list .error-box .error-table table tr td{padding:4px;}
#sub-wrap .con-list .error-box .error-table .progress {margin-bottom:0px;}

#sub-wrap .con-list .error-box .error-table table{margin-top:10px; font-size:13px;}
#sub-wrap .con-list table tr th{font-family: 'NotoSansKR-Regular'; padding:7px;}
#sub-wrap .con-list .error-box .error-table table tr th:last-child .gradient-gray{margin-right:3px;}
#sub-wrap .con-list table tr th, #sub-wrap .con-list table tr td{text-align:center;}


.map-nav{overflow:hidden;}
.map-nav .map-ic { float:left; margin-left:20px;}
.map-nav .map-ic li{ display:inline-block; margin:5px;}
.map-nav .map-default{width:85%; background:#fff; border:1px #333 solid; display:inline-block; padding:5px; margin-left:30px; margin-top:8px;}


/* 패킷현황 : container*/
#newSub_container{ padding:20px; background:#fff;}
#newSub_container .text-set{text-align:center; font-family: 'Nanum Gothic Bold'}
#newSub_container .newSub-table td{padding:8px;}






/*---------------------------------------------------------------------------------------------------------------------*/


/* 팝업 : container 장애 테이블*/
#sub-wrap .con-popup{ padding:0px;}
#sub-wrap .con-popup .error-box{margin-top:0px;}
#sub-wrap .con-popup {border:0px;}

#sub-wrap .popup-user{HEIGHT:14PX; PADDING-TOP:5px; PADDING-LEFT:20PX; PADDING-RIGHT:20PX; PADDING-BOTTOM:10PX; OVERFLOW-Y:HIDDEN; color:#fff; font-family: 'Nanum Gothic Bold';U}
#sub-wrap .popup-bg{ border:0px; text-align:center; width:300px; height:202px; color:#fff; background:#fff; border:1px #ccc solid;}


/*ZINDEX=999; POSITION:ABSOLUTE; WIDTH:95%; HEIGHT:232; VISIBLE:NONE;*/
.popup-common{z-index:999px; position:relative; left:40%;}


/*---------------------------------------------------------------------------------------------------------------------*/

/*검색창*/

#sub-wrap .con-list .search-box{margin:0px; padding:0px; border:0px;}



/*---------------------------------------------------------------------------------------------------------------------*/


/*링크색깔-남색바일경우*/
.gradient-blue2 a:link{color: #333; text-decoration: none;}
.gradient-blue2 a:visited{color: #333; text-decoration: none;}
.gradient-blue2 a:active{color: #333; text-decoration: none;}
.gradient-blue2 a:hover{color: #e84a4a; text-decoration: none;}

.gradient-lightblue a:link {color: #fff; text-decoration: none;}
.gradient-lightblue a:visited{color: #fff; text-decoration: none;}
.gradient-lightblue a:active {color: #fff; text-decoration: none;}
.gradient-lightblue a:hover{color: #e84a4a; text-decoration: none;}


/*---------------------------------------------------------------------------------------------------------------------*/

/*그라데이션 색깔*/

.gradient-orange, .category-main-title01{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffb23f+0,ff9900+100 */
	background: #5a626a; /* Old browsers */
	color:#fff;
	
}

.btn-info{
background-image:none;
background-color:#2776b5 !important;
border:0px;
}


/*---------------------------------------------------------------------------------------------------------------------*/


.table {background-color:#fff;}


/*common-공통*/

.div-inline{display:inline-block;}


/*
	버튼리스트
*/
#sub-wrap .error-button{ position:absolute; top:10px; right:30px;}
#sub-wrap .error-button ul li{display:inline-block;}

/* 2016-06-29 16:40 손대호 : 버튼리스트*/
#sub-wrap .button-container-type01 { top:10px; right:30px;}
#sub-wrap .button-container-type01 ul li{display:inline-block;}



	/*h 폰트*/
#sub-wrap .con-list h2{font-size:15px; font-family: 'Nanum Gothic Bold'; margin-bottom:10px;}
#sub-wrap .con-list h2 i{margin-right:8px; color:#777;}
#sub-wrap .con-list h3{font-size:13px; font-family: 'Nanum Gothic Bold'; margin-bottom:10px;}

	/*검색 리스트*/
#sub-wrap .con-list .error-search ul li {display:inline-block; margin-right:5px; vertical-align:middle;}


	/*progress 색깔*/
#sub-wrap .con-list .progress {margin-bottom:0px;}
#sub-wrap .con-list .progress .progress-bar-yellow{background-color:#f8c323;}
#sub-wrap .con-list .progress .progress-bar-orange{background-color:#ed6c44;}
#sub-wrap .con-list .progress .progress-bar-green{background-color:#a5d962;}
#sub-wrap .con-list .progress .progress-bar-violet{background-color:#9a62d9;}
#sub-wrap .con-list .progress .progress-bar-red{background-color:#f13a21;}
#sub-wrap .con-list .progress .progress-bar-gray{background-color:#9b9b9b;}
#sub-wrap .con-list .progress .progress-bar-blue{background-color:#337ab7;}



.borderState-yellow{border:3px #f8c323 solid;}
.borderState-orange{border:3px #ed6c44 solid;}
.borderState-green{border:3px #72c309 solid;}
.borderState-violet{border:3px #9a62d9 solid;}
.borderState-red{border:3px #f13a21 solid;}
.borderState-gray{border:3px #9b9b9b solid;}
.borderState-blue{border:3px #337ab7 solid;}



.btn-sm2{width:80px; padding:3px 0px; font-size: 11px; line-height: 1.5; border-radius: 3px; vertical-align:middle; text-align:center;}

.btnSm-green{ color:#fff; border:1px #80ad0b solid;
background: #a5d916; /* Old browsers */
background: -moz-linear-gradient(top, #a5d916 0%, #8ec507 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #a5d916 0%,#8ec507 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #a5d916 0%,#8ec507 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a5d916', endColorstr='#8ec507',GradientType=0 ); /* IE6-9 */
}
.btnSm-violet{ color:#fff; border:1px #8862bf solid;
background: #d8bbff; /* Old browsers */
background: -moz-linear-gradient(top, #b99ede 0%,#945de4 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #b99ede 0%,#945de4 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #b99ede 0%,#945de4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8bbff', endColorstr='#af79ff',GradientType=0 ); /* IE6-9 */
}

.btnSm-red{ color:#fff; border:1px #d0251c solid;
background: #e0625a; /* Old browsers */
background: -moz-linear-gradient(top, #e0625a 0%, #c31c14 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e0625a 0%,#c31c14 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e0625a 0%,#c31c14 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0625a', endColorstr='#e5332c',GradientType=0 ); /* IE6-9 */
}
.btnSm-blue{ color:#fff; border:1px #0b6a9e solid;
background: #2ca9ed; /* Old browsers */
background: -moz-linear-gradient(top, #2ca9ed 1%, #0280c3 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #2ca9ed 1%,#0280c3 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #2ca9ed 1%,#0280c3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ca9ed', endColorstr='#0280c3',GradientType=0 ); /* IE6-9 */
}

.btnSm-yellow{ color:#fff; border:1px #daba20 solid;
background: #feee92; /* Old browsers */
background: -moz-linear-gradient(top, #f7d721 0%,#eabc03 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f7d721 0%,#eabc03 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f7d721 0%,#eabc03 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6a63b', endColorstr='#fa7b18',GradientType=0 ); /* IE6-9 */
}

.btnSm-orange{ color:#fff; border:1px #d26e0a solid;
background: #f6a63b; /* Old browsers */
background: -moz-linear-gradient(top, #f6a63b 0%, #fa7b18 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f6a63b 0%,#fa7b18 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f6a63b 0%,#fa7b18 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6a63b', endColorstr='#fa7b18',GradientType=0 ); /* IE6-9 */
}


.btnSm-gray{ color:#fff; border:1px #929292 solid;
background: #dddddd; /* Old browsers */
background: -moz-linear-gradient(top, #c3c3c3 0%, #9c9c9c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #c3c3c3 0%,#9c9c9c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #c3c3c3 0%,#9c9c9c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#9c9c9c',GradientType=0 ); /* IE6-9 */
}

.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th
{font-size:12px; vertical-align:middle;}


.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {border-top:0px solid #ddd;}





/*---------------------------------------------------------------------------------------------------------------------*/


@media all and (max-width:550px){
     #sub-wrap .error-button{ display: block;position:relative; }
}

@media all and (max-width:1500px){
	#sub-wrap .con-list .error-box .error-search{padding-bottom:0px;}
	#sub-wrap .con-list .error-box .error-table .error-button{ position:relative}
	#sub-wrap .con-list .error-box .error-table table{margin-top:20px;}
}

@media all and (max-width:1350px){
	#IP{ display:none;}
	#global_search{ display:none;}
}

/*---------------------------------------------------------------------------------------------------------------------*/





#sub-wrap .con-list .error-box .error-table table tr td{vertical-align:middle;}
#sub-wrap .con-list .error-box .error-table ul li span{margin-right:10px;}



/*
2016-07-05 11:04 손대호 : jquery easy pie chart에 사용
*/
.pie-chart-tiny {
	display: inline-block;
	position: relative;
	margin: 4px 4px 0;
	padding-bottom: 13px;
}

.pie-chart-tiny-02 {
	display: inline-block;
	position: relative;
	margin: 4px 4px 0;
	padding-bottom: 0px;
}

.percent {
	position: absolute;
	text-align: center;
	width: 100%;
	margin-top: 36px;
	font-size: 13px;
	color: rgba(0, 0, 0, 0.68);
	text-shadow: none;
	padding-left: 2px;
}
#MapBase{position:relative !important;}

/*
.percent:after {
	content: '%';
}
*/


.Category-main-title02{background: #14777a;}
.gradient-gray{background-color: #dbe7e9;}
.gradient-blue2{background-color: #dbe7e9;}
.gradient-lightblue, .category-main-title03, .category-main-title07{background-color:#24507a;}
table .sButton{background-color: #038ea1;}


#login_box h1{color: #2bbd6d;}
.form-horizontal{
	background-color: rgb(38 64 94 / 70%);
    padding: 30px 20px 20px 20px;
    border-radius: 15px;
}
#login_box .input-group-addon input{background: #ddd;}
.container #login_box {background-color: #08294400;}
.container #login_box .btn-info{background-color: #415981b3 !important;}
.header-right .time button{background-color: #11994d !important; border-radius: 6px; padding: 3px 12px;}

.MSNTH{background-color: #24507a !important; color: #fff !important; background-image: auto !important;}


table.root {
	table-layout: auto /* fixed */;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border-width: 0px 0px 0px 0px;
	vertical-align:top;
}

.son {
	position: relative;
	vertical-align:top;
	width: auto;
	border: 0 /* 1px solid black*/ ;
}


.plus {
	font-size: 15px;
	font-weight: none;
	cursor: pointer;
	/* cursor: hand; */
	color: #000000;
	font-family: 돋움체;
	vertical-align:top;
	width: auto;
	border: 0 /* 1px solid black*/ ;
}

.icon {
	font-size: 15px;
	font-weight: none;
	cursor: pointer;
	/* cursor: hand; */
	color: #000000;
	font-family: 돋움체;
	vertical-align:top;
	width: auto;
	border: 0 /* 1px solid black*/ ;
}

.plus:hover {
	color: #FF0000;
	vertical-align:top;
	width: auto;
	border: 0 /* 1px solid black*/ ;
}

.tc {
	vertical-align:top;
	width: auto;
	border: 0 /* 1px solid black*/ ;
}

.selected {
	/* padding: 2px; */
	/* border: 1px solid; */
	font-weight: bold;
	font-size: 12px;
	color: #0053e3;
	background-color:#e7e7e7;
	text-decoration: none;
	cursor: pointer;
	/* cursor: hand; */
	white-space: nowrap;
	font-family: tahoma;
	text-align: left;
	vertical-align:middle;
	width: 999px;
	border: 0 /* 1px solid black*/ ;
}

/* link */
.l {
	/* padding: 2px; */
	/* border: 1px solid; */
	font-weight: none;
	font-size: 12px;
	color: #333;
	text-decoration: none;
	cursor: pointer;
	/* cursor: hand; */
	white-space: nowrap;
	font-family: sans-serif;
	text-align: left;
	vertical-align:middle;
	width: 1000px;
	border: 0 /* 1px solid black*/ ;
}

.l:hover {
	text-decoration: underline;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border-width: 0px 0px 0px 0px;
	vertical-align:middle;
	width: auto;
	border: 0 /* 1px solid black*/ ;
}

/* selected link */
.sl {
	font-weight: none;
	font-size: 12px;
	color: #0000FF;
	text-decoration: none;
	cursor: pointer;
	/* cursor: hand; */
	white-space: nowrap;
	font-family: sans-serif;
	margin: 2px 2px 2px 2px;
	padding: 0px 0px 0px 0px;
	border-width: 0px 0px 0px 0px;
	vertical-align:middle;
	width: auto;
	border: 0 /* 1px solid black*/ ;
}

.sl:hover {
	text-decoration: underline;
	width: auto;
	border: 0 /* 1px solid black*/ ;
}
.btn{padding:5px 6px;}