<div class="notice-container">
			<div class="header-notice-marquee" id="notice-marquee">
				<div class="header-marquee-item1 flex">
					<div>111111111111111111111111111</div>
					<div>222222222222222222222222222</div>
				</div>
			</div>
		</div>

.notice-container {
				width: 300px;
				border: 1px solid #ededed;
				padding: 0 10px;
				align-items: center;
				margin: 0 auto;
				display: flex;
				flex-direction: row;
				flex: 1;
			}

			.header-notice-marquee {
				white-space: nowrap;
				overflow: hidden;
				position: relative;
				width: 100%;
				height: 20px;
				line-height: 20px;
			}

			.notice-container .header-marquee-item1 {
				margin: 0 10px;
				position: absolute;
				left: 0;
				animation-name: marquee1;
				animation-duration: 10s;
				animation-timing-function: linear;
				animation-delay: 0;
				animation-iteration-count: infinite;
				animation-direction: normal;
			}

			.notice-container .header-marquee-item2 {
				margin: 0 10px;
				position: absolute;
				left: 0;
				animation-name: marquee1;
				animation-duration: 10s;
				animation-timing-function: linear;
				animation-delay: 0;
				animation-iteration-count: infinite;
				animation-direction: normal;
			}

			.notice-container .header-notice-marquee:hover {
				animation-play-state: paused;
			}

			.notice-container .header-notice-marquee .header-marquee-item {
				position: absolute;
				top: 0;
				left: 0;
				white-space: nowrap;
			}

			@keyframes marquee1 {
				0% {
					left: 0;
				}

				100% {
					left: -100%;
				}
			}

			@keyframes marquee2 {
				0% {
					left: 100%;
				}

				100% {
					left: 0%;
				}
			}

			.flex {
				display: flex;
			}