/* 首页顶部导航 */

*{
	margin: 0px;
	padding: 0px;
}
body,html{
	width: 100%;
	font-size: 1px;
}

ul{
	list-style: none;
}
a{
    text-decoration: none;
}
.headNav{
	width: 100%;
	height: 64rem;
	background-color: rgba(20, 20, 20, 0);
	/* backdrop-filter: blur(10px); */
	position: fixed;
	padding-top: 6px;
	/* border-bottom: 1px solid rgba(110, 110, 110, 0.3); */
	z-index: 101;
	transition: 0.2s;
}
.headNav_cn{
	width: 1280rem;
	height: 100%;
	margin: 0px auto;
	display: flex;
	align-items: center;
	position: relative;
}
.logo_area{
	height: 100%;
	display: flex;
	align-items: center;
	cursor: pointer;
}
.logo_area>img{
	display: block;
	height: 32px;
}
.navList{
	display: flex;
	align-items: center;
	height: 100%;
	margin-left: 30rem;
	position: relative;
}
.navList>li{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16rem;
	color: #ffffff;
	/* padding: 0rem 34rem; */
	padding: 0rem 4rem;
	/* padding-top: 8rem; */
	height: 100%;
	cursor: pointer;
	transition: 0.2s;
	position: relative;
	letter-spacing: 1rem;
	z-index: 10;
}
.navList>li p{
	transition: 0.2s;
	color: #ffffff;
}
.navList>li:hover>a{
	/* color:#f4b200; */
	color: rgba(255,255,255,0.7);
}
.navLi_active{
	color: #f4b200 !important;
}
.nav_sub{
	position: absolute;
	/* background-color:rgba(30, 30, 30, 1); */
	/* background-color:#000; */
	/* background-color:#1e1e1e; */
	background-color:rgba(24,24,24,0.9);
	    backdrop-filter: blur(10px);
		box-shadow: 0px 3px 10px rgba(0, 0, 0,0.5);
	/* background-color:#fff; */
	/* width: 242rem; */
	/* width: 270rem; */
	width: 170rem;
	top: 90rem;
	padding:14rem 0px;
	border-radius: 6rem;
	opacity: 0;
	visibility:hidden;
	transition:all 0.2s;
}
.nav_sub2{
	width: 130rem;
}
.nav_subLong{
	width: 242rem;
}
.navList>li:hover .nav_sub{
	opacity: 1;
	visibility: inherit;
	/* top: 68rem; */
	top: 64rem;
}
.navList a{
	color: #ffffff;
	/* width: 100%; */
	/* height: 100%; */
	padding: 12rem 24rem;
	display: block;
	box-sizing: border-box;
}
.nav_sub>li{
	/* padding: 12rem 30rem; */
	min-width: 120rem;
	box-sizing: border-box;
	/* background-color:rgba(30, 30, 30, 1); */
	font-size: 14px;
	transition: 0.2s;
	/* text-align: center; */
	/* text-align: left; */
}
.nav_sub>li a{
	transition: 0.2s;
	color: #ffffff;
	/* color: #333333; */
	    /* width: 100%; */
	    /* height: 100%; */
	    padding: 12rem 24rem;
	    /* display: block; */
	    box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		align-items: center;
}
.nav_sub>li>a>span{
	width: 24px;
	height: 24px;
	background-color: #2e2e2e;
	/* display: block; */
	border-radius: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 16rem;
}
.nav_sub>li:hover{
	/* background-color:rgba(10, 10, 10, 1); */
	/* background-color:#eee; */
	background-color: #000;
}
.nav_sub>li:hover a{
	color: #f4b200;
}
.language_area{
	display: flex;
	align-items: center;
	height: 100%;
	/* padding-top: 8rem; */
	position: absolute;
	right: 0px;
}
.nav_sub>li:hover span{
	/* background-color: #2a2a2a; */
}
.language_area>span{
	font-size: 16rem;
	color: rgba(255, 255, 255, 0.5);
}
.language_name{
	display: flex;
	align-items: center;
	cursor: pointer;
	position: relative;
	height: 100%;
}
.language_name .nav_sub{
	left: -40px;
}
.language_name:hover .nav_sub{
	opacity: 1;
	visibility: inherit;
	top: 54rem;
}
.language_name img{
	transition: 0.2s;
}
.language_name:hover img{
	transform: rotate(180deg);
}
/* .nav_sub>li{
	font-size: 14px;
	color: #ffffff;
} */
.language_name>p{
	color: #ffffff;
	font-size: 16rem;
	margin-right: 8rem;
}
.nav_bar{
	display: block;
	height: 4px;
	width:0px;
	background-color:#f4b200;
	position: absolute;
	bottom: 0px;
	left: 0px;
	transition: 0.4s;
	z-index: 0;
}
.navList>li:nth-child(1):hover ~ .nav_bar{
	width: 48px;
	left: 28px;
}
.navList>li:nth-child(2):hover ~ .nav_bar{
	width: 56px;
	left: 134px;
}
.navList>li:nth-child(3):hover ~ .nav_bar{
	width: 80px;
	left: 240px;
}
.navList>li:nth-child(4):hover ~ .nav_bar{
	width: 80px;
	left: 370px;
}
.navList>li:nth-child(5):hover ~ .nav_bar{
	width: 84px;
	left: 500px;
}

.mask{
	width: 100vw;
	height: 100vh;
	background-color: rgba(255, 255, 255, 0.3);
	position: fixed;
	top: 70rem;
	left: 0px;
	z-index: 1;
	backdrop-filter: blur(5px);
	display: none;
}