.planBox{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 16px;
  .planTitle{
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #160002;
  }
  .planMonth{
    .planTop{
      width: 100%;
      display: flex;
      align-items: center;
      background: #F5F2F2;
      border-radius: 8px;
      box-sizing: border-box;
      padding: 16px;
      margin-bottom: 12px;
      .planTopLeft{
        width: 80px;
        height: 80px;
        .img{
          width: 100%;
          height: 100%;
        }
      }
      .planTopRight{
        margin-left: 12px;
        width: calc(100% - 92px);
        .planRightTop{
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .topTitle{
            font-size: 18px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #150002;
          }
          .topAdd{
            display: flex;
            align-items: center;
            .addLabel{
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #a69e9f;
              white-space: nowrap;
            }
            .addIcon{
              width: 20px;
              height: 20px;
            }
            .addValue{
              font-size: 14px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #150002;
            }
          }
        }
        .rightCenter{
          width: 100%;
          margin: 8px 0;
          height: 12px;
          border-radius: 6px;
          background: #fff;
          position: relative;
          overflow: hidden;
          .have{
            height: 100%;
            position: absolute;
            top: 0;left: 0;
            background: rgb(119, 140, 253);
          }
        }
        .rightBottom{
          display: flex;
          align-items: center;
          justify-content: space-around;
          .rightBottomItem{
            display: flex;
            flex-direction: column;
            .bottomLabel{
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #786B6C;
            }
            .bottomValue{
              font-size: 14px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #160002;
            }
          }
        }
      }
    }
    .planDetail{
      .detailItem{
        .itemTitle{
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #160002;
          line-height: 22px;
          margin-bottom: 12px;

        }
        .subItem{
          .subItemTop{
            display: flex;
            justify-content: space-between;
            .subItemTitle{
              font-size: 16px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 500;
              color: #160002;
              line-height: 22px;
              margin-bottom: 12px;
              margin-left: 16px;
            }
            .subItemDetail{
              text-align: right;
              .plan{
                text-align: right;
                font-size: 16px;
                font-family: PingFangSC-Semibold, PingFang SC;
                color: #a69e9f;
                padding-left: 10px;
                .unit{
                  font-size: 12px;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  color: #a69e9f;
                  padding-left: 10px;
                }
              }
              .real{
                font-size: 16px;
                font-family: PingFangSC-Semibold, PingFang SC;
                color: #160002;
                line-height: 22px;
                padding-left: 10px;
                .unit{
                  font-size: 12px;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  color: #a69e9f;
                  padding-left: 10px;
                }
              }
              .add{
                display: flex;
                align-items: center;
                justify-content: flex-end;
                .detailAddIcon{
                  width: 20px;
                  height: 20px;
                }
                .addValue{
                  font-size: 14px;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  color: #160002;
                  line-height: 22px;
                  padding-left: 10px;
                }
                .unit{
                  font-size: 12px;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  color: #a69e9f;
                  padding-left: 10px;
                }
              }
            }
          }

          .thirdItem{
            margin-bottom: 12px;
            .thirdItemTop{
              display: flex;
              justify-content: space-between;
              .thirdTitle{
                font-size: 16px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 400;
                color: #160002;
                line-height: 22px;
                margin-left: 32px;
              }
              .thirdItemDetail{
                text-align: right;
                .plan{
                  font-size: 14px;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  color: #a69e9f;
                  padding-left: 10px;
                  text-align: right;
                  .unit{
                    font-size: 14px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    color: #a69e9f;
                    padding-left: 10px;
                  }
                }
                .real{
                  text-align: right;
                  font-size: 14px;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  color: #160002;
                  line-height: 22px;
                  padding-left: 10px;
                  .unit{
                    font-size: 12px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    color: #a69e9f;
                    padding-left: 10px;
                  }
                }
                .add{
                  text-align: right;
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                  .detailAddIcon{
                    width: 20px;
                    height: 20px;
                  }
                  .addValue{
                    font-size: 14px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    color: #160002;
                    line-height: 22px;
                    padding-left: 10px;
                  }
                  .unit{
                    font-size: 12px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    color: #a69e9f;
                    padding-left: 10px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .planYear{
    .planTop{
      width: 100%;
      display: flex;
      align-items: center;
      background: #F5F2F2;
      border-radius: 8px;
      box-sizing: border-box;
      padding: 16px;
      margin-bottom: 12px;
      .planTopLeft{
        width: 80px;
        height: 80px;
        .img{
          width: 100%;
          height: 100%;
        }
      }
      .planTopRight{
        margin-left: 12px;
        width: calc(100% - 92px);
        .planRightTop{
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .topTitle{
            font-size: 18px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #150002;
          }
          .topAdd{
            display: flex;
            align-items: center;
            .addLabel{
              font-size: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #a69e9f;
              white-space: nowrap;
            }
            .addIcon{
              width: 20px;
              height: 20px;
            }
            .addValue{
              font-size: 14px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #150002;
            }
          }
        }
        .rightCenter{
          width: 100%;
          margin: 8px 0;
          height: 12px;
          border-radius: 6px;
          background: #fff;
          position: relative;
          overflow: hidden;
          .have{
            height: 100%;
            position: absolute;
            top: 0;left: 0;
            background: #FF8E5B;
          }
        }
        .rightBottom{
          display: flex;
          align-items: center;
          justify-content: space-around;
          .rightBottomItem{
            display: flex;
            flex-direction: column;
            .bottomLabel{
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #786B6C;
            }
            .bottomValue{
              font-size: 14px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #160002;
            }
          }
        }
      }
    }
    .areaList{
      .areaItem{
        width: 100%;
        padding: 12px;
        box-sizing: border-box;
        background: #F5F5F5;
        margin-bottom: 12px;
        .areaItemTop{
          display: flex;
          align-items: center;
          justify-content: space-between;
          .topLeft{
            .BigTitle{
              font-size: 18px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #150002;
            }
            .smallText{
              color: #a69e9f;
              font-size: 14px;
            }
            .leftValue{
              font-size: 16px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #FF6D40;
              margin-left: 8px;
            }
          }
          .topRight{
            display: flex;
            align-items: center;
            .rightText{
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #a69e9f;
              white-space: nowrap;
              margin-right: 4px;
            }
            .rightAddIcon{
              width: 20px;
              height: 20px;
            }
            .rightAddValue{
              font-size: 16px;
              font-family: DINAlternate-Bold, DINAlternate;
              color: #150002;
              font-weight: bold;
            }
          }
        }
        .areaItemCenter{
          margin: 8px 0;
          width: 100%;
          height: 12px;
          background: #fff;
          border-radius: 6px;
          overflow: hidden;
          position: relative;
          .areaItemHave{
            position: absolute;
            height: 100%;
            top: 0;left: 0;
            background: #FF8E5B;
          }
        }
        .areaItemBottom{
          width: 100%;
          display: flex;
          justify-content: space-between;
          .bottomItem{
            .bottomItemLabel{
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #a69e9f;
            }
            .bottomItemValue{
              margin-left: 8px;
              font-size: 16px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #a69e9f;
            }
          }
        }
      }
    }
  }
}
