.lotteryContent {
  //height: 100vh;
  background: #ffe085;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-touch-callout: none;
  .scrollContent {
    background-image: url(./asserts/background.png);
    background-size: 100%;
    background-repeat: no-repeat;
    padding-bottom: 0.95rem;
    .secondContent {
      margin: 0 auto;
      margin-top: 2.64rem;
      width: 7.283rem;
      height: 7.234rem;

      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;

      .diskContainer {
        width: 7.283rem;
        height: 7.234rem;

        position: absolute;
        left: 0;
        top: 0;

        background-image: url(./asserts/disk.png);
        background-size: 100%;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        .diskContent {
          width: 1.9rem;
          height: 1.2rem;
          position: relative;
          .itemContent {
            position: absolute;
            left: 0;
            bottom: 0.6rem;
            height: 2.84rem;
            width: 1.9rem;
            padding-left: 0.07rem;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;

            font-size: 0.26rem;
            font-weight: 600;
            color: #fff;

            .smileImg {
              margin-top: 0.29rem;
              width: 0.42rem;
              height: 0.42rem;
            }
            .moneyContent {
              margin-top: 0.2rem;
              width: 0.89rem;
              height: 0.52rem;
              //background: rgba(254, 236, 102, 1);
              background-image: url(./asserts/moneybg.png);
              background-size: 0.89rem 0.53rem;
              background-repeat: no-repeat;

              border-radius: 0.04rem;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              .spanLabel {
                font-size: 0.29rem;
                font-weight: 400;
                font-family: Impact;
                color: rgba(244, 94, 54, 1);
                margin-right: 0.06rem;
              }
              .spanMoney {
                font-size: 0.3rem;
                font-weight: 400;
                font-family: Impact;
                color: rgba(244, 94, 54, 1);
              }
            }
          }

          .itemContent:nth-of-type(2n + 1) {
            color: #f55665;
          }

          .itemContent:nth-of-type(1) {
            transform: rotate(0 * 36deg);
            transform-origin: 50% 100% 0;
          }
          .itemContent:nth-of-type(2) {
            transform: rotate(1 * 36deg);
            transform-origin: 50% 100% 0;
          }
          .itemContent:nth-of-type(3) {
            transform: rotate(2 * 36deg);
            transform-origin: 50% 100% 0;
          }
          .itemContent:nth-of-type(4) {
            transform: rotate(3 * 36deg);
            transform-origin: 50% 100% 0;
          }
          .itemContent:nth-of-type(5) {
            transform: rotate(4 * 36deg);
            transform-origin: 50% 100% 0;
          }
          .itemContent:nth-of-type(6) {
            transform: rotate(5 * 36deg);
            transform-origin: 50% 100% 0;
          }
          .itemContent:nth-of-type(7) {
            transform: rotate(6 * 36deg);
            transform-origin: 50% 100% 0;
          }
          .itemContent:nth-of-type(8) {
            transform: rotate(7 * 36deg);
            transform-origin: 50% 100% 0;
          }
          .itemContent:nth-of-type(9) {
            transform: rotate(8 * 36deg);
            transform-origin: 50% 100% 0;
          }
          .itemContent:nth-of-type(10) {
            transform: rotate(9 * 36deg);
            transform-origin: 50% 100% 0;
          }
        }
        &.go_draw {
          animation: draw 0.5s linear infinite;
        }
        &.go_draw_1 {
          animation: draw1 8s cubic-bezier(0, 1, 0.2, 0.8) forwards;
        }
        &.go_draw_2 {
          animation: draw2 8s cubic-bezier(0, 1, 0.2, 0.8) forwards;
        }
        &.go_draw_3 {
          animation: draw3 8s cubic-bezier(0, 1, 0.2, 0.8) forwards;
        }
        &.go_draw_4 {
          animation: draw4 8s cubic-bezier(0, 1, 0.2, 0.8) forwards;
        }
        &.go_draw_5 {
          animation: draw5 8s cubic-bezier(0, 1, 0.2, 0.8) forwards;
        }
        &.go_draw_6 {
          animation: draw6 8s cubic-bezier(0, 1, 0.2, 0.8) forwards;
        }
        &.go_draw_7 {
          animation: draw7 8s cubic-bezier(0, 1, 0.2, 0.8) forwards;
        }
        &.go_draw_8 {
          animation: draw8 8s cubic-bezier(0, 1, 0.2, 0.8) forwards;
        }
        &.go_draw_9 {
          animation: draw9 8s cubic-bezier(0, 1, 0.2, 0.8) forwards;
        }
        &.go_draw_10 {
          animation: draw10 8s cubic-bezier(0, 1, 0.2, 0.8) forwards;
        }
      }
      .goContent {
        width: 1.99rem;
        height: 1.99rem;
        margin-left: 0.07rem;
        z-index: 2;
        position: relative;
        img {
          position: absolute;
          left: 0;
          bottom: -0.2rem;
          height: 2.44rem;
          width: 1.99rem;
        }
      }
    }

    .thirdContent {
      margin: 0 auto;
      width: 6.84rem;
      //padding: 0 0.31rem;
      background: rgba(252, 103, 90, 1);
      border-radius: 0.4rem;

      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;

      .title {
        height: 0.66rem;
        line-height: 0.66rem;
        text-align: center;
        font-size: 0.24rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }
      .shareContent {
        margin: 0 auto;
        width: 6.2rem;
        height: 1.6rem;
        background: #f15040;
        border-radius: 0.4rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        img {
          width: 5.31rem;
          height: 1.15rem;
        }
      }

      .detailContent {
        margin: 0 auto;
        margin-top: 0.23rem;
        margin-bottom: 0.37rem;
        width: 6.2rem;
        background: #f15040;
        border-radius: 0.4rem;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        .detailContentImg {
          margin-top: 0.3rem;
          height: 1.12rem;
          width: 3.71rem;
        }
        .detailItem {
          width: 6.2rem;
          height: 1rem;
          padding: 0 0.35rem;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;

          font-size: 0.24rem;
          font-weight: 600;
          color: rgba(255, 255, 255, 1);
          .dateText {
            flex: 1;
          }
          .nameText {
            flex: 1;
          }
          .detailText {
            flex: 1;
          }
        }

        .detailItem:nth-child(2n + 1) {
          background: #e43c2c;
        }
      }
    }
  }

  //modal
  .modalButton {
    position: absolute;
    top: 0.15rem;
    right: 0;
    z-index: 10;
    width: 1.502rem;
    height: 0.92rem;
  }
  .modalContainer {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.7);
    animation: myfirst 0.5s 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    .modalContent {
      max-width: 6.84rem;
      max-height: 11.46rem;
      padding: 0.23rem 0.2rem 0.58rem 0.2rem;
      background: rgba(252, 103, 90, 1);
      border-radius: 0.4rem;
      overflow: hidden;

      .modalTitle {
        width: 3.71rem;
        height: 1.12rem;
        margin: 0 auto;
        margin-bottom: 0.14rem;
      }
      .modalDetail {
        background: #f15040;
        border-radius: 0.4rem;
        padding: 0.46rem 0.42rem 0.55rem 0.26rem;
        font-size: 0.24rem;
        font-family: PingFang SC;
        font-weight: 600;
        color: rgba(255, 236, 150, 1);
        line-height: 0.47rem;
      }
    }
  }
}

