body {
	width: 100%;
	height: 100vh;
	background-color: #000127;
}

/* 顶部 */
.headTop {
	width: 100%;
	height: 4vw;
	background-image: url('../images/very.png');
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0px 1.2vw;
	box-sizing: border-box;
}

.headTop_left {
	font-size: 1.5vw;
	color: #ffffff;
	letter-spacing: 5px;
	background: linear-gradient(to bottom, #ecf9ff 50%, #7bd3ff 50%);
	-webkit-background-clip: text;
	color: transparent;

}

.headTop_right {
	font-size: 1.5vw;
	color: #ffffff;
	letter-spacing: 5px;
	background: linear-gradient(to bottom, #ecf9ff 50%, #7bd3ff 50%);
	-webkit-background-clip: text;
	color: transparent;

}

.headTop_title {
	font-size: 1.7vw;
	font-weight: bold;
	line-height: 4vw;
	text-align: center;
	padding-top: 5px;
	letter-spacing: 5px;
	background: linear-gradient(to bottom, #ecf9ff 50%, #7bd3ff 50%);
	-webkit-background-clip: text;
	color: transparent;
}

/* 内容 */
.contents {
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
}


.numerics {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.numericsBox {
	width: 24%;
	height: 6vw;
	padding: 1vw;
	box-sizing: border-box;
	border: 1px solid #36b4fd;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.numerics_left {
	width: 4vw;
	height: 4vw;
	border-radius: 50%;
}

.numerics_left img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.numerics_right {
	width: 75%;
}

.numerics_right_top {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.numerics_right_title {
	font-size: 1vw;
	color: #ffffff;
}

.numerics_right_num {
	font-size: 1.2vw;
	color: #1cecf2;
}


.numerics_right_bottom {
	width: 100%;
	font-size: 0.8vw;
	color: #ffffff;
	margin-top: 0.5vw;
}

.numerics_right_bottom span {
	font-size: 1vw;
}

/* 二层 */
.twoStorey {
	width: 100%;
	height: 28.5vw;
	margin-top: 1vw;
	display: flex;
	justify-content: space-between;
}

.twoStorey_left {
	width: 24%;
}

.caller {
	width: 100%;
	height: 13.5vw;
	border: 1px solid #36b4fd;
}

.access_title {
	width: 100%;
	padding: 0vw 1vw;
	box-sizing: border-box;
	height: 2vw;
	display: flex;
	align-items: center;
	background: linear-gradient(to right, #125697, #0a2451);
	box-shadow: inset 5px 5px 10px #1469b0;
}

.access_point {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #31e0ff;
}

.access_month {
	font-size: 0.8vw;
	color: #ffffff;
	margin-left: 0.5vw;
}

.activation {
	margin-top: 1vw;
	width: 100%;
	height: 13.5vw;
	border: 1px solid #36b4fd;
}

.twoStorey_centre {
	width: 50%;
	height: 28vw;
	border: 1px solid #36b4fd;

}

.twoStorey_right {
	width: 24%;
}

.salesVolume {
	width: 100%;
	height: 13.5vw;
	padding: 1vw;
	box-sizing: border-box;
	border: 1px solid #36b4fd;
}

.volumeMonth {
	width: 100%;
	display: flex;
	height: 3vw;
	justify-content: space-between;
	align-items: center;
}

.volumeMonth_title {
	font-size: 0.9vw;
	color: #ffffff;
}

.volumeMonth_list {
	width: 60%;
	display: flex;
	justify-content: space-between;
}

.volumeMonth_num {
	width: 15%;
	height: 3vw;
	line-height: 3vw;
	color: #ffffff;
	font-weight: bold;
	font-size: 2vw;
	background-color: #083b78;
	text-align: center;
}

.orderFor {
	width: 100%;
	margin-top: 1vw;
	display: flex;
	justify-content: space-between;
}

.orderForBox_left {
	width: 40%;
}

.orderForBox_right {
	width: 50%;
}

.orderFor_title {
	font-size: 0.9vw;
	color: #ffffff;
	margin: 1.5vw 0vw;
}

.orderForList {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.orderForName_left {
	width: 30%;
	height: 3vw;
	line-height: 3vw;
	color: #ffffff;
	font-weight: bold;
	font-size: 2vw;
	background-color: #083b78;
	text-align: center;
}

.orderForName {
	width: 17%;
	height: 3vw;
	line-height: 3vw;
	color: #ffffff;
	font-weight: bold;
	font-size: 2vw;
	background-color: #083b78;
	text-align: center;
}

.salesRanking {
	width: 100%;
	height: 13.5vw;
	border: 1px solid #36b4fd;
	margin-top: 1vw;
}

.salesRanking_title {
	width: 100%;
	padding: 0vw 1vw;
	box-sizing: border-box;
	height: 2vw;
	display: flex;
	align-items: center;
	background: linear-gradient(to right, #125697, #0a2451);
	box-shadow: inset 5px 5px 10px #1469b0;
}

.salesRanking_point {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #31e0ff;
}

.salesRanking_month {
	font-size: 0.8vw;
	color: #ffffff;
	margin-left: 0.5vw;
}

.rankingContent {
	width: 100%;
	height: 10vw;
	padding: 0vw 1vw;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}

.crown_left {
	width: 30%;
}

.crown {
	width: 70%;
	height: 6vw;
	margin: 1vw auto;
	background-image: url('../images/huangguang.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}



.crown_top {
	width: 4.5vw;
	height: 4.5vw;
	margin: auto;
	border-radius: 50%;
	padding-top: 1.5vw;
}

.crown_top img {
	width: 100%;
	height: 100%;
	z-index: -1;
	border-radius: 50%;
}

.crown_name {
	font-size: 0.8vw;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	margin-top: 0.5vw;
	font-family: fangsong;
}

.crown_right {
	width: 65%;
}

.crown_bisao {
	width: 100%;
	height: 1.5vw;
	line-height: 1.5vw;
	padding: 0vw 1vw;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}

.crown_noun {
	width: 30%;
	color: #0c9fd3;
	font-size: 0.8vw;
}

.crown_staff {
	width: 40%;
	color: #0c9fd3;
	font-size: 0.8vw;
}

.crown_number {
	width: 30%;
	color: #0c9fd3;
	font-size: 0.8vw;
}

.ranking_bottom {
	width: 100%;
}

.by_box {
	width: 100%;
	height: 1.5vw;
	line-height: 1.5vw;
	padding: 0vw 1vw;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}

.by_noun {
	width: 30%;
	color: #ffffff;
	font-size: 0.8vw;
	font-family: fangsong;
}

.by_staff {
	width: 40%;
	color: #ffffff;
	font-size: 0.8vw;
	font-family: fangsong;
}

.by_number {
	width: 30%;
	color: #ffffff;
	font-size: 0.8vw;
	font-family: fangsong;
}

/* 奇数元素的背景图 */
.by_box:nth-child(odd) {
	background-color: #0a315e;
}



/* 三层 */
.threeStorey {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.threeStorey_left {
	width: 24%;
	height: 13.5vw;
	border: 1px solid #36b4fd;
	margin-top: 1vw;
}

.threeStorey_centre {
	width: 50%;
	height: 13.5vw;
	border: 1px solid #36b4fd;
	margin-top: 1vw;
}

.threeStorey_right {
	width: 24%;
	height: 13.5vw;
	border: 1px solid #36b4fd;
	margin-top: 1vw;
}

.three_title {
	width: 100%;
	padding: 0vw 1vw;
	box-sizing: border-box;
	height: 2vw;
	display: flex;
	align-items: center;
	background: linear-gradient(to right, #125697, #0a2451);
	box-shadow: inset 5px 5px 10px #1469b0;
}

.three_point {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #31e0ff;
}

.three_month {
	font-size: 0.8vw;
	color: #ffffff;
	margin-left: 0.5vw;
}