/*banner*/
#banner { width:100%; height:100%; }
#banner.swiper-container { height:calc(100% - 64px - 88px); }

#banner .pic {position:absolute;left:0;top:0;height:100%;width:100%;z-index:2;}
#banner .word { position:absolute; width:100%; left:0; top:0; bottom:0; z-index:3; display:none; -webkit-align-items:flex-start; align-items:flex-start; text-shadow:1px 1px 2px #555; }

#banner .swiper-slide-active .word { display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; }
#banner .swiper-slide-active .animated { -webkit-animation-duration:0.5s; animation-duration:0.5s; -o-animation-duration:0.5s; -ms-animation-duration:0.5s; -moz-animation-duration:0.5s; -webkit-animation-fill-mode:both; -o-animation-fill-mode:both; -ms-animation-fill-mode:both; -moz-animation-fill-mode:both; }
#banner .swiper-slide-active .animated.infinite { -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; -o-animation-iteration-count:infinite; -ms-animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; }
#banner .swiper-slide-active .animated.hinge { -webkit-animation-duration:0.5s; animation-duration:0.5s; -o-animation-duration:0.5s; -ms-animation-duration:0.5s; -moz-animation-duration:0.5s; }
#banner h2 { font-size:60px; color:#fff; padding:5px 10px; text-align:left; -webkit-animation-name:b1; animation-name:b1; -o-animation-name:b1; -ms-animation-name:b1; -moz-animation-name:b1; opacity:0; background:rgba(68,103,167,.8); letter-spacing:10px; }
#banner h3 { font-size:40px; color:#fff; text-align:left; background:rgba(0,0,0,0.8); padding:5px 10px; margin:20px 0; -webkit-animation-name:b1; animation-name:b1; -o-animation-name:b1; -ms-animation-name:b1; -moz-animation-name:b1; opacity:0; animation-delay:0.5s; -webkit-animation-delay:0.5s; -o-animation-delay:0.5s; -moz-animation-delay:0.5s; -ms-animation-delay:0.5s; letter-spacing:8px; }
@-webkit-keyframes b1 {
0% { opacity:0; -webkit-transform:translateX(-100%); transform:translateX(-100%); -moz-transform:translateX(-100%); -o-transform:translateX(-100%); -ms-transform:translateX(-100%); }
100% { opacity:1; -webkit-transform:translateX(0); transform:translateX(0); -moz-transform:translateX(0); -o-transform:translateX(0); -ms-transform:translateX(0); }
}
@keyframes b1 {
0% { opacity:0; -webkit-transform:translateX(-100%); transform:translateX(-100%); -moz-transform:translateX(-100%); -o-transform:translateX(-100%); -ms-transform:translateX(-100%); }
100% { opacity:1; -webkit-transform:translateX(0); transform:translateX(0); -moz-transform:translateX(0); -o-transform:translateX(0); -ms-transform:translateX(0); }
}

#banner .swiper-pagination { bottom:25px; height:18px; }
#banner .swiper-pagination-bullet { width:18px; height:100%; background:#fff; opacity:1; box-shadow:0 0 2px #333; }
#banner .swiper-pagination-bullet-active,#banner .swiper-pagination-bullet:hover { background:#4467a7; width:36px; border-radius:9px; }

@media screen and (max-width:767px){
	
#banner.swiper-container { height:calc(100% - 110px); }	
	
#banner h2 { font-size:30px; padding:4px 8px; letter-spacing:6px; }
#banner h3 { font-size:24px; padding:4px 8px; margin:12px 0; letter-spacing:6px; }

#banner .swiper-pagination { bottom:20px; height:14px; }
#banner .swiper-pagination-bullet { width:14px; }
#banner .swiper-pagination-bullet-active,#banner .swiper-pagination-bullet:hover { width:28px; border-radius:7px; }
	
}

@media screen and (max-width:400px){
	
#banner.swiper-container { height:calc(100% - 104px); }	
	
#banner h2 { font-size:26px; padding:3px 7px; letter-spacing:5px; }
#banner h3 { font-size:20px; padding:3px 7px; margin:10px 0; letter-spacing:5px; }

#banner .swiper-pagination { bottom:18px; height:12px; }
#banner .swiper-pagination-bullet { width:12px; }
#banner .swiper-pagination-bullet-active,#banner .swiper-pagination-bullet:hover { width:24px; border-radius:6px; }
	
}

@media screen and (max-width:359px){
	
#banner.swiper-container { height:calc(100% - 100px); }	
	
#banner h2 { font-size:24px; padding:3px 6px; letter-spacing:4px; }
#banner h3 { font-size:18px; padding:3px 6px; margin:8px 0; letter-spacing:4px; }

#banner .swiper-pagination { bottom:16px; height:10px; }
#banner .swiper-pagination-bullet { width:10px; }
#banner .swiper-pagination-bullet-active,#banner .swiper-pagination-bullet:hover { width:20px; border-radius:5px; }
	
}