@charset "utf-8";
/* CSS Document */
/* 大屏幕 大桌面显示器 */
@media only screen and (max-width: 1920px) {
	.foot-middle {
		left: 30%;
	}
	.foot-middle img {
		width: 900px;
		height: auto;
	}
}

@media only screen and (max-width: 1600px) {
	/*index*/
	.meteorite {
		top: 50px;
		left: 0;
	}
	.jellyfish {
		right: 50px;
		top: 100px;
	}
	.ufo {
		top: 160px;
		left: 230px;
	}
	.balloons {
		bottom: 150px;
		left: 50px;
	}
	.satellite {
		top: 50px;
		right: -50px;
	}
	.rockets {
		bottom: 200px;
		right: 20px;
	}
	.whale {
		bottom: 10px;
		right: 350px;
	}
	.bubble {
		left: 10px;
		top: 0;
	}
	.octopus {
		bottom: 100px;
		left: 10px;
	}
	.bubble2 {
		right: 0;
		bottom: 50px;
	}
	.footer-bubble {
		bottom: 300px;
		left: 10px;
	}
	.clouds-left img {
		width: 800px;
		height: auto;
	}
	.clouds-right img {
		width: 300px;
		height: auto;
	}
	.foot-middle {
		display: none;
	}
}
/* 中等屏幕 桌面显示器 */
@media only screen and (max-width: 1300px) {
	/*index*/
	.ufo,.rockets,.bubble2,.login-right {
		display: none;
	}
	.whale {
		right: 12%;
	}
	.satellite {
		right: 0;
	}
	.bubble {
		left: -100px;
	}
	.jellyfish {
		right: -70px;
	}
	.octopus {
		left: -120px;
	}
	.footer-bubble {
		left: -20px;
	}
	.fish-left {
		right: 50px;
		bottom: 800px;
	}
	.fish-right {
		right: 0;
		bottom: 500px;
	}
	.foot-ship {
		display: none;
	}
}
/* 小屏幕 平板 */
@media only screen and (max-width: 992px) {
	/*index*/
	.astronauts {
		margin-left: 0;
	}
	.inner {
		padding: 0 10px;
	}
	.menu,.features,.feedback {
		width: 100%;
	}
	.contact {
		padding: 0;
		width: 700px;
		margin-left: auto;
		margin-right: auto;
	}
	.scan {
		float: left;
		margin-left: 50px;
	}
	.login-box {
		width: 100%;
		overflow: hidden;
	}
	.meteorite,.login-left {
		display: none;
	}
	.login {
		width: 392px;
	}
	.bubble {
		display: none;
	}
	.jellyfish {
		display: none;
	}
	.octopus {
		left: 300px;
		bottom: 40px;
	}
	.octopus img {
		width: 150px;
		height: auto;
	}
	.feedback-title {
		margin-bottom: 20px;
	}
	.feedback-con {
		margin: 20px 0;
		width: 100%;
	}
	.quotes-right {
		bottom: 0;
	}
	.fish-left,.fish-right,.footer-bubble {
		display: none;
	}
	.clouds-left img {
		width: 500px;
		height: auto;
	}
	.clouds-right img {
		width: 200px;
		height: auto;
	}
	.foot-left {
		display: none;
	}
	.foot-ship {
		display: inline-block;
		left: 0;
	}
}
/* 超小屏幕 手机 */
@media only screen and (max-width: 800px) {
	/*index*/
	.top {
		width: 100%;
		height: 618px;
		background-color: #0A1C32;;
	}
	.satellite {
		right: 0px;
		top: 0px;
		display: inline-block;
	}
	.balloons,.astronauts,.login-left,.login-right,.us {
		display: none;
	}
	.inner {
		padding: 0 10px;
		overflow: hidden;
	}
	.whale {
		bottom: 0;
	}
	.menu,.nav,.nav li,.login-box,.login,.features,.feedback,.scan,.contact
		{
		width: 100%;
	}
	.contact {
		margin-bottom: 370px;
	}
	.nav li a {
		display: inline-block;
		width: 100%;
	}
	.nav li .fun-games {
		position: inherit;
		top: 0;
		left: 0;
		width: 100%;
	}
	.nav li .fun-games li {
		padding: 0;
		line-height: 40px;
		height: 40px;
		border: none;
		width: 100%;
		line-height: 40px;
	}
	.nav li .fun-games li a {
		color: #fff;
		width: 100%;
		font-size: 15px;
	}
	.login-box {
		margin-top: 60px;
	}
	.login-con {
		width: 100%;
		padding: 10px 20px;
		margin: 0 auto;
		padding: 30px 20px;
	}
	.user input,.password input,.name input,.email input {
		width: 100%;
		height: 40px;
		padding-left: 10px;
	}
	.verify input {
		width: 120px;
	}
	.login-btn {
		width: 100%;
		margin: 10px 0;
	}
	.jellyfish {
		top: 600px;
		right: -40px;
		display: inline-block;
	}
	.jellyfish img {
		width: 130px;
		height: auto;
	}
	.bubble {
		top: 200px;
		left: -120px;
		display: inline-block;
	}
	.octopus {
		left: 80px;
		bottom: 30px;
	}
	.octopus img {
		width: 100px;
		height: auto;
	}
	.gotop {
		right: 0;
		bottom: 0;
		height: 350px;
	}
	.foot-bg {
		height: 200px;
	}
	.gotop a img {
		width: 200px;
		height: auto;
		bottom: 200px;
	}
	.fish {
		width: 100%;
	}
	.fish img {
		width: 300px;
		height: auto;
	}
	.avatar,.avatar img {
		width: 50px;
		height: 50px;
		border-radius: 10px;
		margin-right: 10px;
	}
	.source {
		margin-bottom: 40px;
	}
	.comments,.source {
		font-size: 14px;
	}
	.scan {
		text-align: center;
		margin: 0;
	}
	.e-mail img,.qq-code img {
		width: 67px;
		height: 67px;
	}
	.e-mail span,.qq-code span {
		display: block;
	}
	.menu {
		padding: 15px 0;
		border-bottom: 1px solid #303134;
		height: 95px;
	}
	.logo {
		margin-left: 10px;
	}
	.footer-bubble {
		bottom: 300px;
		left: -20px;
		display: inline-block;
	}
	.footer-bubble img {
		width: 100px;
	}
	.fish-left {
		left: 0;
		bottom: 900px;
		display: inline-block;
	}
	.fish-right {
		right: 0;
		bottom: 650px;
		display: inline-block;
	}
	.user,.password {
		margin-bottom: 10px;
	}
	.remember {
		margin-bottom: 10px;
	}
	.caret {
		float: right;
		margin-top: 20px;
	}
	.clouds-left,.clouds-right {
		display: none;
	}
	.foot-right img {
		width: 350px;
		height: auto;
	}
	.foot-ship {
		display: none;
	}
	/*nav 菜单*/
	.nav li {
		width: 100%;
		line-height: 50px;
		text-align: left;
		background-color: #030c1a;
		padding: 0 20px;
		border-bottom: 1px solid #303134;
	}
	.nav {
		background: #F3F3F3;
		overflow: hidden;
		margin-top: 17px;
		font-size: 16px;
		display: block;
		list-style: none;
		height: auto;
	}
	.js .nav {
		clip: rect(0, 0, 0, 0);
		max-height: 0;
		position: absolute;
		display: table;
	}
	.nav.opened {
		max-height: 9999px;
	}
	.disable-pointer-events {
		pointer-events: none !important;
	}
	/*导航图标*/
	#nav-toggle {
		position: fixed;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		text-decoration: none;
		text-indent: -999px;
		position: relative;
		overflow: hidden;
		width: 50px;
		height: 50px;
		float: right;
		margin-top: 10px;
		margin-right: 10px;
	}
	#nav-toggle:before {
		color: #fff; /* Edit this to change the icon color */
		font-family: "responsivenav", sans-serif;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		font-size: 44px;
		text-transform: none;
		position: absolute;
		content: "≡";
		text-indent: 0;
		text-align: center;
		line-height: 50px;
		speak: none;
		width: 100%;
		font-weight: bold;
		top: 0;
		left: 0;
	}
}

@media screen and (min-width: 800px) {
	.js .nav {
		position: relative;
	}
	.js .nav.closed {
		max-height: none;
		line-height: 65px;
	}
	#nav-toggle {
		display: none;
	}
}

@media only screen and (max-width: 800px) {
	.top {
		background-image: none;
	}
	html{
		background-color: #0A1C32;
	}
}