/*
--Felizon
--2024/12/03
--电能端样式
*/
/*box*/
body {
	font-family: Arial, Helvetica, sans-serif;
}

/*尺寸盒子*/
.container {
	max-width: 1200px;
	margin: 0 auto;
	overflow: hidden;
	width: 100%;
}

.container2 {
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}

/**/
.background {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.circle {
	position: absolute;
	width: 100px;
	height: 100px;
	background: radial-gradient(circle, rgba(220, 220, 220, 0.8), transparent);
	/* 浅灰色渐变 */
	border-radius: 50%;
	opacity: 0.6;
	animation: moveCircle 10s ease-in-out infinite;
}

@keyframes moveCircle {
	0% {
		transform: translate(-10%, -10%) scale(1);
	}

	50% {
		transform: translate(80vw, 60vh) scale(1.5);
	}

	100% {
		transform: translate(-10%, -10%) scale(1);
	}
}

/* 添加多个动态圆形 */
.circle:nth-child(2) {
	width: 150px;
	height: 150px;
	animation-delay: 2s;
	opacity: 0.5;
}

.circle:nth-child(3) {
	width: 200px;
	height: 200px;
	animation-delay: 4s;
	opacity: 0.4;
}

.circle:nth-child(4) {
	width: 120px;
	height: 120px;
	animation-delay: 6s;
	opacity: 0.3;
}

.body-box {
	background: url("../img/bg.png") no-repeat center;
	background-size: 100%;
	overflow: hidden;
}

.top {
	display: flex;
	justify-content: space-between;
	height: 43px;
	padding: 40px 0;
}

.top .logo {
	display: flex;
	justify-content: flex-start;
}

.top .logo img {
	width: 100%;

}

.top .logo h1 {
	overflow: hidden;
	width: 40px;

}

.top .logo h2 {
	margin-left: 30px;
	line-height: 43px;
	font-size: 24px;
	font-weight: bold;
}

.top .anniu {
	width: 170px;
	overflow: hidden;
}

.top .anniu a {
	display: block;
	background: #333;
	color: #fff;
	overflow: hidden;
	line-height: 43px;
	border-radius: 50px;
	transition: background-color 0.3s;
}

.top .anniu a:hover {
	background: #000000;
}

.top .anniu a .anniu-l {
	width: 40px;
	float: left;
	overflow: hidden;
	text-align: center;
	padding: 0 20px;

}

.top .anniu a .anniu-l img {
	vertical-align: middle;
}

.top .anniu a .anniu-r {
	width: 80px;
	float: left;
	text-align: left;
	overflow: hidden;
}

/*top end*/
/* banner */

.banner {
	overflow: hidden;
	padding: 40px 0;
	margin-top: 30px;
}

.banner-l {
	width: 40%;
	float: left;
	overflow: hidden;
}

.banner-l .list1 {
	overflow: hidden;
}

.banner-l .list1:nth-child(2) {
	overflow: hidden;
	margin-top: 62x;
}

.banner-l .list1 ul {
	display: block;
	overflow: hidden;

}

.banner-l .list1 ul li {
	font-size: 30px;
	font-weight: bold;
	width: 8%;
	float: left;
}

.banner-l .list1 ul li:nth-child(2) {
	width: 82%;
}

.banner-l .list1:nth-child(2) ul li:nth-child(2) {
	width: 92%;
}

.banner-l .list1:nth-child(2) ul li:nth-child(2) .list-bg {
	background: #edf3ff;
	border-radius: 50px;
	float: left;
	width: 18%;
	padding: 1% 3%;
	margin-right: 1%;
	display: flex;
	justify-content: center;
}

.banner-l .list1:nth-child(2) ul li:nth-child(2) .list-bg:nth-child(1) h1 img {
	width: 20px;
}

.banner-l .list1:nth-child(2) ul li:nth-child(2) .list-bg:nth-child(3) {
	width: 25%;
}

.banner-l .list1:nth-child(2) ul li:nth-child(2) .list-bg:nth-child(2) h1 img {
	vertical-align: middle;
}

.banner-l .list1 ul:nth-child(2) {
	margin-top: 20px;
}

.banner-l .list1 ul:nth-child(3) {}

.banner-l .list1 ul:nth-child(2) li {
	width: 100%;
}

.banner-l .list1 ul:nth-child(3) li {
	width: 100%;
}

.list-bg {
	background: #edf3ff;
	border-radius: 50px;
	height: 38px;
	float: left;
	width: 33%;
	padding: 1% 3%;
	margin-right: 1%;
	display: flex;
	justify-content: center;
}

.list-bg:nth-child(2) {
	width: 53%;
}

.list-bg h1 {
	width: 35px;
	float: left;
	font-size: 29px;

}

.list-bg h1 img {
	vertical-align: middle;
	font-size: 29px;
}

.list-bg h2 {
	width: 75%;
	float: left;
	line-height: 38px;
	font-size: 20px;
	color: #3c9dfd;
}


.banner-anniu {
	width: 80%;
	margin: 0 ;
	margin-left: 5%;
	overflow: hidden;
	margin-top: 30px;
	position: relative;
}

.banner-anniu a {
	display: block;
	margin: 4px;
	background: #3c9dfd;
	border-radius: 5px;
	line-height: 60px;
	overflow: hidden;
	padding: 0 3%;
	color: #fff;
	transition: background-color 0.3s;
}

.banner-anniu a:hover {
	background: #1d7edd;
}

.banner .banner-anniu:nth-child(2) a {
	background: #FC9A03;
}
.banner .banner-anniu:nth-child(3) a {
	background: #39D150
;
}
.banner-anniu a h1 {
	width: 26%;
	text-align: right;
	font-size: 20px;
	float: left;

}

.banner-anniu a h2 {
	width: 70%;
	text-align: left;
	font-size: 16px;
	float: right;
}

.banner-anniu a h1 img,
.banner-anniu a h1 img {
	width: 30px;
	vertical-align: middle;
}

.biaoqian {
	width: 65px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0%;
}

.biaoqian img {
	width: 65px;
	vertical-align: top;
}

.banner-r {
	width: 60%;
	float: right;
	overflow: hidden;
	position: relative;
	text-align: center;
	padding: 30px 0;
}

.floating-image {
	width: 99%;
	height: auto;
	animation: float 3s ease-in-out infinite;
	/* 绑定动画 */
}

/* 定义上下浮动的关键帧动画 */
@keyframes float {
	0% {
		transform: translateY(0);
		/* 初始位置 */
	}

	50% {
		transform: translateY(-20px);
		/* 向上浮动 */
	}

	100% {
		transform: translateY(0);
		/* 回到初始位置 */
	}
}

.banner-r-txt {
	overflow: hidden;
	height: 100px;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 30px;
}

.banner-r-txt h1 {
	font-size: 30px;
	font-weight: bold;
}

.banner-r-txt h1 span {
	color: #e44d4c;
}

/* banner end */
/* bot */
.bot {
	overflow: hidden;
	padding: 80px 0;
}

.bot-l {
	width: 40%;
	float: left;
}

.bot-r {
	width: 50%;
	float: right;
	overflow: hidden;
}

.bot-l-t {
	text-align: center;
	overflow: hidden;
}

.bot-l-t h1 {
	margin-bottom: 10px;
	font-weight: bold;

}

.bot-l-t h2 {
	margin-top: 20px;
	font-weight: bold;
	color: #333;
	font-size: 28px;
}

.bot-l-t h2 span:nth-child(1) {
	color: #7088dc;
	;
}

.bot-l-t h2 span:nth-child(2) {
	color: #55d6c3;
}

.bot-l-t h2 span:nth-child(3) {
	color: #faafe6;
}

.vido {

	box-shadow: 0 4px 10px rgba(255, 255, 255, 0.3);
	display: flex;
	justify-content: center;
}


.video-container {
	width: 100%;
	margin: 1%;

}

.vido video {
	width: 100%;
	height: auto;
	display: block;
}

.bot-l-t h3 {
	margin: 10px 0;
	font-weight: bold;
	color: #666;
	font-size: 20px;
}

.vido video {
	width: 100%;

}

.bot-anniu {
	display: flex;
	justify-content: center;
}

/* bot end */
.bot-r .container3 {
	position: relative;
	width: 100%;
	height: 560px;
	/* 设置容器高度 */
	overflow: hidden;
	/* 隐藏超出部分 */
}

.bot-r .container3::before,
.bot-r .container3::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 15%;
	/* 渐变遮罩宽度 */
	z-index: 2;
	pointer-events: none;
}

