@charset "utf-8";
@import url(setting.css);
/* ************************************************************************************************************************************************************
						《 공통 레이아웃 스타일 》
************************************************************************************************************************************************************ */

/* ============================== [ 레이아웃 리셋 Layout Reset ] ========================================================================================== */
/* Reset */
html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
abbr,address,big,cite,code,del,dfn,font,figure,figcaption,img,ins,q,s,samp,small,strike,sub,sup,tt,var,
b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {font:18px/1.2em 'Noto Sans KR',sans-serif;}
button,input,textarea {font:18px/1.2em 'Noto Sans KR',sans-serif;}
select {font:18px/1.2em 'Noto Sans KR',sans-serif;}
* {word-break:keep-all; word-wrap:break-word;}
::selection {color:#fff; background-color:#0071B7;}
.go_view {display:none; position:absolute; left:0; top:0; height:100%; width:100%;}
figure img {display:block; width:100%; height:auto;}
label {cursor:pointer;}

/* ============================== [ 팝업딤드 ] ========================================================================================== */
body.dim {overflow:hidden;}
body.dim:before {background-color:rgba(0, 0, 0, 0.6); content:""; position:fixed; left:0; top:0; height:100vh; width:100%; z-index:9990;}

/* ============================== [ 공통레이아웃 ] ========================================================================================== */
#wrap {display:flex; height:100vh;}

/* 버튼 */
.btn_wrap {display:flex;}
.btn_wrap.btn_100 .btn {flex:1;}
.btn_wrap .btn {padding:14px 0; line-height:1.389em; border-radius:8px; color:#fff; display:block; text-align:center; box-sizing:border-box;}
.btn_wrap .btn ~ .btn {margin-left:18px;}
.btn_wrap .btn.main_btn {background-color:#0071B7;}
.btn_wrap .btn.sub_btn {background-color:#218ECE;}
.btn_wrap .btn.disable {background-color:#B1B1B1;}
.btn_wrap .btn.line_btn {border:1px solid #218ECE; background-color:#fff; color:#218ece;}

/* input[type="text"] */
input.inpt_txt {height:65px; width:100%; box-sizing:border-box; background-color:#F8F8F9; border-radius:8px; padding:0 24px; font-size:24px; border:1px solid transparent; transition:.3s;}
input.inpt_txt:focus {border-color:#218ECE;}

/* input[type="checkbox"] */
input[type="checkbox"] {margin:0 auto; width:22px; height:22px; background:url(../images/ico_chk.svg) no-repeat center; background-size:100% ; cursor:pointer;}
input[type="checkbox"]:checked {background-image:url(../images/ico_chk_on.svg);}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {display:none;}

@media only screen and (max-width:768px) {
	input[type="text"].inpt_txt {height:34px; padding:0 16px; font-size:14px;}
	input[type="password"].inpt_txt {height:34px; padding:0 16px; font-size:14px;}
	input[type="checkbox"] {width:15px; height:15px;}
	.btn_wrap .btn { padding: 0px 0px ; font-size:16px; }
}


/* -------------------- #LNB ---------------------------------------- */
.lnb {width:250px; height:100vh; background-color:#434343; box-sizing:border-box; z-index:10;}
.lnb h1 a {display:block; margin:53px auto; width:124px; height:auto;}
.lnb h1 a img {width:100%; height:auto;}
/*.lnb .log_btn {display:none;}*/
.lnb .log_btn {margin-top: 100px; display: flex; justify-content: center;}

/* depth_01 */
.depth_01 > li > a {display:block; width:100%; padding:19px 25px 19px 23px; box-sizing:border-box; color:#fff; text-align:right; background-position:left 23px center; background-repeat:no-repeat; background-size:32px; transition:.3s;}
.depth_01 > li:nth-child(1) > a {background-image:url(../images/ico_home.svg);}
.depth_01 > li:nth-child(2) > a {background-image:url(../images/ico_monitor.svg);}
.depth_01 > li:nth-child(3) > a {background-image:url(../images/ico_alarm.svg);}
.depth_01 > li:nth-child(4) > a {background-image:url(../images/ico_set.svg);}
.depth_01 > li:nth-child(5) > a {background-image:url(../images/ico_etc.svg);}

/* depth_01 active */
.depth_01 > li.on > a {background-color:#E7E7E7; color:#434343;}
.depth_01 > li:nth-child(1).on > a {background-image:url(../images/ico_home_on.svg);}
.depth_01 > li:nth-child(2).on > a {background-image:url(../images/ico_monitor_on.svg);}
.depth_01 > li:nth-child(3).on > a {background-image:url(../images/ico_alarm_on.svg);}
.depth_01 > li:nth-child(4).on > a {background-image:url(../images/ico_set_on.svg);}
.depth_01 > li:nth-child(5).on > a {background-image:url(../images/ico_etc_on.svg);}

/* depth_02 */
.depth_02 {background-color:#E7E7E7; display:none;}

.depth_02 li a {display:block; width:100%; padding:19px 25px 19px 23px; box-sizing:border-box; color:#434343; text-align:right; transition:background-color .3s;}

/* depth_02 active */
.depth_02 li a:hover,
.depth_02 li.on a {background-color:#F8F8F9; font-weight:700;}

/* -------------------- #Contents ---------------------------------------- */
#contents {flex:1; height:100%; width:calc(100% - 250px);}

/* header */
#header { display: none}
#header {background-color:#fff; position:fixed; right:0; top:0; width:calc(100% - 250px); height:80px; box-sizing:border-box;}
#header .inner {padding:20px 40px 19px; display:flex; align-items:center; box-sizing:border-box; width:100%;}
.log_btn {display:flex; align-items:center; margin-left:auto;}
.log_btn a {display:block; border-radius:8px; border:1px solid #0071B7; color:#0071b7; box-sizing:border-box;}
.log_btn .lock {width:68px; height:41px; background:#F8F8F9 url(../images/ico_lock.svg) no-repeat center; background-size:20px auto; margin-right:10px;}
.log_btn .lock.on {background-image:url(../images/ico_lock_on.svg); background-color:#0071B7;}
.log_btn .logout {padding:7px 22px;}
.log_btn .logout span {display:block; padding-left:30px; background:url(../images/ico_logout.svg) no-repeat left center; background-size:20px auto; line-height:25px;}
#header .mo_wrap {display:none; width:100%; align-items:center; justify-content:space-between;}
#header .mo_wrap h1 a {width:72px; height:auto; display:block;}
#header .mo_wrap h1 a img {width:100%; height:auto;}
#header .mo_wrap .site_btn {width:40px; height:40px; background:url(../images/btn_site.svg) no-repeat center; background-size:100% auto; transition:.2s;}
#header .mo_wrap .site_btn.on {background-image:url(../images/btn_site_close.svg);}

/* 20240120 수정 박선혁 전체 padding:40px->20px 변경*/
/* content */
/*.content {background-color:#F8F8F9; height:calc(100% - 80px); margin-top:80px; overflow-y:auto; overflow-x:hidden; padding:40px; box-sizing:border-box;}*/
.content {background-color:#F8F8F9; height:100%; overflow-y:auto; overflow-x:hidden; padding:20px; box-sizing:border-box;}

@media only screen and (max-width:1500px) {
	/* content */
	.content {padding:30px}
}
@media only screen and (max-width:768px) {
	/* lnb */
	.lnb {position:fixed; right:-100%; top:80px; height:calc(100vh - 80px); transition:.3s; padding-bottom:60px;}
	.lnb.on {right:0;}
	.lnb h1 {display:none;}
	.depth_01 > li > a,
	.depth_02 li a {padding:16px 23px;}
	.lnb .log_btn {display:flex; position:absolute; left:50%; bottom:30px; transform: translateX(-50%);}
	.lnb .log_btn .logout {background-color:#f8f8f9; padding:4px 18px;}

	/* content */
	.content {background-color:#F8F8F9; height:calc(100% - 80px); margin-top:80px; overflow-y:auto; overflow-x:hidden; padding:40px; box-sizing:border-box;}
	.content {padding:20px;}

	/* header */
	#header { display: block; background-color:#434343; width:100%;}
	#header .inner {padding:0 10px 0 20px; height:100%;}
	#header .log_btn {display:none;}
	#header .mo_wrap {display:flex;}
}

/* ============================== [ 로그인 ] ========================================================================================== */
.login_wrap {background-color:#F8F8F9;}
.login_box {background-color:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); box-shadow:3px 3px 20px 10px rgba(0, 0, 0, .04); border-radius:20px; box-sizing:border-box; padding:40px; width:calc(100% - 72px); max-width:657px;}
.login_box .logo {width:168px; height:auto; margin:0 auto;}
.login_box .logo img {display:block; width:100%; height:auto;}
.login_box .inpt_wrap {margin-top:40px;}
.login_box .tit {line-height:1.389em; color:#434343; margin-bottom:8px;}
.login_box .pwd_wrap {position:relative;}
.login_box .pwd_wrap input {padding-right:60px;}
.login_box .pwd_wrap .ico_hidden {width:32px; height:32px; position:absolute; right:24px; top:50%; transform:translateY(-50%); background:url(../images/ico_hide.svg) no-repeat 0 0; background-size:100% auto;}
.login_box .option {margin-top:12px;}
.login_box .option label {display:flex; align-items:center;}
.login_box .option label input {margin:3px 0 0 3px;}
.login_box input[type="text"].inpt_txt {padding-left:24px;}
.login_box .option label span {line-height:1.667em; margin-left:12px;}
.login_box .option .btn_wrap {margin-top:40px; justify-content:center;}
.login_box .option .btn_wrap .btn {width:171px;}

.join_box {background-color:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); box-shadow:3px 3px 20px 10px rgba(0, 0, 0, .04); border-radius:20px; box-sizing:border-box; padding:15px; width:calc(100% - 52px); max-width:657px;}
.join_box .logo {width:168px; height:auto; margin:0 auto;}
.join_box .logo img {display:block; width:100%; height:auto;}
.join_box .inpt_wrap {margin-top:25px;}
.join_box .tit {line-height:1.389em; color:#434343; margin-bottom:8px;}
.join_box .pwd_wrap {position:relative;}
.join_box .pwd_wrap input {padding-right:60px;}
.join_box .pwd_wrap .ico_hidden {width:32px; height:32px; position:absolute; right:24px; top:50%; transform:translateY(-50%); background:url(../images/ico_hide.svg) no-repeat 0 0; background-size:100% auto;}
.join_box .option {margin-top:12px;}
.join_box .option label {display:flex; align-items:center;}
.join_box .option label input {margin:3px 0 0 3px;}
.join_box input[type="text"].inpt_txt {padding-left:24px;}
.join_box .option label span {line-height:1.667em; margin-left:12px;}
.join_box .option .btn_wrap {margin-top:40px; justify-content:center;}
.join_box .option .btn_wrap .btn {width:171px;}


.login_util { margin-top:40px;}
.login_util ul {display:flex; justify-content:center;}
.login_util ul li ~ li {padding-left:19px; margin-left:19px; position:relative;}
.login_util ul li ~ li::after {display:block; content:''; width:1px; height:14px; background-color:#434343; position:absolute; left:0; top:5px;}
.login_util ul li a {font-size:14px;}

@media only screen and (max-width:768px) {
	.login_box {box-shadow:none; padding:0; background-color:transparent;}
	.login_box .logo {margin-bottom:80px;}
	.login_box .inpt_wrap {margin:0;}
	.login_box .inpt_wrap ~ .inpt_wrap {margin-top:12px;}
	.login_box input[type="text"].inpt_txt,
	.login_box .inpt_txt {background-color:#fff; height:48px; font-size:16px;}
	.login_box .pwd_wrap .ico_hidden {width:18px; height:18px;}
	.login_box .tit {display:none;}
	.login_box .option .chk_wrap {display:flex; flex-direction:column-reverse;}
	.login_box .option .btn_wrap {margin:0;}
	.login_box .option .btn_wrap .btn {width:100%; height:48px; font-size:16px; padding:12px 0;}
	.login_box .option label {margin-top:11px;}
	.login_box .option label span {font-size:15px; line-height:1.333em; margin-left:8px;}
	.login_util {display:block;}
}
@media only screen and (max-width:360px) {
	.login_box {width:calc(100% - 40px);}
	.login_util ul li ~ li {padding-left:10px; margin-left:10px;}
}

/* ============================== [ 홈 ] ========================================================================================== */
.dvc_wrap {display:flex; flex-wrap:wrap; margin:-52px 0 0 -40px;}
.dvc_wrap .item {padding:40px; height:100%; border-radius:20px; margin:52px 0 0 40px; width:calc(33.33% - 40px); box-shadow:3px 3px 20px 10px rgba(0, 0, 0, .04); background-color:#fff; box-sizing:border-box;}
.dvc_wrap .item .tit_wrap {display:flex; justify-content:space-between; margin-bottom:32px;}
.dvc_wrap .item .tit_wrap .name {flex:1; font-size:28px; font-weight:700;}
.dvc_wrap .set_pop {margin-top:4px; display:block; width:30px; height:30px; background:url(../images/ico_more.svg) no-repeat 0 0; background-size:100% auto;}
.dvc_wrap .state_li {margin-bottom:20px;}
.dvc_wrap .state_li li {border-radius:40px; height:41px; background-color:#f8f8f9; display:flex; justify-content:space-between; align-items:center; padding-right:20px; box-sizing:border-box;}
.dvc_wrap .state_li li ~ li {margin-top:8px;}
.dvc_wrap .state_li li span {display:block; min-width:105px; text-align:center; padding:11px 10px 10px; border-radius:40px; background-color:#E7E7E7; line-height:20px;}
.dvc_wrap .state_li li strong em:first-child {font-weight:700;}
.dvc_wrap .state_msg {margin-bottom:20px; border:1px solid #218ECE; background-color:#F8F8F9; padding:8px; border-radius:40px; box-sizing:border-box; text-align:center;}
.dvc_wrap .state_msg p {color:#218ECE;}
.dvc_wrap .date_wrap {display:flex; align-items:center; justify-content:flex-end;}
.dvc_wrap .date_wrap .txt {padding-left:32px; background:url(../images/ico_clock.svg) no-repeat left top 1px; background-size:24px; color:#b1b1b1; line-height:1.389em;}
.dvc_wrap .date_wrap .date {padding-left:14px; margin-left:12px; position:relative; color:#0071b7; font-weight:600; line-height:1.389em;}
.dvc_wrap .date_wrap .date::after {display:block; content:''; width:2px; height:20px; position:absolute; left:0; top:4px; background-color:#D9D9D9;}
.dvc_wrap .btn_wrap {margin-top:32px;}

/* waring */
.dvc_wrap .item.warning .tit_wrap .name,
.dvc_wrap .state_li li.warning,
.dvc_wrap .item.warning .state_msg p {color:#D32F2F;}
.dvc_wrap .item.warning .state_msg {border-color:#D32F2F; background-color:rgba(211, 47, 47, .12);}
.dvc_wrap .item.warning .date_wrap .date {color:#D32F2F;}

@media only screen and (max-width:1500px) {
	.dvc_wrap {margin:-40px 0 0 -20px;}
	.dvc_wrap .item {padding:30px; width:calc(33.33% - 20px); margin:40px 0 0 20px;}
}
@media only screen and (max-width:1350px) {
	.dvc_wrap .item {width:calc(50% - 20px);}
}
@media only screen and (max-width:1024px) {
	.dvc_wrap {margin:-20px 0 0 0;}
	.dvc_wrap .item {width:100%; margin:20px 0 0 0;}
	.dvc_wrap .item .tit_wrap .name {font-size:22px;}
	.dvc_wrap .set_pop {margin-top:0;}
	.dvc_wrap .state_li {margin-bottom:12px;}
	.dvc_wrap .state_msg {margin-bottom:12px;}
	.dvc_wrap .state_msg p {font-size:16px;}
	.dvc_wrap .date_wrap .txt {font-size:16px; background-size:21px;}
	.dvc_wrap .date_wrap .date {font-size:16px;}
}
@media only screen and (max-width:768px) {
	.dvc_wrap .btn_wrap {flex-direction:column;}
	.btn_wrap .btn ~ .btn {margin:10px 0 0 0;}
	.btn_wrap .btn_command {margin:10px 0 0 0;}
}
@media only screen and (max-width:400px) {
	.dvc_wrap .item {padding:20px;}
}

/* ============================== [ 홈:장치세팅팝업 ] ========================================================================================== */
.popup {display:none; position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); z-index:9999; width:calc(100% - 40px); max-width:657px; max-height:80vh;}
.popup .inner {background-color:#fff; border-radius:20px; box-sizing:border-box; padding:80px 40px 40px; height:100%;}
.btn_close {position:absolute; right:40px; top:40px; display:block; width:40px; height:40px; background:url(../images/ico_close.svg) no-repeat 0 0; background-size:40px;}
.popup .pop_wrap {padding-right:5px; height:100%; overflow-y:auto; max-height:calc(80vh - 120px);}
.pop_wrap .cont ~ .cont {margin-top:40px;}
.pop_wrap .pop_tit {font-size:24px; font-weight:600; margin-bottom:12px;}
.data_list .tl {text-align:left;}
.data_list table tr th {background-color:#F8F8F9; color:#218ECE; font-size:16px; height:58px; padding:0 20px;}
.data_list tr td {padding:6px 0;}
.data_list tr:nth-child(1) td {padding-top:16px;}
.data_list tr td:nth-child(1) {text-align:center;}
.data_list input[type="text"].inpt_txt {width:calc(100% - 16px); height:50px; font-size:18px;}
.data_list select {background-image:url(../images/arr_down_pop.svg); background-repeat:no-repeat; background-position:right 12px center; background-color:#f8f8f9; border-radius:8px; height:50px; width:100%; box-sizing:border-box; padding:0 40px 0 24px;}
.pop_wrap .btn_wrap {margin-top:40px; justify-content:center;}
.pop_wrap .btn_wrap .btn {width:171px;}

@media only screen and (max-width:768px) {
	.btn_close {display:none;}
	.popup .inner {padding:24px 16px;}
	.popup .pop_wrap {max-height:calc(80vh - 48px);}
	.pop_wrap .cont ~ .cont {margin-top:32px;}
	.pop_wrap .pop_tit {font-size:16px; margin-bottom:8px;}
	.data_list table tr th {font-size:14px; height:39px; padding:0; text-align:center !important;}
	.data_list tr td {padding:3px 0;}
	.data_list tr:nth-child(1) td {padding-top:8px;}
	.data_list input[type="text"].inpt_txt {width:calc(100% - 4px); height:34px; font-size:14px;}
	.data_list select {background-position:right 7px center; height:34px; padding:0 30px 0 16px; font-size:14px;}
	.pop_wrap .btn_wrap {margin-top:36px;}
	.pop_wrap .btn_wrap .btn {width:149px; height:44px; padding:10px 0 9px;}

}

/* ============================== [ sub ] ========================================================================================== */
.tit_area{position:relative;margin-bottom:24px;}
.tit_area h2{font-size:30px;font-weight:700;}
.tit_area .btn_wrap{position:absolute;top:-6px;right:0;}
.text_center{text-align:center;}
.img_wrap img{max-width:100%;}

/* ============================== [ alarm ] ========================================================================================== */
/* -------------------- alarm none ---------------------------------------- */
.alarm_none_conbox{padding-top:235px;}
.alarm_none_conbox p{margin-top:24px;font-size:30px;font-weight:700;line-height:1.3em;color:#b1b1b1;}

@media only screen and (max-width:1024px) {
	.alarm_none_conbox{padding-top:160px;}
	.alarm_none_conbox .img_wrap{width:80%;max-width:120px;margin:0 auto;}
	.alarm_none_conbox p{font-size:18px;}
}


/* -------------------- alarm list ---------------------------------------- */
.bd_wrap{padding:40px;background-color:#fff;-webkit-box-shadow:3px 3px 20px 10px rgba(0, 0, 0, 0.04);border-radius:20px;box-shadow:3px 3px 20px 10px rgba(0, 0, 0, 0.04);}

.btn_wrap .btn.btn_add{padding:14px 26px;padding-left:59px;border-radius:8px;background:#0071B7 url('../images/ico_alarm_add.svg') no-repeat 26px center;color:#fff;}
.btn_wrap .btn.btn_del{padding:9px 36px 8px;border-radius:8px;background-color:#434343;color:#fff;}
.tb_type1 .btn_wrap.command_wrap {margin-right:0; justify-content:flex-start;}
.btn_wrap .btn_command {width:80px; background-color:#0071B7; padding:9px 0;}

.form_table th, .form_table td{padding:18px 16px;}
.form_table th{background-color:#f8f8f9;color:#218ece;text-align:left;}
.form_table td{border-bottom:1px solid #E7E7E7;vertical-align:middle; line-height:1.389em;}
.form_table thead th:first-child,
.form_table tbody td:first-child{text-align:center;}
.tb_type1 td{padding:10px 16px 9px;}
.tb_type2 td {padding:18px 16px 17px;}
.tb_type1 .btn_wrap{margin-right:12px; justify-content:flex-end;}

.btn_switch{position:relative;}
.btn_switch label{display:inline-block;width:60px;height:30px;vertical-align:middle;}
.btn_switch input[type="checkbox"]{position:relative;width:100%;height:100%;border-radius:30px;background:#b1b1b1;-webkit-appearance:none;}
.btn_switch input[type="checkbox"]:before{display:block;content:'';position:absolute;top:6px;left:8px;width:18px;height:18px;border-radius:50%;background-color:#fff;cursor:pointer;-webkit-transition:0.3s;transition:0.3s;}
.btn_switch input[type="checkbox"]:checked{background-color:#218ECE;}
.btn_switch input[type="checkbox"]:checked:before{left:34px;}

.command_inpt {width:79px; height:42px; border:1px solid #C4C4C4; border-radius:8px; padding:0 8px; box-sizing:border-box; font-size:18px;}
.caution_txt {margin-left:258px; margin-top:24px; line-height:1.3em;}

@media only screen and (max-width:1500px) {
	.bd_wrap {padding:30px;}
	.tb_type1 .btn_wrap {margin-right:0;}
	.btn_wrap .btn.btn_del{padding:8px 30px;}
	.form_table th, .form_table td{padding:18px 15px;}
}

@media only screen and (max-width:1350px) {
	.of_x{overflow-x:auto;}
	.of_x table{width:auto;min-width:1200px;}
	.caution_txt {margin-left:28%;}
}

@media only screen and (max-width:1024px) {
	.tit_area h2{font-size:22px;}

	.btn_wrap .btn.btn_add{padding:10px 16px;padding-left:36px;background-position:10px center;background-size:20px;}

	.bd_wrap{padding:20px; border-radius:10px;}

	.form_table th, .form_table td{padding:12px 15px;font-size:16px;}

	.caution_txt {margin-left:0; font-size:14px; margin-top:10px;}
}

@media only screen and (max-width:768px) {
	.tit_area .btn_wrap{top:0;}
	.btn_wrap .btn.btn_add{width:29px;height:29px;padding:0;background:url('../images/ico_alarm_add_m.svg') no-repeat center center / cover;}
	.btn_wrap .btn.btn_add span{display:none;}
	.of_x table{width:auto;min-width:768px;}
	.form_table th, .form_table td{padding:12px 10px;}
	.btn_switch{padding-top:4px;}
	.btn_switch label{width:48px;height:24px;}
	.btn_switch input[type="checkbox"]:before{top:5px;width:14px;height:14px;}
	.btn_switch input[type="checkbox"]:checked:before{left:26px;}
	.btn_wrap .btn.btn_del{padding:8px 16px;font-size:14px;}
	.caution_txt {font-size:13px;}
}

/* -------------------- alarm set ---------------------------------------- */
.form_caption{display:block;font-size:28px;font-weight:600;}
.form_caption + .form_conbox{margin-top:24px;}

.required{color:#D32F2F;}

.form_conbox .item{display:flex;align-items:center;}
.form_conbox .item + .item{margin-top:24px;}
.form_conbox .item .form_tit{width:258px;font-size:24px;font-weight:600;}
.form_conbox .item .form_select,
.form_conbox .item .form_input,
.form_conbox .item .form_set{width:calc(100% - 258px);}

.form_select select{width:100%;height:65px;padding:0 60px 0 24px;background:#f8f8f9 url('../images/ico_select_arrow.svg') no-repeat right 24px center;border-radius:8px;box-sizing:border-box; font-size:24px;}

.form_set.n2 .inpt_txt{width:calc((100% - 48px)/2);max-width:210px;}
.form_set.n2 .bar{display:inline-block;margin:-10px 12px 0;font-size:24px;vertical-align:middle;}

.form_btn_wrap.btn_wrap{justify-content:flex-end;margin-top:24px;}
.form_btn_wrap.btn_wrap .btn{padding-left:50px;padding-right:50px;}

@media only screen and (max-width:1350px) {
	.form_conbox .item .form_tit{width:28%;}
	.form_conbox .item .form_select,
	.form_conbox .item .form_input,
	.form_conbox .item .form_set{width:72%;}
}

@media only screen and (max-width:1024px) {
	.form_caption{font-size:18px;}
	.form_caption + .form_conbox{margin-top:18px;}

	.form_conbox .item{flex-direction:column;}
	.form_conbox .item + .item{margin-top:12px;}
	.form_conbox .item .form_tit{width:100%;font-size:16px;}
	.form_conbox .item .form_select,
	.form_conbox .item .form_input,
	.form_conbox .item .form_set{width:100%;margin-top:8px;}
	.form_input .inpt_txt {height:38px !important; padding:8px 12px !important;font-size:16px !important;}
	.form_select select{height:38px;padding:8px 30px 8px 12px;font-size:16px;background-size:12px;background-position:right 12px center;}
	.form_set.n2 .inpt_txt{width:calc((100% - 44px)/2);height:38px;padding:8px 24px;font-size:16px;}
	.form_set.n2 .bar{margin-left:10px;margin-right:10px;}

	.form_btn_wrap.btn_wrap{margin-top:56px;}
	.form_btn_wrap.btn_wrap .btn{width:150px;padding:8px 0;}
	.form_btn_wrap.btn_wrap .btn ~ .btn{margin:0 0 0 14px;}
}

@media only screen and (max-width:768px) {
	.form_set.n2 .inpt_txt{max-width:unset;}
	.form_caption + .form_conbox{margin-top:12px;}
	.form_btn_wrap.btn_wrap .btn{width:calc((100% - 14px)/2);}
}


/* ============================== [ 표/그래프 조회 ] ========================================================================================== */
.tb_search {display:flex; align-items:center; padding:18px 34px; margin-bottom:24px; background-color:#fff; border-radius:20px; box-shadow:3px 3px 20px rgba(0, 0, 0, .04); box-sizing:border-box;}
.tb_search .search_wrap { width:90%;}
.tb_search .form_conbox {display:flex;}
.tb_search .form_conbox .item + .item {margin-top:0; margin-left:5%;}
/*.tb_search .form_conbox .item:nth-child(1) {width:54%;}*/
/*.tb_search .form_conbox .item:nth-child(2) {width:41%;}*/

.tb_search .form_conbox .item:nth-child(1) {width:50%;}
.tb_search .form_conbox .item:nth-child(2) {width:74%;}
.tb_search .form_conbox .item:nth-child(3) {width:50%;}
.tb_search .form_conbox .item:nth-child(4) {width:50%;}


.tb_search .form_conbox .item .form_tit {width:70px;}
.tb_search .form_conbox .item .form_select {width:calc(100% - 70px);}
.tb_search .form_conbox .item .form_input {width:calc(100% - 70px);}
.tb_search .btn_wrap {margin-left:auto;}
.tb_search .btn_wrap .btn ~ .btn {margin-left:13px; margin-top:0 !important;}
.tb_search .btn_wrap .btn_search {width:141px;}
.tb_search .btn_wrap .btn_search span {font-size:24px; padding-left:35px; background:url(../images/ico_search.svg) no-repeat left center;}
.tb_search .btn_wrap .btn_down {width:257px;}
.tb_search .btn_wrap .btn_down span {font-size:24px; padding-left:47px; background:url(../images/ico_down.svg) no-repeat left center;}


/* 20240113 수정 박선혁 대쉬보드 -> 그래프에서 height 800px -> 530px 로 수정*/
/* 20240120 수정 박선혁 대쉬보드 -> 그래프에서 height 530px -> 650px 로 수정 , 버튼여백 줄이면서 그래프 늘리기*/
.graph_wrap {padding:20px;}
/*.graph_area {overflow-y:auto;}*/
/*.graph_area {overflow-y:auto; width: 100%; height: 800px; max-width:100%; }*/
.graph_area {overflow-y:auto; width: 100%; height: 650px; max-width:100%; }
.graph_area img {width:1112px; height:auto; margin:10px auto; display:block;}

@media only screen and (max-width:1880px) {
	.tb_search .search_wrap {width:90%;}
	.tb_search .form_conbox .item + .item {margin-left:3%;}
	/*.tb_search .form_conbox .item:nth-child(1) {width:50%;}*/
	/*.tb_search .form_conbox .item:nth-child(2) {width:45%;}*/
	.tb_search .form_conbox .item:nth-child(1) {width:50%;}
	.tb_search .form_conbox .item:nth-child(2) {width:74%;}
	.tb_search .form_conbox .item:nth-child(3) {width:50%;}
	.tb_search .form_conbox .item:nth-child(4) {width:50%;}

	.tb_search .form_conbox .item .form_tit {width:60px;}
	.tb_search .form_conbox .item .form_select {width:calc(100% - 60px);}
	.tb_search .form_conbox .item .form_input {width:calc(100% - 60px);}
}
@media only screen and (max-width:1650px) {
	.tb_search {display:block;}
	.tb_search .search_wrap {width:100%;}
	.tb_search .form_conbox .item:nth-child(2) {width:47%;}
	.tb_search .btn_wrap {margin:16px 0 0 0; justify-content:flex-end;}
}
@media only screen and (max-width:1350px) {
	.tb_search .form_conbox {display:block;}
	.tb_search .form_conbox .item:nth-child(1),
	.tb_search .form_conbox .item:nth-child(2),
	.tb_search .form_conbox .item:nth-child(3),
	.tb_search .form_conbox .item:nth-child(4) {width:100%;}
	.tb_search .form_conbox .item + .item {margin:12px 0 0 0;}
}
@media only screen and (max-width:1024px){
	.tb_search {padding:20px; margin-bottom:20px; border-radius:10px;}
	.tb_search .form_conbox .item {flex-direction:row;}
	.tb_search .form_conbox .item .form_tit {width:54px;}
	.tb_search .form_conbox .item .form_select {width:calc(100% - 54px); margin-top:0;}
	.tb_search .form_conbox .item .form_input {width:calc(100% - 54px); margin-top:0;}
	.tb_search .btn_wrap .btn {padding:10px 0;}
	.tb_search .btn_wrap .btn span {font-size:18px;}
	.tb_search .btn_wrap .btn_search {width:123px;}
	.tb_search .btn_wrap .btn_search span {background-size:15px; padding-left:27px;}
	.tb_search .btn_wrap .btn_down {width:185px;}
	.tb_search .btn_wrap .btn_down span {background-size:12px auto; padding-left:24px;}
	.tb_search .btn_wrap .btn ~ .btn {margin-left:8px;}
	.graph_area img {width:600px;}
}

/* ============================== [ 표/그래프 보기 ] ========================================================================================== */
.view_wrap {border-radius:24px 24px 20px 20px; overflow:hidden; background-color:#fff;}
.view_wrap .tit_area {margin-bottom:0; background-color:#0071B7; text-align:center; padding:24px 20px;}
.view_wrap .tit_area p {font-size:28px; color:#fff;}
.view_wrap .tit_area p span {font-weight:700;}
.view_wrap .cont_area {padding:32px 60px 44px;}
.view_wrap .cont_area .graph_wrap {padding:0;}
.view_wrap table th {padding:0 20px; border-left:1px solid #b1b1b1; box-sizing:border-box; height:80px; font-size:24px; font-weight:700; text-align:center; background-color:#F8F8F9;}
.view_wrap table th:nth-child(1) {text-align:center; border:none;}
.view_wrap table td {padding:0 20px; font-size:24px; border-left:1px solid #b1b1b1; box-sizing:border-box; height:80px; text-align:center; background-color:#fff;}
.view_wrap table td:nth-child(1) {text-align:center; border:none; color:#0071B7; font-weight:600;}
.view_wrap table tr:nth-child(2n) td {background-color:rgba(33, 142, 206, .08);}

.group_alarm_list { margin: 20px -80px 10px 80px }

@media only screen and (max-width:1350px) {
	.view_wrap .cont_area {padding:30px;}
	.view_wrap .of_x table {min-width:1100px;}
}
@media only screen and (max-width:1024px) {
	.view_wrap {border-radius:20px;}
	.view_wrap .tit_area {padding:20px;}
	.view_wrap .tit_area p {font-size:20px;}
	.view_wrap .of_x table {min-width:900px;}
	.view_wrap .cont_area {padding:20px;}
	.view_wrap table th {font-size:16px; height:54px;}
	.view_wrap table td {font-size:16px; height:54px;}
}
@media only screen and (max-width:768px){
	.view_wrap .tit_area {padding:20px 12px;}
	.view_wrap .tit_area p {font-size:18px;}
}
@media only screen and (max-width:540px) {
	.group_alarm_list { margin: 0;}
	.group_alarm_list of_x{overflow-x:auto;}
	.group_alarm_list of_x table{width:auto;min-width:1200px;}
	.view_wrap .of_x table {min-width:500px;}
}