.bg_red {
	background: red;
}

html,
body {
	/* height: 100%; */
	width: 100%;
	height: 100vh;
}

body {
	background: #020c25;
	user-select: none;
	/* height: 100%; */
	overflow: hidden;
	/* pointer-events: none; */


}

/* 563 /1080 = x/100 */
.header {
	/* height: 70px; */
	height: 7vh;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: 'PingFang-SC-Regular';
	padding: 0 20px;
}

.h_left {
	display: flex;
	align-items: center;

}

.now_province {
	font-size: 22px;
	color: rgb(255, 255, 255);
}

.h_more_wp {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0.5px solid rgb(23, 168, 255);
	background-color: rgb(2, 23, 94);
	box-shadow: inset 0px 12px 7px 0px rgba(0, 141, 240, 0.35);
	width: 80px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	border-radius: 20px;
	margin-left: 20px;
	cursor: pointer;
}

.h_more_img {
	width: 14px;
	height: 8px;
	margin-left: 4px;
}

.h_more_word {
	font-size: 15px;
	font-family: "PingFang";
	color: rgb(183, 202, 235);
}

.h_title {
	font-size: 26px;
	font-family: "PingFang";
	color: rgb(255, 255, 255);
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
}

.h_middle {
	position: relative;
	width: 696px;
}

.h_bg_img {
	width: 696px;
	height: 49px;
	position: absolute;
	transform: translate(-50%, 0%);
	left: 50%;
	top: -8px;

}


.h_right {
	width: 260px;
	/* background: red; */

}

@charset 'utf-8';

@font-face {
	font-family: 'DS-Digital-Bold';
	src: url('../font/DS-DIGI.ttf');
}

#timer {
	font-family: 'DS-Digital-Bold';
	color: #fff;
	font-size: 30px;
}

/* 中间 */
/* 第一块 */
.main_middle {
	height: 52vh;
	padding: 0 20px;
	display: flex;
	position: relative;
	/* align-items: center; */
}

.m_one_box {
	/* max-width: 24%; */
	width: 24%;
	/* background-color: rgb(6, 25, 58); */
	background: linear-gradient(to bottom, #06193a, #020c26);
	border-top: 1px solid rgba(38, 69, 157, 0.6);
}

.m_one_fa {
	position: relative;
}

.one_m_bg_img {
	width: 194px;
	height: 44px;
}

.zuijin_juban_word {
	font-size: 16px;
	font-family: "PingFang";
	color: rgb(255, 255, 255);
	position: absolute;
	left: 30px;
	top: 10px;

}

.m_one_top {
	position: relative;

}

.m_one_fes_name {
	font-size: 14px;
	font-family: "PingFang";
	color: rgb(170, 197, 235);
	margin-left: 30px;
	cursor: pointer;
	transition: 0.2s;
}

.m_one_fes_name:hover {
	color: rgb(226, 231, 236);
}

.star_front {
	width: 11px;
	height: 11px;
	position: absolute;
	transform: translate(-50%, 0);
	top: 20%;
	left: 15px;
}

.one_wraper_fa {
	margin-top: 20px;
	padding-right: 30px;
	overflow: hidden;
}

.one_wrapper:not(:first-child) {
	margin-top: 16px;
}

.m_one_info_fa {
	display: flex;
	align-items: center;
	margin-left: 30px;
	margin-top: 10px;
}

.m_one_info_fa2 {
	display: flex;
	align-items: center;
	margin-left: 30px;
	margin-top: 10px;
}

.m_one_info {
	font-size: 12px;
	font-family: "PingFang";
	color: rgba(170, 197, 235, 0.4);
	transition: 0.2s;
	cursor: pointer;
}

.m_one_info:hover {
	color: rgb(170, 197, 235);
}

.m_one_info2 {
	font-size: 12px;
	font-family: "PingFang";
	color: rgba(170, 197, 235, 0.6);
}

.m_one_info2 {
	margin-left: 26px;
}

.m_one_bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 10px 30px 0 30px;
}

.jin_fa {
	display: flex;
	align-items: center;
}

