html {
	max-width: 750px;
	margin: 0 auto;
	background: #1f1f1f;
}

body {
	background: #000;
	background-size: 100%;
	position: relative;
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
	font-variant: tabular-nums;
}

#header {
	background: #000;
	text-align: center;
	padding-top: .3rem;
	overflow: hidden;

}

#header img {
	width: 80%;
	height: auto;
	margin: 0 auto;
}

.swiper-container {
	width: 100%;
	height: auto;
}


.footer {
	height: 1.2rem;
	text-align: center;
	overflow: hidden;
	background: #e6e6e6;
	z-index:199;
	border-radius: 20px 20px 0px 0px;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	position: fixed;
	bottom: 0;
	width: 100%;
	max-width: 750px;
}

.footer p {
	font-size: .24rem;
	color: #666666;
	line-height: 1.5;
}

.footer a {
	display: flex;
	flex-direction: column;
}

.footer a span {
	color: #555;
	font-size: .26rem;
	font-weight: bold;
	padding-top: .06rem;
}

.footer img {
	width: .48rem;
	height: auto;
	margin: 0 auto;

}

.bannerw {
	padding-bottom: 1.5rem;
}

.bannerw .ritem {
	width: 91%;
	background-color: #000;
	border: solid 1px #f1bf1d;
	margin: 0 auto;
	overflow: hidden;
	font-size: .28rem;
	margin-top: -.7rem;

	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.bannerw .title_r {
	color: #facf20;
	text-align: center;
}

.bannerw .topdis {
	padding: 0.15rem .2rem;
	background-color: #262626;
	font-weight: 500;
	border-bottom: solid 1px #666666;
}

.dispflex {
	display: flex;
	justify-content: space-around;
	margin: 0 auto;
	border-top: solid 1px #666666;
	height: 100%;
	align-items: center;
}



.bannerw .ritem .ranking-w {
	width: 100%;

	overflow: hidden;
}

.bannerw .ritem .ranking-w .swiper-wrapper {
	height: 6rem;
}

.bannerw .ritem .ranking-w .swiper-slide {
	width: 100%;
	vertical-align: middle;
	color: #999;
	font-size: .26rem;
	
}

.bannerw .ritem .ranking-w .txt {
	overflow: hidden;
	text-align: center;
	width: 25%;
	vertical-align: baseline;
}

.timebra {
	text-align: center;
	line-height: .3rem;
	width: 25%;
	white-space: wrap;
}

.Fcolor-green {
	text-overflow: ellipsis;
}


@media screen and (min-width:750px) {
	
	body,html,.footer,.box{max-width: 640PX !important;}
	
	#header img {
		width: 60%;
		height: auto;
		margin: 0 auto;
	}
	.bannerw .ritem {
		width: 91%;
		background-color: #000;
		border: solid 1px #f1bf1d;
		margin: 0 auto;
		overflow: hidden;
		font-size: .22rem;
		margin-top: -.7rem;
	
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}
	

	
}
/* 当屏幕宽度大于750px */
@media (min-width: 751px) {
	/* 当屏幕宽度大于等于750px时 */
	viewport-fit: cover; /* 这里是缩放策略，cover会让内容填充整个viewport，80%的比例是通过js或者其他方式来控制的 */
	width: 80%; /* 或者直接设置宽度为80% */
	initial-scale: 0.8; /* 设置初始缩放比例为80%，这相当于100% * 80% */
  }
  
  /* 可选的，如果希望在缩放后保持原始的字体大小或布局不变，可以添加下面的代码 */