html {
  border: 3px solid rgba(255, 255, 255, 0.15);
  background-color: #152235;
  height: 99vh;
  position: relative;
}
body {
  padding: 0 10px 80px 20px;
}
.left-top {
  width: 9px;
  height: 9px;
  background: #fffcfc;
  position: absolute;
  left: -2px;
  top: -2px;
}
.right-top {
  width: 9px;
  height: 9px;
  background: #fffcfc;
  position: absolute;
  right: -2px;
  top: -2px;
}
.left-bottom {
  width: 9px;
  height: 9px;
  background: #fffcfc;
  position: absolute;
  left: -2px;
  bottom: -2px;
}
.right-bottom {
  width: 9px;
  height: 9px;
  background: #fffcfc;
  position: absolute;
  right: -2px;
  bottom: -2px;
}
.report-title-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.report-title-bg > img {
  width: 504px;
  height: 51px;
}
.report-title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 2px;
}
.report-title-text {
  color: #ffffff;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: 400;
  line-height: 36px;
  font-size: 24px;
}

.dian-wrapper img {
  margin-top: 80px;
  width: 180px;
  height: 42px;
}
.dian-wrapper .dian-main {
  width: 100%;
  display: flex;
}
.dian-wrapper .dian-main .dian-box1 {
  margin-right: 24px;
  background: rgba(8, 16, 24, 0.27);
  margin-top: 15px;
  padding: 20px 10px 0 20px;
  width: 50%;
  height: 410px;
}
.dian-wrapper .dian-main .dian-zs-1 {
  position: absolute;
  width: 9px;
  height: 9px;
  left: 28px;
  top: 69px;
}
.dian-wrapper .dian-main .dian-ys-1 {
  position: absolute;
  width: 9px;
  height: 9px;
  left: calc(50% - 16px);
  top: 69px;
}
.dian-wrapper .dian-main .dian-zx-1 {
  position: absolute;
  width: 9px;
  height: 9px;
  left: 28px;
  top: 490px;
}
.dian-wrapper .dian-main .dian-yx-1 {
  position: absolute;
  width: 9px;
  height: 9px;
  left: calc(50% - 16px);
  top: 490px;
}
.dian-wrapper .dian-main .dian-box2 {
  background: rgba(8, 16, 24, 0.27);
  margin-top: 15px;
  padding: 20px 10px 0 20px;
  width: 50%;
  height: 410px;
}
.dian-wrapper .dian-main .dian-zs-2 {
  position: absolute;
  width: 9px;
  height: 9px;
  left: calc(50% + 18px);
  top: 69px;
}
.dian-wrapper .dian-main .dian-ys-2 {
  position: absolute;
  width: 9px;
  height: 9px;
  left: calc(100% - 27px);
  top: 69px;
}
.dian-wrapper .dian-main .dian-zx-2 {
  position: absolute;
  width: 9px;
  height: 9px;
  left: calc(50% + 18px);
  top: 490px;
}
.dian-wrapper .dian-main .dian-yx-2 {
  position: absolute;
  width: 9px;
  height: 9px;
  left: calc(100% - 27px);
  top: 490px;
}
.shui-box {
  height: 410px;
  background: rgba(8, 16, 24, 0.27);
  margin-top: 15px;
  padding: 20px 10px 0 20px;
  width: calc(50% - 42px);
  height: 410px;
}
.shui-wrapper .shui-zs {
  position: absolute;
  width: 9px;
  height: 9px;
  left: 28px;
  top: 640px;
}
.shui-wrapper .shui-ys {
  position: absolute;
  width: 9px;
  height: 9px;
  left: calc(50% - 16px);
  top: 640px;
}
.shui-wrapper .shui-zx {
  position: absolute;
  width: 9px;
  height: 9px;
  left: 28px;
  top: 1061px;
}
.shui-wrapper .shui-yx {
  position: absolute;
  width: 9px;
  height: 9px;
  left: calc(50% - 16px);
  top: 1061px;
}
.shui-wrapper img {
  margin-top: 40px;
  width: 180px;
  height: 42px;
}
.yuny-wrapper {
  width: 56%;
}
.yuny-wrapper img {
  margin-top: 40px;
  margin-bottom: 23px;
  width: 210px;
  height: 42px;
}
.advise-wrapper-content-item {
  display: flex;
  margin-bottom: 8px;
}
.advise-wrapper-content-item img {
  width: 13px;
  height: 13px;
  margin-right: 13px;
  margin-top: 6px;
}
.advise-wrapper-content-item-text {
  font-size: 18px;
  color: #fff;
  opacity: 0.7;
}
