body {
  background: #efefef;
  // width: 100%;
}
* {
  margin: 0;
  padding: 0;
}
.yinying {
  // height: 1080px;
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
  position: absolute;
  top: 60px;
  z-index: 96;
  // visibility: visible;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
b {
  font-weight: normal;
}

.homeTitle {
  padding: 10px 0;
  padding-left: 20px;
  background: #299cff;
  color: #ffffff;
  // width: 1900px;
  height: 40px;
  line-height: 40px;
  background: url(./image/banner.png) no-repeat;
  background-size: 100% 114%;
  overflow: hidden;
}
.container {
  padding: 15px 20px;
  z-index: -1;

  .main {
    margin-right: 200px;
    .news {
      display: flex;
      // 三个标题
      > div {
        background: #ffffff;
        box-shadow: 0px 0px 2px 2px #e2e2e2;
        margin-right: 20px;
        > :nth-child(1) {
          display: flex;
          align-items: center;
          border-bottom: 1px solid #e1e1e1;
          padding: 10px 0;
          img {
            height: 20px;
            margin-right: 7px;
            margin-left: 20px;
          }
        }
      }
      // 左边部分
      > :nth-child(1) {
        width: 40%;
        .lunbotu {
          position: relative;
          padding: 10px 0;
          // 两个箭头按钮
          > :nth-child(1) {
            width: 86%;
            position: absolute;
            left: 7%;
            top: 50%;
            transform: translateY(-25px);
            display: flex;
            justify-content: space-between;

            > div {
              width: 50px;
              height: 50px;
              background: rgba(0, 0, 0, 0.4);
              border-radius: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
              span {
                display: block;
                height: 10px;
                width: 10px;
                border-right: 2px solid white;
                border-bottom: 2px solid white;
                transform: rotate(-45deg);
              }
            }
            > :nth-child(1) {
              span {
                transform: rotate(135deg);
              }
            }
          }
          a {
            display: block;
            width: 100%;
            text-align: center;
          }
          img {
            width: 90%;
            // height: 264px;
            height: 332px;
          }
          // 底部文字和小白条
          > :nth-child(3) {
            bottom: 10px;
            left: 5%;
            color: white;
            width: 90%;

            height: 30px;
            line-height: 30px;
            position: absolute;
            display: flex;
            justify-content: space-between;

            background: rgba(0, 0, 0, 0.7);
            // right: 50px;

            .linkTitle {
              margin-left: 10px;
              width: 60%;

              p {
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              :nth-child(n + 2) {
                display: none;
              }
            }
            // 三个小白条
            > :nth-child(2) {
              position: absolute;
              right: 10px;
              left: 70%;
              top: 50%;
              transform: translateY(-2px);
              display: flex;
              justify-content: space-between;
              align-items: center;
              span {
                width: 32%;
                max-width: 50px;
                height: 4px;
                border-radius: 3px;
                background: #777777;
                display: inline-block;
              }
            }
          }
          .lunbotuColor {
            background: #ffffff !important;
          }
        }
      }
      .middle {
        width: 30%;
        > span {
          display: block;
          white-space: nowrap;
          width: 90%;
          margin: 15px auto;
          padding: 10px 0;
          padding-left: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #797979;
          font-size: 14px;
        }
        > span:nth-child(odd) {
          background: #f1f5fe;
        }
        > span:nth-child(even) {
          background: #fbf8f4;
        }
      }
      .right {
        width: 30%;
        > :nth-child(n + 2) {
          text-decoration: none;
          display: block;
          > div {
            margin: 12px 20px 5px;
            height: 70px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            color: black;
            // img {
            //   width: 100%;

            //   // height: 50px;
            // }
            img {
              height: 40px;
              margin-right: 20px;
            }
          }
        }
        .pink {
          border: 1px solid #fed199;
          background: #fff3e5;
        }
        .blue {
          border: 1px solid #ccdafe;
          background: #ecf2fe;
        }
      }
    }
    .category {
      background: #ffffff;
      margin-top: 20px;
      margin-right: 20px;
      > :nth-child(1) {
        display: flex;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #e1e1e1;
        img {
          height: 20px;
          margin-left: 20px;
          margin-right: 7px;
        }
      }
      > :nth-child(2) {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 20px 0;
        position: relative;
        a,
        div {
          display: block;
          width: 20%;
          cursor: pointer;
        }
        img {
          // height: 100px;
          width: 100%;
        }
        // div {
        //   position: absolute;
        //   width: 100%;
        //   top: 50%;

        //   left: 0;
        //   display: flex;
        //   justify-content: space-around;
        //   align-items: center;
        //   height: 30px;
        //   transform: translateY(-15px);
        //   color: white;
        //   span {
        //     text-align: center;
        //     font-size: 20px;
        //     margin-left: -100px;
        //     font-weight: bold;
        //     font-size: 22px;
        //   }
        // }
      }
    }
    .core {
      // display: none;
      background: #ffffff;
      margin-top: 20px;
      margin-right: 20px;
      box-shadow: 0 0 2px 2px #e6e6e6;
      // width: 100%;
      > :nth-child(1) {
        display: flex;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #e1e1e1;
        img {
          height: 20px;
          margin-right: 7px;
          margin-left: 20px;
        }
      }
      b {
        font-size: 26px;
        color: black;
        font-weight: normal;
      }
      .echartTitle {
        display: flex;
        align-items: center;
        color: #797979;
        > div {
          display: flex;
          align-items: center;
          margin-right: 20px;
          // width: 200px;
          padding: 10px 0;
          padding-right: 20px;
          > :nth-child(1) {
            display: none;
          }
          img {
            height: 20px;
            margin-left: 20px;
            margin-right: 5px;
          }
        }
      }
      .fourPage {
        // position: relative;
        width: 100%;
      }

      .echartArea {
        display: flex;
        justify-content: space-between;
        background: #f2f2f2;
        padding: 10px 20px;
        padding-bottom: 20px;
        // display: none;
        box-shadow: 0 0 2px 2px #e6e6e6;
        > div {
          width: 32%;
          background: #ffffff;

          h4 {
            padding: 10px 0;
            padding-left: 20px;
            border-bottom: 1px solid #e1e1e1;
          }
          > div {
            .flex {
              justify-content: left;
              padding-left: 20px;
              margin-top: 10px;
              > span {
                width: 50%;
                color: #797979;
              }
              b {
                font-size: 26px;
                font-weight: normal;
                color: black;
              }
              i {
                font-style: normal;
                color: #2f9eff;
              }
            }
            > :nth-child(3) {
              // width: 500px;
              width: 96%;
              height: 300px;
              text-align: center;
              margin: 20px auto 0;
            }
          }
        }
      }

      .cityBuild {
        display: flex;
        justify-content: space-between;
        background: #f2f2f2;
        padding: 10px 20px;
        padding-bottom: 20px;
        display: none;
        box-shadow: 0 0 2px 2px #e6e6e6;
        // width: 100%;
        h3 {
          padding: 10px 0;
          padding-left: 20px;
          border-bottom: 1px solid #e1e1e1;
        }
        h4 {
          padding: 10px 0;
          border-bottom: 1px solid #f5eaea;
        }
        b {
          font-size: 26px;
          color: black;
          font-weight: normal;
        }
        > div {
          width: 32%;
          background: #ffffff;
        }
        .left {
          .box {
            padding-left: 10px;
            margin: 10px 10px 0;
            padding-bottom: 10px;

            div {
              padding: 20px 0;
            }

            li {
              padding: 10px 0;
              list-style: none;

              &::before {
                content: "●";
                color: #1492ff;
                margin-right: 5px;
              }
            }
            ul {
              li:nth-child(even) {
                margin-bottom: 15px;
              }
            }
          }
        }

        .middle {
          .flex {
            padding-left: 20px;
            > div {
              width: 50%;
            }
            span {
              display: block;
              margin: 10px 0;
              color: #797979;
            }
            b {
              margin-right: 10px;
            }
            i {
              font-style: normal;
              color: #269bff;
            }
          }

          .echart01 {
            margin-top: 40px !important;
            height: 300px;
            // width: 400px;
            width: 90%;
            margin: 0 auto;
          }

          p {
            padding-left: 20px;
            margin-top: 10px;
            color: #797979;
          }

          // i {
          //   font-style: normal;
          // }
          .echart02 {
            height: 100px;
            // width: 400px;
            width: 90%;
          }
        }

        .right {
          h4 {
            padding-left: 30px;
            border-bottom: none;
          }
          .flex {
            padding-left: 20px;
            > div {
              width: 50%;
              span {
                display: block;
                margin: 10px 0;
                color: #797979;
              }
              b {
                margin-right: 10px;
              }
              i {
                font-style: normal;
                color: #1492ff;
              }
            }
          }

          div[class^="echart"] {
            // width: 500px;
            width: 90%;
            height: 260px;
            margin: 0 auto;
          }
          .echart03 {
            margin-bottom: 20px;
          }
        }
      }

      .townBuild {
        display: flex;
        justify-content: space-between;
        background: #f2f2f2;
        padding: 10px 20px;
        padding-bottom: 20px;
        display: none;
        box-shadow: 0 0 2px 2px #e6e6e6;
        h3 {
          padding: 10px 0;
          padding-left: 20px;
          border-bottom: 1px solid #e1e1e1;
        }

        h4 {
          padding: 20px 0;
          border-bottom: 1px solid #e1e1e1;
        }

        div[class^="echart"] {
          // width: 500px;
          width: 95%;
          height: 350px;
          margin: 0 auto;
        }

        > div {
          width: 32%;
          background: #ffffff;
        }

        .flex {
          padding-left: 20px;
          > div {
            width: 50%;
            span {
              display: block;
              margin: 10px 0;
              color: #797979;
            }
            b {
              margin-right: 10px;
            }
            i {
              font-style: normal;
              color: #269bff;
            }
          }
        }
        .province {
          > :nth-child(1) {
            text-align: right;
            padding-right: 30px;
            margin-top: 20px;
            span {
              margin-right: -5px;
              border: 1px solid #e6e6e6;
              box-shadow: 0 0 1px 1px #e6e6e6;

              padding: 10px;
              display: inline-block;
              border-radius: 2px;
            }
            .provinceTypeColor {
              background: #1492ff;
              color: #ffffff;
            }
          }
          .echart05 {
            // width: 500px;
            width: 95%;
            height: 500px;
            margin-top: 100px;
          }
          .echart055 {
            display: none;
            // width: 500px;
            width: 95%;
            height: 500px;
            margin-top: 100px;
          }

          .color {
            background: #1492ff;
          }
        }

        .middle {
          h4 {
            padding-left: 10px;
            margin: 0 20px;
            border-bottom: none;
          }
        }

        .right {
          h4 {
            padding-left: 30px;
            border-bottom: none;
          }

          li {
            list-style: none;
            color: #797979;
            padding: 10px 0;
            padding-left: 20px;
            &::before {
              content: "●";
              color: #1492ff;
              margin-right: 10px;
            }
          }

          .echart08 {
            // width: 500px;
            width: 95%;
            height: 600px;
            margin: 20px auto 0;
          }
        }
      }

      .occupation {
        background: #f2f2f2;
        padding: 10px 10px;
        padding-bottom: 20px;
        display: none;
        box-shadow: 0 0 2px 2px #e6e6e6;
        // width: 100%;
        h3 {
          padding: 10px 0;
          padding-left: 20px;
          border-bottom: 1px solid #e1e1e1;
        }
        h4 {
          padding: 20px 0;
          padding-left: 20px;
          // border-bottom: 1px solid #e1e1e1;
        }
        span {
          display: block;
        }
        .topBox {
          width: 100%;
          > .flex {
            width: 100%;
            align-items: flex-start;
            // height: 570px;

            > .left {
              width: 38%;
              background: #ffffff;
              div[class^="echart"] {
                width: 90%;
                // width: 520px;
                // max-width: 90%;
                height: 200px;
                margin: 0 auto;
              }
            }

            > .right {
              width: 60%;
              background: #ffffff;
              // min-height: 570px;

              > .flex {
                align-items: flex-start;
                padding-top: 10px;
                position: relative;
                .left {
                  width: 56%;
                  height: 310px;
                  margin-left: 10px;
                  // margin-right: 2px;

                  // box-shadow: 0 0 1px 1px #e1e1e1;
                  h4 {
                    // border-bottom: 1px solid #e1e1e1;
                    padding: 10px;
                  }
                  .echart012 {
                    width: 98%;
                    // width: 450px;
                    // max-width: 100%;
                    height: 300px;
                    margin: 0 auto;
                  }
                }
                > .right {
                  // height: 290px;
                  top: 10px;
                  bottom: 0;
                  left: 56%;
                  right: 10px;
                  position: absolute;
                  padding-left: 20px;
                  // margin-top: 15px;
                  // padding: 10px 20px 0;
                  // box-shadow: 0 0 1px 1px #e1e1e1;

                  background: #f8faff;

                  // margin-right: 10px;
                  b {
                    font-size: 26px;
                    color: #ffa333;
                    margin-right: 10px;
                  }
                  i {
                    font-style: normal;
                    color: #26b6ff;
                  }
                  > :nth-child(1) {
                    display: flex;
                    justify-content: space-between;
                    padding-right: 30px;
                    margin-top: 10px;

                    i {
                      color: #e17040 !important;
                    }
                  }
                  .smallBox {
                    display: flex;
                    justify-content: left;
                    color: #797979;
                    align-items: center;
                    background: #ffffff;
                    margin: 15px 10px 0 0px;
                    position: relative;
                    .echart013 {
                      width: 70px;
                      // width: 30%;
                      // max-width: 30%;
                      height: 200px;
                    }

                    ul {
                      // width: 70%;
                      position: absolute;
                      left: 70px;
                      right: 0;
                      li {
                        list-style: none;
                        display: flex;
                        justify-content: space-between;
                        margin-top: 10px;
                        padding-left: 10px;
                        padding-right: 20px;
                        align-items: flex-end;
                        flex-wrap: wrap;
                        span {
                          margin-left: -13px;
                          &::before {
                            content: "●  ";
                            color: #ffd199;
                          }
                        }
                        i {
                          color: #e25d26;
                          // margin-left: 30px;
                        }
                      }
                    }
                  }
                }
              }
              h4 {
                border-bottom: none;
                padding: 10px;
                padding-left: 20px;
              }
              table {
                width: 95%;
                margin: 0 auto 20px;
                tr {
                  height: 40px;
                }
                th {
                  background: #3e9ef5;
                  color: white;
                }
                tbody {
                  text-align: center;
                  tr {
                    background: #f8f8f8;
                  }
                }
              }
              .fourTitle {
                display: flex;
                justify-content: space-between;
                padding: 0 20px;
                span:nth-child(2) {
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  text-align: left;
                }
                b {
                  font-size: 26px;
                  font-weight: normal;
                  margin-right: 10px;
                }
                i {
                  color: #26a8ff;
                  font-style: normal;
                }
              }
            }
          }
        }

        .bottomBox {
          margin-top: 20px;

          .flex {
            align-items: flex-start;
            > div {
              width: 33%;
              background: #ffffff;
              padding-bottom: 20px;
              > :nth-child(2) {
                // width: 400px;
                width: 90%;
                margin: 10px auto 0;
                height: 300px;
              }

              > :nth-child(3) {
                padding: 20px 0;
                text-align: center;
                margin: 0 10px;
                box-shadow: 0 0 1px 1px #e1e1e1;
              }
            }
          }
        }
      }
    }
  }
  .mainTitle {
    position: absolute;
    top: 73px;
    right: 20px;
    width: 200px;
    height: 800px;
    background: #ffffff;
    box-shadow: 0px 0px 1px 1px #e2e2e2;
    z-index: 97;
    > :nth-child(1) {
      display: flex;
      align-items: center;
      justify-content: left;
      padding: 10px 0;
      border-bottom: 1px solid #e1e1e1;
      img {
        height: 17px;
        margin-right: 7px;
        margin-left: 20px;
      }
    }

    > ul > li {
      list-style: none;
      text-align: center;
      padding: 10px 0;

      > :nth-child(1) {
        > :nth-child(1) {
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;

          margin: 5px auto;
          border-radius: 20%;
          width: 40px;
          background: #269bff;
          img {
            height: 20px;

            // background: #269bff;
          }
        }
        > :nth-child(2) {
          text-align: center;
        }
      }

      > :nth-child(2) {
        display: none;
      }
    }
  }
}
.sanjiao {
  top: 200px;
  position: absolute;
  z-index: 99;
  right: 225px;
  display: none;
  // height: 10px;
  width: 0;
  // background-color: turquoise;
  border-top: 20px solid transparent;
  border-left: 40px solid #ffffff;
  border-bottom: 20px solid transparent;
  // box-shadow: 0 0 2px 2px #ffffff;
}

.totalEchart {
  > div {
    z-index: 100;
    left: 20px !important;
    right: 240px !important;
    width: unset !important;
  }
}
.x {
  font-size: 30px;
  color: white;
  position: absolute;
  right: 240px;
  z-index: 101;
  display: none;
  top: 73px;
  cursor: pointer;
  // text-align: center;
  height: 20px;
  line-height: 20px;
  width: 20px;
  // border-radius: 50%;

  background: red;
  span {
    position: absolute;
    top: -4px;
    left: 2px;
  }
}
.m4 {
  width: 25%;
}
.m5 {
  width: 30%;
}

.m62 {
  width: 27.08%;
}
.m7 {
  width: 6.01%;
}
.m8 {
  width: 25.3%;
}

.m0 {
  width: 83.5%;
}