.wechat {
	width: 122px;
	padding: 0 20px 5px
}
.wechat .qrcode {
	height: 122px
}
.grad-btn {
	width: 164px;
	height: 50px;
	line-height: 200px;
	overflow: hidden;
	position: absolute;
	top: -70px;
	left: -50px;
	background: url("https://www.walldrift.com/__xh__/nmg.huatu.com/zt/htzp/images/11.png") no-repeat center center;
	border-radius: 4px
}
.wechat .more {
	margin-top: 10px
}
.bounceInLeft span {
	padding-top: 5px
}
.page-bg {
	width: 100%;
	background: url("https://www.walldrift.com/__xh__/nmg.huatu.com/zt/htzp/images/env-bg.png") no-repeat center;
}

.index-phone{ display:none;}

.index-nav {
	position: absolute;
	left: 115px;
	top: 60px;
	width: 220px;
	background: #13489d
}
.index-nav .ropes {
	position: absolute;
	left: 112px;
	top: -80px;
	margin-left: -93px;
	height: 112px;
	width: 186px;
}
.index-nav .logo {
	height: 110px;
	margin-top: 14px;
	background: url("https://www.walldrift.com/__xh__/nmg.huatu.com/zt/htzp/images/logo.png") no-repeat center center;
}
.index-nav ul {
	color: #fff;
	text-align: center;
}
.index-nav ul a {
	display: block;
	text-decoration: none;
}
.index-nav ul li {
	padding: 15px 0 20px;
	border-top: 1px solid #4072c2;
	-webkit-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}
