@charset "utf-8";
/* CSS Document */

	*{
		margin: 0px;
		padding: 0px;
	}
/*	头部*/
/*	导航*/
	#tou{
		height: 50px;
		width: 100%;
		background: rgba(255,255,255,0);
		position: fixed;
		top: 0;
		z-index: 3;
	}
	#CaiDan
	{
		pointer-events: auto;
		position: absolute;
		height: 40px;
		top: 4px;
		left: 10px;
		
	}


	#CaiDan>div{
/*		pointer-events: none;*/
		position: absolute;
		background: #fff;
		z-index: 3;
		width: 25px;
		height: 3px;
		border-radius: 3px;	
	}
#CaiDan>div:nth-child(1){
	transform: translateY(0px);
	top: 10px;
	z-index: 2;
}
#CaiDan>div:nth-child(2){
	top: 20px;
	z-index: 1;
}
#CaiDan>div:nth-child(3){
	top: 30px;
	z-index: 2;
}

.CaiDan_1_on{
	animation-name: CaiDan_1_on;
	animation-duration: 0.7s;
	animation-fill-mode: both;
}
.CaiDan_2_on{
	animation-name: CaiDan_2_on;
	animation-duration: 0.7s;
	animation-fill-mode: both;
}
.CaiDan_3_on{
	animation-name: CaiDan_3_on;
	animation-duration: 0.7s;
	animation-fill-mode: both;
}
.CaiDan_1_off{
	animation-name: CaiDan_1_off;
	animation-duration: 0.7s;
	animation-fill-mode: both;
}
.CaiDan_2_off{
	animation-name: CaiDan_2_off;
	animation-duration: 0.7s;
	animation-fill-mode: both;
}
.CaiDan_3_off{
	animation-name: CaiDan_3_off;
	animation-duration: 0.7s;
	animation-fill-mode: both;
}
.CaiDan_Collo_on{
	animation-name: CaiDan_Collo_on;
	animation-duration: 0.3s;
	animation-fill-mode: both;
}
.CaiDan_Collo_off{
	animation-name: CaiDan_Collo_off;
	animation-duration: 0.3s;
	animation-fill-mode: both;
}
/*菜单动画*/
@keyframes CaiDan_Collo_on{
	0%{
		background: #fff;
	}
	100%{
		background: #000;
	}
}
@keyframes CaiDan_Collo_off{
	0%{
		background: #000;
	}

	100%{
		background: #fff;
	}
}
@keyframes CaiDan_1_on{
	0%{
		background: #fff;
	}
	50%{
		transform: translateY(0px);
	}
	70%{
		top: 20px;
		
	}
	100%{
		background: #000;
		top: 20px;
		transform: rotate(45deg);
	}
}
@keyframes CaiDan_2_on{
	0%{
		background: #fff;
		opacity: 1;
	}
	50%{
		opacity: 1;
	}
	100%{
		background: #fff;
		opacity: 0;
	}
}
@keyframes CaiDan_3_on{
	0%{
		background: #fff;
	}
	50%{
		transform: translateY(0px);
	}
	70%{
		top: 20px;
	}
	100%{
		background: #000;
		top: 20px;
		transform: rotate(135deg);
	}
}
@keyframes CaiDan_1_off{
	100%{
		background: #fff;
	}
	50%{
		top: 20px;
		transform: translateY(0px);
	}
	0%{
		background: #000;
		top: 20px;
		transform: rotate(45deg);
	}
}
@keyframes CaiDan_2_off{
	100%{
		background: #fff;
		opacity: 1;
	}
	50%{
		opacity: 0;
	}
	0%{
		background: #fff;
		opacity: 0;
	}
}
@keyframes CaiDan_3_off{
	100%{
		background: #fff;
	}
	50%{
		top: 20px;
		transform: translateY(0px);
	}
	0%{
		background: #000;
		top: 20px;
		transform: rotate(135deg);
	}
}
	/*log暂时用电池代替*/
#TuBiao{
		display: flex;
		height: 50px;
		overflow: hidden;
/*		align-items: center;*/
		
		justify-content: center;
		
	}
#TuBiao>img{
	top: 6px;
	position: absolute;
}
.Tub_on{
	animation-name: tub_on;
	animation-duration: 1s;
	animation-fill-mode: both;
}
.Tub_off{
	animation-name: tub_off;
	animation-duration: 1s;
	animation-fill-mode: both;
}
@keyframes tub_on{
	0%{
		color: #fff;
	}
	100%{
		color: #000;
	}
}
@keyframes tub_off{
	100%{
		color: #fff;
	}
	0%{
		color: #000;
	}
}

#GouMai{
		position: absolute;
		right: 10px;
		top: 5px;
		
	}
#GouMai>img{
	position: absolute;
	right: 0;
	top: 6px;
}
	
	#TuBiao>img,
	#CaiDan>img{
		margin-top: 5px;	
		
	}

/*	二级菜单*/
	#ErJiCaiDan{
		overflow: hidden;
		height: 0px;
		width: 100%;
		background: #fff;
		position: fixed;
		top: 50px;
		z-index: 3;
	}
	#ErJiCaiDan>div{
		position: relative;
		overflow: hidden;
		height: 0px;
		width: 100%;
/*		border: 1px solid #000;*/
	}


	#ErJiCaiDan>div>div>a{
		margin-left: 10px;
		font-size: 15px;
	}
