/* 500改1024 */
@media (min-width: 1025px){
.bottom-box {
    width: 580px;
    position: absolute;
    top: 0;
    right: 0;
    bottom:0;
    left: auto;
    height: 100%;
    background: white;
    z-index: 1111;
    display: none;
    color: #333333;
    font-family: Microsoft YaHei !important;
  }
  span{
    font-family: Microsoft YaHei !important;
  }
  .bottom-box .scroll{
   height: 100%;
   overflow-y: auto;
  }
  .bottom-box .closeSideButton {
    left: -16px;
    top: 28px;
    background: #27B0FC;
    font-size: 44px;
    width: 42px;
    height: 42px;
}
    .bottom-box .top_box{
        margin-top: 20px;
        border-bottom: 1px solid #E0E0E0;
        line-height: 60px;
    }
    .bottom-box .cityName{
        font-size: 26px;
        padding-left: 10%;
        width: 30%;
        text-align: left;
        display: inline-block;
        color:  #115487;
        font-weight: bold;
    }
    .bottom-box .time{
      color: #999999;
      font-size: 18px;
      width: 56%;
      text-align: right;
      display: inline-block;
    }
    .bottom-box .content_box{
        width: 92%;
        margin:20px auto;
    }
    .bottom-box .content_box .dashBox{
      text-align: center;
    }
    .bottom-box .content_box .selectBox{
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        font-size: 16px;
        position: relative;
        line-height: 40px;
    }
    .bottom-box .content_box .selectBox .right-select{
        width: 110px;
        text-align: center;
        position: absolute;
        right: 0;
    }
    .bottom-box .content_box .selectBox img{
        width: 9px;
        height: 9px;
        margin-left: 2px;
    }
    .bottom-box .content_box .selectBox .title{
      cursor: pointer;
    }
    .bottom-box .content_box .selectBox .right-select .btn{
        font-size: 18px;
        cursor: pointer;
    }
    .bottom-box .content_box .selectBox .right-select .down-select-box{
        background: #FFFFFF;
        border: 2px solid #FFFFFF;
        box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
        border-radius: 6px;
        font-size: 18px;
        font-weight: 400;
        color: #1DBCFC;
        margin-top: 5px;
        position: absolute;
        width: 123px;
        z-index: 1;
    }
    .bottom-box .content_box .selectBox .right-select .down-select-box .select-li{
      line-height: 50px; 
      border-bottom:1px solid #E6ECEE;
      cursor: pointer;
    }
    .bottom-box .content_box .selectBox .right-select .down-select-box .select-li:last-child{
        border: none;
    }
    .weatherBox .weather-rank{
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        text-align: center;
    }
    .weatherBox .weather-detail{
        text-align: center;
    }
    .weatherBox .weather-detail .weather-item{
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        display: inline-block;
        margin: 20px 10px;
        vertical-align: middle;
    }
    .weatherBox .weather-detail .weather-item div{
      display: inline-block;
    vertical-align: middle;
    }
    .weatherBox .weather-detail .weather-item .img img{
       width: 35px;
    }
    .sixBarBox .sixBarTitle{
        font-size: 18px;
        font-weight: 400;
        color: #333333;
    }
    .sixBarBox .sixBar-ul .sixBar-li{
        display: inline-block; 
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        margin: 10px 10px;
        text-align: center;
        width: calc(100% / 8);
    }
    .content-today{
        margin-top: 30px;
        display: inline-block;
        width: 100%;
    }
    .content-today .title{
        display: inline-block;
        width: 100%;
        margin-bottom: 20px;
    }
    .content-today .title .title-left{
        font-weight: 400;
        color: #333333;
        float: left;
    }
    .content-today .title .title-right{
        font-size: 16px;
        font-weight: 400;
        color: #666666;
        float: right;
        cursor: pointer;
    }
    .content-today .sixRectBox .sixBar-ul .sixBar-li{
        width: calc(100% / 8);
        display: inline-block;
        text-align: center;
        margin: 0 4px;
    }
    .content-today .sixRectBox .sixBar-ul .sixBar-li .text2{
        height: 30px;
        background: #6CCC06;
        border-radius: 5px 5px 0px 0px; 
        font-size: 16px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 30px;
        border: 1px solid #CCCCCC;
        border-bottom: none;
    }
    .content-today .sixRectBox .sixBar-ul .sixBar-li .text1{
        height: 30px;
        background: #FFFFFF;
        border: 1px solid #CCCCCC;
        border-radius: 0px 0px 5px 5px;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        line-height: 30px;
    }
    .acipBox{
      width: 92%;
      margin: auto;
      margin-top: 45px;
    }
    .acipChart{
      border-top: 1px solid #ccc;
      margin-top: 10px;
      padding: 20px 0;
    }
    .acipBox .title{
        font-size: 18px;
        font-weight: bold;
        color:#115487;
        border-left: 5px solid #115487;
        padding-left: 8px;
    }
    .futureBox{
      width: 92%;
      margin: auto;
    }
    .futureBox .flexBox{
         display: inline-block;
         width:100%;
    }
   
    .futureBox .futureContent{
       border-top:1px solid #ccc;
       margin-top: 10px;
       padding: 20px 0;
    }
    .futureBox .flexBox .text_left{
        font-size: 18px;
        font-weight: bold;
        color: #115487;
        float: left;
        border-left:5px solid #115487;
        padding-left: 8px;
    }
    .futureBox .flexBox .text_right{
        font-size: 16px;
        font-weight: 400;
        color: #666666;
        float: right;
        cursor: pointer;
    }
    .futureBox .futureContent .threeBox .three-li:last-child{
      border-right: none;
    }
    .futureBox .futureContent .threeBox .three-li{
      width: calc(100% / 4);
      display: inline-block;
      text-align: center;
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      padding: 0 18px;
      border-right: 1px solid #EBEBEB;
    }
    .futureBox .futureContent .threeBox .three-li .title{
        color: #1DBCFC;
        margin-bottom: 10px;
    }
    .futureBox .futureContent .threeBox .three-li .margin{
       line-height: 38px;
    }
    .futureBox .futureContent .threeBox .three-li .bar{
        /* width: 129px; */
        height: 24px;
        line-height: 24px;
        background: #FD7E25;
        border-radius: 10px;
        color: #FFFFFF;
    }
    .colorBar {
        width: 100%;
        height: 7px;
        background: #ffff00;
        border-radius: 4px;
        margin: 8px 0;
      }
      .echartsBox{
          position: relative;
      }
      .echartsBox .el-progress__text{
        position: absolute;
        top: 85px;
        left: 0;
        width: 100%;
        text-align: center;
        margin: 0;
        transform: translateY(-50%);
        font-size: 36px;
      }

      .day-aqi-box {
        width: 92%;
        margin: auto;
        margin-top: 20px;
        background-color: #fff;
      }
      .day-aqi-box .title .left-text {
        font-size: 18px;
        color: #115487;
        font-weight: bold;
        border-left: 5px solid #115487;
        padding-left: 8px;
      }
      .day-aqi-box .title .right-text {
        color: #666666;
        float: right;
        cursor: pointer;
      }
      .chart_box{
        border-top:1px solid #ccc;
        margin-top: 10px;
      }
      .day-aqi-box .day-aqi-chart,.month-day-change .day-aqi-chart,#year-acc-chart,#year-air-chart{
        width: 100%;
        height: 300px;
      }
      .month-box .month-composite{
          text-align: center;
          margin-top: 40px;
      }
      .month-box .month-composite .text1{
        font-size: 18px;
      }
      .month-box .month-composite .text2{
        font-weight: 400;
        color: #27B0FC;
        font-size: 38px;
      }
      .month-box .sixBar{
        margin: 20px 0;
      }
      .month-box .sixBar .sixBar-ul{

      }
      .month-box .sixBar .sixBar-ul .sixBar-li{
        display: inline-block;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        margin: 10px 10px;
        text-align: center;
        width: calc(100% / 8);
      }
      .month-box .four-bar{

      }
      .month-box .four-bar .fourBox{
        text-align: center;
      }
      .month-box .four-bar .fourBox .fourBox-item{
        width: 245px;
        background: #FFFFFF;
        box-shadow: 0px 0px 8px 0px rgba(27, 142, 189, 0.71);
        border-radius: 4px;
        display: inline-block;
        text-align: center;
        line-height: 50px;
        color: #666666;
        font-size: 16px;
        margin-bottom: 10px;
        margin-right: 10px;
      }
      .month-box .tip{
        font-size: 14px;
        color: #999999;
        text-align: right;
        margin: 15px 0;
      }
      .month-day-change{
        width: 92%;
        margin: auto;
      }
      .month-day-change .title,.calendar-box .title,.month-mainpol .title{
        font-size: 18px;
        color: #115487;
        font-weight: bold;
        border-left: 5px solid #115487;
        padding-left: 8px;
      }
      .mainpol-chart{
        border-top:1px solid #ccc;
        margin-top: 10px;
        padding: 20px 0;
      }
      .month-day-change .title .text1{
        font-size: 18px;
        color: #115487;
        font-weight: bold;
      }
      .month-day-change .chart{
        border-top:1px solid #ccc;
        margin-top: 10px;
      }
      .month-day-change .title .text2{
        font-size: 16px;
        color: #666666;
        float: right;
        cursor: pointer;
      }
      .calendar-box{
        width: 92%;
        margin: auto;
      }
      .month-rose{
        width: 92%;
        margin: auto;
          text-align: center;
          margin-bottom: 15px;
      }
      .month-rose .title{
        text-align: left;
        font-size: 18px;
        color: #115487;
        font-weight: bold;
        border-left: 5px solid #115487;
        padding-left: 8px;
      }
      .month-rose-chart{
        border-top:1px solid #ccc;
       margin-top: 10px;
       padding: 20px 0;
      }
      .calendar-box .title{
        color: #115487;
        font-weight: bold;
        border-left: 5px solid #115487;
        padding-left: 8px;
      }
      .calendar-box .calendar-content{
        border-top:1px solid #ccc;
        margin-top: 10px;
        padding: 20px 0;
      }
      .month-rose .colorBar .colorBar-item{
        width: 65px;
        float: left;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
      }
      .month-rose .colorBar{
        background: none;
        text-align: center;
        height: auto;
        display: inline-block;
        width: auto;
      }
      .calendarIndexBox {
        background-color: #ffffff;
      }
      .calendarIndexBox .title_ul{
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
      }
      .calendarIndexBox .title_ul .title_li{
        width: calc(100% / 8);
        text-align: center;
        font-size: 16px;
        margin: 0 7px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 50px;
      }
      .calendarIndexBox .content_ul{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 0 10px;
      }
      .calendarIndexBox .content_ul .li_active{
        border: 2px solid #28b7de;
      }
      .calendarIndexBox .content_ul .content_li{
        box-sizing: border-box;
        width: calc(100% / 9);
        text-align: center;
        height: 60px;
        background: #e21234;
        margin: 8px !important;
        border-radius: 5px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        cursor: pointer;
        padding: 0 5px;
      }
      .calendarIndexBox .content_ul .content_li .content_day{
        height: 50%;
        line-height: 40px;
      }
      .calendarIndexBox .content_ul .content_li .content_text{
        height: 50%;
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .calendarIndexBox .colorList{
        margin: 42px auto 22px;
        padding: 0 40px;
        display: flex;
        justify-content: flex-start;
      }
      .calendarIndexBox .colorList .color_li{
        width: calc(100% / 7);
        border-top: 4px solid;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
      .calendarIndexBox .pollDetail{
        width: 100%;
        display: flex;
        justify-content: flex-start;
      }
      .calendarIndexBox .pollDetail .pollDetail_left{
        float: left;
        width: 174px;
        height: 243px;
        background: #eee41b;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .calendarIndexBox .pollDetail .pollDetail_left .pollDetail_left_content{
        text-align: center;
        color: #333333;
      }
      .calendarIndexBox .pollDetail .pollDetail_left .pollDetail_left_content .text1{
        font-size:16px;
        font-weight: 400;
      }
      .calendarIndexBox .pollDetail .pollDetail_left .pollDetail_left_content .text2{
        font-size: 54px;
        font-weight: 400;
      }
      .calendarIndexBox .pollDetail .pollDetail_right{
        width: calc(100% - 227px);
        padding-left: 19px;
        padding: 5px 19px 0;
        font-weight: 400;
      }
      .calendarIndexBox .pollDetail .line1{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      }
      .calendarIndexBox .pollDetail .line1 .text1{
        font-size: 16px;
        color: #333333;
      }
      .calendarIndexBox .pollDetail .line1 .text2{
        font-size: 16px;
        color: #999999;
      }
      .calendarIndexBox .pollDetail .line2{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      .calendarIndexBox .pollDetail .line2 span{
        width: calc(100% / 3);
        font-size: 16px;
        color: #999999;
        margin: 15px 0;
      }
      .calendarIndexBox .pollDetail .line2 .text3{
        color: #333333;
        margin-left: 10px;
        font-weight: 500;
      }
      .calendarIndexBox .pollDetail .line3 {
        display: flex;
        justify-content: flex-start;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        margin: 15px 0;
      }
      .calendarIndexBox .pollDetail .line3 div{
        width: 60%;
      }
      .calendarIndexBox .pollDetail .line3 div img{
        margin-right: 20px;
        vertical-align: middle;
      }
      .content_box .month-mainpol{
       
          margin-top: 10px;
      }
      .greenText{
        color: #4ab54e;
      }
      .redText{
        color: #ca1525;
      }
      .year-air-box {
        width: 92%;
        margin: 20px auto;
        font-family: Microsoft YaHei;
        font-weight: 400;
    }
      .year-air-box .left-text{
        font-size: 18px;
        color:  #115487;
        font-weight: bold;
        border-left: 5px solid #115487;
       padding-left: 8px;
      }
      .chart-box{
        border-top: 1px solid #ccc;
    margin-top: 10px;
    padding: 20px 0;
      }
      .year-air-box .title .year_air{
         float: right;
         cursor: pointer;
         width: auto !important;
      }
      .year-acc-box .left-text{
        font-size: 18px;
        display: inline-block;
        color:  #115487;
        font-weight: bold;
        border-left: 5px solid #115487;
        padding-left: 8px;
        margin-top: 8px;
      }
      .year-acc-box .right-text{
        display: inline-block;
        float: right;
        position: relative;
        cursor: pointer;
        width: 100px;
      }
      .year-acc-box{
        width: 92%;
        margin: auto;
      }
      .year-acc-box .title{
        display: inline-block;
        width:100%;
      }
      .year-acc-box .right-select .btn{
        border: 1px solid #999;
        padding: 0 5px;
        font-size: 15px;
      }
      .year-acc-box .right-select .down-select-box{
        background: #FFFFFF;
        border: 2px solid #FFFFFF;
        box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 35%);
        border-radius: 6px;
        font-size: 14px;
        font-weight: 400;
        margin-top: 5px;
        position: absolute;
        z-index: 1;
        cursor: pointer;
        padding: 2px 12px;
    line-height: 25px;
      }
      .mainPol_tip{
        width: 8px;
        height: 8px;
        background: red;
        position: relative;
        float: left;
        border-radius: 50%;
        left: 7px;
      }
}