/*
 * @Date: 2023-09-25 11:48:13
 * @LastEditTime: 2023-11-26 20:07:45
 * @Description: 
 */

@font-face {
  font-family: "Microsoft YaHei Bold";
  src: url('./font/MSYHBD.TTC') format('truetype');
}
#devicedata1{
  width:50%;
}
.devicenamename{
  width:100%;
}
.inner {
  position: relative;
  width: 50px;
  height: 25px;
  background: linear-gradient(dimgray, silver);
  border-radius: 50px;
  /* box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.7); */
}

.inner::before {
  content: '';
  font-size: 25px;
  color: #808080;
  line-height: 100px;
  text-align: center;
  position: absolute;
  left: 0px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translate(0, -50%);
  /* background: radial-gradient(whitesmoke, silver); */
  background: #fff;
  border-radius: 48px;
  transition: left 0.5s ease-in-out;
}

.toggle {
  position: absolute;
  width: 100px;
  height: 100px;
  z-index: 3;
  cursor: pointer;
  filter: opacity(0%);
}

.toggle:checked~.inner::before {
  content: "";
  color: limegreen;
  left: 50%;
}

.toggle:checked~.inner {
  background: #4A65AB
}

html,
body {
  /* overflow-x: hidden;
    overflow-y: hidden; */
  padding: 0;
  margin: 0;
  user-select: none;
}

.itemcenter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.text333 {
  font-family: "Microsoft YaHei Bold";
  font-weight: 700;
  font-size: 24px;
  line-height: 64px;
  text-align: right;
  color: #000;
}

.titleTetx {
  font-family: "Microsoft YaHei Bold";
  font-weight: 700;
  font-size: 16px;
  line-height: 30px;
  text-align: left;
  color: #000;
  opacity: 0.6;
}

.titleTetx2 {
  font-family: "Microsoft YaHei Bold";
  font-weight: 700;
  font-size: 14px;
  line-height: 30px;
  text-align: left;
  color: #000;
  opacity: 0.6;
}

/* 视频弹框 */
#video {
  position: absolute;
  z-index: 999;
  /* width: 50rem;
  height: 40rem; */
  /* background: #000; */
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  display: none;
}

video {
  width: 100%;
  height: 100%;
}

/* 三维弹框 */
.devicename {
  display: none;
  height: 400px;
  width: 400px;
  border: 2px solid #44d7f7;
  border-radius: 10px;
  position: absolute;
  z-index: 999;
  background: rgba(254, 254, 254, 0.9);
}

.names {
  display: inline-block;
  width: 8px;
  height: 30px;
  background: #44d7f7;
  margin: 10px 10px 0 10px;
}

.name1 {
  color: #7a7d84;
  font-size: 23px;
  font-weight: bold;
  position: absolute;
  left: 30px;
  top: 10px;
}

.devicenamename {
  display: flex;
  margin: 12px 0 18px 15px;
  align-items: center;
  font-size: 18px;
}

.round {
  display: inline-block;
  border-radius: 50px;
  width: 10px;
  height: 10px;
  background: #44d7f7;
}

.round1 {
  margin: 0 8px 0 10px;
  color: #7a7d84;
  font-weight: bold;
  display: inline-block;
  width: 100px;
  text-align: justify;
  text-align-last: justify;
}

.round2 {
  color: #44d7f7;
  font-weight: bold;
}

.colon {
  color: #7a7d84;
  margin: 0 10px 0 0px;
}

/* 弹框温度 */
.temperaturespring {
  width: 13rem;
  height: 12rem;
  border: #44d7f7 2px solid;
  border-radius: 5px;
  position: absolute;
  z-index: 999;
  background: rgba(254, 254, 254, 0.9);
  display: none;
}

.temperaturespringas {
  width: 13rem;
  height: 10rem;
  border: #44d7f7 2px solid;
  border-radius: 5px;
  position: absolute;
  z-index: 999;
  background: rgba(254, 254, 254, 0.9);
  display: none;
}

.sp1 {
  display: inline-block;
  width: 5px;
  height: 22px;
  background: #44d7f7;
  margin: 0 20px 0 20px;
}

.sp1text {
  font-weight: bold;
  font-size: 22px;
  color: #7a7d84;
}

