@charset "utf-8";


/************************ 모니터링 List ************************/

.sub_div_02 { padding:10px 20px 0;}

.mem_info {padding:20px; border-radius:15px; color:#fff; background: rgb(71,109,222); background: linear-gradient(180deg, rgba(71,109,222,1) 60%, rgba(126,166,226,1) 100%); font-weight:600; box-shadow:0 5px 10px rgba(0,0,0,.1); position:relative; }

.mem_info .mem_lv {font-size:14px;}

.mem_info .mem_name {font-size:20px; margin-top:6px; margin-bottom:10px;}
.mem_info .mem_name img {height:18px; vertical-align:-1px; margin-right:4px;}
.mem_info .mem_name a { color:#fff;}

.mem_info .mem_name .logout_btn {margin-left:6px; display:inline-block; padding:2px 8px; border-radius:50px; border:1px solid #fff; font-size:14px; float:right; color:#fff; }

.mem_info .mem_num { margin-top:16px; display:flex; justify-content: space-between; align-items: center;}

/*
.mem_info .mem_num .device_add { font-size:14px; color:#fff; background-color:#000; padding:8px 10px 8px 100px; border-radius:4px; background-image:url(../../../img/common/logo_02_w.png); background-size:84px; background-repeat:no-repeat; background-position:10px center;}
*/

.mem_info .mem_num .device_add { font-size:14px; color:#fff; background-color:#000; padding:8px 10px; border-radius:4px; position:relative; /* background-image:url(../../../img/common/logo_w.png); background-size:24px; background-repeat:no-repeat; background-position:10px center;*/ }
.mem_info .mem_num .device_add:before { content:''; position:absolute; top:0; left:-54px; width:44px; height:34px; background-image:url(../../../img/common/logo_w.png); background-size:44px; background-repeat:no-repeat; background-position:0px center;}


/*.mem_info .mem_num .device_total { font-size:28px;}*/
.mem_info .mem_num .device_total .mem_num_tit { display:inline-block; margin-right:6px; font-weight:400; vertical-align:8px; font-size:16px; vertical-align: baseline; color:#fff;}
.mem_info .mem_num .device_total .mem_num_tit a { color:#fff;}
.mem_info .mem_num .device_total .mem_num_tit .mem_num_btn { margin-left:6px; display:inline-block; padding:2px 8px; border-radius:50px; border:1px solid #fff; font-size:14px;}

.mem_info .mem_num .time {font-size:14px; display: flex; align-items: center }
.mem_info .mem_num .time img {width:16px; display:inline-block; margin-right:4px;}

.mem_info .mem_lv,
.mem_info .mem_name,
.mem_info .mem_num { padding-right:0px;}


.mem_info .mem_add { position:absolute; top:50%; right:20px; transform:translateY(-50%); width:50px; /* height:calc(100% - 40px); background-color:#FF0;*/ text-align:center;}
.mem_info .mem_add .device_add { color:#fff; display:block; }
.mem_info .mem_add .device_add span {display:inline-block; width:50px; height:50px; border:2px solid #fff; position:relative; border-radius:50%; }
.mem_info .mem_add .device_add span i { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:24px;}
.mem_info .mem_add .device_add p { margin-top:6px; font-size:12px;}


.list_wrap_title {font-size:20px; font-weight:600; display: flex; justify-content: space-between;}
.list_wrap_title img {width:22px; border-radius:50%; margin-right:2px; vertical-align:-4px;}

.list_wrap_title .all_chk { padding:0; border-bottom:none;}
.list_wrap_title .all_chk.chk_box input[type="checkbox"] + label { font-size:14px; margin-top:6px; }
.list_wrap_title .all_chk a.btn, 
.list_wrap_title .all_chk .btn { height:30px; line-height:30px; border:1px solid #000;}

.list_wrap {}
.list_wrap .list { width:100%; float:left; padding:20px; border-radius:15px; color:#000; background:#fff; font-weight:600; box-shadow:0 0px 10px rgba(0,0,0,.1); margin-bottom:20px;}
.list_wrap .list .list_info {display:flex; justify-content: space-between; align-items: center; margin-bottom:15px;}
.list_wrap .list .list_info li { width:auto !important;}


.list_wrap .list .list_info .list_info_name {font-size:20px;}
.list_wrap .list .list_info .list_info_name p {font-size:14px; opacity:0.4;}

.list_wrap .list .list_info .list_info_btn span { display:inline-block; font-size:14px; padding:4px 0px; border-radius:50px; font-weight:800; border:1px solid #000; text-align:center; width:70px; text-align:center;}
.list_wrap .list .list_info .list_info_btn .btn { background-color:transparent; padding:0 0 0 10px;}

.list_01 .list_wrap .list .list_info .list_info_btn span { width:90px; }

.list_wrap .list .list_info .list_info_btn i {font-size: 22px; color:#999;}
.list_wrap .list .list_info .list_info_btn img {height:30px;}

.list_wrap .list .list_switch_wrap {display:flex; justify-content:space-around; align-items: center; flex-wrap: wrap; background: rgb(244,244,244,1); background: linear-gradient(180deg, rgba(244,244,244,1) 60%, rgba(226,226,226,1) 100%); border-radius:10px; padding:20px 10px 0;}

.list_wrap .list .list_switch_wrap .list_switch { width:auto !important; background-image:url(../../../img/circuit/switch_bg.png); background-position: top; background-size:40px; background-repeat:no-repeat; width:40px !important; height:100px; padding:6px 0 0 0; text-align:center; position:relative; margin-bottom:10px; width: 20%;}
.list_wrap .list .list_switch_wrap .list_switch .list_switch_light {position:absolute; left:50%; transform:translateX(-50%); bottom:28px;}
.list_wrap .list .list_switch_wrap .list_switch .list_switch_light img {width:18px;}
.list_wrap .list .list_switch_wrap .list_switch .list_switch_btn {text-align:center;}
.list_wrap .list .list_switch_wrap .list_switch .list_switch_btn img {width:36px;}
.list_wrap .list .list_switch_wrap .list_switch .list_switch_name {font-size:12px; padding-top:20px;}


.list_wrap .list .list_reaction_wrap {}
.list_wrap .list .list_reaction_wrap .reaction_title { font-size:15px; margin:16px 0 6px;}
.list_wrap .list .list_reaction_wrap .reaction_title span { font-size:12px; opacity:.4; display:inline-block; margin-left:4px;}

.list_wrap .list .list_reaction_wrap .reaction_con {}
.list_wrap .list .list_reaction_wrap .reaction_con .reaction_state {height:40px; line-height:40px; position:relative; background-color:#f3f3f3; border-radius:50px; padding:0 20px; color:#000; text-align:right; margin-top:10px;}
.list_wrap .list .list_reaction_wrap .reaction_con .reaction_state .reaction_state_text {}
.list_wrap .list .list_reaction_wrap .reaction_con .reaction_state .reaction_state_bar {width:calc(100% - 80px); max-width:65%; height:100%; border-radius:50px; padding:0 20px; color:#fff !important; position:absolute; top:0; left:0; text-align:left; display: flex; align-items: center; box-shadow: 2px 2px 4px rgba(0, 0, 0, .2); text-shadow:0px 0px 2px rgba(0,0,0,.3);}
.list_wrap .list .list_reaction_wrap .reaction_con .reaction_state .reaction_state_bar.state_01 {background: linear-gradient(90deg, #52c234 0%, #159957 100%);}
.list_wrap .list .list_reaction_wrap .reaction_con .reaction_state .reaction_state_bar.state_02 {background: linear-gradient(90deg, #fff10f 0%, #ffba00 100%);}
.list_wrap .list .list_reaction_wrap .reaction_con .reaction_state .reaction_state_bar.state_03 {background: linear-gradient(90deg, #f8b551 0%, #eb6100 100%);}
.list_wrap .list .list_reaction_wrap .reaction_con .reaction_state .reaction_state_bar.state_04 {background: linear-gradient(90deg, #ff1d1d 0%, #af0000 100%);}

.list_wrap .list .list_reaction_wrap .reaction_con .reaction_state .reaction_state_bar img {height:20px; width:auto; display:inline-block; margin-right:4px;}

.list_wrap .list .list_reaction_wrap .reaction_con .reaction_state .reaction_state_bar.living {}
.list_wrap .list .list_reaction_wrap .reaction_con .reaction_state .reaction_state_bar.fire {}




/** 스위치 체크박스로 커스텀할 경우 **/
.list_info_btn_item {}
.list_info_btn_item input[type="checkbox"] { display: none; }

.list_info_btn_item input[type="checkbox"]+label {
    display: block;
    width: 60px;
    height: 30px;
    background: url('../../../img/common/btn_off.png') no-repeat 0 0px / contain;
}

.list_info_btn_item input[type='checkbox']:checked+label {
    background: url('../../../img/common/btn_on.png') no-repeat 0 1px / contain;
}


.list_wrap .list .list_switch_title { font-size: 15px; margin: 10px 0 6px;}

.list_wrap .list .list_switch_wrap .list_switch .list_switch_btn input[type="checkbox"] { display: none; }

.list_wrap .list .list_switch_wrap .list_switch .list_switch_btn input[type="checkbox"]+label {
    display: block;
    width: 36px;
    height: 56px;
    background: url('../../../img/circuit/switch_btn_off.png') no-repeat 0 0px / contain;
    margin-left: 2px;
}

.list_wrap .list .list_switch_wrap .list_switch .list_switch_btn input[type='checkbox']:checked+label {
    background: url('../../../img/circuit/switch_btn_on.png') no-repeat 0 1px / contain;
}

/* 개별 스위치 상태별 불빛 */
.list_wrap .list .list_switch_wrap .list_switch .list_switch_btn input[type="checkbox"]+label .list_switch_light { width:18px; height:18px; background-position:center; background-size:18px !important; background-repeat:no-repeat; background: url('../../../img/circuit/switch_light_3.png');}

.list_wrap .list .list_switch_wrap .list_switch .list_switch_btn input[type="checkbox"]:checked+label .list_switch_light {background: url('../../../img/circuit/switch_light_1.png');}




/************************ 모니터링 View ************************/


.swich_info_wrap { border-radius:15px; padding:16px 16px 12px;}

.swich_info_wrap.switch_wrap {  border:1px solid #96caf0; background-color:#476dde !important; background: linear-gradient(315deg, #96caf0 0%, #c5e5fd 100%); }
.swich_info_wrap.reaction_wrap { border:2px solid #000 !important; background: linear-gradient(315deg, #fff 0%, #fff 100%); margin-top:20px;  } /*2025-08-27 배경색 변경 */

/* 파란색 배경
.swich_info_wrap.switch_wrap {  background-color:#476dde !important; border-color:#476dde !important; background: linear-gradient(315deg, #2044b3 0%, #5e77c7 100%); }
*/

/* 하늘색 배경 
.swich_info_wrap.reaction_wrap { border:1px solid #96caf0; background-color:#476dde !important; background: linear-gradient(315deg, #96caf0 0%, #c5e5fd 100%); margin-top:20px;  }

*/
.swich_info_wrap .swich_date {display:flex; justify-content: space-between;}
.swich_info_wrap .swich_date .swich_date_icon {}
.swich_info_wrap .swich_date .swich_date_icon .swich_date_text { border-radius:4px; color:#fff; padding:2px 4px; border:1px solid rgba(255,255,255,.5);font-size:12px; /* width:70px; display:inline-block; /*text-align:center; background-color:#000;*/   }
.swich_info_wrap .swich_date .swich_date_icon .swich_date_text:after {}
.swich_info_wrap .swich_date .swich_date_icon .swich_date_text i { vertical-align: -1px;}
.swich_info_wrap .swich_date .swich_date_icon .event_list { display:inline-block; margin-left:10px; font-size: 13px; font-weight:600; }
.swich_info_wrap .swich_date .swich_date_icon .event_list img {width:20px; border-radius:50%; margin-right:0px; vertical-align: -5px;}
.swich_info_wrap .swich_date .swich_date_icon .event_list i { vertical-align:-1px; margin-left: -2px;}

.swich_info_wrap .swich_date .model_num {color:rgba(255,255,255,.6) !important;}

.swich_info_wrap .swich_date .swich_date_now {font-size:12px; text-align:right; color:#999; font-weight:600; padding:0px 0;}
.swich_info_wrap .swich_date .swich_date_now a { border:1px solid #000; height:26px; line-height:26px; border-radius:3px;}

.swich_info_wrap .swich_state {display:flex; justify-content: space-between; align-items: center; margin-top:10px; padding-bottom:10px; /*border-bottom:1px solid rgba(0,0,0,.15);*/ }
.swich_info_wrap .swich_state .swich_state_title {font-size:28px; font-weight:700; text-shadow: 0px 0px 2px rgba(0, 0, 0, .3);}
.swich_info_wrap.reaction_wrap .swich_state .swich_state_title {    text-shadow: 0px 0px 2px rgba(255, 255, 255, .3) !important;}

.swich_info_wrap .swich_state .swich_state_title .swich_state_img { display:inline-block; width:30px; height:30px; /* padding:6px; background-color:#000; border-radius:50%; margin-right: 10px;*/ vertical-align: 3px;}
.swich_info_wrap .swich_state .swich_state_title .swich_state_img img { width:calc(100% - 0px);}
.swich_info_wrap .swich_state .swich_state_icon {text-align:right;}

.swich_info_wrap .swich_btn { padding-top:10px; border-top:1px solid rgba(255,255,255,.2); font-size:15px;}
.swich_info_wrap .swich_btn dl {padding:2px 0; display:flex; justify-content: space-between; font-weight:500; }
.swich_info_wrap .swich_btn dt { color:#fff; opacity:.6; }
.swich_info_wrap .swich_btn dd {color:#fff;}

.swich_info_wrap .swich_btn dd .unit { /*width:28px;*/ padding-left:5px; text-align:right; display:inline-block;}


.swich_info_wrap .state_icon { width:84px; display:inline-block; border-radius:50px; font-size:14px; font-weight:800; padding:5px 0px; border-radius:50px; background-color:#000; color:#fff; margin-left:5px; text-align:center; }
.swich_info_wrap.reaction_wrap .state_icon {}
.swich_info_wrap.reaction_wrap .swich_state .swich_state_title {  display:inline-block; }
.swich_info_wrap.reaction_wrap .swich_state .swich_state_title .swich_state_text { font-size:24px; display:inline-block;}
.swich_info_wrap.reaction_wrap .swich_state .swich_state_title .detail_text { font-size:16px; display:inline-block;}



/* 글자 색깔 변경 => 블랙으로 노출 */

.swich_info_wrap .swich_date .swich_date_icon .swich_date_text {color: #000; border: 1px solid rgba(0, 0, 0, 1);}
.swich_info_wrap .swich_date .model_num { color: rgba(0, 0, 0, .6) !important;}
.swich_info_wrap .swich_state .swich_state_title {text-shadow: none;}
.swich_info_wrap .swich_btn {    border-top: 1px solid rgba(0, 0, 0, .2);}
.swich_info_wrap .swich_btn dt { color:#000;}
.swich_info_wrap .swich_btn dd { color: #666;}



/* 글자 색깔 변경 => 화이트로 노출 

.swich_info_wrap.switch_wrap .swich_date .swich_date_icon .swich_date_text {color: #fff; border: 1px solid rgba(255, 255, 255, .6);}
.swich_info_wrap.switch_wrap .swich_date .model_num { color: rgba(255, 255, 255, .6) !important;}
.swich_info_wrap.switch_wrap .swich_state .swich_state_title {text-shadow: none;}
.swich_info_wrap.switch_wrap .swich_btn {    border-top: 1px solid rgba(255, 255, 255, .2);}
.swich_info_wrap.switch_wrap .swich_btn dt { color:#fff; opacity:1;}
.swich_info_wrap.switch_wrap .swich_btn dd { color: rgba(255,255,255,.6);}
*/

/* 초록 */
.swich_info_wrap.state_01 .state_icon { background-color:#34b774;}
.swich_info_wrap.state_01 .state_text { color:#34b774;}

/* 주황 */
.swich_info_wrap.state_02 .state_icon { background-color:#f38b30;}
.swich_info_wrap.state_02 .state_text { color:#f38b30;}

/* 빨강 */
.swich_info_wrap.state_03 .state_icon { background-color:#ce0b0b;}
.swich_info_wrap.state_03 .state_text { color:#ce0b0b;}

/* 노랑 */
.swich_info_wrap.state_05 .state_icon { background-color:#ffd407;}
.swich_info_wrap.state_05 .state_text { color:#ffd407;}


/* 초록 */
.state_01 {color:#34b774 !important;}
.state_01_bo {  border-color:#34b774 !important;}
.state_01_bg { background-color:#34b774 !important;}

/* 주황 */
.state_02 {color:#f0771f  !important;}
.state_02_bo {  border-color:#f0771f  !important;}
.state_02_bg { background-color:#f0771f !important;}

/* 빨강 */
.state_03 {color:#ec4040 !important;}
.state_03_bo {  border-color:#ec4040 !important;}
.state_03_bg { background-color:#ec4040 !important;}

/* 회색 */
.state_04 {color:#777  !important;}
.state_04_bo {  border-color:#777  !important;}
.state_04_bg { background-color:#777 !important;}

/* 노랑 */
.state_05 {color:#ffd407  !important;}
.state_05_bo {  border-color:#ffd407  !important;}
.state_05_bg { background-color:#ffd407 !important;}


/*** 날짜 선택 ***/

.swich_detail_date {margin-bottom:20px; font-size:18px; font-weight:600; position:relative; text-align:left;}
.swich_detail_date .event_list { float:right; font-size:14px; position:absolute; top:2px; right:0; display: flex; align-items: center;}
.swich_detail_date .event_list i { font-size:20px; margin-right:2px;}
.swich_detail_date .event_list i.xi-angle-right-min { font-size:16px; margin-right:0; color:#999;}


input[type='date'] { border: none; /*테두리 설정은 본인 맘대로*/
  position: relative; /*캘린더 아이콘을 클릭해야만 달력이 보이기 때문에 이 영역 자체를 제어하기 위해 설정 */
  width: 100%;
  padding: 0px 24px 0 0;
  /* background: url(../../../img/common/icon_calendar.png) no-repeat right center / 20px; 
  배경 커스텀: 경로 반복 Y축 X축 위치 가로 세로(생략)*/
  text-align: center;
  color:#000;
  line-height:24px;
  font-size:24px;
  background:#fff;
}




.swich_detail_guide { padding-top:30px; padding-bottom:110px !important; background-color:#e9e9e9;}

.swich_detail_guide .swich_detail_guide_title { font-size:14px; font-weight:600;}
.swich_detail_guide .swich_detail_guide_title i { font-size:16px; vertical-align:-2px;}

.swich_detail_guide .table_section { margin-top:10px;}
.swich_detail_guide .table_section table { font-size:12px;}
.swich_detail_guide .table_section table td { padding: 4px 5px; border-bottom-color:#c3c3c3;}
.swich_detail_guide .table_section table tr:last-child th, 
.swich_detail_guide .table_section table tr:last-child td { border-bottom-color:#000;}
.swich_detail_guide .table_section table td .state_sample { /*display:flex; justify-content: center; align-items: center;*/ width:80px; display:inline-block; text-align:center;}
.swich_detail_guide .table_section table td .state_sample span { color:#000; width:50px; text-align:left;}
.swich_detail_guide .table_section table td .state_sample img {width:20px; margin-right:6px; border-radius:50%; padding:2px; border:2px solid #000; }


.swich_detail_btn { position:fixed !important; bottom:0; left:50%; transform:translateX(-50%); max-width:800px;display:flex !important; justify-content: space-between; border-top:1px solid #ddd; font-size:18px; text-align:center; background-color:#fff; z-index:2; padding:20px !important;}
.swich_detail_btn .swich_detail_btn_call {width:100%; /*width:calc(50% - 5px);*/ padding:12px 0; border-radius:8px; color:#fff; background-color:#ff5354;}
.swich_detail_btn .swich_detail_btn_call img { height:22px; display:inline-block; margin-right:6px;}
.swich_detail_btn .swich_detail_btn_control {width:calc(50% - 5px); padding:12px 0; border-radius:8px; color:#fff; background-color:#476dde;}
.swich_detail_btn .swich_detail_btn_control img { height:18px; width:auto; }

 
.modal_btn { cursor:pointer;}


.icon_home { display:block;} 


/* mystyle.css */
/* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 999; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }
        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            padding: 20px;
			border-radius:15px;
            border: 1px solid #888;
            width: calc(100% - 40px); /* Could be more or less, depending on screen size */
			position:absolute;
			top:50%; left:50%; transform:translate(-50%,-50%);
			margin:0;
			max-height: calc(100vh - 100px);
		    overflow-y: auto;
        }
        /* The Close Button */
        .close {
            color: #000;
            font-size: 28px;
            font-weight: bold;
			position:absolute; top:20px; right:20px;
			line-height:1;
			z-index:99999;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
 
.circuit_item_wrap {display:flex; justify-content: space-between; flex-wrap: wrap;}

.circuit_item {width:calc(50% - 5px); border-radius:15px; padding:12px 14px; background-color:#000; margin-bottom:10px; /*box-shadow: 0 0px 10px rgba(0, 0, 0, .1);*/}
.circuit_item.state_01 { background-color:#f2f2f2 !important; color:#000 !important;}
.circuit_item.state_03 { background-color:#ec4040 !important; color:#fff !important;}
.circuit_item.state_02 { background-color:#ffa800 !important; color:#fff !important;}

.circuit_item .circuit_item_title { margin-bottom:10px; font-size:16px; background-position: left 2px; background-repeat: no-repeat; background-size: 22px; padding-left: 28px;background-image:url(../../../img/common/icon_circuit.png);}
.circuit_item.state_01 .circuit_item_title {}
.circuit_item.state_03 .circuit_item_title,
.circuit_item.state_02 .circuit_item_title { background-image:url(../../../img/common/icon_circuit_w.png);}

.circuit_item .circuit_item_title .error_type { width:54px; text-align:center; display:inline-block; float:right; padding:2px 0px; border-radius:50px; background-color:#fff !important; font-size:12px; font-weight:600;}
.circuit_item .circuit_item_title .error_type.state_01 { display:none;}
.circuit_item .circuit_item_title .error_type.state_03 {}
.circuit_item .circuit_item_title .error_type.state_03 {}

.circuit_item .circuit_item_info {display:flex; font-size:16px; font-weight:600;}
.circuit_item .circuit_item_info .circuit_item_state {width:calc(50% - 6px);}
.circuit_item .circuit_item_info .circuit_item_state .circuit_item_tit {display:block; font-size:12px; font-weight:400; opacity:.6;}
.circuit_item .circuit_item_info .circuit_item_line {margin:0 10px; width:1px; background-color:rgba(255,255,255,.3);}



 
.device_title { padding:20px 20px 0; font-size:18px;}
.device_title p {font-size: 14px; opacity: 0.4;}