.activity-box-reset {
  //padding: 3vw;
  width: 90%;
  margin: 8vw auto;
  position: relative;
  //background: url('./assets/content.png') no-repeat;
  //background-size: 100% 100%;

  border: 15px solid transparent;
  //width:300px;
  padding: 10px 20px;
  -moz-border-image: url('./assets/content.png') 30 30 round; /* Old Firefox */
  -webkit-border-image: url('./assets/content.png') 30 30 round; /* Safari and Chrome */
  -o-border-image: url('./assets/content.png') 30 30 round; /* Opera */
  border-image: url('./assets/content.png') 30 30 round;
  .activity-box-content {
    position: relative;
    padding-top: 8vw;
    padding-bottom: 4vw;
    .activity-title {
      margin-top: -4vw;
      position: absolute;
      transform: translate(-50%, -50%);
      margin-left: 50%;
      width: 60%;
      height: 15vw;
      font-size: 4vw;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      background: url('./assets/title.png') center/contain no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      .activity-title-content {
        overflow: hidden;
        text-overflow: ellipsis;
        color: #f7d497;
        line-height: 1.5;
        font-weight: bolder;
        .acitivity-nums {
          color: #ce3d29;
        }
      }
    }
  }
}

.acitivity-reset {
  max-width: 100vw;
  .activity-text {
    width: 94%;
    margin: 3vw auto;
    position: relative;
    border: 7vw solid transparent;
    border-top: none;
    border-bottom: none;
    margin-bottom: 0;
    margin-top: 0;
    -moz-border-image: url('./assets/border.png') 0 90 round; /* Old Firefox */
    -webkit-border-image: url('./assets/border.png') 0 90 round; /* Safari and Chrome */
    -o-border-image: url('./assets/border.png') 0 90 round; /* Opera */
    border-image: url('./assets/border.png') 0 90 round;
    .activity-content {
      width: 100%;
      background: #fffae8;
      position: relative;
      .activity-title {
        margin-top: -7vw;
        position: absolute;
        transform: translate(-50%, -50%);
        margin-left: 50%;
        width: 60%;
        height: 15vw;
        font-size: 4vw;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        background: url('./assets/title.png') center/contain no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        .activity-title-content {
          overflow: hidden;
          text-overflow: ellipsis;
          color: #f7d497;
          line-height: 1.5;
          font-weight: bolder;
          .acitivity-nums {
            color: #ce3d29;
          }
        }
      }
    }
  }
  .activity-bottom {
    height: 10vw;
    width: 94%;
    background: url('./assets/bottom.png') no-repeat;
    margin: 3vw auto;
    margin-top: 0;
    background-size: 100% 100%;
  }
  .activity-top {
    height: 10vw;
    width: 94%;
    background: url('./assets/top.png') no-repeat;
    margin: 3vw auto;
    margin-bottom: 0;
    background-size: 100% 100%;
  }
}
