/* 头部 */
.layout {
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.Header-wrapper {
	width: 100%;
	position: fixed;
	z-index: 999999;
	top: 0;
	left: 0;
	padding: 0 3%;
	transition: all .3s linear;
	background-color: #fff;
	border-bottom: 1px solid #e2e2e2
}

.Header-logo,
.Header-navbar {
	height: auto;
	line-height: 85px;
}

.Header-logo {
	float: left;
	width: 21%;
}

.Header-logo img {
	width: auto;
	object-fit: cover;
	user-select: none;
}

.Header-navbar {
	float: left;
	font-size: 0;
	text-align: center;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 60%;

}

.Header-contact {
	width: 19%;
	float: left;
}

.Header-navbar ul li {
	width: 14.28%;
	text-align: center;
	float: left;
}

.Header-navbar-menu {
	display: block;
	width: 100%;
	height: 85px;
	font-size: 16px;
	text-align: center;
	position: relative;
	transition: all .3s linear;
}

.Header-navbar ul li .Header-navbar-menu:hover {
	color: #c42b2f !important;
}

.Header-navbar ul li .Header-navbar-menu.on {
	color: #c42b2f !important;
}

.Header-arr {
	width: 10px;
	height: 100%;
	position: absolute;
	top: 0;
	right: calc(100%+10px);
	margin-left: 3px;
	background: url('../fonts/icon_menu.svg') no-repeat center center;
}

.Header-navbar ul li.ontrue .Header-arr {
	background: url('../fonts/icon_menu.svg') no-repeat center center;
}

.Header-navbar-sunnavsize {
	width: 100%;
	overflow: hidden;
	position: absolute;
	top: 63px;
	left: 0px;
	background: #fff;
	padding: 0;
	display: none;
	z-index: 2;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}

.Header-navbar-sunnavsize1 {
	width: 160px;
	overflow: hidden;
	position: absolute;
	top: 63px;
	background: #fff;
	padding: 0;
	display: none;
	z-index: 2;
	left: auto;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	margin-left: 0;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.Header-navbar-sunnavsize.ontrue {
	animation: sunNavDown 800ms ease both;
}

@keyframes sunNavDown {
	0% {
		transform: translateY(20px);
		opacity: 0;
	}

	100% {
		transform: translateY(0px);
		opacity: 1;
	}
}

.Header-navbar-sunnav-c {
	width: 100%;
	float: left;
	padding: 5px 0;
	overflow: hidden;
	line-height: normal;
	margin: 0;
}

.Header-navbar-sunnav-c .subnavcase dd {
	font-size: 16px;
	color: #353535;
	width: 100%;
	text-align: left;
	line-height: 35px;
	margin: 0;
}

.Header-navbar-sunnav-c .subnavcase dd i {
	font-size: 20px;
	padding-right: 5px;
}

.Header-navbar-sunnav-c .subnavcase dd:hover {
	color: #c42b2f;
}

.Header-navbar-sunnavsize .Header-navbar-sunnav-c .subnavcase dd {
	padding: 0 10px;
}

.contel {
	font-size: 18px;
	height: auto;
	line-height: 85px;
	text-align: center;
}

.contel i {
	font-size: 22px;
	margin-right: 13px;
	line-height: 45px;
	color: #c42b2f;
	font-weight: bolder
}

.contel i {
	display: inline-block;
	vertical-align: middle;
	animation: telanim 0.5s ease 0s infinite;
	-webkit-animation: telanim 0.5s ease 0s infinite;
	-moz-animation: telanim 0.5s ease 0s infinite;
	-o-animation: telanim 0.5s ease 0s infinite;
}

@keyframes telanim {
	0% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
	}

	25% {
		transform: rotate(10deg);
		-webkit-transform: rotate(10deg);
		-moz-transform: rotate(10deg);
		-o-transform: rotate(10deg);
	}

	100% {
		transform: rotate(-10deg);
		-webkit-transform: rotate(-10deg);
		-moz-transform: rotate(-10deg);
		-o-transform: rotate(-10deg);
	}
}

@-webkit-keyframes telanim {
	0% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
	}

	25% {
		transform: rotate(10deg);
		-webkit-transform: rotate(10deg);
		-moz-transform: rotate(10deg);
		-o-transform: rotate(10deg);
	}

	100% {
		transform: rotate(-10deg);
		-webkit-transform: rotate(-10deg);
		-moz-transform: rotate(-10deg);
		-o-transform: rotate(-10deg);
	}
}

@-moz-keyframes telanim {
	0% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
	}

	25% {
		transform: rotate(10deg);
		-webkit-transform: rotate(10deg);
		-moz-transform: rotate(10deg);
		-o-transform: rotate(10deg);
	}

	100% {
		transform: rotate(-10deg);
		-webkit-transform: rotate(-10deg);
		-moz-transform: rotate(-10deg);
		-o-transform: rotate(-10deg);
	}
}

