.box {
  width: vw(552);
  height: vh(444);
  box-sizing: border-box;
  margin-bottom: vh(24);
  border: 2px solid #DFE0F3;
  box-shadow: 2px 4px 20px 0px rgba(87, 68, 175, 0.2);
  background: linear-gradient(180deg, rgba(240, 243, 253, 0.95) 0%, rgba(232, 238, 253, 0.95) 100%);
  border-radius: vw(8);
  padding: vh(8) vw(8);

  header {
    height: vh(48);
    background-image: url("@/assets/img/pageMonitor/headerLine.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;

    div {
      width: vw(200);
      height: vh(40);
      background-image: url("@/assets/img/pageMonitor/headerBg.png");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      margin-left: vw(12);
      display: flex;
      align-items: center;

      p {
        color: #444444;
        font-size: vw(22);
        padding-left: vw(32);
      }
    }
  }

  main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    height: vh(390);

    .top {
      width: vw(488);
      height: vh(160);
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      background: linear-gradient(180deg, #F2F3FA 0%, #EAE9FE 100%);
      border: 1px solid #EDE9F4;
      box-sizing: border-box;
      border-radius: vw(4);

      .left {
        div:first-of-type {
          display: flex;
          align-items: center;
          margin-bottom: vh(12);
          min-width: vw(120);

          img {
            margin-right: vw(8);
          }

          span {
            font-size: vw(20);
            color: #302D32;
          }
        }

        div:last-of-type {
          color: #876395;
          font-size: vw(24);
          line-height: vw(44);
          letter-spacing: 2px;

          span {
            color: #924AAC;
            font-size: vw(44);
            vertical-align: bottom;
          }
        }
      }

      .right {
        .numBox {
          width: vw(276);
          height: vh(50);
          background: linear-gradient(272deg, rgba(255, 85, 238, 0.045) 2%, rgba(150, 35, 135, 0.066) 99%);
          border: 2px solid;
          border-image: linear-gradient(161deg, rgba(255, 169, 205, 0.4) -11%, rgba(255, 169, 202, 0) 42%) 1.5;
          box-sizing: border-box;
          padding: 0 vw(16);
          display: flex;
          justify-content: space-between;
          align-items: center;

          .leftTextBox {
            display: flex;
            align-items: center;

            .potionBox {
              width: vw(4);
              height: vw(4);
              border-radius: 100%;
              background: #D58DFF;
              box-shadow: 0px 0px vw(4) vw(2) #D58DFF;
              margin-right: vw(12);
            }

            span {
              font-size: vw(16);
              color: #571273;
            }
          }

          .rightTextBox {
            font-size: vw(14);
            color: #571273;
            line-height: vw(28);

            span {
              font-size: vw(28);
              color: #924AAC;
              vertical-align: bottom;
              margin-right: vw(4);
            }
          }

          &:first-of-type {
            margin-bottom: vh(20);
          }
        }
      }

    }

    .bottom {
      width: vw(488);
      height: vh(160);
      display: flex;
      justify-content: space-between;

      div {
        width: vw(146);
        height: vh(160);
        box-sizing: border-box;
        padding: vh(24) vw(20);
        background: linear-gradient(180deg, #F2F3FA 0%, #DEE6FF 100%);
        border: 2px solid #EDE9F4;
        border-radius: vw(4);

        .secondRow {
          margin-top: vh(12);
          margin-bottom: vh(4);
          font-size: vw(16);
          color: #302D32;
        }

        .thridRow {
          font-size: vw(28);
          color: #605C68;

          span {
            font-size: vw(44);
            color: #5D49AF;
            margin-right: 2px;
          }
        }
      }

    }

  }
}
