html {
  border: 3px solid rgba(255, 255, 255, 0.15);
  background-color: #152235;
  @media screen and (max-width: 1650px) and (min-width: 751px) {
    height: 99vh;
  }
  @media screen and (min-width: 1651px) {
  }
  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 {
  @media screen and (max-width: 750px) {
    width: 42rem;
    height: 4.5rem;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) {
    width: 504px;
    height: 51px;
  }
  @media screen and (min-width: 1651px) {
    width: 780px;
    height: 82px;
  }
}
.report-title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  @media screen and (max-width: 750px) {
    margin-top: 10px;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) {
    margin-top: 2px;
  }
  @media screen and (min-width: 1651px) {
    margin-top: 15px;
  }
}
.report-title-text {
  color: #ffffff;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: 400;
  line-height: 36px;
  @media screen and (max-width: 750px) {
    font-size: 2rem;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) {
    font-size: 24px;
  }
  @media screen and (min-width: 1651px) {
    font-size: 36px;
  }
}

.dian-wrapper img {
  margin-top: 80px;
  /*width: 180px;*/
  /*height: 42px;*/
  @media screen and (max-width: 750px) {
    width: 11rem;
    height: 2.35rem;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
    width: 180px;
    height: 42px;
  }
  @media screen and (min-width: 1651px) {
    width: 215px;
    height: 50px;
  }
}
.dian-wrapper .dian-main {
  /*display: flex;*/
  width: 100%;
  @media screen and (max-width: 750px) {
    /*display: flex;*/
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) {
    display: flex;
  }
  @media screen and (min-width: 1651px) {
    display: flex;
  }
}
.dian-wrapper .dian-main .dian-box1 {
  /*width: 50%;*/
  margin-right: 24px;
  /*height: 410px;*/
  background: rgba(8, 16, 24, 0.27);
  margin-top: 15px;
  padding: 20px 10px 0 20px;
  @media screen and (max-width: 750px) {
    width: calc(100% - 2rem);
    height: 25rem;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
    width: 50%;
    height: 410px;
  }
  @media screen and (min-width: 1651px) {
    width: 50%;
    height: 500px;
  }
}
.dian-wrapper .dian-main .dian-zs-1 {
  position: absolute;
  /*left: 28px;*/
  /*top: 69px;*/
  width: 9px;
  height: 9px;
  @media screen and (max-width: 750px) {
    left: 1.75rem;
    top: 4.05rem;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
    left: 28px;
    top: 69px;
  }
  @media screen and (min-width: 1651px) {
    left: 28px;
    top: 77px;
  }
}
.dian-wrapper .dian-main .dian-ys-1 {
  position: absolute;
  /*left: calc(50% - 16px);*/
  /*top: 69px;*/
  width: 9px;
  height: 9px;
  @media screen and (max-width: 750px) {
    right: 1.25rem;
    top: 4.05rem;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
    left: calc(50% - 16px);
    top: 69px;
  }
  @media screen and (min-width: 1651px) {
    left: calc(50% - 16px);
    top: 77px;
  }
}
.dian-wrapper .dian-main .dian-zx-1 {
  position: absolute;
  /*left: 28px;*/
  /*top: 490px;*/
  width: 9px;
  height: 9px;
  @media screen and (max-width: 750px) {
    left: 1.75rem;
    top: 29.75rem;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
    left: 28px;
    top: 490px;
  }
  @media screen and (min-width: 1651px) {
    left: 28px;
    top: 588px;
  }
}
.dian-wrapper .dian-main .dian-yx-1 {
  position: absolute;
  /*left: calc(50% - 16px);*/
  /*top: 490px;*/
  width: 9px;
  height: 9px;
  @media screen and (max-width: 750px) {
    right: 1.25rem;
    top: 29.75rem;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
    left: calc(50% - 16px);
    top: 490px;
  }
  @media screen and (min-width: 1651px) {
    left: calc(50% - 16px);
    top: 588px;
  }
}
.dian-wrapper .dian-main .dian-box2 {
  /*width: 50%;*/
  /*height: 410px;*/
  background: rgba(8, 16, 24, 0.27);
  margin-top: 15px;
  padding: 20px 10px 0 20px;
  @media screen and (max-width: 750px) {
    width: calc(100% - 2rem);
    height: 25rem;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
    width: 50%;
    height: 410px;
  }
  @media screen and (min-width: 1651px) {
    width: 50%;
    height: 500px;
  }
}
.dian-wrapper .dian-main .dian-zs-2 {
  position: absolute;
  /*left: calc(50% + 18px);*/
  /*top: 69px;*/
  width: 9px;
  height: 9px;
  @media screen and (max-width: 750px) {
    left: 1.75rem;
    top: 31.25rem;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
    left: calc(50% + 18px);
    top: 69px;
  }
  @media screen and (min-width: 1651px) {
    left: calc(50% + 17px);
    top: 77px;
  }
}
.dian-wrapper .dian-main .dian-ys-2 {
  position: absolute;
  /*left: calc(100% - 27px);*/
  /*top: 69px;*/
  width: 9px;
  height: 9px;
  @media screen and (max-width: 750px) {
    right: 1.25rem;
    top: 31.25rem;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
    left: calc(100% - 27px);
    top: 69px;
  }
  @media screen and (min-width: 1651px) {
    left: calc(100% - 27px);
    top: 77px;
  }
}
.dian-wrapper .dian-main .dian-zx-2 {
  position: absolute;
  /*left: calc(50% + 18px);*/
  /*top: 490px;*/
  width: 9px;
  height: 9px;
  @media screen and (max-width: 750px) {
    left: 1.75rem;
    top: 56.95rem;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
    left: calc(50% + 18px);
    top: 490px;
  }
  @media screen and (min-width: 1651px) {
    left: calc(50% + 17px);
    top: 588px;
  }
}
.dian-wrapper .dian-main .dian-yx-2 {
  position: absolute;
  /*left: calc(100% - 27px);*/
  /*top: 490px;*/
  width: 9px;
  height: 9px;
  @media screen and (max-width: 750px) {
    right: 1.25rem;
    top: 56.95rem;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
    left: calc(100% - 27px);
    top: 490px;
  }
  @media screen and (min-width: 1651px) {
    left: calc(100% - 27px);
    top: 588px;
  }
}
.shui-box {
  /*width: calc(50% - 42px);*/
  height: 410px;
  background: rgba(8, 16, 24, 0.27);
  margin-top: 15px;
  padding: 20px 10px 0 20px;
  @media screen and (max-width: 750px) {
    width: calc(100% - 2rem);
    height: 25rem;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
    width: calc(50% - 42px);

    height: 410px;
  }
  @media screen and (min-width: 1651px) {
    width: calc(50% - 42px);

    height: 500px;
  }
}
.shui-wrapper .shui-zs {
  position: absolute;
  /*left: 28px;*/
  /*top: 640px;*/
  width: 9px;
  height: 9px;
  @media screen and (max-width: 750px) {
    left: 1.75rem;
    top: 66rem;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
    left: 28px;
    top: 640px;
  }
  @media screen and (min-width: 1651px) {
    left: 28px;
    top: 746px;
  }
}
.shui-wrapper .shui-ys {
  position: absolute;
  /*left: calc(50% - 16px);*/
  /*top: 640px;*/
  width: 9px;
  height: 9px;
  @media screen and (max-width: 750px) {
    right: 1.25rem;
    top: 66rem;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
    left: calc(50% - 16px);
    top: 640px;
  }
  @media screen and (min-width: 1651px) {
    left: calc(50% - 16px);
    top: 746px;
  }
}
.shui-wrapper .shui-zx {
  position: absolute;
  /*left: 28px;*/
  /*top: 1061px;*/
  width: 9px;
  height: 9px;
  @media screen and (max-width: 750px) {
    left: 1.75rem;
    top: 91.70rem;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
    left: 28px;
    top: 1061px;
  }
  @media screen and (min-width: 1651px) {
    left: 28px;
    top: 1251px;
  }
}
.shui-wrapper .shui-yx {
  position: absolute;
  /*left: calc(50% - 16px);*/
  /*top: 1061px;*/
  width: 9px;
  height: 9px;
  @media screen and (max-width: 750px) {
    right: 1.25rem;
    top: 91.70rem;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
    left: calc(50% - 16px);
    top: 1061px;
  }
  @media screen and (min-width: 1651px) {
    left: calc(50% - 16px);
    top: 1251px;
  }
}
.shui-wrapper img {
  margin-top: 40px;
  /*width: 180px;*/
  /*height: 42px;*/
  @media screen and (max-width: 750px) {
    width: 11rem;
    height: 2.35rem;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
    width: 180px;
    height: 42px;
  }
  @media screen and (min-width: 1651px) {
    width: 215px;
    height: 50px;
  }
}
.yuny-wrapper {
  /*width: 56%;*/
  @media screen and (max-width: 750px) {
    width: 100%;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) {
    width: 56%;
  }
  @media screen and (min-width: 1651px) {
    width: 56%;
  }
}
.yuny-wrapper img {
  margin-top: 40px;
  /*width: 210px;*/
  /*height: 42px;*/
  margin-bottom: 23px;
  @media screen and (max-width: 750px) {
    width: 13.5rem;
    height: 2.4rem;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
    width: 210px;
    height: 42px;
  }
  @media screen and (min-width: 1651px) {
    width: 275px;
    height: 55px;
  }
}
.advise-wrapper-content-item {
  display: flex;
  @media screen and (max-width: 750px) {
    margin-bottom: 0.57rem;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) {
    margin-bottom: 8px;
  }
  @media screen and (min-width: 1651px) {
    margin-bottom: 16px;
  }
}
.advise-wrapper-content-item img {
  @media screen and (max-width: 750px) {
    width: 1rem;
    height: 1rem;
    margin-right: 1rem;
    margin-top: 0.4rem;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) {
    width: 13px;
    height: 13px;
    margin-right: 13px;
    margin-top: 6px;
  }
  @media screen and (min-width: 1651px) {
    width: 20px;
    height: 20px;
    margin-right: 20px;
    margin-top: 10px;
  }
}
.advise-wrapper-content-item-text {
  @media screen and (max-width: 750px) {
    font-size: 1.4rem;
    letter-spacing: 3px;
  }
  @media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
    font-size: 18px;
  }
  @media screen and (min-width: 1651px) {
    font-size: 28px;
  }
  color: #fff;
  opacity: 0.7;
}