@-o-keyframes telanim {
	0% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
	}

	25% {
		transform: rotate(10deg);
		-webkit-transform: rotate(10deg);
		-moz-transform: rotate(10deg);
		-o-transform: rotate(10deg);
	}

	100% {
		transform: rotate(-10deg);
		-webkit-transform: rotate(-10deg);
		-moz-transform: rotate(-10deg);
		-o-transform: rotate(-10deg);
	}
}

@keyframes dtline1 {
	0% {
		height: 16px;
	}

	100% {
		height: 0;
	}
}

@-o-keyframes dtline1 {
	0% {
		height: 16px;
	}

	100% {
		height: 0;
	}
}

@-moz-keyframes dtline1 {
	0% {
		height: 16px;
	}

	100% {
		height: 0;
	}
}

@-webkit-keyframes dtline1 {
	0% {
		height: 16px;
	}

	100% {
		height: 0;
	}
}

@keyframes dtline2 {
	0% {
		height: 12px;
	}

	50% {
		height: 16px;
	}

	100% {
		height: 0;
	}
}

@-o-keyframes dtline2 {
	0% {
		height: 12px;
	}

	50% {
		height: 16px;
	}

	100% {
		height: 0;
	}
}

@-moz-keyframes dtline2 {
	0% {
		height: 12px;
	}

	50% {
		height: 16px;
	}

	100% {
		height: 0;
	}
}

@-webkit-keyframes dtline2 {
	0% {
		height: 12px;
	}

	50% {
		height: 16px;
	}

	100% {
		height: 0;
	}
}

@keyframes dtline3 {
	0% {
		height: 8px;
	}

	50% {
		height: 16px;
	}

	100% {
		height: 0;
	}
}

@-o-keyframes dtline3 {
	0% {
		height: 8px;
	}

	50% {
		height: 16px;
	}

	100% {
		height: 0;
	}
}

@-moz-keyframes dtline3 {
	0% {
		height: 8px;
	}

	50% {
		height: 16px;
	}

	100% {
		height: 0;
	}
}

@-webkit-keyframes dtline3 {
	0% {
		height: 8px;
	}

	50% {
		height: 16px;
	}

	100% {
		height: 0;
	}
}

.dtline {
	padding-top: 20px
}

.dtline span {
	width: 2px;
	height: 16px;
	background: #333;
	margin-right: 4px;
	display: inline-block;
	vertical-align: bottom;
}

.dtline span:nth-child(1) {
	height: 8px;
}

.dtline span:nth-child(2) {
	height: 12px;
}

.dtline span:nth-child(3) {
	height: 16px;
}

.Header-contact a:hover .dtline span:nth-child(3) {
	animation: dtline1 .5s infinite alternate;
	-moz-animation: dtline1 .5s infinite alternate;
	-webkit-animation: dtline1 .5s infinite alternate;
	-o-animation: dtline1 .5s infinite alternate;
	animation-fill-mode: forwards;
}

.Header-contact a:hover .dtline span:nth-child(2) {
	animation: dtline2 .6s infinite alternate;
	-moz-animation: dtline2 .6s infinite alternate;
	-webkit-animation: dtline2 .6s infinite alternate;
	-o-animation: dtline2 .6s infinite alternate;
	animation-fill-mode: forwards;
}

.Header-contact a:hover .dtline span:nth-child(1) {
	animation: dtline3 .7s infinite alternate;
	-moz-animation: dtline3 .7s infinite alternate;
	-webkit-animation: dtline3 .7s infinite alternate;
	-o-animation: dtline3 .7s infinite alternate;
	animation-fill-mode: forwards;
}

/* 移动 */
.Header-navclick {
	height: 60px;
	cursor: pointer;
	float: right;
	user-select: none;
	display: none;
}

.Header-navclick .nav {
	float: left;
	padding-right: 3px;
	line-height: 60px;
	font-size: 15px;
}

.Header-navclick span {
	width: 32px;
	height: 3px;
	background: #545454;
	display: block;
	position: relative;
	margin-top: 28.5px;
	transition: all .2s linear;
	float: right;
}

.Header-navclick span:before,
.Header-navclick span:after {
	content: "";
	position: absolute;
	height: 3px;
	background: #545454;
	display: block;
	left: 0;
	width: 100%;
	transition: all .2s linear;
}

.Header-navclick span:before {
	top: -10px;
}

.Header-navclick span:after {
	top: 10px;
}

.Header-navclick:hover span {
	background: #545454;
}

.Header-navclick:hover span:before {
	background: #545454;
}

.Header-navclick:hover span:after {
	background: #545454;
}

.Header-navclick.ontrue span {
	-moz-animation: buttonAnimation 0.3s ease forwards;
	-webkit-animation: buttonAnimation 0.3s ease forwards;
	animation: buttonAnimation 0.3s ease forwards;
}

.Header-navclick.ontrue span:before {
	-moz-animation: buttonAnimationBefore 0.3s ease forwards;
	-webkit-animation: buttonAnimationBefore 0.3s ease forwards;
	animation: buttonAnimationBefore 0.3s ease forwards;
}