.spx {
  position: absolute;
  right: 10px;
  color: #7a7d84;
  font-size: 22px;
  cursor: pointer;
}

.spyuan {
  border-radius: 50px;
  width: 10px;
  height: 10px;
  background: #44d7f7;
  margin: 0 20px 0px 20px;
}

.sp1wd {
  color: #7a7d84;
  font-size: 19px;
  font-weight: bold;
}

.sp1shuj {
  color: #44d7f7;
  font-weight: bold;
  font-size: 19px;
  margin-left: 5px;
}

.temperaturesprings {
  width: 16rem;
  height: 18rem;
  border: #44d7f7 2px solid;
  border-radius: 5px;
  position: absolute;
  display: none;
  z-index: 999;
  background: rgba(254, 254, 254, 0.9);
}

.temperaturespringss {
  width: 16rem;
  height: 9rem;
  border: #44d7f7 2px solid;
  border-radius: 5px;
  position: absolute;
  display: none;
  z-index: 999;
  background: rgba(254, 254, 254, 0.9);
}

.textColor {
  font-family: "Microsoft YaHei";
  font-weight: 400;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  color: #005d5a;
}

.textColor2 {
  color: #000000;
  font-size: 20px;
  font-family: "Microsoft YaHei";
  font-weight: 700;
  letter-spacing: 0;
}

.textColor3 {
  color: #000000;
  font-size: 14px;
  font-family: "Microsoft YaHei";
  font-weight: 700;
  letter-spacing: 0;
}

.temperaturespringssc {
  width: 16rem;
  height: 16rem;
  border: #44d7f7 2px solid;
  border-radius: 5px;
  position: absolute;
  z-index: 999;
  background: rgba(254, 254, 254, 0.9);
  display: none;
}

#test1 {
  border: none;
  border-radius: 8px;
  outline: none;
  width: 100px;
  height: 25px;
  background: #2000;
  text-indent: 3ch;
  line-height: 25px;
}

#test2 {
  border: none;
  outline: none;
  width: 120px;
  background: #2000;
  height: 25px;
  font-size: 14px;
  border-radius: 8px;
  /* text-indent: 3ch; */
  line-height: 25px;
  text-indent: 2ch;
}

.icon-riqi {
  color: #535f7e;
  position: absolute;
  right: 10px;
  top: 5px;
  cursor: pointer;
}

.icon-caret-left {
  color: #489be0;
}

.icon-caret-left:before {
  font-size: 26px;
}

.icon-caret-right {
  color: #489be0;
}

.icon-caret-right:before {
  font-size: 26px;
}

.rahmen {
  position: absolute;
  display: flex;
  align-items: center;
  top: 38px;
  right: -10px;
}

.rahmen1 {
  width: 10px;
  height: 2px;
  background: #489be0;
}

.rahmen2 {
  width: 2px;
  height: 17px;
  background: #489be0;
  margin-left: 8px;
}

.rahmen3 {
  width: 10px;
  height: 2px;
  background: #489be0;
}

.frame {
  position: absolute;
  display: flex;
  align-items: center;
  top: 38px;
  left: -21px;
}

.frame1 {
  width: 10px;
  height: 2px;
  background: #489be0;
}

.frame2 {
  width: 2px;
  height: 17px;
  background: #489be0;
}

.frame3 {
  width: 10px;
  height: 2px;
  background: #489be0;
}

.pue {
  position: relative;
  z-index: 1;
}

.standard {
  position: absolute;
  z-index: 2;
  width: 200px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  left: 50%;
  margin-left: -100px;
  top: 47px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
}

.datetext {
  font-size: 14px;
  position: absolute;
  top: 3px;
  left: 104px;
}

.date {
  position: relative;
  background: #2000;
  height: 25px;
  border: 1px solid #b7c6cc;
  border-radius: 8px;
  margin-top: 9px;
}

