.da-slider{
	width: 100%;
	min-width: 1200px;
	height: 515px; 
 	position: relative;
	margin:0px;
	overflow: hidden;
    -webkit-transition: background-position 1.4s ease-in-out 0.3s;
	-moz-transition: background-position 1.4s ease-in-out 0.3s;
	-o-transition: background-position 1.4s ease-in-out 0.3s;
	-ms-transition: background-position 1.4s ease-in-out 0.3s;
	transition: background-position 1.4s ease-in-out 0.3s; 
}
.da-slide{
	position: absolute;
	width:100%; 
 	height: 515px;
 	top: 0px;
	right: 0px;
	 
	text-align: left;
}
.da-slide-current{
	z-index: 1000;
}
.da-slider-fb .da-slide{
	left: 100%;
}
.da-slider-fb  .da-slide.da-slide-current{
	left: 0px;
}
.da-slide h2,
.da-slide p,
.da-slide .da-link,
.da-slide .da-img{
	position: absolute;
	opacity: 0;
	 
}
 .da-slider-fb .da-slide .da-img{
	 
	opacity: 1;
}
  
 

 .da-img  nav{margin:0;}
  
.da-dots{
    
	width:266px;
	height:515px;
  text-align:left;
	z-index: 2000;
	-moz-user-select: none;
	-webkit-user-select: none;
	position:relative; left:50%;  margin-left:-600px;
}
.da-dots div{
	display: inline-block;
	position: relative;
	  z-index:9;
	width: 266px;
	padding-left:10px; 
	height: 85px;
	float:left;
	color:#333;
   border-bottom:1px solid #ddd;
  box-sizing:border-box;
	 cursor: pointer;
	

  }
  .da-dots div.da-dots-current:after{
	content: '';
	background-color:#fff;
    width:266px;
	height: 85px;
   box-sizing:border-box;
	position: absolute;
 	top: 0px;
	left: 0px;
    border:7px solid #ddd;
	 border-top:6px solid #ddd;
   
   }
