@charset "utf-8"; 
/*RESET*/
*{box-sizing: border-box; margin: 0; padding: 0; user-select: none;}
article, aside, details, figcaption, figure,footer, header, main, nav, section {display: block;}
h1, h2, h3, h4, h5, h6{font-family:'Roboto','Noto Sans KR',sans-serif; font-weight:normal;}
img{border: 0;}
ul, ol, li{list-style: none;}
fieldset{border:0;}
input,select,textarea{font-family:'Roboto','Noto Sans KR',sans-serif; font-size:15px; border:1px solid #c2c2c2;}
input:not([type="checkbox"]),select{height:27px; padding:0 5px;}
input[type="file"]{display:none;}
textarea{width:100%; resize:vertical; padding:5px; letter-spacing: -0.03em;}
::placeholder{color:#999;}
table{width:100%; border-collapse: collapse; border-spacing: 0; table-layout:fixed; font-family:'Roboto','Noto Sans KR',sans-serif;}
tbody{overflow-y:auto; overflow-x:hidden;}
th{font-weight:normal; font-size:15px;}
td{word-break:break-word; vertical-align:middle;}
em,i,address,th,strong{font-style:normal; font-weight:normal;}
button{cursor:pointer; border:0 none; font-family:'Roboto','Noto Sans KR',sans-serif; background-color:transparent;}
a{color: inherit; text-decoration: none;}
::-webkit-scrollbar{width: 10px;}
::-webkit-scrollbar-track{background-color:#f1f1f1;}
::-webkit-scrollbar-thumb{background-color:#9296a0; border-radius: 15px; width:3px !important;}
::-webkit-scrollbar-thumb:hover{background: #555;}
::-webkit-scrollbar-button:start:decrement{display:block; width:16px; height:16px; background:#fff url('/resource/images/sprite-bg.png') -2px -156px;}
::-webkit-scrollbar-button:end:increment{width:16px; height:16px; background:#fff url('/resource/images/sprite-bg.png') -16px -156px;}

html,body{width:100%; height:100%; overflow:hidden;}
body{font-family:'Roboto','Noto Sans KR',sans-serif; font-weight:400; font-size:14px; color:#181818; line-height: 1.15; letter-spacing: -0.02em;}
section{position:relative; height:100%;}


/*Common*/
.ac{text-align:center !important;}
.al{text-align:left !important;}
.ar{text-align:right !important;}
.fl{float: left !important;}
.fr{float: right !important;}
.hidden{visibility:hidden; overflow:hidden; width:0; height:0; font-size:0; line-height:0; position:absolute; padding:0 !important;}
.on:not(.aljjaFileUld):not(.conTi):not(.calcBtn):not(.moveBtn){display:block !important;}
.normal{color:#00c14d !important;}/*정상*/
.error{color:#ff0606 !important;}/*에러*/

/*공통 button*/
.btn{padding:5px; border-radius:3px; }
.btn:not(.complete):hover{box-shadow:inset 2px 2px 2px 0 rgba(0,0,0,0.2); -moz-box-shadow:inset 2px 2px 2px 0 rgba(0,0,0,0.2); -webkit-box-shadow:inset 2px 2px 2px 0 rgba(0,0,0,0.2);}
.btn01{color:#fff; background:#7c7f8a;}
.btn02{width:28px; height:28px; font-size:0; background:#7c7f8a;}/*아이콘버튼*/
/* .btn01{background:#1f7ce7;} */
button.del{display:inline-block; width:15px; height:15px; margin-right:15px; font-size:0; vertical-align: middle; border:1px solid #454854;}
button.del::before{content:""; display:inline-block; width:55%; height:2px; background:#454854;}
button.del:hover{border-color:#ff2980;}
button.del:hover::before{background:#ff2980;}

/*Login*/
.loginWrap{background:#3d404c;}
.login{position:relative; width:574px; height: 634px; margin:140px auto; padding:90px 85px 50px 85px; text-align:center;
 border:1px solid; border-image: linear-gradient(45deg, #3895ff 0%, #0febee 100%); border-image-slice: 1; border-radius:3px;}
.login h1{width:166px; height:62px; background:url(/resource/images/logo.png)no-repeat; font-size:0; margin:0 auto;}
.login span{display:block; color:#a1c1e6; margin:17px 0 40px 0; letter-spacing: 0.04em;}
.login form{position:relative;}
.login::after{content:""; position:absolute; left:50%; bottom:40px; margin-left:-90px; width:180px; height:30px; background:url(/resource/images/bion.png)no-repeat;}
.login input:not([type="checkbox"]),.login button{display:block; width:100%; height:50px; margin:0 auto 20px auto;}
.login input:not([type="checkbox"]){padding:0 20px; font-size:16px; border:1px solid #c7cad7; border-radius:3px;} 
.login i{position:absolute; right:22px; width:12px; height:16px; transition:right .4s;}
.login i.on{right:-400px;}
.login i:first-of-type{background:url('/resource/images/sprite-bg.png') 0 0; top:17px;}
.login i:last-of-type{background:url('/resource/images/sprite-bg.png') -14px 0; top:89px;}
.login .btn{background:#1f7ce7; border:1px solid #3895ff; font-size:18px;}
.login label[for="idSave"]{color:#999; vertical-align: text-top;}
.login p.error{position:absolute; top:-32px; left:0; width:100%; background:rgba(0,0,0,0.2); padding:6px; border-radius:3px; letter-spacing: -0.05em;}
.login p.error::before{content:"!"; display:inline-block; margin-right:3px; width:15px; height:15px; border-radius:50%; border:1px solid rgba(256,0,0,0.6);}

/*Top*/
header{display:flex; align-items:center; width:100%; height:54px; background:#3e404d; padding:0 20px;}
header h1{width:80px; height:30px; font-size:0; background:url('/resource/images/logo.png')no-repeat 0 0/100% auto;}
header span{margin-left:10px; font-size:13px; color:#a1c1e6; letter-spacing: 0.02em;}
header span::before{content:""; display:block; width:179px; height:20px; background:url('/resource/images/bion.png')no-repeat 0 0/100% auto}
nav{position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex;}
nav a{position:relative; width:60px; height:54px; border-right:1px solid #3c4d67; padding:8px 12px;}
nav a:first-child{border-left:1px solid #3c4d67;}
nav a:hover{box-shadow:inset 0px 0px 5px rgba(0,0,0,0.4);}
nav a::after{content:""; width:25px; height:29px; display:block; margin:5px auto;}
nav a.new::before{content:"N"; position:absolute; right:8px; top:12px; width:12px; height:12px; border-radius: 2px; background:#ff0d2f;
box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.3); text-align: center; color:#fff; font-size:12px;}
nav .fileUld::after{background:url('/resource/images/sprite-bg.png') 0px -13px; }
nav .qna::after{background:url('/resource/images/sprite-bg.png') -30px -13px; }
nav .board::after{background:url('/resource/images/sprite-bg.png') -58px -13px; }
nav .password::after{background:url('/resource/images/sprite-bg.png') 0px -55px; }
.logout{width:26px; height:26px; margin-left:auto; background:url('/resource/images/sprite-bg.png')no-repeat 1px -54px; font-size:0px; opacity:0.8;}
.logout:hover{opacity:1;}

/*Content*/
main{position:relative; display:flex; flex-wrap:wrap; width:100%; height: calc(100% - 54px); background:#f5f5f5;}
.conTi.on~ section{height:calc(100% - 40px);}
.conTi{position:relative; z-index:2; display:flex; align-items:center; width:100%; height:0px; overflow:hidden; padding:0 10px; background:rgba(61,64,76,0.9); transition-duration:0.2s; }
.conTi.on{display:flex !important; border-bottom:1px solid #3895ff; -moz-box-shadow: 0px 5px 5px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,0.4); box-shadow: 0px 5px 5px rgba(0,0,0,0.4); border-top:1px solid #3895ff; height:40px;}
.conTi::before{content:""; display:inline-block; width:25px; height:17px; background:url('/resource/images/sprite-bg.png')no-repeat -0px -81px;} 
.conTi span{display: flex; align-items: center; height:100%; font-size:13px; color:#9a9fb4; letter-spacing:-1px; border-right:1px solid #4273ad; padding:0 10px;}
.conTi span:first-of-type{padding-left:0;}
.conTi em{font-size:18px; color:#fff; margin-left:5px; }
.conTi button{width:25px; height:22px; margin-left:10px; background:url('/resource/images/sprite-bg.png')no-repeat 0px -100px; font-size:0;}

/*공통 table*/
.tbl{height:100%;}
.tbl th,.tbl td{padding:6px 5px;}
.tbl th{color:#3d404c; background:#b2b5c0;} 
.tbl td:not(:last-child){border-right:1px solid #d1d3d9}
.tblBody{overflow-y:auto; height:calc(100% - 29px);}
.tblBody tr:nth-child(even){background:#edeef4;}
.tblBody tr:not(.point):hover{box-shadow:inset 1px 1px 0 0 #3996ff,inset -1px -1px 0 0 #3996ff; background:#adcef4;}
.point{font-weight: 600; box-shadow: inset 1px 1px 0 0 #ff7ba1, inset -1px -1px 0 0 #ff7b7b; background: rgba(255, 0, 47, 0.2) !important;}
td.new::after{content:"N"; display: inline-block; margin-left:5px; font-size:15px; font-weight:700; color:#ff0d3a;}/*새글*/

/*타이틀 컨트롤*/
.topTi{position:relative; display:flex; align-items:center; width:100%; padding:0 35px 0 10px; text-align:left; font-size:16px;}
.topTi .btnWrap{display:flex; align-items:center; margin-left:auto;}
.topTi .btn{margin-left:3px;}
.topTi a.close{position:absolute; top:50%; margin-top:-10px; right:7px; width: 20px; height: 20px; font-size:0; cursor:pointer;}
.topTi a.close::before,.topTi a.close::after{content:""; position:absolute; top:50%; left:50%; margin-left:-7px; margin-top:-1px; width:14px; height:2px; background:#3d404c;}
.topTi a.close::before{transform:rotate(45deg);}
.topTi a.close::after{transform:rotate(-45deg);}
.topTi a.close:hover{background:rgba(0,0,0,0.1);}

/*팝업*/
.pop{display:none; position:absolute; z-index:10; overflow:hidden; padding:48px 10px 10px; background:rgba(256,256,256,0.9); box-shadow: 0px 3px 10px 0 rgba(0,0,0,.6);}
.pop .topTi{position:absolute; top:0; left:0; height:38px; line-height:38px; background:#e8eaef; color:#333;}
.refresh{padding:0; background:rgba(124,127,138,1); transition-duration:0.2s;}
.refresh::before{content:""; display:block; width: 100%; height: 100%; background: url(/resource/images/sprite-bg.png) 2px -126px; transition-duration:0.5s;}
.refresh:hover::before{transform:rotate(180deg);}

/*Main*/
main:not(.sub) section{position:absolute; top:0;}
main:not(.sub) .conTi.on~ section{top:40px;}
article{width:100%; height:50%; padding:20px;}
.inbox{width:100%; height:100%; background:#fff; box-shadow: 0px 0px 10px rgba(0,0,0,0.2);}

.leftCon{width:60%; left:0;}
.chartWrap{background:#e3e3e3;}
.dragPoint{position:absolute; bottom:0; z-index:9; font-size:0px; background:transparent; transition:all .2s;}
.dragPoint.hori{width:100%; height:18px; left:0; cursor:n-resize;}
.dragPoint.vert{width:15px; height:100%; right:0; cursor: e-resize;}
.dragPoint:hover{background:#eaeaea; box-shadow: 0 0 2px 0 rgba(0,0,0,0.2);}
.dragPoint.hori:active{box-shadow: inset 0 -1px 0 0 rgba(38, 140, 255, 0.35);}
.dragPoint.vert:active{box-shadow: inset -1px 0 0 0 rgba(38, 140, 255, 0.35);}
.dragPoint:hover::before{content:""; position:absolute; top:50%; left:50%; transition:all .2s;}
.dragPoint.hori::before{width:26px; height:11px; margin-top:-4px; margin-left:-13px; background:url('/resource/images/ico-dragHori.png')no-repeat;}
.dragPoint.vert::before{top:50%; width:11px; height:26px; margin-top:-13px; margin-left:-4px; background:url('/resource/images/ico-dragVert.png')no-repeat;}

.grid{width:100%; height:100%; border: 1px solid #c7cad7;}
.grid th,.grid td{font-size:15px; padding:5px 3px;}
.gridOpt~.grid{height:calc(100% - 40px);}
.gridOpt{display:flex; align-items:center; width:100%; height:40px; padding: 5px 15px; background:#dde0e6;}
.gridOpt label{color:#3d404c;}
.gridOpt label:not(:first-child){margin-left:10px; border-left:1px solid #b2b5c0; padding-left:10px;}
.gridOpt>button{margin-left:auto;}
.gridOpt .srcBtn{padding:5px 18px;}
.noData{position:relative; border:none;}
.noData p{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:17px; text-align:center; color:#b2b5c0;}
.noData p::before{content:""; display:block; width:46px; height:57px; margin:12px auto; background:url("/resource/images/ico-nodata.png")50%;}

.rightCon{width:40%; right:0;}
.rightCon>.btnWrap{position:absolute; z-index:9; right:5px; bottom:20px;}
.rightCon>.btnWrap .btn{width:40px; height:40px; border:1px solid #a6a6a6; box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); font-size:0;}
.rightCon>.btnWrap .btn:hover{border-color:#2c92ff; box-shadow: inset 2px 2px 2px 0 rgba(0,0,0,0.5);}
.rightCon>.btnWrap .btn.on{border-width:2px; border-color:#2c92ff; box-shadow: inset 2px 2px 2px 0 rgba(0,0,0,0.6);}
.calcBtn{background:#fff url('/resource/images/ico-calc.png') 50%;}
.moveBtn{background:#fff url('/resource/images/ico-move.png') 50%;} 

.calcPop{left:20%; bottom:23px; width:470px; height:245px;}
.calcPop .tblBody{height: calc(100% - 70px);}
.calcPop .noData table{height:100%;}
.calcPop .noData tr:hover{box-shadow:none; background:transparent;}
.calcPop .total{display:flex; width:100%; height:35px; line-height:35px; margin-top:7px; background:#d6e5f5; border-top:1px solid #80b3ea; border-bottom:1px solid #80b3ea;}
.calcPop .total li{padding:0 6px; font-weight:600;}
.calcPop .total li:not(:first-child){width:31%; text-align:right; color:#01388a;}
.calcPop .total span{font-size:20px; margin-right:3px;}
.calcPop .total li:first-child{width:38%; text-align:center;}

/*지도*/
.map{width:100%; height:100%;}
.mkWay{position:absolute; background: url(/resource/images/icon-way.png)no-repeat 50% 0; transform: rotate(0deg);}
.mkWay:not(.mkAcdt){top: -28px; left: -18px; width:38px; height:38px; background-size:38px;}
.mkWay.mkAcdt{top: -40px; left:-24px; width:50px; height:50px; background-size:50px;}
.infoWin{position:absolute; top:-260px; left:-157px; z-index: 10; width:250px; padding:29px 5px 5px 5px; border: 1px solid #7c7f8a; background: #fff; box-shadow: 0 0 9px 0 rgba(0,0,0,0.5);}
.infoWin .topTi{position:absolute; top:0; left:0; padding:7px 35px 3px 7px; /* background:#dde0e6; */}
.infoWin th,.infoWin td{padding:3px 5px; border-bottom: 1px solid #c2c2c2;}
.infoWin tr:first-of-type{border-top:1px solid #4f525d;}
.infoWin th{font-size: 13px; background:#ffdfe5;}
.infoWin td{font-size: 15px;}

/*Sub*/
.sub section{transition:flex .3s;}
.sub .gridWrap{flex:2; width:62%; padding:20px;}
/* .paging{width:100%; height:40px; padding-top: 10px;} */
.search select{width:120px;}
.search input[type="text"]{width:220px;}
.search label{display: inline-block; width: 0; overflow: hidden; vertical-align: sub; text-indent: -9999px;}
.search .srcBtn{margin-left:5px;}

/*게시판 작성/읽기/갱신/삭제*/
.crud{width:0; height:auto; overflow:hidden; background:#dde0e6;}
.crud.on{flex:1; padding:20px; width:38%;}
.crud .inbox{height:auto;}
.crud .topTi{height:40px; line-height:40px; font-size:15px; color:#fff; background:#4f525d;}
.crud .topTi::before{content:""; width:14px; height:28px; background: url(/resource/images/ico-crud.png)no-repeat -10px 0;}
.crud a.close::before,.crud a.close::after{background:#ddd;}
.crud tr{border-bottom:1px solid #c2c2c2;}
.crud th{text-align:left; font-size:14px;}
.crud td{vertical-align: baseline; line-height:1.5;}
.crud .sbjct td{height:250px;}
.crud .sbjct p{height:100%; overflow-y:auto;}
.crud th, .crud td{padding:7px 25px 7px 15px; font-size:15px;}
.read th, .read td{padding:10px 25px 10px 15px;}
.crud input[type="text"],.crud textarea{width:100%; background: #f3f1f1;}
.crud textarea{height:300px;}
.crud label.btn{display:inline-block; margin-bottom:7px;}
.crud .atch{max-height:90px; overflow:hidden; overflow-y:auto;}
.crud .atch li{width:90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.crud .atch a{text-decoration:underline; color:#3894fd;}
.crud .atch.noData{color:#999;}
.crud .btn02{display:none; background:rgba(124,127,138,0.4) url(/resource/images/ico-crud.png)no-repeat;}
.prvBtn{background-position: -57px 0!important;}/*이전*/
.chkBtn{background-position: -27px 0!important;}/*등록*/
.udtBtn{background-position: -83px 0!important;}/*수정*/
.delBtn{background-position: -113px 0!important;}/*삭제*/
.wrtBtn{background:rgba(79,82,93,.9) url(/resource/images/ico-crud.png)no-repeat -168px 0}/*작성*/
.wrtBtn:hover{background-color:rgba(79,82,93,1)}
.atchBtn::before{content:""; display:inline-block; width:17px; height:17px; vertical-align: sub; margin-right:5px; background:url('/resource/images/ico-crud.png')no-repeat -146px -6px;}

/*에러 페이지*/
.errorWrap{position:relative; background:#d7d7d7; text-align: center;}
.errorWrap div{position: absolute; top:42%; left:50%; transform: translate(-50%,-50%);}
.errorWrap div::before{content:""; display:block; width:105px; height:100px; margin:0 auto; background:url(../images/error-bg.png)50%;}
.errorWrap p{margin:28px 0; font-size:18px; color:#555; line-height:1.3;}
.errorWrap button{width: 160px; padding: 6px 20px; font-size: 16px;}