﻿/*banner*/
#banner { width:100%; height:100%; }
#banner .swiper-container { width:100%; height:100%; margin-left:auto; margin-right:auto; position:relative; overflow:hidden; z-index:1; }
#banner .swiper-wrapper { -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate(0,0); -ms-transform:translate3d(0,0,0); transform:translate3d(0,0,0); position:relative; width:100%; height:100%; z-index:1; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-transition-property:-webkit-transform;
-moz-transition-property:-moz-transform; -o-transition-property:-o-transform; -ms-transition-property:-ms-transform; transition-property:transform; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; }
#banner .swiper-slide { display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center;
justify-content:center; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center; -webkit-flex-shrink:0; -ms-flex:0 0 auto; flex-shrink:0; width:100%; height:100%; position:relative; }
#banner .swiper-pagination { bottom:25px; left:0; width:100%; position:absolute; text-align:center; -webkit-transition:.3s; -moz-transition:.3s; -o-transition:.3s; transition:.3s;-webkit-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); transform:translate3d(0,0,0); z-index:10; height:18px; }
#banner .swiper-pagination-bullet { display:inline-block; width:18px; height:100%; background:#fff; margin:0 5px; cursor:pointer; border-radius:100%; }
#banner .swiper-pagination-bullet-active,#banner .swiper-pagination-bullet:hover { background:#4467a7; box-shadow:0 0 2px #333; width:32px; border-radius:9px; }
#banner .pagination { position:absolute; left:0; text-align:center; bottom:10px; width:100%; }
#banner .swiper-button-next { position:absolute; left:50%; top:50%; width:80px; height:80px; line-height:80px; font-size:80px; color:#fff; z-index:10; margin:-40px 0 0 -600px; cursor:pointer; }
#banner .swiper-button-prev { position:absolute; right:50%; top:50%; width:80px; height:80px; line-height:80px; font-size:80px; color:#fff; z-index:10; margin:-40px -600px 0 0; cursor:pointer; }
#banner .swiper-button-next:hover,#banner .swiper-button-prev:hover { color:#4467a7; }

#banner .pic { position:absolute; left:0; top:0; height:100%; width:100%; z-index:2; background-position:center !important; background-repeat:no-repeat !important; background-size:cover !important; }
#banner .word { position:absolute; width:1000px; left:50%; top:100px; bottom:45px; margin:0 0 0 -509px; 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:36px; 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,.6); }
#banner h3 { font-size:34px; color:#fff; text-align:left; background:rgba(0,0,0,0.4); 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; }
#banner h4 { font-size:32px; color:#4467a7; text-align:left; background:rgba(255,255,255,0.7); padding:5px 10px; -webkit-animation-name:b1; animation-name:b1; -o-animation-name:b1; -ms-animation-name:b1; -moz-animation-name:b1; opacity:0; animation-delay:1s; -webkit-animation-delay:1s; -o-animation-delay:1s; -moz-animation-delay:1s; -ms-animation-delay:1s; text-shadow:0 0 0; }
@-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 h2.b2h2,#banner h3.b2h3,#banner h4.b2h4 { -webkit-animation-name:b2; animation-name:b2; -o-animation-name:b2; -ms-animation-name:b2; -moz-animation-name:b2; }
@-webkit-keyframes b2 {
0% { opacity:0; -webkit-transform:translateY(100%); transform:translateY(100%); -moz-transform:translateY(100%); -o-transform:translateY(100%); -ms-transform:translateY(100%); }
100% { opacity:1; -webkit-transform:translateY(0); transform:translateY(0); -moz-transform:translateY(0); -o-transform:translateY(0); -ms-transform:translateY(0); }
}
@keyframes b2 {
0% { opacity:0; -webkit-transform:translateY(100%); transform:translateY(100%); -moz-transform:translateY(100%); -o-transform:translateY(100%); -ms-transform:translateY(100%); }
100% { opacity:1; -webkit-transform:translateY(0); transform:translateY(0); -moz-transform:translateY(0); -o-transform:translateY(0); -ms-transform:translateY(0); }
}

#banner h2.b3h2,#banner h3.b3h3,#banner h4.b3h4 { -webkit-animation-name:b3; animation-name:b3; -o-animation-name:b3; -ms-animation-name:b3; -moz-animation-name:b3; }
@-webkit-keyframes b3 {
0% { opacity:0; -webkit-transform:scale(3); transform:scale(3); -moz-transform:scale(3); -o-transform:scale(3); -ms-transform:scale(3); }
100% { opacity:1; -webkit-transform:scale(1); transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1); -ms-transform:scale(1); }
}
@keyframes b3 {
0% { opacity:0; -webkit-transform:scale(3); transform:scale(3); -moz-transform:scale(3); -o-transform:scale(3); -ms-transform:scale(3); }
100% { opacity:1; -webkit-transform:scale(1); transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1); -ms-transform:scale(1); }
}

#banner h2.b4h2,#banner h3.b4h3,#banner h4.b4h4 { -webkit-animation-name:b4; animation-name:b4; -o-animation-name:b4; -ms-animation-name:b4; -moz-animation-name:b4; -webkit-backface-visibility:visible!important; -ms-backface-visibility:visible!important; backface-visibility:visible!important; }
@-webkit-keyframes b4 {
0% { -webkit-transform:perspective(400px) rotateX(90deg); transform:perspective(400px) rotateX(90deg); opacity:0; }
40% { -webkit-transform:perspective(400px) rotateX(-10deg); transform:perspective(400px) rotateX(-10deg); }
70% { -webkit-transform:perspective(400px) rotateX(10deg); transform:perspective(400px) rotateX(10deg); }
100% { -webkit-transform:perspective(400px) rotateX(0deg); transform:perspective(400px) rotateX(0deg); opacity:1; }
}
@keyframes b4 {
0% { -webkit-transform:perspective(400px) rotateX(90deg); -ms-transform:perspective(400px) rotateX(90deg); transform:perspective(400px) rotateX(90deg); opacity:0; }
40% { -webkit-transform:perspective(400px) rotateX(-10deg); -ms-transform:perspective(400px) rotateX(-10deg); transform:perspective(400px) rotateX(-10deg); }
70% { -webkit-transform:perspective(400px) rotateX(10deg); -ms-transform:perspective(400px) rotateX(10deg); transform:perspective(400px) rotateX(10deg); }
100% { -webkit-transform:perspective(400px) rotateX(0deg); -ms-transform:perspective(400px) rotateX(0deg); transform:perspective(400px) rotateX(0deg); opacity:1; }
}

#banner h2.b5h2,#banner h3.b5h3,#banner h4.b5h4 { -webkit-animation-name:b5; animation-name:b5; -o-animation-name:b5; -ms-animation-name:b5; -moz-animation-name:b5; }
@-webkit-keyframes b5 {
0%,40%,80% { opacity:0; }
20%,60%,100% { opacity:1; }
}
@keyframes b5 {
0%,40%,80% { opacity:0; }
20%,60%,100% { opacity:1; }
}