.foot {
  width: 100%;
  position: fixed;
  bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.factor {
  position: absolute;
  top: 21px;
  right: 35px;
}

.borders {
  width: 100%;
  height: 40px;
  border: 1px #9fd5ff dotted;
  background: repeating-linear-gradient(to left,
      #2000,
      rgb(202, 234, 242, 0.2),
      rgb(202, 234, 242, 0.5));
  line-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 10px 0 15px 0;
}

.imgs_bg1 {
  position: absolute;
  top: 65px;
  right: 30px;
  height: 10px;
  width: 35%;
}

.imgs_bg2 {
  position: absolute;
  top: 135px;
  right: 38px;
  height: 10px;
  width: 35%;
}

.box {
  display: flex;
  align-items: center;
  /* justify-content: center; */
  height: 35px;
  /* margin-bottom: 5px; */
  font-size: 16px;
  width: 99%;
  margin: 0;
}

.pointer {
  cursor: pointer;
}

#report {
  height: 88%;
  width: 93%;
  overflow-y: auto;
}

#echarts {
  /* margin: 25px 0 0 0; */
  width: 100%;
  height: 150px;
}

.puenum {
  color: #4a9de1;
  font-size: 19px;
  margin: 0 10px 0 20px;
}

.puenum2,
.puewire {
  color: #db9c00;
}

.humidity {
  position: absolute;
  top: 90px;
  right: 35px;
}

#timer {
  color: #404546;
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 1px;
}

.left {
  padding-left: 30px;
  /* padding-bottom: 90px; */
  width: 275px;
  position: relative;
  z-index: 999;
  /* background: linear-gradient(to  left, rgba(185, 238, 250,0.1), #b9eefa); */
  /* background: linear-gradient(rgba(185, 238, 250,0.1), #b9eefa); */
}

.uw {
  width: 21px;
  height: 21px;
  background-image: url("./assets/jfxx_U_ic.png");
  background-size: 100% 100%;
}

.btn_bg {
  width: 70px;
  height: 70px;
  background-image: url("./assets/btn_bg1.png");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;

}


.btn_bg:hover {
  width: 70px;
  height: 70px;
  background-image: url("./assets/btn_bg2.png");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;
}

.btn_text {
  font-family: "Microsoft YaHei Bold";
  font-weight: 800;
  font-size: 14px;
  /* line-height: 15px; */
  text-align: center;
  color: #175585;
  word-wrap: break-word;
  width: 50%;

}

.upsbg {

  /* 为了让伪元素相对于该 div 定位 */
  /* width: 416.41px; */
  width: 100%;
  height: 239.41px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 使用伪元素来创建半透明的背景 */
.upsbg::before {
  content: "";
  /* 必须包含 content 属性，即使为空 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180.00deg, #0044a31c 0%, #2680ff21 0%, #2aaaff4a 100%);
  opacity: 0.2;
  /* 控制背景透明度 */
}

.bj_bg {
  /* width: 416.41px; */
  width: 100%;
  height: 239.41px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bj_bg::before {
  content: "";
  /* 必须包含 content 属性，即使为空 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180.00deg, #0044a31c 0%, #2680ff21 0%, #2aaaff4a 100%);
  opacity: 0.2;
  /* 控制背景透明度 */
}

.hd_bg {
  /* width: 297.33px; */
  width: 100%;
  height: 239.41px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

}

.hd_bg::before {
  content: "";
  /* 必须包含 content 属性，即使为空 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180.00deg, #0044a31c 0%, #2680ff21 0%, #2aaaff4a 100%);
  opacity: 0.2;
}

.realtime {
  width: 35.26%;
}

.ssgj {
  /* width: 677px; */
  width: 100%;
  height: 240px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

}

.ssgj::before {
  content: "";
  /* 必须包含 content 属性，即使为空 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180.00deg, #0044a31c 0%, #2680ff21 0%, #2aaaff4a 100%);
  opacity: 0.2;
  z-index: -99;
}

#text,
#text1,
#text2,
#cabinet,
#area,
#num {
  display: inline-block;
  /* width: 43px; */
  text-align: right;
  color: #000;
  font-weight: bold;
  font-size: 18px;
  /* position: absolute;right: 3rem; */
}

#cabinet,
#area,
#num {
  margin-right: -2.5rem;
}

.icon {
  background: url("./assets/module_title_bg.png") no-repeat center 0px;
  background-size: 100% 100%;
  width: 275px;
  height: 45px;
  margin: 25px 0 10px 0;
  font-weight: bold;
  font-size: 16px;
  line-height: 45px;
  text-indent: 55px;
}

.icons {
  background: url("./assets/module_title_bg.png") no-repeat center 0px;
  background-size: 100% 100%;
  width: 175px;
  height: 35px;
  margin: 20px 0 5px 0;
  font-weight: bold;
  font-size: 16px;

  line-height: 29px;
  text-indent: 35px;
}

.electricity {
  margin-left: 30px;
  width: 15.46%;
  /* margin-right: 50px; */
  position: relative;
}

.border {
  width: 98%;
  border-bottom: #b3bec4 1px dashed;
  margin-bottom: 3px;
  margin-top: 3px;
}

.value {
  color: rgb(84, 158, 224);
  font-weight: 700;
  font-size: 30px;
}

.warning {
  width: 21.67%;
  /* width: 440px; */
  /* width: 416.41px; */
  /* height: 239.41px; */
  /* margin-right: 26px; */
  position: relative;
  /* background: #000; */
}

.strongtext {
  display: flex;
  align-items: center;
  margin-top: 5px;
}

.strongbg {
  width: 5px;
  height: 16px;
  background: #0d7dab;
  margin-left: 15px;
  margin-right: 10px;
}

#asddsa {
  width: 200px;
  height: 160px;

  /* background: #000; */
}

