.nut-noticebar {
  display: flex;
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 24px;
  position: relative;
  align-items: center;
  color: $text-color;
  background-color: rgba(251, 248, 220, 1);
  color: rgba(211, 125, 066, 1);
  &.wrapable{
    height: auto;
    padding: 8px 16px;
    .wrap{
      height: auto;
      .content{
        position: relative;
        white-space: normal;
        word-wrap: break-word;
      }
    }

  }    
  a {
    text-decoration: none;
    color: rgba(211, 125, 066, 1);
  }
  .withicon {
    position: relative;
    padding-right: 40px;
  }
  .left-icon {
    height: 16px;
    min-width: 16px;
    margin-right: 5px;
    box-sizing: border-box;
    background-size: 100% 100%;
    // background-image: url("data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgb(214,128,72)' d='M509.7 960.1c-53.5 0-106.1-9-156.6-26.8l-.2-.1c-8-2.9-14.5-8.7-18.1-16.4-3.7-7.7-4.1-16.4-1.2-24.4 4.7-12.7 17-21.3 30.6-21.3 3.7 0 7.4.6 11 1.9 43.3 15.2 88.6 22.9 134.5 22.9 47.2 0 93.7-8.1 138.1-24.2l.8-.3c3.7-1.4 7.5-2 11.3-2 13.4 0 25.7 8.4 30.5 21l.1.2c2.9 8 2.5 16.7-1.1 24.4-3.6 7.8-10 13.6-18 16.6-52.1 18.9-106.4 28.5-161.7 28.5zM219.3 824c-60 0-108.7-48.2-108.7-107.4v-4c0-21.6 6.4-42.4 18.5-60.2 12.2-17.8 29.2-31.3 49.3-39.1l7.1-2.8v-165c0-79.8 29.8-156.4 84-215.8 53.8-59 127-96.2 206.3-105l10-1.1V90.2c0-14.5 11.8-26.4 26.4-26.4 14.5 0 26.4 11.8 26.4 26.4v33.4l10 1.1c79.2 8.7 152.4 46 206.1 105 54.1 59.4 83.9 136 83.9 215.8v165.1l7.1 2.8c20.1 7.8 37.1 21.3 49.3 39.1 12.2 17.8 18.6 38.6 18.6 60.1v4c0 28.4-11.1 55.2-31.3 75.4-20.6 20.6-48 32-77.2 32H219.3zm-16.6-152.8c-16.9 6.8-28 23.5-27.7 41.6v3.8c-.2 24.5 19.5 44.7 44.1 45h585.7c11.5-.1 22.3-4.5 30.5-12.5 8.6-8.4 13.6-20.2 13.5-32.3l.1-3.9c.3-18.1-10.8-34.9-27.6-41.6L774 652.6V445.5c0-143.6-117.5-260.4-262-260.4S250 301.9 250 445.5v207.1l-47.3 18.6z'/%3E%3C/svg%3E");
  }
  .right-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    box-sizing: border-box;
    padding-left: 5px;
  }
  .wrap {
    flex: 1;
    height: 24px;
    overflow: hidden;
    position: relative;
    
  }
  .content {
    position: absolute;
    white-space: nowrap;
    &.nut-ellipsis {
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow:ellipsis;
    }
  }
  // 只跑一次
  .play {
    animation: nut-notice-bar-play linear both running;
  }
  .play-infinite {
    animation: nut-notice-bar-play-infinite linear infinite both running;
  }
  .play-vertical {
    animation: nut-notice-bar-play-vertical linear infinite both running;
  }
}

@keyframes nut-notice-bar-play {
	to {
		transform: translate3d(-100%, 0, 0);
	}
}

@keyframes nut-notice-bar-play-infinite {
	to {
		transform: translate3d(-100%, 0, 0);
	}
}
// 垂直方向的滚动
@keyframes nut-notice-bar-play-vertical {
	to {
		transform: translateY(40px);
	}
}