#ErJiCaiDan>div>div>img{
	position: absolute;
	right: 15px;
	top: auto;
}
#ErJiCaiDan>div>div:nth-child(1){
	display: flex;
	align-items: center;
}
#JianTou_1,
#JianTou_2,
#JianTou_3{
	height: 10px;
	width: 10px;
}
.JianTou_on{
	animation-name: JianTou_on;
	animation-duration: 0.4s;
	animation-fill-mode: both;
}
.JianTou_off{
	animation-name: JianTou_off;
	animation-duration: 0.4s;
	animation-fill-mode: both;
}
@keyframes JianTou_on{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(180deg);
	}
}
@keyframes JianTou_off{
	100%{
		transform: rotate(0deg);
	}
	0%{
		transform: rotate(180deg);
	}
}
/*	三级菜单*/
.SanJji_Xuanxiang{
	width: 100%;
/*	border: 1px solid #000;*/
}
#SanjiButton_1,
#SanjiButton_2,
#SanjiButton_3{
	display: flex;
	align-items: center;
	height: 60px;
}
.SanJji_Xuanxiang>div{
/*	position: relative;*/
	display: block;
	align-items: center;
	width: 100%;
	height: 40px;
}
.SanJji_Xuanxiang>div>div{
	width: auto;
	height: 13px;
	margin-bottom: 0;
	margin-left: 20px;
}
.SanJji_Xuanxiang>div>div>h{
	top: 5px;
	height: 30px;
	width: 100%;
/*	position: relative;*/
	
	left: 22px;
	font-size: 14px;
}
.SanJji_Xuanxiang>div>a{
/*	position: absolute;*/
	font-size: 6px;
	margin-top: 0;
	margin-left: 22px;
}
	/*主体*/
	.bbody{
		position: relative;
		width: 100%;
		
	}
	#Lunbotu{
		position: relative;
		height: 600px;
	}
	#body_img{
		height: 600px;	
	}
	#body_img>img{
		position: absolute;
		top: 0;
		
		/* pointer-events: none; */
		opacity: 0;
		width: 100%;
		z-index: -1;
	}
/*主体文字     就是花里胡哨那段*/	

	#body_text{
	position: absolute;
		width: 100%;
		top: 100px;

	}
	#body_text>a{
		display: flex;
		justify-content: center;
		z-index: 0;

	}

	.body_text_1{
		top: 20px;
		font-size: 15px;
		color: rgba(232,227,228,1.00);
		animation-name: BOTY_Tett1;
		animation-duration: 1s;
		animation-fill-mode:both;
	
	}
	.body_text_2{	
		top: 25px;
		font-size: 35px;
		color: aqua;
		animation-name: BOTY_Tett1;
		animation-duration: 0.7s;
		animation-delay: 0.2s;
		animation-fill-mode:both;
	
	}
	.body_text_3{	
		top: 80px;
		font-size: 18px;
		color: aqua;
		animation-name: BOTY_Tett1;
		animation-duration: 0.7s;
		animation-delay: 0.4s;
		animation-fill-mode:both;
	
	}
	
	.body_text_1s{
		top: 20px;
		font-size: 15px;
		color: rgba(232,227,228,1.00);
		animation-name: BOTY_Tett1s;
		animation-duration: 1s;
		animation-fill-mode:both;
	
	}
	.body_text_2s{	
		top: 25px;
		font-size: 35px;
		color: aqua;
		animation-name: BOTY_Tett1s;
		animation-duration: 0.7s;
		animation-delay: 0.2s;
		animation-fill-mode:both;
	
	}
	.body_text_3s{	
		top: 80px;
		font-size: 18px;
		/* color: white; */
		color: aqua;
		animation-name: BOTY_Tett1s;
		animation-duration: 0.7s;
		animation-delay: 0.4s;
		animation-fill-mode:both;
	
	}
	#body_suoying{
		z-index: 5;
		width: 100%;
		display: flex;
		justify-content: center;
		position: absolute;
		bottom: 50px;
	}
	#body_suoying>div{
		height: 3px;
		width: 20px;
		margin: 2px;
		background-color: #FFFFFF;
		opacity: 0.5;
		border-radius: 1px;
	}
	
/*了解更多和购买的样式*/
	#body_goumai>div{
		display: flex;
		height: 35px;
		width: 130px;
		border: 1.5px solid #fff;
		border-radius: 20px;
		margin: 10px;
	}
	.GouMai_div_1{
		display: flex;
		margin: 20px;
		justify-content: center;
		animation-name: BOTY_Tett1;
		animation-duration: 0.7s;
		animation-delay: 0.7s;
		animation-fill-mode: both;		
		
	}
	.GouMai_div_2{
		display: flex;
		margin: 20px;
		justify-content: center;
		animation-name: BOTY_Tett1s;
		animation-duration: 0.7s;
		animation-delay: 0.7s;
		animation-fill-mode: both;		
		
	}
	#body_goumai{

	}

	#body_goumai>div>a{
		text-decoration: none;
		margin: auto;
		font-size: 15px;
		color: white;
		
	}
@keyframes BOTY_Tett1{
	0%{
		transform: translateY(-100px);
		opacity:0;	
	}
	100%{
		transform: translateY(20px);
		opacity:1;
	}
}
@keyframes BOTY_Tett1s{
	0%{
		transform: translateY(-100px);
		opacity:0;	
	}
	100%{
		transform: translateY(20px);
		opacity:1;
	}
}


	#Jieshao>img{
		width: 100%;
	}
	
	/*底部*/
	.jiao{
			
		
	}