<!--
.notice {
  display: inline-block; }

.notice:last-child .notice-card-block {
  margin-right: 10px; }
  .notice:last-child .notice-card-block .notice-time-bar-line-right {
    right: -10px;
    width: 1.8rem; }

.like-icon {
  width: .65rem;
  height: .65rem;
  position: absolute;
  bottom: 10px;
  right: 15px;
  transform: translate3d(0, -50%, 0); }
  .like-icon img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 3; }
  .like-icon .ball {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    left: 0;
    top: 0;
    z-index: 2;
    position: absolute;
    text-align: center;
    opacity: 0; }
    .like-icon .ball img {
      width: 100%; }
    .like-icon .ball.ball1 {
      animation: ball1 1.5s linear infinite;
      animation-delay: 0s; }
    .like-icon .ball.ball2 {
      animation: ball2 .8s linear infinite;
      animation-delay: .5s; }
    .like-icon .ball.ball3 {
      animation: ball3 .7s linear infinite;
      animation-delay: 1s; }
    .like-icon .ball.ball4 {
      animation: ball4 2s linear infinite;
      animation-delay: 1s; }
    .like-icon .ball.ball5 {
      animation: ball5 1.4s linear infinite;
      animation-delay: 3s; }

.icon-bg {
  position: absolute;
  top: 5px;
  left: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 2.5rem;
  background: rgba(0, 0, 0, 0.3); }
  .icon-bg .top-icon {
    width: 2.6rem;
    border-radius: 2.5rem;
    opacity: .9;
    display: flex;
    align-items: baseline;
    justify-content: center;
    height: .95rem;
    z-index: 2; }
    .icon-bg .top-icon .live-anime {
      display: inline-block;
      vertical-align: bottom;
      width: 2px;
      background-color: white;
      border-radius: 2px 2px 0 0;
      margin-left: 2px; }
    .icon-bg .top-icon .live-anime0 {
      height: 8px;
      animation: liveAnime0 1s infinite steps(2); }
    .icon-bg .top-icon .live-anime1 {
      height: 12px;
      animation: liveAnime1 1s infinite steps(1); }
    .icon-bg .top-icon .live-anime2 {
      height: 4px;
      animation: liveAnime2 1s infinite steps(2); }
    .icon-bg .top-icon .text {
      font-size: 0.6rem;
      color: #fff;
      height: .95rem;
      line-height: .95rem; }
  .icon-bg .status-shownum {
    display: inline-block;
    margin-left: 3px;
    margin-right: 5px;
    height: .95rem;
    line-height: .95rem;
    font-size: 0.6rem;
    color: white;
    z-index: 1; }

