.scrollBar{ position: relative; left: 0; top: 0; width: 100%; height: 100%;}
.scrollBar .banner{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.scrollBar .banner ul{}
.scrollBar .banner ul li{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;
/*     transition: width 1.2s cubic-bezier(0.35, 0.85, 0.55, 1) 0.2s;
     -webkit-transition: width 1.2s cubic-bezier(0.35, 0.85, 0.55, 1) 0.2s;
     -moz-transition: width 1.2s cubic-bezier(0.35, 0.85, 0.55, 1) 0.2s;*/
}
.visb{
		-webkit-animation: fadeIn .8s ease-in-out both;
	-moz-animation: fadeIn .8s ease-in-out both;
	-ms-animation: fadeIn .8s ease-in-out both;
	-o-animation: fadeIn .8s ease-in-out both;
	animation: fadeIn .8s ease-in-out both;

	}
@-webkit-keyframes fadeIn {
	0% { opacity:.3; }
	100%{ opacity:1;}
}
@keyframes fadeIn {
	0% { opacity: .3; }
	100%{ opacity:1;}
}
@-moz-keyframes fadeIn {
	0% { opacity:.3; }
	100%{ opacity:1;}
}
@-ms-keyframes fadeIn {
	0% { opacity:.3; }
	100%{ opacity:1;}
}
@-o-keyframes fadeIn {
	0% { opacity:.3; }
	100%{ opacity:1;}
}
.scrollBar .banner ul li .imgTimes{ width: 100% !important; height: 100%; position: relative; z-index: 5; left: 0; top: 0;
	background-repeat: no-repeat !important; 
	background-position: center center !important;
	background-size: 100% 100% !important;
}
.scrollBar .banner ul li video{ position: absolute; left: 0; top: 0; width: 0%;/* height: auto;*/ object-fit: cover; object-position: center center; z-index: 1;
/*	 transition: width 1.2s cubic-bezier(0.35, 0.85, 0.55, 1) 0s;
     -webkit-transition: width 1.2s cubic-bezier(0.35, 0.85, 0.55, 1) 0s;
     -moz-transition: width 1.2s cubic-bezier(0.35, 0.85, 0.55, 1) 0s;*/
}
.scrollBar .banner ul li .imgTimes>article{ position: absolute; left: 10%; bottom: 15%;}
.scrollBar .banner ul li .imgTimes>article .banTops{ font-size: 0;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	perspective: 800px;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
}
.scrollBar .banner ul li .imgTimes>article .banTops small{ display: inline-block; vertical-align: middle; margin: 0 8px; 
	opacity: 0;
	transform: matrix(0.5, 0, 0, 0.5, 0, 0);
	-webkit-transform: matrix(0.5, 0, 0, 0.5, 0, 0);
	-moz-transform: matrix(0.5, 0, 0, 0.5, 0, 0);
}
.scrollBar .banner ul li .imgTimes>article .banTops em{ display: inline-block; vertical-align: middle; margin: 0 8px; 
    opacity: 0;
	transform: matrix(1, 0, 0, 1, 0, -80);
	-webkit-transform: matrix(1, 0, 0, 1, 0, -80);
	-moz-transform: matrix(1, 0, 0, 1, 0, -80);	
}
.scrollBar .banner ul li .imgTimes>article .banTops em:nth-of-type(2){
	 opacity: 0;
	 transform: matrix(1, 0, 0, 1, 0, -80);
	 -webkit-transform: matrix(1, 0, 0, 1, 0, -80);
	 -moz-transform: matrix(1, 0, 0, 1, 0, -80);
}
.scrollBar .banner ul li .imgTimes>article .banTops small,
.scrollBar .banner ul li .imgTimes>article .banTops em,
.scrollBar .banner ul li .imgTimes>article .banText i,
.scrollBar .banner ul li .imgTimes>article .banText span{
	transition: all 200ms cubic-bezier(0.35, 0.85, 0.55, 1) 0s;
	-webkit-transition: all 200ms cubic-bezier(0.35, 0.85, 0.55, 1) 0s;
	-moz-transition: all 200ms cubic-bezier(0.35, 0.85, 0.55, 1) 0s;
}
.scrollBar .banner ul li .imgTimes>article .banTops em:nth-of-type(1){
	transition: all 1000ms cubic-bezier(0.35, 0.85, 0.55, 1) 0.6s;
	-webkit-transition: all 1000ms cubic-bezier(0.35, 0.85, 0.55, 1) 0.6s;
	-moz-transition: all 1000ms cubic-bezier(0.35, 0.85, 0.55, 1) 0.6s;
}
.scrollBar .banner ul li .imgTimes>article .banTops em:nth-of-type(2){
	transition: all 1000ms cubic-bezier(0.35, 0.85, 0.55, 1) 1.2s;
	-webkit-transition: all 1000ms cubic-bezier(0.35, 0.85, 0.55, 1) 1.2s;
	-moz-transition: all 1000ms cubic-bezier(0.35, 0.85, 0.55, 1) 1.2s;
}
.scrollBar .banner ul li .imgTimes>article .banText{ font-size: 0; margin-top: 20px;}
.scrollBar .banner ul li .imgTimes>article .banText i{ display: inline-block; vertical-align: middle; width: 0px; height: 1px; background-color: #fff;}
.scrollBar .banner ul li .imgTimes>article .banText span{ display: inline-block; width: 0px; vertical-align: middle; margin-left: 8px; overflow: hidden;}
.scrollBar .banner ul li .imgTimes>article .banText span font{ display: inline-block; width: 400px; font-size: 14px; color: #fff;}
.scrollBar .banner ul li.curs{ width: 0%;}
.scrollBar .banner ul li.visb{ width: 100%;}
.scrollBar .banner ul li.visb video{ width: 100% !important;}
.scrollBar .banner ul li.visb .imgTimes>article .banTops small,
.scrollBar .banner ul li.visb .imgTimes>article .banTops em{ opacity: 1;
	transform: matrix(1, 0, 0, 1, 0, 0);
	-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
	-moz-transform: matrix(1, 0, 0, 1, 0, 0);
}
.scrollBar .banner ul li.visb .imgTimes>article .banTops small{ opacity: 1;
	transform: matrix(1, 0, 0, 1, 0, 0);
	-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
	-moz-transform: matrix(1, 0, 0, 1, 0, 0);
	transition: all 1000ms cubic-bezier(0.35, 0.85, 0.55, 1) 1.4s;
	-webkit-transition: all 1000ms cubic-bezier(0.35, 0.85, 0.55, 1) 1.4s;
	-moz-transition: all 1000ms cubic-bezier(0.35, 0.85, 0.55, 1) 1.4s;
}
.scrollBar .banner ul li.visb .imgTimes>article .banText i{ width: 35px;
	transition: all 300ms cubic-bezier(0.35, 0.85, 0.55, 1) 1.5s;
	-webkit-transition: all 300ms cubic-bezier(0.35, 0.85, 0.55, 1) 1.5s;
	-moz-transition: all 300ms cubic-bezier(0.35, 0.85, 0.55, 1) 1.5s;
}
.scrollBar .banner ul li.visb .imgTimes>article .banText span{ width: 400px;
	transition: all 1500ms cubic-bezier(0.35, 0.85, 0.55, 1) 1.7s;	
	-webkit-transition: all 1500ms cubic-bezier(0.35, 0.85, 0.55, 1) 1.7s;	
	-moz-transition: all 1500ms cubic-bezier(0.35, 0.85, 0.55, 1) 1.7s;	
}
.index-waper-box{ position: absolute; bottom: 0; width:1500px; left:50%; margin-left:-750px; height: 100px; overflow: hidden; z-index: 9;
	perspective: 800px;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
}
.index-back-box{ width:100%; height: 100px;  position: absolute; bottom:0px; overflow: hidden;
    transform-origin: bottom;
    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    transform: rotateX(0deg) translate3d(0,0,0);
    -webkit-transform: rotateX(0deg) translate3d(0,0,0);
    -moz-transform: rotateX(0deg) translate3d(0,0,0);    
     transition: all .65s cubic-bezier(0.55,0.65,0.55,1) 0s;
     -webkit-transition: all .65s cubic-bezier(0.55,0.65,0.55,1) 0s;
     -moz-transition: all .65s cubic-bezier(0.55,0.65,0.55,1) 0s;
}
.index-back-box.active{
    transform: rotateX(100deg) translate3d(0,0,0);
    -webkit-transform: rotateX(100deg) translate3d(0,0,0);
    -moz-transform: rotateX(100deg) translate3d(0,0,0);	
}
.index-back-box .sub-arrows{ position: absolute; left: 3px; top: 0; width:220px; height: 100%; line-height: 100px; font-size: 0;}
.index-back-box .sub-arrows i.icom{ display: inline-block; vertical-align: top; width:103px; height: 100%; cursor: pointer; position: relative;}
.index-back-box .sub-arrows i.icom:after{
	transform: scale(0,1);
	-webkit-transform: scale(0,1);
	-moz-transform: scale(0,1);
	transition: all .3s ease-out 0s;
	-webkit-transition: all .3s ease-out 0s;
	-moz-transition: all .3s ease-out 0s;
}
.index-back-box .sub-arrows i.icom font{ color: #000;
	transition: all .3s ease-out 0s;
	-webkit-transition: all .3s ease-out 0s;
	-moz-transition: all .3s ease-out 0s;
}
.index-back-box .sub-arrows i.icom.prev font{ position: absolute; left: -3px;}
.index-back-box .sub-arrows i.icom.next font{ position: absolute; right: -3px;}
.index-back-box .sub-arrows i:hover:after{
	transform: scale(1,1);
	-webkit-transform: scale(1,1);
	-moz-transform: scale(1,1);
}
.index-back-box .sub-arrows i.icom.prev:hover font{ left: -7px;}
.index-back-box .sub-arrows i.icom.next:hover font{ right:-7px;}
.index-back-box .sub-share{ position: absolute; right: 15px; top: 0; width: auto; height: 100%; display: table; cursor: pointer;}
.index-back-box .sub-share .tels{ display: table-cell; vertical-align: middle;}
.index-back-box .sub-share .tels span{ display: inline-block;}
.index-back-box .sub-share .tels .cc1{
	opacity: 0;
	filter: alpha(opacity='0');
	transform: translateX(-40px);
	-webkit-transform: translateX(-40px);
	-moz-transform: translateX(-40px);
	transition: all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-moz-transition: all 0.4s ease-in-out 0s;
}

.index-back-box .sub-share .tels .cc2{
	transform: translateX(80px);
	-webkit-transform: translateX(80px);
	-moz-transform: translateX(80px);
	transition: all 0.7s ease 0s;
	-webkit-transition: all 0.7s ease 0s;
	-moz-transition: all 0.7s ease 0s;
}
.index-back-box .sub-share .sider-tel{ display: table-cell; vertical-align: middle; font-size: 0;
    opacity: 0;
    filter: alpha(opacity='0');
 	transform: translateX(130px);
 	-webkit-transform: translateX(130px);
 	-moz-transform: translateX(130px);
 	transition: all 0.4s cubic-bezier(0.4, 0.8, 0.6, 1) 0s;
 	-webkit-transition: all 0.4s cubic-bezier(0.4, 0.8, 0.6, 1) 0s;
 	-moz-transition: all 0.4s cubic-bezier(0.4, 0.8, 0.6, 1) 0s;
}
.index-back-box .sub-share .sider-tel a{ display: inline-block; font-size: 12px; color: #000; margin: 0 8px;
    opacity: 0;
    filter: alpha(opacity='0');
    transform: translateX(50px);
    -webkit-transform: translateX(50px);
    -moz-transform: translateX(50px);
    transition: all 0.4s ease-in-out 0s;
    -webkit-transition: all 0.4s ease-in-out 0s;
}
.index-back-box .sub-share:hover .tels .cc1{
	opacity: 1;
	filter: alpha(opacity='100');
	transform: translateX(0px);
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transition: all 1s cubic-bezier(0.5,1.25,0.75,1.65) 0s;
	-webkit-transition: all 1s cubic-bezier(0.5,1.25,0.75,1.65) 0s;
	-moz-transition: all 1s cubic-bezier(0.5,1.25,0.75,1.65) 0s;
}
.index-back-box .sub-share:hover .tels .cc2{
	opacity: 0;
	filter: alpha(opacity='0');
	transform: translateX(0px);
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
}
.index-back-box .sub-share:hover .sider-tel{
	opacity: 1;
    filter: alpha(opacity='100');
 	transform: translateX(0px);
 	-webkit-transform: translateX(0px);
 	-moz-transform: translateX(0px);
 	transition: all 1s cubic-bezier(0.5,1.0,0.75,1) 0s;
 	-webkit-transition: all 1s cubic-bezier(0.5,1.0,0.75,1) 0s;
 	-moz-transition: all 1s cubic-bezier(0.5,1.0,0.75,1) 0s;	
}
.index-back-box .sub-share:hover .sider-tel a:nth-of-type(1){
	opacity: 1;
	filter: alpha(opacity='100');
	transform: translateX(0px);
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transition: all 0.4s cubic-bezier(0.5,0.65,0.75,1) 0s;
	-webkit-transition: all 0.4s cubic-bezier(0.5,0.65,0.75,1) 0s;
	-moz-transition: all 0.4s cubic-bezier(0.5,0.65,0.75,1) 0s;
}
.index-back-box .sub-share:hover .sider-tel a:nth-of-type(2){
	opacity: 1;
	filter: alpha(opacity='100');
	transform: translateX(0px);
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transition: all 0.4s cubic-bezier(0.5,0.65,0.75,1) .2s;
	-webkit-transition: all 0.4s cubic-bezier(0.5,0.65,0.75,1) .2s;
	-moz-transition: all 0.4s cubic-bezier(0.5,0.65,0.75,1) .2s;
}
.index-back-box .sub-mouse{ width:54px; height:54px; left:50%; margin-left:-27px; bottom:0px; position:absolute}
/*.index-back-box .sub-mouse{ width: 30px; height: 73px; position: absolute; top:-19px; left: 50%; margin-left: -15px; cursor: pointer; z-index: 0; zoom: 0.7; -moz-transform: scale(0.7);}*/
/*.index-back-box .sub-mouse:after{ display: none; z-index: -1; position: absolute; content: ''; top: -30px; left: 50%; height: 73px; border-right: 1px solid #333; margin-left: -1px;}*/
/*.index-back-box .sub-mouse span{ display: block; position: relative; 
	 animation: ani-svg 0.85s linear 0s alternate infinite;
	 -webkit-animation: ani-svg 0.85s linear 0s alternate infinite; 
}*/
.index-back-box .sub-mouse i{ position: absolute; bottom: 5px; left: 50%; color: #000;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
}
@keyframes ani-svg{
	0%{
	  opacity: 0.4;
	  transform: translateY(-20px);
	}
	15%{
	  opacity: 0.65;
	  transform: translateY(-15px);
	}
    25%{
      opacity: 0.8;
	  transform: translateY(-10px);
	}
    50%{
      opacity: 1;
	  transform: translateY(0px);
	}
	65%{
	  opacity: 0.8;
	  transform: translateY(5px);
	}
	75%{
	  opacity: 0.65;
	  transform: translateY(10px);
	}
	100%{
	  opacity: 0.4;
	  transform: translateY(15px);
	}
}
@-webkit-keyframes ani-svg{
	0%{
	  opacity: 0.4;
	  -webkit-transform: translateY(-20px);
	}
	15%{
	  opacity: 0.65;
	  -webkit-transform: translateY(-15px);
	}
    25%{
      opacity: 0.8;
	  -webkit-transform: translateY(-10px);
	}
    50%{
      opacity: 1;
	  -webkit-transform: translateY(0px);
	}
	65%{
	  opacity: 0.8;
	  -webkit-transform: translateY(5px);
	}
	75%{
	  opacity: 0.65;
	  -webkit-transform: translateY(10px);
	}
	100%{
	  opacity: 0.4;
	  -webkit-transform: translateY(15px);
	}
}
@-moz-keyframes ani-svg{
	0%{
	  opacity: 0.4;
	  -moz-transform: translateY(-20px);
	}
	15%{
	  opacity: 0.65;
	  -moz-transform: translateY(-15px);
	}
    25%{
      opacity: 0.8;
	  -moz-transform: translateY(-10px);
	}
    50%{
      opacity: 1;
	  -moz-transform: translateY(0px);
	}
	65%{
	  opacity: 0.8;
	  -moz-transform: translateY(5px);
	}
	75%{
	  opacity: 0.65;
	  -moz-transform: translateY(10px);
	}
	100%{
	  opacity: 0.4;
	  -moz-transform: translateY(15px);
	}
}
.sub-mouse{ background:url(../images/mouse2.png) no-repeat; width:54px; height:54px; cursor:pointer}
.sub-mouse:hover{ background:url(../images/mouse1.png) no-repeat; width:54px; height:54px;}
/*.iconfontt{ width:100px; height:30px; background:url(../images/left.jpg) no-repeat 3px 13px; top:30px;} */
.iconfontt{ width:103px; height:54px; background:url(../images/b-left.png) no-repeat; bottom:0px; z-index:9}
.iconfontr{ width:103px; height:54px; background:url(../images/b-right.png) no-repeat; bottom:0px;}
.iconfontt:hover{background:url(../images/b-lefth.png) no-repeat;}
.iconfontr:hover{background:url(../images/b-righth.png) no-repeat;}
.image-span{ position:absolute; top:20px; left:200px; width:100px; height:50px; z-index:9; color:#000}
.banner-title{ position:absolute; top:50%; left:50%; background:#FFF; z-index:999;  padding:1%; margin-top:-15px; margin-left:-700px;}
.banner-title h3{ color:#221916; font-size:34px; margin-bottom:10px;}
.banner-title span{ width:100%; font-size:16px; color:#221916; }
.banner-title a{ width:155px; height:45px; line-height:45px;margin-top:15px; font-size:16px; background:#221916; color:#fff; display:block; text-align:center}