@charset "UTF-8";

@font-face {
	font-family: 'Lcd'; /* 字体名称，后续 CSS 中用这个名称调用 */
	src: url('/map-data-dashboard-portlet/fonts/LcdD.ttf') format('truetype'); /* 字体文件路径+格式 */
	font-weight: normal; /* 字重（正常） */
	font-style: normal; /* 字体样式（正常） */
}

@font-face {
	font-family: 'Abel'; /* 字体名称，后续 CSS 中用这个名称调用 */
	src: url('/map-data-dashboard-portlet/fonts/Abel-Regular-2.ttf') format('truetype'); /* 字体文件路径+格式 */
	font-weight: normal; /* 字重（正常，因字体文件是 Regular 常规款） */
	font-style: normal; /* 字体样式（正常） */
}

/* 统一字体家族，通过 font-weight 区分字重 */
@font-face {
	font-family: 'Alibaba';
	src: url('/map-data-dashboard-portlet/fonts/AlibabaPuHuiTi-3-35-Thin.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Alibaba';
	src: url('/map-data-dashboard-portlet/fonts/AlibabaPuHuiTi-3-45-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Alibaba';
	src: url('/map-data-dashboard-portlet/fonts/AlibabaPuHuiTi-3-55-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Alibaba';
	src: url('/map-data-dashboard-portlet/fonts/AlibabaPuHuiTi-3-65-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Alibaba';
	src: url('/map-data-dashboard-portlet/fonts/AlibabaPuHuiTi-3-75-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Alibaba';
	src: url('/map-data-dashboard-portlet/fonts/AlibabaPuHuiTi-3-85-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Alibaba';
	src: url('/map-data-dashboard-portlet/fonts/AlibabaPuHuiTi-3-95-ExtraBold.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Alibaba';
	src: url('/map-data-dashboard-portlet/fonts/AlibabaPuHuiTi-3-105-Heavy.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Alibaba';
	src: url('/map-data-dashboard-portlet/fonts/AlibabaPuHuiTi-3-115-Black.ttf') format('truetype');
	font-weight: 950;
	font-style: normal;
	font-display: swap;
}
/* .chart:empty {
	border: 1px dashed;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	opacity: 0.3;
}
.chart:empty::after {
	content: "图表";
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -1rem;
	margin-left: -1rem;
} */

body {
	color: #fff;
	margin: 0 0;
	padding: 0 0;
	background: url(/map-data-dashboard-portlet/images/bg.png);
	background-size: 100%;
	min-width: 1920px;
	min-height: 1080px;
	font-family: "Alibaba";
}
.fill-parent {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.head {
	height: 4rem;
	margin-top: 0.2rem;
}
.head .head-title {
	font-size: 32px;
	font-weight: 900;
	text-align: center;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	background: url(/map-data-dashboard-portlet/images/top.png) no-repeat center center;
}

.head .headtitle .title-value {
	display: inline-block;
	line-height: 48px;
	vertical-align: top;
}
.title-value label {
	background: linear-gradient(180deg, #ffffff 35%, #78c2ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	font-size:32px;
	font-weight:900;
}
/*.foot {
	height: 4rem;

	position: absolute;
	bottom: 0;
	width: 100%;
}
.foot .foot_bg {
	background: url(/map-data-dashboard-portlet/images/foot.png) no-repeat center center;
}*/

.content {
	position: absolute;
	background: url(/map-data-dashboard-portlet/images/foot.png) no-repeat center bottom;
	background-size: 100% 203px;
	top: 7.2rem;
	right: 0;
	bottom: 0;
	left: 0;
}
.layout {
	position: absolute;
	width: 540px;
}
.layout-left-top {
	left: 0;
	top: 0;
	height: 56%;
}
/* .layout-left-center {
	left: 0;
	top: 33.33%;
	height: 33.33%;
} */
.layout-left-bottom {
	left: 0;
	top: 56%;
	height: 40%;
}
.layout-center-top {
	top: 0;
	left: 540px;
	right: 540px;
	width: calc(100% - 1080px);
	height: 30%;
}
.layout-center {
	top: 32%;
	left: 540px;
	right: 540px;
	width: calc(100% - 1080px);
	height: 66%;
}
.layout-center-bottom {
	top: 64%;
	left: 23%;
	right: 23%;
	width: 54%;
	bottom: 0;
}
.layout-center-bottom-left {
	position: absolute;
	right: 50%;
	text-align: center;
	height: 100%;
	width: 50%;
}
.layout-center-bottom-right {
	position: absolute;
	left: 50%;
	text-align: center;
	height: 100%;
	width: 50%;
}
.layout-right-top {
	top: 0;
	right: 0;
	height: 46%;
}
.layout-right-bottom {
	top: 46%;
	right: 0;
	bottom: 0;
	height: 50%;
}
.panel {
	position: absolute;
	left: 0.5rem;
	top: 0.5rem;
	right: 0.5rem;
	bottom: 0.5em;
	/*background: url(/map-data-dashboard-portlet/images/panel-bg.png) no-repeat;
  background-size: 100% 100%;*/
	box-sizing: border-box;
	border: 1px solid;
	border-image: linear-gradient(3deg, #007be1 0%, rgba(0, 0, 0, 0) 103%) 1;
	/*background: linear-gradient(3deg, #007be1 1%, rgba(0, 0, 0, 0) 102%);
  opacity: 0.3;*/
	background-color: rgba(0, 102, 255, 0.3);
}
.panel > .title {
	position: absolute;
	left: -5px;
	/*top: 0.8rem;
	right: 20%;
	left: 20%;
	line-height: 1.4rem;
	text-align: center;
	height: 1.4rem;*/
	font-size: 1.1rem;
	background: url(/map-data-dashboard-portlet/images/titledp.png) no-repeat;
	height: 39px;
	line-height: 39px;
	width: 96%;
	padding-left: 4%;
}
.title label {
	background: linear-gradient(180deg, #ffffff 37%, #85d0ff 99%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	font-size: 20px;
	font-weight: 400;
	display: inline-block;
}
.title .tit-data {
	-webkit-text-fill-color: #fcae3b;
	padding-left: 5px;
	font-size: 20px;
	font-weight: 400;
}
.title .tit-unit {
	-webkit-text-fill-color: #fff;
}
.achievement-transformation {
	background: url(/map-data-dashboard-portlet/images/xxcgzh.png) no-repeat center center;
	width: 198px;
	height: 142px;
	text-align: center;
	margin: -10px auto;
	color: #fff;
}
.achievement-transformation-data {
	font-family: Abel;
	font-size: 32px;
	font-weight: 400;
	padding-top: 42px;
}
.achievement-transformation-unit {
	font-size: 16px;
	font-weight: 400;
	padding-top: 55px;
}
.achievement-transformation-bottom {
	/*overflow: hidden;*/
	width: 96%;
	margin: 0 auto;
}

.achievement-transformation-left,
.service-system-left {
	float: left;
}

.achievement-transformation-right,
.service-system-right {
	float: right;
}

.study-account {
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	line-height: 56px;
	color: #fff;
	position: absolute;
    bottom: 10%;
    text-align: center;
    width: 100%;
}
.study-account-bg {
	background: url(/map-data-dashboard-portlet/images/userdatabg.png) no-repeat center center;
}
.study-account-data {
	font-family: "Lcd";
	font-size: 44px;
	background: linear-gradient(180deg, #ffffff 35%, #78c2ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	line-height: 80px;
	text-align: center;
	letter-spacing: 48px;
	padding-left: 40px;

	animation: slideDown 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	/* 可选：延迟动画开始时间 */
	animation-delay: 0.5s;
}

.map-lable {
	font-family: "Alibaba";
	font-size: 16px;
	position: absolute;
	left: 12%;
	top: 10%;
	line-height: 28px;
	color: #fff;
}
.map-lable-red span {
	width: 8px;
	height: 8px;
	border-radius: 8px;
	background: rgba(209, 25, 34, 1);
	display: inline-block;
	margin-right: 8px;
}
.map-lable-green span {
	width: 8px;
	height: 8px;
	border-radius: 8px;
	background: rgba(29, 130, 62, 1);
	display: inline-block;
	margin-right: 8px;
}
.map-lable-yellow span {
	width: 8px;
	height: 8px;
	border-radius: 8px;
	background: rgba(234, 148, 21, 1);
	display: inline-block;
	margin-right: 8px;
}
.map-lable-blue span{
	width: 24px;
	height: 8px;
	background: #01eae6;
	display: inline-block;
	margin-right: 8px;
}
.earth {
	background: url(/map-data-dashboard-portlet/images/dt.png) no-repeat center top;
	background-size: 100% auto;
	z-index: 5;
	position: absolute;
	width: 100vh;
	min-height: 76vh;
}

@media (max-width: 1920px) {
	.earth {
		background: url(/map-data-dashboard-portlet/images/dt.png) no-repeat center top;
		background-size: 100% auto;
		z-index: 5;
		position: absolute;
		width: 100%;
		min-height: 570px;
	}
}

/*.earth-bottom {
	background: url(/map-data-dashboard-portlet/images/dp.png) no-repeat center top;
	position: absolute;
	width: 100%;
	height: 439px;
	bottom: 0;
}*/

/*.cicle3 {
	width: 35rem;
	height: 35rem;
	background: url(/map-data-dashboard-portlet/images/circle.png) no-repeat center;
	background-size: 100%;
	position: absolute;
	top: 44%;
	left: 50%;
	transform-style: preserve-3d;
	transform: translateX(-50%) rotateX(75deg);
	 transform: translateX(-50%); 
	animation: rotate3 20s linear infinite;
}*/
.cicle2 {
	width: 600px;
	height: 600px;
	position: absolute;
	top: 42%;
	left: 50%;
	transform-style: preserve-3d;
	background: url(/map-data-dashboard-portlet/images/535gqbottomright.png) no-repeat center;
	background-size: 100%;
	transform: translateX(-50%) rotateX(75deg);
	animation: rotate3 2s linear infinite;
}
.cicle3 {
	width: 600px;
	height: 600px;
	position: absolute;
	top: 42%;
	left: 50%;
	transform-style: preserve-3d;
	background: url(/map-data-dashboard-portlet/images/53gqbottomleft.png) no-repeat center;
	background-size: 100%;
	transform: translateX(-50%) rotateX(75deg);
	animation: rotate4 2s linear infinite;
}
.cicle4 {
	width: 450px;
	height: 450px;
	position: absolute;
	top: 40%;
	left: 50%;
	transform-style: preserve-3d;
	background: url(/map-data-dashboard-portlet/images/53gqright.png) no-repeat center;
	background-size: 100%;
	transform: translateX(-50%) rotateX(75deg);
	animation: rotate3 2s linear infinite;
}
.cicle5 {
	width: 450px;
	height: 450px;
	position: absolute;
	top: 40%;
	left: 50%;
	transform-style: preserve-3d;
	background: url(/map-data-dashboard-portlet/images/53gqleft.png) no-repeat center;
	background-size: 100%;
	transform: translateX(-50%) rotateX(75deg);
	animation: rotate4 2s linear infinite;
}
.cicle6 {
	width: 360px;
	height: 360px;
	position: absolute;
	top: 36%;
	left: 50%;
	transform-style: preserve-3d;
	background: url(/map-data-dashboard-portlet/images/535gqbottomright.png) no-repeat center;
	background-size: 100%;
	transform: translateX(-50%) rotateX(75deg);
	animation: rotate3 2s linear infinite;
}
.cicle7 {
	width: 360px;
	height: 360px;
	position: absolute;
	top: 36%;
	left: 50%;
	transform-style: preserve-3d;
	background: url(/map-data-dashboard-portlet/images/53gqbottomleft.png) no-repeat center;
	background-size: 100%;
	transform: translateX(-50%) rotateX(75deg);
	animation: rotate4 2s linear infinite;
}

.service-system-bg {
	background: url(/map-data-dashboard-portlet/images/fw_bg.png) no-repeat center 80px;
	color: #fff;
}

.service-system {
	background: url(/map-data-dashboard-portlet/images/fwtxb.png) no-repeat center center;
	width: 198px;
	height: 142px;
	text-align: center;
	margin: 0 auto;
}

.service-systemone {
	background: url(/map-data-dashboard-portlet/images/fwtx.png) no-repeat center center;
	width: 198px;
	height: 214px;
	text-align: center;
	margin: 0 auto;
}
.service-system-data {
	font-family: Abel;
	font-size: 32px;
	font-weight: 400;
	padding-top: 52px;
}
.service-system-unit {
	font-size: 16px;
	font-weight: 400;
	padding-top: 40px;
}
.service-system-dataone {
	font-family: Abel;
	font-size: 32px;
	font-weight: 400;
	padding-top: 32px;
}
.service-system-unitone {
	font-size: 16px;
	font-weight: 400;
	padding-top: 60px;
}
.service-system-bottom {
	/*overflow: hidden;*/
	width: 96%;
	margin: -40px auto 0;
}

.Self-taught {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	color: #fff;
}
.Self-taught li {
	width: 50%;
	background: url(/map-data-dashboard-portlet/images/zk_data.png) no-repeat center center;
	height: 183px;
	margin: 10px 0;
}
.Self-taught-one {
	background: url(/map-data-dashboard-portlet/images/zk_fw.png) no-repeat center center;
	width: 198px;
	height: 142px;
	text-align: center;
	margin: 0 auto;
}
.Self-taught-two {
	background: url(/map-data-dashboard-portlet/images/zk_zk.png) no-repeat center center;
	width: 198px;
	height: 142px;
	text-align: center;
	margin: 0 auto;
}
.Self-taught-three {
	background: url(/map-data-dashboard-portlet/images/zk_zh.png) no-repeat center center;
	width: 198px;
	height: 142px;
	text-align: center;
	margin: 0 auto;
}
.Self-taught-four {
	background: url(/map-data-dashboard-portlet/images/zk_bj.png) no-repeat center center;
	width: 198px;
	height: 142px;
	text-align: center;
	margin: 0 auto;
}
.Self-taught-data {
	font-family: Abel;
	font-size: 32px;
	font-weight: 400;
	padding-top: 10px;
}
.Self-taught-unit {
	font-size: 16px;
	font-weight: 400;
	padding-top: 72px;
}

.panel .chart {
	position: absolute;
	top: 2.5rem;
	right: 0.3rem;
	bottom: 0.3rem;
	left: 0.3rem;
}
.layout-center-bottom .panel > .title {
	top: 0.2rem;
}
.cg {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.cg li {
	background: url(/map-data-dashboard-portlet/images/xxcgrz.png) no-repeat -20px center;
	height: 72px;
	padding-top: 20px;
	padding-left: 34%;
	padding-right: 4%;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	text-align: center;
}
.cg li .cg-title {
	font-size: 16px;
	font-weight: normal;
	line-height: 20px;
	color: #fff;
}
.cg li .cg-data {
	font-family: Abel;
	font-size: 32px;
	font-weight: normal;
	line-height: normal;
	text-align: center;
	letter-spacing: 0em;
	text-shadow: 0px 0px 10px #00bbff;

	background: linear-gradient(135deg, #fff 0%, #85d0ff 99%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: gradientBreath 3s ease-in-out infinite alternate; /*交替动画，实现淡入淡出 */
}
.count {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: space-between;
	height: 100%;
	align-items: center;
}
.count li {
	margin: 0.2em 1em;
	border: 2px #1a3f81 solid;
	width: 20%;
	text-align: center;
	background: url(/map-data-dashboard-portlet/images/countbg.png) no-repeat center center / 100% 100%;
}
.count li h4 {
	font-size: 1.4rem;
	font-weight: bold;
	padding: 0.2rem 0;
	color: #79f8fd;
	margin: 0;
}
.count li span {
	font-size: 1.2rem;
	color: #bdfcf7;
	display: block;
	margin-bottom: 0.2rem;
}
.headtitle {
	background: #061c34;
	font-size: 16px;
	padding: 0.5rem 1.5rem;
	color: #5accf8;
	display: flex;
	justify-content: space-between;
}
.col:nth-child(1) {
	width: 16%;
}
.col:nth-child(2) {
	width: 54%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.col:nth-child(3) {
	width: 30%;
}
.row {
	line-height: 2;
	padding: 0.5rem 1.5rem;
	color: #ffffff;
	font-size: 14px;
	position: relative;
	display: flex;
	justify-content: space-between;
}
.row:nth-child(odd) {
	background: rgba(20, 58, 116, .3);
}
.marqueeview {
	position: absolute;
	top: 40px;
	bottom: 0;
	width: 100%;
	overflow: hidden;
}

.marquee {
	animation: row 10s linear infinite;
}
.marquee:hover {
	animation-play-state: paused;
}
@keyframes row {
	0% {
	}
	100% {
		transform: translateY(-50%);
	}
}
.shake-y {
	/* 动画：名称 时长 循环次数 运动曲线 */
	animation: shakeY 2s ease-in-out infinite;
}

/* 定义上下抖动关键帧 */
@keyframes shakeY {
	0%,
	100% {
		transform: translateY(0);
	} /* 起始和结束位置 */
	20% {
		transform: translateY(-6px);
	} /* 上移 */
	40% {
		transform: translateY(6px);
	} /* 下移 */
	60% {
		transform: translateY(-3px);
	} /* 小幅上移 */
	80% {
		transform: translateY(3px);
	} /* 小幅下移 */
}

@keyframes gradientBreath {
	0% {
		background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(133, 208, 255, 1));
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
	100% {
		background: linear-gradient(135deg, rgba(133, 208, 255, 1), rgba(255, 255, 255, 1));
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

/* 文字从上往下进入动画关键帧 */
@keyframes slideDown {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes rotate3 {
	0% {
		transform: translateX(-50%) rotateX(75deg) rotateZ(0);
	}
	100% {
		transform: translateX(-50%) rotateX(75deg) rotateZ(360deg);
	}
}
@keyframes rotate4 {
	0% {
		transform: translateX(-50%) rotateX(75deg) rotateZ(0);
	}
	100% {
		transform: translateX(-50%) rotateX(75deg) rotateZ(-360deg);
	}
}
.redline {
	background: url(/documents/20182/9589182313/redline.png) no-repeat center top;
	background-size: 100% auto;
	width: 100vh;
  min-height: 100vh;
	position: absolute;
	animation: shakeEY 3s ease-in-out infinite;
	/* 可选：延迟动画开始时间 */
	animation-delay: 0.5s;
	z-index: 2001;
}
.yellowline {
	background: url(/documents/20182/9589182313/yellowline.png) no-repeat center top;
	background-size: 100% auto;
	width: 100vh;
  min-height: 100vh;
	position: absolute;
	animation: shakeEY 3s ease-in-out infinite;
	/* 可选：延迟动画开始时间 */
	animation-delay: 1.5s;
	z-index: 2002;
}
.greenline {
	background: url(/documents/20182/9589182313/greenline.png) no-repeat center top;
	background-size: 100% auto;
	width: 100vh;
  min-height: 100vh;
	position: absolute;
	animation: shakeEY 3s ease-in-out infinite;
	/* 可选：延迟动画开始时间 */
	animation-delay: 2.5s;
	z-index: 2003;
}
@media (max-width: 1920px){
.redline {
	background: url(/documents/20182/9589182313/redline.png) no-repeat center top;
	background-size: 100% auto;
	width: 100%;
	min-height: 570px;
	position: absolute;
	animation: shakeEY 3s ease-in-out infinite;
	/* 可选：延迟动画开始时间 */
	animation-delay: 0.5s;
	z-index: 2001;
}
.yellowline {
	background: url(/documents/20182/9589182313/yellowline.png) no-repeat center top;
	background-size: 100% auto;
	width: 100%;
	min-height: 570px;
	position: absolute;
	animation: shakeEY 3s ease-in-out infinite;
	/* 可选：延迟动画开始时间 */
	animation-delay: 1.5s;
	z-index: 2002;
}
.greenline {
	background: url(/documents/20182/9589182313/greenline.png) no-repeat center top;
	background-size: 100% auto;
	width: 100%;
	min-height: 570px;
	position: absolute;
	animation: shakeEY 3s ease-in-out infinite;
	/* 可选：延迟动画开始时间 */
	animation-delay: 2.5s;
	z-index: 2003;
}

}

/* 定义地图上箭头上下抖动关键帧 */
@keyframes shakeEY {
	0%,
	100% {
		transform: translateY(0);
	} /* 起始和结束位置 */
	20% {
		transform: translateY(-24px);
	} /* 上移 */
	40% {
		transform: translateY(24px);
	} /* 下移 */
	60% {
		transform: translateY(-12px);
	} /* 小幅上移 */
	80% {
		transform: translateY(12px);
	} /* 小幅下移 */
}