.index-nav ul li .bounceInLeft {
	position: relative;
	font-weight: bold;
	color: #e3e3e3;
	font-size: 20px;
}
.index-nav ul .cur, .index-nav ul li:hover {
	background-color: #f9480a;
}
.index-nav ul .cur .bounceInLeft, .index-nav ul li:hover .bounceInLeft {
	color: #fff;
}
.index-nav ul li .eng {
	display: block;
	margin-top: 3px;
	color: #6b7174;
	color: rgba(255, 255, 255, .2);
	font-size: 16px;
}
.index-nav ul .cur .bounceInLeft span, .index-nav ul li:hover .eng {
	color: #fff;
	color: rgba(255, 255, 255, .8);
}
 @-webkit-keyframes zoom {
 0% {
 -webkit-transform: scale(1);
 transform: scale(1);
}
50% {
 -webkit-transform: scale(1.3);
 transform: scale(1.3);
}
100% {
 -webkit-transform: scale(1);
 transform: scale(1);
}
}
@keyframes zoom {
 0% {
 -webkit-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
}
50% {
 -webkit-transform: scale(1.3);
 -ms-transform: scale(1.3);
 transform: scale(1.3);
}
100% {
 -webkit-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
}
}
.index-nav ul li:hover .bounceInLeft span {
	-webkit-animation-name: zoom;
	animation-name: zoom;
	-webkit-animation-duration: .4s;
	animation-duration: .4s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.index-nav ul li:hover .bounceInLeft span:nth-of-type(1) {
	-webkit-animation-delay: 0;
	-o-animation-delay: 0;
	animation-delay: 0;
}
.index-nav ul li:hover .bounceInLeft span:nth-of-type(2) {
	-webkit-animation-delay: .1s;
	-o-animation-delay: .1s;
	animation-delay: .1s;
}
.index-nav ul li:hover .bounceInLeft span:nth-of-type(3) {
	-webkit-animation-delay: .2s;
	-o-animation-delay: .2s;
	animation-delay: .2s;
}
.index-nav ul li:hover .bounceInLeft span:nth-of-type(4) {
	-webkit-animation-delay: .3s;
	-o-animation-delay: .3s;
	animation-delay: .3s;
}
.index-nav ul li:hover .bounceInLeft span:nth-of-type(5) {
	-webkit-animation-delay: .4s;
	-o-animation-delay: .4s;
	animation-delay: .4s;
}
.wechat {
	position: absolute;
	right: 5px;
	bottom: 5px;
	width: 90px;
	padding: 0 10px 5px;
	border: 1px solid #63f4a3;
	background-color: #00ae4d;
	color: #fff;
}
.wechat h1 {
	font-size: 14px;
	padding-top: 5px;
	font-weight: bold;
	text-align: center;
	line-height: 2em;
}
.wechat .qrcode {
	height: 80px;
	background-color: #007b37;
	background-image: url("https://www.walldrift.com/__xh__/nmg.huatu.com/zt/htzp/images/weixin.jpg");
	background-repeat: no-repeat;
	background-position: center center;
}
.wechat p {
	font-size: 12px;
	font-weight: bold;
	line-height: 1.3em;
	text-align: center;
}
.wechat .more {
	margin-top: 5px;
	color: #fbf904;
}
/*
 *首页效果增强部分
 */

/*
 *以下内容用于首页导航的动画
 *以下关于animateInLeft部分的keyframes引用自animate.css
 */
.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
@-webkit-keyframes bounceInLeft {
 0% {
 opacity: 0;
 -webkit-transform: translateX(-2000px);
 transform: translateX(-2000px);
}
 60% {
 opacity: 1;
 -webkit-transform: translateX(30px);
 transform: translateX(30px);
}
 80% {
 -webkit-transform: translateX(-10px);
 transform: translateX(-10px);
}
 100% {
 -webkit-transform: translateX(0);
 transform: translateX(0);
}
}
 @keyframes bounceInLeft {
 0% {
 opacity: 0;
 -webkit-transform: translateX(-2000px);
 -ms-transform: translateX(-2000px);
 transform: translateX(-2000px);
}
 60% {
 opacity: 1;
 -webkit-transform: translateX(30px);
 -ms-transform: translateX(30px);
 transform: translateX(30px);
}
 80% {
 -webkit-transform: translateX(-10px);
 -ms-transform: translateX(-10px);
 transform: translateX(-10px);
}
 100% {
 -webkit-transform: translateX(0);
 -ms-transform: translateX(0);
 transform: translateX(0);
}
}
.bounceInLeft {
	-webkit-animation-name: bounceInLeft;
	animation-name: bounceInLeft;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
/*
 *导航文字弹入动画
*/
.index-nav ul a:nth-of-type(1) .bounceInLeft {
	-webkit-animation-delay: .4s;
	-o-animation-delay: .4s;
	animation-delay: .4s;
}
.index-nav ul a:nth-of-type(2) .bounceInLeft {
	-webkit-animation-delay: .3s;
	-o-animation-delay: .3s;
	animation-delay: .3s;
}
.index-nav ul a:nth-of-type(3) .bounceInLeft {
	-webkit-animation-delay: .2s;
	-o-animation-delay: .2s;
	animation-delay: .2s;
}
.index-nav ul a:nth-of-type(4) .bounceInLeft {
	-webkit-animation-delay: .1s;
	-o-animation-delay: .1s;
	animation-delay: .1s;
}
.index-nav ul a:nth-of-type(5) .bounceInLeft {
	-webkit-animation-delay: 0;
	-o-animation-delay: 0;
	animation-delay: 0;
}
 @media all and (max-height: 580px) {
.index-nav {
	width: 200px;
}
.index-nav ul li {
	padding: 15px 0px 10px;
}
.index-nav ul li a {
	font-size: 18px;
}
.index-nav ul li .eng {
	font-size: 14px;
}
}

	/*手机端测试*/

@media screen and (max-width:768px){
	.top-links{width:100%;}
	.page-bg{ height:60.2rem; background-size: cover; background:url("https://www.walldrift.com/__xh__/nmg.huatu.com/zt/htzp/images/env-bg1.png") no-repeat center;}
	.index-nav{ display:none;}
.index-phone {
	width:98%;
	display:block;
	margin:0 7px;
	background: #13489d;
	
	/*position: absolute;
	left: 18%;
	top: 3.8rem;
	width: 61%;
	background: #13489d*/
}
.index-phone .ropes {
	position: absolute;
	left: 25%;
	top: -5.5rem;
	margin-left: 10px;
	height: 112px;
	width: 186px;
	
}
.index-phone .logo {
	height: 100px;
	margin-top: 14px;
	background: url("https://www.walldrift.com/__xh__/nmg.huatu.com/zt/htzp/images/logo.png") no-repeat center center;
}
.index-phone table{ width:100%; color: #fff; text-align: center; margin:0 auto;}
.index-phone table th a{
	display: block;
	text-decoration: none;
	}
.index-phone table tr a{
	display: block;
	text-decoration: none;
	border-left: 1px solid #4072c2;
	border-right: 1px solid #4072c2;
	}
	
.index-phone table tr td{
	padding: 15px 0 20px;
	border-top: 1px solid #4072c2;
	-webkit-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
	}
.index-phone  table tr td .bounceInLeft {
	position: relative;
	font-weight: bold;
	color: #e3e3e3;
	font-size: 20px;
}
.index-phone tr .cur, .index-phone tr td:hover {
	background-color: #f9480a;
}
.index-phone tr .cur .bounceInLeft, .index-phone tr th:hover .bounceInLeft {
	color: #fff;
}
.index-phone tr th .eng {
	display: block;
	margin-top: 3px;
	color: #6b7174;
	color: rgba(255, 255, 255, .2);
	font-size: 16px;
}
.index-phone tr .cur .bounceInLeft span, .index-phone tr li:hover .eng {
	color: #fff;
	color: rgba(255, 255, 255, .8);
}


.wechat{ display:none;}
.eng{ color:#fff;}
}

@media screen and (max-width:504px){
	.page-bg{ height:46rem; background-size: cover;}
	.index-phone{ margin:0 4px;}
	.index-phone  table tr td .bounceInLeft {
	font-size: 0.9rem;
}
.index-phone .ropes { height:5rem;}
	.index-phone tr th .eng { font-size: 0.7rem;}
}

@media screen and (max-width:353px){
	.page-bg{ height:35rem; background-size: cover;}
	.index-phone  table tr td .bounceInLeft {font-size: 0.8rem;}
	.index-phone table tr td{ padding:10px 0 10px 0;}
	.index-phone tr th .eng { font-size: 0.7rem;}

}
/*测试结束*/