body {
	width: 100%;
	height: 100vh;
	background-image: url('../images/banner.png');
	background-repeat: no-repeat;
	background-size: cover;
}

@font-face {
	font-family: electronicFont;
	src: url(../font/DS-DIGIT.TTF)
}

.canvas {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	height: 99%;
	z-index: 1;
}

/* 顶部 */
.headTop {
	width: 100%;
	height: 4vw;
	background-image: url('../images/ding.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	justify-content: space-between;
}

.headTop_left {
	width: 33%;
	font-size: 1vw;
	text-align: center;
	color: #ffffff;
	padding-top: 0.5vw;
	letter-spacing: 5px;
	background: linear-gradient(to bottom, #ecf9ff 50%, #7bd3ff 50%);
	-webkit-background-clip: text;
	color: transparent;

}

.headTop_right {
	width: 33%;
	font-size: 1vw;
	padding-top: 0.5vw;
	text-align: center;
	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, #ffffff 50%, #7bd3ff 50%);
	-webkit-background-clip: text;
	color: transparent;
}

.con {
	width: 100%;
	height: 52vw;
	display: flex;
	justify-content: space-between;
	padding: 20px;
	box-sizing: border-box;
	position: relative;
	z-index: 1000;
}

.con_left {
	width: 30%;
	height: 100%;
}

.con_left_1 {
	height: 16vw;
	width: 100%;

	margin-bottom: 1vw;
	border: 1px solid #83cfff;
}

.con_left_2 {
	height: 16vw;
	width: 100%;

	margin-bottom: 1vw;
	border: 1px solid #83cfff;
}


.nature {
	width: 100%;
	padding: 1vw;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.natureBox {
	width: 48%;
	padding: 1vw;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 5.5vw;
	background-image: url('../images/nat.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin-bottom: 1vw;
}

.natureBox:nth-child(3),
.natureBox:nth-child(4) {
	margin-bottom: 0px;
}

.nature_name{
	color: #ffffff;
	font-size: 1.2vw;
	font-weight: bold;
}
.nature_num {
	color: #ffffff;
	font-size: 1.6vw;
	font-weight: bold;
	font-family: electronicFont;
}

.access_month {
	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;
	font-size: 1vw;
	color: #ffffff;
}
.access_mon {
	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;
	font-size: 1vw;
	color: #ffffff;
}
.gongsname {
    font-size: 0.8vw;
   height: 2vw;
   line-height: 2vw;
   color: #ffeb7b;
   font-weight: bold;
}
.gongs {
	width: 60%;
	margin-left: 2vw;
	text-align: right;
}

.con_left_3 {
	height: 16vw;
	width: 100%;

	border: 1px solid #83cfff;
}

.fabric {
	width: 100%;
	height: auto;
	padding: 1vw;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.fabricBox {
	width: 33%;
	height: 6vw;

}

.fabric_img {
	width: 50%;
	height: 4.2vw;
	position: relative;
	margin: auto;
}

.fabric_img img {
	width: 100%;
	height: 100%;
}

.fabricNum {
	position: absolute;
	top: 35%;
	color: #ffffff;
	left: 20%;
	font-weight: bold;
	font-size: 1.4vw;
	font-family: electronicFont;
}

.fabric_title {
	width: 100%;
	color: #ffffff;
	font-size: 0.7vw;
	text-align: center;
	margin-top: 0.7vw;
}

.con_conent {
	width: 35%;
	height: 100%;
}

.con_conent_1 {
	height: 8vw;
	width: 100%;

	border: 1px solid #83cfff;
	margin-bottom: 1vw;
}

.numberBox {
	width: 30%;
	padding: 1vw;
	box-sizing: border-box;
	text-align: center;
}

.number_num {
	font-size: 2.2vw;
	color: #ffeb7b;
	font-weight: bold;
	font-family: electronicFont;
}

.number_title {
	font-size: 1vw;
	color: #ffffff;
	font-weight: bold;
	margin-top: 1vw;
}

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

.con_conent_2 {
	height: 24vw;
	width: 100%;

	border: 1px solid #83cfff;
	margin-bottom: 1vw;
}

.fenbuBox {
	width: 100%;
	height: 21vw;

}

.fenbuS {
	width: 24vw;
	height: 18vw;
	margin: auto;
}

.fenbuS{
	width: 100%;
	height: 100%;
}



.con_conent_3 {
	height: 16vw;
	width: 100%;

	border: 1px solid #83cfff;
}


.con_right {
	width: 30%;
	height: 100%;
}

.con_right_1 {
	height: 18vw;
	width: 100%;

	border: 1px solid #83cfff;
	margin-bottom: 1vw;
}

.con_right_2 {
	height: 14vw;
	width: 100%;

	border: 1px solid #83cfff;
	margin-bottom: 1vw;
}

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;
}

.con_right_3 {
	height: 16vw;
	width: 100%;

	border: 1px solid #83cfff;
}