.jilin_potology{
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.topology_app{
  position: relative;
  overflow: hidden;
  /*border: solid 1px red;*/
  margin: auto;
  transform:scale(0.9);
  background-color: #000;
}
.topo_title{
  position: absolute;
}
.btn{
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 50%;
  margin-top: -4%;
  font-size: 4rem;
  width: 5%;
  height: 15%;
  align-items: center;
  justify-content: space-around;
  z-index: 999;
}
.btn>span:hover{
  cursor: pointer;
  color: #00d6ff;
}
.zoom_box{
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.topology_box{
  overflow: hidden;
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.topology_app {
  position: relative;
  margin: auto;
  /* width: 298rem;
  height: 120rem; */
  /* margin: auto;
  transform:scale(0.98); */
  height: 100%;
  padding: 1rem;
  box-sizing: border-box;
  font-size: 1.2rem;
}
.pos_abs {
  position: absolute;
  left: 0;
  top: 0;
}
.pos_abs_col_box{
  position: absolute;
  /* background-color: red; */
  border: 0.1rem solid red;
}
.col_1 {
  position: absolute;
  background-color: red;
}
.col_2 {
  position: absolute;
  background-color: yellow;
}
.col_3 {
  position: absolute;
  background-color: #0087fa;
}
.col_4 {
  position: absolute;
  background-color: limegreen;
}
.col_5 {
  position: absolute;
  background-color: #08aec2;
}
.col_6 {
  position: absolute;
  background-color: #ea700d;
}
.display_ib {
  display: inline-block;
  vertical-align: top;
  /*border: solid #ccc 1px;*/
}
.dev_icon_div {
  float: left;
  width: auto;
  height: auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dev_icon_div0 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dev_icon_div1 {
  width: auto;
  height: 4rem;
  z-index: 1;
  margin-bottom: 1rem;
}
.dev_icon_div1 > img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.dev_icon_div2 {
  margin-top: -2.2rem;
  width: 5.1rem;
  height: 2rem;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAcCAYAAADMW4fJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ2MCwgMjAyMC8wNS8xMi0xNjowNDoxNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTgzMzIzQjA1MEU4MTFFQzlDRUZDNUVGN0YwMjNFOTUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTQ4NkVBNTQ1MEU4MTFFQzlDRUZDNUVGN0YwMjNFOTUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxODMzMjNBRTUwRTgxMUVDOUNFRkM1RUY3RjAyM0U5NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxODMzMjNBRjUwRTgxMUVDOUNFRkM1RUY3RjAyM0U5NSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuY3O0AAAAfkSURBVHjalFhL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);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 2;
}
.dev_icon_div3 {
  margin: -0.1rem 0 -0.5rem 0;
  padding: 0.5rem 0.6rem 0.3rem 0.6rem;
  box-sizing: border-box;
  line-height: 1.6rem;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAAXCAYAAACvd9dwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ2MCwgMjAyMC8wNS8xMi0xNjowNDoxNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTgzMzIzQUM1MEU4MTFFQzlDRUZDNUVGN0YwMjNFOTUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTgzMzIzQUQ1MEU4MTFFQzlDRUZDNUVGN0YwMjNFOTUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxODMzMjNBQTUwRTgxMUVDOUNFRkM1RUY3RjAyM0U5NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxODMzMjNBQjUwRTgxMUVDOUNFRkM1RUY3RjAyM0U5NSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlTmldkAAAGMSURBVHja3JgtTwNBEIZ3j+OjLbQhwSBQYMunwYGtQ/AH4DdgMGBQxeBqQIKBgIWSIEhAIEqw/IEaEgQp4drS453k3WTTpNzaziRPupub3dx7s7szW2uqqYHNgQaYMdnWAlvgnn0L0owxoT6DbATUwArnEb74rMN3EvsBT/Q1MZgCt+AOXAaIW+3zOw4Ycxrgc9XXHwUFtmdBF1xTmPWeRSDnjTkA82DPInJ1NMbAScDXdbYMFjN8vkHvn+cJv/og69LHcJ4X8BvwbtPgEDyKOBG0zcm0mET1XELa5vLUZC23Xjv8VWcR17G2yG2Aj5jH57giYWWwCyoal+MaKIHniJsvr0hc299zqbLIJb64hElcVRrwU0GsdVn2WJhqMTn936T+dAfKhCJxUoNOgn2NqUBq5DOw4yKXUybwU4pnt+esMnFy3cprTAWGegpOnKZUUOJtvBbx6CwrufaIsCPwIBlAbuJFNOrcdxdgARSHVNwmeAfrUpxY/vslee4GLIFX0BxScSKs6jp/AgwAICxV18Bo45AAAAAASUVORK5CYII=);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
  color: #00e4ff;
  width: auto;
  height: auto;
  white-space: nowrap;
}
.dev_icon_div:hover .dev_icon_div2 {
  background-image: url(data:image/png;base64,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);
}
.dev_icon_div:hover .dev_icon_div3 {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAAXCAYAAACvd9dwAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAGeSURBVHja3Ni9axRBGMfxz66n5i5RI1gI1lYi+IKIlZZa2PoHxN5KWzlhC0ELsfIFK/VAULATm6SIiIpFbFdLS8FCI+ZuzVnkWVjlwl5782t2nt1nlvk+Mw/PzGTKCg5hDQe0ax0XsRx2hnFLn2l9ttMO3MWpsH9j2BjPKNo/8L4/KO5t/bCs9uAdPuHZFHAncQX7wr6Nqy19HuFyi8+LCe92Yh4HIzjP4zmHTvh0kUd7HufxuD8ormXK6lU43JkiurWO4ww2GlGbpGEjwpNUxSxspz/xfRMfwm7TftzAcqasxrjUMohZ0wKe5AGVSUs/xVodRcImpzzWcScxrrP41omE3Z0Q2FEs4UKe4Go8EWXqbR5FsJcQ3LCZc+PEZu4fuCF2JQS3/j9cJ9WZ20yszm1grT8oskxZvcEKPiYC18Et3E+xFFR4iKW6FHQTA/yOhTrnUts4/0IvxVJQH3J7eewtUyoFe3EdD2q4I42j+qyDFVhFN1NWi3gdufcUh7E4o3Dn8BmnMcri9msOL3HM1i3Y1xmF+9IfFDdr4+8AXxdl9THTJlkAAAAASUVORK5CYII=);
}
.tra_v_0 {
  transform-origin: bottom;
  transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -o-transform: rotate(0deg);
}
.tra_v_5 {
  transform-origin: bottom;
  transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  -o-transform: rotate(5deg);
}
.tra_v_45 {
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}
.tra_v_45_f {
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
}
.tra_v_90 {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}
.tra_v_90_f {
  transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}
.radius {
  border-radius: 0.3rem;
}
.test_border {
  border: solid #ccc 0.1rem;
}
.f_col_2 {
  color: white;
}
.f_col_3 {
  color: #00e4ff;
}
.f_col_4 {
  position: absolute;
  color: white;
  opacity: 0.6;
}
.i_font {
  font-size: 1.2rem;
  font-weight: bold;
}
.data_border{
  width: fit-content;
  /* border: 1px solid #53f900; */
  padding: 0.3rem;
  box-sizing: border-box;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.data_box{
  display: flex;
  justify-content: flex-start;
  margin-bottom: 0.8rem;
}
.data_box>div>p{
  color: #00e4ff;
}
.data_box>div{
  margin-left: 0.5rem;
}
.data_box>div>p>span{
  color: #fff
}
.data_border span{
  color: #fff;
}
.data_border>p{
  color: #00e4ff;
  margin-right: 0.5rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.data_border>p>span{
  color: #00e4ff;
  margin-left: 0.3rem;
  font-size: 1.2rem;
}
.switch{
  transform: rotate(0deg);
}
.pos_abs_bor{
  height: 4rem;
  width: 2.7rem;
  border: solid 0.1rem red;
  position: absolute;
  left: -0.2rem;
  top: 1.3rem;
}
.pos_abs_bag_bor{
  height: 6.5rem;
  width: 6rem;
  border: solid 0.2rem red;
  position: absolute;
  left: -2rem;
}
.pos_abs_arrows{
  text-align: center;
}
.arrows{
  color: red;
  font-size: 1rem;
  position: absolute;
  bottom: 0.5rem;
}
.arrows>span{
  display: flex;
  width: 1.5rem;
  height: 0.1rem;
  border-top: 0.2rem solid red;
}
.off_status{
  background-color: red;
}
.close_status{
  background-color: rgba(0, 255, 0 , 0);
}
.else_status{
  background-color: orange;
}

/* 第二版 */
.dev_icon_div_box{
  position: absolute;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dev_icon_div_box>img{
  width: auto;
  height: 5rem;
  margin-bottom: 1rem;
}
.dev_icon_div_box>p{
  margin: 0.5rem 0 -0.5rem 0;
  padding: 0.5rem 0.2rem 0.3rem 0.2rem;
  min-width: 5rem;
  width: auto;
  height: auto;
  line-height: 1.4rem;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAAXCAYAAACvd9dwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ2MCwgMjAyMC8wNS8xMi0xNjowNDoxNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTgzMzIzQUM1MEU4MTFFQzlDRUZDNUVGN0YwMjNFOTUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTgzMzIzQUQ1MEU4MTFFQzlDRUZDNUVGN0YwMjNFOTUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxODMzMjNBQTUwRTgxMUVDOUNFRkM1RUY3RjAyM0U5NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxODMzMjNBQjUwRTgxMUVDOUNFRkM1RUY3RjAyM0U5NSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlTmldkAAAGMSURBVHja3JgtTwNBEIZ3j+OjLbQhwSBQYMunwYGtQ/AH4DdgMGBQxeBqQIKBgIWSIEhAIEqw/IEaEgQp4drS453k3WTTpNzaziRPupub3dx7s7szW2uqqYHNgQaYMdnWAlvgnn0L0owxoT6DbATUwArnEb74rMN3EvsBT/Q1MZgCt+AOXAaIW+3zOw4Ycxrgc9XXHwUFtmdBF1xTmPWeRSDnjTkA82DPInJ1NMbAScDXdbYMFjN8vkHvn+cJv/og69LHcJ4X8BvwbtPgEDyKOBG0zcm0mET1XELa5vLUZC23Xjv8VWcR17G2yG2Aj5jH57giYWWwCyoal+MaKIHniJsvr0hc299zqbLIJb64hElcVRrwU0GsdVn2WJhqMTn936T+dAfKhCJxUoNOgn2NqUBq5DOw4yKXUybwU4pnt+esMnFy3cprTAWGegpOnKZUUOJtvBbx6CwrufaIsCPwIBlAbuJFNOrcdxdgARSHVNwmeAfrUpxY/vslee4GLIFX0BxScSKs6jp/AgwAICxV18Bo45AAAAAASUVORK5CYII=);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
  color: #00e4ff;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 2; /** 显示的行数 **/
  overflow: hidden;  /** 隐藏超出的内容 **/
}
.dev_icon_div_box0 {
  margin-top: -2rem;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAcCAYAAADMW4fJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ2MCwgMjAyMC8wNS8xMi0xNjowNDoxNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTgzMzIzQjA1MEU4MTFFQzlDRUZDNUVGN0YwMjNFOTUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTQ4NkVBNTQ1MEU4MTFFQzlDRUZDNUVGN0YwMjNFOTUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxODMzMjNBRTUwRTgxMUVDOUNFRkM1RUY3RjAyM0U5NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxODMzMjNBRjUwRTgxMUVDOUNFRkM1RUY3RjAyM0U5NSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuY3O0AAAAfkSURBVHjalFhLryNHFa5Tj+62fW1f31cGFGYyFxKJzQikYUDhkQWwYMOCTTb8JPgNbFhEYYGURSSkREJJlBUIZjaDhMSISKC5c19+u6u7qg6n7Ha7ut32XPpetau763Ee3/nOqYLHvxkyBsAYQ+YvoD9ctoGtLmSVa/0IbMcF22N2XdgwT33pog3URtg/jywexXoYNkqNy3+vMzYqXvRDLFYNhSz7+65QPkIx304jwWqu6mdsNOPqjZGFCrxQqMETuOq8XBhq6mJV3PUyEPYLlFu/X9sHtgTaAQHceKi4Y1VO528ykEtVLNJkvcoEG4G3QIW4B4Y14TGYCvZhMVwL65+zQpllR0s/aoOVtQ5AauEGHgHkgoUxGLdGX+i8AFqIW+CCim3WY+saQAlqqGkKS3envilLPK+uqOwVRhDUPAO77VhdClYKVIRE2EERWDMDqygGuJE0UJPM7S1kVp7ZfMzpt3s3MWFvSG7HUMM33I6HRhiuqay+FpSvFusAkiV8ADU14saJtwTGPYG7K8Y2Lt3EVEMMYhC29biC+iLLjqPVUFgRwBKLSEEEjIdQ25NdsKQU2Eou0KhFyQweMmuGKcGFNfwAQjAHbJkNA2Oka+/JiscZzOnWrbARNlgkcHUj/rFGz+WY9TtshNgmwO+YeFcOSNePMlyMJpuQHg8qBq3jFcIEuVvJ0FEoHF+23Cof7CsImuh4T+iOwnVlLZg8/mTxfo1a3I6NUpESL5y7pdqIvCYT+n8eBIR/4TmOfEfqVQWGMhevgwaaEFvKNQnlkjVj0OQwpda9Et+7aYBo0XHgVloyvfFFBPhSAl2JFT+fj0MErM0AEFAtzSE4OvTKWSc3pQMgbLMEbigC8SaEs9xmJerA2FsNVFMaLlHjg5mM4pS3pDRqJo3VXokVjKBauGHAr0vhoLQ9eA9xxi0XImeSO8EiLhetnp1rkx1MchfZGg6LXLSUw6NIh3EpWZiTVzq/XFJ0zReJnLRM7I6u5UFrZgZTQOdibcfSIOUnEGQlwYrMBmE90ETTuEGLl0wY8igNtTTIsIRdqs4xKvNGFyeum+vJVJ/c4nbyvq6jT7KwuFi5bMZ8ImJswMlmKpoORrKdLFxfGwF9hKwV5flQ5XxGZWrbKnMgMjldRkABc6xVKFUnY5XZ3Jp8AKTxXIG5lWlC6okp9NxEiTaLsq8dmfGCZ9GNtm1dGOOijKmCPWVTdjw9eZ6ObPfxlX0zj/XgIp67W3DO129TI7n3mjICe5lyR0bioMXtf5UWQwzKDwWaOyrELUrPt9jiM+VzR+raZkMGpIsANe9kb8UGpyJTN5nCA1IkpghE8vxQGEwRuJzER/2sw77dh4tO1+R/eSkfvGoP80pxK1mD5b588/tvC8d+xfXsb/3hVMsRdISObkgoJ82SmJaBzRdibBSzpNRpJt2pUTiIU/hPkvKrHOMVLVNU0N0tsM0UZn6bIVDaVovN5JwdmFkb7lMXa5GnRBXdKPNW4LNAoIQpfexiJyZ9nl7070vg0beIM/n5aBRENJSFZgXLAtkr+hm4uPPe8I3Ou9dn2fN4PnsxGM6uWpNIiyy68n05dY4ylpKCJld46LOJju07xM6HHIyUOb8law+XS3GrKKDpPzudtJPzqTuaCZNPo8zNVMaHxOxrMxOXsBgj001b5mzURTvrxc5GHSGY1AL5sKgjtwoluWPr+pRef0ow/DG1iX+j87wTPbg4GAydzf8ZT4Znx7du0Z5F12B5SoKwWMM41ow8JXo6sse5iA8zzvoRt1e5xEPkSSRzJCgqEen8imJuTDjMicKyQgJfRoFu6/s3fdZedLuYt2NLQZ1whEvyhI/jjOTKqPPf0SuElRzJYHUG0JxJ/vWo/w16/DU136f3Z/Q9BWaNTx9aqEumb0e94fz2+DaaqDnBEDaljEekFSwhjxFpYCIseOG1NLAgRs7D9chhx6NufjI8JEN0T0VM/k3QjQmat9RDgy9ZkP2D+n5JSjw9fzbKGguCx78dvrYEIqV8oPxQsvx9QsF7hhGZeo5HR3zHhYFsombX49Mbd90bJgvIKRyqBqrul/1duES39OnlEXbm3d4BRJ0OMVlMHriibLwQaHMy2ksD6k9EWF88fDa6fF01fydlwuLxxaNeX7DslxRZPyel7vuqlTNnDYeuATAWJ/POaDS9dyVnyTQhi4IJa7k8ye/dHGbJpN/qmNbgQCE7E+g0xfOU2I48jyPiwD9bJj+mEc/Pn47w9XusIgnsVWZrEqjUXP9+1H6HFv+FY+oJ0ZsgXTWwnAhJ9Ym3LNev0pMbPT0cRa1F7NTNIU9077grUX6dsmyflp/TjCnpmVL3v9Kcf3QoP3n4dLRg8P8fTxXK7KlQK+V74/EFeauvFNM/oB4/yljsSyFfmmcU3ye5UG2K8qPE8DOi+4fF/swnvpyD+4qg+qFl4g/ffDb+apcUdz2Jk5tqb8f+ChpMUrMO4ZkCGj4nKH3+4jviJGL5u1Q9f5cUy2NDyGLskIb8xJ9tUbk8oQL1Iwvwe4LWZw+fTRzbOj6qHWlhfe8EjduE1XFAcJ18Wj3igIbtMQb1V/3QpqyKlkc7+dsxZE8Mqu85Jp/Q9985xj+g72PE6qlW6HgID1WwnK+63S0ern7G9ijzSW2iu5xrQPMpbnCw4RFg6sdylVq8VqND7Qiu6VTYy3j9083z/wQYADV0O0FfDZnuAAAAAElFTkSuQmCC);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 2;
}
.dev_icon_div_box:hover .dev_icon_div_box0 {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAcCAYAAADMW4fJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAXlSURBVHja3JjLj1xHFcZ/p+r27dfM9PQ8MvbgODiJI5wHMrJIgEAwEkoCKFlGIRIbFqwQaxYgxxL/ATtAWSFgAytkECBHFsGY2EIGpGSELSeKPTN+zKuft+/tW3VYTM/QfdMz0zYTReZILdWt6np8db7vnKoSVeX/xQIAueKCj2l+BWQ/+ulRm26BEMDex07x257pfRTuXyzayYIJM24k48phlOj/317t2TH2Ku9GwUybtPvBbE2a22GCu+X6qFoYtmn3Yq4fDEAHGLsPORYNRLOexUD+PtBH1pFrw8CkPZrZDAXYhXrDvvs1lO3LkDGzOslqMLuObP1QzwDUgIMfW/YYySQbktOdwKwDR/Z3vo/Ulj90Auiz9oi62Yk6DKEEoCKKURH3P25Rdr7V3cAo0ARmhvBTdskNGLwoorpZpZlVCIII2mtXQUWQzcy9gy7YIYf1lxu7gQG4Djw4Sg4weIx3OSdWPaIAIuq2F4woqGivbQAcKqoCghp11uAB8akEfkT1Rf162QnMyl5UG0/rY7Hm8gkF602ujRAL3iPiFQkGd1SGxAfpIVJB1Xg11mMtqkHoo2KZqNsKxuqJhLvRcmHoqTljcW9Hiv2VY65RNC6t1ikXGqbSRLxitIGRFDQAYdADMkLQE2STgJv9vJrE5CXxpSm66WyZmuZN2lgLpjeGdF8cBcwW6s9ZdbbkmpNtLeSbZjxGqOCTAiatY2xTvC+IS8veBk0dnesDdT2NCSAYo6h2xXfyKsa2mHAtNQ+QxAcmpNVJbHGtYwpJXxrZG8y3bv8kuhieGF/IHy80worFag3BYWnhgwIQ4H1FvZ/Eu0mBZbVB/+ASamIcVp1YBbSoUQAQSTHNuCeQbnzYGm05G66p9+MqJo+iBFpDNEZztu6rFbp65KH2v27Om9Xzf62c/BAFRVWRK5n6ljxHWd/Eu6UwarxR1OTv9fLsvIpU/7vtalQxeF/G+wkExesk1ixjg9WBOKF4BEJNbCKhsz4tlrQdNKWcaqqHEO8wto5IJEKiYrr9cMfijSXfbnaiXPlJDStPYs0ilu9mLmc7gIGHgKu906hD1UvS+ctYe+UPWigvNotTjwxcGVQDvK/g3DTqy2LtHaupVWNrzoYbAFbTnJOgG7i4mrrwk4hpIWkL0RhjNxBJ+2mYS+O1Qv12HEl4KC1VjmEDsHYJkRbQBX44KhiAaeA14Pu96OZRFK91WvVzxW7jfFqZTbpB/tiA2r0fx7kp1FQQEoxfxWsFwjwiG5Ba0C7G1BG6bHpBARG0UazfXm0n5hFKU0cJ7SxGVzByqxeY3gd+C1zLhuW9wPQL+RjwPeB5oy4VVeM0yJFEN3Kt1beKOblQr3xiDnh0wFuqebyfQDWPMQ2EBDFRzwvbd5FSp3YlbdTmk3D885SmHrYSR6FJb0amtArUgV8DF3oJfXhkHBHMtn119czMOxPHv7SUm/82MIuqwcsYzlva6++OJetnmZi+2ixUPwtM7XYUCVxytbSxrHXyz1CeOU4uqCK6LoY7ikRFH509GC+euVZ8dGGPY9O9gdmyV9//WeHtuS8fuFY8+gLwslGP9zKONxWSTkOilX9Wffut2syRljPByT593SrXby534u7jrjT9NMXSYwip4DdUTBNYKPn2Tz+9cenyhann6nd1UL9XMFv2qaXzwWfk3/nfzH3z4djkXwEOW5+GzuVm8FRory8W4jsXi7ngeuT0YCesPsvY5AmsTIJGPTHXgB8fbS/8vrr2wa23Dz3fvadbxxaY06dPDzS8/toP7nqwr3/wqzAZr078qfrCE8A3ACtpd0Z9OE/Hw4Sc7N0/kt7vlweS5TeeWLv07lnzbEcfmLrr18jXf/Gj7fKpU6fYt8e/M4dfTYCVyq33/vxS/MeLl2a/OLdQfPxp0KdyQfdyl/ArwDsl3z79zNq5c1e6h2o3Dj7lbx54aX9fNPfTanNH/M/5Tht479jS+esnuPy7f0x+YSrR4LHJtRvX//bgi903Z772kdzU/jMAgXvhHc3XSK0AAAAASUVORK5CYII=);
}
.dev_icon_div_box:hover p {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAAXCAYAAACvd9dwAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAGeSURBVHja3Ni9axRBGMfxz66n5i5RI1gI1lYi+IKIlZZa2PoHxN5KWzlhC0ELsfIFK/VAULATm6SIiIpFbFdLS8FCI+ZuzVnkWVjlwl5782t2nt1nlvk+Mw/PzGTKCg5hDQe0ax0XsRx2hnFLn2l9ttMO3MWpsH9j2BjPKNo/8L4/KO5t/bCs9uAdPuHZFHAncQX7wr6Nqy19HuFyi8+LCe92Yh4HIzjP4zmHTvh0kUd7HufxuD8ormXK6lU43JkiurWO4ww2GlGbpGEjwpNUxSxspz/xfRMfwm7TftzAcqasxrjUMohZ0wKe5AGVSUs/xVodRcImpzzWcScxrrP41omE3Z0Q2FEs4UKe4Go8EWXqbR5FsJcQ3LCZc+PEZu4fuCF2JQS3/j9cJ9WZ20yszm1grT8oskxZvcEKPiYC18Et3E+xFFR4iKW6FHQTA/yOhTrnUts4/0IvxVJQH3J7eewtUyoFe3EdD2q4I42j+qyDFVhFN1NWi3gdufcUh7E4o3Dn8BmnMcri9msOL3HM1i3Y1xmF+9IfFDdr4+8AXxdl9THTJlkAAAAASUVORK5CYII=);
}
.hr_1{
  position: absolute;
  background-color: #0070c0;
}
.dcui{
  position: absolute;
  width: 1rem;
  height: 1rem;
  background-color: greenyellow;
  border-radius: 50%;
  z-index: 999;
}
.acui{
  position: absolute;
  width: 1rem;
  height: 1rem;
  background-color: #adb0b6;
  border-radius: 50%;
}
.bg_box{
  width: 50rem;
  height:4rem;
  line-height: 4rem;
  text-align: center;
  /* background-color: #00d9d1; */
  border: 0.1rem solid #fff;
  color: #fff;
  font-size: 2rem;
  position: absolute;
}
.incline_left{
  transform: skew(45deg);
}
.incline_right{
  transform: skew(-45deg);
}
.switch_circle{
  width: 1rem;
  height: 1rem;
  border: 0.15rem solid red;
  border-radius: 50%;
}
.ad_dc_box{
  width: 20rem;
  height: 4rem;
  /* background-color: #00d9d1; */
  border: 0.1rem solid #fff;
  position: absolute;
  color: #fff;
  line-height: 4rem;
  text-align: center;
  font-size: 1.8rem;
}
.switch_break{
  display: none;
}
.dir {
  font-size: 2.5rem;
  position: absolute;
}
.title_box{
  width: 2rem;
  height: 2rem;
  border: 0.1rem solid #000;
  text-align: center;
  line-height: 2rem;
  background-color: #fff;
}
.title_text>p{
  margin-bottom: 0.5rem;
  color: #fff;
  white-space: nowrap
}


/*# sourceMappingURL=chunk.chunk-1079c3c2.css.map?v=1734077891441*/