	// 方框介绍
	.product__box {
		width: 957px;
		margin: 92px auto 0;
		height: 605px;
		&__sec {
			display: flex;
			justify-content: space-between;
			align-items: center;

			@mixin secStyle {
				width: 310px;
				height: 174px;
				background: linear-gradient(182deg, #232E3C, #05080B);
				border-radius: 21px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				text-align: center;
				font-family: MiSans-Bold;
			}

			&__item1 {
				@include secStyle;
				align-items: center;

				* {
					font-family: MiSans-Semibold;
					background: linear-gradient(128deg, #0FFFC4 0%, #0FFFC4 40%, #006AFF 60%, #006AFF 100%, );
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				&__text {
					width: fit-content;
					height: 50px;
					line-height: 50px;
					font-size: 45px;
					margin-top: 21px;
				}

				&__text2 {
					width: fit-content;
					height: 55px;
					font-size: 30px;
					line-height: 40px;
				}

			}

			&__item2 {
				@include secStyle;
				display: flex;
				flex-direction: column;
				align-items: center;

				&__img {
					margin: 14px 0 7px;
					width: 74px;
					height: 92px;
				}

				&__content {
					display: flex;
					justify-content: center;					
					font-family: MiSans-Medium;

					&__text {
						background: linear-gradient(128deg, #0FFFC4 0%, #006AFF 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						font-size: 24px;
						font-weight: 600;
						text-align: right;
						padding-right: 5px;
					}

					&__text2 {
						color: #ffffff;
						font-size: 22px;
						text-align: center;
					}
				}
			}

			&__item3 {
				@include secStyle;
				align-items: center;

				&__img {
					margin-top: 16px;
					width: 55px;
					height: 87px;
				}

				&__text {
					margin-top: 4px;
					display: inline-block;
					font-size: 21px;
					font-weight: 600;
					color: #FFFFFF;
					background: linear-gradient(81deg, #0FFFC4 0%, #006AFF 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				&__text2 {
					display: inline-block;
					font-size: 21px;
					color: #FFFFFF;
					font-family: MiSans-Medium;
					margin-top: -12px;
				}
			}
		}

		&__sec2 {
			margin-top: 12px;
			display: grid;
			grid-template-columns: 316px 257px 357px;
			grid-template-rows: 201px 209px;
			grid-row-gap: 12px;
			grid-column-gap: 12px;
			grid-template-areas:
				'gap1 gap1 gap4'
				'gap2 gap3 gap4';

			&__item1 {
				grid-area: gap1;
				background: url('/static/product/detail/n051/solar.webp') center center/cover;
				display: flex;
				justify-content: flex-end;
				align-items: flex-end;
				border-radius: 21px;

				&__content {
					padding: 0 27px 21px 0;
					display: flex;
					flex-direction: column;
					align-items: flex-end;

					&__top {
						box-sizing: content-box;
						display: flex;

						&__text {
							width: auto;
							height: 47px;
							font-size: 34px;
							font-weight: 600;
							color: #FFFFFF;
							background: linear-gradient(87deg, #0FFFC4 0, #0FFFC4 20%, #006AFF 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						&__text2 {
							width: auto;
							font-size: 18px;
							// border: 1px solid #0FFFC4;
							font-weight: 600;
							padding-top: 20px;
							background: linear-gradient(87deg, #006AFF 0, #006AFF 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}

					&__bottom {
						height: 31px;
						font-size: 22px;
						font-weight: 500;
						font-family: MiSans-Medium;
						color: #FFFFFF;
					}
				}
			}

			&__item2 {
				grid-area: gap2;
				background: url('/static/product/detail/n051/charging.webp') center center/cover;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-radius: 21px;

				&__text {
					margin-top: 74px;
					width: 109px;
					text-align: center;
					height: 29px;
					font-size: 31px;
					font-family:MiSans-Regular ;
					font-weight: 600;
					color: #3E4752;
					line-height: 25px;
					background: linear-gradient(87deg, #0FFFC4 0%, #006AFF 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				&__text2 {
					padding-top: 7px;
					text-align: center;
					width: 55px;
					height: auto;
					line-height: 1;
					font-size: 25px;
					background: linear-gradient(90deg, #0FFFC4 0%, #0FFFC4 70%, #006AFF 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					font-family: MiSans-Medium;
					font-weight: 500;
					color: #FFFFFF;
				}

				&__text3 {
					text-align: center;
					margin-top: 25px;
					height: 34px;
					font-size: 22px;
					font-family: MiSans-Medium;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

			&__item3 {
				grid-area: gap3;
				background: url('/static/product/detail/n051/rate.webp') center center/cover;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-radius: 21px;

				&__text {
					margin-top: 60px;
					width:210px;
					height: auto;
					font-size: 35px;
					font-weight: 600;
					color: #FFFFFF;
					background: linear-gradient(87deg, #0FFFC4 0%, #006AFF 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				&__text2 {
					margin-top: 20px;
					width: 174px;
					height: 60px;
					font-family: MiSans-Medium;
					font-size: 22px;
					font-weight: 500;
					color: #FEFEFE;
					line-height: 31px;
					text-align: center;
				}
				&__textTop{
					margin-top: 38px;
				}
			}

			&__item4 {
				grid-area: gap4;
				display: flex;
				flex-direction: column;
				align-items: center;
				background: linear-gradient(182deg, #232E3C, #05080B);
				border-radius: 21px;

				&__img {
					width: 276px;
					height: 247px;
					margin-top: 60px;
				}

				&__text {
					display: inline-block;
					height: fit-content;
					font-size: 36px;
					font-weight: 600;
					color: #FFFFFF;
					background: linear-gradient(266deg, #0FFFC4 0%, #006AFF 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;

				}

				&__text2 {
					height: 40px;
					font-size: 22px;
					line-height: 40px;
					font-weight: 500;
					font-family: MiSans-Medium;
					color: #FFFFFF;
				}
			}
		}
	}

	//设备放大视频 
	#Energy {
		height: 717px;
		position: relative;		
		margin-bottom: 435px;

		.Energy-scale {
			position: absolute;
			width: 181px;
			height: 270px;
			display: block;
			position: absolute;
			top: 90%;
			left: 52%;
			transform: scale(2.5) translate(-25%, -50%);
			opacity: 0;
			z-index: 99;
		}

		.Energy-el {
			margin: 0 auto 0;
			width: 1214px;
			height: 717px;
			opacity: 0;
			@media (max-width:1214px) {
				width: 100%;
				height: auto;
				aspect-ratio:1/0.6;
			}

			&__avater {
				width: 100%;
				height: 100%;
			}
		}
	}
	//电流视频
	.filter-video {		
		background-color: #000;
		&__box {
			margin-top: 74px;
			width: 1714px;
			height: 965px;
			margin: 0 auto 0;
			position: relative;
			@media (max-width:1714px) {
				width: 100%;
			}

			&__avater {
				width: 100%;
				height: 100%;
			}
			@mixin filterContentStyle($unit,$radio){		
				&__content {
					position: absolute;
					width: 443 * $radio + $unit;
					font-size: 20 * $radio + $unit;
					font-family: MiSans-Regular;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 38 * $radio + $unit;
					top: 20%;
					left: 20%;
					opacity: 0;
				
					&__text {
						display: flex;		
						&__num {
							width: 190 * $radio + $unit;
							height: 75 * $radio + $unit;
							font-size: 73 * $radio + $unit;
							font-family: MiSans-Medium;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 78 * $radio + $unit;
							background: linear-gradient(128deg, #0FFFC4 17%, #006AFF 100%, );
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}
				
					&__text2 {
						width: 473 * $radio + $unit;
						font-size: 23 * $radio + $unit;
						font-family: MiSans-Regular;
						font-weight: 400;
						color: #dfdfdf;
						line-height: 38 * $radio + $unit;
					}
				}	
			}
			
			@media (min-width:1479px) {
				@include filterContentStyle(px,1);
				&__content{
					top: 18%;
					left: 20%;
				}	
			}
			@media (max-width:1479px)  and (min-width:1219px){
				@include filterContentStyle(px,0.8);
				&__content{
					top: 18%;
					left: 18%;
				}	
			}
			@media (max-width:1218px)  and (min-width:957px){
				@include filterContentStyle(px,0.7);
				&__content{
					top: 20%;
					left: 16%;
				}
			}
			
		}
	}

	//AC太阳能板 
	.Plugged {
		// power标题;
		background-color: #000000;

		// 滑动滚动
		&__bar-view {
			width: 834px;
			height: 29px;
			margin: 79px auto 0;

			&__box {
				position: relative;
				&__list {
					width: 834px;
					border-bottom: 5px solid #646464;
					display: flex;
					justify-content:space-evenly;
					font-size: 21px;
					color: #C1C1C1;

					li {
						padding: 12px 0;
						cursor: pointer;
						font-size: 18px;
						position: relative;
						&::after {
							content: '';
							position: absolute;
							bottom: -5px;
							left: 50%;
							transform: translateX(-50%);
							width: 30px;
							transition: all 0.3s;
							height: 5px;
						}
					}

					&-li--active {
						&::after {
							background-color: #ffffff;
						}
					}
				}
			}
		}

		//AC太阳能板
		&__swiper {
			margin: 38px auto 261px;
			width: 834px;
			height: 609px;
			background-color: #000;
			color: #fff;

			&__full {
				height: 609px;
				width: 834px;
				&__item {
					//显示小时裁决样式
					@mixin hoursStyle {
						display: flex;
						height: 74px;
						align-items: flex-end;
						&__left{
							font-size:96px;
							// border: 1px solid #fff;
							height: 118px;
							line-height: 118px;
						}
						&__right{
							font-size:27px;
							line-height: 21px;
						}
						&__left {
							font-family:MiSans-Regular;
							font-weight: 600;
							color: #FFFFFF;
							font-size:96px;
							height: 118px;
							line-height: 118px;
							background: linear-gradient(128deg, #0FFFC4 0%, #006AFF 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						&__right {
							height: 44px;
							font-size:27px;
							line-height: 21px;
							padding-left: 7px;
						}
					}

					&__box {
						margin-top: 55px;
						display: flex;

						&__img {
							width: 431px;
							height: 340px;
							position: relative;

							img {
								width: 431px;
								height: 340px;
							}

							&__power {
								font-size: 21px;
								position: absolute;
								top: 60px;
								left: 47px;
								color: #CCCCCC;
								font-family: MiSans-Regular;
							}
						}

						&__hour {
							color: #fff;
							display: flex;
							height: 74px;
							align-items: flex-end;
							margin: 74px 0 0 55px;
							@include hoursStyle;
						}
					}

					&__box2 {
						width: 100%;
						height: 340px;
						margin-top: 64px;
						position: relative;

						&__img2 {
							width: inherit;
							height: inherit;
						}

						&__power {
							font-size: 21px;
							position: absolute;
							top: 42px;
							left: 47px;
							color: #CCCCCC;
							font-family: MiSans-Regular;
							z-index: 9;
						}

						&__hour {
							position: absolute;
							top: 42px;
							right: 253px;
							@include hoursStyle;
						}
					}

					&__box3 {
						margin-top: 144px;
						&__img3 {
							width: 596px;
							height: 244px;
							display: flex;
							padding-left: 135px;
						}
					}
					&__box4 {
						display: flex;
						justify-content: center;
						margin-top: 174px;
						&__img4 {
							width: 100%;
							height:340px;
						}
						&__hour{
							@include hoursStyle;
							position: absolute;
							top: 70px;
							right:201px;
							&__left{
								font-size:96px;
								height: 118px;
								line-height: 118px;
							}
							&__right{
								font-size:27px;
								line-height: 21px;
							}
						}
						&__hour2{
							@include hoursStyle;
							position: absolute;
							top: 70px;
							right: 235px;
							&__left{
								font-size:96px;
								// border: 1px solid #fff;
								height: 118px;
								line-height: 118px;
							}
							&__right{
								font-size:27px;
								line-height: 21px;
							}
						}
					}
				}
			}
		}
	}

	//快充进度条
	.Fast {
		width: 960px;
		margin: 0 auto 0;
		color: #fff;

		h2 {
			height: 60px;
			font-size: 38px;
			font-family: MiSans-Medium;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 60px;
			overflow: hidden;
			p{
				height: fit-content;
			}
		}


		span {
			font-size: 16px;
			line-height: 34px;
		}

		&__progress-first {
			margin-top: 29px;

			&__content {
				width: 0;
				height: 53px;
				background: linear-gradient(125deg, #0FFFC4 0,#0FFFC4 30%, #006AFF 70%,#006AFF 100%);
				will-change: width, padding;
			}

			&--active {
				width: 30%;
				padding: 0 14px;
				transition: width 1s linear;
				will-change: width, padding;
			}
		}

		&__progress-second {
			margin-top: 29px;

			text {
				color: #C5C5C5;
			}

			&__content {
				width: 0;	
				height: 53px;
				background: #666;
				will-change: width, padding;
			}

			&--active {
				width: 60%;
				transition: width 6s steps(8,start);
				padding: 0 14px;
				will-change: width, padding;
			
			}
		}
	}

	//芯片BMS
	.battery {
		margin: 208px auto 0;
		width: 960px;

		&__box {
			display: flex;
			margin-top: 100px;

			&__decorate {
				width: 486px;
				height: 386px;
				display: flex;
				border-radius:5px;
				justify-content: center;
				align-items: center;
				background: linear-gradient(182deg, #3B3B3B, #05080B);

				&__img {
					width: 340px;
					height: 242px;
					margin-right: 29px;
				}

				&__img2 {
					width: inherit;
					height: inherit;
				}

				&__img3 {
					width: 261px;
					height: 295px;
				}
			}

			&__content {
				margin-left: 60px;
				width: 486px;

				h2 {
					height: 44px;
					font-size: 27px;
					font-family: MiSans-Regular;
					font-weight: 400;
					color: #ffffff;
					line-height: 16px;
					margin-top: 92px;
				}

				p {
					font-size: 18px;
					font-family: MiSans-Regular;
					color: #f5f5f5;
					line-height: 29px;
				}
			}

			&__content2 {
				text-align: right;
				margin-left: 0;
				margin-right: 70px;
			}
		}
	}
    
	@mixin proIteTitle {
		height: 40px;
		font-size: 28px;
		font-family: MiSans-Semibold;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 16px;
		text-align: center;
	}

	@mixin sectionBox {
		margin-top: 18px;
		width: 960px;
		height: 386px;
		background: linear-gradient(182deg, #3B3B3B, #05080B);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 7px;

	}

	$caitainerWidth: 960px;

	//15ports
	.prots {
		width: $caitainerWidth;
		margin: 151px auto 0;

		h2 {
			@include proIteTitle;
		}

		&__box {
			@include sectionBox;

			&__text {
				font-size: 32px;
				font-family: MiSans-Medium;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 16px;
			}
		}
	}

	//智能APP
	.Intelligent-App {
		width: $caitainerWidth;
		margin: 227px auto ;

		h2 {
			@include proIteTitle;
		}

		&__box {
			margin-top: 21px;
			display: flex;
			justify-content: space-between;

			&__item {
				width: 435px;
				height: 240px;
				border-radius: 35px;
				position: relative;
				
				&__img {
					width: inherit;
					height: inherit;
				}

				&__text {
					position: absolute;
					top: 80px;
					left: 55px;
					width: 150px;						
					height: 70px;
					font-size: 17px;
					font-family: MiSans-Medium;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 27px;
					text-align: center;
					
				}
				&__text-lang {
					top: 109px;
					left: 55px;
					width: 140px;
				}
				&__text2 {
					position: absolute;
					font-size: 17px;					
					font-family: MiSans-Medium;
					text-align: center;
					color: #FFFFFF;
					line-height: fit-content;
					width: 200px;
					transform: translate(50%,50%);
					bottom: 50%;
				}
				&__text2-lang{					
					position: absolute;
					transform: translate(40%);
					bottom: 0;
					line-height: 30px;
					padding-bottom: 10px;
				}
				
			}
		}
	}

	//Whats
	.boat {
		width: $caitainerWidth;
		margin: 261px auto 0;

		h2 {
			@include proIteTitle;
			font-family: MiSans-Medium;
		}

		&__box {
			@include sectionBox;
			background: linear-gradient(182deg, #120F0F, #2D2D2D);
		}
	}
	
	// 滑动滚动要分成组件的
	.swiper__box {
		height: 409px;
		width: 696px;
		display: flex;
		&__list {
			width: 696px;
			padding-left: 44px;
			display: grid;
			grid-template-columns: repeat(auto-fill, 131px);
			grid-gap: 0px 44px;
			margin: 44px auto 0;
			&__li {
				width: fit-content;
				height: fit-content;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				&__img {
					width: 27px;
					height: 27px;
				}
	
				&__title {
					margin-top: 16px;
					width: fit-content;
					height: fit-content;
					font-size: 16px;
					font-family: MiSans-Regular;
					font-weight: 400;
					color: #C1C1C1;
				}
	
				&__power {
					margin-top: 7px;
					height: fit-content;
					font-size: 16px;
					font-family: MiSans-Regular;
					font-weight: 400;
					color: #C1C1C1;
				}
	
				&__houres {
					margin-top: 7px;
					height: fit-content;
					font-size: 23px;
					font-family: MiSans-Medium;
					font-weight: 500;
					color: #FFFFFF;
	
					text {
						font-size: 18px;
					}
				}
			}
		}
	}		

	//动画
	@keyframes textAnimation {
		0% {
			transform: translateY(29px);
			opacity: .3;
		}

		100% {
			transform: translateY(5px);
			opacity: 1;
		}
	}

	@keyframes textAnimation2 {
		0% {
			transform: translateY(47px);
			opacity: .3;
		}

		100% {
			transform: translateY(5px);
			opacity: 1;
		}
	}

	//文字的
	.is-animating {
		animation: textAnimation 1.2s ease;
	}

	.is-animating2 {
		animation: textAnimation2 2s ease;
	}

	.is-display {
		visibility: hidden;
	}