@keyframes myfirst {
  from {
    background: rgba(0, 0, 0, 0);
  }
  to {
    background: rgba(0, 0, 0, 0.7);
  }
}

@keyframes draw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes draw1 {
  from {
    transform: rotate(-10 * 36deg);
  }
  to {
    transform: rotate(0 * 36deg);
  }
}
@keyframes draw2 {
  from {
    transform: rotate(-11 * 36deg);
  }
  to {
    transform: rotate(-1 * 36deg);
  }
}
@keyframes draw3 {
  from {
    transform: rotate(-12 * 36deg);
  }
  to {
    transform: rotate(-2 * 36deg);
  }
}
@keyframes draw4 {
  from {
    transform: rotate(-13 * 36deg);
  }
  to {
    transform: rotate(-3 * 36deg);
  }
}
@keyframes draw5 {
  from {
    transform: rotate(-14 * 36deg);
  }
  to {
    transform: rotate(-4 * 36deg);
  }
}
@keyframes draw6 {
  from {
    transform: rotate(-15 * 36deg);
  }
  to {
    transform: rotate(-5 * 36deg);
  }
}
@keyframes draw7 {
  from {
    transform: rotate(-16 * 36deg);
  }
  to {
    transform: rotate(-6 * 36deg);
  }
}
@keyframes draw8 {
  from {
    transform: rotate(-17 * 36deg);
  }
  to {
    transform: rotate(-7 * 36deg);
  }
}
@keyframes draw9 {
  from {
    transform: rotate(-18 * 36deg);
  }
  to {
    transform: rotate(-8 * 36deg);
  }
}
@keyframes draw10 {
  from {
    transform: rotate(-19 * 36deg);
  }
  to {
    transform: rotate(-9 * 36deg);
  }
}