@charset "UTF-8";


#container {padding-top: 0;}
#container .search_bar {position: relative; width: 100%; display: flex; align-items: center; column-gap: 12px; padding: 10px 15px; box-sizing: border-box;}
#container .switch {width: auto; height: 28px; margin-right: 10px;}
#container .switch button {width: 58px; height: 28px; padding: 0 10px; box-sizing: border-box;}
#container .switch .left {background: url(../images/switch-on-left.png) no-repeat center;}
#container .switch .right {display: none; background: url(../images/switch-on-right.png) no-repeat center;}

/* switch 스크립트 */
#container .switch.click .left {display: none;}
#container .switch.click .right {display: inline-block;}

#container .switch > span {display: inline-block; line-height: 28px; vertical-align: top; font-size: 15px;}

/* 통계데이터 css 시작*/
/* cont 시작 */
#container .cont {height: 94%; padding: 50px; box-sizing: border-box;}
#container .date_select > input, #container select {height: 32px; padding: 0 5px; background: rgba(255,255,255,0.7);}
#container .date {width: 130px;}
#container .time {width: 100px;}
#container select {width: 100px;}
#container input:focus, #container select:focus {outline: none;}
#container .search_btn > button {height: 35px; padding: 0 20px; border-radius: 5px; box-sizing: border-box; background: #333; font-size: 15px; color: #fff;}

/* cont 스크립트 */
#container .fire_data.on {display: none;}

#container .traffic_data{display: none;}
#container .traffic_data.on {display: block;}

/* cont_fire */
table {width: 100%;}


/* 테이블 셋팅 */
table, th, td {height: 35px; box-sizing: border-box; border: 1px solid #333; text-align: center; line-height: 35px;}
th {background: #eee;}
td {font-size: 15px; background: #fff;}

/* cont_data */
#container .cont_data {height: 100%;}
#container .count {display: flex; align-items: center;}
#container .count  img {display: inline-block; width: 28px;}
#container .count  img:first-child {width: 22px;}

#container .count span {display: inline-block; width: 6px; height: 6px; margin-bottom: 2px; border-radius: 6px; border: 2px solid #555; background: #e3e3e3;}
#container .count span:nth-child(2) {margin-left: 5px;}
#container .count span:nth-child(4) {margin-right: 5px;}
#container .count span:nth-child(3) {background: #fff;}

#container .count h3 {margin-left: 10px; font-size: 18px;}

/* cont_data graph */
#container .graph {margin-top: 30px; width: 100%;}
#container .graph > img {display: block; width: 100%;}
/* 통계데이터 css 끝*/

/* 방호구역 css 시작 */
#container .download_list {display: flex; width: 100%; align-items: center;}
#container .download_list li:not(:last-child) {width: 120px;}
#container .download_list li > select {width: 100%;}
#container .download_list li:first-child {margin-right: auto;}

#container .download_btn > button {width: 100px; height: 35px; padding: 0 20px; margin-left: 15px; border-radius: 5px; box-sizing: border-box; background: #333; font-size: 15px; color: #fff;}

#container .area_data button {background: none; font-size: 15px;}


#container .area_popup {position: relative; width: 70%; margin: auto; padding: 50px; background: #eee;}
#container .area_popup h2 {font-weight: 600; margin-bottom: 20px;}
#container .close_btn {position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; background: url(../images/btn_pop_close.png) no-repeat center / 70%; cursor: pointer;}

#container .area_popup textarea {width: 100%; height: 100%; outline: none; resize: none; vertical-align: top}
#container .area_popup th, #container .area_popup td {padding: 8px 0;}
#container .area_popup .text_area {height: 100px; line-height: 100px;}


#container .area_popup .btn_wrap {margin-top: 30px; text-align: center;}
#container .area_popup button {padding: 5px 25px; border-radius: 5px; box-sizing: border-box; background: #333; font-size: 16px; color: #fff;}
#container .area_popup button:last-child {margin-left: 20px;}