@charset "utf-8";

input[readonly]{background: #eee;}
input[type="text"],input[type="password"]{height: 30px; padding:0 18px; font-size: 14px;cursor:text; box-sizing: border-box; vertical-align: middle;}

.header-top{width:1588px;margin: 0 auto;padding:12px 0;}

/*gnb*/
#gnb{width:100%;background: url('../images/common/gnb-bg.jpg')repeat-x;}
#gnb>ul{width:1588px;margin: 0 auto;}
#gnb>ul>li{float:left; width:16.666%;text-align: center;position: relative;}
#gnb>ul>li>a{display: block;width:100%;height:48px;font-size:18px;line-height: 48px; color:#b7ccf7; background: #2268f8;box-sizing:border-box;}
#gnb>ul>li>a.on,#gnb>ul>li>a.nowpage{background: url('../images/common/gnb-on.png')no-repeat 74% center #2268f8;color:#fff;font-weight: bold;}
#gnb>ul>li>ul{display: none;z-index: 4; position: absolute;width:100%; background:#fff;box-shadow: 0px 7px 16px #b1b1b1;}
#gnb>ul>li>ul>li>a { display:block;height:48px;line-height: 48px;font-size:16px; text-align:center;}
#gnb>ul>li>ul>li>a:hover,#gnb>ul>li>ul>li>a:focus{color:#fff;font-weight: 700;background: #2268f8;}

/*width*/
.w90{width:90%;}
.w80{width:80%;}
.w70{width:70%;}
.w60{width:60%;}
.w50{width:50%;}
.w40{width:40%;}
.w30{width:30%;}
.w20{width:20%;}
.w10{width:10%;}

.w50p { width:50px; }
.w60p { width:60px; }
.w70p { width:70px; }
.w80p { width:80px; }
.w90p { width:90px; }
.w100p { width:100px; }
.w110p { width:110px; }
.w120p { width:120px; }
.w130p { width:130px; }
.w140p { width:140px; }

/*padding*/
.pl30 { padding-left:30px !important; }
.pl40 { padding-left:40px !important; }
.pl50 { padding-left:50px !important; }

/*margin*/
.mgt10{margin-top: 10px;}
.mgl5{margin-left: 5px;}
.mgl10{margin-left: 10px;}
.mgr5{margin-right: 5px;}
.mgr10{margin-right: 10px;}

.w150mgl10 { width:140px; margin-left: 10px;}

/*btn크기*/
.btn1{padding:12px 17px;font-size:16px !important;line-height:16px;font-weight: 500; }
.btn2{padding:14px 20px;font-size:16px !important;line-height: 16px;font-weight: 500;}
.btn3{padding:7px;font-size:15px !important;line-height: 15px;font-weight: 500;}
.btn4{padding:7px 40px;font-size:14px !important;line-height: 19px;font-weight: 500;}
.btn5{padding:9px;font-size:15px !important;line-height: 15px;font-weight: 500;}
.btn6{padding:3px;font-size:15px !important;line-height: 15px;font-weight: 500;}

.btn4_s{padding:5px 20px;font-size:12px !important;line-height: 19px;font-weight: 500;}

/*btn라운드*/
.btnRound4{border-radius: 4px;}
.btnRound7{border-radius: 7px;}
.btnRound10{border-radius: 10px;}
.btnRound15{border-radius: 15px;}
.btnRound20{border-radius: 20px;}

/*서브페이지 틀*/
.sub-contents{padding:20px 18px;background: #fff;border-radius: 10px;box-shadow: 0 0 4px #d8d8d8; }
.sub-contents-bottom{padding:40px 18px;}
/*서브페이지 타이틀*/
.sub-top .sub-title{font-size:28px; color:#2d2d2d;}


/*서브목록 검색*/

.list-sch{margin-top:5px;margin-bottom:18px;padding:8px 20px;background: #f7f7f7;border-radius: 8px;}
.list-sch input[type="text"],.list-sch select{border:1px solid #d5d5d5;}
.list-sch .sch-filter{display: inline-block;}
.list-sch .sch-filter.first label{margin-left: 0;}
.list-sch .sch-filter>label{margin-right:15px;margin-left:30px;padding-left:12px;font-size: 18px;position: relative;vertical-align: middle;font-weight: 500;}
.list-sch .sch-filter.nextline{margin-top:10px;}
.list-sch .sch-filter:first-child>label{margin-left: 0;}
.list-sch .sch-filter>label:before{display: block;content:"";width:4px;height:4px;background: #111;border-radius: 50%;position: absolute;left:0;top:12px;}
.list-sch .sch-filter select{min-width:130px;height:30px;padding:0 34px 0 14px; box-sizing: border-box; vertical-align: middle;font-size: 14px;}
.list-sch .sch-filter .sch-txt{font-size:18px;width:387px;}
.list-sch .sch-filter .mgL-4{margin-left:-4px;}
.list-sch .sch-filter .checks{display: inline-block;vertical-align:middle;}
.list-sch .sch-filter .checks input[type="checkbox"] + label{display: initial;}
.list-sch .sch-filter .checks.etrans input[type="checkbox"] + label{padding-left: 26px;}
.list-sch .sch-filter .checks input[type="checkbox"] + label:after{background:#fff;}
.list-sch .sch-filter .checks.etrans input[type="checkbox"]:checked + label:after{background: url('../images/common/checked.png')no-repeat;}
.list-sch .sch-bt{width:83px;height:38px;border-radius: 20px; background: url('../images/common/sch-bt.png')no-repeat center #2268f8;text-indent: -9999px;overflow: hidden;transition:background .2s;}
.list-sch .sch-bt:active{background: url(../images/common/sch-bt.png)no-repeat center #164c91;}
_:-ms-lang(x), .list-sch .sch-filter .datepicker{width:160px;}
.list-sch .sch-filter .datepicker{width:160px;}


/*서브 목록 + 데이터테이블 스타일*/
.list-wrap {margin-top:12px;}
.list-wrap .tbl{border-top:1px solid #cfcfcf;}
.list-wrap .tbl-wrap .dataTables_wrapper .dataTables_paginate{padding-top:10px;text-align: center;float:inherit;}
.list-wrap .tbl-wrap .dataTables_length{float:right;}
.list-wrap .tbl-wrap .tbl .cnt{display: inline-block;min-width:24px;height:24px;text-align: center;font-size:14px;line-height: 23px; border:1px solid #444;border-radius: 24px;}
.list-wrap .tbl-wrap .paginate_button{margin-left:4px !important;padding:0 !important;width:50px;height:34px;font-size:17px;color:#777;border-radius: 4px !important; overflow: hidden;text-align: center;line-height: 1.6em;}
.list-wrap .tbl-wrap .dataTables_paginate .paginate_button.current,
.list-wrap .tbl-wrap .dataTables_paginate .paginate_button:hover{background: #307ac0 !important;color:#fff !important;border:none;}
.list-wrap .tbl-wrap .paginate_button.first{text-indent: -9999px;background: url('../images/common/pg-bt1.png')no-repeat center !important;}
.list-wrap .tbl-wrap .paginate_button.first:hover{background: url('../images/common/pg-bt1-hover.png')no-repeat center #307ac0 !important;}
.list-wrap .tbl-wrap .paginate_button.previous{text-indent: -9999px;background: url('../images/common/pg-bt2.png')no-repeat center !important;}
.list-wrap .tbl-wrap .paginate_button.previous:hover{background: url('../images/common/pg-bt2-hover.png')no-repeat center #307ac0 !important;}
.list-wrap .tbl-wrap .paginate_button.next{text-indent: -9999px;background: url('../images/common/pg-bt3.png')no-repeat center !important;}
.list-wrap .tbl-wrap .paginate_button.next:hover{background: url('../images/common/pg-bt3-hover.png')no-repeat center #307ac0 !important;}
.list-wrap .tbl-wrap .paginate_button.last{text-indent: -9999px;background: url('../images/common/pg-bt4.png')no-repeat center !important;}
.list-wrap .tbl-wrap .paginate_button.last:hover{background: url('../images/common/pg-bt4-hover.png')no-repeat center #307ac0 !important;}
.list-wrap .tbl thead th{padding:10px 0;font-size:14px;font-weight: 500;background: #f7f7f7;color:#191919;}
.list-wrap .tbl thead .sorting_desc{background-image: url('../images/common/sort_desc.png');background-repeat: no-repeat;background-position: 90% center;}
.list-wrap .tbl thead .sorting_asc{background-image: url('../images/common/sort_asc.png');background-repeat: no-repeat;background-position: 90% center;}
.list-wrap .tbl tbody td{padding:5px 0;font-size:16px;color:#333;border-bottom:1px solid #cfcfcf;text-align: center}
.list-wrap .tbl tbody tr:nth-child(2n) td{background: #fbfbfb;}
.list-wrap .tbl tbody td a:hover{text-decoration:underline; font-weight: 700;}
.list-wrap .tbl-wrap .bottom{margin-top: 15px;}
.list-wrap .tbl-wrap .dataTables_length select{width:138px;padding:0px 30px 0px 14px;font-size:14px;border: 1px solid #d5d5d5;box-sizing:border-box;}


/*서브 조회*/
.view-wrap{}
.tbl-view{margin-top:15px;border-top: 1px solid #eaeaea;border-left: 1px solid #eaeaea;border-right:1px solid #eaeaea;vertical-laign:top;}
.tbl-view th,.tbl-view td{padding:15px 10px;font-size:14px;text-align: left;border-bottom:1px solid #eaeaea;vertical-align: top;}
.tbl-view th{background: #f7f7f7;font-weight: 500;}
.tbl-view th:nth-child(3){border-left: 1px solid #eaeaea;}
.tbl-view td .checks{margin-top:0px;margin-left:20px;display: inline-block;}
.tbl-view td .checks:first-child{margin-left: 0;}
.tbl-view td .checks input[type="checkbox"] + label:after{background: #fff;}
.tbl-view td .checks.etrans input[type="checkbox"]:checked + label:after{background: url('../images/common/checked.png')no-repeat;}

.checks{margin-top:0px;margin-left:20px;display: inline-block;}
.checks:first-child{margin-left: 0;}
.checks input[type="checkbox"] + label:after{background: #fff;}
.checks.etrans input[type="checkbox"]:checked + label:after{background: url('../images/common/checked.png')no-repeat;}

.btn-area input{margin: 0 4px;}

/*서브 등록,수정*/
.write-wrap{margin-top:15px;}
.write-wrap .w-form-line{margin-top:8px;background: #f7f7f7;border-radius: 8px;}
.write-wrap .w-form-line:after,.write-wrap .w-form-line:before{line-height:0;display:table;content:''}
.write-wrap .w-form-line:after{clear:both}
.write-wrap .w-form-line:first-child{margin-top:0;}
.write-wrap .w-form-line.form-box2>div{width:50%;float:left;}
.write-wrap .w-form-line.form-box3>div{width:33.33%;float:left;}
.write-wrap .w-form-line.form-box4>div{width:25%;float:left;}
.write-wrap .w-form-line .w-form-box{padding:10px 15px;box-sizing:border-box;}
.write-wrap .w-form-line .w-form-box>label{display: block; margin-bottom:12px;font-size:18px;font-weight: 500;}
.write-wrap .w-form-line .w-form-box .w-input input,
.write-wrap .w-form-line .w-form-box .w-input select{color:#444;font-size:14px;}
.write-wrap .w-form-line .w-form-box .w-input select{padding:0 18px;height:30px;color:#444;}
.write-wrap .w-form-line .w-form-box .w-input .checks{margin-top:10px;margin-left:20px;display: inline-block;}
.write-wrap .w-form-line .w-form-box .w-input .checks:first-child{margin-left: 0;}
.write-wrap .w-form-line .w-form-box .w-input .checks input[type="checkbox"] + label:after{background: #fff;}
.write-wrap .w-form-line .w-form-box .w-input .checks.etrans input[type="checkbox"]:checked + label:after{background: url('../images/common/checked.png')no-repeat;}
.write-wrap .w-form-line .w-form-box .w-input textarea{padding:10px;border:1px solid #d5d5d5;box-sizing:border-box;overflow: auto;font-size:14px;}

/*write-wrap4*/
.write-wrap4{display:block; overflow:hidden; }
.write-wrap4 span.update { display:block; margin:5px 0; }
.write-wrap4:after,.write-wrap3:before{ line-height:0; display:table; content:''}
.write-wrap4:after{clear:both}
.write-wrap4 div.tree-wrp{overflow:auto; float:left; display:block; width:100%; height:520px; box-sizing:border-box; border:1px solid #cfcfe0;}
.write-wrap4 div.tree-wrp::-webkit-scrollbar{width: 10px;background-color: #f5f5f5;}
.write-wrap4 div.tab-content.tree-wrp::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #555;}

/* 트리 */
.tree-wrp div .home { color:#2268f8; font-size:16px; font-weight:bold; }
.clip div .checked { }
.clip div span { color:red; }
.clip div .checked { color:black; }

/*레이어팝업*/
.layerPop-wrap.layerW400{width:400px;margin-left: -200px;}
.layerPop-wrap.layerW500{width:500px;margin-left: -250px;}
.layerPop-wrap.layerW600{width:600px;margin-left: -300px;}
.layerPop-wrap .layer-con{padding:10px 30px 0 30px;max-height: 730px;overflow-y:auto;}

/*필수항목표시*/
.no_necessary{display: inline-block;margin-right:8px;width:12px;height:12px; }

.ellipsis {
	overflow:hidden;
	white-space:nowrap;
	word-break:break-all;
	text-overflow: ellipsis;
	-o-text-overflow:ellipsis;
	-ms-text-overflow:ellipsis;
	-moz-binding: url(ellipsis.xml#ellipsis);
}

#wrap{margin-bottom:20px;width:100%;min-height:705px;background:#e8e8f0;}
#wrap>.contents{margin:0 auto;padding:17px 0 45px 0; box-sizing:border-box;}

.datepicker.min { width:210px; }

/* 메인 대시보드 */
.dashboard-board .notice .status.st1{background: #ff5b5b;}	/*전체*/
.dashboard-board .notice .status.st2{background: #307ac0}	/*관리자*/
.dashboard-board .notice .status.st3{background: #4f5255;}	/*사이트*/
.dashboard-board .notice .status.st4{background: #2268f8;}	/*사용자*/

.iframe { overflow:hidden; }

/*카드 레이아웃 조회*/
.preview-wrap .frame{margin:0 auto;padding:82px 47px 85px 45px;width:465px;height:757px;box-sizing:border-box;background: url('../images/sub/phone-frame.png')no-repeat;}
.preview-wrap .frame .preview{width:100%;height:100%;border:1px solid #ccc;overflow:hidden; margin: 0 auto; text-align:center;}
.preview-wrap .frame-bg{margin:0 auto;width:375px;height:592px;border:2px solid #ccc;overflow: hidden;}
.preview-wrap .frame-bg img{width:100%;height:100%;}
.preview-wrap .temp{margin:0 auto;width:375px;height:592px;border:2px solid #ccc;overflow: hidden;}
.preview-wrap .temp .preview{width:100%;height:100%;overflow-x:hidden;overflow-y:auto;}

/*경비구역선택 , 출입문선택 버튼*/
.btn-area1{padding-left:25px;background: url('../images/sub/btn-area1.png')no-repeat 10px center #307ac0 !important;}
.btn-area1:active{background: url('../images/sub/btn-area1.png')no-repeat 17px center #2a6eaf !important;}
.btn-area2{padding-left:35px;background: url('../images/sub/btn-area2.png')no-repeat 10px center #307ac0 !important;}
.btn-area2:active{background: url('../images/sub/btn-area2.png')no-repeat 17px center #2a6eaf !important;}

.view_Y { display:inline-block; width:70px; }
.view_N { display:inline-block; width:70px; text-decoration:line-through; color:red; }

/* 메인 차트 */
.chart-area { width:730px; height:200px; }
.mainChart { width:100%px; height:300px; margin-top:15px; border:1px solid #dfdfdf; }

/* loading */
/*
.loading { display:none; width:100%; height:100%; top:0; left:0; opacity:.6; background:silver; position:fixed; }
.loading div { width:100%; height:100%; display:table; }
.loading span { display:table-cell; text-align:center; vertical-align:middle; }
.loading p { display:table-cell; text-align:center; vertical-align:middle; }
.loading img { background:white; padding:1em; border-radius:.7em; }
*/
.loading article { margin-top:200px; }
.loading.layer-con { height:150px; border:1px solid red; }
.loading div { text-align:center }
.loading div p { margin-top:30px; }

/*tab 디자인*/
.tab-style1 li{float:left;}
.tab-style1 li a{display: block;padding:8px 10px;font-size:18px;color:#2268f8;border:2px solid #2268f8;transition:all .3s;}
.tab-style1 li:first-child a{border-radius: 4px 0 0 4px;}
.tab-style1 li:last-child a{border-radius: 0 4px 4px 0;}
.tab-style1 li a.on{background: none;background:#2268f8;color:#fff;}
.tab-content { display:none; }

/*진행률 : progress-wrp*/
.progress-wrp{display: inline-block; width:400px;height:30px;line-height:30px;text-align: center; border:1px solid #ccc;background: #ff5a5a;color:#fff;font-size:13px;}
.progress-wrp .use-bar{display: inline-block; float:left;position: relative; height:100%;background: #2268f8;text-align: center;}
.progress-wrp .use-bar span{position: absolute;}
.progress-percentage{display: inline-block;padding-top:5px; vertical-align:top; font-weight: 500;}
.progress-wrp .other-txt{float:right;position: absolute;color:#000;}