.Header-navclick.ontrue span:after {
	-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(8px) rotate(0);
		transform: translateY(8px) rotate(0);
	}

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

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

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

	100% {
		-webkit-transform: translateY(8px) rotate(45deg);
		transform: translateY(8px) 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(-8px) rotate(0);
		transform: translateY(-8px) rotate(0);
	}

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

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

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

	100% {
		-webkit-transform: translateY(-8px) rotate(-45deg);
		transform: translateY(-8px) 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: transparent;
	}

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

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

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

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

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

@keyframes buttonAnimation {
	0% {
		background: transparent;
	}

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

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

@media all and (min-width:1700px) {
	.layout {
		max-width: 1680px;
	}
}

@media all and (max-width:1680px) {
	.layout {
		max-width: 1480px;
	}
}

@media all and (max-width:1499px) {
	.layout {
		width: 99%;
		max-width: none;
	}
}

@media all and (max-width:1380px) {
	.Header-navbar-menu {
		font-size: 14px;
	}

	.Header-navbar-sunnavsize .Header-navbar-sunnav {
		width: auto;
	}
}

/* 移动 */

@media all and (max-width:1000px) {
	.Header-navbar-sunnavsize {
		width: 100%;
		top: 58px;
		margin: 0;
		padding: 0
	}

	.Header-navbar-sunnavsize .Header-navbar-sunnav-c .subnavcase dd {
		width: 100%;
		text-align: left
	}

	.Header-wrapper {
		background-color: #fff;
	}

	.Header-navbar-menu {
		color: #555;
	}

	.Header-logo {
		height: auto;
		line-height: 60px;
	}
	
	.Header-logo img{
		max-height: 50px;
	}

	.Header-navbar {
		height: auto;
		line-height: normal;
		display: none;
		border-top: #c5c5c5 1px solid;
		width: 100%;
		padding: 0 0 16px;

	}

	.Header-navbar ul li {
		width: 100%;
		margin: 0;
	}

	.Header-navbar-menu {
		font-size: 16px;
		height: auto;
		line-height: 40px;
		text-align: center;
	}

	.Header-navbar ul li>a:before {

		border-bottom: none;
	}

	.Header-navbar ul li .ontrue:before,
	.Header-navbar ul li:hover>a:before {
		left: 0;
		width: 0;
	}

	.Header-navbar-menu i {
		display: none;
	}

	.Header-navclick {
		display: block;
	}

	.Header-navbar ul li {
		position: relative;
	}

	/*.Header-sunNavclick {
	display:block;
}*/
	.Header-navbar-sunnavsize {
		position: static;
		display: none;
		padding: 8px 0;
	}

	.Header-navbar ul li.sonnav,
	.Header-navbar ul li.sonnav:hover {
		background: none;
	}

	.Header-navbar-sunnav-c .subnavcase dd {
		width: 100%;
		font-size: 16px;
		margin: 5px 0;
	}

	.Header-navbar ul {
		width: 100%;
		height: auto;
		overflow-y: auto;
	}
}






.Header-wrapper:hover {
	background-color: #fff;
	border-bottom: 1px solid #e2e2e2
}








.Header-wrapper:hover .Header-navbar ul li .Header-navbar-menu {
	color: #333;
}






.Header-navbar-sunnavsize .Header-navbar-sunnav-c .c-list {
	margin: 20px;
	display: flex;
	align-items: flex-start;

	flex-wrap: wrap;
}

.Header-navbar-sunnavsize .Header-navbar-sunnav-c .c-list .c-item {
	padding: 0 20px;
	width: auto;
	flex-shrink: 0;
	border-right: 1px solid rgba(0, 0, 0, .1);
}

.item-w20 {
	width: 20% !important;
}

.item-w25 {
	width: 25% !important;
}

.Header-navbar-sunnavsize .Header-navbar-sunnav-c .c-list .c-item:last-child {
	border: 0;
}

.Header-navbar-sunnavsize .Header-navbar-sunnav-c .c-list .c-top-box {
	display: block;
}

.Header-navbar-sunnavsize .Header-navbar-sunnav-c .c-list .c-top-box .c-text {
	padding-top: 25px;
	font-size: 16px;
	line-height: 32px;
	color: #333;
	transition: .5s;
	font-family: "Noto Sans M", sans-serif;
}

.Header-navbar-sunnavsize .Header-navbar-sunnav-c .c-list .c-wrap:hover .c-top-box .c-text {
	color: #bb1c14;
}

.Header-navbar-sunnavsize .Header-navbar-sunnav-c .c-list .c-img-box {
	height: 200px;
	overflow: hidden;
}

.Header-navbar-sunnavsize .Header-navbar-sunnav-c .c-list .c-img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: .5s;
}

.Header-navbar-sunnavsize .Header-navbar-sunnav-c .c-list .c-wrap:hover .c-img-box img {
	transform: scale(1.1, 1.1);
	-o-transform: scale(1.1, 1.1);
}





@media all and (max-width:1000px) {
	.Header-contact {
		display: none
	}

}