@charset "utf-8";
/* CSS Document */

#banner { width: 100%; height: 100%; overflow: hidden; position: relative; }
.swiper-container { width: 100%; height: 100%; position: relative; }
.swiper-slide .detail { height: 90px; background: rgba(0,0,0,.7); position: absolute; width: 100%; bottom: 0; color: #fff; opacity: 0; transition: opacity .3s .3s; }
.swiper-slide-active .detail { opacity: 1; }
.swiper-slide .detail h3 { width: 50%; margin: 15px auto 0; }
.swiper-slide .detail p { width: 50%; margin: 5px auto 0; }
.swiper-slide .detail p span { width: 90%; display: block; }
/**/.effect1 img { transform: scale(1.25, 1.25) translate(10%, 10%); transform: scale(1.1, 1.1) translate(4.545%, 4.545%);/*tr     =    (sc-1)/2sc*100%              *//* --1.25       0.25/2.5*100%=10%          */ }
.leftUp img { -webkit-animation-name: leftUp; animation-name: leftUp; }
@-webkit-keyframes leftUp {
0% {
transform:scale(1.1, 1.1) translate(4.545%, 4.545%);
}
100% {
transform:scale(1.1, 1.1) translate(-4.545%, -4.545%);
}
}
@keyframes leftUp {
0% {
transform:scale(1.1, 1.1) translate(4.545%, 4.545%);
}
100% {
transform:scale(1.1, 1.1) translate(-4.545%, -4.545%);
}
}
.moveRight img { -webkit-animation-name: moveRight; animation-name: moveRight; }
@-webkit-keyframes moveRight {
0% {
transform:scale(1.1, 1.1) translate(-4.545%, 0);
}
100% {
transform:scale(1.1, 1.1) translate(4.545%, 0);
}
}
@keyframes moveRight {
0% {
transform:scale(1.1, 1.1) translate(-4.545%, 0);
}
100% {
transform:scale(1.1, 1.1) translate(4.545%, 0);
}
}
.moveDown img { -webkit-animation-name: moveDown; animation-name: moveDown; }
@-webkit-keyframes moveDown {
0% {
transform:scale(1.1, 1.1) translate(0, -4.545%);
}
100% {
transform:scale(1.1, 1.1) translate(0, 4.545%);
}
}
@keyframes moveDown {
0% {
transform:scale(1.1, 1.1) translate(0, -4.545%);
}
100% {
transform:scale(1.1, 1.1) translate(0, 4.545%);
}
}
.centerBig img { -webkit-animation-name: centerBig; animation-name: centerBig; }
@-webkit-keyframes centerBig {
100% {
transform:scale(1.1, 1.1);
}
}
@keyframes centerBig {
100% {
transform:scale(1.1, 1.1);
}
}
.rightDownBig img { -webkit-animation-name: rightDownBig; animation-name: rightDownBig; }
@-webkit-keyframes rightDownBig {
100% {
transform:scale(1.1, 1.1) translate(4%, 4%);
}
}
@keyframes rightDownBig {
100% {
transform:scale(1.1, 1.1) translate(4%, 4%);
}
}
.swiper-slide img { animation-duration: 5s; animation-timing-function: linear; animation-fill-mode: forwards; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: forwards; width: 100%; height: 100%; }
.swiper-pagination { bottom: 35px; right: 12%; }
.swiper-pagination-bullet { width: 20px; height: 20px; background: #fff; margin: 0 5px; }