html{
	height: 150vh;
	min-height: 100vh;
}
html body{
	height: 100%;
	margin: 0;
}

.part1{
	width: 100vw;
	height: 100vh;
/* 	background-image: url(../img/first.jpg);
	background-size: cover; */
	padding: 0%;
	margin: 0%;
/* 	background-attachment: fixed; */
	position: relative;
	overflow: hidden;
}

.base{
	width: 100vw;
	height: 130vh;
/* 	background-attachment: fixed; */
	z-index: -3;
	position: absolute;
}

.top{
	position: fixed;
	width: 100vw;
	height: 6vh;
	background: rgba(0, 0, 0, 0.3);
	overflow: hidden;
	z-index: 3;
}

.top img{
	width: 170px;
	height: 6vh;
	margin-left: 2.5mm;
	float: left;
}

.top ul{
	width: 70vw;
	height: 6vh;
	float: left;
	padding: 0%;
	margin: 0%;

}

.top ul li{
	width: 115px;
	height: 6vh;
	float: left;
	font-size: 1.9vmin;
	text-align: center;
	color: gainsboro;
	list-style: none;
	line-height: 6vh;
	filter: brightness(0.85);
	margin-left: 10px;
	cursor: pointer;
}

.top ul li:hover{
	transition: all 0.25s ease-in-out;
	text-shadow: 0px 0px 0px goldenrod;
	font-size: 2.2vmin;
	background-color: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
    box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}

.top .section{
	position: relative;
	width: 12vmin;
	height: 6vh;
	display: flex;
	float: right;
	align-items: center;
	justify-content: right;
	overflow: hidden;
	transform: translateX(-20px);
}

.top .section .circle{
	position: relative;
	background-color: azure;
	height: 1rem;
	width: 1rem;
	border-radius: 100%;
	filter: brightness(0.8);
	
}

.top .section:hover .circle{
	transition: all 0.4s ease-in-out;
	background-color: transparent;
	transform: scale(20);
}

.top .section .login{
	position: relative;
	float: right;
	font-size: 1.6vmin;
	text-align: center;
	line-height: 6vh;
	color: azure;
	background: transparent;
	filter: brightness(0.70);
	overflow: hidden;
	white-space: nowrap;
}

.top .section:hover .login{
	color: powderblue;
	transition: all 0.25s ease-in-out;
	transform: translate(-1vmin);
}

.wordcontainer{
	width: 450px;
	height: 250px;
	background:transparent;
/* 	border: 2px solid rgba(45, 54, 65, 0.75);
	box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75); */
	position: absolute;
	top: 250px;
	left: 50%;
	margin-left: -225px;
	text-align: center;
	transform: translateZ(10px);
}

.wordcontainer .words{
	width: 90%;
	height: 20%;
	font-size: 180%;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	color: gray;
	text-align: center;
	text-shadow: 1px 1px 1px black;
	position: relative;
	left: 5%;
	top: 5%;
	z-index: 2;
}

.wordcontainer .notice{
	width: 100%;
	height: 40%;
	position: absolute;
	background-image: url(../img/star.png);
	background-size: cover;
	border-bottom-left-radius: 20%;
	border-top-left-radius: 20%;
	border-bottom-right-radius: 20%;
	border-top-right-radius: 20%;
	box-shadow: 4px 4px 25px 0 rgba(45, 54, 65, 0.75) ;
	border-color: azure;
	overflow: hidden;
	filter: opacity(0.3);
/* 	background: rgba(0, 0, 0, 0.3); */
}

.wordcontainer .notice:hover{
/*    background-color: black; */
/* 	background-image: url(../img/star.png); 不能渐变*/
/* 	background-size: cover; */
	filter: opacity(1);
	transition: 0.9s;
}
.wordcontainer .notice:active{
	animation: ani 1s;
}

.wordcontainer .notice img{
	position: relative;
	width: 0px;
	float: right;
	top: 13px;
}

.wordcontainer .notice:hover img{
	transition: all 0.4s ease-in-out;
	width: 100px;
/* 	animation: rota 1s infinite; */
}

.wordcontainer .notice b{
	font-size: 160%;
	position: relative;
	color: aqua;
	filter: brightness(0.4);
	top: 30px;
	left: 13px;
}

.wordcontainer .notice:hover b{
	transition: all 1s ease-in-out;
	color: azure;
}

.uu{
	color: #4e4376;
	filter: brightness(0.5);
	transform: translateY(-10px);
}

.logo1 img{
	position: relative;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	transform: translate(-150px) translateY(128px);
	border: 2px solid rgba(45, 54, 65, 0.75);
	box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
	z-index: -1;
}

.logo2 img{
	position: relative;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	transform: translate(0px) translateY(90px);
	border: 2px solid rgba(45, 54, 65, 0.75);
	box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
	z-index: -1;
}

.logo3 img{
	position: relative;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	transform: translate(150px) translateY(50px);
	border: 2px solid rgba(45, 54, 65, 0.75);
	box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
	z-index: -1;
}

.logo1 img:hover{
	filter: brightness(1.5);
}
.logo2 img:hover{
	filter: brightness(1.5);
}
.logo3 img:hover{
	filter: brightness(1.5);
}

@keyframes ani{
	10%{
		transform: translate(15px) translateY(15px);
	}
	20%{
		transform: translate(0px) translateY(-30px);
	}
	30%{
		transform: translate(-30px) translateY(30px);
	}
	40%{
		transform: translate(0px) translateY(-30px);
	}
	50%{
		transform: translate(30px) translateY(30px);
	}
	60%{
		transform: translate(0px) translateY(-30px);
	}
	70%{
		transform: translate(-30px) translateY(30px);
	}
	80%{
		transform: translate(0px) translateY(-30px);
	}
	90%{
		transform: translate(15px) translateY(15px);
	}
}

.other{
	width: 100vw;
	height: 50vh;
	background-image: url(../img/earth.jpg);
	background-size: cover;
	overflow: hidden;
}

.other .earth{
	width: 100vw;
	height: 100px;
	background:transparent;
	justify-content: center;
	display: flex;
	color: azure;
	filter: brightness(0.3);
	font-weight: 800;
	line-height: 130px;
	font-size: 130%;
}

.clockcontainer{
	width: 15vmin;
	height: 6vh;
	float: right;
	transform: translateX(-20px);
}
.clock{
	font-size: 2vmin;
	color: beige;
	text-shadow: -3px 0px 5px #FFEB3B, 0px 0px 2px #FFEB3B;
	line-height: 6vh;
}
.clock:hover{
	color: burlywood;
	transition: 0.6s;
}