/*浮动*/
.t-fl{
	float: left;
}
.t-fr{
	float: right;
}
.t-hand{
	cursor: pointer;
}
.t-none{
	display:none !important;
}
.t-no-mg-r{
	margin-right: 0 !important;
}
/*css3箭头 <span class='t-arrow'><i></i></span> */
.t-arrow{
	display: inline-block;
	width:30px;
	height:20px;
	left:-15px;
	top:4px;
	position: relative;
	overflow: hidden;
	-webkit-transition:all .5s ease-in-out;
	-ms-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
}
.t-arrow i{
	position: absolute;
	width:0%;
	height: 2px;
	right: 5px;
	background: #ff3333;
	top:50%;
	margin-top: -0.6px;
	-webkit-transition:all .5s ease-in-out;
	-ms-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
}
.t-arrow i.long{/*添加short变短动画*/
	width:70px;
}
.t-arrow:before{
	content:"";
	width:10.14px;
	height:2px;
	background: #ff3333;
	position: absolute;
	left: 18px;
    top: 6px;
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
}
.t-arrow:after{
	content:"";
	width:10.14px;
	height:2px;
	background: #ff3333;
	position: absolute;
	left: 18px;
    bottom: 6px;
	-webkit-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
.adjust-arrow:before{
	top:5.5px;
}
.adjust-arrow:after{
	bottom:5.5px;
}
/*arrow-left*/
.arrow-left {
    left:17px;
    -webkit-transition:all .5s ease-in-out ;
    -o-transition:all .5s ease-in-out ;
    -moz-transition:all .5s ease-in-out ;
    transition:all .5s ease-in-out ;
}
.arrow-left{
  -webkit-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  transform:rotate(180deg);
}
.arrow-left:before,.arrow-left:after {
	-webkit-transition:all .5s ease-in-out ;
	-o-transition:all .5s ease-in-out ;
	 -moz-transition:all .5s ease-in-out ;
	transition:all .5s ease-in-out ;
}
/*banner旋转动画*/
@keyframes spinAround{
	0%{
		-webkit-transform: rotateZ(0);
		-o-transform: rotateZ(0);
		transform: rotateZ(0);
		-webkit-transform-origin: center center;
		transform-origin: center center
	}	
	100%{	
		-webkit-transform: rotateZ(360deg);
		-o-transform: rotateZ(360deg);
		transform: rotateZ(360deg);
		-webkit-transform-origin: center center;
		transform-origin: center center
	}
}
@keyframes replaceBg{
	0%{
		background-image: url("../images/playBtnDark.png"/*tpa=http://www.vhall.com/public/static/images/playBtnDark.png*/);
	}
	100%{
		background-image: url("../images/playBtnLight.png"/*tpa=http://www.vhall.com/public/static/images/playBtnLight.png*/);
	}
}
/* 企业logo无线滚动动画 */
@keyframes autoplayInfinite{
	0%{
		/*-webkit-transform:translate3d(0,0,0);
		-o-transform:translate3d(0,0,0);
		transform:translate3d(0,0,0);*/
		margin-left: 0%;
	}
	100%{
		/*-webkit-transform:translate3d(500px,0,0);
		-o-transform:translate3d(500px,0,0);
		transform:translate3d(500px,0,0);*/
		margin-left: -164px;
	}
}
/*carema zoom wave */
@keyframes circleZoom{
	0%{
		width:0;
		height:0;
		margin-top: 0;
		margin-left: 0;
		opacity:0.3;
	}
	25%{
		width:161px;
		height: 161px;
		margin-top: -80.5px;
		margin-left: -80.5px;		
	}
	opacity:1;
	50%{
		width:324px;
		height: 324px;
		margin-top: -162px;
		margin-left: -162px;		
	}
	75%{
		width:476px;
		height: 476px;
		margin-top: -238px;
		margin-left: -238px;	
	}
	95%{
		width:650px;
		height: 650px;	
		margin-top: -325px;
		margin-left:-325px;		
	}
	100%{
		width:0;
		height:0;
		margin-top: 0;
		margin-left: 0;
		opacity: 0;
	}
}
/*dot circle zoom*/
@keyframes dotZoom{
	0%{
		width:0;
		height:0;
		margin-top: 0;
		margin-left: 0;
	}
	25%{
		width:20px;
		height: 20px;
		margin-top: -10px;
		margin-left: -10px;
	}
	50%{
		width:50px;
		height: 50px;
		margin-top: -25px;
		margin-left: -25px;
	}
	75%{
		width:70px;
		height: 70px;
		margin-top: -35px;
		margin-left: -35x;
	}
	95%{
		width:100px;
		height: 100px;	
		margin-top: -50px;
		margin-left:-50px;
	}
	100%{
		width:0;
		height:0;
		margin-top: 0;
		margin-left: 0;
		opacity: 0;
	}	
}
/* channel icon flow */
@keyframes iconFlow{
	0%{
		-webkit-transform:translateY(0);	
		-o-transform:translateY(0);	
		transform:translateY(0);	
	}
	100%{
		-webkit-transform:translateY(15px);	
		-o-transform:translateY(15px);	
		transform:translateY(15px);		
	}
}
/*background zoom*/
@keyframes bgZoom{
	0%{
		-webkit-transform:scale(1);
		-o-transform:scale(1);
		-moz-transform:scale(1);
		transform:scale(1);
		/*background-size:100% 100%;
		background-position: center center;*/
	}
	100%{
		-webkit-transform:scale(1.1);
		-o-transform:scale(1.1);
		-moz-transform:scale(1.1);
		transform:scale(1.1);
		/*background-size:105% 105%;
		background-position: center center;*/
	}
}
/* choice line grow animate */
@keyframes lineGrow{
	0%{
		width:0;
	}
	100%{
		width: 240px;
	}
}
@keyframes lineGrow2{
	0%{
		width:0;
	}
	100%{
		width: 420px;
	}
}
@keyframes lineGrow3{
	0%{
		width:0;
	}
	100%{
		width: 330px;
	}
}
/* product  flow circle*/
@keyframes flowCircle{
	0%{
		/*margin-top:0;
		margin-right: 0;*/
		-webkit-transform:rotate(0) translate(0,0);
		 -o-transform:rotate(0) translate(0,0);
		 -moz-transform:rotate(0) translate(0,0);
		 transform:rotate(0) translate(0,0); 
	}
	50%{
		/*margin-top:-25px;
		margin-right: -150px;*/
		-webkit-transform:rotate(180deg) translate(150px,80px);
		-o-transform:rotate(180deg) translate(150px,80px);
		-moz-transform:rotate(180deg) translate(150px,80px);
		transform:rotate(180deg) translate(150px,80px);
	}
	100%{
		/*margin-top:-50px;
		margin-right: 100px;*/
		-webkit-transform:rotate(360deg) translate(-15px,-30px);
		-o-transform:rotate(360deg) translate(-15px,-30px);
		-moz-transform:rotate(360deg) translate(-15px,-30px);
		transform:rotate(360deg) translate(-15px,-30px);
	}
}

/*button*/
.t-btn-white,.t-btn-black{
	display: inline-block;
	width:185px !important;
	height: 46px !important;
	line-height: 46px !important;
	border-radius: 3px !important;
	cursor: pointer !important;
	font-size: 16px !important;
	border: 1px solid #fff !important;
}
.t-btn-white:hover a{
	color:#000;
}
.t-btn-white:hover:before{
	background: #fff;
}
.t-btn-black{
	border-color: #000 !important;
}
.t-btn-black:hover{
	background: #fff;
	color:#000 !important;
}

/*button animate*/
.buttonAnimate{
	display: inline-block;
	overflow: hidden;
	position: relative;
}
.buttonAnimate a{
	color:#fff;
	position: absolute;
	top:0;
	left: 0;
	z-index: 99999;
	width: 100%;
	height: 100%;
	text-align: center;
	-webkit-transition:all .3s ease-in-out ;
	-o-transition:all .3s ease-in-out ;
	transition:all .3s ease-in-out ;
}
.buttonAnimate:before{
    content:"";
    width: 110%;
    height: 100%;
    display: inline-block;
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    left: 110%;
    -webkit-transform:skew(-40deg);
    -o-transform:skew(-40deg);
    transform:skew(-40deg);
	-webkit-transition:all .3s ease-in-out ;
	-o-transition:all .3s ease-in-out ;
	transition:all .3s ease-in-out ;
}
.buttonAnimate:hover:before{
	-webkit-transform:skew(0);
    -o-transform:skew(0);
    transform:skew(0);
	-webkit-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;
	left:0;
}
/*fadeIn*/
@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
/* change color */
@keyframes changeColor{
	0%{
		color:auto;
	}
	100%{
		color:#ff3333;
	}
}
/*font-face*/
   @font-face {
	font-family: 'trump';
	src: url("../fonts/TrumpGothicEast_bold.ttf"/*tpa=http://www.vhall.com/public/static/fonts/TrumpGothicEast_bold.ttf*/) format('truetype'); /* IE9 Compat Modes */
	src: url("../fonts/TrumpGothicEast_bold.ttf"/*tpa=http://www.vhall.com/public/static/fonts/TrumpGothicEast_bold.ttf*/) format('truetype');
   }