@charset "utf-8";
/**************** header ****************/
/*  */
.x-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	width: 100%;
	padding: 12px 0;
	line-height: 40px;
	background-color: #fff;
	border-bottom: 1px solid #eee;
}

@media (max-width:768px) {
	/* .x-header {
		padding: 5px 0;
	} */
}

.x-logo a {
	display: inline-block;
	height: 40px;
	text-align: center;
}
.x-logo a img{max-width: 100%; max-height: 100%;}


@media(max-width:640px){
	.x-logo a img{height: 35px;}
}

/* nav */
.x-nav li a {
	position: relative;
	z-index: 1;
	display: block;
	padding: 0 10px;
	color: var(--mColor);
}

.x-nav li.on a,
.x-nav li a:hover {
	color: var(--nColor);
}

@media (max-width:1030px) {

	.x-nav ul {
		display: none;
	}

	.x-nav li {
		padding: 0 5px;
	}

	.x-nav li a {
		padding: 0 10px;
	}

}


/* open */
.nav-bar {
	width: 30px;
	height: 30px;
	padding: 8px 6px;
	background-color: #eee;
	cursor: pointer;
	display: none;
}

.nav-bar span {
	display: block;
	width: 18px;
	height: 1px;
	background-color: #666;
}

.nav-bar span:nth-child(2) {
	position: relative;
	margin: 5px 0;
}


@media(max-width: 1030px) {
	.nav-bar {
		display: block;
	}
}


.nav-bar-on span:first-child ,
.nav-bar-on span:last-child {width: 0;}
.nav-bar-on span:nth-child(2){ transform: rotate(-45deg);}
.nav-bar-on span:nth-child(2):before {position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%; height: 1px; background-color:#666;transform: rotate(90deg);}


/* mobile-nav */
.mobile-nav {
	position: fixed;
	top: 51px;
	left: 0;
	z-index: 78;
	width: 100%;
	height: auto;
	background-color: #fff;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-120px);
	transition: all .3s;
	box-shadow: 0 0 15px rgba(0,0,0,.2);
}

/* menu */
.mobile-menu {
	height: 100%;
	padding: 15px;
	display: flex;
	align-items: center;
}

.mobile-menu ul {
	display: block;
	margin: 0 auto;
	text-align: center;
}

.mobile-menu ul li {
	margin-bottom: 5px;
	overflow: hidden;
}

.mobile-menu ul li a {
	display: block;
	color: #666;
	font-size: 16px;
	line-height: 26px;
}

.mobile-menu ul li a:hover {
	color: var(--mColor);
}

/* close */
/* .close-btn {
	position: fixed;
	top: 15px;
	right: 15px;
	width: 35px;
	height: 35px;
}

.close-btn span {
	position: absolute;
	top: 17px;
	left: 6px;
	width: 25px;
	height: 1px;
	background-color: #000;
}

.close-btn span:first-child {
	transform: rotate(45deg);
}

.close-btn span:last-child {
	transform: rotate(-45deg);
} */

/* onshow */
.show-mobile {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.show-mobile .mobile-menu ul li a {
	animation: xssss 1s 1;
}

@keyframes xssss {
	from {
		transform: translateY(56px);
	}
}














/*  */
.x-footer{padding: 30px 0; background: #507480; color: #fff;}

.x-footer-link{line-height: 30px;}
.x-footer-link a{display: inline-block; margin-right: 8px; color: #fff;}
.x-footer-link a:hover{color: #ADA400;}

.x-footer-share{font-size: 0;}
.x-footer-share a{position: relative; display: inline-block; margin: 0 8px;}
.x-footer-share .qrcode{position: absolute;bottom: 35px; left: 0; visibility: hidden; opacity: 0; transform: translateY(10px); transition: .3s;}
.x-footer-share a:hover .qrcode{visibility: visible; opacity: 1; transform: translateY(0);}

@media (max-width:768px) {
	.x-footer .flex{flex-direction: column;margin-bottom: 30px;}

	.x-footer-link{text-align: center;}

	.x-footer-share{padding: 20px 0;}
}