.stronghead {
  color: #81858b;
  font-weight: bold;
  font-size: 18px;
  position: relative;
  z-index: 1;
}

.asddsatext {
  position: absolute;
  width: 100%;
  top: 30%;
  right: -35%;
}

#asddsatext1 {
  width: 310px;
  display: flex;
  justify-content: space-around;
  color: #83858b;
}

.legend {
  display: flex;
  align-items: center;
}

.green {
  width: 10px;
  height: 10px;
  background: #4eceb5;
  /* background: rgb(92, 174, 154); */
  margin-right: 5px;
}

.orange {
  margin-right: 5px;
  width: 10px;
  height: 10px;
  /* background: rgb(154, 173, 93); */
  background: orange;
}

.red {
  margin-right: 5px;
  width: 10px;
  height: 10px;
  /* background: rgb(175, 150, 0); */
  background: red;
}

#asddsatext2 {
  width: 310px;
  display: flex;
  justify-content: space-around;
  color: #000;
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0 10px 0;
}

#asddsatext3 {
  width: 320px;
  display: flex;
  justify-content: space-around;
  color: #83858b;
  margin-top: 25px;
}

#asddsatext33 {
  width: 70%;
  display: flex;
  justify-content: space-evenly;
  color: #83858b;
}

.pp1 {
  background: url("./assets/hdqk_it_ic.png") no-repeat center 0px;
  background-size: 100% 100%;
  width: 60px;
  height: 60px;

}

.pp2 {
  background: url("./assets/hdqk_zl_ic.png") no-repeat center 0px;
  background-size: 100% 100%;
  width: 60px;
  height: 60px;

}

.pp3 {
  background: url("./assets/hdqk_zhdl_ic.png") no-repeat center 0px;
  background-size: 100% 100%;
  width: 60px;
  height: 60px;

}

.p1 {
  background: url("./assets/p1.png") no-repeat center 0px;
  background-size: 100% 100%;
  width: 60px;
  height: 60px;

}

.p2 {
  background: url("./assets/p2.png") no-repeat center 0px;
  background-size: 100% 100%;
  width: 60px;
  height: 60px;

}

.p3 {
  background: url("./assets/p3.png") no-repeat center 0px;
  background-size: 100% 100%;
  width: 60px;
  height: 60px;

}

.p4 {
  background: url("./assets/p4.png") no-repeat center 0px;
  background-size: 100% 100%;
  width: 60px;
  height: 60px;

}

.statistics {
  /* background: url('./assets/t1.png') no-repeat center 0px;
    background-size: 100% 100%; */
  border: 1px solid #6ee6ff;
  border-radius: 5px;
  background: #fff;
  width: 500px;
  height: 200px;
  position: absolute;
  display: none;
  left: 40%;
  top: 10%;
}

.statistics1 {
  background: url("./assets/t2.png") no-repeat center 0px;
  background-size: 100% 100%;
  width: 450px;
  height: 150px;
  position: absolute;
  display: none;
  left: 40%;
  top: 40%;
}

.statistics2 {
  background: url("./assets/t3.png") no-repeat center 0px;
  background-size: 100% 100%;
  width: 450px;
  height: 150px;
  position: absolute;
  display: none;
  left: 40%;
  top: 40%;
}

