/*--banner css--*/
.banner{height: 20vw;}

.carousel-control {  z-index: 0; }
.carousel .carousel-inner .item {  transition-property: opacity; }
.carousel .carousel-inner .item,.carousel .carousel-inner .active.left,.carousel .carousel-inner .active.right {  opacity: 0.8; }
.carousel .carousel-inner .active,.carousel .carousel-inner .next.left,.carousel .carousel-inner .prev.right {  opacity: 1; }
.carousel-indicators {  display: none; }
.carousel { max-width:100%;height: 100vh;}
.carousel:hover .carousel-control {display:block; }
.carousel .item,.carousel .item.active,.carousel .carousel-inner {height: 100%;}
.carousel-inner>.item{position: relative;}
.carousel .fill {   width: 100%;height: 100%;
  -o-animation: grow 10s  linear 10ms infinite;
  -webkit-animation: grow 10s  linear 10ms infinite;
  -moz-animation: grow 10s  linear 10ms infinite;
  animation: grow 10s  linear 10ms infinite;
  transition:all 0.2s ease-in-out;
}

.carousel .fill.web{}
.carousel .fill.mobile{ display:none;}

.carousel .carousel-control { display:none; }
.carousel-control .icon-prev::before,.carousel-control .icon-next::before { content:''; }
.carousel-control .icon-prev,.carousel-control .icon-next { width:30px;	height:60px;	margin:-30px 0 0 0; }
.carousel-control .icon-prev {	background:url(../images/banner/control-icon.png) 0 0 no-repeat; }
.carousel-control .icon-next {	background:url(../images/banner/control-icon.png) -30px 0 no-repeat; }
.carousel-captionB {max-width: 500px;position: absolute;left:inherit; bottom: 25%;color: #fff;}
.carousel-captionB h2 {font-size: 40px;margin-top:  0;}
.carousel-captionB span {font-size: 1.2em;padding: 0 3px;}
.carousel .scrolldown {  position: absolute;  z-index: 10;  left: 50%;  bottom: 10%;  margin-left: -46px;  width: 90px;   height: 90px; background-image: url(../images/banner/scrolldown.png);-webkit-animation: scrolldown ease-out 2s infinite;    -moz-animation: scrolldown ease-out 2s infinite;    -o-animation: scrolldown ease-out 2s infinite;animation: scrolldown ease-out 2s infinite;    -webkit-transition: all ease 0.5s;-o-transition: all ease 0.5s;    transition: all ease 0.5s;}
.carousel .item .shine{position: absolute;left: 0;top: 0;right: 0;bottom: 0; opacity:.7;}
.carousel .item .imgMain{position: absolute;left: 0;top: 50%;width: 50%;text-align: right;-ms-transform: translate(0,-50%);-webkit-transform: translate(0,-50%);transform: translate(0,-50%);}
.carousel .item .imgMain img{max-width: 100%;}

/*淡入 淡出*/
.carousel-fade .carousel-inner .item {  transition-property: opacity; }
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {  opacity: 0; }
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {  opacity: 1; }
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {  left: 0;  transform: translate3d(0, 0, 0); }

.carousel-control .icon-next {right: 30%;}
.carousel-control .icon-prev {left: 30%;}

@-webkit-keyframes scrolldown {
  0%     {bottom:10%; opacity:1;}
  50%   {bottom:8%; opacity:0.7;}
  100% {bottom:10%; opacity:1;}
}
@-moz-keyframes scrolldown {
  0%     {bottom:10%; opacity:1;}
  50%   {bottom:8%; opacity:0.7;}
  100% {bottom:10%; opacity:1;}
}
@keyframes scrolldown {
  from     {bottom:10%; opacity:1;}
  50%   {bottom:8%; opacity:0.7;}
  to {bottom:10%; opacity:1;}
}

@-o-keyframes grow{
  0% { transform:scale(1)}
  50% { transform:scale(1.2)}
}
@-webkit-keyframes grow{
  0% { transform:scale(1)}
  50% { transform:scale(1.2)}
}
@-moz-keyframes grow{
  0% { transform:scale(1)}
  50% { transform:scale(1.2)}
}
@keyframes grow{
  0% { transform:scale(1)}
  50% { transform:scale(1.1)}
}

/*  ----------------------------------------------------------------------------------  */

@media (max-width: 1366px) { 
.carousel-captionB h2{ font-size:50px;  }
.carousel .scrolldown {background-size: 80px auto;  width: 80px;  height: 80px;}

}

@media (max-width: 1280px) { 
.carousel-captionB {}
.carousel-captionB h2 {font-size: 40px;}
.carousel-captionB span {font-size: 1.2em;}
}

@media (max-width: 1200px) { 
.carousel .fill {height: 100%;}
.carousel .scrolldown {background-size: 60px auto;  width: 60px;  height: 60px;}
.cssmenu>ul.open { max-height: 340px;  overflow-y: auto; }
}

@media (max-width: 992px) { 
.banner{height: 30vw;}

.carousel{/*height: 70%;*/height: 70vh;}
.carousel .scrolldown{display: none}
.carousel-captionB{background: rgba(0,0,0,.5);padding: 20px;left: 0;bottom: 0;width: 100%;display: block;max-width: inherit;}
.carousel-captionB h2 { font-size:24px; margin-top: 0; margin-bottom:5px;}
.carousel-captionB span {font-size: 1em; padding:0;}
}

@media (max-width: 768px) {

.carousel{margin-top:  60px;height:55vh;}

.carousel .fill.web{display:none;}
.carousel .fill.mobile{display:block;max-width:  100%;max-height:  100%;}	
	
.carousel:after { display:none; }
.carousel .carousel-inner {  background: #000; }
.carousel .scrolldown {background-size: 60px auto;  width: 60px;  height: 60px;}
.carousel .scrolldown {  bottom: 25%;}
@-webkit-keyframes scrolldown {
  0%     {bottom:25%; opacity:1;}
  50%   {bottom:23%; opacity:0.7;}
  100% {bottom:25%; opacity:1;}
}
@-moz-keyframes scrolldown {
  0%     {bottom:25%; opacity:1;}
  50%   {bottom:23%; opacity:0.7;}
  100% {bottom:25%; opacity:1;}
}
@keyframes scrolldown {
  from     {bottom:25%; opacity:1;}
  50%   {bottom:23%; opacity:0.7;}
  to {bottom:25%; opacity:1;}
}

}

@media (max-width: 640px) {
/*.carousel .fill{ background-position:left !important;}*/

/*.carousel{margin-top:  60px;height: 40vh;}*/
.carousel .scrolldown { display:none; }
.carousel .item .imgMain{width: 100%;text-align: center;}
.carousel .item .imgMain img{width: 80%;margin: auto;}
.carousel-captionB h2 { font-size:20px;}
.carousel-captionB span {font-size: 14px;}


.carousel-control .icon-next { background: url(../images/banner/control-icon.png) -15px 0 no-repeat;}
.carousel-control .icon-prev, .carousel-control .icon-next {width:15px;height: 30px;background-size: cover !important;}

.carousel-captionB {padding: 15px;}
}

@media (max-width: 480px) { 
.banner{/*height: 50vw;*/height: 50vh;}

}