	// 方框介绍
	.mobile-product {
		width: 566px;
		margin: 41px auto 25px;
		height: 492px;		

		&__sec {
			display: flex;
			justify-content: space-between;
			align-items: center;

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

			&__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;
					background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				&__text {
					margin-top: 9px;
					height: 50px;
					font-size: 36px;
					font-weight: 600;
					line-height: 40px;
					width: fit-content;
				}

				&__text2 {
					width: fit-content;
					height: 33px;
					font-size: 24px;
					font-weight: 600;
					color: #FFFFFF;
					font-family: MiSans-Medium;
					line-height: 30px;
				}

			}

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

				&__img {
					margin: 10px 0 7px;
					width: 72px;
					height: 88px;
				}

				&__content {
					display: flex;
					width: fit-content;
					justify-content: center;

					&__text {
						width: fit-content;
						height: 31px;
						line-height: 29px;
						font-size: 29px;
						font-weight: 600;
						background: linear-gradient(87deg, #0FFFC4 0%, #006AFF 100%);
						-webkit-background-clip: text;
						background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					&__text2 {
						height: 31px;
						font-size: 17px;
						line-height: 33px;
						font-weight: 600;
						background: linear-gradient(87deg, #0FFFC4 0%, #006AFF 100%);
						-webkit-background-clip: text;
						background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					&__text3 {
						padding-left: 5px;
						height: 31px;
						line-height: 34px;
						font-size: 17px;
						font-family: MiSans-Regular;
						color: #FFFFFF;
					}
				}
			}

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

				&__img {
					margin-top: 23px;
					width: 52px;
					height: 82px;
				}

				&__text {
					margin-top: 17px;
					width: fit-content;
					height: 50px;
					font-size: 19px;
					font-weight: 600;
					color: #FFFFFF;
					font-family: MiSans-Medium;
					background: linear-gradient(81deg, #0FFFC4 0%, #006AFF 100%);
					-webkit-background-clip: text;
					background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
		}

		&__sec2 {
			margin-top: 9px;
			display: grid;
			grid-template-columns: 214px 214px 123px;
			grid-template-rows: 153px 153px;
			grid-row-gap: 9px;
			grid-column-gap: 9px;
			font-family: MiSans-Semibold;
			grid-template-areas:
				'gap1 gap1 gap2'
				'gap3 gap4 gap4';

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

				&__content {
					padding-right: 10px;
					display: flex;
					flex-direction: column;
					align-items: flex-end;

					&__top {
						display: flex;
						&__text {
							height: 37px;
							font-size: 26px;
							color: #FFFFFF;
							background: linear-gradient(87deg, #0FFFC4 0, #0FFFC4 20%, #006AFF 100%);
							-webkit-background-clip: text;
							background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						&__text2 {
							font-size: 14px;
							padding: 14px 0 0 5px;
							background: linear-gradient(87deg, #006AFF 0, #006AFF 100%);
							-webkit-background-clip: text;
							background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}

					&__bottom {
						height: 27px;
						font-size: 17px;
						font-family: MiSans-Regular;
						color: #FFFFFF;

						text {
							font-size: 14px;
						}
					}
				}
			}

			&__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: 9px;
				text-align: center;

				&__text {
					margin-top: 54px;
					width: fit-content;
					height: 19px;
					line-height: 19px;
					font-size: 19px;
					font-weight: 600;
					background: linear-gradient(87deg, #0FFFC4 0%, #006AFF 100%);
					-webkit-background-clip: text;
					background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				&__text2 {
					width: fit-content;
					height: 19px;
					line-height: 19px;
					font-size: 12px;
					background: linear-gradient(90deg, #0FFFC4 0%, #0FFFC4 70%, #006AFF 100%);
					
					background-clip: text;
					-webkit-text-fill-color: transparent;
					font-weight: 500;
				}

				&__text3 {
					margin-top: 28px;
					height: 32px;
					font-size: 18px;
					font-family: MiSans-Regular;
					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: 9px;

				&__text {
					transform: translateY(46px);
					width: fit-content;
					height: 36px;
					font-size: 26px;
					font-weight: 600;
					color: #FFFFFF;
					background: linear-gradient(87deg, #0FFFC4 0%, #006AFF 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				&__text2 {
					transform: translateY(60px);
					width: 170px;
					height: 23px;
					font-family: MiSans-Medium;
					font-size: 17px;
					font-weight: 500;
					color: #FEFEFE;
					line-height: 23px;
					text-align: center;
				}
			}

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

				&__img {
					margin-top: 15px;
					width: 142px;
					height: 142px;
				}

				&__content {
					width: fit-content;
					text-align: center;

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

					}

					&__text2 {
						height: 41px;
						font-size: 18px;
						line-height: 30px;
						font-family: MiSans-Regular;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	//放大视频
	.mobile-Energy {
		width: 584px;
		height: 316px;
		margin: 0 auto;
		&__avater {
			width: inherit;
			height: inherit;
		}

	}
	//白天黑夜
	.mobile-sun {
		width: 100%;
		height: 615px;	
		&__img {
			width: 100%;
			height: 302px;	
	
			&:last-child {
				transform: translateY(8px);
			}
		}
	}
	
	//电流视频
	.mobile-filter-video {
		&__box {
			width: 517px;
			height: 304px;
			margin: 130px auto 0;
			position: relative;
	
			&__avater {
				width: 100%;
				height: 100%;
			}
	
			&__content {
				width: fit-content;
				position: absolute;
				font-family: MiSans-Regular;
				top: 0;
				width: 260px;
				&__text {
					display: flex;
					width: fit-content;
					height: 50px;
					font-size: 50px;
					font-family: MiSans-Medium;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 50px;
					background: linear-gradient(128deg, #0FFFC4 20%, #006AFF 100%, );
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
	
				&__text2 {
					font-size: 12.5px;
					font-weight: 400;
					color: #dfdfdf;
					line-height: 1.6;
				}
			}
	
		}
	}
	
	//AC太阳能板
	.Plugged {
		margin-top: 173px;
		&__bar-view {
			width: 533px;
			height: 28px;
			margin: 50px auto 0;
	
			&__box {
				position: relative;
				&__list {
					display: flex;
					justify-content: space-around;
					color: #C1C1C1;
					border-bottom: 3px solid #646464;
					padding: 0;
	
					li {
						padding-bottom: 5px;
						cursor: pointer;
						margin-right: 0;
						font-size: 15px;
						position: relative;
						&::after {
							content: '';
							position: absolute;
							bottom: -3px;
							left: 50%;
							transform: translateX(-50%);
							width: 30px;
							transition: all 0.3s;
							height: 3px;
						}
					}
	
					&-li--active {
						&::after {
							background-color: #ffffff;
						}
					}
				}
			}
		}
	
		//AC太阳能板
		&__swiper {
			margin: 36px auto 82px;
			width:492px;
			height:410px;
			background-color: #000;
			color: #fff;
	
			&__full {
				width:497px;
				height:410px;
				&__item {
					//显示小时裁决样式
					@mixin hoursStyle {
						display: flex;
						height: 58px;
						align-items: flex-end;
						&__right {
							font-size: 14px;
							line-height: 20px;
						}
	
						&__left {
							font-family: MiSans-Regular;
							font-weight: 600;
							color: #FFFFFF;
							font-size: 56px;
							height: 58px;
							line-height: 58px;
							background: linear-gradient(128deg, #0FFFC4 0%, #006AFF 100%);
							-webkit-background-clip: text;
							background-clip: text;
							-webkit-text-fill-color: transparent;
						}
	
						&__right {
							height: 58px;
							font-size: 19px;
							line-height: 87px;
							padding-left: 7px;
						}
					}
	
					&__box {
						margin-top: 33px;
	                    display: flex;
	                    align-items: flex-start;
						width:500px;
						&__img {								
							width:231px;
							height:186px;
							position: relative;
							img {
								width:231px;
								height:186px;
							}
	
							&__power {
								font-size: 19px;
								position: absolute;
								top: 37px;
								left: 23px;
								color: #CCCCCC;
								font-family: MiSans-Regular;
							}
						}
	
						&__hour {
	                        margin:18px 0 0 25px ;
							@include hoursStyle;
						}
					}
	
					&__box2 {
	                    width:492px;
	                    height:187px;
						margin-top: 33px;
						position: relative;
	
						&__img2 {
							width: inherit;
							height: inherit;
						}
	
						&__power {
							font-size: 19px;
							position: absolute;
							top: 40px;
							left: 44px;
							color: #CCCCCC;
							font-family: MiSans-Regular;
							z-index: 9;
						}
	
						&__hour {
							position: absolute;
							top: 18px;
							right: 132px;
							@include hoursStyle;
						}
					}
	
					&__box3 {
						margin-top: 82px;
						&__img3 {
							width:402px;
							height:136px;
	                        padding-left: 91px;
							img {
								width: inherit;
								height: inherit;
							}
						}
					}
	
					&__box4 {
						display: flex;
						justify-content: center;
						margin-top: 123px;
						&__img4{
							width:390px;
							height:128px;
						}
	
						&__img5 {
							width:373px;
							height:137px;
						}
	
						&__hour {
							@include hoursStyle;
							position: absolute;
							top: 82px;
							right: 66px;
	
							&__left {
								font-size: 56px;
								height: 111px;
								line-height: 111px;
							}
	
							&__right {
								font-size: 25px;
								line-height: 25px;
							}
						}
	
						&__hour2 {
							@include hoursStyle;
							position: absolute;
							top: 66px;
							right: 144px;
							&__left {
								font-size: 53px;
								height: 111px;
								line-height: 119px;
							}
							&__right {
								font-size: 19px;
								line-height: 37px;
							}
						}
					}
				}
			}
		}
	}
	// 快充进度条 
	.Fast {
		width: 600px;
		margin: 300px auto 0;
		padding-left: 33px;
		color: #fff;		
		h2 {
			height: 60px;
			font-family: MiSans-Medium;
			font-weight: 500;
			line-height: 60px;
			color: #FFFFFF;
			width: fit-content;
			font-size: 28px;
			overflow: hidden;
			p{
				display: inline-block;
				height: fit-content;
			}
		}
	
	
		text {
			font-size: 15px;
			height: fit-content;
			line-height: 30px;
		}
	
		&__progress-first {
			margin-top: 43px;	
			&__content {
				height: 28px;
				transition: width .5s ease-out;
				background: linear-gradient(125deg, #0FFFC4 0,#0FFFC4 30%, #006AFF 70%,#006AFF 100%);
				width: 0;
			}
	
			&--active {
				width: 118px;
			}
		}
		
	
		&__progress-second {
			margin-top: 43px;
	
			text {
				color: #C5C5C5;
			}
	
			&__content {
				width: 0;
				height: 28px;
				background: #C5C5C5;
				transition: width .5s ease-out;
			}
	
			&--active {
				width: 361px;
			}
		}
		
	}
	
	//芯片BMS
	.battery {
		margin: 148px auto 0;
		width: 566px;
	
		&__box {
			display: flex;
			margin-top: 52px;
	
			&__decorate {
				width: 306px;
				height: 243px;
				border-radius: 9px;
				display: flex;
				justify-content: center;
				align-items: center;
				background: linear-gradient(182deg, #3B3B3B, #05080B);
	
				&__img {
					width: 217px;
					height: 140px;
					margin-right: 25px;
				}
	
				&__img2 {
					width: inherit;
					height: inherit;
				}
	
				&__img3 {
					width: 173px;
					height: 192px;
				}
			}
	
			&__content {
				margin-left: 20px;
				width: 260px;
	
				h2 {
					height: 33px;
					font-size: 20px;
					font-family: MiSans-Medium;
					font-weight: 400;
					color: #ffffff;
					line-height: 30px;
					margin: 46px 0 16px;
				}
	
				p {
					font-size: 13px;
					font-family: MiSans-Regular;
					color: #f5f5f5;
					line-height: 21px;
				}
			}
	
			&__content2 {
				text-align: right;
				margin-left: 0;
				margin-right: 31px;
				h2{
					font-size: 20px;
				}
			}
		}
	}
	
	@mixin proIteTitle {
		height: 44px;
		font-size: 22px;
		font-family: MiSans-Semibold;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 15px;
		text-align: center;
	}
	
	@mixin sectionBox {
		margin: 17px auto 0;
		width: 530px;
		height: 336px;
		background: linear-gradient(182deg, #3B3B3B, #05080B);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 7px;
	
	}
	
	$caitainerWidth: 591px;
	//15ports
	.prots {
		width: $caitainerWidth;
		margin: 192px auto 0;		
		h2 {
			@include proIteTitle;
		}
	
		&__box {
			@include sectionBox;		
			&__text {
				font-size: 25px;
				font-family: MiSans-Semibold;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 50px;
			}
		}
	}
	
	//智能APP
	.Intelligent-App {
		width: $caitainerWidth;
		margin: 119px auto 120px;
	
		h2 {
			@include proIteTitle;
		}
	
		&__box {
			margin-top: 17px;
			display: flex;
			flex-direction: column;
			align-items: center;
	
			&__item {
				width: 540px;
				height: 297px;
				border-radius: 33px;				
				position: relative;
	
				&__img {
					width: inherit;
					height: inherit;
				}
	
				&__text {
					position: absolute;
					top: 120px;
					left: 52px;
					width: 182px;
					height: 58px;
					font-size: 18px;
					font-family: MiSans-Medium;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 27px;
					text-align: center;
				}
				
				&__text-lang {
					width: 120px;
					left: 102px;
				}
	
				&__text2 {
					position: absolute;
					width: fit-content;
					height: 25px;
					font-size: 18px;
					padding-bottom: 41px;
					font-family: MiSans-Medium;
					text-align: center;
					color: #FFFFFF;
					transform: translate(10%);
					bottom: 0;
				}
				&__text2-lang{
					position: absolute;
					transform: translate(40%);
				}
			}
		}
	}	
	//Whats
	.boat {
		width: $caitainerWidth;
		margin: 99px auto 87px;		
		h2 {
			@include proIteTitle;
		}
	
		&__box {
			@include sectionBox;
			background: linear-gradient(182deg, #120F0F, #2D2D2D);
		}
	}
	
	//更多产品
	.More {
		width: 599px;
		margin: 46px auto 66px;
	
		&__top {
			display: flex;
			justify-content: space-between;
			padding: 0 33px 0;
	
			&__title {
				font-size: 19px;
				font-family: MiSans-Medium;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 41px;
				cursor: pointer;
			}
		}
	
		&__box {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			height: fit-content;
			width: 533px;
			margin: 0 auto;
	
			&__item {
				width: 255px;
				height: 370px;
				background: #121212;
				border-radius: 9px;
				text-align: center;
				display: flex;
				align-items: center;
				flex-direction: column;
	
				//手机端不能有hover事件
				&:hover {
					margin-bottom: 0;
				}
	
				&__img {
					width: 155px;
					height: 124px;
					margin-top: 66px;
				}
	
				&__title {
					font-size: 22px;
					font-family: MiSans-Medium;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 33px;
					margin-top: 19px;
				}
	
				&__subTit {
					font-size: 15px;
					width: fit-content;
					color: #478fff;
					cursor: pointer;
					background-color: #949494;
				}
			}
		}
	
		&__bottom {
			padding: 17px 50px 0 0;
			font-size: 19px;
			font-family: MiSans-Medium;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 25px;
			cursor: pointer;
			text-align: right;
		}
	}
	
	