.yz {
  text-align: center;
  line-height: 17px;
  float: left;
  width: 40px;
  color: #fff;
  font-size: 12px;
  height: 17px;
  border-radius: 7px;
  background: red;
  margin-top: 3px;
  color: #fff;
}

.ups {
  /* width: 392.5px; */
  width: 20.41%;
  height: 239.41px;
  /* margin-right: 26px; */
  /* margin-left: 40px; */
}

.information {
  color: #15181b;
  display: inline-block;
  margin-left: 20px;
  width: 58.5%;
  margin-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
}

.iconsdw {
  position: absolute;
  top: 5rem;
  right: 1rem;
  color: #666;
}

.times {
  margin-right: 15px;
  color: #15181b;
  font-family: mono;
}

.examine {
  color: #4a9de1;
  cursor: pointer;
}

/* #main{
    height: 130vh;width: 100vw;
    background: #b9eefa;
    position: relative;
} */
.main {
  /* background: url('./assets/sss.png') no-repeat center 0px;
    background-size: 100% 100%; */
  width: 100%;
  height: 112vh;
  /* background: #b9eefa; */
  /* background: #000; */
  /* position: relative; */
  z-index: 99;
  /* display: none; */
}

.skip {
  text-decoration: none;
  color: #375766;
}

.switchbox {
  display: flex;
  position: absolute;
  z-index: 999;
  right: 2%;
  top: 50px;
}

.switchs,
.switch1,
.switch2,
.switch3 {
  cursor: pointer;
  background: url("./assets/nav_bg.png") no-repeat center 0px;
  background-size: 100% 100%;
  color: #375766;
  height: 30px;
  margin-right: 20px;
  width: 80px;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  font-size: 14px;
  position: relative;
  z-index: 9999;
}

.textGj {
  font-family: "Microsoft YaHei Bold";
  font-weight: 700;
  font-size: 16px;
  line-height: 30px;
  text-align: left;
  color: #000;
  opacity: 0.6;
}

.head {
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  color: #175585;
  background: url("./assets/top_bg.png") no-repeat center 0px;
  background-size: 100% 100%;
  /* width: 100%; */
  height: 8vh;
  line-height: 7vh;
  width: 126rem;
  position: relative;
  z-index: 99;
  margin: auto;
}

