.sub_vi  {width:100%; float:right;   height:275px;  position:relative;  }
.sub_vi .gold   { position:absolute; left:200px; margin-top:20px; }
.sub_vi .text   { position:absolute; right:100px; margin-top:70px; }
.bg1  {background:url('/common/img/common/sub_vi.png') no-repeat top right; }
.bg2  {background:url('/common/img/common/sub_vi_bg2.png') no-repeat top right; }
.bg3  {background:url('/common/img/common/sub_vi_bg3.png') no-repeat top right; }
.bg4  {background:url('/common/img/common/sub_vi_bg4.png') no-repeat top right; }
 



.sub_vi .gold {
	-webkit-animation: toLeftAnim1 3s ease-in both;
	-moz-animation: toLeftAnim1 3s ease-in both;
	-o-animation: toLeftAnim1 3s ease-in both;
	-ms-animation: toLeftAnim1 3s ease-in both;
	animation: toLeftAnim1 3s ease-in both;

	-webkit-animation-iteration-count:infinite;
	-moz-animation-iteration-count:infinite;
	-o-animation-iteration-count:infinite;
	-ms-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
}
 
@-webkit-keyframes toLeftAnim1{
 	0%{ top:0px;  opacity: 0.1; }
	10%{ top:7px;  opacity: 0.1; }
	20%{ top:14px;  opacity: 0.3; }
	30%{ top:21px;  opacity: 0.5; }
	40%{ top:28px;  opacity: 0.7; }
	50%{ top:35px;  opacity: 1; }
	60%{ top:28px;  opacity: 0.8; }
	70%{ top:21px; opacity: 0.6; }
	80%{ top:14px; opacity: 0.4; }
	90%{ top:7px; opacity: 0.2; }
	100%{ top:0px; opacity: 0.1; }
}
 
@-moz-keyframes toLeftAnim1{
	0%{ top:0px;  opacity: 0.1; }
	10%{ top:7px;  opacity: 0.1; }
	20%{ top:14px;  opacity: 0.3; }
	30%{ top:21px;  opacity: 0.5; }
	40%{ top:28px;  opacity: 0.7; }
	50%{ top:35px;  opacity: 1; }
	60%{ top:28px;  opacity: 0.8; }
	70%{ top:21px; opacity: 0.6; }
	80%{ top:14px; opacity: 0.4; }
	90%{ top:7px; opacity: 0.2; }
	100%{ top:0px; opacity: 0.1; }
}
 
@-o-keyframes toLeftAnim1{
	0%{ top:0px;  opacity: 0.1; }
	10%{ top:7px;  opacity: 0.1; }
	20%{ top:14px;  opacity: 0.3; }
	30%{ top:21px;  opacity: 0.5; }
	40%{ top:28px;  opacity: 0.7; }
	50%{ top:35px;  opacity: 1; }
	60%{ top:28px;  opacity: 0.8; }
	70%{ top:21px; opacity: 0.6; }
	80%{ top:14px; opacity: 0.4; }
	90%{ top:7px; opacity: 0.2; }
	100%{ top:0px; opacity: 0.1; }
}
 
@-ms-keyframes toLeftAnim1{
	0%{ top:0px;  opacity: 0.1; }
	10%{ top:7px;  opacity: 0.1; }
	20%{ top:14px;  opacity: 0.3; }
	30%{ top:21px;  opacity: 0.5; }
	40%{ top:28px;  opacity: 0.7; }
	50%{ top:35px;  opacity: 1; }
	60%{ top:28px;  opacity: 0.8; }
	70%{ top:21px; opacity: 0.6; }
	80%{ top:14px; opacity: 0.4; }
	90%{ top:7px; opacity: 0.2; }
	100%{ top:0px; opacity: 0.1; }
}
 
@keyframes toLeftAnim1{
	0%{ top:0px;  opacity: 0.1; }
	10%{ top:7px;  opacity: 0.1; }
	20%{ top:14px;  opacity: 0.3; }
	30%{ top:21px;  opacity: 0.5; }
	40%{ top:28px;  opacity: 0.7; }
	50%{ top:35px;  opacity: 1; }
	60%{ top:28px;  opacity: 0.8; }
	70%{ top:21px; opacity: 0.6; }
	80%{ top:14px; opacity: 0.4; }
	90%{ top:7px; opacity: 0.2; }
	100%{ top:0px; opacity: 0.1; }
}
 









.sub_vi .text {
-webkit-animation: toLeftAnim2 3s ease-in both;
	-moz-animation: toLeftAnim2 3s ease-in both;
	-o-animation: toLeftAnim2 3s ease-in both;
	-ms-animation: toLeftAnim2 3s ease-in both;
	animation: toLeftAnim2 3s ease-in both;

	animation-duration:0.7s;
	-webkit-animation-duration:0.7s;
	 

	-webkit-animation-iteration-count:1;
	-moz-animation-iteration-count:1;
	-o-animation-iteration-count:1;
	-ms-animation-iteration-count:1;
	animation-iteration-count:1;
}
 
@-webkit-keyframes toLeftAnim2{
 	0%{ right:0px;  opacity: 0.1; }
 	10%{ right:20px;  opacity: 0.1; }
 	20%{ right:30px;  opacity: 0.2; }
 	30%{ right:40px;  opacity: 0.3; }
 	40%{ right:50px;  opacity: 0.4; }
 	50%{ right:60px;  opacity: 0.5; }
 	60%{ right:70px;  opacity: 0.6; }
 	70%{ right:80px;  opacity: 0.7; }
 	80%{ right:90px;  opacity: 0.8; }
 	90%{ right:100px;  opacity: 0.9; }
  	100%{ right:110px;  opacity: 1; }
	 
}
 

 @keyframes toLeftAnim2{
 	0%{ right:0px;  opacity: 0.1; }
 	10%{ right:20px;  opacity: 0.1; }
 	20%{ right:30px;  opacity: 0.2; }
 	30%{ right:40px;  opacity: 0.3; }
 	40%{ right:50px;  opacity: 0.4; }
 	50%{ right:60px;  opacity: 0.5; }
 	60%{ right:70px;  opacity: 0.6; }
 	70%{ right:80px;  opacity: 0.7; }
 	80%{ right:90px;  opacity: 0.8; }
 	90%{ right:100px;  opacity: 0.9; }
  	100%{ right:110px;  opacity: 1; }
	 
}
 

 @-moz-keyframes toLeftAnim2{
 	0%{ right:0px;  opacity: 0.1; }
 	10%{ right:20px;  opacity: 0.1; }
 	20%{ right:30px;  opacity: 0.2; }
 	30%{ right:40px;  opacity: 0.3; }
 	40%{ right:50px;  opacity: 0.4; }
 	50%{ right:60px;  opacity: 0.5; }
 	60%{ right:70px;  opacity: 0.6; }
 	70%{ right:80px;  opacity: 0.7; }
 	80%{ right:90px;  opacity: 0.8; }
 	90%{ right:100px;  opacity: 0.9; }
  	100%{ right:110px;  opacity: 1; }
	 
}