body{
	overflow-x: hidden;
}
.demo{
	width: 100%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: ;
}
.t-lf{
	width:25%;
	height:120px;
	margin-right: 30px;
	background: #fff;
}
.dh{
width: 54px;
height: 54px;
background: #FFFFFF;
box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.15);
border-radius: 50%;	
display: flex;justify-content: center;

}
.zyw{
	width: 190px;
	height: 54px;
	background: #fff;
	border-radius: 27px;
	margin-left: 32px;
	display: flex;
	align-items: center;
	border: 1px solid  #f2f2f2;
}
.zyw1{
	font-size: 18px;
	font-family: SourceHanSansCN;
	font-weight: bold;
	color: #333;
	line-height: 20px;
	margin-left: 20px;
}

	/* 本例子css */
		/* 本例子css */
		.TB-focus{ width:120%; height:800px; position:relative;  overflow:hidden; }
		.TB-focus .hd { position:absolute; left:10%; bottom:60px; z-index:1; padding-left:2px; }
		.TB-focus .hd ul{
			display: flex;
		}
		.ix{
			width: 0;
			height: 4px;
			background: #39B379;
			transition: all .5s;
			margin-left:12px;
		}
		.TB-focus .hd li { 
			list-style: none;
			font-size: 24px;
			font-family: SourceHanSansCN;
			font-weight: bold;
			color: #fff;
			display: flex;
			align-items: center;
			margin-right: 12px;
		 cursor:pointer;
			}
				.TB-focus .hd li.on  {
		  	color: #39B379;
		
		}
		.TB-focus .hd li.on .ix {
		  
			width:60px;
		
				transition: all .5s;
		}
		
		.c3{
			background: #fff;
			box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.09);
		padding: 22px 10% 0 10%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 100px;
		}
		.c3_z1{
			
		}
		.c3_z2{
			display: flex;
			align-items: center;
			font-size: 16px;
		
			font-weight: 400;
			color: #999999;
			line-height: 58px;
			
		}
		.c3_z7{
			font-size: 18px;
		
			font-weight: 400;
			color: #FFFFFF;
			line-height: 18px;
			
		}
		.c3_z9{
		width: 76px;
		height: 76px;
		}
		.c3_z8{
			font-size: 22px;
		
			font-weight: bold;
			color: #FFFFFF;
			line-height: 22px;
					margin-top: 10px;}
					.c3_z11{
					width: 288px;
					height: 57px;
					background: #FFFFFF;
						margin-top: 14px;
					}
		.c3_z5{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.c3_z4:hover{
		
			color: #39B379;
			
			
		}
		.c3_z3{
			position: relative;
			z-index: 66;
			width: 359px;
			height: 200px;
			background: #39B379;
			margin-top: -110px;
			padding: 20px 35px 35px 35px;
		}
		.d4{
			margin: 0 10% 80px 10%;
		
		}
		.d4_z1{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.d4_z2{
			background: url('../images/bj1.png');
			width: 420px;
			height: 78px;
			font-size: 50px;
			
			
			font-weight: bold;
			color: #39B379;
			display: flex;
			align-items: center;
		}
			.d4_z22{
			background: url('../images/bj11.png');
			width: 520px;
			height: 78px;
			font-size: 50px;
			
			
			font-weight: bold;
			color: #39B379;
			display: flex;
			align-items: center;
		}
		.d4_z3{
			background: #39B379;
			border-radius: 30px;
			font-size: 24px;
			padding: 20px 32px;
			font-weight: 400;
			color: #FFFFFF;
			line-height:24px;
		}
		.d4_z4{
			font-size: 18px;
			line-height: 18px;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #999999;
			margin-top: 22px;
		}
		.e5{
			width: 100%;
			
		}
		
		/* 本例子css */
			.tabBox{ width:100%; height: 930px; display: flex; }
			.tabBox .hd{width:60%;padding: 57px 0;height: 930px;background-size: cover; }
			.tabBox .hd ul{width: 100%;list-style: none;   }
			.tabBox .hd li{ width: 110%;
			margin-left: -40px;
			}
			.tabBox .hd li a{ color:#999; display:block;  }
			.tabBox .hd li.on{ background:rgba(0, 0,0, 0.1);margin-left: -40px;}
			.tabBox .hd li.on .e5_z3{
				display: none;
			}
			.tabBox .hd li.on .e5_z7{
				display: block;
			}
			.tabBox .hd li.on a{ color:#fff;  }
			.tabBox .bd{width: 45%;height: 100%; background: blue; margin-left: -42px }
			.tabBox .bd ul{ width:100%;height: 100%; list-style: none;  background: yellowgreen;}
			.tabBox .bd ul li{ width:100%;height: 100%; overflow:hidden;}
			.tabBox .bd ul li img{ height:100%;	transition: all 1s; }
			.tabBox .bd ul li img:hover { 
				transform: translate(3px, 3px) scale(1.2) rotate(0deg);z-index:1;
			}
			.e5_z1{
				width: 100%;
				height: 272px;
				display: flex;
				align-items: center;
				
			}
		
			.e5_z2{
				width: 234px;
				height: 234px;
				padding: 3px;
				margin-left: -120px;
				border-radius: 50%;
				background: #39B379;
			}
			.e5_z3{
				display:block;
			width: 86%;
			margin-left: 32px;
				
			}
			.e5_z4{
				font-size: 40px;
				line-height: 40px;
				font-family: SourceHanSansCN;
				font-weight: bold;
				color: #FFFFFF;
			}
			.e5_z5{
				width: 70px;
				height: 6px;
				background: #FFFFFF;
				margin-top: 25px;
			}
			.e5_z6{
				font-size: 18px;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 30px;
				margin-top: 20px;
			}
			.e5_z7{
				display: none;
					width: 80%;
				margin-left: 32px;
				
			}
			.e5_z8{
				display: flex;
				align-items: center;
			}
			.e5_z9{
				width: 6px;
				height: 37px;
				background: #FFFFFF;
			}
			.e5_z11{
			font-size: 40px;
			line-height:40px;
			font-weight: bold;
			color: #FFFFFF;
			margin-left: 20px;
			}
			.e5_z12{
				width: 90%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 25px;
			}
			.e5_z13{
				width: 85px;
				text-align: center;
			}
			.e5_z14{
				width: 85px;
				height: 85px;
				background: #FFFFFF;
			
				border-radius: 10px;
			}
			.e5_z15{
				font-size: 18px;
			
				font-weight: 400;
				color: #FFFFFF;
				line-height: 30px;
				margin-top: 5px;
			}
		.f6{
			margin:108px 10% 0 10% ;
			width:80%;
			display: flex;
		
			justify-content: space-between;
		}
		.f6_z1{
				width: 42%;	
		}
		.f6_z2{
			display: flex;
			align-items: center;
	
		}
		.f6_z3{
			width: 54px;
			height: 4px;
			background: #39B379;
		}
		.f6_z4{
			font-size: 33px;
			line-height: 33px;
	
			font-family: SourceHanSansCN;
			font-weight: bold;
			color: #333333;
		}
		.f6_z5{
			font-size: 30px;
			font-family: SourceHanSansCN;
			font-weight: bold;
			color: #333333;
			line-height: 45px;
		
				margin-top: 42px;
		}
		.f6_z6{
			font-size: 16px;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #999999;
			
			line-height: 32px;
			margin-top: 32px;
		}
		.f6_z7{
			width: 200%;
			height: 280px;
			background: url('../images/p3.png');
			background-size: cover;
			margin-left: -30%;
			margin-top: 54px;
			padding-left:30%;
			padding-right:70%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.f6_y1{
			width: 20%;
			text-align: center;
		}
		.f6_y2{
			font-size: 50px;
		
			font-weight: bold;
			color: #FFFFFF;
			line-height: 50px;
		}
		.f6_y4{
			font-size: 30px;
		
			font-weight: bold;
			color: #FFFFFF;
			line-height: 30px;
		}
		.f6_y3{
			font-size: 16px;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 24px;
			margin-top: 30px;
		}
		.f6_z8{
			width: 50%;	
		}
		.f6_z9{
			font-size: 206px;
		
			font-weight: bold;
			color: #ebf7f1;
			line-height: 206px;
			opacity: 0.1;
	
	
		}
		.f6_z11{
			width: 770px;
			height: 517px;
overflow:hidden;
			
		}
		.f6_z12{
			width: 290px;
			height: 86px;
			background:#fff;
			position: relative;
			z-index: 66;
			margin-top: -86px;
			display: flex;
			justify-content: space-between;
		}
		.f6_z13{
			font-size: 24px;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #39B379;
			line-height: 86px;
			margin-left: 52px;
		}
		.f6_z14{
			width: 86px;
			height: 86px;
			background: #333333;
			
		}
		.f6_z15{
			width: 100%;
			height:100%;
		transition: all 1s; }
		.f6_z8:hover .f6_z15 { 
			transform: translate(3px, 3px) scale(1.2) rotate(0deg);z-index:1;
		}
		.g7{
		width: 100%;
		padding: 0 10% 100px 10%;
			background: #F5F5F5;
			margin-top: 100px;
		}
		.g7_z2{
			background: url('../images/p4.png');
			width: 420px;
			height: 78px;
			font-size: 50px;
			
			
			font-weight: bold;
			color: #39B379;
			display: flex;
			align-items: center;
		}
		.g7_z1{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 52px;
			
		}
		.g7_z3{
		
			width: 33.33%;
			padding:38px 0 0 0;
			border-left: 1px solid  #DBDBDB;
		}
		.g7_z3:hover{
		
			box-shadow: 0px 8px 9px 0px rgba(0,0,0,0.18);
		}
		.g7_z4{
			font-size: 40px;
		margin-left: 38px ;
		margin-right: 32px;
			font-weight: bold;
			color: #333333;
			line-height: 40px;
	
		}
		.g7_z3:hover .g7_z4{
			
			color: #39B379;
		}
		.g7_z5{
			font-size: 28px;
		margin-left: 38px ;
		margin-right: 32px;
			font-weight: bold;
			color: #333333;
			line-height: 46px;
			margin-top: 26px;
		}
		.g7_z3:hover .g7_z5{
			color: #39B379;
		}
		.g7_z6{
			font-size: 16px;
		margin-left: 38px ;
		margin-right: 32px;
			font-weight: 400;
			color: #666666;
			line-height: 32px;
			margin-top: 20px;
		}
		.g7_z7{
		
			height: 180px;
			background: #39B379;
			overflow: hidden;
			margin-top: 40px;
			margin-left: 38px ;
			margin-right: 32px;
		}
		.g7_z8{
			width: 100%;
			height:100%;
			transition: all 1s;
			
		}
		.g7_z3:hover .g7_z8{
			width: 100%;
			height:100%;
				transform: translate(3px, 3px) scale(1.2) rotate(0deg);z-index:1;
		}
		.g7_z9{
			width: 44px;
			height: 44px;
		
			margin-top: 36px;
			margin-left: 38px ;
			margin-right: 32px;
			background: rgba(0, 0, 0,0.2);
			border-radius: 50%;
			  transition: all 1s;  
			        transform:rotate(-45deg)
			     
		}
		 .g7_z3:hover .g7_z9{
			  	background: #39B379;
            transform:rotate(0deg)
		 }
		
		 .g7_11{
			width:0%;
			height: 12px;
			background: #39B379;
				transition: all 1s;
		margin-top: 56px;
		}
		 .g7_z3:hover  .g7_11{
			width:100%;
			height: 12px;
			background: #39B379;
				transition: all 1s;
		}
		.h8{
			width: 100%;
			height: 80px;
			background: #39B379;
			padding: 21px 10%;
			display: flex;
			align-items: center;
			
		}
		.h8_z1{
			
		
		}
		.h8_z2{
			width: 76px;
			height: 16px;
			background: #FFFFFF;
			border-radius: 8px;
			font-size: 14px;
					
			font-weight: bold;
			color: #39B379;
			line-height: 16px;
			padding-left: 10px;
			letter-spacing: 4px;
		}
		.h8_z3{
			
			font-size: 18px;
		
			font-weight: bold;
			color: #FFFFFF;
			line-height: 32px;
		
		}
		.h8_z4{
			width: 2px;
			height: 32px;
			background: #FFFFFF;
			opacity: 0.1;
			margin-left: 32px;
		}
		.h8_z5{
			font-size: 16px;
			
			font-weight: 400;
			color: #FFFFFF;
			line-height:16px;
			margin-left: 32px;
			margin-right: 40px;
		}
		.i9{
			padding:78px 10% 64px 10% ;
		width: 100%;
		background: #252525;	
		}
		.i9_z1{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.i9_z2{
			display: flex;
			align-items: center;
		}
		.i9_z3{
			width: 50px;
			height: 50px;
			background: #39B379;
			border-radius: 50%;
		}
		.i9_z4{
			margin-left: 48px;
		}
		.i9_z5{
			font-size: 16px;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 24px;
			opacity: 0.4;
		}
		.k10{
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			background: #141414;
			font-size: 12px;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #747474;
		
		}