.main-box {
  display: flex;
  flex-direction: column;
  padding: 15px 20px;
  overflow: hidden;
  box-sizing: border-box;
  .box-first {
    display: flex;
    flex-direction: row;

    .machine {
      width: 400px;
      text-align: center;
      img {
        width: 343px;
        height: 236px;
      }
    }

    .machine-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: #111827;
      height: 100%;
      padding-bottom: 20px;

      .machine-bottom {
        padding: 0 30px;
        margin-top: 28px;
        ul {
          display: flex;
          list-style-type: none;
          padding: 0;
          margin: 0;
          span {
            color: #82879d;
            font-size: 18px;
            font-weight: 600;
          }
          li {
            display: flex;
            flex-direction: column;
          }

          li:first-child {
            width: 32%;

            .status {
              display: flex;
              margin-top: 35px;

              .status-list {
                display: flex;
                flex-direction: column;
                padding-right: 40px;

                .staus-info {
                  display: flex;
                  margin-top: 16px;
                  justify-content: space-between;
                  width: 58px;
                  .infoimg {
                    width: 17px;
                    height: 17px;
                    background-image: url("./assets/default.png");
                  }

                  .infotext {
                    font-size: 16px;
                    font-weight: 500;
                    color: #636c97;
                  }

                  .active {
                    color: white;
                    font-weight: 400;
                  }
                }
              }
            }
          }

          li:nth-child(2) {
            flex: 1;

            .signal-status {
              display: flex;
              margin-top: 35px;

              .signal-status-list {
                display: flex;
                flex-direction: column;
                padding-right: 45px;

                .signal-icon {
                  position: relative;

                  img:last-child {
                    position: absolute;
                    right: 8px;
                    bottom: 0;
                  }
                }

                .signal-text {
                  margin-top: 10px;
                  font-size: 16px;
                  font-weight: 500;
                  color: #636c97;
                }
              }
            }
          }

          li:nth-child(3) {
            width: 16%;
          }
          .speed {
            display: flex;
            flex-direction: column;
            color: #596189;
            font-size: 16px;
            font-weight: 600;
            margin-top: 13px;
            justify-content: space-between;
            p {
              margin: 0;
              padding: 0;
              margin-top: 8px;
              font {
                color: white;
              }

              em {
                font-style: normal;
                color: #323858;
                font-size: 14px;
              }
            }
          }
          li:last-child {
            width: 10%;

            .times {
              color: #596189;
              font-size: 16px;
              font-weight: 600;
              margin-top: 28px;
              font {
                color: white;
                font-size: 14px;
              }
            }
            .times:last-child {
              margin-top: 20px;
            }
          }
        }
      }
    }
  }
  .box-second {
    display: flex;
    flex-direction: column;
    background-color: #111827;
    .storage-bottom {
      display: flex;
      padding: 20px;
      overflow: hidden;
      .storagebox {
        width: 100%;
        display: flex;
      }
    }
    .storage-page {
      text-align: right;
      color: #fff;
      padding-right: 30px;
      font-size: 13px;
      padding-bottom: 10px;
      span {
        padding: 0 6px;
      }
      a {
        margin-right: 10px;
      }
      a.active {
        color: #1890ff;
        border: #1890ff solid 1px;
        background-color: #111827;
        padding: 0 4px;
        text-align: center;
      }
    }
  }
}
@media screen and(max-width:1800px) and(min-width:1400px) {
  .main-box .box-first .machine-right .machine-bottom ul li:last-child {
    width: 16%;
  }
  .main-box
    .box-first
    .machine-right
    .machine-bottom
    ul
    li:first-child
    .status
    .status-list
    img {
    width: 45px;
  }
  .main-box
    .box-first
    .machine-right
    .machine-bottom
    ul
    li:first-child
    .status
    .status-list
    .staus-info
    .infoimg {
    width: 25px;
    background-repeat: no-repeat;
    height: 25px;
    margin-top: -3px;
    img {
      width: 20px;
    }
  }
  .main-box
    .box-first
    .machine-right
    .machine-bottom
    ul
    li:first-child
    .status
    .status-list:last-child
    .staus-info {
    margin-top: 10px;
  }
  .main-box
    .box-first
    .machine-right
    .machine-bottom
    ul
    li:first-child
    .status
    .status-list
    .staus-info {
    width: 0.775rem;
  }
  .main-box
    .box-first
    .machine-right
    .machine-bottom
    ul
    li:nth-child(2)
    .signal-status
    .signal-status-list
    .signal-icon {
    img:first-child {
      width: 45px;
    }
    img:last-child {
      width: 20px;
    }
  }
  .main-box
    .box-first
    .machine-right
    .machine-bottom
    ul
    li:nth-child(2)
    .signal-status
    .signal-status-list {
    padding-right: 30px;
  }
  .container {
    div:first-child {
      .communication {
      
        img {
          top: -1px;
          position: relative;
          margin-right: 2px;
        }
        .battery_title {
          img {
            position: relative;
            top: 2px;
            margin-right: 2px;
          }
          p{
            margin-top: 1px;
          }
        }
        div:first-child img {
          width: 28px;
          height: 28px;
        }
      }
    }
  }
  .storage-item .container .battery-info .info-right {
    font-size: 12px !important;
    display: flex;
    position: relative;
    span {
      white-space: nowrap;
      transform: scale(0.9);
      position: absolute;
      left: 25px;
    }
    .text {
      left: 30px;
      top: -1px;
    }
  }
}
@media screen and(max-width:1400px) and(min-width:1279px) {
  .main-box .box-first .machine-right .machine-bottom ul li:last-child {
    width: 16%;
  }
  .main-box
    .box-first
    .machine-right
    .machine-bottom
    ul
    li:first-child
    .status
    .status-list
    .staus-info {
    width: 0.775rem;
  }
  .main-box
    .box-first
    .machine-right
    .machine-bottom
    ul
    li:first-child
    .status
    .status-list
    img {
    width: 45px;
  }
  .main-box
    .box-first
    .machine-right
    .machine-bottom
    ul
    li:first-child
    .status
    .status-list
    .staus-info
    .infoimg {
    width: 18px;
    background-repeat: no-repeat;
    height: 18px;
    margin-top: -1px;
    background-size: contain;
    img {
      width: 20px;
    }
  }
  .main-box .box-first .machine-right {
    padding-bottom: 10px;
  }
  .main-box
    .box-first
    .machine-right
    .machine-bottom
    ul
    li:first-child
    .status
    .status-list:last-child
    .staus-info {
    margin-top: 8px;
  }
  .main-box
    .box-first
    .machine-right
    .machine-bottom
    ul
    li:nth-child(2)
    .signal-status
    .signal-status-list
    .signal-icon {
    img:first-child {
      width: 45px;
    }
    img:last-child {
      width: 20px;
    }
  }
  .main-box
    .box-first
    .machine-right
    .machine-bottom
    ul
    li:nth-child(2)
    .signal-status
    .signal-status-list {
    padding-right: 35px;
    white-space: nowrap;
    text-align: center;
    .signal-text {
      transform: scale(0.9);
    }
  }
  .container {
    div:first-child {
      .communication {
      
        img {
          top: -2px;
          position: relative;
          margin-right: 2px;
        }
        .battery_title {
          img {
            position: relative;
            top: 2px;
            margin-right: 2px;
          }
        }
        div:first-child img {
          width: 28px;
          height: 28px;
        }
      }
    }
  }
  .storage-item .container .battery-info .info-right {
    font-size: 12px !important;
    display: flex;
    position: relative;
    span {
      white-space: nowrap;
      transform: scale(0.8);
      position: absolute;
      left: 18px;
    }
    .text {
      left: 30px;
      top: -1px;
    }
  }
}
@media screen and(max-width:1279px) {
  .main-box .box-first .machine-right .machine-bottom ul li:last-child {
    width: 16%;
  }
  .main-box
    .box-first
    .machine-right
    .machine-bottom
    ul
    li:first-child
    .status
    .status-list
    img {
    width: 45px;
  }
  .main-box
    .box-first
    .machine-right
    .machine-bottom
    ul
    li:first-child
    .status
    .status-list {
    padding-right: 15px;
    align-items: center;
  }
  .main-box
    .box-first
    .machine-right
    .machine-bottom
    ul
    li:first-child
    .status
    .status-list
    .staus-info {
    white-space: nowrap;
    text-align: center;
    width: 70px;
    .infoimg {
      width: 20px;
      background-repeat: no-repeat;
      height: 20px;
      margin-top: 2px;
      background-size: contain;
      margin-right: 5px;
      img {
        width: 20px;
        height: 20px;
        position: relative;
        top: -2px;
      }
    }
  }
  .main-box .box-first .machine-right .machine-bottom ul .speed p {
    white-space: nowrap;
    transform: scale(0.85);
    margin-top: 2px;
    position: relative;
    left: -6px;
  }
  .main-box .box-first .machine-right {
    padding-bottom: 10px;
  }
  .main-box
    .box-first
    .machine-right
    .machine-bottom
    ul
    li:first-child
    .status
    .status-list:last-child
    .staus-info {
    margin-top: 8px;
  }
  .main-box
    .box-first
    .machine-right
    .machine-bottom
    ul
    li:first-child
    .status
    .status-list
    .staus-info
    .infotext {
    transform: scale(0.8);
  }
  .main-box
    .box-first
    .machine-right
    .machine-bottom
    ul
    li:nth-child(2)
    .signal-status
    .signal-status-list
    .signal-icon {
    img:first-child {
      width: 45px;
    }
    img:last-child {
      width: 20px;
    }
  }
  .main-box
    .box-first
    .machine-right
    .machine-bottom
    ul
    li:nth-child(2)
    .signal-status
    .signal-status-list {
    padding-right: 35px;
    white-space: nowrap;
    text-align: center;
    .signal-text {
      transform: scale(0.8);
    }
  }
  .container {
    div:first-child {
      .communication {
      
        img {
          top: -2px;
          position: relative;
          margin-right: 2px;
        }
        .battery_title {
          img {
            position: relative;
            top: 2px;
            margin-right: 2px;
          }
        }
        div:first-child img {
          width: 28px;
          height: 28px;
        }
      }
    }
  }
  .storage-item .container .battery-info .info-right {
    font-size: 12px !important;
    display: flex;
    position: relative;
    span {
      white-space: nowrap;
      transform: scale(0.68);
      position: absolute;
      left: 2px;
    }
    .text {
      left: 30px;
      top: -1px;
    }
  }
  .communication .battery_title .first p {
    white-space: nowrap;
    transform: scale(0.8);
  }
  .storage-item .container {
    // span{
    //   transform: scale(0.8);
    // }
    .info-left .info-text {
      transform: scale(0.8);
    }
    .info-left .info-electric {
      div:first-child {
        transform: scale(0.8);
      }
    }
  }
  .power .power-text {
    span {
      transform: scale(0.8);
    }
  }
  .battery-number {
    span {
      transform: scale(0.8);
    }
  }
  .communication {
    div:nth-child(2) {
      transform: scale(0.8);
    }
    div {
      .storeCode_num {
        transform: scale(0.8);
        display: inline-block;
      }
    }
  }
}
