body{font-size:14px;font-family: "微软雅黑";color:#333;}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0;}
img{border:none;}
a { color:#333; text-decoration:none;}
a:hover{
	color:#ff1b45;
}
/*a:hover{color: #e4393c;text-decoration:none;}*/
ul,li{ list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
input::focus-inner{padding:0;border:0;}
input{outline:0;}
body{width:100%;overflow-x: hidden;}
.fl{float:left;}
.fr{float:right;}
.clear{ height:0; width:100%; font-size:1px; line-height:0; visibility:hidden; overflow:hidden;}
.hide{display:none;}
.pointer{cursor:pointer;}
.commonWidth{
	width:1200px;
	margin:0 auto;
	position: relative;
}
.clearfix:after{ content:" ";display:block; visibility:hidden; height:0;font-size:0; clear:both;}

/*头部样式*/
.ht_top {width: 100%;background: #fafafa url(http://www.huatu.com/z/topfooter/images/nav_bg.gif) repeat-x 0 0;line-height: 41px;overflow: hidden;}
.ht_top .zt_top {width: 1000px;height: 41px;margin: 0 auto;}
.ht_top h1 a {float: left;width: 131px;height: 40px;overflow: hidden;text-indent: -100em;background: url(http://www.huatu.com/z/topfooter/images/logo.gif) no-repeat; font-size:12px;}
.ht_top .topnav {float: right; color:#333; font-size:12px;}
.ht_top .topnav a {padding:0 8px;}
.ht_top .topnav a:hover { color:#e4393c; text-decoration:underline;}
@keyframes waveUpdown {
    100% {
        transform: translateY(28px);
    }
}
@keyframes wave{
	100%{
		transform:translateX(-1919px);
	}
}
@keyframes wavebl{
	0%{
		margin-left: 0;
		/*transform:translateX(-50px)*/
	}
	50%{
		margin-left: -50px;
	}
	100%{
		margin-left: 0;
		/*transform:translateX(-500px);*/
	}
}
@keyframes treeshakingbig{
	from{
		transform:rotate(-2deg);
		transform-origin:44px 150px
	}
	to{
		transform:rotate(4deg);
		transform-origin:44px 150px
	}
}


@keyframes treeshakingsmall{
	from{
		transform:rotate(-2deg);
		transform-origin:38px 110px;
	}
	to{
		transform:rotate(4deg);
		transform-origin:38px 110px;
	}
}
@keyframes noteFadein{
	0%{opacity:0}
	50%{opacity:1}
	51%{
		box-shadow:none;
		opacity:1;
		transform:translateX(0px)
	}
	100%{
		box-shadow:0 8px 35px rgba(213,160,47,0.68);
		opacity:1;
		transform:translateX(-30px)
	}
}

.banner{
	height:840px;
	background: url(../images/bg.jpg) top center no-repeat;
	background-size:cover;
	color:#fef9f9;
	position: relative;
	overflow:hidden;
	text-align: center;
	font-size:24px;
	margin-bottom: 80px;
}
.banner h1{
	padding-top:70px;
}
.banner .bl{
	width:200%;
	height:140px;
	position: absolute;
	left:0;
	right:0;
	bottom:-1px;
	background: url(../images/bl.png) left top repeat-x;
	animation: wavebl 8s ease-in infinite;
	z-index: 9;
}
.banner span{
	display: block;
	margin-bottom: 135px;
}
.banner p{
	font-size:34px;
	padding-top:14px;
	padding-bottom: 16px;
	letter-spacing: 3px;
}
h2{
	font-size:40px;
	color:#000;
	font-weight: normal;
	margin-bottom: 35px;
}
.pannel01,.pannel02{
	font-size:26px;
	color:#666;

}
.pannel01 .commonWidth{

	height:600px;
	background: url(../images/pbg01.png) top center no-repeat;
	background-size:100%;
	margin-bottom: 100px;
}
.pannel01 .left-text{
	padding-top:130px;
}
.pannel01 .left-text p,.pannel02 .right-text{
	line-height: 50px;
}
.pannel01 img.dif-img{
    position: absolute;
    right: 163px;
    top: 296px;
    width: 352px;
   
    border-radius: 15px;
}
.pannel01 img.dif-img.animated{
	 animation: noteFadein 1s ease-in .2s forwards;
}
.pannel02{
	padding-bottom: 102px;
	position:relative;
	overflow:hidden;
}
.pannel02 .left-2d{
	position: relative;
	z-index: 2;
}
.pannel02 .left-2d img{
	width:609px;
	height:475px;

}
.pannel02 .right-text{
	margin-right:40px;
	padding-top:56px;
	position: relative;
	z-index: 2;
}
.pannel02 .bl-bg-wrap{
	animation: waveUpdown 2s alternate infinite;
    bottom: 0;
    height: 385px;
    position: absolute;
    width: 100%;
}
.pannel02 .bl-bg{
	width: 1000%;
	height:268px;
	background: url(../images/bl2.png) repeat-x left top;
	position: absolute;
	bottom:0;
	animation: wave 20s linear infinite;
    
}
.pannel03 .right-2d img{
	width:537px;
	height:482px;
	position: relative;
	top:25px;
	
}
.pannel03{
	padding-top:100px;
	padding-bottom: 190px;
}
.pannel03 h3{
	font-size:26px;
	font-weight:normal;
	color:#333;
	margin-bottom: 10px;
}
.pannel03 p{
	font-size:18px;
	color:#666;
	margin-bottom: 15px;
}
.pannel04 {
	color:#333;
	font-size:18px;
	position: relative;
	height:760px;
	margin-bottom: 166px;
}
.pannel04 .img2d-wrap{
	width:800px;
	height:760px;
	background: url(../images/2d3.png) left center no-repeat;
	background-size:100% 100%;
	position: absolute;
	left:0;
	top:50%;
	margin-top:-380px;
}

.yz1-img-wrap{
	position: absolute;
	left: 14px;
	bottom:110px;
	width:28%;
	
	
}
.yz1-img-wrap i{
	position: absolute;
	width:119px;
	height:23px;
	background: url(../images/s2.png) no-repeat;
	left:46px;
	bottom:0;
}
.pannel04 .img2d-wrap .yz1-img{
	
	width:100%;
	animation: treeshakingsmall 2s infinite alternate linear;
}
.pannel04 .img2d-wrap .yz2-img{
	width:98%;
	animation: treeshakingbig 2s infinite alternate linear;
	
}
.yz2-img-wrap{
	position: absolute;
	right:0;
	bottom:150px;
	width:26%;
}
.yz2-img-wrap i{
	position: absolute;
	width:66px;
	height:24px;
	background: url(../images/s1.png)  no-repeat;
	left:42px;
	bottom:0;
}
.pannel04 h2{
	margin-bottom: 20px;
}
.pannel04 .p01{
	font-size:26px;
	color:#333;
	margin-bottom: 30px;
}
.pannel04 h3{
	font-size:20px;
	margin-bottom: 10px;

}

.pannel04 .text-wrap{
	width:630px;
	padding-top:148px;
}
.pannel04 .mk-time{
	margin-bottom: 15px;
}
.pannel04 .mk-time p,.pannel04 .mk-rules{
	line-height: 1.6;
}
.pannel04 .blue-text{
	color:#2589f0;
	font-size:20px;
	margin-bottom: 25px;
}
.pannel04 .yellow-text{
	color:#fd9833;
	font-size:16px;
	padding-top:20px;

}
.pannel05 {
	padding:0 7.2%;
	margin-bottom: 138px;
}
.pannel05 dl{
	float:left;
	margin:0 .8%;
	width:18.4%;
	background: #fff;
	box-shadow: 0 0 30px #F4F4F8;
	height:430px;
	text-align: center;
	padding-top:48px;
	transition: all .3s ease-in;
	cursor: pointer;
}
.pannel05 dl:hover{
	transform: translateY(-15px);
}
.pannel05 dl dd{
	height:207px;
	margin-bottom: 44px;
	overflow:hidden;
}
.pannel05 dl dd img{
	width:68%;
	
}
.pannel05 dl dt{
	color:#000;
	font-size:18px;
}
.pannel05 dl dt h4{
	font-size:28px;
	margin-bottom: 20px;
}
.pannel05 dl dt p{
	line-height: 1.6;
}
.pannel06{
	height:808px;
	background: url(../images/fbg.jpg) center no-repeat;
	position: relative;
}
.pannel06 .commonWidth{
	height:100%;
}
.footer{
	width:100%;
	text-align: center;
	padding:56px 0 15px;
	position: absolute;
	bottom: 0;
}
.pannel06 .erm-wrap{
	position: absolute;
	top:197px;
	color:#fff;
	right:0;
	margin-right:100px;
	font-size:30px;
	
}
.pannel06 .erm-wrap p{
	font-size:68px;
	text-align: center;
	padding-left: 30px;
}
.pannel06 .erm-wrap span{
	display: block;
	margin-bottom: 30px;
	text-align: center;
}
.pannel06 .erm-wrap .erm-box{
	width:121px;
	height:121px;
	border-radius: 100%;
	border:1px solid #17B7FA;
	margin:0 auto;
	
}
.pannel06 .erm-wrap .erm-box img{
	width:116px;
	height:116px;
	position: relative;
	top:2px;
	left:2.5px;
}
.footer p {line-height: 28px; color:#73a2ff;font-size:16px;position: relative;z-index: 2;font-family: "微软雅黑";}
.footer p a {color: #73a2ff; font-size:14px;}
.footer p span {padding-bottom: 0px; padding-left: 5px; padding-right: 5px; padding-top: 0px}
.mobile,.footer-m,.slider03 a.mobile{
	display:none;
}

@media screen and (min-width:1081px) and (max-width:1366px){
	/*.banner .bl{
		bottom:-1px;
	}*/
	.pannel04 .img2d-wrap{
		width: 536px;
    	height: 520px;
		margin-top:-260px;
	}
	.pannel05 dl{
		/*width:17.6%;*/
		height:310px;
	}
	.pannel05 dl dt{
		font-size:14px;
	}
	.pannel05 dl dd{
		height:107px;
		
	}
	.pannel05 dl dd img{
		width:58%;
	}
	.yz1-img-wrap i{
		left:18px;
	}
}
@media screen and (min-width:1281px) and (max-width:1366px){
	
	.pannel04 .img2d-wrap{
		width: 560px;
	    height: 560px;
	    margin-top: -280px;
	}
	.yz1-img-wrap i{
		left:22px;
	}
	
}
@media screen and (min-width:1400px) and (max-width:1600px){
	
	.pannel04 .img2d-wrap{
		width: 658px;
	    height: 658px;
	    margin-top: -329px;
	}
	.pannel05 dl{
	   /* width: 18.1%;*/
	}
	.pannel05 dl dd{
		margin-bottom: 0;
	}
	.pannel05 dl dt{
		font-size:16px;
	}
}
@media screen and (min-width:1400px){
	.pannel05 dl{
	    /*width: 17.8%;*/
	}
	.pannel04 .img2d-wrap{
		width: 580px;
	    height: 580px;
	    margin-top: -290px;
	}
	.yz1-img-wrap i{
		left:22px;
	}
}
.m2d-img,.pannel02 .mleft-2d{
	display: none;
}
@media screen and (max-width:1080px){
	.ht_top .topnav,.footer,.d1-wrap,.d2-wrap,.pannel02 .left-2d
	{
		display: none;
	}

	.commonWidth{
		width:96%;
	}
	.banner{
		background: url(../images/mban.jpg) center no-repeat;
		height:13rem;
		background-size:100% 100%;
		margin-bottom: 1rem;
	}
	.banner h1 img{
		width:7rem;
	}
	.banner h1{
		padding-top:0rem;
	}
	.banner p{
		font-size:.75rem;
		padding:0 0 .15rem;
		letter-spacing: 2px;
		margin-top:-.25rem;
	}
	.banner span{
		font-size:.6rem;
		margin-bottom: .5rem;
	}
	.banner .bl{
		height:1.5rem;
		background: url(../images/bl.png) left top repeat-x;
		background-size:100% 101%;
	}
	.banner .commonWidth>img{
		width:3rem;
		height:3rem;
	}
	.pannel01 .left-text{
		padding-top:0;
		width:100%;
		text-align: center;

	}
	h2{
		font-size:1.2rem;
		margin-bottom: .5rem;
		text-align: center;
		color:#000;
	}
	.pannel01, .pannel02{
		font-size:.8rem;
		
	}
	.pannel01 .left-text p, .pannel02 .right-text{
		line-height: 1.2rem;
	}
	.pannel01 .commonWidth {
	    height:auto;
	  	background: none;
	  	margin-bottom: 0.5rem;
	}
	.pannel01 .m2d-img{
		display: block;
		width:100%;
		height:12.35rem;
		background: url(../images/mpbg01.png) center no-repeat;
		background-size: 100% 100%;
	}
	.pannel01 img.dif-img {
	   	border-radius:.35rem;
	    right: 0.5rem;
	    top: 12.7rem;
	    width: 8.6rem;
	}
	.pannel02 .mleft-2d{
		text-align: center;
		display: block;
		margin-top:1.5rem;
	}
	.pannel02 .mleft-2d img{
		width:76%;
		height:auto;
		
	}
	.pannel02 .bl-bg-wrap{
		height:5rem;
	}
	.pannel02{
		padding-bottom: 0rem;
	}
	.pannel02 .bl-bg{
		height:4.5rem;
		background: url(../images/bl2.png) repeat-x left top;
		background-size:auto 100%;
	}
	.pannel02 .right-text {
	    margin-right: 0;
	    padding-top:1.5rem;
	    width:100%;
	    text-align: center;
	   
	}
	.pannel03 {
	    padding:2rem 0;
	}
	.pannel03 h3{
		font-size:.85rem;
		font-weight:bold;
	}
	.pannel03 p{
		font-size:.75rem;
	}
	.pannel03 .right-2d{
		text-align: center;
	}
	.pannel03 .right-2d img {
	    width: 76%;
	    height: auto;
	    top:1.5rem;
	}
	.pannel04{
		height:26rem;
		font-size:.65rem;
		margin-bottom: 19rem;
	}
	.pannel04 .commonWidth{
		overflow:hidden;
	}
	.pannel04 h2{
		margin-bottom: .5rem;
	}
	.pannel04 .p01{
		font-size:.85rem;
		text-align: center;
		margin-bottom: .5rem;
	}
	.pannel04 .img2d-wrap {

	    width: 98%;
	    height: 17rem;
	   	top:100%;
	    margin-top:0;
	}
	.pannel04 .text-wrap{
		width:100%;
		padding-top:0rem;
	}
	.pannel04 .blue-text{
		font-size:.8rem;
		margin-bottom: .5rem;
	}
	.pannel04 .yellow-text{
		font-size:.7rem;
		padding-top:.5rem;
	}
	.yz1-img-wrap{
		bottom:2.5rem;
	}
	.yz1-img-wrap i {
	   
	    width: 5rem;
	    height:.75rem;
	    background: url(../images/s2.png) no-repeat;
	    background-size:100% 100%;
	    left: 3%;
	   
	}
	.yz2-img-wrap i {
	    position: absolute;
	    width:3.5rem;
	    height: .75rem;
	    background: url(../images/s1.png) no-repeat;
	    background-size:100% 100%;
	    left:3%;
	   
	}
	.yz2-img-wrap{
		bottom:4rem;
	}
	.pannel05{
		padding:0 2%;
		margin-bottom: .5rem;
	}
	.pannel05 dl {
	   
	    margin: 0 1%;
	    width: 31.33%;
	    height: 9rem;
	   padding: 1rem 0;
	   margin-bottom: .5rem;
	   
	}
	.pannel05 dl:nth-child(4) ,.pannel05 dl:nth-child(5){
		width:48%;
		height:7rem;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-top:.5rem;
	}
	.pannel05 dl:nth-child(4) dd,.pannel05 dl:nth-child(5) dd{
		float:left;
		width:44%;
	}
	.pannel05 dl:nth-child(4) dt,.pannel05 dl:nth-child(5) dt{
		float:left;
		width:56%;
		text-align: center;
	}
	.pannel05 dl:nth-child(4) dd img,.pannel05 dl:nth-child(5) dd img{
		position:relative;
		top:1rem;
		width:85%;
	}
	.pannel05 dl dt{
		font-size:.6rem;
		
	}
	.pannel05 dl dt h4{
		font-size:.8rem;
		margin-bottom:.5rem;
	}
	.pannel05 dl dd{
		height:4rem;
		margin-bottom:0.5rem;
	}
	.pannel06 {
	    height: 15.3rem;
	    background: url(../images/mfbg.jpg) center no-repeat;
	   	background-size:100% 100%;
	}
	.pannel06 .erm-wrap {
	   
	    top: 3rem;
	    margin-right:0rem;
	    font-size:.85rem;
	}
	.pannel06 .erm-wrap p{
		font-size:1.2rem;
		padding-left:.75rem;
	}
	.pannel06 .erm-wrap .erm-box{
		width:4rem;
		height:4rem;
	}
	.pannel06 .erm-wrap .erm-box img{
		height:3.8rem;
		width:3.8rem;
	}
	.pannel06 .erm-wrap span{
		margin-bottom: .5rem;
	}
	.footer-m {
		width:100%;
	    position: absolute;
    	bottom: 0;
		display: block;
	    padding: .8rem 0;
	    text-align: center;
	    color: #fff;
	    font-size: .7rem;
	   
	}
}
@media screen and (max-width: 320px){
	.pannel04{
		height:30rem;
	}
	.pannel05 dl{
		height:11rem;
	}

	.pannel05 dl:nth-child(4), .pannel05 dl:nth-child(5){
		height:10rem;
	}
}
@media screen and (min-width: 768px) and (max-width: 1024px){
	.banner{
		padding-top:1rem;

	}
	.banner h1 img{
		margin-bottom: .5rem;
	}
	.pannel01 img.dif-img{
		right:1.5rem;

	}
}