.bot-r .container3::before {
	left: 0;
	background: linear-gradient(to right, #ffffff, transparent);
	/* 左侧渐隐效果 */
}

.bot-r .container3::after {
	right: 0;
	background: linear-gradient(to left, #ffffff, transparent);
	/* 右侧渐隐效果 */
}

.bot-r .moving-image {
	width: 2543px;
	position: absolute;
	animation: scroll 50s linear infinite;
	/* 动画效果 */
}

@keyframes scroll {
	0% {
		transform: translateX(-80%);
		/* 从容器左侧开始 */
	}

	100% {
		transform: translateX(20%);
		/* 移动到容器右侧 */
	}
}

.footer-bg {
	background: #333;
	padding: 30px 0;
	overflow: hidden;
	height: 30px;
}

.footer {
	line-height: 30px;
	display: flex;
	justify-content: center;
	color: #999;
	overflow: hidden;
}

.footer a {
	color: #999;
	overflow: hidden;
}

.footer p {
	color: #999;
	overflow: hidden;
}

.footer a:hover {
	color: #fff;
}

.jianjie {
	background: #000000;
	color: #999;
}

.jianjie p {
	text-align: center;
	font-size: 12px;
	line-height: 24px;
}

.jianjie p span {

	color: #3c9dfd;
	margin-left: 20px;
}