@charset "UTF-8";

/* login_area */
.login_area{width:665px; height:535px; position:absolute; top:0; bottom:0; left:0; right:0; margin:10% auto auto;}
.login_area h1{padding:0; font-size:46px; color:#fff; line-height:46px; font-weight: bold;}
.login_area h1 img{width: 105px; padding-right: 15px; filter: drop-shadow(2px 2px 2px #fff);}
.login_area h1 span.logo{float: left;}
.login_area h1 span span{display:block; text-shadow: 4px 4px 2px #252525; text-align: center;}
.login_area h1 span span.title{color: #fff; padding-bottom: 10px; font-size: 53px;}
.login_area h1 span span.title em{font-weight: bold; color: #4ad2a1;}
.login_area .in_box{margin:80px 50px 0 50px; padding: 40px 80px 60px; overflow: hidden; background: rgba(0,0,0,0.8); text-shadow: 1px 1px 2px #000000; box-shadow: inset 0px 0px 20px 0px #3b5f77;}
.login_area .in_box dl dt{font-size:17px; color:#fff;}
.login_area .in_box dl dd{margin:15px 0;}
.login_area .in_box dl dd ul li{padding:10px 0px 10px 0px; position:relative; border-radius:0; /*box-shadow:inset 0 3px 5px rgba(0, 0, 0, .125);*/}

.login_area .in_box dl dd ul li label{height: 30px; line-height: 30px; font-size: 20px; font-weight: bold; color: #93e1ff;}
.login_area .in_box dl dd ul li input{width:100%; color:#93e1ff; font-size:16px; line-height:38px; outline:0; padding:0 15px; height:38px; font-weight: bold; box-sizing: border-box; border: none; border-radius: 5px; background: rgba(255,255,255,0.15); box-shadow: -2px 2px 3px 0px #000 inset;}
.login_area .in_box dl dd ul li input:focus{border: 1px solid #93e1ff;}
.login_area .fancy-checkbox{font-size:15px; color:#93e1ff;}
.login_area .fancy-checkbox input{background:#233245; border:1px solid #93e1ff;}
.login_area .btn_login{display:block; background: rgba(0,173,255,0.15); height:30px; line-height:29px; font-size:22px; color:#93e1ff; text-align:center; font-weight:normal; border-radius:7px; /* margin:15px 0 0 0; */ padding:6px 10px; border: 1px solid #93e1ff; width: 30%; float: right;}
.login_area .btn_login:hover{background: #4f7382; color: #fff;}
.login_area .fancy-checkbox input[type="checkbox"] {display:none;}
.login_area .fancy-checkbox input[type="checkbox"] + span:before {display: inline-block; vertical-align: middle; position: relative; bottom: 1px; width: 14px; height: 14px; margin-right: 5px; content: ""; border: 1px solid #93e1ff; border-radius: 2px;}
.login_area .fancy-checkbox input[type="checkbox"]:checked + span:before {font-family: 'Font Awesome\ 5 Free'; font-weight: 900; content:'\f00c'; font-size: 12px; color: #003330; text-align: center; line-height: 16px; background: #85fff7; border: 1px solid #5897fb; text-shadow: none;}

/* popup_wrap */
.popup_wrap{position: absolute; left:0; right:0; top:0; bottom:0; margin:auto; background:#fff; border:1px solid #687e92; z-index: 200;}
.popup_wrap .title{
	position: relative; 
	line-height: 48px;
	background:#3b4651; 
	background: -moz-linear-gradient(left, #3b4651 0%, #485765 90%, #536576 100%);
	background: -webkit-linear-gradient(left, #3b4651 0%, #485765 90%, #536576 100%);
	background: linear-gradient(to left, #3b4651 0%, #485765 90%, #536576 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b4651', endColorstr='#536576',GradientType=0 );
}
.popup_wrap .title h2{color:#fff; font-size:22px; font-weight: bold; padding-left:15px;}
.popup_wrap .title .btn_right{position: absolute; right:10px; top:0;line-height: 54px;}
.popup_wrap .title .btn_right>a{margin:0 5px;}
.popup_wrap .title .btn_right>.alarm_go>i{color:#ffc0c2;}
.popup_wrap .title .btn_right>a>i{font-size:18px;}
.popup_wrap .title .btn_right .pop_close>i{font-size:24px;}
.popup_wrap .btn_list{padding:15px 0 0 0; text-align: center;}
.popup_wrap .btn_list .btn_style{display: inline-block;background: #a0a8b1;font-size: 16px;color: #fff;text-align: center;font-weight: bold;border-radius: 0px;padding:7px 23px;border: none; margin:0 3px; cursor: pointer; outline: none;}
.popup_wrap .btn_list .btn_style.blue{background: #6285ab;}
.popup_wrap .btn_list .btn_style.gray{background: #8b96a1;}
.popup_wrap .in{padding:15px;}

/* in_cont */
.in_cont{position: relative; padding: 5px; box-sizing: border-box; height: 100%;}

/* dashboard_layout */
.dashboard_layout{height: auto; overflow: hidden; height: 100%;}
.dashboard_layout>li.top{height: 8%; box-sizing: border-box;}
.dashboard_layout>li.bottom{height: 92%; box-sizing: border-box;}
.dashboard_layout>li>ul{height: 100%; overflow: hidden;}
.dashboard_layout>li>ul>li{height: 100%; float: left; box-sizing: border-box; padding-right: 5px; padding-top: 5px;}
.dashboard_layout>li:first-child>ul>li{padding-top: 0;}
.dashboard_layout>li>ul>li:last-child{padding-right: 0;}
.dashboard_layout>li>ul>li>div{height: 100%; border-radius: 5px; box-shadow: inset 0px 0px 5px 0px #7be4ff; border: 1px solid #80d0ff; box-sizing: border-box; overflow: hidden;
	background: rgb(6,9,14);
	background: -moz-linear-gradient(180deg, rgba(6,9,14,0.4) 0%, rgba(0,138,255,0.2) 100%);
	background: -webkit-linear-gradient(180deg, rgba(6,9,14,0.4) 0%, rgba(0,138,255,0.2) 100%);
	background: linear-gradient(180deg, rgba(6,9,14,0.4) 0%, rgba(0,138,255,0.2) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#06090e",endColorstr="#008aff",GradientType=1);
}
.dashboard_layout>li.bottom>ul>li{width: 34%; height: 23%; padding-right: 0;}
.dashboard_layout>li.bottom>ul>li:nth-child(1){width: 66%; height: 100%; padding-right: 5px;}
.dashboard_layout>li.bottom>ul>li:nth-child(2){height: 42%;}
.dashboard_layout>li.bottom>ul>li:nth-child(4){height: 35%;}
.dashboard_layout>li.bottom>ul>li>div{height: 100%; border-radius: 5px; box-shadow: inset 0px 0px 5px 0px #7be4ff; border: 1px solid #80d0ff; box-sizing: border-box;
	background: rgb(0,0,70);
	background: -moz-linear-gradient(90deg, rgba(0,0,70,0.4) 0%, rgba(28,181,224,0.4) 100%);
	background: -webkit-linear-gradient(90deg, rgba(0,0,70,0.4) 0%, rgba(28,181,224,0.4) 100%);
	background: linear-gradient(90deg, rgba(0,0,70,0.4) 0%, rgba(28,181,224,0.4) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000046",endColorstr="#1cb5e0",GradientType=1);
}

.dashboard_layout .top .data_box{width: 100%;}
.dashboard_layout .top .data_box>div{padding: 5px 0;}
.dashboard_layout .top .data_box>div>dl{float: left; padding: 3px 5px; box-sizing: border-box; border-right: 1px solid #86bad8; width: 7.69%; height: 100%;}
.dashboard_layout .top .data_box>div dl>dt{font-size: 16px; color: #fff; text-shadow: 2px 2px 2px black; letter-spacing: 0.5px;}
.dashboard_layout .top .data_box>div dl>dt>img{width: 22px; position: relative; top: -2px;}
.dashboard_layout .top .data_box>div dl>dd{color: #fff; overflow: hidden; text-align: right; padding: 4px 0;}
.dashboard_layout .top .data_box>div dl>dd>span{font-size: 21px; font-weight: bold; color: #7be4ff; text-shadow: 2px 2px 2px black;}
.dashboard_layout .top .data_box>div dl:nth-child(1)>dd>span{color: #92f1f8;}
.dashboard_layout .top .data_box>div dl:nth-child(2)>dd>span{color: #77d5ff;}
.dashboard_layout .top .data_box>div dl:nth-child(3)>dd>span{color: #5da6c5;}
.dashboard_layout .top .data_box>div dl:nth-child(4)>dd>span{color: #76f3cc;}
.dashboard_layout .top .data_box>div dl:nth-child(5)>dd>span{color: #50b6a3;}
.dashboard_layout .top .data_box>div dl:nth-child(6)>dd>span{color: #f8d979;}
.dashboard_layout .top .data_box>div dl:nth-child(7)>dd>span{color: #c2b873;}
.dashboard_layout .top .data_box>div dl:nth-child(8)>dd>span{color: #a4b6fd;}
.dashboard_layout .top .data_box>div dl:nth-child(9)>dd>span{color: #7192d0;}
.dashboard_layout .top .data_box>div dl:nth-child(10)>dd>span{color: #e7c5e7;}
.dashboard_layout .top .data_box>div dl:nth-child(11)>dd>span{color: #ffc282;}
.dashboard_layout .top .data_box>div dl:nth-child(12)>dd>span{color: #ffa3a3;}
.dashboard_layout .top .data_box>div dl:nth-child(13)>dd>span{color: #cf7979;}
.dashboard_layout .top .data_box>div dl>dd>em{font-size: 15px; text-shadow: 1px 1px 1px black; padding-left: 2px;}

.dashboard_layout .bottom .module_box{height: 100%;}
.dashboard_layout .bottom .module_box>div{box-shadow: inset 0px 0px 5px 0px #ffffff; border: 1px solid #7ad4ff;}
.dashboard_layout .bottom .module_box>div>h5{height: 43px; font-size: 15px; padding: 10px 15px; color: #fff; box-sizing: border-box; border-bottom: 1px solid #80d0ff; position: relative; background: rgba(142, 213, 255, 0.35);}
.dashboard_layout .bottom .module_box>div>h5>span{color: #ffc800; text-shadow: 1px 1px 1px black; float: right;}
.dashboard_layout .bottom .module_box>div>div{height: 95%; box-sizing: border-box; position: relative;}
.dashboard_layout .bottom .module_box .legend{position: absolute; right: 10px; top: 10px;
	/* background: rgb(158,158,158);
	background: -moz-linear-gradient(0deg, rgba(158,158,158,1) 0%, rgba(231,218,117,1) 10%, rgba(255,128,0,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(158,158,158,1) 0%, rgba(231,218,117,1) 10%, rgba(255,128,0,1) 100%);
	background: linear-gradient(0deg, rgba(158,158,158,1) 0%, rgba(231,218,117,1) 10%, rgba(255,128,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9e9e9e",endColorstr="#ff8000",GradientType=1); */
}
.dashboard_layout .bottom .module_box .legend>ul{border: 1px solid #80d0ff}
.dashboard_layout .bottom .module_box .legend>ul>li{padding: 3px 12px; border: 1px solid #0b6e8c; color: #fff; font-size: 15px; text-align: right; font-weight: bold;}
.dashboard_layout .bottom .module_box .legend>ul>li:nth-child(11){background: rgba(158, 158, 158, 1);}
.dashboard_layout .bottom .module_box .legend>ul>li:nth-child(10){background: rgba(231, 218, 117, 1);}
.dashboard_layout .bottom .module_box .legend>ul>li:nth-child(9){background: rgba(234, 208, 104, 1);}
.dashboard_layout .bottom .module_box .legend>ul>li:nth-child(8){background: rgba(237, 197, 90, 1);}
.dashboard_layout .bottom .module_box .legend>ul>li:nth-child(7){background: rgba(240, 186, 76, 1);}
.dashboard_layout .bottom .module_box .legend>ul>li:nth-child(6){background: rgba(243, 175, 62, 1);}
.dashboard_layout .bottom .module_box .legend>ul>li:nth-child(5){background: rgba(245, 167, 51, 1);}
.dashboard_layout .bottom .module_box .legend>ul>li:nth-child(4){background: rgba(247, 159, 41, 1);}
.dashboard_layout .bottom .module_box .legend>ul>li:nth-child(3){background: rgba(250, 149, 27, 1);}
.dashboard_layout .bottom .module_box .legend>ul>li:nth-child(2){background: rgba(252, 140, 15, 1);}
.dashboard_layout .bottom .module_box .legend>ul>li:nth-child(1){background: rgba(255, 128, 0, 1);}
.dashboard_layout .bottom .module_box .btn{display: none; position: absolute; right: 100px; top: 10px; border: 1px solid #85fff7; padding: 3px 5px; font-size: 15px; border-radius: 5px; z-index: 99;}
.dashboard_layout .bottom .module_box .btn>a{color: #85fff7;}

.dashboard_layout .bottom .room_box>div>h5{height: 43px; font-size: 15px; padding: 10px 15px; color: #fff; box-sizing: border-box; border-bottom: 1px solid #80d0ff; position: relative; background: rgba(142, 213, 255, 0.35);}
.dashboard_layout .bottom .room_box>div>div{height: 333px; box-sizing: border-box; float: left; display: inline-block;}
.dashboard_layout .bottom .room_box>div>#room_chart{width: 80%;}
.dashboard_layout .bottom .room_box>div>#room_data{width: 20%; padding-top: 6px; left: -15px; position: relative;}
.dashboard_layout .bottom .room_box>div>#room_data>div{color: #fff; height: 4.74%;}
.dashboard_layout .bottom .room_box>div>#room_data>div>span{width: 70px; text-align: right; display: inline-block; float: left; padding-right: 5px; font-size: 13px;}
.dashboard_layout .bottom .room_box>div>#room_data>div>span:last-child{width: 45px; float: right; padding-right: 0;}

.dashboard_layout .bottom .day_box>div>h5{height: 43px; font-size: 15px; padding: 10px 15px; color: #fff; box-sizing: border-box; border-bottom: 1px solid #80d0ff; position: relative; background: rgba(142, 213, 255, 0.35);}
.dashboard_layout .bottom .day_box>div>div{height: 160px; box-sizing: border-box;}

.dashboard_layout .bottom .error_box>div>h5{height: 43px; font-size: 15px; padding: 10px 15px; color: #fff; box-sizing: border-box; border-bottom: 1px solid #80d0ff; position: relative; background: rgba(142, 213, 255, 0.35);}
.dashboard_layout .bottom .error_box>div>h5>span>em{padding-left: 3px; color: #c6eeff;}
.dashboard_layout .bottom .error_box>div>h5>a{float: right; color: #ffd5aa; font-size: 13px;}
.dashboard_layout .bottom .error_box>div>div{height: 259px; padding: 5px;}
.dashboard_layout .bottom .error_box>div>div>.alarm_header{height: 35px; line-height: 35px; background: #28666d; border-top-left-radius: 7px; border-top-right-radius: 7px;}
.dashboard_layout .bottom .error_box>div>div>.alarm_header>dl{overflow: hidden; width: 100%; text-align: center;}
.dashboard_layout .bottom .error_box>div>div>.alarm_header>dl>dt{float: left; font-size: 16px; box-sizing: border-box; text-shadow: 1px 1px 1px black; color: #fff;}
.dashboard_layout .bottom .error_box>div>div>.alarm_header>dl>dt:nth-child(1){width: 20%;}
.dashboard_layout .bottom .error_box>div>div>.alarm_header>dl>dt:nth-child(2){width: 50%;}
.dashboard_layout .bottom .error_box>div>div>.alarm_header>dl>dt:nth-child(3){width: 30%;}
.dashboard_layout .bottom .error_box>div>div>.alarm_body>.h_scroll{height: 224px; overflow: hidden;}
.dashboard_layout .bottom .error_box>div>div>.alarm_body>.h_scroll .none_txt{font-size: 15px; text-align: center; color: #dadada; padding: 51px 0;}
.dashboard_layout .bottom .error_box>div>div>.alarm_body dl{overflow: hidden; cursor: pointer; border-bottom: 1px solid #34818a; text-align: center; /* background: rgba(209,70,70,0.4); */}
.dashboard_layout .bottom .error_box>div>div>.alarm_body dl:last-child{border-bottom: none;}
.dashboard_layout .bottom .error_box>div>div>.alarm_body dl>dt{width: 20%; float: left; display: inline-block; box-sizing: border-box; font-size: 16px; color: #7be4ff; line-height: 27px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.dashboard_layout .bottom .error_box>div>div>.alarm_body dl>dd{width: 80%; float: left; display: inline-block; box-sizing: border-box; font-size: 16px; color: #ffdfb0; line-height: 27px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.dashboard_layout .bottom .error_box>div>div>.alarm_body dl>dd>span{width:65%; display: inline-block; float: left; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.dashboard_layout .bottom .error_box>div>div>.alarm_body dl>dd>em{width: 35%; text-align: center; display: inline-block; float: left; box-sizing: border-box; white-space: break-spaces; /* line-height: 19px; font-size: 13px; */ color: #fff;}
.dashboard_layout .bottom .error_box>div>div>.alarm_body dl:hover{font-weight: bold; background: #246286;}

/* main_layout */
.main_layout{overflow: hidden; height: auto;}

.main_layout>li.top{box-sizing: border-box; padding-bottom: 5px;}
.main_layout>li.top>.data_box{height: 100%;}
.main_layout>li.top>.data_box>.data_list{background-color: rgba(0,0,0,0.15); height: 100%; border-radius: 5px; box-shadow: inset 0px 0px 5px 0px #7be4ff; overflow: auto; padding: 5px 0; border: 1px solid #80d0ff;}
.main_layout>li.top>.data_box>.data_list>dl{float: left; padding: 0 5px; box-sizing: border-box; border-right: 1px solid #86bad8; width: 7.69%; height: 100%;}
.main_layout>li.top>.data_box>.data_list>dl:last-child{border-right: none;}
.main_layout>li.top>.data_box>.data_list>dl>dt{color: #fff; font-size: 16px; text-shadow: 2px 2px 2px black; letter-spacing: 0.5px;}
.main_layout>li.top>.data_box>.data_list>dl>dt>img{width: 22px; position: relative; top: -2px;}
.main_layout>li.top>.data_box>.data_list>dl>dd{color: #fff; text-align: right;}
.main_layout>li.top>.data_box>.data_list>dl>dd>span{font-size: 22px; font-weight: bold; color: #7be4ff; text-shadow: 2px 2px 2px black;}
.main_layout>li.top>.data_box>.data_list>dl:nth-child(1)>dd>span{color: #92f1f8;}
.main_layout>li.top>.data_box>.data_list>dl:nth-child(2)>dd>span{color: #77d5ff;}
.main_layout>li.top>.data_box>.data_list>dl:nth-child(3)>dd>span{color: #5da6c5;}
.main_layout>li.top>.data_box>.data_list>dl:nth-child(4)>dd>span{color: #76f3cc;}
.main_layout>li.top>.data_box>.data_list>dl:nth-child(5)>dd>span{color: #50b6a3;}
.main_layout>li.top>.data_box>.data_list>dl:nth-child(6)>dd>span{color: #f8d979;}
.main_layout>li.top>.data_box>.data_list>dl:nth-child(7)>dd>span{color: #c2b873;}
.main_layout>li.top>.data_box>.data_list>dl:nth-child(8)>dd>span{color: #a4b6fd;}
.main_layout>li.top>.data_box>.data_list>dl:nth-child(9)>dd>span{color: #7192d0;}
.main_layout>li.top>.data_box>.data_list>dl:nth-child(10)>dd>span{color: #e7c5e7;}
.main_layout>li.top>.data_box>.data_list>dl:nth-child(11)>dd>span{color: #ffc282;}
.main_layout>li.top>.data_box>.data_list>dl:nth-child(12)>dd>span{color: #ffa3a3;}
.main_layout>li.top>.data_box>.data_list>dl:nth-child(13)>dd>span{color: #cf7979;}
.main_layout>li.top>.data_box>.data_list>dl>dd>em{font-size: 15px; text-shadow: 1px 1px 1px black; padding-left: 2px;}

.main_layout>li.middle{width: 100%; overflow: hidden; height: 897px;}
.main_layout>li.middle>.dl_wrap{width: 16.666%; float: left; overflow: hidden; padding: 0 5px 5px 0; display: inline-block; box-sizing: border-box; cursor: pointer;}
.main_layout>li.middle>.dl_wrap:nth-child(6n){padding-right: 0;}
.main_layout>li.middle>.dl_wrap>dl{border-radius: 5px; box-shadow: inset 0px 0px 20px 0px #00365d, 2px 2px 5px 0px black; border: 1px solid #85fff7; overflow: hidden;
	background: rgb(0,185,255);
	background: -moz-linear-gradient(300deg, rgba(0,185,255,0.20211834733893552) 0%, rgba(0,48,70,0.4) 100%);
	background: -webkit-linear-gradient(300deg, rgba(0,185,255,0.20211834733893552) 0%, rgba(0,48,70,0.4) 100%);
	background: linear-gradient(300deg, rgba(0,185,255,0.20211834733893552) 0%, rgba(0,48,70,0.4) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00b9ff",endColorstr="#003046",GradientType=1);
}
.main_layout>li.middle>.dl_wrap:hover>dl{border: 1px solid #a6e4ea;}
.main_layout>li.middle>.dl_wrap>dl>dt{color: #fff; padding: 6px 10px 5px 10px;
	background: rgb(89,171,180);
	background: -moz-linear-gradient(180deg, rgba(89,171,180,1) 0%, rgba(43,138,148,1) 25%);
	background: -webkit-linear-gradient(180deg, rgba(89,171,180,1) 0%, rgba(43,138,148,1) 25%);
	background: linear-gradient(180deg, rgba(89,171,180,1) 0%, rgba(43,138,148,1) 25%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#59abb4",endColorstr="#2b8a94",GradientType=1);
}
.main_layout>li.middle>.dl_wrap:hover>dl>dt{color: #004167;
	background: rgb(231,253,255);
	background: -moz-linear-gradient(180deg, rgba(231,253,255,1) 0%, rgba(176,248,255,1) 25%);
	background: -webkit-linear-gradient(180deg, rgba(231,253,255,1) 0%, rgba(176,248,255,1) 25%);
	background: linear-gradient(180deg, rgba(231,253,255,1) 0%, rgba(176,248,255,1) 25%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e7fdff",endColorstr="#b0f8ff",GradientType=1);
}
.main_layout>li.middle>.dl_wrap>dl>dt>strong{font-size: 16px; width: 70%; overflow: hidden; display: inline-block; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; text-shadow: 1px 1px 1px black;}
.main_layout>li.middle>.dl_wrap:hover>dl>dt>strong{text-shadow: 1px 1px 1px #fff;}
.main_layout>li.middle>.dl_wrap>dl>dt>strong>i{font-size: 13px; vertical-align: top; padding-top: 7px; color: #98ccea;}
.main_layout>li.middle>.dl_wrap>dl>dt>span{float: right; border: 1px solid #98ccea; border-radius: 15px; padding: 3px 5px; text-shadow: 1px 1px 1px black; box-shadow: 1px 1px 2px 0px #00352e;}
.main_layout>li.middle>.dl_wrap:hover>dl>dt>span{text-shadow: 1px 1px 1px #fff;}
.main_layout>li.middle>.dl_wrap>dl>dt>span>span{font-size: 14px; font-weight: 500;}
.main_layout>li.middle>.dl_wrap>dl>dt>span>em{color: #c0e8ff;}
.main_layout>li.middle>.dl_wrap:hover>dl>dt>span>em{color: #98ccea;}
.main_layout>li.middle>.dl_wrap>dl>dd{padding: 4px 7px;}
.main_layout>li.middle>.dl_wrap>dl>dd>.gauge_wrap{display: inline-block; width: 37%; float: left; box-sizing: border-box; padding-right: 7px;}
.main_layout>li.middle>.dl_wrap>dl>dd>.gauge_wrap>.bar_gauge{position: relative; text-align: center; padding:18px 0;}
.main_layout>li.middle>.dl_wrap>dl>dd>.gauge_wrap>.bar_gauge>span{font-size: 22px; color: #00e7ff; font-weight: bold; text-shadow: 1px 1px 1px #000;}
.main_layout>li.middle>.dl_wrap>dl>dd>.gauge_wrap>.bar_gauge>em{font-size: 15px; color: #bbd1e2; margin-left: 5px;}
.main_layout>li.middle>.dl_wrap>dl>dd>.gauge_wrap>.bar_gauge>.bar_wrap{display: block; height: 10px; border: 1px solid #00ffee; border-radius: 6px; position: relative; overflow: hidden; margin-top: 15px; margin-bottom: 5px;}
.main_layout>li.middle>.dl_wrap>dl>dd>.gauge_wrap>.bar_gauge>.bar_wrap>span{display: block; height: 8px; position: absolute; left:1px; top:1px; border-radius: 6px; max-width: 98%;
	background: rgb(0,255,238);
	background: -moz-linear-gradient(45deg, rgba(16,85,109,1) 0%, rgba(0,255,238,1) 50%);
	background: -webkit-linear-gradient(45deg, rgba(16,85,109,1) 0%, rgba(0,255,238,1) 50%);
	background: linear-gradient(45deg, rgba(16,85,109,1) 0%, rgba(0,255,238,1) 50%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#10556d",endColorstr="#00ffee",GradientType=1);
	
	transition: all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
}
.main_layout>li.middle>.dl_wrap>dl>dd>.power_info{display: inline-block; width: 63%; box-sizing: border-box; padding-left: 7px; border-left: 1px groove #86bad8; text-shadow: 1px 1px 1px black;}
.main_layout>li.middle>.dl_wrap>dl>dd>.power_info>ul{padding-top: 3px;}
.main_layout>li.middle>.dl_wrap>dl>dd>.power_info>ul>li{padding-top: 1px; overflow: hidden; height: 22px;}
.main_layout>li.middle>.dl_wrap>dl>dd>.power_info>ul>li>h5{color: #94f1ea; font-size: 15px; width: 40%; display: inline-block; float: left; box-sizing: border-box;}
.main_layout>li.middle>.dl_wrap>dl>dd>.power_info>ul>li:nth-child(3)>h5{letter-spacing: 4.5px;}
.main_layout>li.middle>.dl_wrap>dl>dd>.power_info>ul>li:nth-child(4)>h5{letter-spacing: 13px;}
.main_layout>li.middle>.dl_wrap>dl>dd>.power_info>ul>li>span{color: #fff; font-size: 18px; font-weight: bold; text-align: right; width: 37%; display: inline-block; float: left; padding-right: 5px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: break-all;}
.main_layout>li.middle>.dl_wrap>dl>dd>.power_info>ul>li>em{color: #94f1ea; font-size: 13px; width: 18%; display: inline-block; float: left; line-height: 22px; box-sizing: border-box;}

.main_layout>li.middle>.dl_wrap.err>dl{border: 1px solid #ffca93;}
.main_layout>li.middle>.dl_wrap.err:hover>dl{border: 1px solid #ffe3c7;}
.main_layout>li.middle>.dl_wrap.err>dl>dt{
	background: rgb(177,162,103);
	background: -moz-linear-gradient(180deg, rgba(177,162,103,1) 0%, rgba(117,106,64,1) 25%);
	background: -webkit-linear-gradient(180deg, rgba(177,162,103,1) 0%, rgba(117,106,64,1) 25%);
	background: linear-gradient(180deg, rgba(177,162,103,1) 0%, rgba(117,106,64,1) 25%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b1a267",endColorstr="#756a40",GradientType=1);
}
.main_layout>li.middle>.dl_wrap.err:hover>dl>dt{color: #b55a00;
	background: rgb(255,252,239);
	background: -moz-linear-gradient(180deg, rgba(255,252,239,1) 0%, rgba(255,237,167,1) 25%);
	background: -webkit-linear-gradient(180deg, rgba(255,252,239,1) 0%, rgba(255,237,167,1) 25%);
	background: linear-gradient(180deg, rgba(255,252,239,1) 0%, rgba(255,237,167,1) 25%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fffcef",endColorstr="#ffeda7",GradientType=1);
}
.main_layout>li.middle>.dl_wrap.err>dl>dt>strong>i{color: #d8b086;}
.main_layout>li.middle>.dl_wrap.err>dl>dt>span{border: 1px solid #d8b086;}
.main_layout>li.middle>.dl_wrap.err>dl>dt>span>em{color: #ffddc0;}
.main_layout>li.middle>.dl_wrap.err:hover>dl>dt>span>em{color: #d8b086;}
.main_layout>li.middle>.dl_wrap.err>dl>dd>.gauge_wrap>.bar_gauge>span{color: #ffcc3f;}
.main_layout>li.middle>.dl_wrap.err>dl>dd>.gauge_wrap>.bar_gauge>em{color: #e2dfbb;}
.main_layout>li.middle>.dl_wrap.err>dl>dd>.gauge_wrap>.bar_gauge>.bar_wrap{border: 1px solid #ffd400;}
.main_layout>li.middle>.dl_wrap.err>dl>dd>.gauge_wrap>.bar_gauge>.bar_wrap>span{
	background: rgb(255,234,84);
	background: -moz-linear-gradient(45deg, rgba(90,75,0,1) 0%, rgba(255,234,84,1) 50%);
	background: -webkit-linear-gradient(45deg, rgba(90,75,0,1) 0%, rgba(255,234,84,1) 50%);
	background: linear-gradient(45deg, rgba(90,75,0,1) 0%, rgba(255,234,84,1) 50%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5a4b00",endColorstr="#ffea54",GradientType=1);
}
.main_layout>li.middle>.dl_wrap.err>dl>dd>.power_info{border-left: 1px groove #d8b086;}
.main_layout>li.middle>.dl_wrap.err>dl>dd>.power_info>ul>li>h5{color: #ffea54;}
.main_layout>li.middle>.dl_wrap.err>dl>dd>.power_info>ul>li>em{color: #ffea54;}

.main_layout>li.middle>.dl_wrap.stop>dl{border: 1px solid #b9b9b9;}
.main_layout>li.middle>.dl_wrap.stop:hover>dl{border: 1px solid #fff;}
.main_layout>li.middle>.dl_wrap.stop>dl>dt{
	background: rgb(165,165,165);
	background: -moz-linear-gradient(180deg, rgba(165,165,165,1) 0%, rgba(84,84,84,1) 25%);
	background: -webkit-linear-gradient(180deg, rgba(165,165,165,1) 0%, rgba(84,84,84,1) 25%);
	background: linear-gradient(180deg, rgba(165,165,165,1) 0%, rgba(84,84,84,1) 25%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a5a5a5",endColorstr="#545454",GradientType=1);
}
.main_layout>li.middle>.dl_wrap.stop:hover>dl>dt{color: #3e3e3e;
	background: rgb(245,245,245);
	background: -moz-linear-gradient(180deg, rgba(245,245,245,1) 0%, rgba(199,199,199,1) 25%);
	background: -webkit-linear-gradient(180deg, rgba(245,245,245,1) 0%, rgba(199,199,199,1) 25%);
	background: linear-gradient(180deg, rgba(245,245,245,1) 0%, rgba(199,199,199,1) 25%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f5f5f5",endColorstr="#c7c7c7",GradientType=1);
}
.main_layout>li.middle>.dl_wrap.stop>dl>dt>strong>i{color: #a7a7a7;}
.main_layout>li.middle>.dl_wrap.stop>dl>dt>span{border: 1px solid #afafaf;}
.main_layout>li.middle>.dl_wrap.stop>dl>dt>span>em{color: #e4e4e4;}
.main_layout>li.middle>.dl_wrap.stop:hover>dl>dt>span>em{color: #757575;}
.main_layout>li.middle>.dl_wrap.stop>dl>dd>.gauge_wrap>.bar_gauge>span{color: #fff;}
.main_layout>li.middle>.dl_wrap.stop>dl>dd>.gauge_wrap>.bar_gauge>em{color: #dedede;}
.main_layout>li.middle>.dl_wrap.stop>dl>dd>.gauge_wrap>.bar_gauge>.bar_wrap{border: 1px solid #fff;}
.main_layout>li.middle>.dl_wrap.stop>dl>dd>.gauge_wrap>.bar_gauge>.bar_wrap>span{
	background: rgb(95,95,95);
	background: -moz-linear-gradient(45deg, rgba(95,95,95,1) 0%, rgba(255,255,255,1) 50%);
	background: -webkit-linear-gradient(45deg, rgba(95,95,95,1) 0%, rgba(255,255,255,1) 50%);
	background: linear-gradient(45deg, rgba(95,95,95,1) 0%, rgba(255,255,255,1) 50%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5f5f5f",endColorstr="#ffffff",GradientType=1);
}
.main_layout>li.middle>.dl_wrap.stop>dl>dd>.power_info{border-left: 1px groove #cecece;}
.main_layout>li.middle>.dl_wrap.stop>dl>dd>.power_info>ul>li>h5{color: #cacaca;}
.main_layout>li.middle>.dl_wrap.stop>dl>dd>.power_info>ul>li>em{color: #cacaca;}

/* 2x2 */
.main_layout.b2x2>li.middle>.dl_wrap{width: 50%;}
.main_layout.b2x2>li.middle>.dl_wrap:nth-child(2n){padding-right: 0;}
.main_layout.b2x2>li.middle>.dl_wrap>dl>dt{padding: 12px 18px;}
.main_layout.b2x2>li.middle>.dl_wrap>dl>dt>strong{font-size: 20px;}
.main_layout.b2x2>li.middle>.dl_wrap>dl>dt>strong>i{font-size: 17px;}
.main_layout.b2x2>li.middle>.dl_wrap>dl>dt>span{padding: 5px 10px;}
.main_layout.b2x2>li.middle>.dl_wrap>dl>dt>span>span{font-size: 17px;}
.main_layout.b2x2>li.middle>.dl_wrap>dl>dt>span>em{font-size: 13px;}
.main_layout.b2x2>li.middle>.dl_wrap>dl>dd>.gauge_wrap{padding: 0 17px 0 11px;}
.main_layout.b2x2>li.middle>.dl_wrap>dl>dd>.gauge_wrap>.bar_gauge{padding: 148px 0;}
.main_layout.b2x2>li.middle>.dl_wrap>dl>dd>.gauge_wrap>.bar_gauge>span{font-size: 35px;}
.main_layout.b2x2>li.middle>.dl_wrap>dl>dd>.gauge_wrap>.bar_gauge>em{font-size: 20px;}
.main_layout.b2x2>li.middle>.dl_wrap>dl>dd>.gauge_wrap>.bar_gauge>.bar_wrap{height: 20px; border-radius: 20px;}
.main_layout.b2x2>li.middle>.dl_wrap>dl>dd>.gauge_wrap>.bar_gauge>.bar_wrap>span{height: 18px; border-radius: 20px;}
.main_layout.b2x2>li.middle>.dl_wrap>dl>dd>.power_info>ul>li{height: 93px;}
.main_layout.b2x2>li.middle>.dl_wrap>dl>dd>.power_info>ul>li>h5{line-height: 94px; font-size: 30px;}
.main_layout.b2x2>li.middle>.dl_wrap>dl>dd>.power_info>ul>li:nth-child(3)>h5{letter-spacing: 9px;}
.main_layout.b2x2>li.middle>.dl_wrap>dl>dd>.power_info>ul>li:nth-child(4)>h5{letter-spacing: 28.1px;}
.main_layout.b2x2>li.middle>.dl_wrap>dl>dd>.power_info>ul>li>span{line-height: 94px; font-size: 35px; width: 45%;}
.main_layout.b2x2>li.middle>.dl_wrap>dl>dd>.power_info>ul>li>em{line-height: 102px; font-size: 23px; width: 10%;}

/* 3x4 */
.main_layout.b3x4>li.middle>.dl_wrap{width: 33.333%;}
.main_layout.b3x4>li.middle>.dl_wrap:nth-child(3n){padding-right: 0;}
.main_layout.b3x4>li.middle>.dl_wrap>dl>dt{padding: 11px 18px 10.5px;}
.main_layout.b3x4>li.middle>.dl_wrap>dl>dt>strong{font-size: 20px;}
.main_layout.b3x4>li.middle>.dl_wrap>dl>dt>strong>i{font-size: 17px;}
.main_layout.b3x4>li.middle>.dl_wrap>dl>dt>span{padding: 5px 10px;}
.main_layout.b3x4>li.middle>.dl_wrap>dl>dt>span>span{font-size: 17px;}
.main_layout.b3x4>li.middle>.dl_wrap>dl>dt>span>em{font-size: 13px;}
.main_layout.b3x4>li.middle>.dl_wrap>dl>dd>.gauge_wrap{padding: 0 17px 0 11px;}
.main_layout.b3x4>li.middle>.dl_wrap>dl>dd>.gauge_wrap>.bar_gauge{padding: 37px 0;}
.main_layout.b3x4>li.middle>.dl_wrap>dl>dd>.gauge_wrap>.bar_gauge>span{font-size: 35px;}
.main_layout.b3x4>li.middle>.dl_wrap>dl>dd>.gauge_wrap>.bar_gauge>em{font-size: 20px;}
.main_layout.b3x4>li.middle>.dl_wrap>dl>dd>.gauge_wrap>.bar_gauge>.bar_wrap{height: 20px; border-radius: 20px;}
.main_layout.b3x4>li.middle>.dl_wrap>dl>dd>.gauge_wrap>.bar_gauge>.bar_wrap>span{height: 18px; border-radius: 20px;}
.main_layout.b3x4>li.middle>.dl_wrap>dl>dd>.power_info>ul>li{height: 37px;}
.main_layout.b3x4>li.middle>.dl_wrap>dl>dd>.power_info>ul>li>h5{line-height: inherit; font-size: 23px;}
.main_layout.b3x4>li.middle>.dl_wrap>dl>dd>.power_info>ul>li:nth-child(3)>h5{letter-spacing: 9px;}
.main_layout.b3x4>li.middle>.dl_wrap>dl>dd>.power_info>ul>li:nth-child(4)>h5{letter-spacing: 28.1px;}
.main_layout.b3x4>li.middle>.dl_wrap>dl>dd>.power_info>ul>li>span{line-height: inherit; font-size: 32px; width: 40%;}
.main_layout.b3x4>li.middle>.dl_wrap>dl>dd>.power_info>ul>li>em{line-height: 42px; font-size: 20px; width: 15%;}

/* 4x5 */
.main_layout.b4x5>li.middle>.dl_wrap{width: 25%; padding-right: 5px;}
.main_layout.b4x5>li.middle>.dl_wrap:nth-child(4n){padding-right: 0;}
.main_layout.b4x5>li.middle>.dl_wrap>dl>dt{padding: 8px 13px 7px;}
.main_layout.b4x5>li.middle>.dl_wrap>dl>dt>strong{font-size: 20px;}
.main_layout.b4x5>li.middle>.dl_wrap>dl>dt>strong>i{font-size: 17px;}
.main_layout.b4x5>li.middle>.dl_wrap>dl>dt>span{padding: 2px 10px;}
.main_layout.b4x5>li.middle>.dl_wrap>dl>dt>span>span{font-size: 17px;}
.main_layout.b4x5>li.middle>.dl_wrap>dl>dt>span>em{font-size: 13px;}
.main_layout.b4x5>li.middle>.dl_wrap>dl>dd>.gauge_wrap{padding: 0 12px 0 6px;}
.main_layout.b4x5>li.middle>.dl_wrap>dl>dd>.gauge_wrap>.bar_gauge{padding: 18px 0;}
.main_layout.b4x5>li.middle>.dl_wrap>dl>dd>.gauge_wrap>.bar_gauge>span{font-size: 32px;}
.main_layout.b4x5>li.middle>.dl_wrap>dl>dd>.gauge_wrap>.bar_gauge>em{font-size: 20px;}
.main_layout.b4x5>li.middle>.dl_wrap>dl>dd>.gauge_wrap>.bar_gauge>.bar_wrap{height: 15px; border-radius: 15px;}
.main_layout.b4x5>li.middle>.dl_wrap>dl>dd>.gauge_wrap>.bar_gauge>.bar_wrap>span{height: 13px; border-radius: 15px;}
.main_layout.b4x5>li.middle>.dl_wrap>dl>dd>.power_info>ul>li{height: 28px;}
.main_layout.b4x5>li.middle>.dl_wrap>dl>dd>.power_info>ul>li>h5{line-height: inherit; font-size: 18px;}
.main_layout.b4x5>li.middle>.dl_wrap>dl>dd>.power_info>ul>li:nth-child(3)>h5{letter-spacing: 5.5px;}
.main_layout.b4x5>li.middle>.dl_wrap>dl>dd>.power_info>ul>li:nth-child(4)>h5{letter-spacing: 16.5px;}
.main_layout.b4x5>li.middle>.dl_wrap>dl>dd>.power_info>ul>li>span{line-height: 30px; font-size: 24px; width: 40%;}
.main_layout.b4x5>li.middle>.dl_wrap>dl>dd>.power_info>ul>li>em{line-height: 36px; font-size: 15px; width: 15%;}

/* 5x6 */
.main_layout.b5x6>li.middle>.dl_wrap{width: 20%; padding-right: 5px;}
.main_layout.b5x6>li.middle>.dl_wrap:nth-child(5n){padding-right: 0;}
.main_layout.b5x6>li.middle>.dl_wrap>dl>dt{padding: 7.5px 8px;}
.main_layout.b5x6>li.middle>.dl_wrap>dl>dd>.gauge_wrap>.bar_gauge{padding: 16px 0;}
.main_layout.b5x6>li.middle>.dl_wrap>dl>dd>.power_info>ul>li{height: 21px;}
.main_layout.b5x6>li.middle>.dl_wrap>dl>dd>.power_info>ul>li>em{line-height: 25px;}

.main_layout>li.bottom{width: 100%;}
.main_layout>li.bottom>.page_nav{position: relative; text-align: center; border-radius: 5px; margin-right: 5px;}
.main_layout>li.bottom>.page_nav>ul{display: inline-block; vertical-align: middle;}
.main_layout>li.bottom>.page_nav>ul>li{float: left; margin: 0 3px;}
.main_layout>li.bottom>.page_nav>ul>li>a{display: inline-block; color: #38a4d6; font-size: 16px; text-align: center; height: 18px; width: 22px;}
.main_layout>li.bottom>.page_nav>ul.num>li{margin: 0 4px;}
.main_layout>li.bottom>.page_nav>ul.num>li>a{border-radius: 4px;}
.main_layout>li.bottom>.page_nav>ul.num>li>a.on{color: #ffffff;
	background:#42688a; 
	background: -moz-linear-gradient(top, #42688a 0%, #42688a 50%, #6c90b0 51%, #6c90b0 100%);
	background: -webkit-linear-gradient(top, #42688a 0%, #42688a 50%, #6c90b0 51%, #6c90b0 100%);
	background: linear-gradient(to top, #42688a 0%, #42688a 50%, #6c90b0 51%, #6c90b0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42688a', endColorstr='#6c90b0',GradientType=0 );
}
.main_layout>li.bottom>.page_nav>ul.num>li>a:hover{background: #16466f;}
.main_layout>li.bottom>.page_nav>ul.num>li>a.on:hover{background: #6c90b0;}
.main_layout>li.bottom>.page_nav>ul.btn>li>a{font-size: 18px; font-weight: bold; color:#1b6384;}
.main_layout>li.bottom>.page_nav>ul.btn>li>a:hover{color: #4697bd;}
.main_layout>li.bottom>.page_nav>ul.btn>li>a.off{color: #a7bbce;}

/* compare_layout */
.compare_layout{overflow: hidden; height: auto;}

.compare_layout>li.top{box-sizing: border-box; padding-bottom: 5px;}
.compare_layout>li.top>.data_box{height: 100%;}
.compare_layout>li.top>.data_box>.data_list{background-color: rgba(0,0,0,0.15); height: 100%; border-radius: 5px; box-shadow: inset 0px 0px 5px 0px #7be4ff; overflow: auto; padding: 5px 0; border: 1px solid #80d0ff;}
.compare_layout>li.top>.data_box>.data_list>dl{float: left; padding: 0 5px; box-sizing: border-box; border-right: 1px solid #86bad8; width: 7.69%; height: 100%;}
.compare_layout>li.top>.data_box>.data_list>dl:last-child{border-right: none;}
.compare_layout>li.top>.data_box>.data_list>dl>dt{color: #fff; font-size: 16px; text-shadow: 2px 2px 2px black; letter-spacing: 0.5px;}
.compare_layout>li.top>.data_box>.data_list>dl>dt>img{width: 22px; position: relative; top: -2px;}
.compare_layout>li.top>.data_box>.data_list>dl>dd{color: #fff; text-align: right;}
.compare_layout>li.top>.data_box>.data_list>dl>dd>span{font-size: 22px; font-weight: bold; color: #7be4ff; text-shadow: 2px 2px 2px black;}
.compare_layout>li.top>.data_box>.data_list>dl:nth-child(1)>dd>span{color: #92f1f8;}
.compare_layout>li.top>.data_box>.data_list>dl:nth-child(2)>dd>span{color: #77d5ff;}
.compare_layout>li.top>.data_box>.data_list>dl:nth-child(3)>dd>span{color: #5da6c5;}
.compare_layout>li.top>.data_box>.data_list>dl:nth-child(4)>dd>span{color: #76f3cc;}
.compare_layout>li.top>.data_box>.data_list>dl:nth-child(5)>dd>span{color: #50b6a3;}
.compare_layout>li.top>.data_box>.data_list>dl:nth-child(6)>dd>span{color: #f8d979;}
.compare_layout>li.top>.data_box>.data_list>dl:nth-child(7)>dd>span{color: #c2b873;}
.compare_layout>li.top>.data_box>.data_list>dl:nth-child(8)>dd>span{color: #a4b6fd;}
.compare_layout>li.top>.data_box>.data_list>dl:nth-child(9)>dd>span{color: #7192d0;}
.compare_layout>li.top>.data_box>.data_list>dl:nth-child(10)>dd>span{color: #e7c5e7;}
.compare_layout>li.top>.data_box>.data_list>dl:nth-child(11)>dd>span{color: #ffc282;}
.compare_layout>li.top>.data_box>.data_list>dl:nth-child(12)>dd>span{color: #ffa3a3;}
.compare_layout>li.top>.data_box>.data_list>dl:nth-child(13)>dd>span{color: #cf7979;}
.compare_layout>li.top>.data_box>.data_list>dl>dd>em{font-size: 15px; text-shadow: 1px 1px 1px black; padding-left: 2px;}

.compare_layout>li.bottom{overflow: hidden;}
.compare_layout>li.bottom>ul{overflow: hidden;}
.compare_layout>li.bottom>ul>li{width: 50%; padding-right: 5px; float: left; box-sizing: border-box; display: inline-block;}
.compare_layout>li.bottom>ul>li:last-child{padding-right: 0;}
.compare_layout>li.bottom>ul>li>dl{height: 100%; border-radius: 5px; box-shadow: inset 0px 0px 5px 0px #7be4ff; border: 1px solid #80d0ff; box-sizing: border-box;
	background: rgb(0,0,70);
	background: -moz-linear-gradient(90deg, rgba(0,0,70,0.4) 0%, rgba(28,181,224,0.4) 100%);
	background: -webkit-linear-gradient(90deg, rgba(0,0,70,0.4) 0%, rgba(28,181,224,0.4) 100%); 
	background: linear-gradient(90deg, rgba(0,0,70,0.4) 0%, rgba(28,181,224,0.4) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000046",endColorstr="#1cb5e0",GradientType=1)}
.compare_layout>li.bottom>ul>li>dl>dt{text-align: center; height: 43px; font-size: 25px; font-weight: bold; color: #fff; box-sizing: border-box; border-bottom: 1px solid #80d0ff; position: relative; background: rgba(142, 213, 255, 0.35); text-shadow: 2px 2px 2px black; letter-spacing: 0.5px;}
.compare_layout>li.bottom>ul>li>dl>dd{overflow: hidden; box-sizing: border-box; padding: 5px;}

.compare_layout>li.bottom>ul>li>dl>dd>.data_box>.data_list{background-color: rgba(0,0,0,0.15); height: 100%; border-radius: 5px; box-shadow: inset 0px 0px 5px 0px #7be4ff; overflow: auto; padding: 5px 0; border: 1px solid #80d0ff;}
.compare_layout>li.bottom>ul>li>dl>dd>.data_box>.data_list>dl{float: left; padding: 3px 5px; box-sizing: border-box; border-right: 1px solid #86bad8; width: 25%; height: 100%; border-bottom: 1px solid #86bad8;}
.compare_layout>li.bottom>ul>li>dl>dd>.data_box>.data_list>dl:nth-child(n+5){border-bottom: none;}
.compare_layout>li.bottom>ul>li>dl>dd>.data_box>.data_list>dl:last-child{border-right: none;}
.compare_layout>li.bottom>ul>li>dl>dd>.data_box>.data_list>dl>dt{color: #fff; font-size: 16px; text-shadow: 2px 2px 2px black; letter-spacing: 0.5px;}
.compare_layout>li.bottom>ul>li>dl>dd>.data_box>.data_list>dl>dt>img{width: 25px; position: relative; top: -2px;}
.compare_layout>li.bottom>ul>li>dl>dd>.data_box>.data_list>dl>dd{color: #fff; text-align: right;}
.compare_layout>li.bottom>ul>li>dl>dd>.data_box>.data_list>dl>dd>span{font-size: 25px; font-weight: bold; color: #7be4ff; text-shadow: 2px 2px 2px black;}
.compare_layout>li.bottom>ul>li>dl>dd>.data_box>.data_list>dl:nth-child(1)>dd>span{color: #77d5ff;}
.compare_layout>li.bottom>ul>li>dl>dd>.data_box>.data_list>dl:nth-child(2)>dd>span{color: #5da6c5;}
.compare_layout>li.bottom>ul>li>dl>dd>.data_box>.data_list>dl:nth-child(3)>dd>span{color: #76f3cc;}
.compare_layout>li.bottom>ul>li>dl>dd>.data_box>.data_list>dl:nth-child(4)>dd>span{color: #50b6a3;}
.compare_layout>li.bottom>ul>li>dl>dd>.data_box>.data_list>dl:nth-child(5)>dd>span{color: #f8d979;}
.compare_layout>li.bottom>ul>li>dl>dd>.data_box>.data_list>dl:nth-child(6)>dd>span{color: #c2b873;}
.compare_layout>li.bottom>ul>li>dl>dd>.data_box>.data_list>dl:nth-child(7)>dd>span{color: #ffa3a3;}
.compare_layout>li.bottom>ul>li>dl>dd>.data_box>.data_list>dl:nth-child(8)>dd>span{color: #cf7979;}
.compare_layout>li.bottom>ul>li>dl>dd>.data_box>.data_list>dl>dd>em{font-size: 16px; text-shadow: 1px 1px 1px black; padding-left: 5px;}

.compare_layout>li.bottom>ul>li>dl>dd>.gauge_box{margin-top: 5px; overflow: hidden;}
.compare_layout>li.bottom>ul>li>dl>dd>.gauge_box>dl{float: left; width: 50%; box-sizing: border-box; display: inline-block;}
.compare_layout>li.bottom>ul>li>dl>dd>.gauge_box>dl>dt{text-align: center; color: #fff; font-size: 22px; text-shadow: 2px 2px 2px black; letter-spacing: 0.5px;}
.compare_layout>li.bottom>ul>li>dl>dd>.gauge_box>dl>dt:before{font-size: 15px; color: #95c4d1; content: "\f621"; font-family: 'Font Awesome\ 5 Free'; font-weight: 900; padding-right: 5px; top: -3px; position: relative;}
.compare_layout>li.bottom>ul>li>dl>dd>.gauge_box>dl>dd>.chart_wrap{height: 260px;}
.compare_layout>li.bottom>ul>li>dl>dd>.gauge_box>dl>dd>.chart_wrap>div{width: 100%; height: 100%; margin-top: -5%;}

.compare_layout>li.bottom>ul>li>dl>dd>.table_box{margin-top: 5px;}
.compare_layout>li.bottom>ul>li>dl>dd>.table_box>dl>dt{padding-left: 10px; color: #fff; font-size: 22px; text-shadow: 2px 2px 2px black; letter-spacing: 0.5px; margin-bottom: 10px;}
.compare_layout>li.bottom>ul>li>dl>dd>.table_box>dl>dt:before{font-size: 15px; color: #95c4d1; content: "\f621"; font-family: 'Font Awesome\ 5 Free'; font-weight: 900; padding-right: 5px; top: -3px; position: relative;}
.compare_layout>li.bottom>ul>li>dl>dd>.table_box>dl>dd{height: 404px;}
.compare_layout>li.bottom>ul>li>dl>dd>.table_box>dl>dd>.table_style>table>tbody>tr>th,
.compare_layout>li.bottom>ul>li>dl>dd>.table_box>dl>dd>.table_style>table>tbody>tr>td{padding: 0.95px 5px; font-size: 20px;}
.compare_layout>li.bottom>ul>li:last-child>dl>dd>.table_box>dl>dd>.table_style>table>tbody>tr>th,
.compare_layout>li.bottom>ul>li:last-child>dl>dd>.table_box>dl>dd>.table_style>table>tbody>tr>td{padding: 16.5px 5px;}

/* sub_box */
.sub_box{border-radius: 5px;
	box-shadow: inset 0px 0px 5px 0px #7be4ff;
	border: 1px solid #80d0ff;
	box-sizing: border-box;
	background: rgb(6, 9, 14);
	background: -moz-linear-gradient(180deg, rgba(6, 9, 14, 0.4) 0%, rgba(0, 138, 255, 0.2) 100%);
	background: -webkit-linear-gradient(180deg, rgba(6, 9, 14, 0.4) 0%, rgba(0, 138, 255, 0.2) 100%);
	background: linear-gradient(180deg, rgba(6, 9, 14, 0.4) 0%, rgba(0, 138, 255, 0.2) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#06090e", endColorstr="#008aff", GradientType=1);
}
.sub_box .title{border-bottom: 1px solid #80d0ff; position: relative; background: rgba(142, 213, 255, 0.35);}
.sub_box .title>h4{line-height: 42px; font-size: 23px; font-weight: bold; color: #fff; padding-left: 15px; display: inline-block; vertical-align: middle;}
.sub_box .title>h4>i{font-size: 20px; color: #94badf;}
.sub_box .title>ul{display: inline-block; overflow: hidden; vertical-align: middle; margin-left:27px;}
.sub_box .title>ul>li{float: left; margin-right: 20px;}
.sub_box .title>ul>li>a{font-size:18px; color:#bff1ff;}
.sub_box .title>ul>li>a>em:after{content: '\f101'; font-family: Font Awesome\ 5 Free; font-size:20px; opacity: 0; font-weight: 600;}
.sub_box .title>ul>li>a.on>em:after,
.sub_box .title>ul>li>a:hover>em:after{content: '\f101'; font-family: Font Awesome\ 5 Free; font-size:20px; color:#38d8ff; opacity: 1; font-weight: 600;}
.sub_box .title>ul>li>a:hover,
.sub_box .title>ul>li>a.on{ color:#38d8ff; font-weight:bold;}
.sub_box .in{padding: 10px; height: 900px; text-align: right;}
.sub_box.max .in {height: 926px;}
.sub_box.etc .in{height: 969px; text-align: left;}
.sub_box .in>.noti{color: #ffeb3b; font-size: 13px; float: left;}
.sub_box .in>.download>a{margin-right: 10px; color: #b1fffa; line-height: 20px}
.sub_box .in>.download>a>i{font-size: 22px; vertical-align: bottom;}

/* search_box */
.search_box{padding: 15px 0 10px 0; margin: 0 20px 0 40px;}
.search_box dl{display: inline-block; vertical-align: top; box-sizing: border-box; overflow: visible; padding-bottom: 10px;}
.search_box dl:nth-last-child(3), .search_box dl:nth-last-child(3)~dl{width: 33.1%;}
.search_box dl:nth-last-child(4), .search_box dl:nth-last-child(4)~dl{width: 24.5%;}
.search_box dl:nth-last-child(5), .search_box dl:nth-last-child(5)~dl{width: 19.8%;}
.search_box dl dt, 
.search_box dl dd{float:left; display: inline-block; box-sizing: border-box;}
.search_box dl dt{font-size:16px; color:#b1fffa; width:25%; padding-right: 10px; text-align:right; line-height:31px; font-weight: bold;}
.search_box dl dt>i{font-size:15px; color:#bbd1e2;}
.search_box dl dd .select2-container{width:200px !important;}
.search_box dl dd{position:relative; width:75%;}
.search_box dl dd input{background-color: inherit; border: 1px solid #85fff7; height: 33px; border-top: none; border-right: none; border-left: none; outline: 0; width: 200px; color: #fff; font-size: 15px; font-weight: bold; padding: 0 15px;}
.search_box dl dd input::placeholder{color: #7fa0a0;}
.search_box dl dd a.btn{width: 30px; border: 1px solid #85fff7; padding: 3px 8px; border-radius: 20px; color: #85fff7; font-size: 15px;}
.search_box dl dd a.btn:hover{background-color: #85fff7; color: #fff;}

/* calendar */
.search_box #dtRng{border-bottom: 1px solid #85fff7; height: 30px; line-height: 30px; color: #fff; font-size: 15px; padding-left: 2px; cursor: pointer; position: relative;}
.search_box #dtRng i{font-size: 18px; position: relative; top: 2px;}
.search_box #dtRng i:before{color:#85fff7;}
.search_box .s_date_area{overflow:visible; height: 30px;}
.search_box .s_date_area #dtRng{width:197px;}
.s_date_area #dtRng, 
.s_date_area .btn_prev, 
.s_date_area .btn_next{float: left; display: inline-block; box-sizing: border-box;}
.s_date_area .btn_prev, 
.s_date_area .btn_next{font-size: 25px; color:#85fff7; vertical-align: middle; line-height: 32px;}
.s_date_area .btn_prev:hover, 
.s_date_area .btn_next:hover{color:#84b5e4;} 
.s_date_area .btn_prev,
.s_date_area .btn_next{margin-top: 2px;}

/* daterangepicker */
.daterangepicker{display:none;}
div.table_style .daterangepicker{top:34px !important; right:auto !important; left:15px !important;}
.daterangepicker.show-calendar{width:458px;}
/* FireFox */
@-moz-document url-prefix() { .table_style.backup .daterangepicker.show-calendar{width:624px;} }
.daterangepicker.show-calendar.single{width:auto;}
.daterangepicker.dropdown-menu {background: #023049; border: 1px solid #85fff7; margin-top: 5px;}
.daterangepicker.opensleft:after {background:transparent;}
.daterangepicker .input-mini {background-color:#023049; color: #fff; /* width:auto !important; */}
.daterangepicker .range_inputs{display:none;}
.daterangepicker.opensleft:after{display:none !important;}
.daterangepicker.opensleft:before{display:none !important;}
.daterangepicker .calendar th, .daterangepicker .calendar td{line-height:1;}
div.table_style .daterangepicker .calendar th, div.table_style .daterangepicker .calendar td{padding:0; text-align:center; color:#666; background:none; border:0 solid #fff; font-size:12px; letter-spacing:0;}
div.table_style .daterangepicker .calendar td.in-range{background: #ebf4f8;}
div.table_style .daterangepicker .calendar td.active, div.table_style .daterangepicker .calendar td.active:hover{background-color: #80d0ff; border-color: #3071a9; color: #fff;}
div.table_style .daterangepicker .calendar th{font-weight:bold;}
div.table_style .daterangepicker td.off, div.table_style .daterangepicker td.off.in-range, div.table_style .daterangepicker td.off.start-date, div.table_style .daterangepicker td.off.end-date {color: #999; background: #fff;}
div.table_style .daterangepicker td.active, div.table_style .daterangepicker td.active:hover {background-color: #80d0ff; border-color: #3071a9; color: #fff;}
div.table_style .daterangepicker td.available:hover, div.table_style .daterangepicker th.available:hover {background: #eee;}
div.table_style .daterangepicker table thead{border:0 solid #fff;}
.daterangepicker .input-mini:focus{outline: none;}
div.table_style .daterangepicker .calendar th, div.table_style .daterangepicker .calendar td{min-width:auto;}

/* table_style */
.table_style table{width:100%;}
.table_style table tr th,
.table_style table tr td{border: 1px solid #a5d0d4; padding:5px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: break-all; background: rgba(34,109,106,0.12);}
.table_style table tr td{border: 1px solid #34818a;}
.table_style table tr th{font-size:16px; color: #d7f9ff; background: #39949e; font-weight: bold; text-align: center;}
.table_style table tr td{color: #fff; font-size:16px; text-align: center;}
.table_style table tr:nth-child(odd){background: #104154;}

/* table_style > ui-jqgrid */
.table_style .ui-jqgrid .ui-jqgrid-htable th div{color: #d7f9ff; height: auto;}
.table_style .ui-jqgrid tr.jqgrow td{color: #fff; font-size:15px;}
.table_style .ui-jqgrid .ui-jqgrid-htable th{font-size:15px;}
.table_style .ui-jqgrid .ui-jqgrid-htable tr[class*="ui-jqgrid-labels"]>th{padding-top: 3px; padding-bottom: 3px;}
.table_style .ui-jqgrid .ui-jqgrid-htable th div{height:auto;}
.table_style .ui-th-column, 
.table_style .ui-jqgrid tr.ui-row-ltr td{border: 1px solid #39949e; border-top: none; border-bottom: none;}
.table_style table.ui-jqgrid-btable tr{background:#063245;}
.table_style table.ui-jqgrid-btable tr:nth-child(odd){background:#104154;}
.table_style .ui-jqgrid tr.footrow td{color: #b8fffa; background: #f7fbff; border: 1px solid #80a9ad; padding: 8px 2px; font-size: 14px;
	background: rgba(255,255,255,0);
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(67,99,123,0.75) 100%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(67,99,123,0.75) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(67,99,123,0.75) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(255,255,255,0)', endColorstr='rgba(67,99,123,0.75)',GradientType=1 );
	background: #0f373c;
}
.table_style .ui-jqgrid tr.footrow-ltr td:first-child{color: #b8fffa; background: #f7fbff; border: 1px solid #80a9ad; letter-spacing: 0; padding: 8px 2px;
	background: rgba(255,255,255,0);
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(67,99,123,0.75) 100%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(67,99,123,0.75) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(67,99,123,0.75) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(255,255,255,0)', endColorstr='rgba(67,99,123,0.75)',GradientType=1 );
	background: #0f373c;
}
.table_style .ui-jqgrid .ui-pg-table{background: #39949e;}
.table_style .ui-jqgrid .ui-pg-table td{color: #fff; font-size:14px;
	background: rgba(255,255,255,0);
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(67,99,123,0.75) 100%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(67,99,123,0.75) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(67,99,123,0.75) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(255,255,255,0)', endColorstr='rgba(67,99,123,0.75)',GradientType=1 );
	background: #39949e;
}
.table_style .ui-jqgrid .ui-pg-table tr td:first-child { border-left: 1px solid #34818a; }
.table_style .ui-jqgrid .ui-pg-table tr td:last-child { border-right: 1px solid #34818a; }
.table_style .ui-jqgrid table.ui-pg-table tr td table.ui-pg-table tr td { border-right: none; border-left: none; border-top: none; background: rgba(0,0,0,0) !important;}
.table_style .ui-jqgrid table.ui-pg-table tr{background: none;}
.table_style .ui-jqgrid .ui-pg-input{font-size:14px; color:#85fff7 !important;}
.table_style .ui-jqgrid .ui-separator{border-left:1px solid #000; border-right:none;}
.table_style .ui-jqgrid .ui-paging-info {color: #fff;}
.table_style .ui-jqgrid .ui-state-hover, 
.table_style .ui-jqgrid .ui-widget-content .ui-state-hover, 
.table_style .ui-jqgrid .ui-state-focus, 
.table_style .ui-jqgrid .ui-widget-content .ui-state-focus, 
.table_style .ui-jqgrid .ui-widget-header .ui-state-focus {border-radius: 0;}
.table_style .ui-jqgrid .ui-state-hover>td, 
.table_style .ui-jqgrid .ui-widget-content .ui-state-hover>td, 
.table_style .ui-jqgrid .ui-state-focus>td, 
.table_style .ui-jqgrid .ui-widget-content .ui-state-focus>td, 
.table_style .ui-jqgrid .ui-widget-header .ui-state-focus>td {border-radius: 0;}
.table_style .ui-jqgrid .ui-paging-info{margin-top:0;}
.table_style .ui-jqgrid .ui-jqgrid-pager{border-top:none;}
.table_style .ui-jqgrid .ui-jqgrid-pager .ui-pg-div{color:#c7fffc;}
.table_style table.ui-pg-table tr td:first-child {width: auto !important;}
.table_style .ui-jqgrid .ui-jqgrid-pager{height:28px;}

/* report table */
.table_style.report_day .ui-jqgrid tr.jqgrow td{padding-top:12px; padding-bottom:12px;}
.table_style.report_day .ui-jqgrid tr.footrow td{padding-top:18px; padding-bottom:18px;}

.table_style.report_month .ui-jqgrid .ui-jqgrid-htable tr[class*="ui-jqgrid-labels"] th{padding-top:2px; padding-bottom:2px;}
.table_style.report_month .ui-jqgrid tr.jqgrow td{padding-top:4px; padding-bottom:4px; line-height: 15px;}
.table_style.report_month .ui-jqgrid tr.footrow td{padding-top:12px; padding-bottom:12px;}

.table_style.report_year .ui-jqgrid .ui-jqgrid-htable tr[class*="ui-jqgrid-labels"] th{padding-top:9px; padding-bottom:9px;}
.table_style.report_year .ui-jqgrid tr.jqgrow td{padding-top:20px; padding-bottom:20px;}
.table_style.report_year .ui-jqgrid tr.footrow td{padding-top:12px; padding-bottom:13px;}

.table_style.report_raw .ui-jqgrid tr.jqgrow td{padding-top:6px; padding-bottom:6px;}
.table_style.report_raw .ui-jqgrid tr.footrow td{padding-top:6px; padding-bottom:6px;}

/* alarm */
.table_style.alarm .ui-jqgrid tr.jqgrow td{line-height: 16px;}
.table_style.alarm .ui-jqgrid .ui-jqgrid-htable tr[class*="ui-jqgrid-labels"]>th {padding-top: 11px; padding-bottom: 11px; }

/* tab_list_view */
.tab_list_view{overflow: hidden; padding-left: 10px;}
.tab_list_view li{float: left; /* border-right:2px solid #fff; */}
.tab_list_view li:first-child a{border-radius: 20px 0 0 20px;}
.tab_list_view li:last-child a{border-radius: 0 20px 20px 0;}
.tab_list_view li:last-child{border-right:none;}
.tab_list_view li a{display: block; font-size:14px; padding:0 14px; color: #85fff7; line-height: 30px; border: 1px solid #85fff7;}
.tab_list_view li a:hover{font-weight: bold; background: #4c7090; color: #fff;}
.tab_list_view li a.on{color: #00356a; font-weight: bold; background: #85fff7;}

/* sub_layout_l50_r50 */
.sub_layout_l50_r50{overflow:visible; display: inline-block; width: 100%;}
.sub_layout_l50_r50>li{float: left; width:50%; box-sizing: border-box;}
.sub_layout_l50_r50>li .circle{width: 70px; height: 70px; line-height: 70px; border-radius: 50%; text-align: center; font-size: 50px; color: #032f46; position: relative; bottom: 0; z-index: 2; float: left; top: 12px; left: -35px; border: 2px solid #004239; box-shadow: 0 0 0 3px #2f9e98;
	background: rgb(152,245,236);
	background: -moz-linear-gradient(0deg, rgba(152,245,236,1) 0%, rgba(0,160,153,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(152,245,236,1) 0%, rgba(0,160,153,1) 100%);
	background: linear-gradient(0deg, rgba(152,245,236,1) 0%, rgba(0,160,153,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#98f5ec",endColorstr="#00a099",GradientType=1);
}
.sub_layout_l50_r50>li .circle>i{padding-top: 10px;}
.sub_layout_l50_r50>li.left{padding: 0 0 0 40px;}
.sub_layout_l50_r50>li.left .in_cont {border-top: none; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; border-right-width: 2px; margin-top: 35px; right: -1px; position: relative; padding-top: 0px;}
.sub_layout_l50_r50>li.right{padding: 0 40px 0 0;}
.sub_layout_l50_r50>li.right .in_cont {border-bottom: none; border-top-left-radius: 20px; border-top-right-radius: 20px; border-left-width: 2px; margin-bottom: 60px; left: -1px; position: relative; padding-bottom: 0px; padding-left: 50px;}
.sub_layout_l50_r50>li.right .circle {float: right; top: 105px; left: 35px;}

/* in_sub_title */
.in_sub_title{font-size: 18px; color: #b3ffe6; font-weight: normal;}

/* etc_cont */
.in_cont.etc_set{padding: 28px 20px; background:none; padding-left: 72px; border: 2px solid #2b9690;}
.etc_cont{padding:15px 10px; font-size: 15px; color: #666;}
.etc_cont input{font-size:14px; color:#fff; padding:0 11px; background:none; border:1px solid #85fff7; /* border-radius: 5px; */ height:33px; width: 250px; vertical-align: middle;border-top: none; border-right: none; border-left: none; outline: 0; text-overflow: ellipsis;}
.etc_cont input:focus{border-bottom: 2px solid #4285f4;}
.etc_cont input::placeholder{color: #7fa0a0;}
.etc_cont .select2_wrap .select2.select2-container{width: 150px !important;}

/* btn_save */
.btn_save{display: inline-block; vertical-align: middle; font-size:14px; color:#85fff7; text-align:center; height:33px; border:1px solid #85fff7; padding:0 15px; border-radius:20px; cursor: pointer; margin-left:6px; font-weight: 600; outline: none; background:none;}
.btn_save:hover{background-color: #85fff7; color: #001e73;}
.btn_save:before{content: "\f00c"; font-family: 'Font Awesome\ 5 Free'; font-weight: 900; padding-right: 5px;}