.jin30tian {
	font-size: 15px;
	font-family: "PingFang";
	color: rgb(76, 172, 255);
	font-weight: bold;

}

.m_one_nums {
	font-size: 15px;
	font-family: "PingFang";
	color: rgb(76, 172, 255);
}

.jq_type_fa_box {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	flex: 1;
	justify-content: space-around;
}

.jq_type_fa {
	display: flex;
	align-items: center;
}

.jq_type_fa2 {
	/* margin-left: 20px; */
}

.star_bottom {
	width: 11px;
	height: 11px;
}

.jq_type {
	font-size: 12px;
	font-family: "PingFang";
	color: rgb(255, 255, 255);
	margin-left: 10px;

}

/* 第二块 */

#china_map {
	width: calc(52% - 24px);
	height: 100%;
}

.map_data_box {
	position: absolute;
	top: 20px;
	left: 0;
	color: #fff;
	z-index: 999999999999999;
	display: flex;
	align-items: center;
}

.map_data_wrapper {
	margin-left: 60px;
}

.m_d_two_info {
	margin-top: 10px;
}

.m_d_title {
	font-size: 12px;
	font-family: "PingFang";
	color: rgba(255, 255, 255, 0.6);
}

.md_nums {
	font-size: 30px;
	color: #fff;
}

.m_d_mark {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
	margin-left: 10px;
}

#back {
	position: absolute;
	top: 20px;
	right: 20px;
	color: #fff;
	z-index: 999999999999999;
	border: 0.5px solid rgb(23, 168, 255);
	background-color: rgb(2, 23, 94);
	box-shadow: inset 0px 12px 7px 0px rgb(0 141 240 / 35%);
	padding: 6px 20px;
	text-align: center;
	border-radius: 20px;
	margin-left: 20px;
	cursor: pointer;
}

.m_two_box {
	width: calc(52% - 24px);
	margin-left: 12px;
	margin-right: 12px;
	background: linear-gradient(to bottom, #06193a, #020c26);
	border-top: 1px solid rgba(38, 69, 157, 0.6);
	position: relative;
}

#china_map canvas {
	/* background-image: url(../imgs/china_bg.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center; */

	margin-top: 20px !important;
	transform-origin: 50% 50%;
	transform-style: preserve-3d;
	/* transform: rotateX(-30deg) rotateY(0deg); */
}

