#s5pro .box{ padding: inherit; }
#s5pro .Gradient{ background-image: linear-gradient(to right, #3cfffa, #0e4cd7);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
#s5pro .width-small{ width: 63%; margin: 0% auto; }
#s5pro .width-big{ width: 84%; margin: 0% auto; }
#s5pro img{ vertical-align: bottom; max-width: 100%; width: 100%; }
#s5pro .box-1{ position: relative; overflow: hidden; }
#s5pro .box-1 .box{ position: absolute; width: 33%; left: 54%; top: 37%; }
#s5pro .box-1 .box ul{ overflow: hidden; }
#s5pro .box-1 .box ul li{ float: left; width: calc(33% - 1px); text-align: center; }
#s5pro .box-1 .box ul li.right-border{ border-right: 1px solid #ffffff; }
#s5pro .box-1 .box .bs{ font-size: 4.2vw; line-height: 4.5vw; }
#s5pro .box-1 .box .ms{ font-size: 3.2vw; line-height: 3.5vw; margin: 2% auto 8% auto; }
#s5pro .box-1 .box .ss{ font-size: 1vw; line-height: 1.6vw; color: #ffffff; }
#s5pro .box-2 { padding: 6vw 0px; background-color: #000000; }
#s5pro .box-2 ul{ overflow: hidden; }
#s5pro .box-2 ul li{ width: 23.5%; float: left; position: relative; }
#s5pro .box-2 ul li.right-margin{ margin-right: 2%; }
#s5pro .box-2 ul li.top-margin{ margin-top: 4%; }
#s5pro .box-2 ul li .position{ position: absolute; width: 100%; left: 0%; top: 77%; text-align: center;  }
#s5pro .box-2 ul li .ss{ font-size: 1vw; line-height: 1.2vw; }
#s5pro .box-2 ul li .sss{ color: #ffffff; }
#s5pro .box-2 ul li .position.first{ top: 70%; }
#s5pro .box-3{ position: relative; overflow: hidden; padding: 0px 0px 6vw 0px; background-color: #000000; }
#s5pro .box-3 .box{ width: 50%; margin-right: 8%; color: #ffffff;  }

#s5pro .box-3 .box .bs{ font-size: 2.3vw; line-height: 2.3vw; }
#s5pro .box-3 .box .bs2{ font-size: 1.85vw; line-height: 1.85vw; margin: 2% auto 6% auto; }
#s5pro .box-3 .box .ms{ font-size: 1.6vw; line-height: 2.1vw; }
#s5pro .box-3 .box .ss{ font-size: 1.3vw; line-height: 1.3vw; }
#s5pro .box-3 .box ul li{ margin-top: 8%; }
#s5pro .box-3 .box ul li .top-margin{ margin-top: 1%; font-size: 1vw; }
#s5pro .box-3 .image-right{ position: absolute; max-width: 33%; top: 20%; left: 53%; z-index: 2; }
#s5pro .box-3 .image-right2{ position: absolute; max-width: 33%; top: 20%; left: 53%; z-index: 1;transition: all 0.3s linear;}
#s5pro .box-3 .image-right2.activity{ top: 12%; }
#s5pro .box-4{ position: relative; overflow: hidden;  background-color: #000000; width: 100%; }
#s5pro .box-4 .box{ width: 50%; margin-right: 8%; color: #ffffff; height: 46vw;}
#s5pro .box-4 .box .bs{ font-size: 2.3vw; line-height: 2.3vw; }
#s5pro .box-4 .box .bs2{ font-size: 1.85vw; line-height: 1.85vw; margin: 2% auto 6% auto; }
#s5pro .box-4 .box .ms{ font-size: 1.6vw; line-height: 2.1vw; }
#s5pro .box-4 .box .ss{ font-size: 1vw; line-height: 1.2vw; }
#s5pro .box-4 .phone-box{ position: absolute; max-width: 25%; top: 0%; left: 69%; }
#s5pro .box-4 .shou{ position: absolute;width: 10vw; height: 10vw; left: 20%; bottom: 9%; }
#s5pro .box-4 .shou img{ max-width: 26%; margin: 37%; }
#s5pro .box-4 .upto{ margin-top: 24%; }
  #s5pro .box-4 .upto.activity{
 	animation:upto 1s;
    -moz-animation:upto 1s;                
    -webkit-animation:upto 1s; 
    -o-animation:upto 1s; 
    animation-delay:0.6s;
    -moz-animation-delay:0.6s;
    -webkit-animation-delay:0.6s;
    -o-animation-delay:0.6s;
    animation-iteration-count:1;
    -moz-animation-iteration-count:1;
    -webkit-animation-iteration-count:1;
    -o-animation-iteration-count:1;
    animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
    -o-animation-fill-mode: forwards;
 }
 @-webkit-keyframes upto{
 	0%{ margin-top: 24%; }
 	100%{ margin-top: -155%; }	
 }
 @-moz-keyframes upto{
 	0%{ margin-top: 24%; }
 	100%{ margin-top: -155%; }
 }
 @keyframes upto{
 	0%{ margin-top: 24%; }
 	100%{ margin-top: -155%; }
 }
 #s5pro .box-4 .upto.activity2{
 	animation:upto2 1s;
    -moz-animation:upto2 1s;                
    -webkit-animation:upto2 1s; 
    -o-animation:upto2 1s; 
    animation-delay:0s;
    -moz-animation-delay:0s;
    -webkit-animation-delay:0s;
    -o-animation-delay:0s;
    animation-iteration-count:1;
    -moz-animation-iteration-count:1;
    -webkit-animation-iteration-count:1;
    -o-animation-iteration-count:1;
    animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
    -o-animation-fill-mode: forwards;
 }
 @-webkit-keyframes upto2{
 	0%{ margin-top: -155%; }
 	100%{ margin-top: 24%; }
 }
 @-moz-keyframes upto2{
 	0%{ margin-top: -155%; }
 	100%{ margin-top: 24%; }
 }
 @keyframes upto2{
 	0%{ margin-top: -155%; }
 	100%{ margin-top: 24%; }
 }  
