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



/*--- Header ---*/
.Header-wrapper {
	z-index: 99;
	width: 100%;
	height: 86px;
	margin: 0px auto;
	position: fixed;
	top: 0px;
	left: 0;
	background-color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	transition: background .4s ease;background: rgba(255,255,255,1);user-select: none;box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.1);
	
}

.Header-wrapper .Header-cl {
	position: relative;
}

.header-container {
	width: 1440px;
	padding: 0;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	z-index: 999;
}

.header-container.act {
	box-shadow: 0 0 8px #666;
}

.header-container.act .H-nav .Hnav-menu {
	color: #333;
	border-bottom: 2px solid #D80C1E;
}

.header-container.act .H-nav>li.cur .Hnav-menu {
	color: #333;
	border-bottom: 2px solid #D80C1E;
}

.header-container.act .H-logo img {
	display: none;
}

.header-container.act .H-logo img.rollover {
	display: inline-block;
}

.header-container.act .H-srch .Hsrch-menu {
	background: url(../image/icon-sq2.png) no-repeat center center;
}

.header-container.act .Huser-menu {
	background: url(../image/icon-em2.png) no-repeat center center;
}

/*logo*/
.H-logo {
	height: 70px;
	line-height: 70px;
	font-size: 0px;
	float: left;
	position: relative;
	overflow: hidden;
	z-index: 5;
}

.H-logo img {
	height: 50px;
	line-height: 50px;
}


.H-logo img.rollover {
	display: none;
}

.H-action {
	float: right;
	margin: 0 1.16667% 0 0;
}

.H-action .split {
	display: block;
	width: 1px;
	height: 16px;
	background: rgba(255, 255, 255, .5);
	float: left;
	margin: 27px 0 0;
}

.Header-wrapper.Header-searching .H-logo img {
	display: none;
}

.Header-wrapper.Header-searching .H-logo img.rollover {
	display: inline-block;
}

/*Hnav*/
.H-nav {
}

.H-nav>li {
	padding: 0 35px;
	float: left;
}

.H-nav .Hnav-menu {
	display: block;
	height: 86px;
	line-height: 86px;
	font-size: 16px;
	color: #333;
	position: relative;
}

.Hnav-menu i {
	display: block;
	width: 50px;
	height: 50px;
	background: url(../image/icon-dd1.png) no-repeat center center / 14px auto;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 2;
	display: none;
}

.Hnav-menu.cur i {
	transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
}

.Hnav-sub {
	padding: 40px 0 86px;
	width: 100%;
	background: #fff;
	position: absolute;
	top: 86px;
	left: 0px;
	display: none;
	box-shadow: 0 24px 24px 0px rgba(0, 0, 0, 0.1);
	border-top: 1px solid #eee;
}

.HnavSub-list {
	width: 100%;
	padding: 0 5%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 50px;
}

.HnavSub-list li {
	width: calc(20% - 40px);
}

.HnavSub-list li a {
	display: block;
	height: 35px;
	line-height: 35px;
	text-align: left;
	color: #666666;
	background: url(../image/icon_sj.png) no-repeat left center;
	padding-left: 20px;
	border-bottom: 1px solid #eee;
	position: relative;
}

.H-nav>li.cur .Hnav-menu {
	color: #333;
}
.H-nav>li.cur .Hnav-menu::after {
	content: '';
	width: 100%;
	height: 2px;
	background-color: #2F3F84;
	position: absolute;
	left: 0;
	bottom: 20px;
}
.H-nav>li:hover .Hnav-menu::after {
	content: '';
	width: 100%;
	height: 2px;
	background-color: #2F3F84;
	position: absolute;
	left: 0;
	bottom: 20px;
}

.H-nav>li.cur a::before {
	border-bottom: 2px solid #2F3F84;
}

.HnavSub-list li.cur a,
.HnavSub-list li a:hover {
	color: #2F3F84;
}
.H-nav>li.tel {
	height: 86px;
	line-height: 86px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.H-nav>li.tel i {
	display: inline-block;
	width: 24px;
	height: 24px;
	background: url(../image/top-tel.png);
	background-size: 100% 100%;
}
.H-nav>li.tel span {
	display: inline-block;
}
@media all and (min-width:980px) {
	
	
	.H-nav>li:hover .Hnav-sub {
		display: block;
		animation: fadeInDown .6s ease-in-out;
		-webkit-animation: fadeInDown .6s ease-in-out;
	}
}
@media all and (max-width:1000px){
	
	.H-nav>li {
		padding: 0 20px;
	}
}


/*手机端*/
.Hmenu-btn {
	width: 25px;
	height: 50px;
	padding: 24px 0 0;
	cursor: pointer;
	display: none;
	float: right;
	margin: 0 0 0 10px;
}

.Hmenu-btn a {
	display: block;
	width: 100%;
	height: 2px;
	background-color: #999;
	position: relative;
}

.Hmenu-btn a:before,
.Hmenu-btn a:after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background-color: #999;
	position: absolute;
	left: 0px;
}

.Hmenu-btn a:before {
	top: -8px;
}