.push {
  position: absolute;
  right: 40px;
  top: 200px;
  z-index: 999;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  width: 6px;
  background: rgba(#101f1c, 0.1);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.5);
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  transition: background-color 0.3s;
  cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(144, 147, 153, 0.3);
}

button {
  border: none;
  width: 80px;
  height: 80px;
}

.space {
  position: absolute;
  right: 113px;
  top: 60px;
  display: none;
}

.btn5 {
  position: relative;
  right: 20px;
  cursor: pointer;
}

.temperature {
  position: absolute;
  right: 113px;
  top: 126px;
  display: none;
}

button:focus {
  outline: 0;
}

.btn8 {
  position: relative;
  right: -28px;
  cursor: pointer;
}

.security {
  position: absolute;
  right: 113px;
  top: 258px;
  display: none;
}

.btns {
  background: url("./assets/hy1.png") no-repeat center;

  background-size: 120%;
  cursor: pointer;
  transition: background 0.1s ease-in-out;
  /* margin-right: 1rem; */
  /* position: relative;
  right: 0.5rem; */
}

.btns:hover {
  background: url("./assets/hy2.png") no-repeat center;
  background-size: 120%;
  cursor: pointer;
}

.btn1 {
  background: url("./assets/b1.png") no-repeat center 0px;
  background-size: 100% 100%;
  cursor: pointer;
  transition: background 0.1s ease-in-out;
}

.btn1:hover {
  background: url("./assets/b4.png") no-repeat center 0px;
  background-size: 100% 100%;
}

.btn2 {
  background: url("./assets/b2.png") no-repeat center 0px;
  background-size: 100% 100%;
  cursor: pointer;
  transition: background 0.1s ease-in-out;
}

.btn2:hover {
  background: url("./assets/b5.png") no-repeat center 0px;
  background-size: 100% 100%;
}

.btn1:hover {
  background: url("./assets/b4.png") no-repeat center 0px;
  background-size: 100% 100%;
}

.btn3 {
  background: url("./assets/b3.png") no-repeat center 0px;
  background-size: 100% 100%;
  cursor: pointer;
  transition: background 0.1s ease-in-out;
}

.btn3:hover {
  background: url("./assets/b6.png") no-repeat center 0px;
  background-size: 100% 100%;
}

.btn44 {
  background: url("./assets/btn44.png") no-repeat center 0px;
  background-size: 110%;
  cursor: pointer;
  transition: background 0.1s ease-in-out;
}

.btn44:hover {
  background: url("./assets/btn4.png") no-repeat center 0px;
  background-size: 110%;
}

.btn7 {
  background: url("./assets/c8.png") no-repeat center 0px;
  width: 65px;
  height: 65px;
  background-size: 100% 100%;
  position: relative;
  right: -28px;
  cursor: pointer;
  transition: background 0.1s ease-in-out;
}

.btn7:hover {
  width: 65px;
  height: 65px;
  /* position: relative;
  right: -28px; */
  background: url("./assets/c7.png") no-repeat center 0px;
  background-size: 100% 100%;
}

.btn8 {
  width: 65px;
  height: 65px;
  background: url("./assets/c10.png") no-repeat center 0px;
  background-size: 100% 100%;
  cursor: pointer;
  transition: background 0.1s ease-in-out;
}

.btn8:hover {
  width: 65px;
  height: 65px;
  background: url("./assets/c9.png") no-repeat center 0px;
  background-size: 100% 100%;
}

.btn9 {
  background: url("./assets/c12.png") no-repeat center 0px;
  background-size: 100% 100%;
  position: relative;
  cursor: pointer;
  right: 20px;
  transition: background 0.1s ease-in-out;
}

.btn9:hover {
  background: url("./assets/c11.png") no-repeat center 0px;
  background-size: 100% 100%;
}

.btn12 {
  background: url("./assets/ups11.png") no-repeat center 0px;
  background-size: 100% 100%;
  transition: background 0.1s ease-in-out;
  /* margin: 20px 0 20px 0; */
  cursor: pointer;
}

.btn12:hover {
  width: 65px;
  height: 65px;
  background: url("./assets/ups00.png") no-repeat center 0px;
  background-size: 100% 100%;
}

.btn4 {
  width: 65px;
  height: 65px;
  position: relative;
  right: -28px;
  background: url("./assets/c2.png") no-repeat center 0px;
  background-size: 100% 100%;
  cursor: pointer;
  transition: background 0.1s ease-in-out;
}

.btn4:hover {
  background: url("./assets/c1.png") no-repeat center 0px;
  background-size: 100% 100%;
}

.btn5 {
  background: url("./assets/c4.png") no-repeat center 0px;
  background-size: 100% 100%;
  cursor: pointer;
  transition: background 0.1s ease-in-out;
}

.btn5:hover {
  background: url("./assets/c3.png") no-repeat center 0px;
  background-size: 100% 100%;
}

.btn6 {
  background: url("./assets/c6.png") no-repeat center 0px;
  width: 65px;
  height: 65px;
  background-size: 100% 100%;
  position: relative;
  right: -28px;
  cursor: pointer;
  transition: background 0.1s ease-in-out;
}

.btn6:hover {
  width: 65px;
  height: 65px;
  background: url("./assets/微信图片_20230712131339.png") no-repeat center 0px;
  background-size: 100% 100%;
}

.btn10 {
  background: url("./assets/c14.png") no-repeat center 0px;
  width: 65px;
  height: 65px;
  position: relative;
  right: -28px;
  background-size: 100% 100%;
  cursor: pointer;
  transition: background 0.1s ease-in-out;
}

.btn10:hover {
  width: 65px;
  height: 65px;
  background: url("./assets/c13.png") no-repeat center 0px;
  background-size: 100% 100%;
}

.btn11 {
  background: url("./assets/c16.png") no-repeat center 0px;
  background-size: 100% 100%;
  cursor: pointer;
  transition: background 0.1s ease-in-out;
}

.btn11:hover {
  background: url("./assets/c15.png") no-repeat center 0px;
  background-size: 100% 100%;
}

/* 大屏 */
html {
  /* width: 100%; */
  height: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

body {
  /* overflow: hidden; */
  margin: 0;
  padding: 0;
  /* transform: translate3d(0,0,0)   */
}

/* pc */
.pc {
  width: 1860px;
  height: 1020px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* padding:30px; */
}

.pc .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pc .bk {
  width: 100vw;
  height: 100vh;
  /* border: #000 solid 1px; */
  /* margin-top: 30px; */
}

.bk:first-child {
  margin-top: 0px;
}

.pc .big-bk {
  /* width: 850px;
    height: 550px; */
  /* border: #000 solid 1px; */
  /* margin: 30px 30px 0px 30px; */
}

.big-bk:first-child {
  margin-top: 0px;
}

/* 移动端 */
/* .mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mobile .bk {
    width: 6.9rem;
    height: 2rem;
    border: #000 solid 0.01rem;
    margin-top: 0.3rem;
} */

/* 大屏 */
.large {
  width: 16.2rem;
  height: 4.6rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* padding:0.3rem; */
}

.large .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.large .bk {
  width: 4.5rem;
  height: 1.5rem;
  /* border: #000 solid 1px; */
  /* margin-top: 0.3rem; */
}

.large .big-bk {
  width: 6.5rem;
  height: 2.5rem;
  /* border: #000 solid 1px; */
  /* margin: 0.3rem 0.3rem 0rem 0.3rem; */
}

/* 开关组件 */
.switch {
  width: 47px;
  height: 23px;
  position: relative;
  border: 1px solid #dfdfdf;
  background-color: #dcdfe6;
  box-shadow: #dfdfdf 0 0 0 0 inset;
  border-radius: 20px;
  background-clip: content-box;
  display: inline-block;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  user-select: none;
  outline: none;
  left: 10rem;
  bottom: 0.5rem;
  z-index: 9999;
}

.switch::before {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  background-color: #ffffff;
  border-radius: 50%;
  left: 0px;
  top: 0;
  bottom: 0;
  margin: auto;
  transition: 0.3s;
}

.switch:checked {
  background-color: #409eff;
  transition: 0.6s;
}

.switch:checked::before {
  left: 30px;
  transition: 0.3s;
}

.iconimg {
  color: #5a6f70;
  position: relative;
  left: 10rem;
  bottom: 1rem;
}

.ghtj {
  width: 695px;
  height: 228px;
  border-radius: 4px;
  background: #fff;
  opacity: 0.8;
  box-shadow: 0 4px 10px #00000030;
  position: absolute;
  left: 40%;
  top: 10%;
  display: none;
}

.ghtj2 {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
}

.titlegh {
  height: 35px;

  padding: 10px;
}

.titlegh2 {
  padding: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.textgh {
  width: 100%;
  height: 80%;
  display: grid;
  grid-template-columns: repeat(auto-fill, 110px);
  grid-gap: 10px;
  justify-content: center;
}

.mk {
  width: 110px;
  height: 58px;
  border-radius: 4px;
  background: #c6feff;
  opacity: 0.67;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bluediv {
  width: 4px;
  height: 18px;
  margin-right: 5px;
  background: #4a65ab;
}

.flexcenter {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.fontTitle {
  font-family: "Microsoft YaHei Bold";
  font-weight: 700;
  font-size: 16px;
  line-height: 30px;
  text-align: left;
  color: #000;
}

.fontDw {
  font-family: "Microsoft YaHei";
  font-weight: 400;
  font-size: 12px;
  line-height: 30px;
  text-align: left;
  color: #000;
}

.mkName {
  font-family: "Microsoft YaHei";
  font-weight: 400;
  font-size: 14px;

  text-align: center;
  color: #000;
}

.mkValue {
  font-family: "Microsoft YaHei Bold";
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  color: #000;
}

.tl {
  font-family: "Microsoft YaHei";
  font-weight: 400;
  font-size: 14px;
  line-height: 36px;
  text-align: left;
  color: #000;
}

.tldiv {
  width: 10px;
  height: 10px;
  background: #4faf93;
}

.tlitem {
  font-family: "Microsoft YaHei";
  font-weight: 400;
  font-size: 12px;
  line-height: 36px;
  text-align: left;
  color: #000;
}

.dianlog {
  background: url("./assets/hdqk_zhdl_ic.png");
  background-size: 100% 100%;
  width: 75px;
  height: 75px;
}

.tlbox {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tlbox2 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}