.person-wrapper {
  .person-summary {
    display: flex;
    .real-attendance-wrapper {
      width: 312px;
      height: 500px;
      background-image: url('./static/real-attendance-bg.png');
      .attendance-content {
        padding-top: 20px;
        color: #ffffff;
        .person-avtar {
          margin: 0 auto;
          width: 163px;
          height: 161px;
          background-image: url('./static/person-avtar-bg.png');
          background-repeat: no-repeat;
          background-position: center;
          background-size: 100% auto;
          padding: 10px;
          box-sizing: border-box;
          & > div {
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% auto;
          }
        }
        .person-name {
          margin-top: 20px;
          width: 100%;
          height: 50px;
          line-height: 50px;
          text-align: center;
          background-image: url('./static/person-name-bg.png');
          background-repeat: no-repeat;
          background-position: center;
          background-size: 128px auto;
        }
        .person-info {
          margin-top: 20px;
          font-size: 12px;
          display: flex;
          flex-direction: column;
          align-items: center;
          & > div {
            width: 160px;
            transform: translateX(30px);
            line-height: 36px;
            font-size: inherit;
            display: flex;
            align-items: center;
            span {
              display: inline-block;
              width: 50px;
              text-align-last: justify;
              text-align: justify;
            }
          }
        }
      }
    }
    .person-summary-center {
      flex: 1;
      padding: 0 20px;
      box-sizing: border-box;
      .person-summary-total {
        display: flex;
        justify-content: space-between;
        .person-summary-real {
          background-image: url('./static/real-person-total.png');
        }
        .person-total {
          background-image: url('./static/attendance-today.png');
        }
        & > div {
          background-repeat: no-repeat;
          background-position: center;
          background-size: 100% auto;
          width: 308px;
          height: 138px;
          padding-left: 20px;
          padding-top: 20px;
          color: #ffffff;
          h3 {
            font-size: 14px;
            color: #ffffff;
          }
          p {
            font-size: 40px;
            line-height: 1em;
            margin-top: 40px;
            font-family: 'lcd';
          }
        }
      }
      .person-type-wrapper {
        width: 100%;
        height: 342px;
        margin-top: 20px;
        background-image: url('./static/person-type-bg.png');
        .person-type-content {
          padding: 0 20px;
          padding-top: 20px;
          display: flex;
          flex-wrap: wrap;
          box-sizing: border-box;
          .percentage-class {
            margin-right: 16px;
            margin-bottom: 20px;
            &:nth-child(7n + 0) {
              margin-right: 0;
            }
          }
        }
      }
    }
    .distribution-type-wrapper {
      width: 307px;
      height: 500px;
      background-image: url('./static/attendance-type-bg.png');
      .distribution-content {
        padding: 0 20px;
        & > div {
          margin-top: 24px;
        }
      }
    }
  }

  .company-statistics-wrapper {
    margin-top: 20px;
    height: 236px;
    background-image: url('./static/company-statistics-bg.png');
    .company-statistics-content {
      padding-top: 10px;
      .company-statistics-charts {
        height: 160px;
        width: 100%;
      }
    }
  }
}