.Hmenu-btn a:after {
	bottom: -8px;
}

.Hmenu-btn.cur a {
	-moz-animation: buttonAnimation 0.3s ease forwards;
	-webkit-animation: buttonAnimation 0.3s ease forwards;
	animation: buttonAnimation 0.3s ease forwards;
}

.Hmenu-btn.cur a:before {
	top: -10px;
	-moz-animation: buttonAnimationBefore 0.3s ease forwards;
	-webkit-animation: buttonAnimationBefore 0.3s ease forwards;
	animation: buttonAnimationBefore 0.3s ease forwards;
}

.Hmenu-btn.cur a:after {
	bottom: -10px;
	-moz-animation: buttonAnimationAfter 0.3s ease forwards;
	-webkit-animation: buttonAnimationAfter 0.3s ease forwards;
	animation: buttonAnimationAfter 0.3s ease forwards;
}

@-moz-keyframes buttonAnimationBefore {
	0% {
		-moz-transform: translateY(0px) rotate(0);
		transform: translateY(0px) rotate(0);
	}

	50% {
		-moz-transform: translateY(10px) rotate(0);
		transform: translateY(10px) rotate(0);
	}

	100% {
		-moz-transform: translateY(10px) rotate(45deg);
		transform: translateY(10px) rotate(45deg);
	}
}

@-webkit-keyframes buttonAnimationBefore {
	0% {
		-webkit-transform: translateY(0px) rotate(0);
		transform: translateY(0px) rotate(0);
	}

	50% {
		-webkit-transform: translateY(10px) rotate(0);
		transform: translateY(10px) rotate(0);
	}

	100% {
		-webkit-transform: translateY(10px) rotate(45deg);
		transform: translateY(10px) rotate(45deg);
	}
}

@keyframes buttonAnimationBefore {
	0% {
		-moz-transform: translateY(0px) rotate(0);
		-ms-transform: translateY(0px) rotate(0);
		-webkit-transform: translateY(0px) rotate(0);
		transform: translateY(0px) rotate(0);
	}

	50% {
		-moz-transform: translateY(10px) rotate(0);
		-ms-transform: translateY(10px) rotate(0);
		-webkit-transform: translateY(10px) rotate(0);
		transform: translateY(10px) rotate(0);
	}

	100% {
		-moz-transform: translateY(10px) rotate(45deg);
		-ms-transform: translateY(10px) rotate(45deg);
		-webkit-transform: translateY(10px) rotate(45deg);
		transform: translateY(10px) rotate(45deg);
	}
}

@-moz-keyframes buttonAnimationAfter {
	0% {
		-moz-transform: translateY(0) rotate(0);
		transform: translateY(0) rotate(0);
	}

	50% {
		-moz-transform: translateY(-10px) rotate(0);
		transform: translateY(-10px) rotate(0);
	}

	100% {
		-moz-transform: translateY(-10px) rotate(-45deg);
		transform: translateY(-10px) rotate(-45deg);
	}
}

@-webkit-keyframes buttonAnimationAfter {
	0% {
		-webkit-transform: translateY(0) rotate(0);
		transform: translateY(0) rotate(0);
	}

	50% {
		-webkit-transform: translateY(-10px) rotate(0);
		transform: translateY(-10px) rotate(0);
	}

	100% {
		-webkit-transform: translateY(-10px) rotate(-45deg);
		transform: translateY(-10px) rotate(-45deg);
	}
}

@keyframes buttonAnimationAfter {
	0% {
		-moz-transform: translateY(0) rotate(0);
		-ms-transform: translateY(0) rotate(0);
		-webkit-transform: translateY(0) rotate(0);
		transform: translateY(0) rotate(0);
	}

	50% {
		-moz-transform: translateY(-10px) rotate(0);
		-ms-transform: translateY(-10px) rotate(0);
		-webkit-transform: translateY(-10px) rotate(0);
		transform: translateY(-10px) rotate(0);
	}

	100% {
		-moz-transform: translateY(-10px) rotate(-45deg);
		-ms-transform: translateY(-10px) rotate(-45deg);
		-webkit-transform: translateY(-10px) rotate(-45deg);
		transform: translateY(-10px) rotate(-45deg);
	}
}

@-moz-keyframes buttonAnimation {
	0% {
		background: #aaaaaa;
	}

	50% {
		background: rgba(255, 255, 255, 0);
	}

	100% {
		background: rgba(255, 255, 255, 0);
	}
}

@-webkit-keyframes buttonAnimation {
	0% {
		background: #aaaaaa;
	}

	50% {
		background: rgba(255, 255, 255, 0);
	}

	100% {
		background: rgba(255, 255, 255, 0);
	}
}

@keyframes buttonAnimation {
	0% {
		background: #aaaaaa;
	}

	50% {
		background: rgba(255, 255, 255, 0);
	}

	100% {
		background: rgba(255, 255, 255, 0);
	}
}

@media (max-width: 1599px) {
    .header-container,
	.contain {
        width: 100%;
        padding: 0 5%;
    }
}
@media (max-width: 1359px) {
    .header-container,
	.contain {
        width: 100%;
        padding: 0 5%;
    }
	.H-nav>li {
		padding: 0 20px;
	}
}

