
.personal-grade-wrap {
  .wrap-container {
    width: 100%;
    min-height: 907px;
    background: url("../../img/stage3/personal-grade.png") no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
    img.title {
      position: absolute;
      top: 0;
      left: 13.5px;
      width: 169px;
      height: 26.5px;
    }
    img.awards-grade {
      position: absolute;
      top: 0;
      right: 24px;
      width: 49px;
      height: 59px;
    }
    .personal-info {
      margin-top: 51.5px;
      margin-left: 20px;
      display: flex;
      align-items: center;
      img {
        width: 50px;
        height: 50px;
      }
      .right {
        margin-left: 15px;
        .name {
          color: #FFFFFF;
          font-weight: 700;
          font-size: 20px;
          line-height: 20px;
        }
        .hospital {
          color: #FFFFFF;
          font-weight: 700;
          font-size: 14px;
          line-height: 18px;
          margin-top: 4.5px;
        }
      }
    }
    .join-num {
      font-size: 15px;
      font-weight: 700;
      color: #fff;
      line-height: 21px;
      margin-top: 73px;
      margin-left: 18.5px;
    }
    .grade-details {
      margin-top: 10px;
      margin-left: 15px;
      overflow: hidden;
      .left {
        float: left;
        .title {
          color: #FFF36C;
          font-size: 23px;
          font-weight: 700;
          line-height: 32.5px;
          margin-left: 1.5px;
          margin-bottom: 11px;
        }
        .item {
          display: flex;
          .line {
            width: 3.5px;
            height: 91.5px;
            background: #FFFFFF;
            opacity:0.53;
            margin-right: 8px;
          }
          .line168 {
            height: 84px;
          }
          .content {
            .label {
              color: #FFFFFF;
              font-size: 15px;
              font-weight: 700;
              line-height: 15px;
            }
            .grade {
              color: #FFFFFF;
              font-size: 40px;
              font-weight: 700;
              line-height: 40px;
              margin-top: 9px;
              margin-bottom: 6px;
            }
            .trapezoid {
              position: relative;
              .detail-bg {
                width: 110px;
                padding-left: 5px;
                border-right:5px solid transparent;
                border-top:21px solid #FFF36C;
                padding-right: 5px;
              }
              .detail-text {
                position: absolute;
                top: 3px;
                left: 5px;
                color: #F7753F;
                font-size: 14px;
                font-weight: 700;
                line-height: 14px;
              }
            }
            .detail {
              color: #FFF36C;
              font-size: 14px;
              line-height: 14px;
            }
          }
        }
        .marginItem {
          margin-top: 30px;
          margin-bottom: 30px;
        }
      }
      .right {
        width: 28px;
        float: right;
        margin-right: 40px;
        margin-top: 24px;
        p {
          color: #FFFFFF;
          font-size: 28px;
          font-weight: 700;
        }
        p:first-child {
          margin-bottom: 25px;
        }
      }
    }
    .task-details {
      display: flex;
      justify-content: center;
      margin-top: 54.5px;
      margin-bottom: 30px;
      .task-item {
        width: 60px;
        display: flex;
        flex-flow: column;
        justify-content: center;
        img {
          width: 60px;
          height: 60px;
          margin-bottom: 10px;
        }
        p.num,p.name {
          color: #FFFFFF;
          font-size: 15px;
          font-weight: 700;
          line-height: 20px;
          text-align: center;
        }
      }
      .task-item:nth-child(2) {
        margin: 0 67.5px;
      }
    }
    .share-btn {
      width: 312px;
      height: 49px;
      background: linear-gradient(360deg,rgba(255,134,32,1) 0%,rgba(255,248,111,1) 100%);
      border-radius: 32.5px;
      color: #B42F00;
      font-size: 21.5px;
      font-weight: 700;
      text-align: center;
      line-height: 49px;
      margin: 35px auto 23px auto;
    }
    .footer-text {
      color: #FFF36C;
      font-size: 15px;
      font-weight: 700;
      text-align: center;
      margin-bottom: 41px;
    }
  }
}