@charset "utf-8";

*{font-family: 'Pretendard';}

/*왼쪽메뉴*/
html, body{background:#f8fafc; scroll-behavior: smooth;}
.web_wrap{width: 100%; position: relative; }
.left_menu_acco{
width:252px; position:fixed; background:transparent; height:100%; transition:width 0.22s ease, left 0.22s ease; left:0;
overflow:visible;
will-change: width, left;
}
.left_menu_acco::before{
content:'';
position:absolute;
top:8px;
left:8px;
right:8px;
bottom:8px;
background:#ffffff;
border:1px solid #dbe6f2;
border-radius:16px;
box-shadow:0 10px 24px rgba(15,23,42,0.08);
}
.left_menu_acco > *{position:relative; z-index:1;}
.content_box{ padding:30px; padding-left: 284px; box-sizing: border-box; }


.home_logo_box{
width:100%;
padding:24px 18px 18px 18px;
box-sizing:border-box;
text-align:center;
border-bottom:1px solid #edf2f7;
background:transparent;
border-radius:16px 16px 0 0;
}
.menu_icon{
width:28px; height:28px; margin-right:10px; opacity:1;
display:inline-flex; align-items:center; justify-content:center;
background:linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
border:1px solid #bfdbfe;
border-radius:3px;
}
.menu_icon img{display:none;}
.menu_icon::before{
    font-family:"Font Awesome 5 Free";
    font-weight:900;
    font-size:13px;
    color:#2563eb;
    line-height:1;
}
.menu_icon.control::before{content:"\f085";}
.menu_icon.facility::before{content:"\f1ad";}
.menu_icon.history::before{content:"\f1da";}
.menu_icon.setting::before{content:"\f013";}
.home_logo{width: 160px; margin:0 auto;}
.home_logo img{width: 100%}

.left_menu_ul{
clear:both; width:100%; max-height:66vh; overflow-y:auto; overflow-x:hidden;
padding:0; box-sizing:border-box; border:0; border-radius:0; background:transparent;
margin-bottom:4px;
}
.left_menu_li{width:100%; position: relative; }
.left_menu_btn{display: block;padding:10px; box-sizing: border-box; font-size:18px; font-weight: bold; margin-top: 20px;}
.left_menu_icon{background-position: left 20px top 7px; background-repeat: no-repeat; background-size: 25px; }

.left_menu_icon01{background-image: url(/static/img/web/dashboard.png);}
.left_menu_icon02{background-image: url(/static/img/web/talk.png);}
.left_menu_icon03{background-image: url(/static/img/web/people.png);}
.left_menu_icon04{background-image: url(/static/img/web/notice.png);}
.left_menu_icon05{background-image: url(/static/img/web/system.png);}

.left_menu_li:first-child .left_menu_btn{margin-top: 00px;}
.left_menu_li:last-child .left_menu_btn{padding-bottom: 20px;}

.left_menu_li:last-child .left_menu_line{display: none;}



.left_menu_line{display: none; width: 60px; height: 1px; background:#000; margin-left: 20px}
.menu_active_bg{width:5px; background:#fff;height: 39.5px;position: absolute; top: 0;left: 0;z-index: 1;transition: 0.3s;}

.menu_cont_box{
height:calc(100vh - 128px);
width:calc(100% - 16px);
margin:0 8px;
box-sizing:border-box;
overflow-y:auto;
overflow-x:hidden;
justify-content: space-between;
padding-bottom:0;
}

.logout_btn{
display:block; height:46px; border-radius:2px; transition: 0.2s; width:calc(100% - 30px); margin:0 auto; margin-bottom:18px;
border:1px solid #bfdbfe; font-size:15px; font-weight:600; color:#1d4ed8; line-height:44px; padding:0 14px; text-align:center; box-sizing: border-box;
background:#f8fbff; background-image:none;
}
.logout_btn:hover{background-color:#eff6ff; color:#1e40af; border-color:#93c5fd; background-image:none;}



.left_menu_box{padding:12px 10px 12px 10px; box-sizing:border-box;}
.left_menu_titbox{
padding:8px 8px 6px 8px;
box-sizing:border-box;
border:0;
border-radius:0;
margin-top:10px;
background:transparent;
}
.left_menu_titbox:first-child{margin-top:0;}
.left_menu_tit{
font-size:16px;
color:#64748b;
font-weight:700;
letter-spacing:0.02em;
text-transform:none;
}
.left_menu_page_btn{
display:flex; align-items:center; font-size:15px; padding:11px 12px; box-sizing:border-box; width:100%; transition:background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; margin-bottom:0; border-radius:0; font-weight:500;
color:#334155; border:0; border-bottom:1px solid #eef2f7; line-height:1.35; background:transparent;
}
.left_menu_page_btn::before{
content:"\f111";
font-family:"Font Awesome 5 Free";
font-weight:900;
font-size:8px;
display:inline-block;
width:14px;
text-align:center;
color:#94a3b8;
margin-right:10px;
flex:0 0 14px;
}
.left_menu_ul .left_menu_li:last-child > .left_menu_page_btn{border-bottom:0;}
.left_menu_page_btn:hover{
background-color:#f8fbff;
color:#0f172a;
}
.left_menu_li.active > .left_menu_page_btn,
.left_menu_page_btn.active{
background:#eef4ff;
color:#1d4ed8;
font-weight:700;
box-shadow: inset 2px 0 0 #2563eb;
}
.left_menu_li.active > .left_menu_page_btn::before,
.left_menu_page_btn.active::before{
color:#2563eb;
}
.left_menu_li.active::before{display:none;}

/* 펼침 상태: 아이콘 숨김(텍스트-only) */
.web_wrap:not(.sidebar-compact) .menu_icon{
    display:inline-flex;
}
.web_wrap:not(.sidebar-compact) .left_menu_page_btn::before{
    display:none;
}
.web_wrap:not(.sidebar-compact) .left_menu_titbox{
    padding:12px 4px 8px 4px;
    margin-top:14px;
}
.web_wrap:not(.sidebar-compact) .left_menu_tit{
    font-size:16px;
    color:#334155;
    font-weight:700;
}
.web_wrap:not(.sidebar-compact) .left_menu_ul{
    margin-bottom:10px;
}
.web_wrap:not(.sidebar-compact) .left_menu_page_btn{
    min-height:40px;
    font-size:14px;
    padding:10px 6px 10px 8px;
    line-height:1.4;
    border-bottom:1px solid #f1f5f9;
}
.web_wrap:not(.sidebar-compact) .left_menu_page_btn:hover{
    padding-left:12px;
}

/* 소메뉴별 아이콘 (이미지 미사용, 메뉴 의미 기반) */
.left_menu_li > .left_menu_page_btn[href="./main"]::before,
.left_menu_li > .left_menu_page_btn[href="./main_list"]::before{content:"\f3fd"; font-size:11px;}
.left_menu_li > .left_menu_page_btn[href="./mainDoor"]::before{content:"\f52b"; font-size:11px;}
.left_menu_li > .left_menu_page_btn[href="./chatList"]::before{content:"\f27a"; font-size:11px;}
.left_menu_li > .left_menu_page_btn[href="./relayConnectList"]::before{content:"\f0e7"; font-size:11px;}
.left_menu_li > .left_menu_page_btn[href="./relayChart"]::before{content:"\f080"; font-size:11px;}
.left_menu_li > .left_menu_page_btn[href="./doorSett"]::before{content:"\f023"; font-size:11px;}
.left_menu_li > .left_menu_page_btn[href="./failedList"]::before{content:"\f071"; font-size:11px;}
.left_menu_li > .left_menu_page_btn[href="./sensor"]::before{content:"\f2db"; font-size:11px;}
.left_menu_li > .left_menu_page_btn[href="./actionLog"]::before{content:"\f0ca"; font-size:11px;}
.left_menu_li > .left_menu_page_btn[href="./alertLog"]::before{content:"\f0f3"; font-size:11px;}
.left_menu_li > .left_menu_page_btn[href="./keyLog"]::before{content:"\f084"; font-size:11px;}
.left_menu_li > .left_menu_page_btn[href="./cleanLog"]::before{content:"\f51a"; font-size:11px;}
.left_menu_li > .left_menu_page_btn[href="./smsList"]::before{content:"\f7cd"; font-size:11px;}
.left_menu_li > .left_menu_page_btn[href="./roomSett"]::before{content:"\f1ad"; font-size:11px;}
.left_menu_li > .left_menu_page_btn[href="./roomAdd"]::before{content:"\f067"; font-size:11px;}
.left_menu_li > .left_menu_page_btn[href="./doorLockSett"]::before{content:"\f3c1"; font-size:11px;}
.left_menu_li > .left_menu_page_btn[href="./relaySett"]::before{content:"\f0e7"; font-size:11px;}
.left_menu_li > .left_menu_page_btn[href="./relayAuto"]::before{content:"\f017"; font-size:11px;}
.left_menu_li > .left_menu_page_btn[href="./sensorSett"]::before{content:"\f2db"; font-size:11px;}
.left_menu_li > .left_menu_page_btn[href="./userSett"]::before{content:"\f007"; font-size:11px;}
#pass_change > .left_menu_page_btn::before{content:"\f084"; font-size:11px;}





/*로그인*/
.login_wrap{display:block;width:100%; position: relative;}
.login_center_box{display: flex; flex-direction: column; align-items: center;    height: 100vh;justify-content: center;}

.center_tbox img{width:100%;}
.log_cont01{background-color:#333; width:550px; height:100vh; position: absolute; top:0; left:0; background-image: url('/static/img/opener/left_login_bg.png');
background-repeat: no-repeat; background-position: center; background-size: cover;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.center_tbox{width:250px;}

.log_cont02{padding:100px; box-sizing: border-box; padding-left:750px; width:100%;}
.login_logo{width:250px; margin: 0 auto;}
.login_logo img{width: 100%;}
.login_tit_eng{font-size: 26px;  text-align: left; font-weight: 400; margin-bottom: 40px; color:#9ca2a9;}
.login_tit{font-size: 60px;  letter-spacing: 3px; text-align: left;}
.input_title{padding-bottom:8px; font-size: 18px; font-weight: 700;}
.input_title_box{margin-bottom: 15px;}
.input_title_box03{display: flex; flex-direction: row; align-items: center;}
.input_title_box03 .ck_text{padding-left: 8px; cursor: pointer;display:block}

.login_jjname{font-size: 68px;  letter-spacing: 3px; text-align: left; color: #004080;}

.login_tit_inpbox{max-width: 400px;;}


.log_cont_logo{display: block; width: 250px;}
.log_cont_logo img{ width: 100%;}
.log_cont_txt{font-size: 22px;padding-left: 15px;}
.log_cont_tbox{position: absolute; bottom: 15px; left: 15px;}


/*공통 CSS*/
/* Check */
.ck { width:24px; height:24px; opacity: 0; top:0; left:0; position: absolute;border:0; padding:0; margin:0; cursor: pointer;}
.ck + .ck_btn {
display:inline-block;  background-image: url('/static/img/opener/no_check_icon.png'); background-size:18px; width:24px; height:24px;
 background-repeat: no-repeat; background-position: center; transition: 0.3s;cursor: pointer;}
.ck + .ck_btn_height{height:auto;}
.width_24px{width:24px; height: 24px;;}
.ck:checked + .ck_btn {background-image: url('/static/img/opener/n_check_icon.png');}
.ck_text{font-size: 15px; font-weight:500;; color:#999;}


.hover_table tr{ transition: 0.3s;cursor: pointer;}
.hover_table tr td{ transition: 0.3s;}
.hover_table tr:hover td{ background:#f6f6f6;}


button{box-sizing: border-box; outline: none;  border:0;}

.btn{width:100%; height:40px;border-radius: 8px; display:block; font-size:13px; font-weight:600; padding:0 8px; transition: 0.3s;}

.btn_save{font-size:15px; font-weight: 600;min-width: 60px; min-height: 45px; background:#2e3192; color:#fff;}
.btn_save:hover{background:#0d0f42;} 
.btn_cancel{font-size:15px; font-weight: 600;min-width: 60px; min-height: 45px; background:#fff; color:#999}
.btn_cancel:hover{background:#f3f3f3;} 
.pop_btn_cancel{font-size:15px; font-weight: 600;min-width: 60px; min-height: 45px; background:rgb(204, 204, 204); color:rgb(29, 29, 29)}
.pop_btn_cancel:hover{background:#dfdfdf;} 

.btn_small{width:100%; height:32px;border-radius: 8px; display:block; font-size:12px; font-weight:700; padding:0 8px; transition: 0.3s;}





.right_btn_box{display: inline-block; position: absolute; right:0; top:-2px;}

.btn_blue{background:#dadcff; color:#3c3f70;border: 1px solid #bec0e1;}
.btn_blue:hover{background:#b8bdff;}
.btn_blue:disabled{opacity: 0.5; background:#dadcff !important;}

.btn_gray{background:#f3f3f3; color:#49555a;border: 1px solid #dbdbdb;}
.btn_gray:hover{background:#d5d3d3;}
.btn_gray:disabled{opacity: 0.5; background:#dadcff !important;}

.btn_red{background:#ffb8b8; color:#b94e4e;border: 1px solid #e3b2b2;}
.btn_red:hover{background:#e3acac;}
.btn_red:disabled{opacity: 0.5; background:#dadcff !important;}

.margin_top_20{margin-top: 20px;}
.margin_top_8{margin-top: 8px;}
.margin_top_15{margin-top: 15px;}
.margin_bottom_12{margin-bottom: 12px;}
.margin_bottom_16{margin-bottom: 16px;}
.margin_bottom_20{margin-bottom: 20px;}

.padding_top_20{padding-top: 20px;}
.padding_top_8{padding-top: 8px;}
.padding_bottom_12{padding-bottom: 12px;}
.padding_bottom_16{padding-bottom: 16px;}
.padding_bottom_20{padding-bottom: 20px;}

.margin_right_12{margin-right: 12px;}
.margin_right_btn_12 button{margin-right: 12px;}
.margin_right_btn_12 button:last-child{margin-right:0px;}


.dis_flex_row{display: flex; flex-direction: row;}
.dis_flex_center{align-items: center; }
.dis_flex_right{justify-content: flex-end;}
.dis_flex_bottom_end{align-items: flex-end;}
.dis_flex_end{justify-content: space-between; }
.dis_flex_row_justify{justify-content: center;}
.dis_flex_column{display: flex; flex-direction: column;}
.dis_flex_btn_center{display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.dis_flex_btn_center_top{display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; }
.dis_inblock{display: inline-block;vertical-align: middle;}
.padding0{padding: 0;}
.padding16{padding: 16px; box-sizing: border-box;}

.pop_cont_btnbox_right .pop_cont_btn_width{margin-right: 12px;}
.pop_cont_btnbox_right .pop_cont_btn_width:last-child{margin-right: 0;}

.datetimepicker .datepicker-nav .datepicker-nav-previous, .datetimepicker .datepicker-nav .datepicker-nav-next{background:#00d1b2 !important;}

/* 스크롤 */
::-webkit-scrollbar { width: 5.2px; height:5.2px;} /* 스크롤 바 */
::-webkit-scrollbar-track { background-color:#ccc; } /* 스크롤 바 밑의 배경 */
::-webkit-scrollbar-thumb { background: #999; border-radius: 10px; } /* 실질적 스크롤 바 */
::-webkit-scrollbar-thumb:hover { background: #404040; } /* 실질적 스크롤 바 위에 마우스를 올려다 둘 때 */
::-webkit-scrollbar-thumb:active { background: #808080; } /* 실질적 스크롤 바를 클릭할 때 */
::-webkit-scrollbar-button { display: none; } /* 스크롤 바 상 하단 버튼 */


.inp_style{ height: 40px;border-radius: 8px; outline: none; border:1px solid #d1d9e6; min-width: 170px;box-sizing: border-box; width:100%; font-family: 'Pretendard', sans-serif; font-size:14px; color:#1e293b; transition: border-color 0.2s;}
.login_inp_style{ height: 50px;border-radius: 4px; outline: none; border:2px solid #dbdbdb; min-width: 170px;box-sizing: border-box; width:100%; 
    font-size: 16px;;font-family: 'Pretendard', sans-serif; font-weight: 500;}
.inp_style.date{background-image:url('/static/img/opener/calendar_icon.png'); background-repeat: no-repeat; background-position: left 8px center; background-size:20px;
padding-left: 36px;}
.inp_style.search{background-image:url('/static/img/opener/search_icon.png'); background-repeat: no-repeat; background-position: left 8px center; background-size:20px;
    padding-left: 36px;}
.sel_style{width:100%; height: 40px;border-radius: 8px; outline: none; border:1px solid #d1d9e6; min-width: 170px;box-sizing: border-box;width:100%; font-size:14px; color:#1e293b; transition: border-color 0.2s;}

input:read-only{background:#F3F5F6;  border:1px solid #dbdbdb !important;}
/* .inp_style.date:read-only{background-color:#fff;} */
input:disabled{background:#F3F5F6;  border:1px solid #dbdbdb !important; color:#8998A0 !important;}



.setup_title{font-size:13px; font-weight:600; color:#475569; margin-bottom: 6px;display: block;}

input{font-size:14px; box-sizing: border-box; padding:0 8px;outline: none;}
input:placeholder{color:#ABB4B9; transition:0.3s; font-size:45px;}
input:focus{border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.1);}
select{font-size:14px; box-sizing: border-box; padding:0 12px;
    -webkit-appearance: none; 
   -moz-appearance: none;    
   appearance: none;
background-image:url('/static/img/web/drop_arrow.png'); background-repeat: no-repeat; background-position: right 14px center; background-size:10px;}

select:placeholder{color:#ABB4B9; transition:0.3s; font-size:14px;}
select option{font-size: 18px;}
select:focus{border-color: #ffacaf;}

.textarea_style{ height: 40px;border-radius: 8px; outline: none; border:1px solid #dbdbdb; min-width: 170px;box-sizing: border-box; width:100%; ;
    font-family: 'Pretendard', sans-serif;}


textarea:read-only{background:#F3F5F6;  border:1px solid #e3e3e3 !important;}
textarea:disabled{background:#F3F5F6;  border:1px solid #e3e3e3 !important; color:#8998A0 !important;}
textarea{font-size:14px; box-sizing: border-box; padding:10px 8px;outline: none; display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;}
textarea:placeholder{color:#ABB4B9; transition:0.3s; font-size:45px;}
textarea:focus{border-color: #ffacaf;}



.default_btn{display: block; border-radius: 8px; border: 0; height:40px; text-align: center; background-color:#3b82f6; color:#fff; font-weight:600; width:100% ; 
    padding: 0 12px; box-sizing: border-box; transition: 0.2s; font-size:14px;}   

.min_width_btn{min-width: 60px;}
.default_btn:hover{background-color: #2563eb;}

.default_btn:disabled{background-color:#ccc; color:#666;}

.default_ver_btn{display: block; border-radius: 8px; border: 0; height:40px; text-align: center; background-color:#46b692; color:#fff; font-weight:600; width:100% ; 
    padding: 0 12px; box-sizing: border-box; transition: 0.3s;}   

.default_ver_btn:hover{background-color: #35ab85;}

.default_ver_btn:disabled{background-color:#ccc; color:#666;}

.default_ver02_btn{display: block; border-radius: 8px; border: 0; height:40px; text-align: center; background-color:#4d24ad; color:#fff; font-weight:600; width:100% ; 
    padding: 0 12px; box-sizing: border-box; transition: 0.3s;}   

.default_ver02_btn:hover{background-color: #391a79;}

.default_ve02r_btn:disabled{background-color:#ccc; color:#666;}

.default_delete_btn{display: block; border-radius: 8px; border: 0; height:40px; text-align: center; background-color:#dbeafe; color:#2563eb; font-weight:600; width:100% ; 
    padding: 0 12px; box-sizing: border-box; transition: 0.3s; border:1px solid #ffa1a4;}    

.default_delete_btn:hover{background-color: #f9bdbf;}

.default_delete_btn:disabled{background-color:#ccc; color:#666;}


.default_btn_big{display: block; border-radius: 4px; border: 0; height:50px; text-align: center; background-color:#004080; color:#fff; font-weight:600; width:100% ; 
    padding: 0 8px; box-sizing: border-box; transition: 0.3s; font-size:16px;}
.default_btn_big:hover{background-color: #0e71d4;}

.default_btn_big:disabled{background-color:#ccc; color:#666;}

.default_btn_gray{display: block; border-radius: 8px; border: 0; height:40px; text-align: center; background-color:#f3f5f6; color:#424a4d; font-weight:600; width:100% ; 
    padding: 0 8px; box-sizing: border-box; transition: 0.3s;}
.default_btn_gray:hover{background-color: #ddd;}

.default_btn_gray:disabled{background-color:#ccc; color:#666;}

.default_btn_downgray{display: block; border-radius: 8px; border: 0; height:40px; text-align: center; background-color:#cdcdcd; color:#545454; font-weight:600; width:100% ; 
    padding: 0 8px; box-sizing: border-box; transition: 0.3s;}
.default_btn_downgray:hover{background-color: #ddd;}

.default_btn_downgray:disabled{background-color:#ccc; color:#666;}

.default_btn_darkengray{display: block; border-radius: 8px; border: 0; height:40px; text-align: center; background-color:#798185; color:#fff; font-weight:600; width:100% ; 
    padding: 0 8px; box-sizing: border-box; transition: 0.3s;}
.default_btn_darkengray:hover{background-color: #939b9f;}

.default_btn_darkengray:disabled{background-color:#ccc; color:#666;}

.default_btn_white{display: block; border-radius: 8px; border: 0; height:40px; text-align: center; background-color:#fff; color:#9ca2a9; font-weight:600; width:100% ; 
    padding: 0 8px; box-sizing: border-box; transition: 0.3s;}
.default_btn_white:hover{background-color: #eee;}

.default_btn_white_border{border:1px solid #ccc; height: 40px; padding: 0 8px;}

.default_btn_clean{display: block; border-radius: 8px; border: 0; height:40px; text-align: center; background-color:#0cd5dc; color:#fff; font-weight:600; width:100% ; 
    padding: 0 14px; box-sizing: border-box; transition: 0.3s;}
.default_btn_clean:hover{background-color: #0ab3b9;}

.default_btn_clean:disabled{background-color:#ccc; color:#666;}

.default_btn_sm{display: block; border-radius: 6px; border: 0; height:30px; text-align: center; background-color:#f3f5f6; color:#424a4d; font-weight:600; width:100% ; 
    padding: 0 12px; box-sizing: border-box; transition: 0.3s; border:0;}

.default_btn_sm:hover{background-color: #ddd;}

.default_btn_sm:disabled{background-color:#ccc; color:#666;}

.default_btn_history{background-image: url('/static/img/web/history_icon.png'); background-repeat: no-repeat; background-position: left 8px center ; background-size: 22px;
    padding-left: 34px;}

        
.default_btn_plus{background-image: url('/static/img/web/w_hov_plus_btn.png'); background-repeat: no-repeat; background-position: left 13px center ; background-size: 12px;
    padding-left: 36px;}

.default_btn_minus{background-image: url('/static/img/web/minus_btn_icon.png'); background-repeat: no-repeat; background-position: left 13px center ; background-size: 12px;
        padding-left: 36px; background-color:#dbeafe; color:#2563eb}
.default_btn_minus:hover{background-color:#f9bdbf;}
    
.default_btn_plus_sm{background-image: url('/static/img/web/plus_btn_sm_img.png'); background-repeat: no-repeat; background-position: left 12px center ; background-size: 14px;
        padding-left: 34px;}


.icon_btn{display: block; border-radius: 8px; border: 0; width:44px; height:44px; text-align: center; background-color:#fff; color:#424a4d; font-weight:600; 
    padding: 0 8px; box-sizing: border-box; transition: 0.3s; border:1px solid #ddd;}
.icon_btn_txt{width:60px}
.icon_btn:hover{background-color:#f6f6f6;}
.icon_btn.excel{background-image:url('/static/img/opener/excel_icon.png'); background-repeat: no-repeat; background-position:center; background-size:22px;}
.icon_btn_txt_left{display: block; border-radius: 8px; border: 0;  padding-right:8px; padding-left: 36px; height:44px; text-align: center; background-color:#fff; color:#424a4d; font-weight:600; 
   box-sizing: border-box; transition: 0.3s; border:1px solid #ddd; }
.icon_btn_txt_left_medium{display: block; border-radius: 8px; border: 0;  padding-right:8px; padding-left: 36px; height:40px; text-align: center; background-color:#fff; color:#424a4d; font-weight:600; 
    box-sizing: border-box; transition: 0.3s; border:1px solid #ddd; }
.icon_btn_txt_left.excel{background-image:url('/static/img/opener/excel_icon.png'); background-repeat: no-repeat; background-position:left 8px center; background-size:20px;}
.icon_btn_txt_left.download{background-image:url('/static/img/opener/download_icon.png'); background-repeat: no-repeat; background-position:left 8px center; background-size:20px;}
.icon_btn_txt_left.refresh{background-image:url('/static/img/opener/refresh_icon.png'); background-repeat: no-repeat; background-position:left 8px center; background-size:20px;}
.icon_btn_txt_left.plus{background-image:url('/static/img/opener/btn_plus_icon.png'); background-repeat: no-repeat; background-position:left 8px center; background-size:18px;}
.icon_btn_txt_left.search{background-image:url('/static/img/opener/dark_search_icon.png'); background-repeat: no-repeat; background-position:left 8px center; background-size:20px;}
.icon_btn_txt_left.time{background-image:url('/static/img/opener/time_icon.png'); background-repeat: no-repeat; background-position:left 8px center; background-size:20px;}
.icon_btn_txt_left.setting{background-image:url('/static/img/opener/n_setting_icon.png'); background-repeat: no-repeat; background-position:left 8px center; background-size:20px;}
.icon_btn_txt_left:hover{background-color:#f6f6f6;}


.icon_btn_txt_left_ver02{display: block; border-radius: 8px; border: 0;  padding-right:8px; padding-left: 36px; height:40px; text-align: center; font-weight:600; 
    box-sizing: border-box; transition: 0.3s; }
.icon_btn_txt_left_ver02.time{background-image:url('/static/img/opener/w_time_icon.png'); background-repeat: no-repeat; background-position:left 8px center; background-size:20px;}
.icon_btn_txt_left_ver02.maid{background-image:url('/static/img/opener/w_maid_icon.png'); background-repeat: no-repeat; background-position:left 8px center; background-size:20px;}
.icon_btn_txt_left_ver02.master{background-image:url('/static/img/opener/w_master_icon.png'); background-repeat: no-repeat; background-position:left 8px center; background-size:20px;}
.icon_btn_txt_left_ver02.card{background-image:url('/static/img/opener/w_card_icon.png'); background-repeat: no-repeat; background-position:left 8px center; background-size:20px;}



.pop_icon_btn{display: block; border-radius: 8px; border: 0; width:40px; height:40px; text-align: center; background-color:#fff; color:#424a4d; font-weight:600; 
    padding: 0 8px; box-sizing: border-box; transition: 0.3s; border:1px solid #ddd;}
.pop_icon_btn:hover{background-color:#f6f6f6;}
.pop_icon_btn.excel{background-image:url('/static/img/opener/excel_icon.png'); background-repeat: no-repeat; background-position:center; background-size:22px;}
.pop_icon_btn_txt_left{display: block; border-radius: 8px; border: 0;  padding-right:8px; padding-left: 36px; height:40px; text-align: center; background-color:#fff; color:#424a4d; font-weight:600; 
   box-sizing: border-box; transition: 0.3s; border:1px solid #ddd; }
.pop_icon_btn_txt_left.excel{background-image:url('/static/img/opener/excel_icon.png'); background-repeat: no-repeat; background-position:left 8px center; background-size:20px;}
.pop_icon_btn_txt_left.download{background-image:url('/static/img/opener/download_icon.png'); background-repeat: no-repeat; background-position:left 8px center; background-size:20px;}
.pop_icon_btn_txt_left.refresh{background-image:url('/static/img/opener/refresh_icon.png'); background-repeat: no-repeat; background-position:left 8px center; background-size:20px;}
.pop_icon_btn_txt_left.plus{background-image:url('/static/img/opener/btn_plus_icon.png'); background-repeat: no-repeat; background-position:left 8px center; background-size:20px;}
.pop_icon_btn_txt_left:hover{background-color:#f6f6f6;}


.room_link_btn{width:50px; height:50px; border:0; border-radius: 50%; background-color:#ddd; box-shadow: 2px 4px 8px 0px #2934390a;margin-right: 20px;;
display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; transition: 0.3s; color:#111;}
.room_link_btn .room_link_icon{display:block; width:16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: 100%;
background-image: url('/static/img/mobile/door/bluetooth_off.png');margin-bottom: 4px;}
.room_link_btn.on{background-color:#3b82f6; color:#fff;}
.room_link_btn.on .room_link_icon{background-image: url('/static/img/mobile/door/bluetooth_on.png');}
.room_link_btn:disabled{background-color:#ddd; }



.sel_style{width:100%; box-sizing:border-box;border-radius:8px; border:1px solid #d1d9e6;height:40px;padding:0 8px;outline:none;
    -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image:url('/img/opener/drop_icon.png'); background-repeat:no-repeat;
    background-position:right 8px center; background-size:8px; background-color:#fff;color:#1e293b;}
  .key_list_sel::-ms-expand { display: none;}

  select:disabled{background-color:#F3F5F6;  border:1px solid #e3e3e3 !important; color:#8998A0 !important;}
  select::read-only{background-color:#F3F5F6;  border:1px solid #e3e3e3 !important; color:#8998A0 !important;}

/* ===== Custom Select ===== */
.custom-select{position:relative; width:100%; font-family:'Pretendard',sans-serif;}
.custom-select .sel_style{display:none;}
.custom-select-trigger{
    display:flex; align-items:center; justify-content:space-between;
    height:40px; padding:0 12px; border:1px solid #d1d9e6; border-radius:8px;
    background:#fff; cursor:pointer; transition:border-color 0.2s;
    font-size:14px; color:#1e293b; box-sizing:border-box; user-select:none;
}
.custom-select-trigger:hover{border-color:#94a3b8;}
.custom-select.open .custom-select-trigger{border-color:#3b82f6; box-shadow:0 0 0 2px rgba(59,130,246,0.1);}
.custom-select-trigger span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.custom-select-arrow{
    width:18px; height:18px; flex-shrink:0; margin-left:8px;
    display:flex; align-items:center; justify-content:center;
    transition:transform 0.2s;
}
.custom-select-arrow::after{
    content:''; width:7px; height:7px;
    border-right:2px solid #94a3b8; border-bottom:2px solid #94a3b8;
    transform:rotate(45deg); margin-top:-3px;
}
.custom-select.open .custom-select-arrow{transform:rotate(180deg);}
.custom-select-options{
    position:absolute; top:calc(100% + 4px); left:0; right:0;
    background:#fff; border:1px solid #e2e8f0; border-radius:8px;
    box-shadow:0 4px 16px rgba(0,0,0,0.08);
    max-height:220px; overflow-y:auto; z-index:100;
    display:none; padding:4px;
}
.custom-select.open .custom-select-options{display:block;}
.custom-select-option{
    padding:9px 12px; font-size:14px; color:#334155;
    border-radius:6px; cursor:pointer; transition:background 0.12s;
}
.custom-select-option:hover{background:#f1f5f9;}
.custom-select-option.selected{color:#3b82f6; font-weight:600; background:#eff6ff;}
.custom-select-options::-webkit-scrollbar{width:5px;}
.custom-select-options::-webkit-scrollbar-track{background:transparent;}
.custom-select-options::-webkit-scrollbar-thumb{background:#cbd5e1; border-radius:3px;}
.custom-select.disabled .custom-select-trigger{background:#f3f5f6; border-color:#e3e3e3; color:#8998a0; cursor:default;}
.custom-select.disabled .custom-select-arrow::after{border-color:#8998a0;}

.text_center{text-align: center;}
.text_left{text-align: left;}
.text_right{text-align: right;}

.right_contbox{ padding:52px 36px 36px 284px; box-sizing: border-box; width:100%; min-width:1580px; transition:padding-left 0.22s ease, padding-right 0.22s ease; background:#f8fafc; will-change: padding-left;}

/* compact sidebar: fully hide on PC */
.web_wrap.sidebar-compact .left_menu_acco{left:-252px;}
.web_wrap.sidebar-compact .content_box{padding-left:32px;}
.web_wrap.sidebar-compact .right_contbox{padding-left:32px;}
.main_cont_tit{font-size: 24px; font-weight:700; color:#0f172a; display: flex; flex-direction: row; align-items: center;}
.main_cont_tit_sub{margin-left: 12px; color:#8c8c8c; font-size:20px; font-weight: 400;;}

.total_numbox{margin-bottom: 20px; position: relative;z-index:1;}
.total_numbox_margin_top_bottom{margin:20px 0px; position: relative;z-index:1;}
.total_num_tit{color:#64748b; font-size: 14px; font-weight: 600; text-align: right;}
.total_num_tit_sub{color:#9ca2a9; font-size: 15px; font-weight: 600;}
.total_num_tit_box .total_num_tit{margin-right:8px;}
.total_num_tit_box .total_num_tit:last-child{margin-right: 0;;}


.total_tab_box{gap:6px;}
.total_tab{font-size:13px; font-weight: 500; margin-right: 0; padding:6px 16px; background-color:#fff; border:1px solid #e2e8f0; border-radius:6px; color:#64748b; cursor: pointer; transition: 0.15s;}
.total_tab:hover{background-color:#f8fafc; border-color:#cbd5e1;}
.total_tab.active{color:#fff; background-color:#3b82f6; border-color:#3b82f6;}
.total_tab:last-child{margin-right:0;}
.total_tab.active.js{background-color:#3b82f6; border-color:#3b82f6;}
.total_tab.active.gs{background-color:#94a3b8; border-color:#94a3b8;}
.total_tab.active.cl{background-color:#06b6d4; border-color:#06b6d4;}
.total_tab.active.dt{background-color:#f59e0b; border-color:#f59e0b;}
.total_tab.active.not{background-color:#8b5cf6; border-color:#8b5cf6;}


.total_tab_num{display: block; width:17px; height:17px;background-color:#fff; text-align: center; ;line-height: 17px; border-radius: 50%; margin-left:8px;}
.total_tab.active.js .total_tab_num{color:#3b82f6;}
.total_tab.active.gs .total_tab_num{color:#94a3b8;}
.total_tab.active.cl .total_tab_num{color:#06b6d4;}
.total_tab.active.dt .total_tab_num{color:#f59e0b;}


/* .room_state_box{position: absolute; top:8px ; right:8px;} */
.room_state{font-size:22px; font-weight: 800; transition: 0.2s; 
            display: inline-flex; align-items:center; gap:8px; padding:0; border-radius:0; line-height: 1.2; background:none;}
.room_state::before{content:''; width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0;}
.room_state.js{color:#3b82f6;} .room_state.js::before{background-color:#3b82f6;}
.room_state.gs{color:#94a3b8;} .room_state.gs::before{background-color:#94a3b8;}
.room_state.cl{color:#06b6d4;} .room_state.cl::before{background-color:#06b6d4;}
.room_state.dt{color:#f59e0b;} .room_state.dt::before{background-color:#f59e0b;}
.room_state.not{color:#8b5cf6;} .room_state.not::before{background-color:#8b5cf6;}
.room_state.off{color:#e74c3c;} .room_state.off::before{background-color:#e74c3c;}


/* 공실 뒤에 진한 색 
.room_state.js{background-color:#E98100;}
.room_state.gs{background-color:#19327E;}
.room_state.cl{background-color:#059392;}
.room_state.dt{background-color:#0a7021;} */





.wcont_box{width:100%; padding:18px 20px; box-sizing: border-box; border-radius: 10px; border:1px solid #e5e8eb; box-shadow: none; background-color:#fff;position:relative; z-index:10;}
.table_over_stylebox{ box-shadow: none; border-radius:10px; overflow: hidden; border:1px solid #e5e8eb;}

.table_over_stylebox_04{
    border:1px solid #f6f6f6; 
    box-shadow: none; border:1px solid #e2e8f0; 
    border-radius:12px; 
    overflow: auto;
    height: 250px;
    background-color: #fff;
}
.back_wcolor{background-color:#fff;}

.table_header{position: relative; z-index: 1; width:100%; box-shadow: none; border-bottom:1px solid #e5e8eb;}

.table_list{width: 100%; table-layout: fixed; border-collapse: collapse;}
.table_list_th{padding:14px; font-size: 14px; font-weight: 600; color:#9ca2a9;    vertical-align: middle;}
.table_list_td{padding:14px; color:#333;; font-size: 14px; font-weight: 500;    vertical-align: middle;}
.table_list_td > p{ font-size: 14px; font-weight: 500;}
.table_list_td .table_list_td_ok{color:#0ca8ff;}
.table_list_td .table_list_td_no{color:#ff0000;}
.table_list_td_red{color:#ff0000;}
.table_list_td_gray{color:#aaa;}


.table_list_chart thead{position: relative; z-index: 1; width:100%; box-shadow: none; border:1px solid #e2e8f0;}
.table_list_chart th{padding:14px 8px; font-size: 14px; font-weight: 600; color:#9ca2a9;    vertical-align: middle;}
.table_list_chart td{padding:14px 8px; color:#333;; font-size: 14px; font-weight: 500;    vertical-align: middle;border:1px solid #f1f1f1;text-align: center; cursor: pointer;}
.table_list_chart td.connect_on{background-color:#7777ff; color:#fff; border:1px solid #fff;}
.table_list_chart td.connect_fail{background-color:yellow;}
.table_list_chart td.connect_re{background-color:#ff0000; color:#fff;border:1px solid #fff;}
.table_list_chart tbody tr{border-bottom:1px solid #f1f1f1;}
.table_list_chart tbody tr:last-child{border-bottom:0}
/* .table_list_chart tbody tr td:last-child{border-right:0} */
.table_list_chart tbody tr td:first-child{border-left:0; font-weight: bold; text-align: left;}



.table_contbox_btngrp .table_list_td{padding:10px 14px;}
.table_contbox_btngrp td{padding:10px 14px;}
.table_contbox_btngrp td .icon_btn_txt_left_medium{width:100%;}


.table_body tr{border-bottom:1px solid #eee;}
/* .table_body tr:nth-child(2n){background-color:#fbfbfb;} */
.table_body tr:last-child{border-bottom: 0;}

.table_body tr{transition: 0.3s;}
.table_body_hover tr{cursor: pointer;}
.table_body_hover tr:hover{background-color:#f3f5f6;}

.data_search_grp{margin-right: 12px; width:100%;}
.data_search_grp:last-child{margin-right: 0px;}


.inp_moving_widthbox .inp_moving_width{margin-right: 8px; }
.inp_moving_widthbox .inp_moving_width:last-child{margin-right: 0;}

.inp_moving_widthbox06 .inp_moving_width02{min-width: 60px;}


.view_grp{width:100%; display: flex; flex-direction: column;}


.view_grp_listbox{ display: flex; flex-direction: row; column-gap: 12px; row-gap: 12px; flex-wrap: wrap;}
.view_grp_list{ width:calc(20% - 10px); height: 100%; box-sizing: border-box; background-color:#fff; border-radius: 10px; border:1px solid #e2e8f0; box-shadow: none; 
                margin-top: 0; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; position: relative; min-width:200px; overflow:hidden;}
.view_grp_list.js .view_tbox01{background-color: #fff;}
.view_grp_list.gs .view_tbox01{background-color: #fff;}
.view_grp_list.cl .view_tbox01{background-color: #fff;}
.view_grp_list.dt .view_tbox01{background-color: #fff;}
.view_grp_list.not .view_tbox01{background-color: #fff;}
.view_grp_list.off .view_tbox01{background-color: #fff;}

.view_grp_list:hover{border-color:#cbd5e1; box-shadow: 0 2px 8px rgba(0,0,0,0.06);}
.view_tit_grp{width: 100%; display:flex; flex-direction: column; justify-content: space-between;}


/* .view_tit_box{width:100%; } */
.view_tit_box{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.view_tit_box02{margin-top: 8px;}
/* 전원 연결 확인 버튼 */
.connect_box{
    display: flex;
    display: row;
}
.connect{
    width: 26px;
    height: 26px;
    z-index: 1;
    opacity: 0.6;
}
.connect.on{opacity: 1;}
.connect_box .connect{
    background: url(/static/img/web/connect01.png) no-repeat;
    background-size: 100%;
    border-radius: 50%;
    transition: 1s;
}

.connect_box .battery{
    margin-left: 8px;
    background-size: 16px;
    border-radius: 50px;
    transition: 1s;
    
    background-position: center;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
}

.connect_box .battery80{background-image: url(/static/img/web/w_battery_80.png);background-color:#007afe;}
.connect_box .battery40{background-image: url(/static/img/web/b_battery_40.png);background-color:#f9e000;}
.connect_box .battery20{background-image: url(/static/img/web/w_battery_20.png);background-color:#ff0000;}

.connect_box .connect.on{
    background: url(/static/img/web/connect01_active.png) no-repeat;
    background-size: 100%;}

.connect_box .connect.door{display:none;}
.view_tbox.view_tbox01{width: 100%; padding:18px 20px 14px; box-sizing: border-box; border-radius: 0; position: relative; border-bottom:1px solid #f1f5f9;}

.view_tit{color: #0f172a;}

.view_tit01{font-size: 30px; font-weight: 800; letter-spacing: -0.02em;}
.view_tit02{font-size: 16px; font-weight:500; color:#64748b;}
.view_tit_js{background:#F4B200;}
.view_tit_gs{background:#46589A;}
/* .view_tbox{width:100%;} */
.view_tbox02{display: flex; flex-direction: row;justify-content: space-between; padding: 0 20px; box-sizing: border-box; position: absolute;left: 0; bottom: 6px;width:100%;}
.view_tbox02 .view_tit{color:#334155; font-weight:600; font-size: 13px;}
.view_tbox02 .view_txt{color:#64748b;font-size: 13px;}
.view_txt02{color:#94a3b8; font-weight: 500; font-size:12px;}




.view_tbox .key_tbox_bundle{  display:flex; flex-direction:row; width:100%; background-color: #f8fafc; border:1px solid #edf1f6; border-radius: 8px;
       box-shadow: none;padding: 6px; column-gap: 6px; box-sizing: border-box;justify-content: space-between;}
.key_tbox.on{background-color: #fff;box-shadow: 0 1px 3px rgba(0,0,0,0.06);}


.view_tbox03{background-color: #fff;border-radius:0; display: flex;padding:14px 18px 16px; flex-direction: column;box-sizing:border-box;position: relative;}
.key_tbox{width: 100%; display: flex; flex-direction: column; padding: 6px 0; background-color:transparent; border-radius: 6px;}
/* 
.view_tbox .key_tbox_bundle .key_tbox:first-child{border-radius: 8px 0 0 8px;}
.view_tbox .key_tbox_bundle .key_tbox:last-child{border-radius: 0 8px 8px 0;} */

.re_flex{
    display: flex;
    flex-direction: row;

}


/* 배터리 상태 */
.battery_grp{width:100%; box-sizing: border-box;display: flex; flex-direction: row; align-items: center; justify-content: flex-start; position: static; margin-bottom:10px; gap:12px;}
.battery_box{padding:0; box-sizing: border-box;border-radius:0;display: flex; flex-direction: row; align-items: center;box-shadow: none; max-width:none; background:none; gap:8px;}
.battery_box_80{background:none;}
.battery_box_40{background:none;}
.battery_box_40 > p{color:#f59e0b;}
.battery_box_20{background:none;}
.battery_box_none{background:none;}
.battery_box_none > p{color: #94a3b8;}
.battery_txt{color:#64748b; font-size: 16px; font-weight:600;margin-right:0; line-height: normal;}
.battery_box_80 .battery_txt{color:#3b82f6;}
.battery_box_20 .battery_txt{color:#ef4444;}
.battery_tbox{width:36px; height:16px; border:2px solid #94a3b8; border-radius:3px; position:relative; display:flex; align-items:center; padding:2px;}
.battery_tbox::after{content:''; position:absolute; right:-6px; top:50%; transform:translateY(-50%); width:4px; height:8px; background:#94a3b8; border-radius:0 2px 2px 0;}
.battery_tbox img{display:none;}
.battery_tbox::before{content:''; height:100%; border-radius:1px; display:block;}
.battery_box_80 .battery_tbox{border-color:#3b82f6;} .battery_box_80 .battery_tbox::after{background:#3b82f6;} .battery_box_80 .battery_tbox::before{width:80%; background:#3b82f6;}
.battery_box_40 .battery_tbox{border-color:#f59e0b;} .battery_box_40 .battery_tbox::after{background:#f59e0b;} .battery_box_40 .battery_tbox::before{width:40%; background:#f59e0b;}
.battery_box_20 .battery_tbox{border-color:#ef4444;} .battery_box_20 .battery_tbox::after{background:#ef4444;} .battery_box_20 .battery_tbox::before{width:20%; background:#ef4444;}
.battery_box_none .battery_tbox{border-color:#cbd5e1;} .battery_box_none .battery_tbox::after{background:#cbd5e1;} .battery_box_none .battery_tbox::before{width:0; background:transparent;}
/* 파워 버튼 (전원버튼) - 202211 추가*/
.power_button{
    width: 100%;
    margin: 15px auto;
    display: flex; 
    justify-content: space-between;
    flex-direction: row;
    margin-bottom:0;
    column-gap: 15px;
}
.power_button img{width: 40px;box-shadow: 2px 4px 8px 0px #29343912}

/* 버튼 한개일때 정렬 */
.one_btn_center{ justify-content: center; }

/* 팝업 릴레이 버튼 한개 일 때 정렬과 토글버튼 */
/* .toggle.on{
    width: 80px;
    height: 40px;
    border: 3px solid #3b82f6;
    border-radius: 500px;
    background-color: #fff;
    position: relative;
    transition: 1s;
}
.toggle.on p{
    width: 40px;
    height: 40px;
    background-color: #3b82f6;
    border-radius: 500px;
    box-sizing: border-box;
    position: absolute;
    top: 0; left: 0;
    transition: 1s;
}
.toggle.on p::after{
    content: 'on';
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    transition: 1s;
}
.toggle.off{
    width: 80px;
    height: 40px;
    border: 3px solid #ccc;
    border-radius: 500px;
    background-color: #fff;
    position: relative;
    transition: 1s;
}
.toggle.off p{
    width: 40px;
    height: 40px;
    background-color: #ccc;
    border-radius: 500px;
    box-sizing: border-box;
    position: absolute;
    top: 0; right: 0;
    transition: 1s;
}
.toggle.off p::after{
    content: 'off';
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    transition: 1s;
} */

/* 엑티브 버전 */
.toggle{
    width: 80px;
    height: 40px;
    border: 3px solid #ccc;
    border-radius: 500px;
    background-color: #fff;
    position: relative;
    transition: .5s; 
}
.toggle p{
    width: 40px;
    height: 40px;
    background-color: #ccc;
    border-radius: 500px;
    box-sizing: border-box;
    position: absolute;
    top: 0; right: 0;
    transition: .3s;
}
.toggle p::after{
    content: 'off';
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    transition: .5s;
}

.toggle.active{
    width: 80px;
    height: 40px;
    border: 3px solid #3b82f6;
    border-radius: 500px;
    background-color: #fff;
    position: relative;
}
.toggle.active p{
    width: 40px;
    height: 40px;
    background-color: #3b82f6;
    border-radius: 500px;
    box-sizing: border-box;
    position: absolute;
    top: 0; right: 40px; /*이거덕에 움직일수 있어*/
}
.toggle.active p::after{
    content: 'on';
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}

    .wrapper_main_ck_txt{
        font-size: 14px;font-weight: 600;color: #9ca2a9;vertical-align: middle;    width: 100%;
        text-align: center;
        padding: 14px;
        box-sizing: border-box;
        box-shadow: 0px 3px 2px 0px #2934390a;}

  .switch_label {
    display: block;
    position: relative;
    width: 60px;
    height: 25px;
    background: #d3d3d3;
    border-radius: 60px;
    transition: background 0.4s;
    cursor: pointer;
    margin:0 auto;
  }

  .switch_label::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 50%;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #fff;
    transform: translateY(-50%);
    box-shadow: 1px 3px 4px rgba(0,0,0,0.1);
    transition: all 0.4s;
  }

  .switch_label::before {
    content: "OFF";
    font-size: 13px;
    font-weight: bold;;
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
    color:#999;
    transition: all 0.4s;
  }
  .list_ck:checked + .switch_label {
    background:#3b82f6
  }

  .list_ck:checked + .switch_label::after {
    left: calc(100% - 23.5px);
   }

   .list_ck:checked + .switch_label::before {
    content: "ON";
    color: #fff;
    left: 8px;
  }
  /* #chk1:checked + .switch_label {
    background:#3b82f6
  }

  #chk1:checked + .switch_label::after {
    left: calc(100% - 23.5px);
   }

   #chk1:checked + .switch_label::before {
    content: "ON";
    color: #fff;
    left: 8px;
  } */

  /* 리스트뷰 */
.view_list_tb_box{width: 100%; background-color:#fff;border-radius: 12px;}
.view_list_tb_box .table_over_stylebox{overflow: unset;}
  .view_list_tb_box .table_header{position: sticky; top: 0; background-color: #fff; border-radius: 12px 12px 0 0;}
  .view_table_state{display: inline-block; padding:4px 6px; box-sizing: border-box;color:#fff;border-radius: 50px;min-width: 60px;text-align: center; font-weight:500;}
  .view_table_state.js{background-color:#f5a623;}
  .view_table_state.gs{background-color:#46589A;}
  .view_table_state.dt{background-color:#10b120;}
  .view_table_state.cl{background-color:#0cd5dc;}
.relay_on::after{
    content: "ON";
    background-color:#3b82f6;
    color:#fff;
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    width:28px; height:28px;border-radius: 50%;
    font-size:10px; 
    margin:0 auto;
    font-weight: bold;; 
}
.relay_off::after{
    content: "OFF";
    background-color:#ccc;
    color:#999;
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    width:28px; height:28px;border-radius: 50%;
    font-size:10px; 
    margin:0 auto;
    font-weight: bold;; 
}
.main_cont_btn_tab_ul{background-color:#f1f5f9; border:none; border-radius: 8px; padding:3px; box-sizing: border-box; display: flex; flex-direction: row;box-shadow: none;
margin-left:10px;}
.main_cont_btn_tab_li{min-width: 72px;margin-right: 0;}
.main_cont_btn_tab_li:last-child{margin-right: 0;}

.main_cont_btn_tab_btn{font-size: 13px; font-weight:500; display: flex; flex-direction: row; align-items: center; justify-content: center; height:30px;border-radius: 6px;
    color:#64748b; transition: 0.15s; padding:0 14px;}
.main_cont_btn_tab_btn:hover{color:#334155;}    
.main_cont_btn_tab_btn.active{ background-color:#fff;box-shadow: 0 1px 2px rgba(0,0,0,0.06);color:#0f172a; font-weight:600; }




.key_icon{display: block; width:26px; height:26px;  background-repeat: no-repeat; background-position: center;
background-size:24px; margin: 0 auto; margin-bottom:4px;}
.key_tbox.on .key_icon01{background-image: url('/static/img/opener/phonekey_icon_on02.png');}
.key_tbox.off .key_icon01{background-image: url('/static/img/opener/phonekey_icon_off02.png');}
.key_tbox.on .view_txt01{color:#2563eb;}
.view_grp_list.off .key_icon01{background-image: url('/static/img/opener/key_icon_off.png');}
.key_tbox.off .view_txt01{color:#94a3b8;}
.view_grp_list.off .view_txt01{color:#999;}
.view_txt01{width:100%; text-align: center; font-weight:600; font-size:14px; }

.key_tbox.on .key_icon02{background-image: url('/static/img/opener/lock_icon_on02.png'); }
.key_tbox.off .key_icon02{background-image: url('/static/img/opener/lock_icon_off02.png');}
.view_grp_list.off .key_icon02{background-image: url('/static/img/opener/lock_icon_off02.png'); }

.key_tbox.on .key_icon03{background-image: url('/static/img/opener/lock_icon_on02.png');  }
.key_tbox.off .key_icon03{background-image: url('/static/img/opener/lock_icon_off02.png');}
.view_grp_list.off .key_icon03{background-image: url('/static/img/opener/lock_icon_off02.png');  }


.key_issue_dategrp{width:100%; display: flex; flex-direction: row; align-items: center;}
.key_issue_datebox{width:100%; display: flex; flex-direction: row; align-items: center;}
.key_issue_dategrp .date_inp{margin-right:8px;}
.key_issue_datebox02{ margin-right: 8px;}
.key_issue_datebox:last-child{margin-right: 0;}
.key_issue_dategrp .inp_time_style{min-width: 60px; width:60px;}
/* .key_issue_dategrp .inp_time_style_left{margin-left: 8px;} */
.key_issue_dategrp .time_center{margin:0 8px;}

.main_cont_btn_grp .main_cont_width{margin-right:8px;}
.main_cont_btn_grp .main_cont_width:last-child{margin-right:0px;}


.tab_list_box{width:100%; padding:4px; border-radius: 8px; background-color:#f3f5f6;box-sizing:border-box;}
.tab_list{width:100%; margin-right: 8px;;}
.tab_list:last-child{margin-right: 0;}
.tab_list.active{background-color:#fff; border-radius: 8px;box-shadow: 2px 4px 8px 0px #29343917;}
.tab_list .tab_list_btn{    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center ; padding:0 8px;  height:32px; color:#afb3b5;
font-weight:600;}
.tab_list.active .tab_list_btn{color:#3b82f6; }
.pagebtn_grp_box{width:100%; display: flex; flex-direction: column;justify-content: center;align-items: center; margin-top:20px;}

.pagebtn{display: flex;    flex-direction: column;justify-content: center;align-items: center; box-sizing:border-box; margin-right:4px; transition: 0.3s;
    border-radius: 8px; height:31px; width: 31px;text-align: center;}
.pagebtn:hover{background-color:#eee;;}
.pagebtn.active{background-color:#3b82f6; color:#fff;}

.pagebtn.prev{background-image: url(/static/img/opener/prev_icon.png); background-repeat: no-repeat; background-position: center; background-size: 12px;}
.pagebtn.next{background-image: url(/static/img/opener/next_icon.png); background-repeat: no-repeat; background-position: center; background-size: 12px;}
.pagebtn:last-child{margin-right:0}


.popup_wrap{width:100%; height:100%; position:fixed; top:0; left:0; background-color:rgba(0,0,0,0.5); display: flex; flex-direction: column; align-items: center;
    justify-content: center; z-index: 100; padding:30px; box-sizing: border-box;}
.popup_contbox{width: 960px; border-radius: 12px; background-color:#fff;box-shadow: 2px 4px 8px 0px #29343926; margin:0 auto; display:flex; flex-direction:column;}
.popup_header_grp{border-bottom: 1px solid #eee;;}
.popup_header{padding:20px 30px; box-sizing: border-box; }
.popup_header_tabgrp{width:100%;}

.popup_header_li{transition: 0.3s;}
.popup_header_li.active{border-bottom: 4px solid #111;box-sizing: border-box; }
.popup_header_li:hover{background-color:#eee;}
.popup_header_li_btn{padding:20px 15px; box-sizing: border-box ; font-size: 18px;font-weight: 600; display: block; color:#afb3b5; transition: 0.3s;}
.popup_header_li.active .popup_header_li_btn{color:#111; }



.popup_header .view_tbox03{margin:0; column-gap: 0%; padding-top:20px;}
.popup_header .view_tbox03 .key_tbox{display: flex; flex-direction: row; align-items: center;  width:auto; padding: 8px 10px; margin-right: 8px;}
.popup_header .view_tbox03 .key_tbox:last-child{margin-right: 0;}
.popup_header .view_tbox03 .key_icon{width:16px; height:16px; margin-right:8px; margin-bottom: 0;}
.popup_header .view_tbox03 .key_tbox.on{background-color:#3b82f6;}
.popup_header .view_tbox03 .key_tbox.off{background-color:#d9d9d9;}
.popup_header .view_tbox03 .key_tbox.on .key_icon{background-image: url('/static/img/opener/w_key_icon_on.png');background-size: 100%;}
.popup_header .view_tbox03 .key_tbox.on .view_txt01{color:#fff;}
.popup_header .view_tbox03 .key_tbox.off .key_icon{background-image: url('/static/img/opener/g_key_icon_off.png');background-size: 100%;}

.popup_header .view_tbox03 .key_tbox.on .key_icon02{background-image: url('/static/img/opener/w_password_icon_on.png');background-size: 100%;}
.popup_header .view_tbox03 .key_tbox.off .key_icon02{background-image: url('/static/img/opener/g_password_icon_off.png'); background-size: 100%;}
.popup_header .view_tbox03 .key_tbox.on .key_icon03{background-image: url('/static/img/opener/w_password_icon_on.png');background-size: 100%;}
.popup_header .view_tbox03 .key_tbox.off .key_icon03{background-image: url('/static/img/opener/g_password_icon_off.png');background-size: 100%;}
.popup_header .view_tbox03 .view_txt01{width:auto;}

.popup_title{margin-right:12px;}
.popup_title01{font-size:28px;}
.popup_title02{font-size:24px; font-weight: 400; color:#9ca2a9;}
.popup_title03{font-size:18px; font-weight:700; margin-left:12px; padding:0; border-radius:0; cursor:default; transition:0.3s; background:none;
    display:inline-flex; align-items:center; gap:6px;}
.popup_title03::before{content:''; width:10px; height:10px; border-radius:50%; display:block; flex-shrink:0;}
.popup_title03.js{color:#3b82f6;} .popup_title03.js::before{background-color:#3b82f6;}
.popup_title03.gs{color:#94a3b8;} .popup_title03.gs::before{background-color:#94a3b8;}
.popup_title03.cl{color:#06b6d4;} .popup_title03.cl::before{background-color:#06b6d4;}
.popup_title03.dt{color:#f59e0b;} .popup_title03.dt::before{background-color:#f59e0b;}



/* 22.11.14_jungin_ver */
.cont_box_grp04{
    height: auto;
    border-radius: 12px;      
    background-color: #fff;
    margin-top: 20px;
    box-shadow: none; border:1px solid #e2e8f0;
    display: flex;
    justify-content: center; 
    align-items: center;
}
 .checkbox_all{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.checkbox_all li{
    width: 120px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    margin: 0 auto;
    justify-content: center;
    box-sizing: border-box;
}
.checkbox_all li .wrapper{margin: 14px 0;}
/* invalid legacy selector removed */
/*
.checkbox_all li p{
    padding-left: 12px;
    font-size:15px;
    color:#333;
    font-weight: 500;
}
.checkbox_all li:nth-child(2){
    width: 200px;
}
.checkbox_all li input{
    width: 20px;
    height: 20px;
    margin-top: 3px;
    position: relative;

}

.checkbox_all li input + label {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid #3b82f6;
    border-radius: 3px;
    line-height: 20px;
    cursor: pointer;
}
.checkbox_all li input:checked + label::after {
    content:'✔';
    display: inline-block;
    font-size: 13px;
	width: 20px;
	height: 20px;
    color: #fff;
    text-align: center;
    border: 2px solid #3b82f6;
    background-color: #3b82f6;
    border-radius: 3px;
    position: absolute;
    left: 63px;
    top: 50%;
    transform: translateY(-50%);
}



.checkbox_all .all_power_list input:checked + label::after{left:26px;}
.checkbox_all li input {
	display: none;
}
.checkbox_all li a button{
display: block;
border-radius: 8px;
border: 0;
height: 40px;
text-align: center;
background-color: #3b82f6;
color: #fff;
font-weight: 600;
width: 60px;
padding: 0 8px;
box-sizing: border-box;
transition: 0.3s;
}
.checkbox_all li a button:hover{
    background-color: #e23d42;
} */




.popup_close{width: 40px; height:40px; display:block; background-image: url('/static/img/opener/cancel_icon.png'); background-repeat: no-repeat ; background-position: center;
    background-size: 10px; background-color:#f3f5f6; border-radius: 8px; transition: 0.3s;}
.popup_close:hover{background-color:#e3e3e3;}


.popup_body{padding:20px; box-sizing: border-box; display: flex; flex-direction: column; background-color:#f3f5f6; height:65vh; overflow-y:auto;}
.popup_body .table_over_stylebox{background-color:#fff;}

.pop_cont_tbox{margin-bottom: 20px;}
.pop_cont_tit{font-size:22px;}
.pop_cont_box{width:100%; padding:20px; box-sizing: border-box; border-radius: 12px; background-color:#fff;box-shadow: 2px 4px 8px 0px #2934390a;}
.pop_cont_sub_tbox{width:100%; padding-bottom: 12px; border-bottom: 1px solid #eee;}
.pop_cont_sub_tit{font-size:16px;}

.pop_cont_input_grp{margin-top:8px;}
.pop_cont_input_box{margin-right:8px; width:100%;}
.pop_cont_input_box:last-child{margin-right:0;}
.pop_cont_box01{margin-bottom: 20px;;}
.pop_cont_sub_box .pop_cont_box{ margin-bottom: 0; margin-right: 20px;}
.pop_cont_sub_box .pop_cont_box:last-child{margin-right: 0;}

.pop_cont_input_grp_keygrp:first-child{margin-top:12px;}

.pop_cont_input_grp_tbox .setup_title{margin-bottom: 0;}

.pop_cont_input_grp_tbox{margin-top:12px; box-sizing: border-box;}
.pop_cont_input_grp_tbox .pop_cont_input_grp_twidth{margin-right: 8px; width: 100%;}
.pop_cont_input_grp_tbox .pop_cont_input_grp_twidth:last-child{margin-right: 0;}
.pop_cont_input_grp_tbox .pop_cont_input_grp_twidth01{max-width:170px;}
.pop_cont_input_grp_tbox .pop_cont_input_grp_twidth02{max-width:170px;}
.pop_cont_input_grp_tbox .pop_cont_input_grp_twidth03{max-width:100%;}
.pop_cont_input_grp_tbox .pop_cont_input_grp_twidth04{max-width:150px;}

.pop_cont_input_grp01 .pop_cont_input_box01{max-width:170px;}
.pop_cont_input_grp01 .pop_cont_input_box02{max-width:170px;}
.pop_cont_input_grp01 .pop_cont_input_box03{max-width:100%;}
.pop_cont_input_grp01 .pop_cont_input_box04{max-width:150px;}


.pop_cont_input_grp_key .pop_cont_input_box02{max-width: 150px;}
.pop_cont_input_grp_key .pop_cont_input_widthbox{width:100%;}
.pop_cont_input_grp_key .pop_cont_input_width{width: 100%; margin-right:8px;}
.pop_cont_input_grp_key .pop_cont_input_width02{max-width: 60px;}
.pop_cont_input_grp_key .pop_cont_input_width:last-child{margin-right: 0;}

.pkey_btn_list_box{width:100%;}
.pkey_list{width:100%; margin-right:8px;}
.pkey_list:last-child{margin-right: 0;}




.popup_footer{width: 100%; padding:20px 30px; box-sizing: border-box;}

.popup_btn_width{margin-right: 8px; min-width: 60px;}
.popup_btn_width:last-child{margin-right: 0;}

.pop-btn-clean-req{display:block; border:0; border-radius:8px; height:44px; padding:0 24px; font-size:15px; font-weight:700;
    background-color:#06b6d4; color:#fff; cursor:pointer; transition:0.2s; width:100%; box-sizing:border-box;}
.pop-btn-clean-req:hover{background-color:#0891b2;}

.pop-btn-clean-done{display:block; border:0; border-radius:8px; height:44px; padding:0 24px; font-size:15px; font-weight:700;
    background-color:#1e293b; color:#fff; cursor:pointer; transition:0.2s; width:100%; box-sizing:border-box;}
.pop-btn-clean-done:hover{background-color:#334155;}

.pop_total_numbox{margin-bottom: 20px;;}
.pop_cont_tit_right{margin-right: 12px;;}

.pop_table_over_stylebox .table_body_scroll{max-height: 40vh; overflow-y: auto;}

.empty_txt_box{width:100%; padding:50px 0;}
.empty_txt_box .table_list_none{text-align: center; font-size:14px; color:#9ca2a9;}


.pop_table_widthbox{width:100%;}
.pop_table_width{width:50%; margin-right: 20px;}
.pop_table_width:last-child{margin-right: 0;;}

.memo_tr_tbox td{background-color:#dadde1;}
.memo_tr_tbox td p{font-size: 14px;font-weight: 500; color:#666;word-wrap:break-word;}

.pop_table_contbox{padding:16px; width:100%; box-sizing: border-box; border-radius: 12px;box-shadow: 2px 4px 8px 0px #2934390a; background-color:#fff;}
.pop_table_cont_tbox{padding:12px; border:1px solid #dbdbdb;border-radius: 8px; min-height: 180px;max-height: 180px; overflow-y: auto; box-sizing: border-box;}
.pop_table_cont_tbox .pop_table_cont_txt{font-size: 14px;font-weight: 500; color:#ff0000;word-wrap:break-word;}

.pop_cont_inp_grp_width .pop_cont_inp_box{width:100%;}
.pop_cont_inp_grp_width .pop_cont_inp_box{margin-right: 8px;;}
.pop_cont_inp_grp_width .pop_cont_inp_box:last-child{margin-right: 0;}

.pw_btn_widthbox{width:100%;}
.pw_btn_width {margin-right: 8px; width:100%;}
.pw_btn_width:last-child{margin-right: 0;}
.pw_btn_width02{max-width: 110px;;}


.max_height_180{height:180px;}
.max_height_80{height:80px;}
.max_height_263{height:263.5px;}





.main_cont_width_inpgrp {margin-right:20px;}
.main_cont_width_inpgrp:last-child{margin-right: 0;}

.main_cont_width_inptit{font-weight: 700; font-size: 14px;}

.main_cont_width_inp{margin-right: 8px;}
.main_cont_width_inp:last-child{margin-right: 0;}

.main_cont_width_inp03 {width: 60px;}
.main_cont_width_inp03 button{width: 100%;;}

.max_width_65{max-width: 65px;}

.max_width_296{max-width: 296px;}

.max_width_200{max-width: 200px;}
.max_width_296{max-width: 296px;}

.min_width_200{min-width: 200px;}
.min_width_296{min-width: 296px;}

.connect_txt{font-size: 18px; margin-right: 12px;font-weight:600;}
.connect_txt:last-child{margin-right:0;}
.connect_txt02{color:#ff0000;}


/* 재희 추가*/
/* 테이블 자료없을때 */
.empty_td{text-align: center; background:#fff !important}
.empty_td:hover{background:#fff !important}
.empty_td:active{background:#fff !important}
.empty_td_txt{text-align: center; padding:130px 0; color:#d0d0d0;}

/*채팅 리스트*/

.cont_li01{width:500px; margin-right:20px}
.cont_tit{font-size: 22px; margin-bottom:16px}
.cont_list_tbox{border-bottom:1px solid #eee; box-sizing:border-box; padding:10px 20px; }

.cont_li02{width:calc(100% - 520px); }
.cont_li02 .cont_shadow_box{overflow: hidden}


.list_ulbox{max-height:  400px; overflow-y: auto;}
.list_li{transition: 0.3s; cursor: pointer; padding:15px 20px; box-sizing: border-box; border-bottom: 1px solid #eee;}
.list_li:last-child{border-bottom: 0;}
.list_li:hover{background:#f6f6f6;}
.list_li:active{background:#e4e4e4;}
.list_li.active{background:#f6f6f6;}
.datarow.active{background:#faebd7;}
/* 재희추가 */
.list_li.selectLi{background-color: #eee;}
/* 재희추가 */
.user_contbox01{width:60px; margin-right:16px;align-items: center;display: flex;flex-direction: row;}
.profile_img{width:60px; height: 60px; border-radius: 50%; background-color: #ddd; display: block;    background-image: url(/static/img/web/def_user_icon.png);
    background-color: #DDD;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;}
.user_contbox02{width:calc(100% - 184px); margin-right:8px;}
.user_contbox_tit{font-size:18px; padding-bottom: 2px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.user_contbox_txt{font-size:14px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#666; font-weight: 400;}

.user_contbox03{text-align: right; width:93px; margin-left:8px;padding:0px 0; box-sizing: border-box;}

.info_p{display:flex; flex-direction: row; color:#666;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.info_p em{margin-right: 8px; font-weight: 500;}
.info_p em:last-child{margin-right:0;}
.user_contbox_time{font-size:13px; font-weight: 500; color:#aaa;}
.user_contbox_talk{font-size:14px; font-weight: bold; background:#ff0000; color:#fff;width: 25px; height: 25px; display: block; text-align: center;
line-height: 25px;border-radius: 50%; float: right; margin-top:4px }

.wait_list_ulbox{width:100%;display: flex; justify-content: center;align-items: center;flex-direction: column; height:535px;}
.none_chatting_icon{width: 80px; height: 80px; margin-bottom: 20px;}
.none_chatting_icon img{width: 100%;}
.wait_list_txt{display: flex; justify-content: center;align-items: center; color: #c7c5c5; font-weight: 500; font-size: 16px;}
.none_chat_cont_box{width:100%;display: flex !important; justify-content: center;align-items: center; flex-direction: column;}
.none_chat_icon{width: 80px; height: 80px; margin-bottom: 20px;}
.none_chat_icon img{width: 100%;}
.none_chat_txt{font-size: 22px; font-weight: 500; color: #c7c5c5; }


/* 진행상황 */
.progress_grp_tit{font-size:18px;width:120px;}
.progress_grp_bar{width:calc(100% - 120px); height:23px; border-radius: 50px; background:#e6e6e6; margin-top:3px; position: relative;
overflow: hidden;}
.progress_grp_gage{position: absolute; top:0; left: 0; border-radius: 50px; height: 100%; transition:0.3s; }

.progress_color01{color:#ed1e79; font-weight: bold; display: inline-block;}
.progress_color02{color:#ff1515; font-weight: bold; display: inline-block;}
.progress_color03{color:#8482ff; font-weight: bold; display: inline-block;}
.progress_color04{color:#0071bc; font-weight: bold; display: inline-block;}

.progress_grp_gage01{background:linear-gradient(45deg, #ed1e79, #eb86b2); }
.progress_grp_gage02{ background:linear-gradient(45deg, #ff1515, #ff9fa3);}
.progress_grp_gage03{background:linear-gradient(45deg, #8482ff, #cfceff); }
.progress_grp_gage04{ background:linear-gradient(45deg, #0071bc, #73bbeb);}

.progress_bar{width:0%;}
.percent_txt{color:#fff; font-weight:bold; padding-left: 12px; box-sizing: border-box; line-height: 23px;}


.cont_shadow_box_850px{height: 850px;}
.cont_shadow_box_924px{height: 924px;}
.cont_shadow_box_915px{height: 915px;}



/* AS 채팅 내역*/

.chat_cont_top_tbox{padding:20px; box-sizing: border-box; border-bottom: 1px solid #eee; position: relative; display: flex; flex-direction: row; align-items: center; 
    justify-content: space-between;}
/* .profile_text_right{margin-left: 12px} */
.cont_right_tit{font-size: 22px;}

.list_li_div{justify-content: space-between;}


.chat_cont_box{padding:20px;width:100%; box-sizing:border-box; display:table; position:relative;padding-bottom:56px;}
.chat_body_box{padding:30px 20px; box-sizing: border-box; height: 100%; padding-bottom: 29px; max-height: 756px; overflow-y: auto;} 
.cont_shadow_box_510px{height: 510px;}
.top_notice_txtbox{position: relative;}
.progress_all_num{position: absolute; right: 0; top:50%;  transform: translateY(-50%); color:#666; font-size:14px}


.chat_send_box{display:flex; flex-direction: row;max-width:40%;clear:both; position:relative; margin-bottom:20px;}
 .chat_send_box:last-child{margin-bottom:0;}



 .chat_send_left{float:left;}
 .chat_send_left .chat_send_cont{float:left;}
 .chat_send_left .chat_send_profile{width:45px; height:45px; margin-right:8px; display:inline-block; background-image:url('/static/img/web/def_user_icon.png');background-color:#DDD;
 background-repeat:no-repeat; background-position:center; background-size:cover;border-radius:50%;}
 .chat_send_left .chat_send_text{width:calc(100% - 53px);}
 .chat_send_left .chat_send_div{border-radius:0 12px 12px 12px; margin-top:4px; background:#f3f5f6;}
 .chat_send_left .chat_send_time{right:-40px;}
 
 
 .chat_send_listbox{width:100%; margin-top:16px;}
 .chat_send_list{width:100%; height:40px; margin-bottom:8px; line-height:40px; text-align:center; border-radius:8px; font-weight:bold; background:#fff; color:#2e3192; cursor: pointer;}
 .chat_send_list:last-child{margin-bottom:0;}
 
 .chat_send_right{float:right;}
 .chat_send_right .chat_send_text{width:100%;}
 .chat_send_right .chat_send_div{border-radius:12px 0px 12px 12px; margin-top:0px;background:#3b82f6;}
 .chat_send_right .chat_send_txt{color:#fff;}
 .chat_send_right .chat_send_time{left:-40px;}
 
 
 .name_txt{font-weight:bold;}
 .chat_send_txt{font-size:14px;}
 .chat_send_div{background:#fff;padding:8px 14px; }
 .chat_send_time{position:absolute; bottom:0; font-size:12px;color:#aaa;}
 .chat_send_time > p{font-size: 12px;}
 
 .chat_send_imgbox{max-width:250px;position:relative;}
 .chat_send_imgbox:after{ content: ""; display: block; padding-bottom: 100%; box-sizing:border-box;overflow:hidden; width:180px;}
.chat_send_img{position: absolute; width: 100%; height: 100%;box-sizing:border-box;
background-image:url('/static/img/web/door/test_img.png'); background-repeat:no-repeat; background-position:center; background-size:100%;}

.bottom_pic_cont{width:48px;}
.bottom_pic_li{width:40px; height: 40px; margin-right: 8px;}
.bottom_pic_btn{display: block;width: 40px; height: 40px; border-radius: 8px;background-color:#f4f4f4;  color:#3a5d5d; transition: 0.3s;
background-repeat: no-repeat; background-position: center; background-size: 30px; transition: 0.3s;}
.bottom_pic_btn:hover{background-color: #e6e6e6;}
.bottom_image{background-image: url(/static/img/web/image_icon.png);}
.bottom_pic{background-image: url(/static/img/web/camera_icon.png);}

.bottom_btn_icon{background-repeat: no-repeat; background-position: center; background-size: 18px; width:22px; height: 22px;transition: 0.3s;}

.bottom_btn_icon01{background-image: url(/static/img/web/btn_check.png)}
.bottom_btn_icon02{background-image: url(/static/img/web/btn_error.png)}

/* .bottom_btn_icon01:hover{background-image: url(/static/img/web/hv_check.png)}
.bottom_btn_icon02:hover{background-image: url(/static/img/web/hv_error.png)} */


.bottom_textgrp{width:100%;}
.bottom_textbox{width:100%; position:absolute; bottom:0; left:0; z-index:1; background:#fff;padding:16px; box-sizing:border-box;  box-shadow: 0px -2px 4px 0px #29343914;}
.bottom_textbox .bottom_text_cont{float:left;}
.bottom_textbox .bottom_text_inpbox{width:100%; height:40px; border-radius:8px; }
.bottom_textbox .bottom_text_btn{width:60px; height:40px; margin-left:8px; border-radius:8px; background:#3b82f6; color:#fff;text-align:center;line-height:40px; cursor: pointer;
font-weight:bold;transition:0.3s;}
.bottom_textbox .bottom_text_inp{width:100%; box-sizing:border-box;border-radius:8px; border:1px solid #D0D6D9;height:40px;padding:0 8px;outline:none;}
/* .bottom_btn_listbox{position: absolute; top:50%; transform: translateY(-50%); right: 40px} */
.bottom_btn_ul{width:100%; }
.bottom_btn_li{height:40px; margin-right: 8px;}
.bottom_btn_li:last-child{margin-right: 0px;}
.bottom_btn{    padding: 8px 14px;
    display: block;
    border-radius: 8px;
    border: 1px solid #e3e3e3;
    background: #fff;
    color: #8e9295;
    transition: 0.3s;}
.bottom_btn img{width: 22px;display: block; margin: 0 auto;}







.chat_pop_wrap{width:100%; height:100%; position:fixed; top:0; left:0; background-color:rgba(0,0,0,0.45); z-index:9;}

.chat_pop_ul{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:#fff; border-radius:12px;box-shadow: 0px 2px 4px 0px #29343914;
display: flex; flex-direction: row; padding:30px 0px; min-width:230px;}
.chat_pop_list{padding:0 25px; box-sizing:border-box; border-right:1px solid #eee;width:50%;}
.chat_pop_list:last-child{border-right:0;}
.chat_pop_icon{width:40px; height:40px;  display:block;  margin:0 auto;}
.chat_pop_icon img{width:100%;}
.chat_pop_tit{text-align:center; margin-top:8px;}

.cont_shadow_box{padding:20px; border-radius: 12px; box-shadow: none; border:1px solid #e2e8f0; box-sizing: border-box; background: #fff; }
.cont_shadow_box02{padding:20px; border-radius: 5px; box-shadow: none; border:1px solid #e2e8f0; box-sizing: border-box; background: #fff; }
.default_inp{width:100%; height: 40px;border-radius: 50px; outline: none; border:1px solid #dbdbdb; }
.default_sel{width:100%; height: 40px;border-radius: 50px; outline: none; border:1px solid #dbdbdb;}

/* 문의 카테고리 수정 팝업 */
.category_width_box{width:100%; display: flex; column-gap: 20px; flex-direction: row; align-items: center;flex-wrap: wrap;    row-gap: 20px;}
.category_cont_box{width:231px;}
/* .category_cont_box:nth-child(5n){margin-right:0;} */
.category_cont_tbox{margin-bottom: 12px;}
.category_btn_box{justify-content: space-between; width: 100%;}
.pop_table_contbox_relative{position: relative;}

.category_btn_grp{margin-top:12px;}

.popup_cont_txt{font-size:14px; color:#999;}

/* Page 기본설정 */
.data_search_max_widthbox .data_search_grp{max-width: 250px;}
.data_search_max_widthbox .data_search_btngrp{max-width: 318px;}
.data_search_max_widthbox .inp_moving_width01{width: 100%;}


/* 온습도조절 wrap */
.popup_hd_state{font-size:16px; font-weight: 500; margin-right: 8px; padding:6px 14px;border-radius:100px; cursor: pointer; transition: 0.3s; color:#fff; 
background-color:#3b82f6}

.pop_cont_subbox{display: flex; flex-direction: row;align-items: center;}
.popup_sub_title{font-size:24px;}
.popup_sub_title02{color:#ff0000;}
.popup_sub_title03{color:#7787ff;}
.pop_cont_sub_cont{margin-right: 18px; display: flex; flex-direction: row;align-items: center;}
.pop_cont_sub_cont .pop_cont_sub_txt{margin-right:8px; font-size:14px;}

.temper_contents_box{width:100%; position: relative;}
.temper_listbox{width:100%;  position: relative; flex-wrap: wrap;  column-gap:15px;}
.temper_list{padding:16px; box-sizing: border-box; box-shadow: none; border:1px solid #e2e8f0; border-radius: 12px; background-color:#fff;
margin-top:15px;width:calc(16% - 2px);position: relative;cursor: pointer;}
.temper_list.off{background-color:#fff; opacity: 0.4;}
.temper_list.off .off_box{position: absolute; top:0; left: 0; width:100%; height:100%;  border-radius: 12px;}


.temper_div_box{display: flex; flex-direction: column;}
.temper_div_hd{display: flex; flex-direction: row; align-items: center;justify-content: space-between;}
.state_titbox{display: flex; flex-direction: row;align-items: center;}
.temper_div_title{font-size: 22px;}
.state_tit{padding:4px 12px; background-color:#3b82f6; color:#fff; font-weight:500; border-radius: 100px; margin-right:8px; font-size:14px; max-width: 70px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.temper_div_pow{width: 10px; height:10px; border-radius: 50%; background-color:#ddd;}
.temper_div_pow.on{background-color:#3b82f6;}

.temper_div_body_tbox{width:100%; display: flex; flex-direction: row; align-items: center;}
.temper_div_contbox{width:100%; display: flex; flex-direction: column;     align-items: center; margin:16px 0; box-sizing: border-box; padding:5px 10px; }
.temper_div_contbox01{border-right: 1px solid #e1e1e1;}
.temper_div_bd_txt{font-size:12px;color:#999; font-weight: 500;}
.temper_div_bd_titbox{ display: flex; flex-direction: row;}
.temper_div_bd_tit{font-size: 28px; font-weight: bold;display: flex;flex-direction: row;  align-items: center;}
.temper_div_bd_tpoint{font-size:18px;display:inline-block; margin-left: 4px;}

.temper_div_ft{width:100%; margin-top:16px;}
.temper_div_ft_tbox{width:100%;justify-content: space-between;}
.temper_div_ft_txt{font-size:12px; color:#999; font-weight: 500; letter-spacing: -0.5px;}


.temper_div_body_btnbox{width:100%; padding:0px; box-sizing: border-box; background-color:#f3f5f6; border-radius: 16px;}
.temper_div_body_btngrp{display: flex; flex-direction: row;flex-wrap: wrap; padding:8px; box-sizing: border-box;}
.temper_div_body_btnlist{width:50%; }

.temper_div_body_square{width: 100%; position: relative;   box-sizing: border-box;}
.temper_div_body_square:after{content: "";display: block;padding-bottom: 100%;}
.temper_div_body_btn{display: block;position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); border-radius: 8px; width: calc(100% - 16px);
 height: calc(100% - 16px); background-color:#fff; border-radius: 12px; box-shadow: none; border:1px solid #e2e8f0; background-repeat: no-repeat;
background-position: center; background-size: 28px; transition: 0.3s;}
.temper_div_body_btn:hover{background-color:#fff;}
.temper_div_body_btn.speaker{background-image: url('/static/img/web/speaker_icon.png');}
.temper_div_body_btn.motion{background-image: url('/static/img/web/motion_icon.png');}
.temper_div_body_btn.fire{background-image: url('/static/img/web/fire_icon.png');}
.temper_div_body_btn.smoke{background-image: url('/static/img/web/smoke_icon.png'); background-size: 32px;}

.temper_div_body_btn.speaker.on{background-image: url('/static/img/web/on_speaker_icon.png');background-color:#fff; }
.temper_div_body_btn.motion.on{background-image: url('/static/img/web/on_motion_icon.png');background-color:#fff;}
.temper_div_body_btn.fire.on{background-image: url('/static/img/web/on_fire_icon.png');background-color:#fff;}
.temper_div_body_btn.smoke.on{background-image: url('/static/img/web/on_smoke_icon.png');background-color:#fff; background-size: 32px;}

.temper_div_body_btn.speaker.on{background-image: url('/static/img/web/on_speaker_icon.png');background-color:#fff; }
.temper_div_body_btn.motion.on{background-image: url('/static/img/web/on_motion_icon.png');background-color:#fff;}
.temper_div_body_btn.fire.on{background-image: url('/static/img/web/on_fire_icon.png');background-color:#fff;}
.temper_div_body_btn.smoke.on{background-image: url('/static/img/web/on_smoke_icon.png');background-color:#fff; background-size: 32px;}


.toggleSwitch {
    width: 50px;
    height: 26px;
    display: block;
    position: relative;
    border-radius: 30px;
    background-color: #e3e3e3;
    cursor: pointer;
  }
  
   /* 토글 버튼 */
  .toggleSwitch .toggleButton {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #b5b5b5;
  }

  /* 체크박스가 체크되면 변경 이벤트 */
.toggle:checked ~ .toggleSwitch {
    background: #3b82f6;
  }
  
  .toggle:checked ~ .toggleSwitch .toggleButton {
    left:calc(100% - 22px);
    background: #fff;
  }
  
  .toggleSwitch, .toggleButton {
    transition: all 0.2s ease-in;
  }

.pop_num_setbox{display: flex; flex-direction: row;     align-items:flex-end; padding:20px; box-sizing: border-box; justify-content: center;}
.pop_num_setbox{padding:40px 0;}
.pop_num_set_inp{border:0;font-size: 48px; font-weight:bold; width:100%; text-align: center; max-width: 100px;background-color:transparent;}
.pop_num_set_inp::placeholder{color:#b8b8b8;}
.pop_num_set_inp:focus{outline: none;}

.pop_num_set_txt{font-size: 14px; color:#666; font-weight: 400;}

.pop_sensor_grp01 .pop_cont_flexbox{width: 100%; display: flex; flex-direction: row;    flex-wrap: wrap; column-gap: 20px;}
.pop_sensor_grp01 .pop_cont_flexbox .pop_cont_sub_box{position: relative; margin-top: 20px;;}
.pop_sensor_grp01 .pop_cont_sub_width01{width:380px;}
.pop_sensor_grp01 .pop_cont_sub_width02{width:calc(100% - 400px);}
.pop_sensor_grp01 .pop_count_setbox{margin-bottom: 60px;}
.pop_sensor_grp01 .pop_count_set_txt{margin-top:60px;}
.pop_sensor_grp01 .pop_cont_flexbox .pop_cont_sub_box:last-child{margin-right:0;}

.pop_sensor_grp01 .pop_cont_flexbox .pop_cont_sub_box.off{position: relative; opacity: 0.5;}
.pop_sensor_grp01 .pop_cont_flexbox .pop_cont_sub_box.off .off_box{position: absolute; top:0; left: 0; width:100%; height:100%;  border-radius: 12px;}
.pop_sensor_grp01 .pop_cont_flexbox .pop_cont_sub_box .pop_cont_box{margin-right: 0;}
.pop_sensor_grp01 .pop_cont_table_bdbox{height:415.5px; overflow-y: auto;}

.pop_cont_tablebox{width:100%;position: relative; box-shadow: 2px 4px 8px 0px #2934390a; background-color: #fff;overflow: hidden; border-radius: 12px;}
.pop_cont_table{border-collapse: collapse; width:100%;}
.pop_cont_table_bdbox{height:455.5px; overflow-y: auto;}


.pop_cont_table_hdbox{width:100%; border-radius: 12px 12px 0 0;box-shadow: 2px 4px 8px 0px #2934390a;z-index: 9;position: relative;;}
.pop_cont_table_hd{width:100%;}
.pop_cont_table_th{padding:14px; text-align: left; color:#9ca2a9; font-size: 14px; font-weight: 600;}
.pop_cont_table_td{padding:14px; text-align: left; color:#333; font-weight: 400; font-size: 14px;}
.pop_cont_table_bd tr{border-bottom:1px solid #eee;}
.pop_cont_table_bd tr:first-child{border-bottom: 1px solid #eee;;}
.pop_cont_table_bd tr:last-child{border-bottom: 0;}





/* 화재 감지 */
.pop_sensor_grp02 .pop_cont_flexbox{width: 100%; display: flex; flex-direction: row;    flex-wrap: wrap; column-gap: 20px;}
.pop_sensor_grp02 .pop_cont_flexbox .pop_cont_sub_box{width:calc(33.3333% - 13.4px);position: relative; margin-top: 20px;;}
.pop_sensor_grp02 .pop_cont_flexbox .pop_cont_sub_box:last-child{margin-right:0;}

.pop_sensor_grp02 .pop_cont_flexbox .pop_cont_sub_box.off{position: relative; opacity: 0.5;}
.pop_sensor_grp02 .pop_cont_flexbox .pop_cont_sub_box.off .off_box{position: absolute; top:0; left: 0; width:100%; height:100%;  border-radius: 12px;}
.pop_sensor_grp02 .pop_cont_flexbox .pop_cont_sub_box .pop_cont_box{margin-right: 0;}

.pop_sensor_grp02 .pop_count_setbox{margin-bottom: 60px;}
.pop_sensor_grp02 .pop_count_set_txt{margin-top:60px;}

.pop_sensor_grp02 .pop_cont_table_bdbox{height:453.5px; overflow-y: auto;}

.pop_sensor_grp02 .pop_count_setbox{width:100%;}
.pop_count_set_txt{width:100%; font-size: 16px; text-align: center; color:#666; font-weight: 500;margin-top:40px;}
.pop_count_set_numbox{display: flex; flex-direction: row; align-items: center;  justify-content: center; margin-top: 20px;;}

.pop_count_set_inpbox{width:180px; height:180px;border:4px dotted #ccc; box-sizing: border-box; border-radius: 100%;    display: flex;
    flex-direction: row;justify-content: center;align-items: center; padding:20px; margin:0 20px;}
.pop_count_set_inp{width:100%; border:0; text-align: center; font-size: 58px; font-weight: bold; max-width: 100px;background-color:transparent;}
.pop_count_set_inp::placeholder{color:#b8b8b8;}
.pop_count_set_inp:focus{outline:none;}

.pop_count_set_num_btn{width:60px; height:60px; background-size: 25px; border:3px solid #ccc; background-repeat: no-repeat; background-position: center;  border-radius: 50%;
transition: 0.3s; box-sizing: border-box;}
.pop_count_set_num_btn.plus{background-image: url(/static/img/web/def_plus_btn.png);}
.pop_count_set_num_btn.minus{background-image: url(/static/img/web/def_minus_btn.png);}

.pop_count_set_num_btn.plus:hover{background-image: url(/static/img/web/hov_plus_btn.png);border:3px solid #3b82f6; }
.pop_count_set_num_btn.minus:hover{background-image: url(/static/img/web/hov_minus_btn.png);border:3px solid #3b82f6; }

.pop_count_set_inp_color{color:#2563eb; padding:0;}
.pop_count_set_inp_color02{color:#7787ff; padding:0;}
.pop_count_set_inptxt{color:#b8b8b8; font-size:20px; font-weight: bold;padding-top:22px;}

.pop_cont_table_bdbox.none{display: flex; flex-direction: column;     align-items: center;justify-content: center;}
.pop_cont_table_none_txt{color:#9ca2a9; font-weight: 400; font-size: 16px;}

/* 온습도 설정 */
.pop_sensor_grp03 .pop_cont_flexbox{width: 100%; display: flex; flex-direction: row;    flex-wrap: wrap; column-gap: 20px;}
.pop_sensor_grp03 .pop_cont_flexbox .pop_cont_sub_box{width:calc(33.3333% - 13.4px);position: relative; margin-top: 20px;;}
.pop_sensor_grp03 .pop_cont_flexbox .pop_cont_sub_box:last-child{margin-right:0;}

.pop_sensor_grp03 .pop_cont_flexbox .pop_cont_sub_box.off{position: relative; opacity: 0.5;}
.pop_sensor_grp03 .pop_cont_flexbox .pop_cont_sub_box.off .off_box{position: absolute; top:0; left: 0; width:100%; height:100%;  border-radius: 12px;}
.pop_sensor_grp03 .pop_cont_flexbox .pop_cont_sub_box .pop_cont_box{margin-right: 0;}

.pop_sensor_grp03 .pop_count_setbox{margin-bottom: 80px;}
.pop_sensor_grp03 .pop_count_set_txt{margin-top:80px;}

.pop_sensor_grp03 .pop_cont_table_bdbox{height:453.5px; overflow-y: auto;}
.pop_count_set_txt_color{color:#ff0000;}
.pop_sensor_grp03 .pop_count_setbox{width:100%;}

/* 스피커 설정 */
.pop_sensor_grp04 .pop_cont_flexbox{width: 100%; display: flex; flex-direction: row;    flex-wrap: wrap; column-gap: 20px;}
.pop_sensor_grp04 .pop_cont_flexbox .pop_cont_sub_box{width:100%;position: relative; margin-top: 20px;;}
.pop_sensor_grp04 .pop_cont_flexbox .pop_cont_sub_box:last-child{margin-right:0;}

.pop_sensor_grp04 .pop_cont_flexbox .pop_cont_sub_box.off{position: relative; opacity: 0.5;}
.pop_sensor_grp04 .pop_cont_flexbox .pop_cont_sub_box.off .off_box{position: absolute; top:0; left: 0; width:100%; height:100%;  border-radius: 12px;}
.pop_sensor_grp04 .pop_cont_flexbox .pop_cont_sub_box .pop_cont_box{margin-right: 0;}

.pop_sensor_grp04 .pop_count_setbox{margin-bottom: 80px;}
.pop_sensor_grp04 .pop_count_set_txt{margin-top:80px;}

.pop_sensor_grp04 .pop_cont_table_bdbox{height:auto;min-height: 300px;max-height:360.5px; overflow-y: auto;}


.pop_sensor_grp04 .pop_count_setbox{width:100%;}

.pop_sensor_grp04 .pop_cont_titbox{display: flex; flex-direction: row; align-items: center;}
.pop_sensor_grp04 .pop_cont_titbox .pop_cont_tit{margin-right: 12px;}


.pop_cont_sub_txt{font-size:14px; color:#999;}

.pop_sensor_grp04 .pop_cont_table_bd tr:nth-child(2n){background-color: #fff;}

.pop_sensor_grp04 .pop_cont_table_td{padding: 10px 14px;;}
.pop_cont_table_bd_grp{width:100%;}
.volume_size_warp{display: flex; flex-direction: row; align-items: center;     justify-content: space-between;}




.volume_size_number{font-size: 28px; font-weight: bold;border:0;width:52px; padding: 0;text-align: right;background-color:transparent;}
.volume_size_number:focus{outline: none;}

.volume_size_box{display: flex; flex-direction: row; align-items: center;}
.volume_size_listbox{display: flex; flex-direction: row;align-items: center; }
.volume_size_list{width: 10px; height: 15px; padding-right: 4px; box-sizing:border-box; }
.volume_size_list .volume_size_list_bg{width:6px; height:15px;background-color:#ddd;}
.volume_size_list_color .volume_size_list_bg{width:6px; height:15px;background-color:#3b82f6;}
.volume_size_list:last-child{margin-right: 0;}


.volume_size_btn{width:20px; height:20px; background-size: 10px; border:1px solid #ccc; background-repeat: no-repeat; background-position: center;  border-radius: 50%;
    transition: 0.3s; box-sizing: border-box;}
.volume_size_btn.volume_size_up{background-image: url(/static/img/web/def_plus_btn02.png); margin-left: 8px;}
.volume_size_btn.volume_size_down{background-image: url(/static/img/web/def_minus_btn02.png);margin-right: 8px;}

.volume_size_btn.volume_size_up:hover{background-image: url(/static/img/web/w_hov_plus_btn.png);border:1px solid #3b82f6; background-color:#3b82f6 ; }
.volume_size_btn.volume_size_down:hover{background-image: url(/static/img/web/w_hov_minus_btn.png);border:1px solid #3b82f6; background-color:#3b82f6 ;}

.table_center{text-align: center;}

.not_used_tr{opacity: 0.25;}
.not_used_tr .default_btn:hover{cursor: default; }
/* .not_used_tr .toggleSwitch:hover{cursor: default; } */
.not_used_tr .volume_size_number:hover{cursor: default; }

.not_used_tr .volume_size_btn:hover{border:1px solid #ccc; }
.not_used_tr .volume_size_btn.volume_size_down:hover{cursor: default;background-image: url(/static/img/web/def_plus_btn02.png);background-color:#fff;}
.not_used_tr .volume_size_btn.volume_size_up:hover{cursor: default;background-image: url(/static/img/web/def_minus_btn02.png);background-color:#fff;}


.pop_cont_title_inpwidth{margin-right:12px;}
.pop_cont_title_inpwidth:last-child{margin-right: 0;}
.pop_cont_title_inpwidth01{width:250px;}
.pop_cont_title_inpwidth02{width:258px;}
.pop_cont_title_inpwidth03{width:120px;}
.pop_cont_title_inpwidth .volume_size_list .volume_size_list_bg{background-color:#ccc;}
.pop_cont_title_inpwidth .volume_size_list_color .volume_size_list_bg{width:6px; height:15px;background-color:#3b82f6;}

.pop_cont_table_bottom_btnbox{width:100%;padding:14px; box-sizing: border-box;box-shadow: 2px -4px 8px 0px #2934390a;}
.pop_cont_table_bottom_btnbox .pkey_btn_list_box{ width:155px;}

/* tooltip */

[data-tooltip-text]:after {
	-webkit-transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
	-moz-transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
	transition: bottom .3s ease-in-out, opacity .3s ease-in-out;

	background-color: rgba(0, 0, 0, 0.8);

  -webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
	-moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
	box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
	
  -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
  color: #FFFFFF;
	font-size: 12px;
	margin-bottom: 10px;
	padding: 7px 12px;
	position: absolute;
	width: auto;
	min-width: 50px;
	max-width: 300px;
	word-wrap: break-word;

	z-index: 9999;

	opacity: 0;
	left: -9999px;
  	top: 90%;
	min-width:max-content;
	content: attr(data-tooltip-text);
	line-height:15px;
}

[data-tooltip-text]:hover:after {top: 55px;left: 50%; transform: translateX(-50%); opacity: 1;}


.page_mv_wrap{position: fixed; bottom: 40px; right:40px; z-index: 9;}

.page_mv_btn{margin-bottom: 12px;}
.page_mv_btn:last-child{margin-bottom: 0;}
/* 채팅 바로 가기 */
.chat_count_icon{ width:80px; height: 80px; border-radius: 50%; background-color: rgba(46,49,149, 0.85);
    box-shadow: none; border:1px solid #e2e8f0; display: flex; display: flex; position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;}
.chat_count_talk_icon{ width: 40px; height: 40px;position: absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.chat_count_talk_icon img{width:100%; }
.notice_color{position: absolute; display: flex; flex-direction: column; top:-5px; right:-5px; width:40px; height:40px; background-color:#ff4a52; color:#fff;
    justify-content: center; align-items: center; font-size: 16px; font-weight: bold; border-radius: 50%;}


/* 객실상태 알림 */

.room_notice_btn{ display: block; width:80px; height:80px; border-radius: 50%; z-index: 9;
    box-shadow: 2px 4px 8px 0px #2934390a;transition: 0.3s; background:linear-gradient(45deg, #3b82f6, #818cf8); transition: 0.3s;}
    .room_notice_btn:hover{background:linear-gradient(45deg, #ff323a, #ffa1e6);}
    .room_notice_btn img{width:40px; height:40px; position: absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
    .room_notice_grp{position: relative; width:100%; height: 100%; display: block;}
    .room_notice{position: absolute; display: flex; flex-direction: column; top:-5px; right:-5px; width:40px; height:40px; background-color:#ff4a52; color:#fff;
        justify-content: center; align-items: center; font-size: 16px; font-weight: bold; border-radius: 50%;}

.room_notice_wrap{width: 330px; overflow: hidden; position: fixed; bottom:40px; right:40px; border-radius: 12px; background-color:#fff; box-shadow: 4px 4px 14px 5px #333f4424;
z-index: 10;}
.room_notice_hd{padding:16px; box-sizing: border-box; background:linear-gradient(45deg, #3b82f6, #60a5fa); position: relative;}
.room_notice_hd_tit{color:#fff;}
.room_notice_hd_tit01{font-size:22px;}
.room_notice_hd_tit02{font-size:14px; font-weight:400;}

.hd_close_btn{display: block; width: 33px; height:33px; background-position: center; background-repeat: no-repeat; background-size:20px;
    background-image: url('/static/img/mobile/door/w_close_icon.png'); position: absolute; top:16px; right: 16px;;}

.room_notice_body{padding:16px; box-sizing:border-box; height: 470px;  overflow-y: auto;}
.room_notice_list{margin-bottom:12px; border-radius: 12px; background-color:#f3f5f6;padding:10px 12px; box-sizing:border-box;}
.room_notice_list:last-child{margin-bottom:0;}

.room_notice_num_tit01{color:#000; font-size:18px;font-weight:bold;}
.room_notice_num_txt01{color:#333; font-size:12px;font-weight:400; margin-left: 8px;display: inline-block;padding:3px 8px; border-radius:50px; background:#ddd; }
.room_notice_num_txt02{color:#333; font-size:14px; margin-top: 4px; font-weight: 400;}

.room_notice_ft{ background:linear-gradient(45deg, #3b82f6, #60a5fa);}
.room_notice_refresh_btn{padding:16px; box-sizing:border-box; display:block; text-align: center; color:#fff; font-size: 16px;font-weight: bold;;}
.dis_flex_row_center{display: flex; flex-direction: row;align-items: center; width:100%;}

.text_over{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* 도어락 관리 */


.chk_box { display: block; position: relative; width:20px; height:20px; margin:0 auto; border-radius: 4px; overflow: hidden;
    cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* 기본 체크박스 숨기기 */
.chk_box input[type="checkbox"] { display: none; }

/* 선택되지 않은 체크박스 스타일 꾸미기 */
.chk_box .on { width: 20px; height: 20px; background: #eee; position: absolute; top: 0; left: 0; }

/* 선택된 체크박스 스타일 꾸미기 */
.chk_box input[type="checkbox"]:checked + .on { background: #3b82f6; }
.chk_box .on:after { content: ""; position: absolute; display: none; }
.chk_box input[type="checkbox"]:checked + .on:after { display: block; }
.chk_box .on:after { width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 6px; top: 2px; }

.pop_td_widthbox{width:100%; display: flex; flex-direction: row; align-items: center;}
.pop_td_width{margin-right:12px;}
.pop_td_width:last-child{margin-right: 0;}

.door_state{width: 12px; height: 12px; border-radius: 50px; margin-right: 12px; display: inline-block;}
.door_on{background:#3b82f6;}
.door_off{background:#ddd;}

.cardkey_widthbox{width: 100%;}
.cardkey_width{margin-right: 20px;}
.cardkey_width:last-child{margin-right: 0;}

.cardlist_widthbox{width: 100%;}
.cardlist_widthbox01 .cardlist_width{width:100%; margin-right: 8px;}
.cardlist_widthbox01 .cardlist_width:last-child{margin-right: 0;}

.cardlist_widthbox02{flex-direction: column;}
.cardinp_widthbox{display: flex; flex-direction: row; align-items: center; width: 100%;;}
.cardinp_selelct{max-width: 60px; min-width:60px}
.cardinp_width{margin-right: 8px;}
.cardinp_width:last-child{margin-right: 0;}
.time_right{margin-right: 8px;}
.time_right:last-child{margin-right: 0;}
.cardlist_widthbox02 .cardinp_width01{width: 100%;}
.time_infinite{display: flex; flex-direction: row;}
.time_infinite .setup_title {margin-bottom:0;margin-right:12px;}
.last_margin_bottom20{margin-bottom: 20px;}
.last_margin_bottom20:last-child{margin-bottom: 0;}

.search_cardkey_lisy{width:100%;}
.search_cardkey_lisy_width{margin-right: 8px;}
.search_cardkey_lisy_width:last-child{margin-right:0}


.motion_text_box{border-radius: 15px;  background-color:#fff; box-shadow:2px 6px 8px 0px #29343926; position:fixed;top:-150px;  left:50%; transform: translateX(-50%);
display:flex; flex-direction:row; align-items:center;padding-right:120px; box-sizing:border-box;overflow:hidden;z-index: 1; transition: 0.3s;}
.motion_text_box.motion{top:20px;}
.motion_state_box{display:flex; flex-direction:row; align-items:center;padding:20px; box-sizing: border-box; }
.motion_state {padding:6px 12px; display:inline-block; background-color:#ff0000; color:#fff; font-size:16px;border-radius: 50px;font-weight:500;margin-right:12px;}
.motion_text_tit{font-size:18px; font-weight:400;}
.motion_text_tit > em{color:#ff0000; font-weight:bold;}

.motion_btn_box{width:120px;height:100%; position: absolute; top:0; right:0;}
.motion_btn{display:flex;flex-direction: row; align-items: center; justify-content:center; width:100%; height:100%; font-size:18px; color:#fff;
     background:linear-gradient(45deg, #3b82f6, #60a5fa); font-weight:bold;}


 /* 요일 설정 pop */
 .relayauto_inp_cont_box{display: flex; flex-direction: row;}
 .relayauto_inp_cont_box .pop_cont_inp_box{margin-right: 20px;}
 .relayauto_inp_cont_box .pop_cont_inp_box:last-child{margin-right: 0;}
 .relayauto_selbox_widthbox{display: flex; flex-direction: row;}
 .relayauto_selbox_width{margin-right: 12px;}
 .relayauto_selbox_width:last-child{margin-right: 0;}
 .relayauto_selbox_width select{min-width:75px;}

 /* 릴레이보드 설정 */





.relay_power_tab_ul{background-color:#f3f5f6; border-radius: 12px; padding:8px; box-sizing: border-box; display: flex; box-shadow: 2px 4px 8px 0px #2934390a;}
.relay_power_tab_li{margin-right: 12px;width:100%;}
.relay_power_tab_li:last-child{margin-right: 0;}


.relay_power_button{display:flex; flex-direction: row; align-items: center; justify-content: center;width:100%;height:70px; border-radius: 12px; transition:0.3s;}
.relay_power_button .relay_icon{display: block; width:40px; height:40px; background-size:100% ;background-position:center;background-repeat: no-repeat;}
.relay_power_button .relay_icon.light{background-image: url(/static/img/web/light_icon.png);}
.relay_power_button .relay_icon.tv{background-image: url(/static/img/web/tv_icon.png);}
.relay_power_button .relay_icon.airc{background-image: url(/static/img/web/airc_icon.png);}
.relay_power_button .relay_icon.curtain{background-image: url(/static/img/web/curtain_icon.png);}
.relay_power_button .relay_icon.regulator{background-image: url(/static/img/web/regulator_icon.png);}

.relay_power_button.active .relay_icon.light{background-image: url(/static/img/web/on_light_icon.png);}
.relay_power_button.active .relay_icon.tv{background-image: url(/static/img/web/on_tv_icon.png);}
.relay_power_button.active .relay_icon.airc{background-image: url(/static/img/web/on_airc_icon.png);}
.relay_power_button.active .relay_icon.curtain{background-image: url(/static/img/web/on_curtain_icon.png);}
.relay_power_button.active .relay_icon.regulator{background-image: url(/static/img/web/on_regulator_icon.png);}


.relay_power_button:hover{background-color: #ddd;}    
.relay_power_button.active{ background-color:#fff;box-shadow: 2px 4px 8px 0px #2934390a;color:#3b82f6; }



.relay_sett_ul{display: flex; flex-direction: row; margin-top: 20px; gap: 20px;flex-direction: row; flex-wrap: wrap;}

.relay_sett_li{width:calc(25% - 15px);opacity: 0.65;}
.relay_sett_li.on{opacity: 1;}
.relay_sett_top_tit{font-size: 24px;}
.relay_sett_li .power_icon{display: block; width: 30px; height:30px; background-repeat: no-repeat; background-position: center; background-size: 100%;
background-image: url(/static/img/web/switch_off.png); margin-right:12px;}
.relay_sett_li.on .power_icon{background-image: url(/static/img/web/switch_on.png);}
.relay_sett_topbox{margin-bottom: 20px;;}
.chk_box_tit{font-weight: 500; font-size: 13px; padding-left: 8px; color:#666}

.relay_sett_li .relay_power_tab_ul{margin-top: 20px;}
.relay_sett_li .relay_power_tab_li{margin-right: 8px;}
.relay_sett_li .relay_power_tab_ul .relay_power_button{height:56px;}
.relay_sett_li .relay_power_tab_ul .relay_power_button .relay_icon{width:30px;}

.right_active_navbtn,.close_active_navbtn{
display:block; width:30px; height:30px; position:absolute; top:22px; right:-7px; left:auto; transform:none; background-color:#ffffff; transition: 0.2s; border-radius:50%;
border:1px solid #dbeafe; box-shadow: 0 4px 10px 0 #94a3b833; z-index: 1000;
}
.right_active_navbtn::before{
    content:"\f0c9";
    font-family:"Font Awesome 5 Free";
    font-weight:900;
    font-size:11px;
    color:#2563eb;
    display:flex;
    width:100%;
    height:100%;
    align-items:center;
    justify-content:center;
}
.right_active_navbtn:hover{background-color: #eff6ff; border-color:#93c5fd;}

.close_active_navbtn::before{
    content:"\f053";
    font-family:"Font Awesome 5 Free";
    font-weight:900;
    font-size:11px;
    color:#2563eb;
    display:flex;
    width:100%;
    height:100%;
    align-items:center;
    justify-content:center;
}
.close_active_navbtn:hover{background-color: #eff6ff; border-color:#93c5fd;}


.right_active_navbtn{display:block;}
.close_active_navbtn{display:block;}
.web_wrap.sidebar-compact .right_active_navbtn{
    position:fixed;
    top:22px;
    left:14px;
    right:auto;
}


@media (max-width: 1728px) {
    .left_menu_acco{z-index:11; position:fixed;}
    .right_contbox{padding:56px 24px 24px 284px !important;}
    .web_wrap.sidebar-compact .right_contbox{padding:56px 24px 24px 24px !important;}
    .web_wrap.sidebar-compact .content_box{padding-left:24px !important;}
    .popup_wrap{overflow:auto;}
    .popup_contbox{overflow:auto;}
    .motion_text_box{display:none !important;}
}

@media (max-width: 1024px) {
    .left_menu_acco{
        width:252px;
        left:0;
        z-index:220;
    }
    .web_wrap.sidebar-compact .left_menu_acco{
        width:252px;
        left:-252px;
    }
    .content_box,
    .right_contbox{
        padding-left:16px !important;
        padding-right:16px !important;
        min-width:0 !important;
    }
    .web_wrap.sidebar-compact .content_box,
    .web_wrap.sidebar-compact .right_contbox{padding-left:16px !important;}
    .right_active_navbtn,
    .close_active_navbtn{
        position:fixed;
        top:14px;
        left:14px;
        right:auto;
        transform:none;
        z-index:1000;
    }
    .close_active_navbtn{left:214px;}
    .web_wrap.sidebar-compact .close_active_navbtn{display:none !important;}
    .web_wrap.sidebar-compact .right_active_navbtn{display:block !important;}
    .web_wrap:not(.sidebar-compact) .right_active_navbtn{display:none !important;}
    .web_wrap:not(.sidebar-compact) .close_active_navbtn{display:block !important;}
    .table_over_stylebox,
    .table_over_stylebox_04{
        overflow:auto;
    }
    .stat-dashboard{
        flex-wrap:wrap;
        margin-left:0;
        margin-top:10px;
        gap:4px;
    }
    .stat-item{
        padding:4px 10px;
    }
    .stat-item .stat-label{
        font-size:12px;
    }
    .stat-item .stat-value{
        font-size:16px;
    }
}

/* ===== Stat Dashboard ===== */
.stat-dashboard{
    display:flex;
    align-items:center;
    gap:6px;
    margin-left:auto;
}
.stat-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 16px;
    border-left:3px solid transparent;
    transition:background 0.15s;
}
.stat-item .stat-label{
    font-size:15px;
    font-weight:600;
    color:#64748b;
    white-space:nowrap;
}
.stat-item .stat-value{
    font-size:22px;
    font-weight:800;
    color:#1e293b;
    line-height:1;
}
.stat-item-js{border-left-color:#cbd5e1;}
.stat-item-js .stat-value{color:#3b82f6;}
.stat-item-gs{border-left-color:#cbd5e1;}
.stat-item-gs .stat-value{color:#94a3b8;}
.stat-item-dt{border-left-color:#cbd5e1;}
.stat-item-dt .stat-value{color:#f59e0b;}
.stat-item-not{border-left-color:#cbd5e1;}
.stat-item-not .stat-value{color:#8b5cf6;}
.stat-item-cl{border-left-color:#cbd5e1;}
.stat-item-cl .stat-value{color:#06b6d4;}
.stat-item-battery{
    border-left:none;
    margin-left:6px;
    padding:6px 14px;
    border:1px dashed #fca5a5;
    border-radius:6px;
    background:#fff5f5;
    cursor:pointer;
    user-select:none;
}
.stat-item-battery .stat-label{
    color:#ef4444;
}
.stat-item-battery .stat-label i{
    margin-right:4px;
    font-size:13px;
}
.stat-item-battery .stat-value{
    color:#ef4444;
}
.stat-item-battery::after{
    content:'\f105';
    font-family:'Font Awesome 5 Free';
    font-weight:900;
    font-size:12px;
    color:#ef4444;
    margin-left:4px;
    transition:transform 0.15s;
}
.stat-item-battery.has-warning{
    border-color:#fca5a5;
    background:#fef2f2;
}
.stat-item-battery.has-warning .stat-label{
    color:#ef4444;
}
.stat-item-battery.has-warning .stat-value{
    color:#ef4444;
}
.stat-item-battery.has-warning::after{
    color:#ef4444;
}
.stat-item-battery:hover{
    background:#fef2f2;
    border-color:#fca5a5;
}
.stat-item-battery.has-warning:hover{
    background:#fee2e2;
    border-color:#f87171;
}
.stat-item-battery.active{
    background:#fee2e2;
    border-color:#ef4444;
    border-style:solid;
}
.stat-item-battery.active::after{
    transform:rotate(90deg);
    color:#ef4444;
}

/* ===== List View Redesign ===== */
.lv-table{table-layout:fixed; width:100%;}
.view_list_tb_box .lv-table .table_list_td{padding:10px 8px; vertical-align:middle; border-bottom:1px solid #f1f5f9;}
.view_list_tb_box .lv-table .table_list_th{padding:14px 8px; font-size:13px; color:#1e293b; font-weight:600; border-bottom:2px solid #e2e8f0; white-space:nowrap;}

.lv-table tbody tr:hover{background:#f8fafc;}
.lv-room-info{
    display:flex;
    align-items:center;
    gap:10px;
}
.lv-room-thumb{
    width:52px;
    height:52px;
    background:#f1f5f9;
    border-radius:8px;
    overflow:hidden;
    flex-shrink:0;
}
.lv-room-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.lv-room-text{
    display:flex;
    flex-direction:column;
    gap:2px;
}
.lv-room-num{
    font-size:20px;
    font-weight:800;
    color:#1e293b;
}
.lv-room-type{
    font-size:14px;
    color:#94a3b8;
}
.lv-key-group{
    display:flex;
    gap:4px;
    justify-content:center;
    flex-wrap:wrap;
}
.lv-key-badge{
    display:inline-block;
    padding:5px 12px;
    border-radius:5px;
    font-size:14px;
    font-weight:700;
    background:#f1f5f9;
    color:#94a3b8;
}
.lv-key-badge.on{
    background:#dbeafe;
    color:#3b82f6;
}
.lv-connect-cell{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
}
.lv-conn-badge{
    font-size:15px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:4px;
}
.lv-conn-badge.lv-conn-on{color:#22c55e;}
.lv-conn-badge.lv-conn-off{color:#ef4444;}
.lv-batt{
    font-size:15px;
    font-weight:700;
    color:#64748b;
}
.lv-batt.lv-batt-high{color:#22c55e;}
.lv-batt.lv-batt-mid{color:#f59e0b;}
.lv-batt.lv-batt-low{color:#ef4444;}
.lv-relay-cell{
    vertical-align:middle;
    text-align:center;
}
.lv-plug{
    width:36px;
    height:36px;
    margin:0 auto 6px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    background:#f1f5f9;
    color:#cbd5e1;
    transition:0.15s;
}
.lv-plug.on{
    background:#dcfce7;
    color:#22c55e;
}
.lv-relay-cell .wrapper{
    display:flex;
    justify-content:center;
}
.lv-relay-cell .switch_label{
    margin:0 auto;
}
.lv-btn-on, .lv-btn-off{
    width:100%;
    padding:8px 0;
    font-size:13px;
    font-weight:700;
    border-radius:6px;
    border:none;
    cursor:pointer;
}
.lv-btn-on{
    background:#3b82f6;
    color:#fff;
}
.lv-btn-on:hover{background:#2563eb;}
.lv-btn-off{
    background:#f1f5f9;
    color:#64748b;
    border:1px solid #e2e8f0;
}
.lv-btn-off:hover{background:#e2e8f0;}

/* ===== Dashboard ===== */
.left_menu_dashboard{font-size:16px !important; font-weight:700 !important; color:#1e293b !important; display:flex !important; align-items:center; gap:8px;}
.left_menu_dashboard i{font-size:15px; color:#3b82f6;}
.left_menu_li.active .left_menu_dashboard{color:#2563eb !important;}

/* dashboard styles are now inline in dashboard.ejs */