.content h1 {font-size:27px; color:#00002a; font-weight:700; padding-left:35px; padding-top:25px; margin-bottom:25px;}
.content .right {position: absolute; right:35px; top:20px; }
.content .right button {margin-left:3px; border:none; background:none;}

.main {height:100%; width:100%; overflow-y:scroll; padding:25px 35px 25px 35px;}
.main::-webkit-scrollbar{display: none;}
.main:after {content:''; clear:both; display: table;}

.main .box_cont {background:#F7F8FA; border:1px solid #F4F6F9; padding:22px 20px 20px 20px; border-radius:25px;}
.main .box_cont2 {background:#F7F8FA; border:1px solid #F4F6F9; padding:22px 20px 20px 20px; border-radius:25px; margin-top:20px;}
.main .box_cont:after {content:''; clear:both; display: table;}
.main .box_cont2:after {content:''; clear:both; display: table;}
.main .box1:after {content:''; clear:both; display: table;}
.main .box1 { float:left; width:Calc(100% / 2);padding-right:25px; border-right:1px solid #ebeef1}
.main .box1 h2 {font-size:18px; color:#00002A; padding-left:6px;}
.main .box1 h2:after {content:''; clear:both; display: table}
.main .box1 h2 a {float:right; font-size:13px; color:#4440e0; font-weight:600; margin-right:6px; position: relative; top:5px;}
.main .box1 h2 a img {margin:-2px 0 0 5px;}
.main .box1 .monitor_cont:after {content:''; clear:both; display: table;}
.main .box1 .monitor_cont .monitor_box {float:left; width:Calc((100% - 20px) / 2); margin-top:20px; position: relative; border-radius:15px; overflow: hidden; border:4px solid rgba(255,255,255,0)}
.main .box1 .monitor_cont .monitor_box:nth-child(2n) {margin-left:20px; }
.main .box1 .monitor_cont .monitor_box.on {border:4px solid #514EE5;}
.main .box1 .monitor_cont .monitor_box .view_on {position: absolute; left: 150px; top: 45px; width:100px;}
.main .box1 .monitor_cont .monitor_box .img {width:100%; /*padding-top:60%;*/ height:225px; position: relative}
.main .box1 .monitor_cont .monitor_box .img img {position: absolute; left:50%; top:0; transform: translate(-50%,0); max-width:100%; max-height:100%; width:100%; height:100%;}
.main .box1 .monitor_cont .monitor_box .txt {position: absolute; left:0; bottom:0; width:100%; background:rgba(89,89,89,.1); backdrop-filter: blur(8px);height:35px;}
.main .box1 .monitor_cont .monitor_box .txt p {font-size:14px; color:#fff; padding:9px 18px; display: inline-block;}
.main .box1 .monitor_cont .monitor_box .txt button {float:right; height:25px; padding:0 13px; font-size:13px; color:#fff;border-radius:50px; background:#808096; border:none; margin:5px 5px;}
.main .box1 .monitor_cont .monitor_box .txt button.on {background:#514EE5; margin-left:-2px;}

.main .box2:after {contemt:''; clear:both; display: table;}
.main .box2 {float:left; width:Calc(100% / 2); position: relative; padding-left:27px;}
.main .box2 h2 {font-size:18px; color:#00002A; padding-left:6px; margin-bottom:10px;}
.main .box2 .tab {position: absolute; right:0px; top:-5px; padding:5px; background:#F1F3F6; border:1px solid #EDF0F6; border-radius:50px; width:180px;}
.main .box2 .tab:after {content:''; clear:both; display: table;}
.main .box2 .tab li {float:left; font-size:14px; font-weight:400; padding:5px 0 6px 0 ; width:50%; border-radius:50px; color:#C3C3D2; text-align: center; cursor: pointer;}
.main .box2 .tab li.on {color:#514EE5; background:#fff; font-weight:600;}

.main .box2 .graph_cont1:after {content:''; clear:both; display: table;}
.main .box2 .graph_cont1 .graph_box {float:left; width:Calc((100% - 20px) / 2); margin-top:20px; position: relative; }
.main .box2 .graph_cont1 .graph_box:nth-child(2n) {margin-left:20px; }
.main .box2 .graph_cont1 .graph_box .g_view {width:100%; /*padding-top:51%;*/  height:198px; background:#fff; border-radius:15px; margin-top:12px;}
.main .box2 .graph_cont1 .graph_box h3 {font-size:15px; color:#00002a; font-weight:600; padding-left:6px;}
.main .box2 .graph_cont1 .graph_box h3:after {content:''; clear:both; display: table;}
.main .box2 .graph_cont1 .graph_box h3 a {float:right; font-size:13px; color:#4440E0; font-weight:600; position: relative; top:1px;}
.main .box2 .graph_cont1 .graph_box h3 a img {margin:-2px 3px 0 7px;}

.main .box2 .graph_cont2 {display: none;}
.main .box2 .graph_cont2 .graph_box {width:100%; margin-top:30px;}
.main .box2 .graph_cont2 .graph_box h3 {font-size:15px; color:#00002a; font-weight:600; padding-left:6px;}
.main .box2 .graph_cont2 .graph_box h3:after {content:''; clear:both; display: table;}
.main .box2 .graph_cont2 .graph_box h3 a {float:right; font-size:13px; color:#4440E0; font-weight:600; position: relative; top:1px;}
.main .box2 .graph_cont2 .graph_box h3 a img {margin:-2px 3px 0 7px;}
.main .box2 .graph_cont2 .graph_box .g_view {width:100%; height:428px; background:#fff; margin-top:20px; border-radius:15px;}
.main .box2 .graph_cont2 .graph_box .graph_info {float:right; margin-top:15px; padding-right:10px;}
.main .box2 .graph_cont2 .graph_box .graph_info:after {content:''; clear:both; display: table;}
.main .box2 .graph_cont2 .graph_box .graph_info li {float:left; margin-left:17px; font-size:13px; font-weight:600;position:relative; }
.main .box2 .graph_cont2 .graph_box .graph_info li:after {content:''; position: absolute; right:-4px; top:0px; width:4px; height:4px; border-radius:50%; background:#4AE731;}
.main .box2 .graph_cont2 .graph_box .graph_info li.no:after {background:#E73131;}

.main .box2 .graph_cont2 .graph_box .graph_info li span {width:7px; height:7px; display: inline-block; border-radius:50%; margin:0 3px 0 0; position: relative; top:-1px;}
.main .box2 .graph_cont2 .graph_box .graph_info li.col1 {color:#161485}
.main .box2 .graph_cont2 .graph_box .graph_info li.col1 span {background:#161485;}
.main .box2 .graph_cont2 .graph_box .graph_info li.col2 {color:#514EE5}
.main .box2 .graph_cont2 .graph_box .graph_info li.col2 span {background:#514EE5;}
.main .box2 .graph_cont2 .graph_box .graph_info li.col3 {color:#9F9DEB}
.main .box2 .graph_cont2 .graph_box .graph_info li.col3 span {background:#9F9DEB;}
.main .box2 .graph_cont2 .graph_box .graph_info li.col4 {color:#C3C6CC}
.main .box2 .graph_cont2 .graph_box .graph_info li.col4 span {background:#C3C6CC;}


.main .box3 { float:left; width:Calc(100%  / 2); padding:0 25px 0 0; border-right:1px solid #ebeef1}
.main .box3:after {content:''; clear:both; display: table;}
.main .box3 h2 {font-size:16px; color:#00002A; padding-left:6px; position: relative}
.main .box3 h2 a {display: inline-block; margin-left:10px; font-size:13px; color:#4440E0; font-weight:600; position: absolute; right:6px; top:-37px;}
.main .box3 h2 a img {margin:-2px 0 0 5px;}
.main .box3 .box3_1 {float:left; width:155px; margin-right:10px; }
.main .box3 .box3_1 ul {margin-top:15px; position: relative}
.main .box3 .box3_1 ul li {height:96px; border-radius:10px; background:#fff; color:#00002a; font-size:14px; font-weight:600; padding:15px 17px; margin-top:10px;}
.main .box3 .box3_1 ul li span {display: inline-block; width:100%; margin-top:14px; font-size:12px; color:#514ee5; font-weight:700;}
.main .box3 .box3_1 ul li b {font-size:18px; display: inline-block; width:100%; margin-top:1px; font-weight:700;}
.main .box3 .box3_1 ul li:last-child {height:auto; position: absolute; left:0; bottom:-49px; width:410px; padding:7px 16px;}

.main .box3 .box3_1 ul li p {font-size:12px; color:#A3A3B7; margin-top:0px; line-height:26px; margin-left:15px; font-weight:500; display: inline-block}
.main .box3 .box3_1 ul li p:after {content:''; clear:both; display: table;}
.main .box3 .box3_1 ul li p strong {width:43px; height:26px; line-height:26px; border-radius:5px; background:#f7f8fa; text-align: center; float:left; margin-right:8px; font-weight:600;}

.main .box3 .box3_2 {float:right; width:calc(100% - 165px);  background:#fff; border-radius:10px; margin-top:15px; height:308px; position: relative;}
.main .box3 .box3_2 .graph_info {position: absolute; right:5px; top:-33px;}
.main .box3 .box3_2 .graph_info li {float:left; margin-left:15px; font-size:13px; font-weight:600;position:relative; }
.main .box3 .box3_2 .graph_info li span {width:7px; height:7px; display: inline-block; border-radius:50%; margin:0 3px 0 0; position: relative; top:-1px;}
.main .box3 .box3_2 .graph_info li.col1 {color:#161485}
.main .box3 .box3_2 .graph_info li.col1 span {background:#161485;}
.main .box3 .box3_2 .graph_info li.col2 {color:#514EE5}
.main .box3 .box3_2 .graph_info li.col2 span {background:#514EE5;}
.main .box3 .box3_2 .graph_info li.col3 {color:#9F9DEB}
.main .box3 .box3_2 .graph_info li.col3 span {background:#9F9DEB;}
.main .box3 .box3_2 .graph_info li.col4 {color:#C3C6CC}
.main .box3 .box3_2 .graph_info li.col4 span {background:#C3C6CC;}

.main .box3 .box3_2 .play_bt {position: absolute; right:0px; top:-43px; height:38px; background:#fff; border:1px solid #F4F6F9; padding:0 16px 0 8px; color:#A3A3B7; border-radius:10px; font-size:14px; font-weight:600;}
.main .box3 .box3_2 .play_bt img {margin:-2px 5px 0 0;}
.main .box3 .box3_2 .play_bt img.play {display: none;}
.main .box3 .box3_2 .play_bt img.stop {display: inline-block;}
.main .box3 .box3_2 .play_bt.on {color:#514EE5;}
.main .box3 .box3_2 .play_bt.on img.play {display: inline-block;}
.main .box3 .box3_2 .play_bt.on img.stop {display: none;}


.main .box3 .box3_3 {float:right; width:100%; margin-top:59px; background:#fff; border-radius:10px; height:308px; position: relative; }
.main .box3 .box3_3 .ck_box {position: absolute; right:137px; top:-42px;  z-index: 1; }
.main .box3 .box3_3 .ck_box input[type="checkbox"] {display: none;}
.main .box3 .box3_3 .ck_box input[type="checkbox"] + label {display: inline-block; position: relative; font-size:12px; color:#808096; font-weight:600; cursor: pointer; height:26px;border-radius:30px; padding:0 0px; line-height:25px; padding-left:30px; }
.main .box3 .box3_3 .ck_box input[type="checkbox"] + label span {position: absolute; left:10px; top:5px; width:15px; height:15px; border-radius:3px; background:#F7F8FA; border:1px solid #c7c7d1}
.main .box3 .box3_3 .ck_box input[type="checkbox"]:checked + label {color:#514EE5}
.main .box3 .box3_3 .ck_box input[type="checkbox"]:checked + label span {background:url('../img/check_icon.svg')no-repeat center #514EE5; border:none;}

.main .box3 .box3_3 .radio_box {position: absolute; right:0px; top:-43px; z-index: 1;width:125px;}
.main .box3 .box3_3 .radio_box li {float:left; width:calc(100% / 3); }
.main .box3 .box3_3 .radio_box li input[type="radio"] {display: none;}
.main .box3 .box3_3 .radio_box li input[type="radio"] + label {height:26px;font-size:12px; color:#808096; text-align:center; line-height:25px; font-weight:500; display: inline-block; width:100%; cursor: pointer; text-align: center; background:#fff; border:1px solid #E9ECF0;}
.main .box3 .box3_3 .radio_box li input[type="radio"]:checked + label {background:#514EE5; color:#fff; font-weight:600; border:1px solid #514EE5}
.main .box3 .box3_3 .radio_box li:first-child input[type="radio"] + label {border-radius:20px 0 0 20px; padding-left:3px;}
.main .box3 .box3_3 .radio_box li:last-child input[type="radio"] + label {border-radius:0 20px 20px 0; padding-right:1px;}


.main .box_cont2 .top:after {content:''; clear:both; display: table}
.main .box_cont2 .top .select2 {cursor: pointer; float:left; width:160px; height:21px; border:none; background:none;position: relative; z-index: 2; }
.main .box_cont2 .top .select2 .label {width:100%; text-align:left; border:none; height:21px; padding-left: 0px; background: none; cursor: pointer; font-size:18px; padding-left:6px; color:#00002A; background:url('../img/arrow_down.svg')no-repeat center right 2px; border-radius:0px;font-weight:700;}
.main .box_cont2 .top .select2 .optionList {position: absolute; top:30px; left: 0px; width: 100%;  max-height: 0; transition: .3s ease-in;   z-index: 1;   overflow:hidden; border-radius:10px; font-weight:400; border:1px solid rgba(255,255,255,.0);text-align: center;}
.main .box_cont2 .top .select2.active .optionList {max-height: 170px;overflow:auto; background:#fff; border:1px solid #E9ECF0}
.main .box_cont2 .top .select2 .optionItem { padding:13px 2px 0 0; font-size:15px; color:#808096; font-weight:500; }
.main .box_cont2 .top .select2 .optionItem:last-child {padding-bottom:14px;}
.main .box_cont2 .top .select2 .optionList::-webkit-scrollbar {width: 6px;}
.main .box_cont2 .top .select2 .optionList::-webkit-scrollbar-thumb {background:  none; border-radius: 45px;}

.main .box_cont2 .top {margin-bottom:20px;}
.main .box_cont2 .top .select3 {cursor: pointer; float:right; width:75px; height:26px; border:none; background:none;position: relative; z-index: 2; margin-top:-6px;}
.main .box_cont2 .top .select3 .label {width:100%; text-align:left; border:none; height:35px; background: none; cursor: pointer; font-size:16px; padding-left:15px; color:#fff; background:url('../img/arrow_down2.svg')no-repeat center right 15px #514EE5; border-radius:0px;font-weight:400;border-radius:40px; }
.main .box_cont2 .top .select3 .optionList {position: absolute; top:40px; left: 0px; width: 100%;  max-height: 0; transition: .3s ease-in;   z-index: 1;   overflow:hidden; border-radius:10px; font-weight:400; border:1px solid rgba(255,255,255,.0);text-align: center;}
.main .box_cont2 .top .select3.active .optionList {max-height: 170px;overflow:auto; background:#fff; border:1px solid #E9ECF0}
.main .box_cont2 .top .select3 .optionItem { padding:13px 2px 0 0; font-size:15px; color:#808096; font-weight:500; }
.main .box_cont2 .top .select3 .optionItem:last-child {padding-bottom:14px;}
.main .box_cont2 .top .select3 .optionList::-webkit-scrollbar {width: 6px;}
.main .box_cont2 .top .select3 .optionList::-webkit-scrollbar-thumb {background:  none; border-radius: 45px;}

.main .box4 { float:left; width:Calc(100%  / 2);  padding:0 0 0 25px; position: relative}
.main .box4:after {content:''; clear:both; display: table;}
.main .box4 h2 {font-size:16px; color:#00002A; padding-left:6px;}

.main .box4 .sensor_select {position: relative; }
.main .box4 .sensor_select .open_sensor {border:none; height:21px; background: none; cursor: pointer; font-size:16px; padding-left:6px; color:#00002A; background:url('../img/arrow_down.svg')no-repeat center right 2px; border-radius:0px;font-weight:700; width:100px; text-align: left;}
.main .box4 .sensor_select .sensor_tb {display:none; position: absolute; left:0; top:30px; width:450px; backgrounD:#fff; border:1px solid #ebeef1; border-radius:15px; padding:15px 15px 0 15px; z-index: 3; box-shadow: 0 0 10px rgba(0,0,0,.1);}
.main .box4 .sensor_select .sensor_tb.on {display:block;}
.main .box4 .sensor_select .sensor_tb .sensor_close {position: absolute; right:10px; top:10px; border:none; background:none;}
.main .box4 .sensor_select .sensor_tb .input_box:after {content:''; clear:both; display: table}
.main .box4 .sensor_select .sensor_tb .input_box input[type="text"] {float:left; width:250px; height:35px; background:#F7F8FA; border:none; border-radius:5px; font-size:14px; padding:0 15px; color:#222;}
.main .box4 .sensor_select .sensor_tb .input_box input[type="text"]::placeholder {color:#A3A3B7}
.main .box4 .sensor_select .sensor_tb .input_box button {float:left; height:35px; width:35px; border:none; background:#4440e0; border-radius:5px; margin-left:5px;}
.main .box4 .sensor_select .sensor_tb .tb_scroll {width:100%; margin-top:10px; height:255px; overflow-y: scroll; padding-bottom:10px;}
.main .box4 .sensor_select .sensor_tb .tb_scroll::-webkit-scrollbar {display:none;}
.main .box4 .sensor_select .sensor_tb table {width:100%; border-collapse: collapse;}
.main .box4 .sensor_select .sensor_tb table th {background:#F7F8FA; padding:10px 10px; font-size:13px; text-align: left; font-weight:400; color:#A3A3B7; position: sticky; top:0; z-index: 1;}
.main .box4 .sensor_select .sensor_tb table th:first-child {padding-left:15px;}
.main .box4 .sensor_select .sensor_tb table td {font-size:13px; color:#808096; border-bottom:1px solid #ebeef1; padding:8px 10px;}
.main .box4 .sensor_select .sensor_tb table td:first-child {padding-left:15px;}
.main .box4 .sensor_select .sensor_tb table td button {padding:3px 7px; font-size:13px; background:#fff; border-radius:4px; color:#808096; border:1px solid #b6b6bf; }
.main .box4 .sensor_select .sensor_tb table tr:last-child td {border-bottom:none;}
    /*.main .box4 .select {cursor: pointer; float:left; width:90px; height:21px; border:none; background:none;position: relative; z-index: 2;}*/
/*.main .box4 .select .label {width:100%; text-align:left; border:none; height:21px; padding-left: 0px; background: none; cursor: pointer; font-size:16px; padding-left:6px; color:#00002A; background:url('../img/arrow_down.svg')no-repeat center right 2px; border-radius:0px;font-weight:700;}*/
/*.main .box4 .select .optionList {position: absolute; top:30px; left: 0px; width: 100%;  max-height: 0; transition: .3s ease-in;   z-index: 1;   overflow:hidden; border-radius:10px; font-weight:400; border:1px solid rgba(255,255,255,.0);text-align: center;}*/
/*.main .box4 .select.active .optionList {max-height: 170px;overflow:auto; background:#fff; border:1px solid #E9ECF0}*/
/*.main .box4 .select .optionItem { padding:9px 2px 0 0; font-size:14.5px; color:#808096; font-weight:500; }*/
/*.main .box4 .select .optionItem:last-child {padding-bottom:10px;}*/
/*.main .box4 .select .optionList::-webkit-scrollbar {width: 6px;}*/
/*.main .box4 .select .optionList::-webkit-scrollbar-thumb {background:  none; border-radius: 45px;}*/

.main .box4 .box4_1 {float:left; width:155px; margin-right:10px; }
.main .box4 .box4_1 ul {margin-top:15px;}
.main .box4 .box4_1 ul li {height:96px; border-radius:10px; background:#fff; color:#00002a; font-size:14px; font-weight:600; padding:15px 17px; margin-top:10px;}
.main .box4 .box4_1 ul li span {display: inline-block; width:100%; margin-top:14px; font-size:12px; color:#514ee5; font-weight:700;}
.main .box4 .box4_1 ul li b {font-size:18px; display: inline-block; width:100%; margin-top:1px; font-weight:700;}

.main .box4 .box4_1 ul li p {font-size:12px; color:#A3A3B7; margin-top:5px; line-height:26px; margin-left:-3px; font-weight:500;}
.main .box4 .box4_1 ul li p:first-child {margin-top:8px; }
.main .box4 .box4_1 ul li p:after {content:''; clear:both; display: table;}
.main .box4 .box4_1 ul li p strong {width:43px; height:26px; line-height:26px; border-radius:5px; background:#f7f8fa; text-align: center; float:left; margin-right:8px; font-weight:600;}

.main .box4 .box4_2 {float:right; width:calc(100% - 165px);  background:#fff; border-radius:10px; margin-top:15px; height:308px; position: relative;}
.main .box4 .box4_2 .graph_info {position: absolute; right:5px; top:-33px;}
.main .box4 .box4_2 .graph_info li {float:left; margin-left:15px; font-size:13px; font-weight:600;position:relative; }
.main .box4 .box4_2 .graph_info li span {width:7px; height:7px; display: inline-block; border-radius:50%; margin:0 3px 0 0; position: relative; top:-1px;}
.main .box4 .box4_2 .graph_info li.col1 {color:#161485}
.main .box4 .box4_2 .graph_info li.col1 span {background:#161485;}
.main .box4 .box4_2 .graph_info li.col2 {color:#514EE5}
.main .box4 .box4_2 .graph_info li.col2 span {background:#514EE5;}
.main .box4 .box4_2 .graph_info li.col3 {color:#9F9DEB}
.main .box4 .box4_2 .graph_info li.col3 span {background:#9F9DEB;}
.main .box4 .box4_2 .graph_info li.col4 {color:#C3C6CC}
.main .box4 .box4_2 .graph_info li.col4 span {background:#C3C6CC;}

.main .box4 .box4_2 .play_bt {position: absolute; right:0px; top:-43px; height:38px; background:#fff; border:1px solid #F4F6F9; padding:0 16px 0 8px; color:#A3A3B7; border-radius:10px; font-size:14px; font-weight:600;}
.main .box4 .box4_2 .play_bt img {margin:-2px 5px 0 0;}
.main .box4 .box4_2 .play_bt img.play {display: none;}
.main .box4 .box4_2 .play_bt img.stop {display: inline-block;}
.main .box4 .box4_2 .play_bt.on {color:#514EE5;}
.main .box4 .box4_2 .play_bt.on img.play {display: inline-block;}
.main .box4 .box4_2 .play_bt.on img.stop {display: none;}

.main .box4 .box4_3 {float:right; width:100%; margin-top:59px; background:#fff; border-radius:10px; height:308px; position: relative;}
.main .box4 .box4_3 .ck_box {position: absolute; right:137px; top:-42px;  z-index: 1; }
.main .box4 .box4_3 .ck_box input[type="checkbox"] {display: none;}
.main .box4 .box4_3 .ck_box input[type="checkbox"] + label {display: inline-block; position: relative; font-size:12px; color:#808096; font-weight:600; cursor: pointer; height:26px;border-radius:30px; padding:0 0px; line-height:25px; padding-left:30px; }
.main .box4 .box4_3 .ck_box input[type="checkbox"] + label span {position: absolute; left:10px; top:5px; width:15px; height:15px; border-radius:3px; background:#F7F8FA; border:1px solid #c7c7d1}
.main .box4 .box4_3 .ck_box input[type="checkbox"]:checked + label {color:#514EE5}
.main .box4 .box4_3 .ck_box input[type="checkbox"]:checked + label span {background:url('../img/check_icon.svg')no-repeat center #514EE5; border:none;}

.main .box4 .box4_3 .radio_box {position: absolute; right:0px; top:-43px; z-index: 1;width:125px;}
.main .box4 .box4_3 .radio_box li {float:left; width:calc(100% / 3); }
.main .box4 .box4_3 .radio_box li input[type="radio"] {display: none;}
.main .box4 .box4_3 .radio_box li input[type="radio"] + label {height:26px;font-size:12px; color:#808096; text-align:center; line-height:25px; font-weight:500; display: inline-block; width:100%; cursor: pointer; text-align: center; background:#fff; border:1px solid #E9ECF0;}
.main .box4 .box4_3 .radio_box li input[type="radio"]:checked + label {background:#514EE5; color:#fff; font-weight:600; border:1px solid #514EE5}
.main .box4 .box4_3 .radio_box li:first-child input[type="radio"] + label {border-radius:20px 0 0 20px; padding-left:3px;}
.main .box4 .box4_3 .radio_box li:last-child input[type="radio"] + label {border-radius:0 20px 20px 0; padding-right:1px;}



.js-plotly-plot .plotly .main-svg {border-radius:15px !important;}