.live-card {
  background: #fff;
  margin: 15px 10px 0 10px;
  box-sizing: border-box;
  box-shadow: 0 3px 12px 0 rgba(102, 103, 113, 0.15);
  border-radius: 12px;
  overflow: hidden; }
  .live-card .live-card-center {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex; }
    .live-card .live-card-center .live-card-preview {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      flex-shrink: 0;
      flex-grow: 0; }
      .live-card .live-card-center .live-card-preview .block-center-img {
        position: absolute;
        top: 0;
      left: 0; }
      .live-card .live-card-center .live-card-preview .play-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        width: 2rem;
        height: 2rem; }
      .live-card .live-card-center .live-card-preview .live-icon {
        background: #f02b2b; }
      .live-card .live-card-center .live-card-preview .playback-icon {
        background: #4a4a4a; }
      .live-card .live-card-center .live-card-preview .live-view {
        position: absolute;
        top: .75rem;
        right: .75rem;
        width: 1.75rem; }
        .live-card .live-card-center .live-card-preview .live-view img {
          width: 100%;
          height: 100%; }
    .live-card .live-card-center .live-card-info {
      margin-left: 10px;
      margin-top: 10px;
      overflow: hidden; }
      .live-card .live-card-center .live-card-info .live-title .live-benefit {
        display: inline-block;
        font-size: 10px;
        color: #FFFFFF;
        text-align: left;
        line-height: 18px;
        border-radius: 10px;
        padding: 2px 6px;
        margin-right: 5px;
        background-color: #e93b3d; }
        .live-card .live-card-center .live-card-info .live-title .live-benefit.benefit-coupon {
          background-image: linear-gradient(90deg, #FD4646 5%, #FA6F49 100%); }
        .live-card .live-card-center .live-card-info .live-title .live-benefit.benefit-miao {
          background-image: linear-gradient(90deg, #FD4646 5%, #FA6F49 100%); }
        .live-card .live-card-center .live-card-info .live-title .live-benefit.benefit-exclusive {
          background-image: linear-gradient(90deg, #885DFF 5%, #B656FF 100%); }
      .live-card .live-card-center .live-card-info .live-title .title {
        font-size: 17px;
        color: #000000;
        line-height: 24px;
        vertical-align: bottom; }
      .live-card .live-card-center .live-card-info .live-upper {
        margin-top: 5px;
        font-size: 14px;
        color: #666666;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; }
      .live-card .live-card-center .live-card-info .goods-list {
        position: absolute;
        bottom: 10px;
        display: flex; }
        .live-card .live-card-center .live-card-info .goods-list .good {
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 3px;
          margin-right: 3px;
          overflow: hidden; }
        .live-card .live-card-center .live-card-info .goods-list .goods-more {
          background: #FFF3F3;
          border-radius: 3px;
          color: #FDA8B0;
          text-align: center;
          width: 30px;        
          font-size: 10px;
          line-height: 14px;
          padding: 13px 4px;
          box-sizing: border-box; }
    .live-card .live-card-center .card-block-info {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 25%;
      z-index: 2;
      background: linear-gradient(top, transparent, rgba(0, 0, 0, 0.9)); }
      .live-card .live-card-center .card-block-info .card-block-info-wrapper {
        position: absolute;
        bottom: .75rem;
        width: 90%;
        left: 50%;
        transform: translate3d(-50%, 0, 0);
        line-height: 1.25rem;
        height: 1.25rem; }
      .live-card .live-card-center .card-block-info .info {
        color: #fff;
        font-size: .85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        float: left;
        width: 80%; }
  .live-card .card-block-text {
    padding: .4rem;
    display: flex;
    align-items: center;
    position: relative;
    font-size: .6rem;
    line-height: 1.5; }
    .live-card .card-block-text .type {
      color: #F5A623;
      max-width: 8rem;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      display: inline-block; }
    .live-card .card-block-text .title {
      color: #4A4A4A;
      flex: 1;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      display: inline-block; }
    .live-card .card-block-text .liner {
      padding: 0 .3rem;
      color: #9B9B9B;
      font-weight: bolder;
      position: relative;
      display: inline-block; }

.restart-card-title {
  position: relative;
  margin-top: .25rem;
  border-bottom: 1px solid #f3f3f3; }
  .restart-card-title .restart-card-title-text {
    display: flex;
    align-items: center;
    padding: .35rem .5rem;
    background: #fff; }
    .restart-card-title .restart-card-title-text .tag {
      background: #30C83E;
      border-radius: 2.5rem;
      font-size: .6rem;
      color: #fff;
      width: 1.9rem;
      height: .95rem;
      line-height: .95rem;
      text-align: center; }
    .restart-card-title .restart-card-title-text .title {
      font-size: .7rem;
      color: #000;
      margin-left: .5rem; }

.hot-card-block {
  display: inline-block;
  text-align: center;
  margin-left: 10px; }
  .hot-card-block .hot-img {
    position: relative;
    overflow: hidden;
    width: 6rem;
    height: 6rem;
    box-sizing: border-box;
    box-shadow: 0 3px 12px 0 rgba(102, 103, 113, 0.15);
    border-radius: 12px; }
    .hot-card-block .hot-img .img {
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 12px; }
    .hot-card-block .hot-img .hot-icon {
      background: linear-gradient(90deg, #b760ff 0%, #f47eff 97%); }

.hot:last-child .hot-card-block {
  margin-right: 10px; }

.notice-card-block {
  display: inline-block;
  text-align: center;
  margin-left: 10px; }
  .notice-card-block .notice-time-bar {
    position: relative;
    margin-bottom: 10px; }
    .notice-card-block .notice-time-bar .notice-time-bar-line {
      position: absolute;
      top: 50%;
      display: inline-block;
      vertical-align: middle;
      height: 1px;
      transform: scaleY(0.5);
      background: #d2d2d2; }
    .notice-card-block .notice-time-bar .notice-time-bar-line-left {
      left: -10px;
      width: 1.8rem; }
    .notice-card-block .notice-time-bar .notice-time-bar-line-right {
      right: 0;
      width: 1.3rem; }
  .notice-card-block .notice-img {
    position: relative;
    overflow: hidden;
    width: 7.5rem;
    height: 7.5rem;
    box-sizing: border-box;
    box-shadow: 0 3px 12px 0 rgba(102, 103, 113, 0.15);
    border-radius: 12px; }
    .notice-card-block .notice-img img {
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 12px; }
  .notice-card-block .notice-title {
    margin-top: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 7.5rem; }
  .notice-card-block .notice-alert-btn {
    margin: auto;
    margin-top: 13px;
    border: 1px solid #27CA69;
    border-radius: 50px;
    color: #27CA69;
    width: 61px;
    height: 24px;
    line-height: 24px; }
  .notice-card-block .restart-card-left {
    flex: 0 0 40%;
    width: 40%;
    position: relative;
    margin-left: .3rem;
    height: 5.5rem;
    overflow: hidden;
    float: left; }
    .notice-card-block .restart-card-left img {
      width: 100%;
      height: 100%; }
    .notice-card-block .restart-card-left .mask {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1.25rem;
      line-height: 1.25rem;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      text-align: center;
      font-size: .65rem;
      overflow: hidden; }
      .notice-card-block .restart-card-left .mask .text {
        width: 95%;
        margin: auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis; }
  .notice-card-block .restart-card-right {
    margin-left: .7rem;
    margin-right: .3rem;
    padding: .3rem 0;
    height: 4.9rem;
    position: relative;
    flex: 1 1 auto;
    float: right; }
    .notice-card-block .restart-card-right .card-right-wrapper {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      height: 100%;
      position: relative; }
    .notice-card-block .restart-card-right .title {
      font-size: .75rem;
      color: #000;
      line-height: .95rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical; }
    .notice-card-block .restart-card-right .bottom {
      width: 98%;
      position: absolute;
      bottom: 0; }
      .notice-card-block .restart-card-right .bottom .time {
        color: #9B9B9B;
        font-size: .525rem;
        line-height: 1.5;
        position: absolute;
        bottom: 0;
        left: 0; }
      .notice-card-block .restart-card-right .bottom .tag {
        width: 3.2rem;
        color: #fff;
        font-size: .6rem;
        text-align: center;
        position: relative;
        bottom: 0;
        float: right; }
        .notice-card-block .restart-card-right .bottom .tag .icon {
          width: .5rem;
          vertical-align: middle;
          color: #fff;
          margin-right: .175rem; }
          .notice-card-block .restart-card-right .bottom .tag .icon img {
            width: 100%; }

@keyframes liveAnime0 {
  0% {
    height: 8px; }
  50% {
    height: 4px; }
  100% {
    height: 12px; } }

@keyframes liveAnime1 {
  0% {
    height: 12px; }
  50% {
    height: 8px; }
  100% {
    height: 4px; } }

@keyframes liveAnime2 {
  0% {
    height: 4px; }
  50% {
    height: 12px; }
  100% {
    height: 8px; } }

@keyframes ball1 {
  from {
    transform: translateY(0) scale(0.8) rotate(100deg);
    opacity: 1; }
  to {
    transform: translate3d(-0.5rem, -2.5rem, 0) scale(0.2) rotate(-50deg);
    opacity: 0; } }

@keyframes ball2 {
  from {
    transform: translateY(0) scale(0.5) rotate(-20deg);
    opacity: 1; }
  to {
    transform: translate3d(0.45rem, -2rem, 0) scale(0.8) rotate(-120deg);
    opacity: 0; } }

@keyframes ball3 {
  from {
    transform: translateY(0) scale(0.2) rotate(0);
    opacity: 1; }
  to {
    transform: translate3d(-0.5rem, -1.5rem, 0) scale(0.8) rotate(-150deg);
    opacity: 0; } }

@keyframes ball4 {
  from {
    transform: translateY(0) scale(0.2);
    opacity: 0.3; }
  to {
    transform: translate3d(0, -2.5rem, 0) scale(1);
    opacity: 1; } }

@keyframes ball5 {
  from {
    transform: translateY(0) scale(0.3);
    opacity: 1; }
  to {
    transform: translate3d(0.3rem, -2rem, 0) scale(0.9) rotate(90deg);
    opacity: 0; } }

@keyframes ball6 {
  from {
    transform: translateY(0) scale(0.5);
    opacity: 1; }
  to {
    transform: translate3d(0.2rem, -1.5rem, 0) scale(0.7) rotate(50deg);
    opacity: 0; } }