html,
body,
#root {
  height: 100%;
}

#invitation {
  min-height: 100%;
  padding-bottom: 60px;
  background: #2e00dc;

  & + .year19-index {
    display: none;
  }

  .banner {
    height: 67px;
    margin: 20px 0;
    background: url("https://cdn.julyedu.com/active20_717/m/invitation-banner.png");
    background-size: contain;
  }

  .prize-container {
    position: relative;
    padding: 15px;
    margin: 0 auto;
    width: 355px;
    background: rgba(39, 27, 211, 1);
    border: 4px solid;
    border-image: linear-gradient(
        0deg,
        rgba(33, 32, 244, 1),
        rgba(94, 167, 248, 1)
      )
      10 10;

    .h-bar {
      position: absolute;
      left: 50%;
      top: 5px;
      transform: translateX(-50%);
      width: 280px;
      height: 6px;
      background: url("../images/h-bar.png");
      background-size: contain;

      & + .h-bar {
        top: initial;
        bottom: 5px;
      }
    }

    .v-bar {
      position: absolute;
      top: 9px;
      left: 7px;
      width: 6px;
      height: 198px;
      background: url("../images/v-bar.png");
      background-size: contain;

      & + .v-bar {
        left: initial;
        right: 7px;
      }
    }

    .prizes {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      padding: 0 4px;

      li {
        width: 95px;
        height: 55px;
        padding: 5px;
        background: #2658ff;
        border-radius: 3px;
        text-align: center;

        &:nth-child(n + 4) {
          margin-top: 9px;
        }

        &:nth-child(5) {
          background: #335df6;
          color: #fff;
          line-height: 45px;
          font-size: 16px;
          border-radius: 4px;
        }
      }

      .draw {
        text-align: center;
        color: #fff;

        div:nth-child(1) {
          font-size: 18px;
        }

        div:nth-child(2) {
          font-size: 12px;
        }
      }

      .prize {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 85px;
        height: 47px;
        background: rgba(255, 254, 255, 1);
        box-shadow: 0 0 1px 0 rgba(10, 12, 122, 0.3);

        img {
          max-width: 59px;
          max-height: 38px;
        }
      }
    }
  }

  .team-head {
    height: 176px;
    padding: 40px 70px;
    margin-bottom: 20px;
    background: url("https://cdn.julyedu.com/active20_717/m/team-head.png")
      no-repeat;
    background-size: contain;
    text-align: center;

    img {
      width: 44px;
      height: 44px;
      margin-bottom: 7px;
      border-radius: 50%;
    }

    .username {
      margin-bottom: 17px;
      font-size: 15px;
      color: #333;
    }

    div:last-child {
      color: #2e00dc;
      font-size: 16px;
    }
  }

  .op {
    margin-top: 9vh;
    width: 100%;
    text-align: center;

    button {
      font-size: 18px;
      color: #fff;
      -webkit-appearance: none;
      outline: 0;
      border: 0;
    }

    .btn {
      width: 210px;
      height: 40px;
      line-height: 40px;
      background: #fae44d;
      border-radius: 4px;
      color: #2034f5;
    }
  }

  .tip {
    margin-bottom: 20px;
    font-size: 15px;
    color: #fff;
  }

  .guide {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);

    img {
      position: absolute;
      right: 15px;
      top: 10px;
      width: 60px;
      height: 44px;
    }

    .indicator {
      display: block;
      position: absolute;
      right: 15px;
      top: 10px;
      width: 60px;
      height: 44px;
      background: url("../images/indicator.png");
      background-size: contain;
    }

    .tip {
      position: absolute;
      top: 74px;
      left: 50%;
      transform: translateX(-50%);
      width: 290px;
      height: 62px;
      background: rgba(255, 255, 255, 1);
      border-radius: 10px;
      text-align: center;
      color: #525b65;
      font-size: 18px;
      line-height: 62px;
    }
  }

  .activity-end {
    width: 210px;
    height: 40px;
    background: rgba(153, 153, 153, 1);
    border-radius: 4px;
  }
}

.captcha-container {
  padding: 40vh 30px;
  text-align: center;

  .tip {
    margin-bottom: 10px;
    font-size: 16px;
  }

  & + .year19-index {
    display: none;
  }
}
