/* <!-- pc / 타블렛 1280/800 두타입-->
 pc : (원래작업한 것) https://www.figma.com/file/ENVX9Nqrk3GQ4ff6h14zj2/%EC%8A%A4%ED%85%8C%EC%9D%B4%EA%B3%A0-IoT-admin---PC?node-id=0%3A1
 타블렛 : https://www.figma.com/file/OcFxP2dQLSjBrAoedXwE4Q/%EC%8A%A4%ED%85%8C%EC%9D%B4%EA%B3%A0-IoT?node-id=0%3A1
  */


/* common */
*{margin:0; padding:0; color:#8D8D8D; text-decoration: none; list-style: none; outline:none; box-sizing:border-box; font-family:'Roboto', 'Roboto Condensed',  'Noto Sans KR', sans-serif; font-weight:300;}
.float-left{float:left}
.float-right{float:right}
.full-width{width:100%;}
.text-left{text-align:left}
.text-right{text-align:right}
.text-center{text-align:center}
.text-black{color:black}
.text-white{color:#fff}
.text-white2{color:#e5e5e5}
.text-white3{color:#8D8D8D}
.text-yellow{color:#FFE500}
.text-darkgray{color:#666456;}
.text-lightgray{color:#8D8D8D;}
.text-pink{color:#FF006B !important;}
.text-green{color:#39A144;}
.text-cyan{color:#1EAFC2}

.bg-yellow{background-color:#FFE500}
.bg-pink{background-color:#FF006B}
.bg-green{background-color:#39A144;}
.bg-cyan{background-color:#1EAFC2}
.bg-white{background-color:white}

.btn{border-radius:30px; background: #27282D; border: 1px solid #48494F; width:190px; height:50px; line-height:48px; font-size:15px; font-weight:bold; box-sizing:border-box;
outline:none; cursor:pointer}
body{background-color:#000; box-sizing:border-box; margin:0 auto; position:relative; height:100vh;}
body:after,
#gnb ul:after,
.header_bottom:after,
.bottom_inner:after,
#room_list:after,
#right_menu > div:after,
.kind:after,
.kind ul:after,
.table_top:after,
.menu:after,
#page_wrap{display:block; content:''; clear:both;}
#linkhotel_body{height:100%}
.br_mobile{display:none;}
#page_wrap{position:relative; height:calc(100% - 130px)}
.menu{position:absolute;; z-index:-1; top:0; left:0; width:100%;}
.text-overflow{text-overflow:ellipsis;
white-space:nowrap;
word-wrap:normal;
width:100%;
overflow:hidden;}
.text-cyan{color:#1EAFC2}
.text-yellow{color:#FFE500}
.text-yellow2{color:#FFBD2E}
.text-gray{color:#9F9F9F}
.text-red{color:#B90606}
.bg-cyan{background-color:#1EAFC2}
.bg-yellow{background-color:#FFE500}
.bg-yellow2{background-color:#FFBD2E}
.bg-gray{background-color:#9F9F9F}
.bg-red{background-color:#B90606}
ul:after{display:block; content:''; clear:both;}
ul.dev3 li{width:33.333%; float:left}
/* 버튼 클릭 시 파란 박스 안생기게 */
a:focus, button:focus li:focus,
a:active, button:active, li:active{ outline:none; -webkit-tap-highlight-color:transparent;}
button{ outline:none; -webkit-tap-highlight-color:transparent; background-color:transparent;box-shadow:none; border:0;}
/* checkbox */

input[type="checkbox"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  position: relative;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  top: 5px;
}
input[type="checkbox"]:focus,
.checkbox input[type="checkbox"]:focus,
.checkbox-inline input[type="checkbox"]:focus {
  outline: none;
}

input[type="checkbox"]:after,
.checkbox input[type="checkbox"]:after,
.checkbox-inline input[type="checkbox"]:after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin-top: -2px;
  border: 2px solid #888888;
  border-radius: 2px;
  transition: 240ms;
}
input[type="checkbox"]:checked:before,
.checkbox input[type="checkbox"]:checked:before,
.checkbox-inline input[type="checkbox"]:checked:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px;
  display: table;
  width: 5px;
  height: 6px;
  border: 2px solid #8D8D8D;
  border-top-width: 0;
  border-left-width: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

input:-internal-autofill-selected {background:inherit}

/* select */

select{
  font-family:'Noto Sans KR';
  font-weight:normal;
  font-size: 12px;
  text-indent: 10px;
  line-height:19px;
  background-color:transparent;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius:50px;
}
select::-ms-expand { display: none;}
select:-moz-focusring {color: transparent; text-shadow: 0 0 0 #000;}

select{
  position:relative;
  display:inline-block;
  float:left;
  border-radius:50px;
  background-color:#27282d;
  border:1px solid #34353a;
  width:90px;
  height:23px;
  background-image: url('../images/arrow_down.svg');
  background-repeat:no-repeat; background-position:right 8px center;
  background-size:13px 7px;

}

select.active {background-image: url('../images/arrow_up.svg');}

/* top */


#header{background-image: linear-gradient(270deg, #313337 0%, #242528 100%);}
.header_inner{position:relative; text-align:center; max-height:80px;}
#logo {width:130px; display:inline-block;padding:20px 0 0 20px; float:left;}
#gnb{width:60%; max-width:1000px; height:80px; display:inline-block; margin:0 auto;}
#gnb ul{height:100%;}
#gnb li{color:#666456; font-family:'Roboto'; font-weight:bold; float:left; width:calc(100% / 7); max-width:160px; height:100%; position:relative; cursor:pointer; text-align:center; padding-top:52px; font-size:14px; box-sizing:border-box;}
#gnb li:before{ display:block; content:''; width:25px; height:25px; position:absolute; top:16px; left:0; right:0; margin:auto; background-repeat:no-repeat;}
#gnb li.active{background-color:#1B1B1D; color:#fff; font-weight:bolder}
#gnb li:nth-child(1):before{background-image:url('../images/menu_top01.svg');}
#gnb li:nth-child(2):before{background-image:url('../images/menu_top02.svg');}
#gnb li:nth-child(3):before{background-image:url('../images/menu_top03.svg');}
#gnb li:nth-child(4):before{background-image:url('../images/menu_top04.svg');}
#gnb li:nth-child(5):before{background-image:url('../images/menu_top05.svg');}
#gnb li:nth-child(6):before{background-image:url('../images/menu_top06.svg');}
#gnb li:nth-child(7):before{background-image:url('../images/device_relaod.svg');}
#gnb li:nth-child(1).active:before{background-image:url('../images/menu_top01_active.svg');}
#gnb li:nth-child(2).active:before{background-image:url('../images/menu_top02_active.svg');}
#gnb li:nth-child(3).active:before{background-image:url('../images/menu_top03_active.svg');}
#gnb li:nth-child(4).active:before{background-image:url('../images/menu_top04_active.svg');}
#gnb li:nth-child(5).active:before{background-image:url('../images/menu_top05_active.svg');}
#gnb li:nth-child(6).active:before{background-image:url('../images/menu_top06_active.svg');}
.chip{position:absolute; width:20px; height:20px; color:#fff; border-radius:20px; display:inline-block; top:10px; right:45px; font-size:12px; font-weight:normal; line-height:20px;}
.header_inner .float-right{width:120px;}
.header_inner .float-right > div{display:inline-block; vertical-align: top;  margin-top:20px;}
.refresh{width:38px; height:38px; padding-top:1px;}
.connect{width:40px; height:40px; position:relative;display:inline-block;  margin-left:10px}
.connect div{display:inline-block; width:100%; height:100%;}
.connect div img{display: inline-block; vertical-align: top;}
.connect .connect02 {
  display: inline-block;
  width: 33px;
  height: 33px;
  border: 5px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #4dd65b;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}
.connect03{padding-top:1px;}

@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}


.header_bottom{width:100%; display:block; background: linear-gradient(180deg, #1B1B1D 0%, #202022 100%);}
.header_bottom ul{width:76%; float:left;}
.header_bottom ul li{width:12%; height:50px; line-height:30px; padding:10px 0; box-sizing:border-box; float:left;text-align:center; position:relative;}
.header_bottom ul li:after{width:2px; height:60%; background :linear-gradient(to right, #000, #404040); display:block; content:''; position:absolute; right:0; top:0; bottom:0; margin:auto;}
.header_bottom ul li:nth-child(2){width:20%;}
.tit{font-size:15px; color:#8D8D8D}
.header_bottom ul li strong{font-size:20px; display:inline-block; margin-left:10px;vertical-align: top; margin-top:-1px; font-weight:bolder}
.inout{display:inline-block; }
.header_bottom ul li .inout span{font-size:16px; margin-left:10px;}
.header_bottom ul li .inout strong{margin-left:5px; font-weight:bolder}

.login_info{display: inline-block; height: 50px; box-sizing: border-box;}
.login_info span{display:inline-block; height:100%;  line-height:50px;}
.admin{width:200px; text-align:center}
.admin img{width:30px; height:30px;vertical-align: middle; margin-right:15px;}
#logout{cursor:pointer; display:inline-block; margin-right:20px; font-size:16px;}
ul:after{display:block; content:''; clear:both;}
/* room_list */

#dd > dd{width:100%;float:none;}
#room_list{height:calc(100vh - 185px); }
#room_list .table_wrap{width:100% !important; height:100%}
#room_list .table_wrap .jspContainer{width:100% !important}
#room_list .table_wrap .jspContainer .jspPane {width: calc(100% - 20px) !important;}
.container{height:calc(100vh - 130px); background-color:#161618; width:82%; display:inline-block; position:relative; float:left;}
#room_list{padding:10px 0 0 10px !important; box-sizing:border-box;}
#room_list li{width:calc(95% / 10); height:170px; margin-right:0.5%; float:left; background-color:#1E1E1E; border-radius:5px; margin-bottom:5px; box-sizing:border-box; position:relative; border:1px solid transparent}
#room_list li input[type="checkbox"]{position:absolute; top:15px; left:10px;}
/*#room_list li:nth-child(10n){margin-right:0;}*/
#room_list li h2{    padding-top: 7px;
    font-size: 15px;
    color: #FFf;
    font-weight: bold;
    letter-spacing: 1px;}
#room_list li .room_type{font-size:8px; padding-top:0px; color:#E5E5E5}
#room_list li.enter{background-color:#413E2A}
#room_list li.enter .room_condition{background-color: #262629;}
#room_list li.stay{background-color:#55421C}
#room_list li.stay .room_condition{background-color: #262629;}
#room_list li.alert:before{display:block; content:''; width:50%; height:4px;border-radius:5px; position:absolute; top:0; left:0; right:0; margin:auto;}
#room_list li.in:before{background-color:#FFE500}
#room_list li.pink:before{background-color:#FF006B}
#room_list li.green:before{background-color:#39A144;}
#room_list li.cyan:before{background-color:#1EAFC2}

#room_list li.in h2, #room_list li.in .room_type{color:#FFE500}
#room_list li.pink h2, #room_list li.pink .room_type{color:#FF006B}
#room_list li.green h2, #room_list li.green .room_type{color:#39A144}
#room_list li.cyan h2, #room_list li.cyan .room_type{color:#1EAFC2}

#room_list li.active{border:1px solid #8D8D8D; box-sizing:border-box;}
.in_out .room_in{width:50%; display:inline-block; float:left; padding-left:5px; font-size:10px}
.in_out p{font-size:10px;}
.in_out p span{display:inline-block; padding-right:5px;}
.rooms{min-height:0}
.room_btns{text-align:center}
.room_btns li{    width: calc(95% / 6);
    float: left;
    margin-right: 1%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-weight: normal;
    font-size: 13px;
  margin-top:10px;}
.room_btns li .btn{color:#e5e5e5}
.room_btns li:nth-child(6n){margin-right:0}
.room_btns button.btn_confirm{    height: 35px;
    line-height: 35px;
    margin-top: 10px;
    display: inline-block;
    float: none;
    font-size: 14px;
    font-weight: normal;
}

 /** popup **/
#popup_wrap{position:fixed; width:100vw; height:100vh; background-color:rgba(0, 0, 0, .3); left:0; top:0; z-index:998;}
.popup{z-index:999; position:absolute; top:0; right:0; left:0; bottom:0; margin:auto; width:400px; height:500px;}
.info_header{background-image: linear-gradient(90deg, #3C3E48 0%, #212226 102.36%); width:100%; height:60px; line-height:40px; padding:10px 20px; box-sizing:border-box; }
.info_header h3{font-size:30px; color:#e5e5e5; display:inline-block;    font-family: 'Roboto'; font-weight:bold;letter-spacing: 1px}
.info_header span{font-size:14px; color:#e5e5e5; display:inline-block; margin-left:10px;}
.popup_btns .close{width:20px; display:inline-block; margin-left:10px; vertical-align: top; margin-top:2px;}
.popup_btns .room_detail{width:16px; display:inline-block;}

 #room_info_popup{width:600px; height:620px; background: #232326; box-shadow: 0px 0px 4px rgba(103, 103, 103, 0.51);}
 .contents{padding:15px;}
.room_info_list li{width:33.333%; float:left; text-align:center; position:relative; box-sizing:border-box}
.room_info_list li:after{ display:block; content:''; width:1px; height:70%; background-color:#353535; position:absolute; top:0; bottom:0; right:0; margin:auto; }
.room_info_list li:last-child{padding-right:0;}
.room_info_list li:last-child:after{display:none;}
.room_info_list li .btn{max-width:100%;}
.room_info_list li h5{margin-bottom:10px; font-family:'Roboto Condensed'; letter-spacing: -0.5px; font-weight:normal}
#room_info_popup .room_condition{position:static; text-align:left; background-color:transparent}
.room_info_list .status_box{display:block;}
/* .room_info_list .cont_inner .room_condition .room_in{width:auto;} */
#menu02 .room_info_list .room02 span{padding-left:22px;}
#menu02 .room_info_list .room02 span:before{left:0;background-image: url(../images/temp_white.svg);}
#menu02 .room_condition p{width:100%;}
#menu02 .room_condition p:nth-child(1),
#menu02 .room_condition p:nth-child(2){width:50%; margin-right:0;}

#menu02 .room_condition span{width:50%}
#menu02 .room_condition p:nth-child(1) span,
#menu02 .room_condition p:nth-child(2) span{width:auto;}
#menu02 .room_condition .room_tablet span{width:auto;}
#menu02 .room_condition .room_chkup span{width:auto;}
#menu02 .comment table { max-height:100px; overflow:auto;}
.status_box_icons{margin:10px auto 5px; width:60%;}
.status_box_icons img{width:25px;}
.status_box_icons:after,
#room_info_popup .room_condition:after{display:block; content:''; clear:both;}
#room_info_popup .room_condition .room_in{display:inline-block; float:left; width:50%; margin:0;}
#room_info_popup .room_condition .room_in.float-right{float:right}
#room_info_popup .room_condition p,
#room_info_popup .room_condition span{font-size:13px; display:inline-block; margin-right:0;font-weight:300}}
#room_info_popup .room_condition .room02{border:0; padding-bottom:0; margin-bottom:5px;}
#room_info_popup .room_condition .room02 span{margin-right:10px; width:auto;}
#room_info_popup .room_condition .room02 span:last-child{padding-left:23px;}
#room_info_popup .room_condition p.text-yellow span{padding-left:0; width:auto;}
#room_info_popup .room_condition span{padding-left:16px;}
#room_info_popup .room_condition span:before{width:12px; left:0;}
#room_info_popup .room_condition .room02 span:last-child:before{left:6px}
.btn_history{    display: inline-block;
    vertical-align: top;
    margin-top: 2px;
    margin-right: 8px;}
.room_condition .temperature:before{background-image:url('../images/temp_active.svg'); left:-5px}
.temperature.on{color:#FFE500}
.room_condition .humidity:before{background-image:url('../images/humidity_active2.svg');}
.room_info_list li .input,
.room_info_list li .info_wrap{margin-top:10px; display: inline-block; padding:0 10px; box-sizing:border-box; width:100%;}
.support_wrap button{position:relative; width:120px; height:30px; margin-bottom: 15px; padding-right:10px;}
.support_wrap button.ON.mcall{color:#FF006B}
.support_wrap button.ON:after{background-color:#FF006B}
.room_info_list li .btn.ON{color:#FF006B}
.support_wrap button:after{display:block; content:''; width:15px; height:15px; position:absolute; top:0; bottom:0; right:10px; background-color: #48494F; border-radius:20px; background-color:#48494f; margin:auto;}
.room_info_list li .input:after{display:block; content:''; clear:both;}
.room_info_list li .btn{ height:30px; line-height:28px; font-size:12px;  border:1px solid #48494F; font-weight:normal}
.room_info_list li .input button{width:calc(100% - 75px); float:right;color:#8D8D8D; font-weight:normal}
.room_info_list li .input button.active{color:#000}
.room_info_list li .input button.ON{color:#343434}
.info_wrap.support_wrap button.btn_side_circle.active{    border-color: #ffe500; color: #ffe500;}
.info_wrap.support_wrap button.btn_side_circle.active:after{background-color: #ffe500}
.status_box p.full-width{font-size:13px;}
.room_info_list li .status{height:60px;}
.room_info_list li .input label{width:70px; font-size:13px; float:left; line-height:30px; text-align:left;}
#room_info_popup .comment{width:100%; padding:15px 0; background-color:#29292D; border:1px solid #333; height:100px; overflow:auto; box-sizing:border-box; margin-top:20px;}
.comment table{padding-left:15px; width:100%;}
.comment table tr td{text-align:center; font-size:13px; color:#E5E5E5; font-weight:300}
.comment table tr td:nth-child(1){width:10%;}
.comment table tr td:nth-child(2){width:20%; text-align:left;}
.comment table tr td:nth-child(3){width:20%}
.comment table tr td:nth-child(5){width:10%}
#support_check{
    position: fixed;
    right: 0;
    left: 0;
    margin: auto;
    width: 300px;
    height: 150px;
    background: #232326;
    padding: 40px 20px 20px;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
    border: 1px solid #464646;
    z-index:99;
    width:320px;
    top: 20%;
    bottom: auto;
  }
#support_check .close{
  position: absolute;
    top: 15px;
    right: 15px;
    width: 20px;
    height: 20px;}
#support_check .popup_btns{padding-top:30px;}
#support_check .popup_btns .btn{    display: inline-block;
    width: 100px;
    height: 30px;
    line-height: 30px;}
  #support_check .popup_btns .btn.confirm{    margin-right: 10px; border: 1px solid #FFE500;
    background-color: #FFE500;
    color: #000;}



    #roomkey{
        width:450px;
        height: 195px;
        background-color: #3B3B41;
        z-index: 9999;
        position:absolute;
        top: 20%;
        right: 0;
        left: 0;
        margin:auto;
        border-radius:10px;
        overflow:hidden;
        box-sizing: border-box;
        text-align: center;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
        border: 1px solid #464646;
        display:none;
      }
      #roomkey .popup_header{text-align:center; height: 45px; line-height: 27px;}
      #roomkey .popup_header span{font-size:16px;}
      #roomkey ul li{width:50%; height:70px; display:inline-block; float:left; position:relative; padding:7px 20px 0; box-sizing:border-box; text-align:center; font-family:'Roboto Condensed'}
      #roomkey ul li:nth-child(1):after{display:block; content:''; width:1px; height:90%; position:absolute; right:0; top:0; bottom:0; margin:auto; background-color:#838392}
      #roomkey ul li p{font-size:14px; margin-bottom:5px;}
      #roomkey ul li h2{font-size:28px; font-weight:bold}
      #roomkey .popup_btns{text-align:center; margin-top:13px;}
      #roomkey .popup_btns a.btn{    display: inline-block;
          width: 160px;
          height: 35px;
          text-align: center;
          line-height: 35px;
          font-weight: normal;}




/* icons */
  /** icons **/
  .status_box{padding:7px; box-sizing:border-box; text-align:center; display:flex; align-items: center;}
  .parking, .memo{height:22px;}
  .status{height:28px; width:auto; margin:0 auto;}

  /** room_condition **/
  .room_condition{background-color:#262629; padding: 10px 5px; border-radius: 0 0 5px 5px; position:absolute; width:100%; box-sizing:border-box; bottom:0; float:left;}

  .room_condition span{position:relative; font-size:12px; display:inline-block; width:14px; margin-right:2px; height:100%;}
  .room_condition div span:last-child{
    width: auto;
  margin-right: 0;
  padding-left: 9px;
  vertical-align: top;
  line-height: 1.8;
  font-size:10px;
}
  .room_condition span:before{display:inline-block; content:''; background-repeat:no-repeat; background-position:center; width:15px; height:15px; position:absolute; left:0;top:0; bottom:0; margin:auto;}
  .room_condition span{width:12px;}
  .room_condition span.light:before{width:12px;}
  .room_condition span.light{float:left;}
  .light.ON, .air_vol.ON, .door_state.ON, .m_call.ON {color:#FFE500}
  .room_condition .room02 .temperature, .room_condition .room02 .humidity{color:#FFE500}
  .temperature:before{background-image:url('../images/temp.svg');}
  .humidity:before{background-image:url('../images/humidity.svg');}
  .light:before{background-image:url('../images/light.svg');}
  .air_vol:before{background-image:url('../images/air_vol.svg');}
  .door_state:before{background-image:url('../images/door.svg');}
  .m_call:before{background-image:url('../images/m_call.svg');}
  li.in span{color:#8d8d8d}
  /* li.in .temperature:before{background-image:url('../images/temp_active2.svg');} */
  li .temperature.ON{color:#FFE500}
  li .humidity.ON:before{background-image:url('../images/humidity_active.svg');}
  li .light.ON:before{background-image:url('../images/light_active.svg');}
  li .air_vol.ON:before{background-image:url('../images/air_vol_active.svg');}
  li .door_state.ON:before{background-image:url('../images/door_active.svg');}
  li .m_call.ON:before{background-image:url('../images/m_call_active.svg');}
  .room01{border-bottom:1px solid #36363D; padding-bottom:4px; margin-bottom:4px; height:24px;}
  .room02{float: left; margin: 0}
  .room02 p{font-size:11px; min-height:16px;color: #FF9900;}

/* right_menu */
#right_tab{display:none;}
#right_tab li{cursor:pointer; width:50%; float:left; font-size:13px; text-align:center; height:40px; border-bottom:2px solid #232327; box-sizing:border-box; line-height:40px;}
#right_tab li.ON{border-bottom:2px solid #FFE500; color:#FFE500}
.menu_{width:18%; float:right; background-color:#000; min-width:250px;background:linear-gradient(180deg, #232327 17.71%, #1B1B1D 100%); height:calc(100vh - 130px); position:relative;}
#right_menu{ overflow-x:hidden; max-height:calc(100vh - 130px)}
#right_menu > div p{
  height: 40px;
      line-height: 40px;
      background-color: #37373A;
      padding: 0 0 0 15px;
      font-size: 14px;
      box-sizing: border-box;
      color: #e5e5e5;
    }
#right_menu > div .tit{font-size:13px; width:15%; float:left; text-align:left}
.click_active.active{border:1px solid #FFE500; background-color:#FFE500; color:#000; font-weight:bold;}

/*1030 추가했습니다 - kim */
.click_active_pop.active{border:1px solid #FFE500; background-color:#FFE500; color:#000; font-weight:bold;}


#right_menu > div{background: linear-gradient(180deg, #232327 17.71%, #1B1B1D 100%);}
.notice_{padding:10px 15px;}
.notice_:after{display:block; content:''; clear:both;}
.notice_ ul{width:85%;float:right}
.notice_ ul li{
    font-family: 'Noto Sans KR';
    font-weight: normal;
    box-sizing: border-box;
    text-align: center;
    height: 23px;
    line-height: 21px;
    display: inline-block;
    float: left;
    border-radius: 30px;
    background-color: #27282d;
    border: 1px solid #34353a;
    font-size: 11px;
    width: 24.25%;
    margin-right: 1%;
    float: left;
    cursor:pointer;
    margin-top:10px;
}
.notice_ ul li:nth-child(4n){margin-right:0;}
.notice_ ul li.active{}
.notice_ ul li:nth-child(1),
.notice_ ul li:nth-child(2),
.notice_ ul li:nth-child(3),
.notice_ ul li:nth-child(4){margin-top:0;}
.notice_list{background-color:#1b1b1d;}
.notice_list .table_wrap{height:calc(100vh - 330px)}
.notice_list table{width:100%; border-spacing: 0px; border-collapse: separate;  padding-left:10px;}
.notice_list table td{font-size:13px; text-align:left; height:35px; font-weight:normal;}
.notice_list table td:nth-child(3){padding-left:10px; text-align:center}
.notice_list table tbody{background-color:#1B1B1D; padding:15px;}
.notice_list table tbody tr td:nth-child(1){text-align:left;}
.table_top span{display:inline-block; height:40px; line-height:40px;}
.table_top{background-color:#2A2B2F}
.table_top span:nth-child(1){text-align:left; width:35%; padding-left:30px; }
.table_top span:nth-child(2){width:15%}
.table_top span:nth-child(3){width:50%;text-align:center}
.notice_list table tbody tr td:nth-child(1){color:#fff; font-weight:500}
.notice_list .table_top span{font-size:13px;box-sizing:border-box; float:left; display:inline-block;}
.notice_list .table_top span strong{font-size:8px; line-height:8px; margin-left:10px; margin-top:-3px; display:inline-block; vertical-align: middle}
.table_wrap{height:190px;}
/* .notice_list table tbody tr.hover{background-color:#2A2B2F} */
#notice{height:47%; display:none;}
#count{height:100%}
#notice .table_wrap{height:180px;}
#notice table tbody tr.hover td{color:#FF006B}
#count table tbody tr.hover td{color:#FF006B}

#notice .notice_list .table_wrap{min-width: 100%;}
#notice .notice_list .table_wrap .jspContainer{min-width: 100%;}
#notice .notice_list .table_wrap .jspContainer .jspPane{min-width: calc(100% - 20px);}

thead tr{height: 40px;}

/* bottom */
#bottom{position:absolute; bottom:0; left:0; width:100%; background-color:rgba(36, 36, 46, .9); height:50px;}
.bottom_inner > div{width:30%; float:left; position:relative;padding:10px; box-sizing:border-box;  }
.bottom_inner > div:last-child{width:70%;}
.bottom_inner > div:after{width:2px; height:60%; background :linear-gradient(to right, #000, #404040); display:block; content:''; position:absolute; right:0; top:0; bottom:0; margin:auto;}

.bottom_inner > div:last-child:after{display:none}
.bottom_inner > div .tit{display:inline-block; width:30%; text-align:center; line-height:95px;}
.bottom_inner > div ul{width:100%; float:right; display:inline-block;}
.bottom_inner > div ul li.btn{
  font-family:'Noto Sans KR'; font-weight:normal; font-size:12px; box-sizing:border-box; text-align:center; height:25px; line-height:23px; display:inline-block; float:left; border-radius:50px; background-color:#27282d; border:1px solid #34353a}

.power_mng ul li{width:24.25%; margin-right:1%; float:left;}
.power_mng ul li:last-child{margin-right:0;}

.mt0{margin-top:0 !important;}
.bottom_inner > div:last-child ul li{width:calc(95% / 10); margin-right:.5%;}
.bottom_inner > div:last-child ul li:last-child{    margin-right: 0;
    float: right;
    border-radius: 30px;
    width: 10%;
    display: inline-block;
    font-size: 13px;
    height: 30px;
    border: 2px solid #fff;
}
.room_set ul li:nth-child(3n){margin-right:0;}
.bottom_inner > div ul li.active{border:1px solid #FFE500; background-color:#FFE500; color:#000; font-weight:bold;}


/* room_info_detail */
.pg_title{padding:0 0 10px; box-sizing:border-box;}
.pg_title h3{font-size:32px; display:inline-block; color:#e5e5e5; text-align:center; padding-left:10px; font-family: 'Roboto Condensed';
    font-weight: normal; letter-spacing: -1px;}
.pg_title span{font-size:16px;margin-left:30px; display:inline-block; color:#e5e5e5; vertical-align: top; margin-top:5px;}
.cont_inner .info_header{background: linear-gradient(180deg, #212125 0%, #1C1C1F 79.17%);}
.cont_inner .info_header h3{font-size:18px; font-weight: normal;}
.icon_info{font-size:14px;}
.icon_info img{width:22px; vertical-align: middle; margin-top: -3px; margin-right:5px;}
.cont_inner .info_contents{background: linear-gradient(180deg, #232327 23.44%, #1B1B1D 100%); height:calc(100vh - 345px) }
#menu02 .cont_inner .info_contents{    height: calc(100vh - 288px);}
.cont_inner .info_header span{margin-left:30px; font-weight:300; color:#8d8d8d}
.cont_inner .room_info_list .status_box{padding-top:0;}
.cont_inner .room_info_list li{height: auto; min-height: 350px;}
.cont_inner .room_info_list li:after{top:8%; height: 75%;}
.cont_inner .room_info_list li h5{font-size:18px; padding:15px 0 5px;}
.cont_inner .room_info_list li .btn{display: block; text-align: center; margin: 0 auto; width:200px; height:40px; font-size:16px;}
.cont_inner .room_info_list li .input button{width:150px;}
.cont_inner .room_info_list li .input label{font-size:16px; width:75px;}
.cont_inner .room_info_list li .support_wrap button{margin-top:15px;}
.cont_inner .room_info_list li .info_wrap{width:75%;}
.cont_inner .room_info_list li .status {height: 75px;}
.cont_inner .status_box_icons img {width: 30px; height: 26px;}
.cont_inner .status_box p.full-width{font-size:16px;}
.cont_inner .room_condition{position:static; background-color:transparent}
.cont_inner .room_condition span{font-size:15px; font-weight:300; margin-right:0;}
.cont_inner .room_condition p{font-size:15px; font-weight:300; margin-bottom:5px;}
.cont_inner .room_condition span.humidity{margin-right:0}
.cont_inner .room_condition .room_in{width:50%; display:inline-block;}
.cont_inner .room_condition .room_in,
.cont_inner .room_condition .room_in span,
.cont_inner .room02 {border-bottom:0;padding-bottom:0;}
.cont_inner .room02:after {display:block; content:''; clear:both;}
.cont_inner .room02 span{width:calc(50% - 2.5px); display:inline-block; margin:0; float:left; text-align:left; padding-left:43px; box-sizing:border-box}
.cont_inner .room02 span:before{left:24px;}
.cont_inner .room_btns{text-align:center; width:90%; margin:0 auto;}
.cont_inner .room_btns ul{display:block; width:100%; position:relative;}
.cont_inner .room_btns ul li.btn_confirm{    margin-right: 0;
    height: 100%;
    float: right;
    border-radius: 10px;
    width: 10%;
    display: inline-block;
    line-height: 1.4;
    font-size: 16px;
    position:absolute; top:0; right:0; padding-top:12px;}
/* .cont_inner .room_btns li{width:100px; margin-right:10px; font-size:16px; height:40px; line-height:40px; margin-top:10px;} */
.cont_inner .room_btns li:last-child{margin-right:0;}
.cont_inner .room_btns > button.btn_confirm{display:inline-block; width:150px; }
.cont_inner .info_contents .room_btns li{width:14%; margin-right:1%;}
/* .cont_inner .info_contents .room_btns li:nth-child(7){margin-right:0; } */
.cont_inner .comment{padding:30px; box-sizing:border-box; padding-bottom:0;}
.cont_inner .comment table{width:100%;box-sizing:border-box; padding:10px 0; display:block;}
.cont_inner .comment table tbody,
.cont_inner .comment table tr{width:100%; display:inline-block;}
.cont_inner .comment table tr td{display:inline-block; text-align:center; font-size:14px; color:#E5E5E5; font-weight:300; padding:5px 0;}

#menu02 .comment table tr td:nth-child(1){width:10%;}
#menu02 .comment table tr td:nth-child(2){    width: 38%; text-align: left;}
#menu02 .comment table tr td:nth-child(3){width:20%}
#menu02 .comment table tr td:nth-child(4){width:20%}
#menu02 .comment table tr td:nth-child(5){width:10%}

.del img{width:14px; margin-top:2px;}
.cmt_write{background-color:#29292D; padding:15px 30px; box-sizing:border-box;}
.cmt_write span,
.cmt_write button{height:30px;font-size:16px; font-weight:bold; display:inline-block;}
.cmt_write span{width:60px;}
.cmt_write button{width:110px; margin-left:10px;}
.cmt_write input{width: calc(100% - 190px); margin:0 5px; height: 30px; border: 1px solid #5F6063; box-sizing: border-box; border-radius: 6px; background-color:transparent; text-indent:5px;}
.cmt_write button img{width: 26px; vertical-align: top; margin-top: -6px;}
.cmt_write button label{font-size: 15px; display: inline-block; vertical-align: top; margin-top: -3px;}

.twinkle_clean{
  animation: twinkle_clean 1s step-end infinite;
 -webkit-animation: twinkle_clean 1s step-end infinite;
}
/* for MS계열 브라우저 */
@keyframes twinkle_clean {
 0% {opacity: 0.6}
 50% {opacity: 1}
}

/* for Chrome, Safari */
@-webkit-keyframes twinkle_clean {
  0% {opacity: 0}
  50% {opacity: 1}
}
/* left_menu */
.left_menu{width:25%; overflow:hidden}
#menu02 .container,
#menu03 .container,
#menu04 .container{    float: right;
    width: 75%;
    padding: 30px 45px;
    box-sizing: border-box;}
#menu02 .left_menu,
#menu03 .left_menu,
#menu04 .left_cctv{width:25%; float:left;}
#menu04:after{display:block; content:''; clear:both;}
.left_menu_list .scrollbar-inner{height: calc(100vh - 171px);}
.left_menu_list ul{width:90%; margin:0 auto;}
.left_menu_list ul li{text-align:left;}
.left_menu_list ul li label{display:inline-block; margin:0 30px; color:inherit}
.left_menu .left_menu_list ul li strong{color:inherit}
.left_menu_list ul li .text-yellow *{color: #FFE500;}
.left_menu_list ul li .text-green *{color: #39A144;}
.left_menu_list ul li .text-white *{color: white;}
.left_tab{background: linear-gradient(180deg, #212125 0%, #1C1C1F 100%); height:40px; width:100%;}
.left_tab ul.dev3{padding-left:15px; box-sizing:border-box}
.left_menu_list ul.dev3{    padding: 0 30px;}
.left_menu_list ul.dev{    padding: 0 30px;}

.roominfo .info_contents{padding:30px; box-sizing:border-box;}
.roominfo .info_contents p.bg-gray{background-color: #29292D;
    padding: 0px 15px;
    height: 45px;
    box-sizing: border-box;
    line-height: 45px;}
.roominfo .info_contents p.bg-gray span{display:inline-block; margin-right:30px;}
.roominfo .info_contents p strong{font-weight:300; display:inline-block; width:85px; color:#e5e5e5}
.roominfo_wrap{padding:15px 10px; line-height:1.6}
.roominfo_wrap p.mt30{margin-top:30px;}

/* support */
.support_top{padding:20px; line-height:1.8; height:110px;}
.support_top p{margin-bottom:10px;}
.support_top p .btn{width: 90px; height: 30px; line-height: 30px; font-size: 14px; font-weight: normal;}
.support_top select{width:120px; height:30px; line-height:30px;}
.support_top strong{display:inline-block; width:60px; height:30px; line-height:32px;}
.date_select{ margin-right:25px;}
.date_input_wrap{position:relative;}
.date_input_wrap span{display:inline-block; vertical-align: top}
.date_input_wrap.btn{cursor:auto; display:inline-block; height:30px; width:120px; line-height:30px;}
.date_input_wrap.btn input{text-indent:8px; border:0; outline:none; background-color:transparent; display:inline-block; width:100%; height:100%}
.date_arrow{width:13px; height:7px; position:absolute; right:8px; display:inline-block;}
.support_top .btn_wrap{display:inline-block; float:right;}
.support_top .btn_wrap button{float:left; display:inline-block; border:0; width:120px; height:30px; line-height:30px; font-weight:normal; font-size:14px; margin-left:10px;}
.support_top .btn_wrap button.click{background-color:#616161; color:#fff}
#support_table table{width:100%; display:table;}
#support_table table thead th{font-family:'roboto'; font-size:14px;}
#support_table table tbody tr td{font-weight:normal; text-align:center; font-weight:300; padding-bottom:7px;}
#support_table table tbody tr td.text-left{text-align:left;}
#support_table table tbody tr td.text-right{text-align:right;}

/* cctv */
#cctv_list{height:100%; width:100% !important; clear:both;}
#cctv_list ul li{background-color:#29292D; border-radius:5px; height:210px; width:31%; margin-right:3.5%; margin-bottom:15px;}
#cctv_list ul li:nth-child(3n){margin-right:0;}
#cctv_list p img{width:80px; height:50px; position:absolute; top:0; right:0; left:0; bottom:0; margin:auto;}
#cctv_list p{width:100%; height:calc(100% - 60px); position:relative;}
#cctv_list dl{width:100%; height:60px; background-color:#232326; padding:10px; box-sizing: border-box; border-radius: 0 0 6px 6px }
#cctv_list dl dt{font-size:15px; margin-bottom:2px;}

  /* left_menu_cctv */
  #left_menu_cctv{float:left; width:25%;}
  .left_cctv_menu_list li{height:85px; box-sizing:border-box; padding-top:5px; margin-bottom:5px; background-color:#2F3034; padding:10px;}
  .left_menu_list.left_cctv_menu_list ul{width:96%;}
  .left_cctv_menu_list .float-left{width:calc(100% - 105px); display:inline-block;}
  .left_cctv_menu_list .float-left p.text-white3{font-size:13px; margin-top:2px;}
  .left_cctv_menu_list .float-right{width:100px; height:65px; background-color:#404147; position:relative;}
  .left_cctv_menu_list li h4{font-size:16px; font-weight:bolder; margin-bottom:2px;}
  .left_cctv_menu_list .float-right img{width:30px; height:30px; display:inline-block; position:absolute; top:0; right:0; left:0; bottom:0; margin:auto;}

.hidden_menu{display:none}

/* STAT */
.stat00{padding:10px;}
.stat00 table{border-spacing: 0; width:100%}
.stat00 table th{width:40%; font-size:13px; text-align:left; padding-left:10px;}
.stat00 table tr:nth-child(1) td{font-size:13px;}
.stat00 table td{width:60%; text-align:center; font-size:13px; height:30px;}
.stat00 tr td {font-size:16px;}
.stat00 tr{background-color:#2A2B2E}
.stat00 tr:nth-child(2n){background-color:#2F3034}
.stat00 tr td strong{color:inherit; display:inline-block; font-size:14px; margin-left:5px}
.stat02 table tr td{text-align:right; padding-right:10px;}
.menu_.stat_left{float:left;}
#menu05 h3{background: linear-gradient(180deg, #212125 0%, #1C1C1F 79.17%); height:50px; line-height:50px; color:#e5e5e5; font-size:14px; padding:0 20px}
#menu05 h5{font-size:14px; margin:5px; color:#fff; }
.graph{width:100%; height:25px; margin-bottom:20px; margin-top:10px;}
.graph span{ display:inline-block; float:left; position:relative; height:25px;}
.graph span label{font-size:12px; position:absolute; top:102%;}
.bar_graph:after,
.graph:after{display:block; content:''; clear:both;}
.bar_graph{display: inline-block;
    width: 100%;
    height: 25px; padding:0 10px;}


.stat_top{}
#stat{padding:20px;}
.dropdown{position:relative;}
.dropdown_button{
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  display: inline-block;
  width: 75px;
  height: 25px;
  border-radius: 25px;
  line-height: 25px;
  cursor: pointer;
}
#dropdown_menu{
  position: absolute;
  top: 0;
  width: 100%;
  border-radius: 13px 13px 5px 5px;
  background-color: #27282D;
  z-index: 0;
  padding-top: 25px;
}
#dropdown_menu ul {
   padding:0 10px 10px;
  background: linear-gradient(180deg, rgba(141, 141, 141, 0) 3.19%, rgba(89, 89, 89, 0.3) 100%);

}
.stat_top li .btn{display:inline-block;}
.stat_top li .btn_wrap{float:right;}
.stat_top li .btn_wrap .btn_sch{width: 97px;
height: 25px;
background: #616161;
border-radius: 15px;}

.stat_top li .btn_wrap .btn_ex{width: 75px;
height: 25px;
background: #2A2B2E; color:#fff;
border-radius: 15px; margin-left:5px; color:#4D4D4D}

.stat_top li .date .input_date input{background-color:transparent; text-align:center}
.date{display:inline-block; float:left;}
.stat_top li .date .input_date{display:inline-block; text-align:center;}

.dropdown{margin-right:15px;}
#menu05 .table{padding:0 20px;}

#menu05 .table table{width:100%; margin-top:15px; border-spacing: 0;}
#menu05 .table table thead tr{height:50px; background-color:#29292D; font-size:13px;}
#menu05 .table table tbody td{height:50px; line-height:50px; text-align:center; font-size:13px;}
.stat_top li:nth-child(1){margin-bottom:10px;}

#menu05 .container{width:80%}
.stat_top{padding:10px 20px;}
.stat_top li label{font-size:12px; line-height:25px; height:25px; text-align:center; color:#e5e5e5; width:60px; display:inline-block; float:left;}
.stat_top li .btn{font-size:13px; font-weight:normal; text-align:center; display:inline-block; width:75px; height:25px; border-radius:25px; line-height:25px; cursor:pointer}
.stat_top li .dropdown{float:left; position:relative;width:75px; display:inline-block;}
.stat_top li .dropdown_button{    background-color: #161618;width:100%; z-index: 10; position:relative; text-align:center; height:25px; display:inline-block;border-radius:25px; line-height:20px; border:1px solid #48494F}
.stat_top li .date .input_date{width:127px; height:25px; line-height:20px; border:1px solid #48494F;border-radius:25px; background-color:#27282D;}
.stat_top li .date .input_date input{border:0; width:100%; height:100%;}




/* loading */
  #load {
    width: 350px;
    height: 350px;
    border-radius:350px;
    background-color:rgba(0, 0, 0, .8);
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    z-index: 1000;
    text-align: center;
    right: 0;
    bottom: 0;
    margin: auto;
}
#load .loading_txt{    width: 180px;
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    margin: auto;}
#load img{max-width:100%;}


/* datepicker*/
.ui-datepicker.ui-widget.ui-widget-content{
      background-image: linear-gradient(90deg, #2F3036 0%, #212226 102.36%);
      padding:0;
      border:0
}
.ui-datepicker .ui-datepicker-header{    background-image: linear-gradient(90deg, #3C3E48 0%, #212226 102.36%);
    padding: 10px 0; border:0;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{
  text-align:center; background-color:transparent; border:0;    color: #ddd;
    font-weight: 300;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 0;
    background: transparent;
    border-radius:30px;
    color: #FF9900;
}
.ui-datepicker .ui-datepicker-title span{color:#ddd}

/*************** SCROLLBAR BASE CSS ***************/

.scroll-wrapper {
    overflow: hidden !important;
    padding: 0 !important;
    position: relative;
}

.scroll-wrapper > .scroll-content {
    border: none !important;
    box-sizing: content-box !important;
    height: auto;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none !important;
    overflow: scroll !important;
    padding: 0;
    position: relative !important;
    top: 0;
    width: auto !important;
}

.scroll-wrapper > .scroll-content::-webkit-scrollbar {
    height: 0;
    width: 0;
}

.scroll-element {
    display: none;
}
.scroll-element, .scroll-element div {
    box-sizing: content-box;
}

.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible {
    display: block;
}

.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {
    cursor: default;
}

.scroll-textarea {
    border: 1px solid #cccccc;
    border-top-color: #999999;
}
.scroll-textarea > .scroll-content {
    overflow: hidden !important;
}
.scroll-textarea > .scroll-content > textarea {
    border: none !important;
    box-sizing: border-box;
    height: 100% !important;
    margin: 0;
    max-height: none !important;
    max-width: none !important;
    overflow: scroll !important;
    outline: none;
    padding: 2px;
    position: relative !important;
    top: 0;
    width: 100% !important;
}
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
    height: 0;
    width: 0;
}




/*************** SIMPLE INNER SCROLLBAR ***************/

.scrollbar-inner > .scroll-element,
.scrollbar-inner > .scroll-element div
{
    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 10;
}

.scrollbar-inner > .scroll-element div {
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}

.scrollbar-inner > .scroll-element.scroll-x {
    bottom: 2px;
    height: 8px;
    left: 0;
    width: 100%;
}

.scrollbar-inner > .scroll-element.scroll-y {
    height: 100%;
    right: 2px;
    top: 0;
    width: 8px;
}

.scrollbar-inner > .scroll-element .scroll-element_outer {
    overflow: hidden;
}

.scrollbar-inner > .scroll-element .scroll-element_outer,
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
    opacity: 0.4;
}

.scrollbar-inner > .scroll-element .scroll-element_track { background-color: #e0e0e0; }
.scrollbar-inner > .scroll-element .scroll-bar { background-color: #c2c2c2; }
.scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #919191; }
.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; }


/* update scrollbar offset if both scrolls are visible */

.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; }


.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; }


#room_list li .status_box {
	padding: 7px 20px;
}
#room_list li .status_box > img.parking {
	height: 15px;
}
#room_list li .status_box > img.memo {
	height: 15px;
}



 .header_bottom li{
     cursor:pointer
 }

 #menu02 .cont_inner .info_contents { height: calc(100vh - 360px); }
 #menu03 .cont_inner .info_contents { height: calc(100vh - 320px); }
 #menu05 .cont_inner .info_contents { height: calc(100vh - 270px); }

 #menu05 .table table tbody td,
 #menu05 .table table thead th {
     text-align: right;
     padding-right: 20px;
     font-size: 15px;
 }

 .notice_list .table_wrap {
     height: calc(100vh - 270px) !important;
 }
 .reload-device:after {
     display: none !important;
 }