@mixin activity-box($deg, $beginColor, $endColor) {
  border-radius: 3vw;
  background-image: linear-gradient($deg, $beginColor, $endColor);
}
.activity-box {
  padding: 3vw;
  width: 85%;
  margin: 8vw auto 0;
  position: relative;
  @include activity-box(180deg, #fcdd8c, #cd3a27);

  &:before {
    content: '';
    position: absolute;
  }

  &:after {
    width: 80%;
  }
  .activity-box-content {
    position: relative;
    @include activity-box(180deg, #fff0bb, #f4c97c);
    padding-top: 8vw;
    .activity-title {
      margin-top: -8vw;
      position: absolute;
      transform: translate(-50%, -50%);
      margin-left: 50%;
      width: 95%;
      height: 20vw;
      // line-height: 16vw;
      font-size: 4vw;
      text-align: center;
      // padding: 0 15vw 5vw;
      padding: 4.6vw 15vw 8.8vw;
      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: #47798f;
        line-height: 1.5;
        font-weight: bolder;
        .acitivity-nums {
          color: #ce3d29;
        }
      }
    }
  }
}