#s5pro .box-4 .phone-box .image-right2{ position: absolute;  top: 0%; left: 0%; z-index: -1; }
#s5pro .box-4 .phone-box .image-right2.activity{
	 animation:showl 0.1s;
	    -moz-animation:showl 0.1s;                
	    -webkit-animation:showl 0.1s; 
	    -o-animation:showl 0.1s; 
	    animation-delay:0.6s;
	    -moz-animation-delay:0.6s;
	    -webkit-animation-delay:0.6s;
	    -o-animation-delay:0.6s;
	    animation-iteration-count:1;
	    -moz-animation-iteration-count:1;
	    -webkit-animation-iteration-count:1;
	    -o-animation-iteration-count:1;
	    animation-fill-mode: forwards;
	    -moz-animation-fill-mode: forwards; 
	    -webkit-animation-fill-mode: forwards; 
	    -o-animation-fill-mode: forwards; 
}
@-webkit-keyframes showl{
	0%{ z-index: -1; }
	100%{ z-index: 3; }	
}
@-moz-keyframes showl{
	0%{ z-index: -1; }
	100%{ z-index: 3; }
}
@keyframes showl{
	0%{ z-index: -1; }
	100%{ z-index: 3; }
}
#s5pro .box-4 .phone-box .zhiwen{ position: absolute; width: 10vw; height: 10vw; left: 20%; bottom: 9%; transition: all 1.5s linear;
	background: url(/new/Images/s5pro/overview/1.png) center no-repeat; background-size: cover; opacity: 0; filter:alpha(opacity=0); z-index: 2; }
