@charset "UTF-8";
/*-------------------------------------------------------------------
	파일정의 : Layoyt
	작성날짜 : 2020-04-06 김하연
	참고사항 : 이 파일은 설정값만 정의한다.
	분류순서 : 기본정책 > 유틸리티 > 사용자정의(컬러, 폰트, 보더, 간격 등)
	속성순서 : 표시 > 위치 > 넘침/흐름 > 크기/간격 > 박스모양 > 폰트/정렬 > 기타
-------------------------------------------------------------------*/


@import "reset.css";
@import "ui.css";


/*-------------------------------------------------------------------
    ## common
-------------------------------------------------------------------*/
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, input, button, a, div, textarea {font-family: 'Arial', sans-serif;}
html, body {position: relative; height: 100%;}
body{background: #262a32;}
#wrap{height: 100%;}
.set_inner{position: relative; box-sizing: border-box;}
.set_inner20{position: relative; box-sizing: border-box;}

/*-------------------------------------------------------------------
    ## header
-------------------------------------------------------------------*/
#header{position: fixed; left: 0; right: 0; top: 0; background: #1f2229; height: 60px; z-index: 20;}
#header .logo_area{float: left; width: 280px;}
#header .info_area{float: left; width: 100%; height: 60px; margin-right: -280px; padding-right: 280px; box-sizing: border-box; border-left: 1px solid #000;}
.logo{padding: 22px 0 0 16px;}
.logo a{display: block; width: 247px; height: 18px; background: url(../img/logo.png)center no-repeat; background-size: contain!important; text-indent: -999px;}
#header .btn_wrap.menu{float: left; margin-left: 20px; margin-top: 18px;}
#header .btn_menu{position: relative; display: block; width: 20px; height: 14px; padding: 5px 0;}
#header .btn_menu .bar{position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #fff;}
#header .btn_menu .bar:before, #header .btn_menu .bar:after{position: absolute; left: 0; content: ''; height: 2px; background: #fff;}
#header .btn_menu .bar:before{top: -6px; width: 20px;}
#header .btn_menu .bar:after{bottom: -6px; width: 20px; -webkit-transition: ease-out .2s; -o-transition: ease-out .2s; transition: ease-out .2s;}
#header .btn_menu.is_active .bar:after{bottom: -6px; width: 10px;}
#header .header_info{float: right; padding-right: 40px;}
#header .btn_wrap, #header .info_wrap{float: left;}
#header .info_wrap{margin-right: 40px;}
#header .info_wrap p{float: left; color: #fff; font-size: 13px; margin-right: 22px;}
#header .info_wrap p:last-child{margin-right: 0;}
.header_info .info_wrap{margin-top: 22px;}
.header_info .btn_wrap{margin-top: 17px;}
.header_info .btn_wrap>div{float: left; margin-right: 40px;}
.header_info .btn_wrap>div:last-child{margin-right: 0;}
.header_info .btn_head_alarm{position: relative;}
.header_info .txt_alarm{position: absolute; display: inline-block; right: -18px; top: -2px; font-size: 13px; color: #000; line-height: 14px; padding: 0 5px; border-radius: 7px; background: #c2a264;}
.header_info .ic_network{position: relative;}
.header_info .ic_network small{position: absolute; width: 8px; height: 8px; right: 2px; bottom: 3px; border-radius: 4px; background: #bbbdbf;}
.header_info .ic_network.on small{position: absolute; width: 8px; height: 8px; right: 2px; bottom: 3px; border-radius: 4px; background: #25d63e;}
.header_info .user p{display: inline-block; font-size: 14px; color: #fff; vertical-align: middle; margin-top: -2px;}
.alarm_widget{position: absolute; right: 40px; top: 80px; width: 375px; background: #000; z-index: 1;}
.alarm_widget .btn_txt{color: #aaa; border-bottom: 1px solid #aaa;}
.alarm_widget .tabs+.btn_area{margin: 24px 0 20px;}
.alarm_widget .alarm_list dl{margin-bottom: 14px;}
.alarm_widget .alarm_list dt, .alarm_widget .alarm_list dd{float: left; color: #aaa; font-size: 14px;}
.alarm_widget .alarm_list dt{width: 120px;}
.alarm_widget .alarm_list dd{width: 100%; margin-left: -120px; padding-left: 120px; box-sizing: border-box;}
.alarm_detail+.alarm_detail{border-top: 1px solid rgba(155,155,155,.5); padding-top: 20px; margin-top: 20px;}
.remark_area label{display: block; color: #aaa; font-size: 14px; margin-bottom: 12px;}
.remark_area .input_box{border-color: #aaa;}
.remark_area textarea{height: 70px; color: #aaa;}
.remark_area+.btn_area{margin-top: 20px;}
/*-------------------------------------------------------------------
    ## GNB
-------------------------------------------------------------------*/
#gnb{position: fixed; left: -280px; top: 60px; bottom: 0;  width: 280px; background: #1f2229; -webkit-transition: ease-out .2s; -o-transition: ease-out .2s; transition: ease-out .2s;}
#gnb.is_active{left: 0;}
#gnb li a{display: block; position: relative; font-size: 14px; color: #fff; line-height: 1; padding: 23px 0 23px 60px;}
#gnb li i{position: absolute; left: 16px; top: 50%; margin-top: -15px;}
#gnb li a:before{position: absolute; width: 6px; height: 6px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; right: 20px; top: 50%; margin-top: -3px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: ease .2s; -o-transition: ease .2s; transition: ease .2s; content: '';}
#gnb li a.is_active {color: #000; background: #c2a264; font-weight: bold; text-shadow: 1px 1px 0 rgba(255,255,255,.4);}
#gnb li a.is_active:before{border-color: #000; -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg);}

/*-------------------------------------------------------------------
    ## container
-------------------------------------------------------------------*/
#container{height: 100%; box-sizing: border-box; -webkit-transition: ease-out .2s; -o-transition: ease-out .2s; transition: ease-out .2s;}
/*#container.is_wide{padding: 60px 0 0 0;}*/
.contents{position: relative; height: 100%; box-sizing: border-box; }







/*-------------------------------------------------------------------
    ## ETC
-------------------------------------------------------------------*/
#control-sidebar-info-circle-tab #i-tab-pane-div .form-group:after{display: block; clear: both; content: '';}
#control-sidebar-info-circle-tab #i-tab-pane-div .form-group .col-md-12 button{width: 48%!important; margin: 0!important; vertical-align: top!important;}
#control-sidebar-info-circle-tab #i-tab-pane-div .form-group .col-md-12 button:nth-child(2n){margin-left: 2%!important;}
#control-sidebar-info-circle-tab #i-tab-pane-div .form-group .col-md-12 button:last-child{width: auto!important; font-size: 14px!important; color: #a3a4a4; border: 1px solid #a3a4a4; line-height: 34px!important; height: 34px; border-radius: 17px; box-sizing: border-box; margin-top: 14px!important;}