.da-dots  p {position:relative; z-index:9999;}
.da-dots  span {position:relative; z-index:9999;}

  .da-dots div p {font-size:20px; font-weight:500; color:#333;  padding-left:10px; padding-top:15px;}
  .da-dots div  span {font-size:14px; font-weight:300; color:#888;  padding-left:10px; padding-top:0px;}

 
 
.da-arrows{
	-moz-user-select: none;
	-webkit-user-select: none;
}
.da-arrows div{
   display:none;
	position: absolute;
	top: 50%;
	height: 30px;
	width: 30px;
 	background:#ddd;
	cursor: pointer;
	z-index: 2000; 
	opacity: 0;
	box-shadow: 
		1px 1px 1px rgba(0,0,0,0.1) inset, 
		1px 1px 1px rgba(255,255,255,0.1);
	-webkit-transition: opacity 0.4s ease-in-out 0.2s;
	-moz-transition: opacity 0.4s ease-in-out 0.2s;
	-o-transition: opacity 0.4s ease-in-out 0.2s;
	-ms-transition: opacity 0.4s ease-in-out 0.2s;
	transition: opacity 0.4s ease-in-out 0.2s;
}
.da-slider:hover .da-arrows div{
	opacity: 1;
}
.da-arrows div:after{
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	top: 5px;
	left: 5px;
	background: transparent url(../images/arrows.png) no-repeat top left;
	border-radius: 50%;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.da-arrows div:hover:after{
	box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}
.da-arrows div:active:after{
	box-shadow: 1px 1px 1px rgba(255,255,255,0.1);
}
.da-arrows div.da-arrows-next:after{
	background-position: top right;
}
.da-arrows div.da-arrows-prev{
	left: 15px;
}
.da-arrows div.da-arrows-next{
	right: 15px;
}

.da-slide-current h2,
.da-slide-current p,
.da-slide-current .da-link{
	left: 680px;
	opacity: 1;
}
.da-slide-current .da-img{
	left: 0%;
	opacity: 1;
}

.slide_in {width:934px; float:left; position:relative; left:50%;  margin-left:-335px; box-sizing:border-box; }
.slide_in .box {width:95%;  margin-left:5%;   height:515px;  box-sizing:border-box;  background:url('/common/img/main/vi_img.png') no-repeat right top; }
.slide_in .box2 {position:absolute; top:100px; width:100%; float:left;  }
.slide_in .t1 { letter-spacing:-1px;  font-size:25px; font-weight:400; color:#fff; line-height:10px}
.slide_in  .t2 {width:100%; float:left; padding-top:0px;  letter-spacing:-3px;  font-size:60px; font-weight:700; color:#fff;}
.slide_in  a.type1 {margin-top:10px;   display:inline-block;  color:#fff !important; padding:10px 50px;font-size:18px;   font-weight:500; border-radius:50px; border:2px solid #fff;}
.slide_in  a.type2 {margin-top:10px;   display:inline-block;  color:#666 !important; padding:10px 50px;font-size:18px;   font-weight:500; border-radius:50px; border:2px solid #666;}

/* Animation classes and animations */







/* Slide in from the right*/
.da-slide-fromright h2{
	-webkit-animation: fromRightAnim1 0.6s ease-in 0.8s both;
	-moz-animation: fromRightAnim1 0.6s ease-in 0.8s both;
	-o-animation: fromRightAnim1 0.6s ease-in 0.8s both;
	-ms-animation: fromRightAnim1 0.6s ease-in 0.8s both;
	animation: fromRightAnim1 0.6s ease-in 0.8s both;
}
.da-slide-fromright p{
	-webkit-animation: fromRightAnim1 0.6s ease-in 0.8s both;
	-moz-animation: fromRightAnim1 0.6s ease-in 0.8s both;
	-o-animation: fromRightAnim1 0.6s ease-in 0.8s both;
	-ms-animation: fromRightAnim1 0.6s ease-in 0.8s both;
	animation: fromRightAnim1 0.6s ease-in 0.8s both;
}
.da-slide-fromright .da-link{
-webkit-animation: fromRightAnim1 0.6s ease-in 0.8s both;
	-moz-animation: fromRightAnim1 0.6s ease-in 0.8s both;
	-o-animation: fromRightAnim1 0.6s ease-in 0.8s both;
	-ms-animation: fromRightAnim1 0.6s ease-in 0.8s both;
	animation: fromRightAnim1 0.6s ease-in 0.8s both;
}
.da-slide-fromright .da-img{
	-webkit-animation: fromRightAnim4 0.3s ease-in 0.6s both;
	-moz-animation: fromRightAnim4 0.3s ease-in 0.6s both;
	-o-animation: fromRightAnim4 0.3s ease-in 0.6s both;
	-ms-animation: fromRightAnim4 0.3s ease-in 0.6s both;
	animation: fromRightAnim4 0.3s ease-in 0.6s both;
}


@-webkit-keyframes fromRightAnim1{
	0%{ left: 500px; opacity: 0; }
	100%{ left: 680px; opacity: 1; }
}
 @-webkit-keyframes fromRightAnim4{
0%{ left: -3%; opacity: 0; }
	30%{ left: -2%; opacity: 0.2; }
	50%{ left: -1%; opacity: 0.4; }
	100%{ left: 0%; opacity: 1; }
} 


@keyframes fromRightAnim1{
	0%{ left: 500px; opacity: 0; }
	100%{ left: 680px; opacity: 1; }
}
 @keyframes fromRightAnim4{
	0%{ left: -3%; opacity: 0; }
	30%{ left: -2%; opacity: 0.2; }
	50%{ left: -1%; opacity: 0.4; }
	100%{ left: 0%; opacity: 1; }
} 

 
 
/* Slide in from the left*/
.da-slide-fromleft h2{
	-webkit-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
	-moz-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
	-o-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
	-ms-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
	animation: fromLeftAnim1 0.6s ease-in 0.6s both;
}
.da-slide-fromleft p{
	-webkit-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
	-moz-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
	-o-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
	-ms-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
	animation: fromLeftAnim1 0.6s ease-in 0.6s both;
}
.da-slide-fromleft .da-link{
-webkit-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
	-moz-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
	-o-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
	-ms-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
	animation: fromLeftAnim1 0.6s ease-in 0.6s both;
}
.da-slide-fromleft .da-img{
		-webkit-animation: fromRightAnim4 0.3s ease-in 0.6s both;
	-moz-animation: fromRightAnim4 0.3s ease-in 0.6s both;
	-o-animation: fromRightAnim4 0.3s ease-in 0.6s both;
	-ms-animation: fromRightAnim4 0.3s ease-in 0.6s both;
	animation: fromRightAnim4 0.3s ease-in 0.6s both;
}


@-webkit-keyframes fromLeftAnim1{
	0%{ left: 500px; opacity: 0; }
	100%{ left: 680px; opacity: 1; }
}
 @-webkit-keyframes fromLeftAnim4{
	0%{ left: -3%; opacity: 0; }
	30%{ left: -2%; opacity: 0.2; }
	50%{ left: -1%; opacity: 0.4; }
	100%{ left: 0%; opacity: 1; }
}
 

@keyframes fromLeftAnim1{
	0%{ left: 500px; opacity: 0; }
	100%{ left: 680px; opacity: 1; }
}
 @keyframes fromLeftAnim4{
	 0%{ left: -3%; opacity: 0; }
	30%{ left: -2%; opacity: 0.2; }
	50%{ left: -1%; opacity: 0.4; }
	100%{ left: 0%; opacity: 1; }
}
 



 
 
/* Slide out to the right */
.da-slide-toright h2{
-webkit-animation: toLeftAnim1 0.6s ease-in both;
	-moz-animation: toLeftAnim1 0.6s ease-in both;
	-o-animation: toLeftAnim1 0.6s ease-in both;
	-ms-animation: toLeftAnim1 0.6s ease-in both;
	animation: toLeftAnim1 0.6s ease-in both;
}
.da-slide-toright p{
	-webkit-animation: toLeftAnim1 0.6s ease-in both;
	-moz-animation: toLeftAnim1 0.6s ease-in both;
	-o-animation: toLeftAnim1 0.6s ease-in both;
	-ms-animation: toLeftAnim1 0.6s ease-in both;
	animation: toLeftAnim1 0.6s ease-in both;
}
.da-slide-toright .da-link{
	-webkit-animation: toLeftAnim1 0.6s ease-in both;
	-moz-animation: toLeftAnim1 0.6s ease-in both;
	-o-animation: toLeftAnim1 0.6s ease-in both;
	-ms-animation: toLeftAnim1 0.6s ease-in both;
	animation: toLeftAnim1 0.6s ease-in both;
}
.da-slide-toright .da-img{
	-webkit-animation: toRightAnim4 0.6s ease-in both;
	-moz-animation: toRightAnim4 0.6s ease-in both;
	-o-animation: toRightAnim4 0.6s ease-in both;
	-ms-animation: toRightAnim4 0.6s ease-in both;
	animation: toRightAnim4 0.3s ease-in both;
}
@-webkit-keyframes toRightAnim1{
	0%{ left: 680px;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
 @-webkit-keyframes toRightAnim4{
    0%{ left: 0%; opacity: 1; }
	30%{ left: 0%; opacity: 0.4; }
	50%{ left: 0%; opacity: 0.2; }
	100%{ left: 0%; opacity: 0; }
}
 
@keyframes toRightAnim1{
	0%{ left: 680px;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
 @keyframes toRightAnim4{
0%{ left: 0%; opacity: 1; }
	30%{ left: 0%; opacity: 0.4; }
	50%{ left: 0%; opacity: 0.2; }
	100%{ left: 0%; opacity: 0; }}



 
/* Slide out to the left*/
.da-slide-toleft h2{
	-webkit-animation: toLeftAnim1 0.6s ease-in both;
	-moz-animation: toLeftAnim1 0.6s ease-in both;
	-o-animation: toLeftAnim1 0.6s ease-in both;
	-ms-animation: toLeftAnim1 0.6s ease-in both;
	animation: toLeftAnim1 0.6s ease-in both;
}
.da-slide-toleft p{
  -webkit-animation: toLeftAnim1 0.6s ease-in both;
	-moz-animation: toLeftAnim1 0.6s ease-in both;
	-o-animation: toLeftAnim1 0.6s ease-in both;
	-ms-animation: toLeftAnim1 0.6s ease-in both;
	animation: toLeftAnim1 0.6s ease-in both;
}
.da-slide-toleft .da-link{
-webkit-animation: toLeftAnim1 0.6s ease-in both;
	-moz-animation: toLeftAnim1 0.6s ease-in both;
	-o-animation: toLeftAnim1 0.6s ease-in both;
	-ms-animation: toLeftAnim1 0.6s ease-in both;
	animation: toLeftAnim1 0.6s ease-in both;
}
.da-slide-toleft .da-img{
	-webkit-animation: toLeftAnim4 0.6s ease-in both;
	-moz-animation: toLeftAnim4 0.6s ease-in both;
	-o-animation: toLeftAnim4 0.6s ease-in both;
	-ms-animation: toLeftAnim4 0.6s ease-in both;
	animation: toLeftAnim4 0.3s ease-in both;
}
@-webkit-keyframes toLeftAnim1{
	0%{ left: 600px;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
 @-webkit-keyframes toLeftAnim4{
	0%{ left: 0%; opacity: 1; }
	30%{ left: 0%; opacity: 0.4; }
	50%{ left: 0%; opacity: 0.2; }
	100%{ left: 0%; opacity: 0; }
}

@keyframes toLeftAnim1{
	0%{ left: 600px;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
 @keyframes toLeftAnim4{
	0%{ left: 0%; opacity: 1; }
	30%{ left: 0%; opacity: 0.4; }
	50%{ left: 0%; opacity: 0.2; }
	100%{ left: 0%; opacity: 0; }
}