#s5pro .box-4 .phone-box .zhiwen.activity{
	animation:light 0.6s;
    -moz-animation:light 0.6s;                
    -webkit-animation:light 0.6s; 
    -o-animation:light 0.6s; 
    animation-iteration-count:1;
    -moz-animation-iteration-count:1;
    -webkit-animation-iteration-count:1;
    -o-animation-iteration-count:1;
    animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
    -o-animation-fill-mode: forwards;
}
@-webkit-keyframes light{
	0%{background: url(/new/Images/s5pro/overview/1.png) center no-repeat; opacity: 0; filter:alpha(opacity=0); background-size: cover;}
	6.5%{background: url(/new/Images/s5pro/overview/1.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	12%{background: url(/new/Images/s5pro/overview/2.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	17.5%{background: url(/new/Images/s5pro/overview/3.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	23%{background: url(/new/Images/s5pro/overview/4.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	28.5%{background: url(/new/Images/s5pro/overview/5.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	34%{background: url(/new/Images/s5pro/overview/6.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	39.5%{background: url(/new/Images/s5pro/overview/7.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	45%{background: url(/new/Images/s5pro/overview/8.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	50.5%{background: url(/new/Images/s5pro/overview/9.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	56%{background: url(/new/Images/s5pro/overview/10.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	61.5%{background: url(/new/Images/s5pro/overview/11.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	67%{background: url(/new/Images/s5pro/overview/12.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	72.5%{background: url(/new/Images/s5pro/overview/13.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	80%{background: url(/new/Images/s5pro/overview/14.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	85.5%{background: url(/new/Images/s5pro/overview/15.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	92%{background: url(/new/Images/s5pro/overview/16.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	97.5%{background: url(/new/Images/s5pro/overview/18.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}	
	100%{background: url(/new/Images/s5pro/overview/18.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}	
}
@-moz-keyframes light{
	0%{background: url(/new/Images/s5pro/overview/1.png) center no-repeat; opacity: 0; filter:alpha(opacity=0); background-size: cover;}
	6.5%{background: url(/new/Images/s5pro/overview/1.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	12%{background: url(/new/Images/s5pro/overview/2.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	17.5%{background: url(/new/Images/s5pro/overview/3.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	23%{background: url(/new/Images/s5pro/overview/4.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	28.5%{background: url(/new/Images/s5pro/overview/5.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	34%{background: url(/new/Images/s5pro/overview/6.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	39.5%{background: url(/new/Images/s5pro/overview/7.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	45%{background: url(/new/Images/s5pro/overview/8.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	50.5%{background: url(/new/Images/s5pro/overview/9.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	56%{background: url(/new/Images/s5pro/overview/10.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	61.5%{background: url(/new/Images/s5pro/overview/11.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	67%{background: url(/new/Images/s5pro/overview/12.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	72.5%{background: url(/new/Images/s5pro/overview/13.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	80%{background: url(/new/Images/s5pro/overview/14.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	85.5%{background: url(/new/Images/s5pro/overview/15.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	92%{background: url(/new/Images/s5pro/overview/16.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	97.5%{background: url(/new/Images/s5pro/overview/18.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}	
	100%{background: url(/new/Images/s5pro/overview/18.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
}
@keyframes light{
	0%{background: url(/new/Images/s5pro/overview/1.png) center no-repeat; opacity: 0; filter:alpha(opacity=0); background-size: cover;}
	6.5%{background: url(/new/Images/s5pro/overview/1.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	12%{background: url(/new/Images/s5pro/overview/2.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	17.5%{background: url(/new/Images/s5pro/overview/3.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	23%{background: url(/new/Images/s5pro/overview/4.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	28.5%{background: url(/new/Images/s5pro/overview/5.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	34%{background: url(/new/Images/s5pro/overview/6.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	39.5%{background: url(/new/Images/s5pro/overview/7.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	45%{background: url(/new/Images/s5pro/overview/8.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	50.5%{background: url(/new/Images/s5pro/overview/9.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	56%{background: url(/new/Images/s5pro/overview/10.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	61.5%{background: url(/new/Images/s5pro/overview/11.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	67%{background: url(/new/Images/s5pro/overview/12.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	72.5%{background: url(/new/Images/s5pro/overview/13.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	80%{background: url(/new/Images/s5pro/overview/14.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	85.5%{background: url(/new/Images/s5pro/overview/15.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	92%{background: url(/new/Images/s5pro/overview/16.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	97.5%{background: url(/new/Images/s5pro/overview/18.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	100%{background: url(/new/Images/s5pro/overview/18.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
}
#s5pro .box-4 .phone-box .zhiwen img{ max-width: 26%; margin: 37%; }

#s5pro .box-4 .phone-box .zhiwen.activity2{
	animation:light2 1.5s;
    -moz-animation:light2 1.5s;                
    -webkit-animation:light2 1.5s; 
    -o-animation:light2 1.5s; 
    animation-iteration-count:1;
    -moz-animation-iteration-count:1;
    -webkit-animation-iteration-count:1;
    -o-animation-iteration-count:1;
    animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
    -o-animation-fill-mode: forwards;
}
@-webkit-keyframes light2{
	0%{background: url(/new/Images/s5pro/overview/17.png) center no-repeat; opacity: 1; filter:alpha(opacity=1); background-size: cover;}
	6.5%{background: url(/new/Images/s5pro/overview/17.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	12%{background: url(/new/Images/s5pro/overview/16.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	17.5%{background: url(/new/Images/s5pro/overview/15.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	23%{background: url(/new/Images/s5pro/overview/14.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	28.5%{background: url(/new/Images/s5pro/overview/13.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	34%{background: url(/new/Images/s5pro/overview/12.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	39.5%{background: url(/new/Images/s5pro/overview/11.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	45%{background: url(/new/Images/s5pro/overview/10.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	50.5%{background: url(/new/Images/s5pro/overview/9.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	56%{background: url(/new/Images/s5pro/overview/8.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	61.5%{background: url(/new/Images/s5pro/overview/7.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	67%{background: url(/new/Images/s5pro/overview/6.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	72.5%{background: url(/new/Images/s5pro/overview/5.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	80%{background: url(/new/Images/s5pro/overview/4.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	85.5%{background: url(/new/Images/s5pro/overview/3.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	92%{background: url(/new/Images/s5pro/overview/2.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	97.5%{background: url(/new/Images/s5pro/overview/1.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}	
	100%{background: url(/new/Images/s5pro/overview/1.png) center no-repeat; opacity: 0; filter:alpha(opacity=0);background-size: cover;}	
}
@-moz-keyframes light2{
	0%{background: url(/new/Images/s5pro/overview/17.png) center no-repeat; opacity: 1; filter:alpha(opacity=1); background-size: cover;}
	6.5%{background: url(/new/Images/s5pro/overview/17.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	12%{background: url(/new/Images/s5pro/overview/16.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	17.5%{background: url(/new/Images/s5pro/overview/15.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	23%{background: url(/new/Images/s5pro/overview/14.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	28.5%{background: url(/new/Images/s5pro/overview/13.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	34%{background: url(/new/Images/s5pro/overview/12.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	39.5%{background: url(/new/Images/s5pro/overview/11.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	45%{background: url(/new/Images/s5pro/overview/10.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	50.5%{background: url(/new/Images/s5pro/overview/9.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	56%{background: url(/new/Images/s5pro/overview/8.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	61.5%{background: url(/new/Images/s5pro/overview/7.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	67%{background: url(/new/Images/s5pro/overview/6.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	72.5%{background: url(/new/Images/s5pro/overview/5.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	80%{background: url(/new/Images/s5pro/overview/4.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	85.5%{background: url(/new/Images/s5pro/overview/3.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	92%{background: url(/new/Images/s5pro/overview/2.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	97.5%{background: url(/new/Images/s5pro/overview/1.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}	
	100%{background: url(/new/Images/s5pro/overview/1.png) center no-repeat; opacity: 0; filter:alpha(opacity=0);background-size: cover;}
}
@keyframes light2{
	0%{background: url(/new/Images/s5pro/overview/17.png) center no-repeat; opacity: 1; filter:alpha(opacity=1); background-size: cover;}
	6.5%{background: url(/new/Images/s5pro/overview/17.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	12%{background: url(/new/Images/s5pro/overview/16.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	17.5%{background: url(/new/Images/s5pro/overview/15.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	23%{background: url(/new/Images/s5pro/overview/14.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	28.5%{background: url(/new/Images/s5pro/overview/13.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	34%{background: url(/new/Images/s5pro/overview/12.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	39.5%{background: url(/new/Images/s5pro/overview/11.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	45%{background: url(/new/Images/s5pro/overview/10.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	50.5%{background: url(/new/Images/s5pro/overview/9.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	56%{background: url(/new/Images/s5pro/overview/8.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	61.5%{background: url(/new/Images/s5pro/overview/7.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	67%{background: url(/new/Images/s5pro/overview/6.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	72.5%{background: url(/new/Images/s5pro/overview/5.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	80%{background: url(/new/Images/s5pro/overview/4.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	85.5%{background: url(/new/Images/s5pro/overview/3.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	92%{background: url(/new/Images/s5pro/overview/2.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}
	97.5%{background: url(/new/Images/s5pro/overview/1.png) center no-repeat; opacity: 1; filter:alpha(opacity=1);background-size: cover;}	
	100%{background: url(/new/Images/s5pro/overview/1.png) center no-repeat; opacity: 0; filter:alpha(opacity=0);background-size: cover;}
}





#s5pro .box-4 .box2{ width: 100%;  color: #ffffff;  margin-top: 100%;  background-color: #000000; padding-top: 4vw;transition: all 0.3s linear; }
#s5pro .box-4 .box2 .bs{ font-size: 2.3vw; line-height: 2.3vw; margin-top: 2%; }
#s5pro .box-4 .box2 .bs2{ font-size: 1.85vw; line-height: 1.85vw; margin: 2% auto 6% auto; }
#s5pro .box-4 .box2 .ms{ font-size: 1.4vw; line-height: 2.1vw; }
#s5pro .box-4 .box2 .ss{ font-size: 1.3vw; line-height: 1.8vw; margin-top: 0%; }
#s5pro .box-4 .box2 .ss.s{ font-size: 1vw; line-height: 1.6vw; margin-top: 0%; }
#s5pro .box-4 .box2 ul { margin-top: 10%; }
#s5pro .box-4 .box2 ul li{ width: 32% ; float: left; }
#s5pro .box-4 .box2 ul li .right-margin{ margin-right: 2%; }
#s5pro .box-5{ background-color: #000000; }
#s5pro .box-5 .box .bs{ font-size: 2.3vw; line-height: 2.3vw; }
#s5pro .box-5 .box .ms{ font-size: 1.85vw; line-height: 1.85vw; margin: 1% auto 3% auto; }
#s5pro .box-5 .box .ss{ font-size: 1.6vw; line-height: 2.1vw; color: #ffffff; margin-bottom: 2%; }
#s5pro .box-5 .width-big{ position: relative; }
#s5pro .box-5 .width-big .box2{ position: absolute; top: 5%; left: 12%; width:24%; }
#s5pro .box-5 .width-big .box2 .bb{ font-size: 1.3vw; line-height: 1.3vw; }
#s5pro .box-5 .width-big .box2 .mm{ font-size: 1.3vw; line-height: 1.3vw; color: #ffffff; margin: 8% auto 3% auto; }
#s5pro .box-5 .width-big .box2 .mm span{ float: right; }
#s5pro .box-5 .width-big .box2 .line{ height: 1.6vw; border-radius: 30px; background-image: linear-gradient(to right, #3cfffa, #0e4cd7); }
#s5pro .box-5 .width-big .box2 .small-width{ width: 86%; }
#s5pro .box-5 .text{ position: absolute; bottom: 2%; width: 30%; left: 12%; font-size: 0.8vw; color: #ffffff; }
#s5pro .box-5 .width-big .box2 .mm span.toleft{ float: inherit; margin-left: 15%; display: inline-block; }
#s5pro .box-6{ background-color: #000000; padding: 2vw 0px; }
#s5pro .box-6 .box .bs{ font-size: 2.3vw; line-height: 2.3vw; }
#s5pro .box-6 .box .bs2{ font-size: 1.85vw; line-height: 1.85vw;  margin-top:1%;}
#s5pro .box-6 .box .ms{ font-size: 1.6vw; line-height: 2.1vw; margin: 2% auto 3% auto; color: #ffffff; }
#s5pro .box-6 .box .ss{ font-size: 1.4vw; line-height: 1.8vw; color: #ffffff; margin-bottom: 2%; }
#s5pro .box-6 .width-big{ position: relative; }
#s5pro .box-6 .image-center{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; max-width: 60%; }
#s5pro .box-7{ background-color: #000000; padding: 2vw 0px; }
#s5pro .box-7 .box .bs{ font-size: 2.3vw; line-height: 2.3vw; }
#s5pro .box-7 .box .bs2{ font-size: 1.85vw; line-height: 1.85vw;  margin-top:1%;}
#s5pro .box-7 .box .ms{ font-size: 1.6vw; line-height: 2.1vw; margin: 2% auto 3% auto; color: #ffffff; }
#s5pro .box-7 .box .ss{ font-size: 1.4vw; line-height: 1.8vw; color: #ffffff; margin-bottom: 2%; }
#s5pro .box-7 .width-big{ position: relative; }
#s5pro .box-7 .image-center{ position: absolute; margin: auto; left: 20%; bottom: 0%; max-width: 60%; }
#s5pro .box-7 ul{ overflow: hidden; width: 40%; position: absolute; top: 0%; left: 30%; }
#s5pro .box-7 ul li{ float: left; width:50%; text-align: center; color: #ffffff; }
#s5pro .box-7 ul li img{ max-width: 30%; }
#s5pro .box-7 ul li .bbs{ font-size: 1.3vw; line-height: 1.3vw; margin: 5% auto 3% auto; }
#s5pro .box-7 ul li .mms{ font-size: 1.3vw; line-height: 1.3vw; }
#s5pro .box-8{ background-color: #000000; padding: 2vw 0px; }
#s5pro .box-8 .box .bs{ font-size: 2.3vw; line-height: 2.3vw; }
#s5pro .box-8 .box .bs2{ font-size: 1.85vw; line-height: 1.85vw;  margin-top:1%;}
#s5pro .box-8 .box .ms{ font-size: 1.8vw; line-height: 1.8vw; margin: 2% auto 3% auto; color: #ffffff; }
#s5pro .box-8 .box .ss{ font-size: 1.4vw; line-height: 1.8vw; color: #ffffff; margin-bottom: 2%; }
#s5pro .box-8 .width-big{ position: relative; }
#s5pro .box-8 .line{ position: absolute; height: 2px; background-color: #ffffff; width: 17%;  }
#s5pro .box-8 .line1{ left: 56.5%; top: 47%;width: 10%; }
#s5pro .box-8 .line2{ right: 52%; top: 34.5%; }
#s5pro .box-8 .line3{ right: 52%;top: 47.5%; }
#s5pro .box-8 .line4{ right: 52%; top: 60.5%;}
#s5pro .box-8 .position{ position: absolute; width: 20%; overflow: hidden; }
#s5pro .box-8 .position div{ float: left; color: #ffffff;  vertical-align: middle; }
#s5pro .box-8 .position div img{ vertical-align: middle; max-width: 100%; }
#s5pro .box-8 .position div img.top{ margin-top: 25%; }
#s5pro .box-8 .position div.left{ width: 12%; }
#s5pro .box-8 .position div.right{ width: 84%; font-size: 1.2vw; line-height: 1.8vw; margin-left: 4%; }
#s5pro .box-8 .position1{ right: 66%; top: 32%; }
#s5pro .box-8 .position2{ right: 66%; top: 44.5%; }
#s5pro .box-8 .position3{ right: 66%; top: 59%; }
#s5pro .box-8 .position4{ left: 69%; top: 46%; }
#s5pro .box-8 .text{ position: absolute; bottom: 2%; width: 20%; left: 45%; font-size: 0.8vw; color: #ffffff; }
#s5pro .box-8 .mt{ margin-top: 1%; }
#s5pro .box-9{ background-color: #000000; padding: 2vw 0px; overflow: hidden; position: relative; }
#s5pro .box-9 .box{ overflow: visible; }
#s5pro .box-9 .box .bs{ font-size: 2.3vw; line-height: 2.3vw; }
#s5pro .box-9 .box .bs2{ font-size: 1.85vw; line-height: 1.85vw;  margin-top:1%;}
#s5pro .box-9 .box .ms{ font-size: 1.6vw; line-height: 2.1vw; margin: 2% auto 3% auto; color: #ffffff; }
#s5pro .box-9 .box .ss{ font-size: 1.4vw; line-height: 1.8vw; color: #ffffff; margin-bottom: 2%; }
#s5pro .box-9 .width-big{ position: relative; }
#s5pro .box-9 .border-radius{ border-radius: 30px; overflow: hidden; position: relative; }
#s5pro .box-9 .border-radius .img1{ position: absolute; top: 0%; left: 0%; z-index: 1; transform: scale(1); }
#s5pro .box-9 .border-radius .img2{ position: absolute; top: 0%; left: 0%; z-index: 2; transform: scale(1); }
#s5pro .box-9  .baoguo{ overflow: hidden; border-radius: 30px; }
#s5pro .box-9 .num-box{ position: absolute; right: -10%; top: 0%; height: 100%; width: 5%; z-index: 22; text-align: center;}
#s5pro .box-9 .wid{ font-size: 1vw; line-height: 1vw; text-align: right; color: #ffffff; margin-top: 2%;  }
#s5pro .box-9 .box ul{ overflow: hidden;  }
#s5pro .box-9 .box ul li{ float: left; width: 25%; text-align: center; color: #ffffff; }
#s5pro .box-9 .box ul li img{ max-width: 20%; }
#s5pro .box-9 .box ul li .bbb{ font-size: 1.2vw; height: 1.2vw; margin: 3% auto 1% auto; }
#s5pro .box-9 .box ul li .sss{ font-size: 1vw; height: 1vw; margin-bottom: 8%;}

#s5pro .box-9 .num-box .auto-height{ position: absolute; width: 100%; top: 54%; left: 0%; transition:all 0.2s linear; }
#s5pro .box-9 .num-box .auto-height p{ font-size: 2vw; line-height: 2vw; color: #ffffff; margin-top: 100%;transition:all 0.2s linear; }
#s5pro .box-9 .num-box .auto-height .p1{  font-size: 3vw; }
#s5pro .box-10{ background-color: #000000; padding: 2vw 0px; }
#s5pro .box-10 .box .bs{ font-size: 2.3vw; line-height: 2.3vw; }
#s5pro .box-10 .box .bs2{ font-size: 1.85vw; line-height: 1.85vw;  margin-top:1%;}
#s5pro .box-10 .box .ms{ font-size: 1.6vw; line-height: 2.1vw; margin: 2% auto 3% auto; color: #ffffff; }
#s5pro .box-10 .box .ss{ font-size: 1.4vw; line-height: 1.8vw; color: #ffffff; margin-bottom: 2%; }
#s5pro .box-10 .width-big{ position: relative; }
#s5pro .box-10 .border-radius{ border-radius: 30px; overflow: hidden; }
#s5pro .box-11{ background-color: #000000; padding: 2vw 0px; }
#s5pro .box-11 .box .bs{ font-size: 2.3vw; line-height: 2.3vw; }
#s5pro .box-11 .box .ms{ font-size: 1.6vw; line-height: 2.1vw; margin: 2% auto 3% auto; color: #ffffff; }
#s5pro .box-11 .box .ss{ font-size: 1.4vw; line-height: 1.8vw; color: #ffffff; margin-bottom: 2%; }
#s5pro .box-11 .width-big{ position: relative; }
#s5pro .box-11 .border-radius{ border-radius: 30px; overflow: hidden; }
#s5pro .box-12{ background-color: #000000; padding: 2vw 0px; }
#s5pro .box-12 .hello{ position: relative; overflow: hidden; height: 40vw; }
#s5pro .box-12 .jl{ position: absolute;width: 30vw; height: 30vw; top: 0%; left: 57%; background: url(/new/Images/s5pro/overview/banner12.jpg); }
#s5pro .box-12 .jl.activity{
	 animation:jl 1s;
	    -moz-animation:jl 1s;                
	    -webkit-animation:jl 1s; 
	    -o-animation:jl 1s; 
	    animation-delay:1s;
	    -moz-animation-delay:1s;
	    -webkit-animation-delay:1s;
	    -o-animation-delay:1s;
	    animation-iteration-count:1;
	    -moz-animation-iteration-count:1;
	    -webkit-animation-iteration-count:1;
	    -o-animation-iteration-count:1;
	    animation-fill-mode: forwards;
	    -moz-animation-fill-mode: forwards; 
	    -webkit-animation-fill-mode: forwards; 
	    -o-animation-fill-mode: forwards; 
}
@-webkit-keyframes jl{
	0%{ left: 57%; width: 30vw; height: 30vw; }
	20%{ left: 35%; width: 30vw; height: 30vw; }
	100%{ left: 0%; width: 100%; height: 30vw; }	
}
@-moz-keyframes jl{
	0%{ left: 57%; width: 30vw; height: 30vw; }
	20%{ left: 35%; width: 30vw; height: 30vw; }
	100%{ left: 0%; width: 100%; height: 100%; }
}
@keyframes jl{
	0%{ left: 57%; width: 30vw; height: 30vw; }
	20%{ left: 35%; width: 30vw; height: 30vw; }
	100%{ left: 0%; width: 100%; height: 100%; }
}
#s5pro .box-12 .jl.activity2{
	 animation:jl2 1s;
	    -moz-animation:jl2 1s;                
	    -webkit-animation:jl2 1s; 
	    -o-animation:jl2 1s; 
	    animation-delay:0s;
	    -moz-animation-delay:0s;
	    -webkit-animation-delay:0s;
	    -o-animation-delay:0s;
	    animation-iteration-count:1;
	    -moz-animation-iteration-count:1;
	    -webkit-animation-iteration-count:1;
	    -o-animation-iteration-count:1;
	    animation-fill-mode: forwards;
	    -moz-animation-fill-mode: forwards; 
	    -webkit-animation-fill-mode: forwards; 
	    -o-animation-fill-mode: forwards; 
}
@-webkit-keyframes jl2{
	0%{ left: 0%; width: 100%; height: 100%; }
	80%{ left: 35%; width: 30vw; height: 30vw; }
	100%{ left: 57%; width: 30vw; height: 30vw; }	
}
@-moz-keyframes jl2{
	0%{ left: 0%; width: 100%; height: 100%; }
	80%{ left: 35%; width: 30vw; height: 30vw; }
	100%{ left: 57%; width: 30vw; height: 30vw; }
}
@keyframes jl2{
	0%{ left: 0%; width: 100%; height: 100%; }
	80%{ left: 35%; width: 30vw; height: 30vw; }
	100%{ left: 57%; width: 30vw; height: 30vw; }
}

#s5pro .box-12 .box-box{ width: 36%;margin-left: 18.5%; margin-top: 10%; }
#s5pro .box-12 .box .bs{ font-size: 2.3vw; line-height: 2.3vw; }
#s5pro .box-12 .box .bs2{ font-size: 1.85vw; line-height: 1.85vw;  margin-top:1%;}
#s5pro .box-12 .box .ms{ font-size: 1.6vw; line-height: 2.1vw; margin: 6% auto 3% auto; color: #ffffff; }
#s5pro .box-12 .box .ss{ font-size: 1.4vw; line-height: 1.8vw; color: #ffffff; margin-bottom: 2%; }
#s5pro .box-13{ background-color: #000000; padding: 2vw 0px; }
#s5pro .box-13 .box .bs{ font-size: 2.3vw; line-height: 2.3vw; }
#s5pro .box-13 .box .bs2{ font-size: 1.85vw; line-height: 1.85vw;  margin-top:1%;}
#s5pro .box-13 .box .ms{ font-size: 1.6vw; line-height: 2.1vw; margin: 2% auto 3% auto; color: #ffffff; }
#s5pro .box-13 .box .ss{ font-size: 1.4vw; line-height: 1.8vw; color: #ffffff; margin-bottom: 2%; }
#s5pro .box-13 .width-big{ position: relative; }
#s5pro .box-13 .border-radius{ border-radius: 30px; overflow: hidden; }
#s5pro .box-14{ background-color: #000000; padding: 2vw 0px; }
#s5pro .box-14 .box .bs{ font-size: 2.3vw; line-height: 2.3vw; }
#s5pro .box-14 .box .bs2{ font-size: 1.85vw; line-height: 1.85vw;  margin-top:1%;}
#s5pro .box-14 .box .ms{ font-size: 1.6vw; line-height: 2.1vw; margin: 2% auto 3% auto; color: #ffffff; }
#s5pro .box-14 .box .ss{ font-size: 1.4vw; line-height: 1.8vw; color: #ffffff; margin-bottom: 2%; }
#s5pro .box-14 .width-big{ position: relative; }
#s5pro .box-14 .border-radius{ border-radius: 30px; overflow: hidden; }
#s5pro .box-15{ background-color: #000000; padding: 2vw 0px; }
#s5pro .box-15 .box .bs{ font-size: 2.3vw; line-height: 2.3vw; }
#s5pro .box-15 .box .bs2{ font-size: 1.85vw; line-height: 1.85vw;  margin-top:1%;}
#s5pro .box-15 .box .ms{ font-size: 1.8vw; line-height: 1.8vw; margin: 2% auto 3% auto; color: #ffffff; }
#s5pro .box-15 .box .ss{ font-size: 1.4vw; line-height: 1.8vw; color: #ffffff; margin-bottom: 2%; }
#s5pro .box-15 .width-big{ position: relative; }
#s5pro .box-15 .border-radius{ border-radius: 30px; overflow: hidden; }
#s5pro .box-15  .image{ position: absolute; max-width: 40%; bottom: 0%; left: 30%; }
#s5pro .box-16{ background-color: #000000; padding: 2vw 0px; }
#s5pro .box-16 .box .bs{ font-size: 2.3vw; line-height: 2.3vw; }
#s5pro .box-16 .box .bs2{ font-size: 1.85vw; line-height: 1.85vw;  margin-top:1%;}
#s5pro .box-16 .box .ms{ font-size: 1.6vw; line-height: 2.1vw; margin: 2% auto 3% auto; color: #ffffff; }
#s5pro .box-16 .box .ss{ font-size: 1.4vw; line-height: 1.8vw; color: #ffffff; margin-bottom: 2%; }
#s5pro .box-16 .width-big{ position: relative; }
#s5pro .box-16 .border-radius{ border-radius: 30px; overflow: hidden; }
#s5pro .box-16  .image{ position: absolute; max-width: 40%; bottom: 0%; left: 30%; }
#s5pro .box-16 .android{ height: 1.9vw; width: auto; vertical-align: top; }
#s5pro .box-17{ background-color: #000000; padding: 2vw 0px; }
#s5pro .box-17 .box .bs{ font-size: 2.3vw; line-height: 2.3vw; }
#s5pro .box-17 .box .bs2{ font-size: 1.85vw; line-height: 1.85vw;  margin-top:1%;}
#s5pro .box-17 .box .ms{ font-size: 1.6vw; line-height: 2.1vw; margin: 2% auto 3% auto; color: #ffffff; }
#s5pro .box-17 .box .ss{ font-size: 1.4vw; line-height: 1.8vw; color: #ffffff; margin-bottom: 2%; }
#s5pro .box-17 .width-big{ position: relative; }
#s5pro .box-17 .border-radius{ border-radius: 30px; overflow: hidden; }