@media all and (max-width:980px) {

	/*web*/
	html {
		font-size: 50.1563px;
	}

	img {
		max-width: 100%;
	}

	#index-bnr {
		display: none;
	}

	#web-bnr {
		display: block;
	}

	/*-- Header --*/
	.H-logo,
	.H-logo {
		line-height: 50px;
	}

	.H-logo img {
		height: 30px;
	}
	
	.header-container {
		width: 100%;
		padding: 0 5%;
		height: 60px;
	}


	.H-nav {
		width: 100%;
		background: #fff;
		position: absolute;
		top: 50px;
		left: 0px;
		margin: 0px;
		float: none;
	}

	.H-nav>li {
		padding: 0px;
		border-bottom: 1px solid #ccc;
		float: none;
	}

	.H-nav .Hnav-menu {
		padding: 0 4%;
		height: 50px;
		line-height: 50px;
		color: #333;
		font-size: 14px;
	}
	.H-nav>li.cur .Hnav-menu {
		border-bottom: 0;
	}

	.Hnav-menu i {
		display: block;
	}

	.Hnav-sub {
		padding: 5px 0;
		position: relative;
		top: 0px;
	}

	.Hnav-sub .contain {
		padding: 0px;
	}

	.HnavSub-list {
		width: 100%;
		float: none;
	}

	.HnavSub-list li {
		width: 100%;
		padding: 0px;
		border: 0px;
	}

	.act .Hmenu-btn a {
		background: #999;
	}

	.act .Hmenu-btn a:after {
		background: #999;
	}

	.act .Hmenu-btn a::before {
		background: #999;
	}


	.Hmenu-btn.H-rMenu-btn {
		display: none;
	}

	.Hmenu-btn.Hmenu-web {
		display: block;
	}

	.H-nav {
		display: none;
	}

}

@media all and (max-width:980px) {

	html {
		font-size: 50.1563px;
	}

	img {
		max-width: 100%;
	}

	#index-bnr {
		display: none;
	}

	#web-bnr {
		display: block;
	}

	/*-- Header --*/
	.H-logo {
		height: 50px;
	}

	.H-logo {
		line-height: 50px;
	}

	.H-logo img {
		height: 36px;
	}

	.H-nav {
		width: 100%;
		background: #fff;
		position: absolute;
		top: 60px;
		left: 0px;
		margin: 0px;
		float: none;
		border-top: 1px solid #ccc;
		box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
    }

	.H-nav>li {
		padding: 0px;
		border-bottom: 1px solid #ccc;
		float: none;
	}

	.H-nav .Hnav-menu {
		padding: 0 4%;
		height: 50px;
		line-height: 50px;
		color: #333;
		font-size: 14px;
	}
	.H-nav>li.cur .Hnav-menu::after {
		display: none;
	}
	.H-nav>li:hover .Hnav-menu::after{
		display: none;
	}

	.Hnav-menu i {
		display: block;
	}

	.Hnav-sub {
		background-color: #fafafa;
		padding: 0;
		position: relative;
		top: 0px;
		box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.1);

	}
	.HnavSub-list {
		gap: 0;
	}

	.Hnav-sub .contain {
		padding: 0px;
	}

	.HnavSub-box,
	.HnavSub-img {
		display: none !important;
	}

	.HnavSub-list {
		width: 100%;
		float: none;
	}

	.HnavSub-list li {
		width: 100%;
		padding: 0px;
		border: 0px;
	}

	.HnavSub-list li a {
		height: 48px;
		line-height: 48px;
		text-align: left;
		color: #333;
		font-size: 13px;
	}

	.Head_xl {
		width: 100%;
	}

	.Head_xl dd {
		width: 100%;
		height: auto;
	}

	.Head_xl dd img {
		display: none;
	}

	.Head_xl dd span {
		position: static;
		color: #333;
		font-size: 14px;
		font-weight: normal;
		display: block;
		padding: 10px 4%;
		transform: translate(0, 0);
		text-align: left;
	}

	.Head_xl dd:nth-child(2n) {
		margin-left: 0px;
	}

	.Head_shop {
		display: none;
	}

	.H-action .split {
		margin: 17px 0 0;
	}

	.act .Hmenu-btn a {
		background: #999;
	}

	.act .Hmenu-btn a:after {
		background: #999;
	}

	.act .Hmenu-btn a::before {
		background: #999;
	}


	.Hmenu-btn.H-rMenu-btn {
		display: none;
	}

	.Hmenu-btn.Hmenu-web {
		display: block;
	}

	.H-nav {
		display: none;
	}
	.H-nav>li.tel {
		padding: 0 4%;
		height: 50px;
		line-height: 50px;
	}


	.Header-wrapper.Header-searching .H-logo img {
		display: none;
	}

	.Header-wrapper.Header-searching .H-logo img.rollover {
		display: block;
		margin-top: 10px;
	}

	.Header-wrapper {
		height: 60px;
	}
}