/* 第三块 */
.m_three_box {
	/* width:; */
	width: 24%;
	background: linear-gradient(to bottom, #06193a, #020c26);
	border-top: 1px solid rgba(38, 69, 157, 0.6);
	/* padding: 20px 30px; */
	overflow: clip;
}

.m_t_qushi {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	/* flex-wrap: wrap; */
}

.m_t_agree_one {
	width: 50%;
}

.m_t_agree_two {
	width: 50%;
}

.m_t_agree_one_tab {
	position: relative;

}

.jq_hot_degree_bg {
	width: 100%;
	height: 45px;
	/* width: 180px;
	height: 45px; */
}

.jq_hot_degree {

	width: 100%;
	/* width: 180px; */
	max-height: 45px;
	/* height: auto; */
	text-align: center;
	position: absolute;
	left: 0;
	justify-content: center;
	align-items: center;
	top: 8px;
	display: flex;
	font-size: 13px;
	font-family: "PingFang";
	color: rgb(255, 255, 255);


	/* width: 180px;
	height: 45px;
	line-height: 40px;
	text-align: center;
	position: absolute;
	left: 0;
	top: 4px;
	font-size: 13px;
	font-family: "PingFang";
	color: rgb(255, 255, 255); */

}

.qushi_box {
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-top: 10px;
}

.qushi_img {
	width: 55px;
	height: 55px;
}

.qushi_btn_fa_wrapper {
	margin-left: 15px;
}

.qushi_btn_fa {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0.5px solid rgb(23, 168, 255);
	background-color: rgb(2, 23, 94);
	box-shadow: inset 0px 12px 7px 0px rgb(0 141 240 / 35%);
	width: 80px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	border-radius: 20px;
	cursor: pointer;
}

.qushi_word {
	font-size: 11px;
	font-family: "PingFang";
	color: rgb(61, 255, 0);
}

.qushi_word2 {
	font-size: 12px;
	font-family: "PingFang";
	color: rgb(240, 60, 58);
}

.small_dot {
	width: 14px;
	height: 8px;
	margin: 0 6px;
}

.small_dot2 {
	width: 14px;
	height: 8px;
	margin: 0 6px;
}

.qushi_nums_per {
	font-size: 12px;
	font-family: "PingFang";
	color: rgb(61, 255, 0);
}

.qushi_nums_per2 {
	font-size: 12px;
	font-family: "PingFang";
	color: rgb(240, 60, 58);

}

.m_three_qushi_nums {
	font-size: 22px;
	font-family: "PingFang";
	color: #46e2ff;
	font-weight: bold;
	background-image: -webkit-linear-gradient(bottom, #1ee9f1, #1bc2fd);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-top: 12px;
	height: 26px;
}

.m_t_hot_word {
	font-size: 15px;
	font-family: "PingFang";
	color: rgb(255, 255, 255);
	margin-top: 0px;
	margin-left: 30px;
}

/* 搜索热度排行 */
.hot_paihang_box {
	padding: 0px 20px;
}

.hot_list_wrapper {
	margin-top: 5px;
}

.hot_list_one {
	display: flex;
	align-items: center;
	padding-left: 10px;
}

.hot_front_one {
	display: flex;
	align-items: center;
}

.hengban {
	width: 100%;
	height: auto;
	margin-top: -35px;
}

.ph_fa {
	position: relative;
}

.ph_img {
	width: 42px;
	height: 38px;
}

.ph_nums {
	width: 42px;
	height: 38px;
	text-align: center;
	position: absolute;
	top: 5px;
	font-size: 22px;
	font-family: 'DS-Digital-Bold';
	color: rgb(255, 255, 255);
	font-weight: bold;
}

.ph_origin {
	width: 80px;
	margin-left: 10px;
	font-size: 13px;
	font-family: "PingFang";
	color: rgb(255, 255, 255);
}

.ph_total_nums {
	font-size: 16px;
	font-family: "PingFang";
	color: rgba(255, 255, 255, 0.851);
	width: 50px;
	text-align: right;
}

/* 进度条 */
.ph_progress_fa {
	margin: 0 10px;
	background-color: rgba(255, 255, 255, 0.102);
	width: 180px;
	height: 10px;
	border-radius: 6px;
	flex: 1;
}

.progress_done {
	height: 12px;
	margin-top: -1px;
}

.progress_active {
	position: relative;
	width: 0;
	height: 12px;
	transition: width 1s ease 0.3s;
	border-radius: 6px;
	/* background: rgba(40, 179, 163, 0.7); */
	box-shadow: 0px 0px 12px rgba(40, 179, 163, 1), 0px 0px 12px rgba(40, 179, 163, 1) inset;
	background-image: -webkit-linear-gradient(0deg, rgba(40, 179, 163, 1) 0%, rgba(40, 179, 163, 0.3) 10%, rgba(40, 179, 163, 0.3) 90%, rgba(40, 179, 163, 1) 100%);






}

.progress_yuna {
	width: 20px;
	height: 20px;
	position: absolute;
	right: -4px;
	top: -4px;
}

/* 底部4块 */
.main_bottom {
	height: 38vh;
	padding: 0 20px;
	display: flex;
	position: relative;
	overflow: hidden;
}


.bottom_one_box {
	width: 24%;
	background: linear-gradient(to bottom, #061839, #020c26);
	border-top: 1px solid rgba(38, 69, 157, 0.6);
}

.b_jq_title_fa {
	position: relative;
	padding: 0 20px;
	margin-top: 10px;
}

.b_jq_title_bg {
	width: 170px;
	height: 37px;
	margin-bottom: 10px;
}

.b_jq_title {
	font-size: 14px;
	font-family: "PingFang";
	color: rgb(255, 255, 255);
	position: absolute;
	left: 65px;
	top: 8px;
}

.b_jq_title_icon1 {
	width: 18px;
	height: 15px;
	position: absolute;
	left: 30px;
	top: 11px;
}

.b_jq_title_icon2 {
	width: 16px;
	height: 16px;
	position: absolute;
	left: 30px;
	top: 11px;
}

.b_jq_title_icon3 {
	width: 16px;
	height: 16px;
	position: absolute;
	left: 30px;
	top: 11px;
}

.b_jq_title_icon4 {
	width: 16px;
	height: 16px;
	position: absolute;
	left: 30px;
	top: 11px;
}

/* tab切换 */
.b_one_tab_box {
	display: flex;
	align-items: center;
	padding: 0 20px;
	flex-wrap: nowrap;
	width: 100%;
	overflow: auto;
}

.b_one_tab_name {
	font-size: 14px;
	font-family: "PingFang";
	white-space: nowrap;
	color: #fff;
	padding: 4px 10px;
	background: url(../imgs/anniu.png) no-repeat;
	background-size: 100% 100%;
}

.b_one_tab_name_active {
	background: url(../imgs/anniu_a.png) no-repeat;
	background-size: 100% 100%;
}

.b_one_tab_name:hover {
	background: url(../imgs/anniu_a.png) no-repeat;
	background-size: 100% 100%;
	transition: 0.1s;
}

.b_one_tab_wrapper {
	cursor: pointer;
}

.b_one_tab_wrapper:not(:first-child) {
	margin-left: 10px;
}

.b_jq_tab_bg {
	width: 100%;
	height: 29px;
}

/* 线 柱形图 */
#zhu_canvas {
	width: 100%;
	height: calc(1080*0.36px - 140px);
	/* height:352px; */
	background: url(../imgs/zhubg.png) no-repeat;
	background-size: 100% 50%;
	background-position: 0px 70px;

}

.b_one_zhe_zhu_box {
	position: relative;
}

.zhexian_zhu_bg {
	width: 100%;
	height: auto;
	position: absolute;
	bottom: 40px;
	left: 0;
}

/* 第二块 */
.bottom_two_box {
	width: calc(26% - 12px);
	margin-left: 12px;
	margin-right: 12px;
	/* width: 24%; */
	background: linear-gradient(to bottom, #061839, #020c26);
	border-top: 1px solid rgba(38, 69, 157, 0.6);
}

#shanxing1 {
	width: 100%;
	/* height: 200px; */
	height: calc(1080/2*0.32px - 45px);
}

#shanxing2 {
	width: 100%;
	/* height: 200px; */
	height: calc(1080/2*0.32px - 45px);
}

.bottom_three_box {
	width: calc(26% - 12px);
	/* margin-left: 12px; */
	margin-right: 12px;
	/* width: 24%; */
	background: linear-gradient(to bottom, #061839, #020c26);
	border-top: 1px solid rgba(38, 69, 157, 0.6);
}

/* 云词 */
.bottom_four_box {
	width: 24%;
	background: linear-gradient(to bottom, #061839, #020c26);
	border-top: 1px solid rgba(38, 69, 157, 0.6);
}


#cloud_word {
	width: 90%;
	height: calc(1080*0.28px - 45px);
	/* height: 500px; */
	position: relative;
	margin: 0px auto;
}

#cloud_word span {
	position: absolute;
	top: 0px;
	left: 0px;
	color: #0dbbff;
	font-weight: bold;
	padding: 3px 6px;
	cursor: pointer;
}

#cloud_word span:hover {
	color: #ade8ff;
	/* border: 1px solid #eee;
	background: #000;
	border-radius: 5px; */
}
.m_one_box_h5{
	display: none;
}
@media screen and (max-width: 1500px) {
	.m_three_qushi_nums {
		font-size: 18px;
		font-family: "PingFang";
		color: #46e2ff;
		font-weight: bold;
		background-image: -webkit-linear-gradient(bottom, #1ee9f1, #1bc2fd);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		margin-top: 12px;
		height: 26px;
	}
}

@media screen and (max-width: 1400px) {
	.m_t_qushi {}

	.ph_origin {
		margin-left: inherit !important;
		font-size: 12px;
		width: 50px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.ph_progress_fa {
		margin: 0 2px;
	}

	.ph_total_nums {
		font-size: 10px;
		width: 50px;
		text-align: right;
	}

	.hot_list_one {
		padding-left: 0px;
	}

	.jq_hot_degree_bg {
		width: 100%;
		height: 28px;
	}

	.jq_hot_degree {
		display: inherit;
		width: 90%;
		height: 28px;
		text-align: center;
		position: absolute;
		left: 6px;
		top: 2px;
		font-size: 10px;
		font-family: "PingFang";
		color: rgb(255, 255, 255);
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.qushi_img {
		width: 40px;
		height: 40px;
	}

	.qushi_btn_fa {
		display: flex;
		align-items: center;
		justify-content: center;
		border: 0.5px solid rgb(23, 168, 255);
		background-color: rgb(2, 23, 94);
		box-shadow: inset 0px 12px 7px 0px rgb(0 141 240 / 35%);
		width: 70px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		border-radius: 20px;
		cursor: pointer;
	}

	.qushi_word {
		transform: scale(0.8);
	}

	.qushi_word2 {
		transform: scale(0.8);
	}

	.qushi_nums_per {
		transform: scale(0.8);
	}

	.qushi_nums_per2 {
		transform: scale(0.8);
	}

	.small_dot {
		width: 7px;
		height: 4px;
		margin: 0 2px;
	}

	.small_dot2 {
		width: 7px;
		height: 4px;
		margin: 0 2px;
	}

	.qushi_btn_fa_wrapper {
		margin-left: 0px;
	}

	.m_three_qushi_nums {
		font-size: 16px;
		font-family: "PingFang";
		color: #46e2ff;
		font-weight: bold;
		background-image: -webkit-linear-gradient(bottom, #1ee9f1, #1bc2fd);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		margin-top: 12px;
		height: 26px;
	}

	.m_one_info_fa2 {
		display: flex;
		align-items: center;
		margin-left: 30px;
		margin-top: 5px;
	}
}

/* 移动端样式 */
@media screen and (max-width: 750px) {
	html, body{
		height: initial;
	}
	body {
		overflow: initial;
	}
	.h_middle{
		width: initial;
	}
	.header {
		/* display: none; */
		/* width: 100%; */
	}
	.now_province{
		font-size: 12px;
		white-space: pre;
	}
	.h_more_wp{
		margin-left: 6px;
		width: 60px;
		    height: 20px;
			line-height: 20px;
	}
	.h_bg_img{
		width: 100%;
		display: none;
	}
	.h_right{
		display: flex;
		width: initial;
		white-space: pre;
	}
	.h_title{
		font-size: 12px;
		white-space: pre;
		position: initial;
		transform: initial;
	}
	#timer{
		font-size: 12px;
	}
	.h_more_word{
		font-size: 12px;
	}

	.main_middle {
		display: block;
		height: initial;
	}

	.m_one_box {
		width: 100%;
		display: none;
		/* margin-top: 20px; */
	}
	.m_one_box_h5 {
		width: 100%;
		display: block;
		background: linear-gradient(to bottom, #06193a, #020c26);
		border-top: 1px solid rgba(38, 69, 157, 0.6);
		margin-bottom: 20px;
	}
	.m_two_box {
		width: 100%;
		/* margin-top: 20px; */
		margin-left: 0;
		margin-right: 0;
	}

	.m_d_title {}

	.m_three_box {
		width: 100%;
	}

	
	.map_data_box {
		position: initial;
		padding: 20px 0 0 0;
		justify-content: space-around;
	}

	#back {
		/* display: none; */
		top: 100px;
		 left: 0px;
	}

	.map_data_wrapper {
		margin-left: 0px;
	}
	#china_map{
		width: 100%;
		height: 340px;
	}
	#china_map canvas{
		margin-top:0px !important;
	}
	.main_bottom {
		height: initial;
		display: block;
		padding: 0 20px 20px 20px;
	}
	.bottom_one_box{
		width: 100%;
	}
	.bottom_two_box{
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	.bottom_three_box{
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	.bottom_four_box{
		width: 100%;
	}
}