﻿@charset "utf-8";
/* CSS Document */

/*手机端*/

.Hmenu-btn {
	width: 22px;
	height: 70px;
	padding: 34px 0 0;
	cursor: pointer;
	display: none;
	float: right;
}

.Hmenu-btn a {
	display: block;
	width: 100%;
	height: 2px;
	background-color: #7f7f7f;
	position: relative;
}

.Hmenu-btn a:before,
.Hmenu-btn a:after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background-color: #7f7f7f;
	position: absolute;
	left: 0px;
}

.Hmenu-btn a:before {
	top: -7px;
}

.Hmenu-btn a:after {
	bottom: -7px;
}

.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 {
	-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 {
	-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);
	}
}

.Hmenu-btn.Hmenu-web {
	display: none;
	padding: 24px 0 0;
	height: 50px;
}