@charset "utf-8";

/* layout */
#wrap{position: relative;  min-width: 1400px; }
#container{min-height: 100%;/*  margin: -70px 0 -74px;  */background-color:#fff;}
/* #container:after{content:'';position:absolute;top:70px;left:0;z-index:1;width:100%;height:70px;background:#eff6fb;border-bottom:1px solid #ceddeb;} */

#contents{position: relative; min-height: 800px; z-index:2; padding: 70px 0 0 270px;}
#contents.no-snb{padding-left: 0;}

.contents-wrap {position:relative;padding: 40px 50px 40px;}
.contents-wrap + .contents-wrap{padding-top: 0}

.contents-section{position:relative;}
.contents-section + .contents-section{margin-top:50px;}

.contents-box{border:1px solid #cacaca;padding:30px;}
.contents-box .box-section + .box-section{margin-top:20px;}

/* title */
.contents-wrap h1.contents-title{/* display:inline-block; */font-size: 22px;color:#2f363d;margin-bottom: 16px;line-height: 1;/* vertical-align: bottom; */}
.contents-wrap h1.contents-title small{color: #3681b9; font-size: 22px}
.contents-wrap h2.contents-title{position:relative;color: #434343; font-size:18px; margin-bottom: 12px; padding-left:17px;}
.contents-wrap h2.contents-title:before{content:'';position:absolute;top:9px;left:0;width:8px;height:8px;background:#434343;}
.contents-wrap h2.contents-title .title-small{color:#434343;font-size:14px;font-weight:500;}
.contents-wrap h3.contents-title{font-size:16px; color:#434343; font-weight: bold; margin-bottom: 10px;}

/* location */
.location{/* position:absolute;top:35px;right:50px; */display:inline-block;margin-left: 30px;vertical-align: bottom;line-height:  1;}
.location ul:after{content:'';display:block;clear:both;}
.location ul li{float:left;position:relative;}
.location ul li + li{margin-left:6px;padding-left:12px;}
.location ul li:before{content:'';position:absolute;top:50%;left:0;width:7px;height:11px;margin-top:-4px;background:url(../images/common/icon_location_arrow.png) no-repeat;}
.location ul li:first-child:before{display:none;}
.location a{display:block;}
.location a:hover .loc,
.location a:focus .loc{text-decoration:underline;}
.location .loc{display:inline-block;color:#697da0;font-size:14px;vertical-align:middle;}
.location .loc.loc-home{position:relative;padding-left:22px;}
.location .loc.loc-home:before{content:'';position:absolute;top:50%;left:0;width:17px;height:14px;margin-top:-7px;background:url(../images/common/icon_location_home.png) no-repeat;}
.location li:last-child .loc{/* color:#444; */font-weight:bold;}

/* FORM */
#contents .form-control.center{margin:0 auto;}
#contents .form-control.number{width:60px;}
#contents .form-control.number .inp-text{text-align:center;}
#contents .form-control.with-btn .btn{margin-right:0;min-width:80px;max-width:80px;}
#contents .form-control.with-small-btn{position:relative;padding-right:68px;}
#contents .form-control.with-small-btn .btn{position:absolute;top:0;right:0;width:60px;padding-left:0; padding-right:0;}

/* TAB */
.tabMenu:after{content: ''; display: block; clear: both}
.tabMenu > li{float: left; font-weight: bold; text-align: center}
.tabMenu > li a{display: block;}
.tabMenu.col-2 > li{width: 50%;}
.tabMenu.col-3 > li{width: 33.33333%;}
.tabMenu.col-4 > li{width: 25%;}
.tabMenu.col-5 > li{width: 20%;}

.tabMenu.tab-basic > li > a{padding: 11px 0; border: 1px solid #d5d5d5; border-bottom-color: #373737; background-color: #f7f7f7; color: #909090;}
.tabMenu.tab-basic > li:not(:first-child) a{border-left: none}
.tabMenu.tab-basic > li > a:hover,
.tabMenu.tab-basic > li > a:focus,
.tabMenu.tab-basic > li.on > a{border: 1px solid #373737; background-color: #fff; color: #373737;}

/* icon */
i.icon{display:inline-block;background-repeat:no-repeat;vertical-align:middle;}
.order .icon{margin-left:10px;background-image:url("../images/common/icon_order.png");}
.order .icon.icon_arrow_up{width:9px;height:7px;background-position:0 0;}
.order .icon.icon_arrow_down{width:9px;height:7px;background-position:-10px 0;}
.order + .order .icon{margin-left:0;}

/*=========================================================================================================================================*/
/** 
 *  버튼
 *	.btn: 버튼 기본 클래스
 *
 *   !!!주의!!!: 클래스는 1, 2, 3 순서로(옵션, 종류, 크기 순으로) 지정
 *    1. 옵션(선택)
 *        .no-radius (둥근 모서리가 없는 버튼)
 *    2. 종류(필)
 *	     .btn.btn-background: 배경이 채워진 버튼
 *	     .btn.btn-border: 테두리만 있는 버튼
 *    3. 크기(선택)
 *       .btn-small, .btn-large , btn-xlarge
 */
.btn{display: inline-block; border-radius: 3px; text-align: center; cursor: pointer; white-space: nowrap;}
.btn.no-radius{border-radius: 0;}

.btn.btn-right{position:absolute;top:-7px;right:0;}

.btn.btn-file{width:22px;height:23px;background:url(/images/common/btn_file.gif) no-repeat;text-indent:-999em;} /* 첨부파일 */

/*** 버튼 - 채워진 형태 ***/
.btn.btn-background{min-width: 70px; height: 38px; padding: 0 20px; border: none; background: #666; color: #fff !important; font-size: 14px; font-weight: bold; line-height: 38px;}
.btn.btn-background:hover,.btn.btn-background:focus,.btn.btn-background:active{background: #333;}
/* 크기*/
.btn.btn-background.btn-small{min-width: 60px; padding: 0 20px; height: 34px; font-size: 14px; line-height: 34px;}
.btn.btn-background.btn-large{min-width: 70px; height: 44px; padding: 0 25px; font-size: 16px; line-height: 44px;}
.btn.btn-background.btn-xlarge{width: 100%; height: 44px; font-size: 16px; line-height: 44px;}
/* 색상*/
.btn.btn-background.btn-gray{background: #4f555a}
.btn.btn-background.regist{background: #2760a7} /* 등록 */
.btn.btn-background.list{background: #444} /* 목록 */
.btn.btn-background.add{background: #6aa837} /* 추가 */
.btn.btn-background.search{background: #666} /* 찾기 */
.btn.btn-background.delete{background: #e74139} /* 삭제 */
.btn.btn-background.modify{background: #09a0c3} /* 수정 */
.btn.btn-background.check{background: #e87a2c} /* 중복검사 */
.btn.btn-background.cancel{background: #888} /* 취소 */
.btn.btn-background.close{background: #888} /* 닫기 */
.btn.btn-background.save{background: #004970} /* 저장 */
.btn.btn-background.download{background: #004970} /* 다운로드 */
.btn.btn-background.prev{background: #30739c} /* 이전 */
.btn.btn-background.next{background: #2878be} /* 다음 */
.btn.btn-background.setting{background: #4160b4} /* 설정 */
.btn.btn-background.view{background: #4578c7} /* 보기 */
.btn.btn-background.query{background: #3d8f60} /* 데이터 조회 */
.btn.btn-background.device-sync{min-width:190px;padding:0;background: #12a3ab} /* 디바이스 정보 동기화 */
.btn.btn-background.device-delete{min-width:190px;padding:0;background: #e64d62} /* 디바이스 삭제 */
.btn.btn-background.device-refresh{min-width:190px;padding:0;background: #eaeef0;border:1px solid #116591;color:#0f567b !important;line-height:42px;} /* 디바이스 정보 갱신 */
.btn.btn-background.device-refresh:after{content:'';display:inline-block;width:21px;height:18px;margin-top:-3px;margin-left:10px;background:url(../images/common/icon_refresh.png) no-repeat;vertical-align:middle;}
.btn.btn-background.alarm-record{background: #3d8f60} /* Alarm이력 */
.btn.btn-background.alarm-setting{background: #1f6db1} /* Alarm수신설정 */
.btn.btn-background.file-search{position: relative; height: 34px; padding: 10px 13px; background: #9e9e9e; line-height: 1; vertical-align: middle;}
.btn.btn-background.file{min-width: 75px; padding: 10px 13px; line-height: 1}
.btn.btn-background.file.add{background: #678494}
.btn.btn-background.file.del{background: #787878}
.btn.btn-background.btn-link{padding: 0 30px 0 20px; font-size: 14px; font-weight: normal; background: #333 url(../images/common/icon_arrow_right.gif) no-repeat 94% 50%;}

/*** 버튼 - 라인 형태 ***/
.btn.btn-border{padding: 8px 25px; border: 1px solid #666; background: #fff; color: #666; font-size: 13px;}
/* 크기 */
.btn.btn-border.btn-small{padding: 4px 20px; font-size: 12px}
.btn.btn-border.btn-large{padding: 15px 30px; font-size: 16px}
/* 색상 */
.btn.btn-border.btn-blue{border-color: #649ed9}
.btn.btn-border.btn-green{border-color: #77c035}
.btn.btn-border.btn-gray{border-color: #8a8d91}
.btn.btn-border.btn-pink{border-color: #e58a9e}
.btn.btn-border.write{border-color: #1f6db1; color: #1f6db1;}
.btn.btn-border.modify{border-color: #214b64; color: #214b64;}
.btn.btn-border.delete{border-color: #888; color: #888;}
.btn.btn-border.list{border-color: #1f6db1; color: #1f6db1;}
.btn.btn-border.cancel{border-color: #888; color: #888;}
.btn.btn-border.save{border-color: #1f6db1; color: #1f6db1;}
.btn.btn-border.btn-download{padding: 9px 35px 9px 20px; border-color: #777; color: #333; font-size: 14px; background: url(../images/common/icon_file_download.gif) no-repeat 94% 50%;}


/** 
 *  버튼 그룹
 *	.btn-group: 버튼 그룹 기본 클래스
 *	.btn-group .left-group: 왼쪽 정렬 버튼 그룹
 *	.btn-group .right-group: 오른쪽 정렬 버튼 그룹
 *	.btn-group .center-group: 중앙 정렬 버튼 그룹
 */
.btn-group{display:table;width:100%;table-layout:fixed;margin-top:20px;}
.btn-group.top{margin-top:0;margin-bottom:20px;}

.btn-group [class$="group"]{display:table-cell;vertical-align:middle;}
.btn-group .left-group{text-align:left;}
.btn-group .right-group{text-align:right;}
.btn-group .center-group{text-align:center;}
.btn-group .left-group a{margin-right:4px;}
.btn-group .right-group a{margin-left:4px;}
.btn-group .center-group a{margin:0 2px;}

/*=========================================================================================================================================*/
/** 
 *	폼요소
 *  .form-control: 폼요소를 감싸는 기본 클래스. 폼요소의 너비를 지정하기 위한 용도.
 *
 *   !!!주의!!!: 클래스는 1, 2 순서로(옵션, 길이 순으로) 지정
 *     1. 옵션
 *      .horizonal: .form-control을 가로로 정렬함
 *      .no-radius: .form-control안의 모든 폼요소에 둥근 모서리가 없도록 지정함
 *      .with-btn: 버튼과 함께 있는 폼요소를 감싸기 위함(버튼은 80px로 고정)
 *      .date: datepicker와 같은 날짜 선택 아이콘이 있는 폼요소를 감싸기 위함
 *      .email: 이메일 요소를 감싸기 위함(기본: select box가 있는 이메일)
 *         .email.no-select: 이메일 요소를 감싸기 위함(select box가 없는 이메일)
 *      .phone: 유선전화, 휴대전화 등 전화번호를 감싸기 위함
 *     2. 길이(지정하지 않을 경우 100%)
 *      .xsmall(100px), .small(240px), .medium(360px), .large(480px)
 *
 */ 
.form-control{width: 100%; max-width: 100%;}
.form-control+.form-control{margin-top: 10px;}
.form-wrap{display:inline-block;margin-left:15px;}


/** 옵션 **/
.form-control.horizonal{display: inline-block; width: auto; margin-bottom: 0; margin-right: 3px; vertical-align: middle;}
.form-control.horizonal+.form-control.horizonal{margin-top: 0;}
.form-control.no-radius *{border-radius: 0 !important;}
.form-control.with-btn{position: relative; padding-right: 84px;}
.form-control.with-btn .btn{position: absolute; top: 0; right: 0; width: 80px; padding-left: 0; padding-right: 0;}
.form-control .btn{margin-right: 3px;}
/* 날짜 아이콘이 있는 폼요소 */
.form-control.date{position: relative; padding-right: 25px}
.form-control.date img{position: absolute; top: 50%; right: 0; margin-top: -12px; cursor: pointer;}
/* 이메일 */
.form-control.email{*zoom: 1;}
.form-control.email::after{content: ''; display: block; clear: both;}
.form-control.email .inp-text{float: left; width: 32%;}
.form-control.email .email-at{float: left; width: 5%; height: 100%; margin-top: 7px; text-align: center;}
.form-control.email select{float: left; width: 30%; margin-left: 1%;}
.form-control.email.no-select .inp-text{float: left; width: 47%;}
.form-control.email.no-select .email-at{float: left; width: 6%; height: 100%; margin-top: 7px; text-align: center;}

/* 전화번호 */
.form-control.phone{*zoom: 1;}
.form-control.phone::after{content: ''; display: block; clear: both;}
.form-control.phone select{float: left; width: 30%;}
.form-control.phone .phone-bar{float: left; width: 5%; height: 100%; margin-top: 2px; font-size: 20px; text-align: center;}
.form-control.phone .inp-text{float: left; width: 30%;}
/** 크기 **/
.form-control.xsmall{width: 120px;}
.form-control.small{width: 240px;}
.form-control.medium{width: 360px;}
.form-control.large{width: 480px;}
.form-control.xlarge{width: 600px;}

/* 라벨이 있는 폼요소 */
.form-group.label{display: table; width: 100%;}
.form-group.label .form-control{display: table-row;}
.form-group.label label{display: table-cell; width: 25%;}
.form-group.label input,.form-group.label select{display: table-cell; margin-bottom: 5px;}

/* placeholder */
::-webkit-input-placeholder{color: #a7a7a7;}
:-moz-placeholder{color: #a7a7a7;}
::-moz-placeholder{color: #a7a7a7;}
:-ms-input-placeholder{color: #a7a7a7;}

/* input (type=text, password) */
input.inp-text{width: 100%; height: 34px; padding: 0 6px; font-size: 14px; background-color: #fff; border: 1px solid #ccc; border-radius: 3px; vertical-align: middle;}
input.inp-text.small{height: 28px; padding: 0 6px; font-size: 13px;}
input.phone-text{width: 70px; height: 34px; background-color: #fff; border: 1px solid #ccc; text-align:center; }

/* input (type=file) */
input.file{width:240px; height: 34px; padding: 4px 6px; font-size: 14px; background-color: #fff; border: 1px solid #ccc; border-radius: 3px; vertical-align: middle;}

.inp-text[type='file']::-ms-value{background: transparent;border: none;}
.inp-text[type='file']::-ms-browse {background: #e7e7e7;border: 1px solid #ccc;}

/* input (type=checkbox) */
input.chk{vertical-align:middle;}

/* input (type=radio) */
input.rdo{vertical-align:middle;}

/* label */
label.lbl{vertical-align:middle;}
input.rdo + label.lbl,
input.chk + label.lbl{margin-left:4px;}

/* textarea */
textarea.txtarea{resize: vertical; width: 100%; padding: 5px; font-size: 14px; border: 1px solid #ccc; border-radius: 3px}

/* select box */
select.sel{width: 100%; height: 34px; padding: 0 6px;  border: 1px solid #ccc; border-radius: 3px;color: #666; font-size: 14px; vertical-align: middle;}
select.sel.small{height: 28px; padding: 0 6px; font-size: 13px;}

/*=========================================================================================================================================*/

/* 검색영역 */
.search-area{position: relative; margin-bottom: 10px}
.search-area .total{float:left; margin-top: 7px; color: #666; font-size: 15px; font-weight: bold}
.search-area .total strong{color: #f34b4b;}
.search-area .total .bar{font-size: 12px; font-weight: normal}
.search-area .total .number{font-size: 14px; font-weight: normal}
.search-area .search-wrap{float: right; position: relative;}
.search-area .search-wrap select.sel{width: 130px; margin-right:4px;}
.search-area .search-wrap input.inp-text{width:200px;margin-right:-6px;padding-right:2px;}
.search-area .search-wrap .btn.search{background-color: #788189;/* padding: 7px 30px;*/ vertical-align: middle;}
/* 검색일자 */
.search-area .search-date{display:inline-block;width:auto;margin-right:4px;}
.search-area .search-date .form-control{width:140px;}
.search-area .search-date .form-control .inp-text{width:100%;margin-right:0;}

/* pagination */
.pagination{margin-top: 30px; text-align: center}
.pagination .pagination-wrap{display: inline-block;}
.pagination .pagination-wrap:after{content: ''; display: block; clear: both;}
.pagination a,.pagination img{vertical-align: top;}
.pagination a{float:left; width:29px; height:29px; margin-right: 4px; line-height:1;}
.pagination a:last-child{margin-right: 0}
.pagination a.num{display: inline-block; width: 29px; height: 29px; padding: 6px 5px; border: 1px solid #d4d4d4; color: #666666; font-weight: bold; font-size: 15px}
.pagination a.num.on{border-color: #d4d4d4; background-color: #f04a4a; color: #ffffff}
/*크기가 작은 pagination */
.pagination.small{margin-top: 20px;}
.pagination.small a{float:left; width: 25px; height: 25px;}
.pagination.small .num{padding: 5px 0; border: 1px solid #d4d4d4; font-size: 13px;}
.pagination.small .num.on{background: #f04a4a; color: #fff}
.pagination.small .prev,
.pagination.small .next{width: 25px}
.pagination img{max-width: 100%;}

/*** table ***/
/* 목록 */
table.board-list{width:100%; border-top: 2px solid #141414;}
table.board-list th,
table.board-list td{border: 1px solid #dcdee2; padding:9px 12px;}
table.board-list th{background:#f2f2f2; color: #333; font-size: 16px; text-align: center;}
table.board-list td{color: #666; font-size: 15px; text-align: center;}
table.board-list thead th{border-bottom-color: #b9bcc3;}
table.board-list a.text-link{color: #666;}
table.board-list a.text-link:hover,
table.board-list a.text-link:focus{text-decoration:underline;}
/* 작은 테이블 */
table.board-list.table-small th,
table.board-list.table-small td{height: 40px;padding: 4px 10px;}
table.board-list.table-small th{font-size: 14px;}
table.board-list.table-small td{font-size: 13px;}

/* 상세보기, 등록 */
table.board-write{width: 100%; border-top: 2px solid #444; table-layout: fixed;}
table.board-write th,
table.board-write td{height: 55px; padding: 10px 15px; border: solid #bebebe; border-width: 1px 0 1px 1px;}
table.board-write th{background:#f2f2f2; color: #333; font-size: 16px; font-weight: bold; text-align:center;}
table.board-write td{color: #333; font-size: 15px; text-align:left;}
table.board-write th.left{text-align: left;}
table.board-write td.center{text-align: center;}
table.board-write th:first-child,table.board-write td:first-child{border-left: none;}
table.board-write th.border-left,
table.board-write td.border-left{border-left:1px solid #bebebe;}
table.board-write th strong{color:#264f8c;}
table.board-write.text-left th,table.board-write.text-left td{text-align: left !important;} /* 전체 왼쪽 정렬하는 옵션*/
table.board-write .text-required{display:inline-block;position:absolute;margin-left:2px;color: #f14b4b; font-size: 16px; font-weight: bold;vertical-align: middle;}
table.board-write .btn-group{margin-top:10px;}
/* 작은 테이블 */
table.board-write.table-small th,
table.board-write.table-small td{height: 44px; padding: 4px 10px;}
table.board-write.table-small th{font-size: 14px;}
table.board-write.table-small td{font-size: 13px;}

/* 파일 리스트 */
.file-upload .file-list{margin-top: 10px; padding-top: 10px; border-top: 1px solid #e1e1e1}
.file-upload .file-list .file-wrap{font-weight: bold}
.file-upload .file-list .file-wrap + .file-wrap{margin-top: 5px}
.file-upload .file-list .file-del{margin-left: 5px; width: 27px; height: 20px; outline: none; border: none; background: url(../images/common/icon_close.gif) no-repeat; text-indent: -999em}

/***** 기본 테이블 *****/
.table-basic{width:100%; table-layout: fixed; border-top: 2px solid #141414; line-height: 1.3}
.table-basic th,.table-basic td{border: solid #dcdee2; border-width: 1px 0 1px 1px;}
.table-basic th.left,.table-basic td.left{text-align: left;}
.table-basic.text-left th,.table-basic.text-left td{text-align: left !important;}
.table-basic th:first-child,.table-basic td:first-child{border-left: none;}
.table-basic thead th{padding:13px 15px; border-bottom: 1px solid #b9bcc3; color: #333; font-size: 16px}
.table-basic tbody td{padding:13px 15px; color: #666666; font-size: 15px; text-align: center}
/* 양쪽 선이 있는 테이블 */
.table-basic.table-bordered th,.table-basic.table-bordered td{border: 1px solid #dcdee2;}
/* 작은 테이블 */
.table-basic.table-small th,.table-basic.table-small td{height: 40px; padding: 4px 10px; font-size: 13px;}

/***** 기본 테이블2 *****/
.table-basic2{width: 100%; table-layout: fixed; line-height: 1.3}
.table-basic2 th,.table-basic2 td{height: 55px; padding: 10px 15px; border: solid #bebebe; border-width: 1px 0 1px 1px; color: #333; font-size: 14px; text-align: center}
.table-basic2 th.left,.table-basic2 td.left{text-align: left;}
.table-basic2.text-left th,.table-basic2.text-left td{text-align: left !important;} /* 전체 왼쪽 정렬하는 옵션*/
.table-basic2 th:first-child,.table-basic2 td:first-child{border-left: none;}
.table-basic2 th{background-color: #ebebeb;/* word-break: keep-all;*/}
/***** 기본 테이블3 *****/
.table-basic3{width: 100%; table-layout: fixed; line-height: 1.3}
.table-basic3 th,.table-basic3 td{height: 20px; padding: 10px 15px; border: solid #bebebe; border-width: 1px 0 1px 1px; color: #333; font-size: 14px; text-align: center}
.table-basic3 th.left,.table-basic3 td.left{text-align: left;}
.table-basic3.text-left th,.table-basic3.text-left td{text-align: left !important;} /* 전체 왼쪽 정렬하는 옵션*/
.table-basic3 th:first-child,.table-basic3 td:first-child{border-left: none;}
.table-basic3 th{background-color: #ebebeb;/* word-break: keep-all;*/}
/* 양쪽 선이 있는 테이블 */
.table-basic2.table-bordered th,.table-basic2.table-bordered td{border: 1px solid #bebebe;}
/* 줄무늬 행 테이블 */
.table-basic2.table-striped tr:nth-child(odd) td{background-color: #fff}
.table-basic2.table-striped tr:nth-child(even) td{background-color: #f7f7f7}
/* 진한 선이 있는 테이블 */
.table-basic2.table-bold th,.table-basic2.table-bold td{border-top: none;}
.table-basic2.table-bold tbody tr:last-child > *{border-bottom: none;}
.table-basic2.table-bold{border-top: 1px solid #3b3b3b; border-bottom: 1px solid #3b3b3b;}
/* 진한 선이 있는 테이블 */
.table-basic3.table-bold th,.table-basic3.table-bold td{border-top: none;}
.table-basic3.table-bold tbody tr:last-child > *{border-bottom: none;}
.table-basic3.table-bold{border-top: 1px solid #3b3b3b; border-bottom: 1px solid #3b3b3b;}
/* 작은 테이블 */
.table-basic2.table-small th,.table-basic2.table-small td{height: 40px; padding: 4px 10px; font-size: 13px;}

/* Top box */
.top-box{border:1px solid #cacaca;border-top:3px solid #1f6db1;margin-bottom:50px;padding:30px;}
.top-box:after{content:'';display:block;clear:both;}

.top-box .box-col{float:left;}
.top-box .box-col.col-right{text-align:right;}

.top-box.box-col-2 .box-col{width:50%;}
.top-box.box-col-3 .box-col{width:33.33333%}

.top-box .box-text{display:block;color:#333;font-size:18px;line-height:1.6;}
.top-box .box-text strong{color:#264f8c;font-weight:bold;vertical-align:text-bottom;}
.top-box .box-text strong + .form-control{margin-left:10px;}
.top-box .box-date{display:inline-block;margin-top:4px;color:#333;font-size:14px;}
.top-box .box-date strong{font-weight:bold;}
.top-box .btn-group{margin:0;}
.top-box .btn-group + .btn-group{margin-top:10px;}

.info-box{margin: 30px 0; padding: 20px 20px 20px 63px; background: #f0f5f8 url(../images/common/ban_icon.png) no-repeat 20px 22px; border: 1px solid #d9dfe2;}
.info-box p{font-size: 14px;}
.info-box p + p{margin-top: 3px;}

/* POPUP */
/**
 *	팝업
 *   - modal popup: 팝업 열기(.modalOpen), 팝업 닫기(.modalClose) 클래스 부여
 */
.modal-bg{opacity: 0.4; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 999}

.popup{display:none; position: fixed; top: 50%; left: 50%; z-index: 1000; transform: translate(-50%,-50%); -ms-transform: translate3d(-50%,-50%,0px);}
.popup.on{display:block;}
.popup .popup-wrap{position: relative;width: 515px; border: 1px solid #ccc; padding:2px; background-color: #fff}

.popup .pop-header{position: relative; height: 55px; padding: 16px 20px; background-color: #575e70;}
.popup .pop-header .btn-close{position: absolute; right: 20px; top: 50%; margin-top: -7px; width: 14px; height: 14px; background: url(../images/common/btn_close.png) no-repeat; text-indent: -999em;}
.popup .pop-header .header-title{color: #fff; font-size: 18px;}
.popup .pop-content{padding: 30px 20px;}
.popup .pop-content .content-title{margin-bottom: 10px; color: #333; font-size: 20px; margin-bottom: 10px;}
.popup .pop-content p{margin-bottom: 10px}
.popup .pop-section{margin-top:20px;}
.popup .btn-group{border-top: 1px solid #ccc; background-color: #fbf9fa; margin: 0; padding: 10px 0;}
.popup .table-scroll{max-height:260px;overflow-y: auto;}
.popup .search-area{text-align:center;}
.popup .search-wrap{float:none;display:inline-block;}

.modal{display:none; position: fixed; top: 50%; left: 50%; z-index: 1000; transform: translate(-50%,-50%); -ms-transform: translate3d(-50%,-50%,0px);animation:animatetop 0.4s;}
.modal.on{display:block;}
.modal .modal-wrap{position: relative;width: 550px; background-color: #fff}

.modal .modal-header{position: relative; height: 53px; padding: 16px 20px; background-color: #3a73c4;}
.modal .modal-header .header-title{color: #fff; font-size: 18px;}
.modal .modal-content{padding: 30px;border: 4px solid #3a73c4; border-top:0; }
.modal .modal-content .content-title{margin-bottom: 10px; color: #333; font-size: 20px; margin-bottom: 10px;}
.modal .modal-section{margin-top:20px;}
.modal .modal-btn-group{margin-top:30px; text-align: center;}
.modal .table-scroll{max-height:260px;overflow-y: auto;}
.modal .modal-info{padding:28px 40px;border:1px solid #c8d2e1;border-radius:10px;background:#eef2f7;}
.modal .modal-info p{color:#323232;font-size:16px;letter-spacing:-.02em;}
.modal .modal-info p + p{margin-top:10px;}
.modal .modal-info p strong{color:#3a73c4;font-size:20px;font-weight:bold;}
.modal .modal-info p em{margin-left:4px;font-size:18px;font-weight:bold;}
.modal .modal-top-box{display:table;width:100%;margin-bottom:20px;padding:10px 20px;border:1px solid #d1d1d1;border-radius:3px;}
.modal .modal-top-box span{display:table-cell;vertical-align:middle;}
.modal .modal-top-box .box-title{width:80px;color:#636363;font-size:15px;}
.modal .modal-top-box .box-desc{color:#323232;font-size:15px;font-weight:500;}
.modal .modal-result{margin-top:20px;}
.modal .modal-result .result-title{margin-bottom:10px;color:#323232;font-size:20px;text-align:center;}
.modal .modal-result .result-box{background:#2c9fda;padding:18px 10px;text-align:center;}
.modal .modal-result .result-box span{margin:0 6px;color:#fff;font-size:24px;font-weight:500;}
.modal .modal-result .result-box p{color:#fff;font-size:18px;}
.modal .modal-map-box{width:100%;height:350px;border:1px solid #bfbfbf;border-radius:3px;background:#f2ede7;}
.modal .modal-close{position: absolute; right: 0; top: 0; background: #204770;}
.modal .modal-close .btn-close{position:relative;display:inline-block;width:53px; height: 53px;background:url('/site/wiseodor/kor/images/common/btn_close.png') no-repeat 50% 50%;vertical-align:top;}

.modal .modal-table-scroll{max-height:300px;overflow-y:auto;/* border-left:1px solid #e2e3e6;border-right:1px solid #e2e3e6; */}

.modal .modal-board-list{width:100%; border-top: 1px solid #616161;}
.modal .modal-board-list th,
.modal .modal-board-list td{border-left: 1px solid #e2e3e6; border-bottom: 1px solid #e2e3e6; padding:3px 20px;height:40px;font-size:15px;text-align:center;}
.modal .modal-board-list th:first-child,
.modal .modal-board-list td:first-child{border-left: none;}
.modal .modal-board-list th{background:#eef2f7;color:#636363;font-weight:400;}
.modal .modal-board-list td{color:#323232;font-weight:500;}
.modal .modal-board-list thead th{border-bottom-color: #b4d0f3;}

.modal .modal-board-list.selectable-list tbody tr{cursor:pointer;}
.modal .modal-board-list.selectable-list tbody tr:hover td,
.modal .modal-board-list.selectable-list tbody tr.selected td{background:#ccdff7;}

.modal .modal-board-view{width:100%;border-top: 1px solid #616161;table-layout:fixed;}
.modal .modal-board-view + .modal-board-view{margin-top:-1px;border-top-color:#cececf;}
.modal .modal-board-view th,
.modal .modal-board-view td{border-left:1px solid #e2e3e6; border-bottom:1px solid #e2e3e6;padding:3px 20px;height:40px;font-size:15px;}
.modal .modal-board-view th:first-child,
.modal .modal-board-view td:first-child{border-left: none;}
.modal .modal-board-view th{background:#eef2f7;color:#636363;font-weight:400;text-align:center;}
.modal .modal-board-view th[rowspan]{background:#dce5f0;}
.modal .modal-board-view td{color:#323232;font-weight:500;text-align:left;}
.modal .modal-board-view th.left,
.modal .modal-board-view td.left{text-align: left; padding-left: 15px; padding-right: 15px;}

.modal.modal-action-actuator .modal-wrap,
.modal.modal-view-device .modal-wrap,
.modal.modal-view-measuring .modal-wrap,
.modal.modal-view-sensor .modal-wrap,
.modal.modal-view-actuator .modal-wrap{width:700px;}

/* 작동기 팝업 */
.modal.modal-action-actuator .modal-info{margin-top:30px;padding:22px 30px;}
.modal.modal-action-actuator .modal-info p{font-size:20px;text-align:center;}
.modal.modal-action-actuator .status{display:inline-block;width:93px;height:45px;margin:0 5px;border-radius:3px;color:#fff;font-size:24px;font-weight:bold;line-height:45px;text-align:center;vertical-align:baseline;}
.modal.modal-action-actuator .status.status-on{background:#41af46;}
.modal.modal-action-actuator .status.status-off{background:#6d6d6d;}

/* 위치 팝업 */
.modal.modal-map .modal-wrap{width:900px;}
.modal.modal-map .modal-map-wrap{position:relative;}
.modal.modal-map .form-control{position:absolute;top:20px;right:20px;z-index:10;width:47%;padding-right:80px;border:1px solid #204770;}
.modal.modal-map .form-control .btn.search,
.modal.modal-map .form-control .inp-text{border-radius:0;}
.modal.modal-map .form-control .btn.search{background:#204770;}
.modal.modal-map .modal-map-wrap + .modal-top-box,
.modal.modal-map .modal-map-box + .modal-top-box{margin-top:10px;background:#f2f2f2;}

/*  윈도우 팝업 */
.window-popup{padding:40px;}

/*=========================================================================================================================================*/

/* 2018-12-17 KSM 아이디/비밀번호 찾기 */
.find-wrap{max-width:900px;margin:0 auto;}
.find-tabs{border-bottom:1px solid #d6dadd;border-left:1px solid #d6dadd;}
.find-tabs li{float:left;overflow:hidden;position:relative;width:50%;}
.find-tabs li a{height: 55px;line-height: 55px; border:1px solid #d6dadd;background:#fbfbfb;border-left:none;text-align:center;color:#666;display:block;font-size:18px;font-weight:500;}
.find-tabs li.active a{background:#fff;border-bottom:none;border-top:4px solid #083d83; color: #333;}
.find-tab-container{border-right:1px solid #d6dadd;border-left:1px solid #d6dadd;border-bottom:1px solid #d6dadd;overflow:hidden;background:#fff;margin-top:-2px;}
/*.find-tab-content{display: none;}*/
.find-tab-content .form-info{padding: 40px 20px; text-align: center;}
.find-tab-content .form-info .form-info-wrap{display: table; margin: 0 auto; height: 53px; background: url(../images/common/icon_find.png) no-repeat; padding-left: 95px;}
.find-tab-content .form-info .form-info-wrap *{display: table-cell; vertical-align: middle; color: #666; font-size: 16px; line-height: 1.4; text-align: left; font-weight: 400;}
.find-tab-content .form-box{background-color: #e7f0f7; border-top: 1px solid #d6dadd;}
.find-tab-content .form-box .form-box-wrap{padding: 50px 20px; max-width: 490px; margin: 0 auto;}
.find-tab-content .form-box .form-check{display: inline-block; margin-bottom: 25px;}
.find-tab-content .form-box .form-check input[type="radio"]:not(:first-of-type){margin-left: 50px;}
.find-tab-content .form-box .form-check label{font-size: 16px; color: #3f3f3f; font-weight: 400;}
.find-tab-content .form-box .form-group .inp_text{height: 38px; font-size: 15px; border-color: #d4d4d4;}
.find-tab-content .form-box .btn-confirm,
.find-tab-content .form-box .btn-login{font-weight: 400; background-color: #304566; border-radius: 6px}
.find-tab-content .form-box .find-result-title{padding:10px 0;border-bottom:1px solid #8b9aae;}
.find-tab-content .form-box .find-result-title span{color:#083d83;font-size:18px;font-weight:bold;}
.find-tab-content .form-box .find-result-body.long-body{padding:20px 0;}
.find-tab-content .form-box .find-result-body .result-id{display:table;width:100%;padding:10px 0;border-bottom:1px solid #8b9aae;}
.find-tab-content .form-box .find-result-body .result-id .text-id,
.find-tab-content .form-box .find-result-body .result-id .text-date{display:table-cell;vertical-align:middle;}
.find-tab-content .form-box .find-result-body .result-id .text-id{color:#3f3f3f;font-size:16px;font-weight:bold;}
.find-tab-content .form-box .find-result-body .result-id .text-date{color:#626262;font-size:14px;text-align:right;}
.find-tab-content .form-box .find-result-body .result-desc{margin-top:10px;color:#626262;font-size:14px;letter-spacing:-.03em;word-break:keep-all;}
.find-tab-content .form-box .find-result-body .result-desc strong{margin-right:4px;color:#3f3f3f;font-size:16px;}
.find-tab-content .form-box .find-result-body .result-info{margin-top:10px;padding:10px 0;color:#626262;font-size:14px;}
.find-tab-content .form-box .find-result-body .result-info strong,
.find-tab-content .form-box .find-result-body .result-info span{display:inline-block;vertical-align:middle;}
.find-tab-content .form-box .find-result-body .result-info strong{width:60px;font-weight:400;}
.find-tab-content .form-box .find-result-body .result-info span.info-id{font-weight:bold;}

/**
 *	이용약관
 */
.terms-box{}
.terms-box .terms-title{padding: 15px 20px; background: #f5f5f5; border: 1px solid #c2c2c2; border-bottom: 1px solid #d3d3d3; color: #034273; font-weight: bold;}
.terms-box .terms-content{/*height: 360px; overflow-y: auto;*/ border: 1px solid #c2c2c2; border-top: none; padding: 20px; line-height: 1.5;}

/**
 *	개인정보처리방침
 */
.privacy-box{line-height: 1.6;}
.privacy-box .privacy-title-01{padding-top: 8px;background:url(../images/common/title_bar_01.png) no-repeat;color:#333;font-size:20px;font-weight: bold;}
.privacy-box .privacy-title-02{margin-top: 20px; padding:2px 0 2px 20px;background:url(../images/common/title_bar_02.png) no-repeat 0 50%;background-size:15px;color:#333;font-size:17px;font-weight: bold;}
.privacy-box .privacy-title-03{margin-top: 20px; padding-left: 16px;background:url(../images/common/title_bar_03.png) no-repeat 1px 50%;color:#000;font-size:15px;font-weight: bold;}
.privacy-box p{margin: 16px 0; font-size: 14px;}
.privacy-box .privacy-list{margin:14px 0 8px;padding:0;text-align:left;}
.privacy-box .privacy-list ul{margin:8px 0;}
.privacy-box .privacy-list li{margin:0;padding-left:15px;background:url(../images/common/bul_list_01.png) no-repeat 0 5px;}
.privacy-box .privacy-list li li{background-image:url(../images/common/bul_list_02.png);}

/**
 *	데이터조회
 */
.chart-box{border:1px solid #cacaca;padding:50px;}
.chart-box .text-desc{color:#333;font-size:18px;font-weight:500;text-align:center;}

.legend-box{display:table;width:100%;table-layout:fixed;}
.chart-legend{display:table-cell;border:1px solid #9b9b9b;padding:20px 20px;vertical-align:top;}
.chart-legend .legend-wrap{position:relative;/* padding-left:100px; */}
.chart-legend .legend-title{margin-bottom:10px;font-size:18px;line-height:18px;color:#264f8c;font-weight:bold;}
.chart-legend .legend-option{position:relative;}


/* 모니터링 */
.scroll-box{margin: -40px -50px -40px;/* margin:-80px -50px -40px -225px */}
.monitoring-box{position:relative;width:1920px;/* height:1009px; *//* height:952px; */height:calc(100vh - 70px);}
.monitoring-box .monitoring-head{display:table;position:absolute;top:0;left:0;right:0;width:100%;height:62px;padding:0 30px;background:url(../images/monitoring/bg_monitoring_head.jpg) no-repeat 0 0 / cover;}
.monitoring-box .monitoring-head .logo-area{display:table-cell;vertical-align:middle;}
.monitoring-box .monitoring-head .logo-area:after{content:'';display:block;clear:both;}
.monitoring-box .monitoring-head .loc-logo{display:inline-block;vertical-align:middle;margin-right:20px;}
.monitoring-box .monitoring-head .wise-logo{display:inline-block;vertical-align:middle;}

.monitoring-box .monitoring-head .menu-area{display:table-cell;text-align:right;vertical-align:middle;}
.monitoring-box .monitoring-head .menu-area:after{content:'';display:block;clear:both;}
.monitoring-box .monitoring-head .menu-list{display:inline-block;vertical-align:middle;}
.monitoring-box .monitoring-head .menu-list:after{content:'';display:block;clear:both;}
.monitoring-box .monitoring-head .menu-list li{position:relative;float:left;}
.monitoring-box .monitoring-head .menu-list li + li{margin-left:18px;padding-left:18px;}
.monitoring-box .monitoring-head .menu-list li + li:before,
.monitoring-box .monitoring-head .menu-list li + li:after{content:'';position:absolute;top:50%;width:1px;height:14px;margin-top:-7px;}
.monitoring-box .monitoring-head .menu-list li + li:before{left:0;background:#191e24;}
.monitoring-box .monitoring-head .menu-list li + li:after{left:1px;background:#465462;}
.monitoring-box .monitoring-head .menu-list li a{color:#c5c8cd;font-size:20px;line-height:1;font-weight:500;}

.monitoring-box .monitoring-head .btn-fullscreen{position:relative;display:inline-block;margin-left:0px;width:60px;height:62px;background:#212733;vertical-align:middle;}
.monitoring-box .monitoring-head .btn-fullscreen span{position:absolute;top:0;left:0;right:0;bottom:0;background:url(../images/monitoring/icon_fullscreen.png) no-repeat 50% 50%;font-size:0;}
.monitoring-box .monitoring-head .btn-fullscreen.full-on span{background-image:url(../images/monitoring/icon_fullscreen_on.png);}

/* .monitoring-box .monitoring-head .btn-alarm{position:relative;display:inline-block;margin-left:25px;width:60px;height:62px;background:#212733;vertical-align:middle;}
.monitoring-box .monitoring-head .btn-alarm span{position:absolute;top:0;left:0;right:0;bottom:0;background:url(../images/monitoring/icon_sound_on.png) no-repeat 50% 50%;font-size:0;}
.monitoring-box .monitoring-head .btn-alarm.alarm-off span{background-image:url(../images/monitoring/sound_icon_off.png);} */

.monitoring-box .monitoring-head .datetime{display:inline-block;margin-left:40px;color:#e3e4e6;font-size:15px;vertical-align:middle;}

/* .monitoring-box .monitoring-body .btn-alarm{float: right; padding-right: 50px; padding-top: 30px;} */
/* .monitoring-box .monitoring-body .btn-alarm span{position:absolute;top:0;left:0;right:0;bottom:0;background:url(../images/monitoring/icon_sound_on.png) no-repeat 50% 50%;font-size:0;} */
/* .monitoring-box .monitoring-body .btn-alarm.alarm-off span{background-image:url(../images/monitoring/icon_sound_off.png);} */

.monitoring-box .monitoring-body{position:absolute;/* top:62px; */top:0;left:0;right:0;bottom:0;background-repeat:no-repeat;/*background-size:cover;*/}
.monitoring-box .monitoring-body .info-layer{position:absolute;width:225px;}
.monitoring-box .monitoring-body .info-layer .layer-head{display:table;width:100%;height:45px;padding:0 15px;border:1px solid #1e2c0b;border-bottom:none;border-top-left-radius:10px;border-top-right-radius:10px;}
.monitoring-box .monitoring-body .info-layer .layer-head .info-title{display:table-cell;color:#fff;font-size:18px;font-weight:1.2;font-weight:bold;vertical-align:middle;}
.monitoring-box .monitoring-body .info-layer .layer-head .direction{display:table-cell;width:35px;height:35px;background:url(../images/monitoring/bg_direction.png) no-repeat 50% 50%;vertical-align:middle;text-align:center;}

.monitoring-box .monitoring-body .info-layer .layer-body{background:rgba(255,255,255,.8);border-right:1px solid #1e2c0b;border-left:1px solid #1e2c0b;}
.monitoring-box .monitoring-body .info-layer .layer-body .body-section{display:table;width:100%;padding:10px 15px;}
.monitoring-box .monitoring-body .info-layer .layer-body .body-section + .body-section{border-top:1px solid #a0a5ab;}
.monitoring-box .monitoring-body .info-layer .layer-body .body-section .section-left,
.monitoring-box .monitoring-body .info-layer .layer-body .body-section .section-right{display:table-cell;vertical-align:middle;}
.monitoring-box .monitoring-body .info-layer .layer-body .body-section .section-right{padding-left:15px;width:62px;text-align:right;}
.monitoring-box .monitoring-body .info-layer .layer-body .body-section .section-right .num{display:inline-block;width:52px;height:44px;background:#4e5867;border-radius:5px;text-align:center;}
.monitoring-box .monitoring-body .info-layer .layer-body .body-section .section-right .num span{color:#fff;font-size:16px;font-weight:bold;line-height:44px;letter-spacing:-.03em;}
.monitoring-box .monitoring-body .info-layer .layer-body .data-list{display:table;width:100%;}
.monitoring-box .monitoring-body .info-layer .layer-body .data-list li{display:table-row;color:#5c5c5c;font-size:12px;font-weight:500;}
.monitoring-box .monitoring-body .info-layer .layer-body .data-list li span{display:table-cell;font-size:14px;font-weight:500;vertical-align:middle;}
.monitoring-box .monitoring-body .info-layer .layer-body .data-list li .tit{color:#6b6b6b;width:62px;}
.monitoring-box .monitoring-body .info-layer .layer-body .data-list li.strong_red span{animation: flashRed 1s linear 0.5s infinite alternate;}
.monitoring-box .monitoring-body .info-layer .layer-body .data-list li.strong_orange span{animation: flashOrange 1s linear 0.5s infinite alternate;}
.monitoring-box .monitoring-body .info-layer .layer-body .data-list li .colon{color:#2f2f2f;}
.monitoring-box .monitoring-body .info-layer .layer-body .data-list li .num{min-width:50px;color:#272f3e;text-align:right;letter-spacing:-.02em;}
.monitoring-box .monitoring-body .info-layer .layer-body .data-list li .unit{width:62px;padding-left:15px;color:#3c612a;letter-spacing:-.02em;}
.monitoring-box .monitoring-body .info-layer .layer-body .etc-degree{text-align:center;line-height:1;}
.monitoring-box .monitoring-body .info-layer .layer-body .etc-degree span{display:inline-block;width:55px;color:#2d2d2d;font-size:14px;font-weight:bold;vertical-align:top;}
.monitoring-box .monitoring-body .info-layer .layer-body .etc-degree span.strong_red{animation: flashRed 1s linear 0.5s infinite alternate;}
.monitoring-box .monitoring-body .info-layer .layer-body .etc-degree span.strong_orange{animation: flashOrange 1s linear 0.5s infinite alternate;} 
.monitoring-box .monitoring-body .info-layer .layer-body .etc-degree span + span{margin-left:6px;}
.monitoring-box .monitoring-body .info-layer .layer-foot{border:1px solid #1e2c0b;border-top:none;}
.monitoring-box .monitoring-body .info-layer .layer-foot .option-button{padding:8px 0;background:#37404e;border-bottom:1px solid #6e6e6e;text-align:center;}
.monitoring-box .monitoring-body .info-layer .layer-foot .option-button .btn-white{display:inline-block;height:24px;padding:0 10px;border:1px solid #29313d;border-radius:5px;background:#fff;vertical-align:middle;}
.monitoring-box .monitoring-body .info-layer .layer-foot .option-button .btn-white + .btn-white{margin-left:6px;}
.monitoring-box .monitoring-body .info-layer .layer-foot .option-button .btn-white span{color:#062520;font-size:13px;font-weight:bold;line-height:22px;}
.monitoring-box .monitoring-body .info-layer .layer-foot .option-wrap{padding:6px 0;background:#424242;text-align:center;}
.monitoring-box .monitoring-body .info-layer .layer-foot .option-wrap .network,
.monitoring-box .monitoring-body .info-layer .layer-foot .option-wrap .datetime,
.monitoring-box .monitoring-body .info-layer .layer-foot .option-wrap .btn-chart{display:inline-block;vertical-align:middle;}
.monitoring-box .monitoring-body .info-layer .layer-foot .option-wrap .network{width:18px;height:13px;background:url(../images/monitoring/icon_network_normal.png);text-indent:-999em;}
.monitoring-box .monitoring-body .info-layer .layer-foot .option-wrap .datetime{margin:0 4px;color:rgba(255,255,255,.98);font-size:12px;font-weight:bold;line-height:1;letter-spacing:-.03em;}
.monitoring-box .monitoring-body .info-layer .layer-foot .option-wrap.network-fail{background:#ecba34;}
.monitoring-box .monitoring-body .info-layer .layer-foot .option-wrap.network-fail .network{width:23px;background-image:url(../images/monitoring/icon_network_fail.png);}
.monitoring-box .monitoring-body .info-layer .layer-foot .option-wrap.network-fail .datetime{color:rgba(60,57,50,.98);}
.monitoring-box .monitoring-body .info-layer .layer-foot .option-wrap .btn-chart{display:inline-block;height:24px;padding:0 10px;border:1px solid #1f1d18;border-radius:5px;background:#3c3932;vertical-align:middle;}
.monitoring-box .monitoring-body .info-layer .layer-foot .option-wrap .btn-chart span{color:#fff;font-size:13px;font-weight:bold;line-height:22px;}

.monitoring-box .monitoring-body .info-position{position:absolute;}

.monitoring-box .monitoring-body .monitoring-legend{position:absolute;bottom:5px;right:6px;padding:10px;border-radius:10px;background:#2f3b4e;border:1px solid #010101;}
.monitoring-box .monitoring-body .monitoring-legend .alarm-step:after{content:'';display:block;clear:both;}
.monitoring-box .monitoring-body .monitoring-legend .alarm-step li{float:left;width:28px;height:24px;line-height:24px;color:#fff;font-size:13px;font-weight:500;text-align:center;}
.monitoring-box .monitoring-body .monitoring-legend .legend-wrap{position:relative;height:20px;width:100%;}
.monitoring-box .monitoring-body .monitoring-legend .legend-wrap .legend{position:absolute;bottom:0;color:#fff;font-size:12px;}
.monitoring-box .monitoring-body .monitoring-legend .legend-wrap .legend.legend-0{left:0;}
.monitoring-box .monitoring-body .monitoring-legend .legend-wrap .legend.legend-1{left:38%;}
.monitoring-box .monitoring-body .monitoring-legend .legend-wrap .legend.legend-2{right:0;}

.monitoring-box .monitoring-status{position:absolute;top:20px;right:20px;}
.monitoring-box .monitoring-status > span{position:relative;display:inline-block;width:80px;height:80px;margin:0 -8px;vertical-align:top;text-align:center;}
.monitoring-box .monitoring-status .ajax-status:after{content:'';position:absolute;top:50%;left:50%;width:56px;height:56px;margin-left:-28px;margin-top:-28px;border-radius:50%;background:#1f3e78;background:linear-gradient(to bottom right,  #3168a2, #1f3e78 45%);border: 1px solid #010101ab;}
.monitoring-box .monitoring-status .ajax-status img{display:none;position:absolute;top:50%;left:50%;z-index:3;margin-left:-13px;margin-top:-14px;}
.monitoring-box .monitoring-status .ajax-status img.blink{display:block;opacity:1;animation:blinker 1s infinite;z-index:1;}
.monitoring-box .monitoring-status .ajax-status.status-complete img{display:block;}
.monitoring-box .monitoring-status .ajax-status.status-complete img.blink{display:none;}

/* 모니터링 알람 색상 */
.monitoring-box .alarm-color-0{background-color:#5cb901;}
.monitoring-box .alarm-color-1{background-color:#a1ba03;}
.monitoring-box .alarm-color-2{background-color:#e4af08;}
.monitoring-box .alarm-color-3{background-color:#fb8e13;}
.monitoring-box .alarm-color-4{background-color:#fe4819;}
.monitoring-box .alarm-color-5{background-color:#e81428;}

@keyframes flashRed {
	0% {color:#666666;}
	100% {color:#dd0e21;}	
}

@keyframes flashOrange {
	0% {color:#666666;}
	100% {color:#f17511;}	   
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/* 2018-12-03 KSM 데이터조회 */
.btn-date-group:after{content:'';display:block;clear:both;}
.btn-date-group li{float:left;border-left:1px solid #b2b2b2;}
.btn-date-group li:first-child{border-left:0;}
.btn-date-group .btn{margin:0;border-radius:0;}
.btn-date-group .btn.btn-date{height:38px;padding:0 15px;background:#ccc;color:#2d2d2d;font-weight:bold;font-size:14px;line-height:38px;}
.btn-date-group li:first-child .btn.btn-date{border-top-left-radius:3px;border-bottom-left-radius:3px;}
.btn-date-group li:last-child .btn.btn-date{border-top-right-radius:3px;border-bottom-right-radius:3px;}
.btn-date-group li.on .btn.btn-date{background:#666;color:#fff;}

.date-text-section{margin:0 20px;}
.date-text-section span{color:#454545;font-size:15px;vertical-align:middle;}
.date-text-section .btn{display:inline-block;width:19px;height:20px;background:url(../images/common/btn_date.png) no-repeat;text-indent:-999em;vertical-align:middle;}
.date-text-section .btn.date-prev{background-position:0 0;margin-right:4px;}
.date-text-section .btn.date-next{background-position:-19px 0;margin-left:4px;}

/* 2018-12-26 KSM 프로젝트 로고 */
.logo-image-wrap{display:table;width:180px;height:50px;background-color:#efefef;border:1px solid #ccc;text-align:center;}
.logo-image-wrap .image-wrap{display:table-cell;vertical-align:middle;}
.logo-image-wrap .logo-text{font-size:18px;font-weight:bold;color:#bbb;letter-spacing:.06em;}
.logo-image-wrap img{max-width:100%;max-height:100%;}


/* 2020-07-01 1차.2차 알람모니터링으로 구조 변경 */
/* 상단박스 */
.top-info-box{display:table;width:100%;margin-bottom:12px;border:1px solid #c2c2c2;background:#f8f8f8;padding:15px 30px;}
.top-info-box .row{display:table-row;}
.top-info-box .col{display:table-cell;padding:0 10px;vertical-align:middle;text-align:left;}
.top-info-box span.tit,
.top-info-box span.txt{position:relative;display:inline-block;font-size:13px;vertical-align:middle;}
.top-info-box span.tit{padding-left:10px;color:#898989;}
.top-info-box span.tit:before{content:'';position:absolute;top:7px;left:0;width:2px;height:2px;background:#848484;}
.top-info-box span.txt{color:#515151;font-weight:500;}
.top-info-box span.tit + span.txt{margin-left:6px;padding-left:10px;}
.top-info-box span.tit + span.txt:before{content:'';position:absolute;top:50%;left:0;width:1px;height:10px;margin-top:-5px;background:#c2c2c2;}