#banner {
    width: 101%;
    height: 570px;
    position: relative;
}

.swiper-container {
    width: 100%;
    height: 550px;
    position: absolute;
}

.swiper-slide .detail {
    height: 100px;
    background: rgba(32,73,179,.7);
    position: absolute;
    width: 1200px;
    left: calc(50% - 600px);
    bottom: -20px;
    color: #fff;
    opacity: 0;
    transition: opacity .3s .3s;
}

.swiper-slide-active .detail {
    opacity: 1;
}

.swiper-slide .detail h3 {
    width: 950px;
    margin: 15px auto 0;
    font-family: '微软雅黑', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    letter-spacing: 1.5px;
    color: #FFFFFF;
}

.swiper-slide .detail p {
    width: 950px;
    margin: 5px auto 0;
}

.swiper-slide .detail p span {
    width: 650px;
    display: block;
    font-family: '微软雅黑', sans-serif;
    font-weight: 400;
    line-height: 36px;
    font-style: normal;
    font-size: 16px;
    letter-spacing: 1px;
}


.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 {
    width: 100%;
    height: 550px;
}

.swiper-pagination {
    bottom: 30px;
    right: 350px;
}

.swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    background: #fff;
    margin: 0 5px;
}