﻿
.animated {
	-webkit-animation-duration: .7s;
	animation-duration: .7s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
;}

.animated.hinge {
	-webkit-animation-duration: 2s;
	animation-duration: 2s
;}

@keyframes shake {
	0%,100% {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0)
	;}

	10%,30%,50%,70%,90% {
		-webkit-transform: translateX(-10px);
		-ms-transform: translateX(-10px);
		transform: translateX(-10px)
	;}

	20%,40%,60%,80% {
		-webkit-transform: translateX(10px);
		-ms-transform: translateX(10px);
		transform: translateX(10px)
	;}
}

.shake {
	-webkit-animation-name: shake;
	animation-name: shake
;}

@-webkit-keyframes swing {
	20% {
		-webkit-transform: rotate(15deg);
		transform: rotate(15deg)
	;}

	40% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg)
	;}

	60% {
		-webkit-transform: rotate(5deg);
		transform: rotate(5deg)
	;}

	80% {
		-webkit-transform: rotate(-5deg);
		transform: rotate(-5deg)
	;}

	100% {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	;}
}

@keyframes swing {
	20% {
		-webkit-transform: rotate(15deg);
		-ms-transform: rotate(15deg);
		transform: rotate(15deg)
	;}

	40% {
		-webkit-transform: rotate(-10deg);
		-ms-transform: rotate(-10deg);
		transform: rotate(-10deg)
	;}

	60% {
		-webkit-transform: rotate(5deg);
		-ms-transform: rotate(5deg);
		transform: rotate(5deg)
	;}

	80% {
		-webkit-transform: rotate(-5deg);
		-ms-transform: rotate(-5deg);
		transform: rotate(-5deg)
	;}

	100% {
		-webkit-transform: rotate(0);
		-ms-transform: rotate(0);
		transform: rotate(0)
	;}
}



@keyframes fadeInLeftBig {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-2000px);
		-ms-transform: translateX(-2000px);
		transform: translateX(-2000px)
	;}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0)
	;}
}

.fadeInLeftBig {
	-webkit-animation-name: fadeInLeftBig;
	animation-name: fadeInLeftBig
;}

@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(20px);
		transform: translateX(20px)
	;}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0)
	;}
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(20px);
		-ms-transform: translateX(20px);
		transform: translateX(20px)
	;}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0)
	;}
}

.fadeInRight {
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight
;}

@-webkit-keyframes fadeInRightBig {
	0% {
		opacity: 0;
		-webkit-transform: translateX(2000px);
		transform: translateX(2000px)
	;}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0)
	;}
}

@keyframes fadeInRightBig {
	0% {
		opacity: 0;
		-webkit-transform: translateX(2000px);
		-ms-transform: translateX(2000px);
		transform: translateX(2000px)
	;}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0)
	;}
}

.fadeInRightBig {
	-webkit-animation-name: fadeInRightBig;
	animation-name: fadeInRightBig
;}

@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
		transform: translateY(20px)
	;}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0)
	;}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
		-ms-transform: translateY(20px);
		transform: translateY(20px)
	;}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0)
	;}
}

.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp
;}






.slideOutRight {
	-webkit-animation-name: slideOutRight;
	animation-name: slideOutRight
;}


/*---   首页-招商加盟    ---*/

.i-nine ul,
.i-nine ol { 
	list-style:none;
    float: left; padding:0;}
.i-nine li {
	list-style:none;
    float: left;}

.w1200{
	width: 366px;
	float:left;}
.w600{
	width: 700px;
	float:right;
	border:1px solid #000;}

.f-top{
	padding:130px 0 95px 0;
	background: url(home4_02.jpg) no-repeat center top;
	width: 100%;}
.f-top .tit{
	font-size: 18px;
	background: url(home_67.png) no-repeat center top;
	color: #716241;
	text-align: center;}
.f-top .entit{
	text-align: center;
	padding: 5px 0;}
.f-top .tu{
	width: 55px;
	height: 1px;
	background: #716241;
	display: block;
	margin:0 auto 0;}
.f-top-b{
	overflow: hidden;
	padding:70px 0 0 0;
	text-align: center;}
.f-top-b span{
	font-size: 20px;
	color: #707070;
	margin:0 30px;
	display: inline-block;}  
.f-top-b span b{
	font-family: "宋体";
	opacity: 0.8;
	filter:alpha(opacity=80);}
.f-top-share{
	padding:65px 0 53px 0;
	width: 147px;
	margin:0 auto;
	height: 33px;}
.f-top-wm{
	text-align: center;}





.i-nine li{
	width: 366px;
	height: 105px;
	padding:20px  0 0 0;
 
	margin-right: 25px;
	position: relative;
	text-align: center;
	overflow: hidden;
	transition:background 0.5s ease 0s, padding 0.5s ease 0s, margin 0.5s ease 0s;
	background: #F7F7F7;}
.i-nine li .img{
	display: block;
	width: 80px;
	height: 80px;
	background: url(home33_03.png) no-repeat center top;    margin-left: 20px;
	
	position: relative;
	z-index: 1;
	transition:all 0.6s ease-out 0.3s; float:left;}
.i-nine li .img.se{
	background-image: url(home31_03.png);}
.i-nine li .img.th{
	background-image: url(home32_03.png);}
.i-nine li .img.fo{
	background-image: url(home34_03.png);}

.i-nine li .stit{
	display: block;
	font-size: 20px;
	color: #FFF;
	position: relative;
	z-index: 1;}
.i-nine li .sentit{
	display: block;
	width: 100%;
	font-size: 14px;
	color: #FFF;
	text-transform: uppercase;
	/*opacity: 0.5;
	filter: alpha(opacity=50);*/
	position: relative;
	z-index: 1;}
.i-nine li .tu{
	width: 87px;
	height: 1px;
	background: #333;
	display: block;
	margin:20px auto 0;
	opacity: 0.7;
	filter: alpha(opacity=70);
	position: relative;
	z-index: 1;}
.i-nine li .stxt{
	display: block;
	margin:0 auto 0;
	width: 257px;
	color: #333;
	line-height: 24px;
	height: 115px;
	font-size:14px;
	padding:20px 0 0px 0;
	overflow: hidden;
	position: relative;
	z-index: 1;}
.i-nine li .more{
	display: block;
	margin: 0 auto;
	width: 112px;
	height: 23px;
	border:1px solid #FF6600;
	line-height: 23px;
	color: #FF6600;
	/*opacity: 0.3;
	filter: alpha(opacity=30);*/
	font-size: 14px;
	position: relative;
	z-index: 1;}

.i-nine li:hover .img{
	background-position: center bottom;}
.i-nine li:hover .stit{
	color: #333;}
.i-nine li:hover .sentit{
	color: #333;}
.i-nine li:hover .tu{
	background: #333;}
.i-nine li:hover .stxt{
	color: #333;}
.i-nine li:hover{ background:#EBF7FF !important; margin-top:5px;}