.swiper-container {
    width: 100%;
    height: 420px;
}
.swiper-slide {
    height: 420px;
    width: 100%;
    background: #000;
}
.swiper-slide a{
    width: 100%;
    height: 420px;
    display: block;
    position: relative;
}
.swiper-slide img{
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -960px;
    opacity: 0;
}
.swiper-slide div{
    z-index: 9;
    opacity: 0;
}
.title {
    font-size: 25px;
    margin-bottom: 10px;
}
.pagination {
    position: absolute;
    left: 0;
    text-align: center;
    bottom:5px;
    width: 100%;
}
.swiper-pagination-bullet{
    width: 40px;
    height: 10px;
    border-radius: 10px;
    background: #fff;
    opacity: 1;
}
.swiper-pagination-bullet-active{
    background: #d71718;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
    bottom: 10px;
}
.br_01{
    width: 71px;
    height: 71px;
    position: absolute;
    left: 50%;
    margin-left: -531px;
    top: 104px;
    background: url(../images/br_02.png) 0 0 no-repeat;
}
.br_02{
    width: 71px;
    height: 71px;
    position: absolute;
    left: 50%;
    margin-left: -434px;
    top: 104px;
    background: url(../images/br_03.png) 0 0 no-repeat;
}
.br_03{
    width: 71px;
    height: 71px;
    position: absolute;
    left: 50%;
    margin-left: -340px;
    top: 104px;
    background: url(../images/br_04.png) 0 0 no-repeat;
}
.br_04{
    width: 530px;
    height: 49px;
    position: absolute;
    left: 50%;
    margin-left: -226px;
    top: 118px;
    background: url(../images/br_01.png) 0 0 no-repeat;
}
.br_11{
    width: 295px;
    height: 92px;
    position: absolute;
    left: 50%;
    margin-left: -350px;
    top: 130px;
    background: url(../images/br_11.png) 0 0 no-repeat;
}
.br_12{
    width: 319px;
    height: 238px;
    position: absolute;
    left: 50%;
    margin-left: -550px;
    top: 190px;
    background: url(../images/br_12.png) 0 0 no-repeat;
}
.br_13{
    width: 289px;
    height: 223px;
    position: absolute;
    left: 50%;
    margin-left: -220px;
    top: 218px;
    background: url(../images/br_13.png) 0 0 no-repeat;
}
.br_21{
    width: 272px;
    height: 67px;
    position: absolute;
    left: 50%;
    margin-left: -376px;
    top: 130px;
    background: url(../images/br_21.png) 0 0 no-repeat;
}
.br_22{
    width: 319px;
    height: 238px;
    position: absolute;
    left: 50%;
    margin-left: -490px;
    top: 190px;
    background: url(../images/br_22.png) 0 0 no-repeat;
}
.br_23{
    width: 289px;
    height: 223px;
    position: absolute;
    left: 50%;
    margin-left: -225px;
    top: 190px;
    background: url(../images/br_23.png) 0 0 no-repeat;
}
.br_31{
    width: 337px;
    height: 204px;
    position: absolute;
    left: 50%;
    margin-left: -350px;
    top: 146px;
    background: url(../images/br_33.png) 0 0 no-repeat;
}
.br_32{
    width: 341px;
    height: 189px;
    position: absolute;
    left: 50%;
    margin-left: -435px;
    top: 90px;
    background: url(../images/br_34.png) 0 0 no-repeat;
}
.br_33{
    width: 216px;
    height: 50px;
    position: absolute;
    left: 50%;
    margin-left: 50px;
    top: 160px;
    background: url(../images/br_32.png) 0 0 no-repeat;
}
.br_41{
    width: 314px;
    height: 50px;
    position: absolute;
    left: 50%;
    margin-left: -230px;
    top: 190px;
    background: url(../images/br_41.png) 0 0 no-repeat;
}
.br_42{
    width: 298px;
    height: 287px;
    position: absolute;
    left: 50%;
    margin-left: -578px;
    top: 80px;
    background: url(../images/br_42.png) 0 0 no-repeat;
}
.br_51{
    width: 280px;
    height: 140px;
    position: absolute;
    left: 50%;
    margin-left: -140px;
    top: 234px;
    background: url(../images/br_51.png) 0 0 no-repeat;
}
.br_52{
    width: 489px;
    height: 387px;
    position: absolute;
    left: 50%;
    margin-left: 105px;
    top: 40px;
    background: url(../images/br_52.png) 0 0 no-repeat;
}
@keyframes bannerPic{
    0%{opacity: 0;}
    20%{opacity: 1;}
    90%{opacity: 1;}
    100%{opacity: 0;}
}
@-moz-keyframes bannerPic{
    0%{opacity: 0;}
    20%{opacity: 1;}
    90%{opacity: 1;}
    100%{opacity: 0;}
}
@-o-keyframes bannerPic{
    0%{opacity: 0;}
    20%{opacity: 1;}
    90%{opacity: 1;}
    100%{opacity: 0;}
}
.swiper-slide-active img{
    animation: bannerPic 6s linear;
    -moz-animation: bannerPic 6s linear;
    -o-animation: bannerPic 6s linear;
}
@keyframes upIn{
    0%{
        opacity: 0;
        transform: translate(0, 20px);
    }
    20%{
        opacity: 0;
        transform: translate(0, 20px);
    }
    30%{
        opacity: 1;
        transform: translate(0, 0);
    }
    90%{
        opacity: 1;
        transform: translate(0, 0);
    }
    100%{
        opacity: 0;
        transform: translate(0, 20px);
    }
}
@-moz-keyframes upIn{
    0%{
        opacity: 0;
        -moz-transform: translate(0, 20px);
    }
    20%{
        opacity: 0;
        -moz-transform: translate(0, 20px);
    }
    30%{
        opacity: 1;
        -moz-transform: translate(0, 0);
    }
    90%{
        opacity: 1;
        -moz-transform: translate(0, 0);
    }
    100%{
        opacity: 0;
        -moz-transform: translate(0, 20px);
    }
}
@-o-keyframes upIn{
    0%{
        opacity: 0;
        -o-transform: translate(0, 20px);
    }
    20%{
        opacity: 0;
        -o-transform: translate(0, 20px);
    }
    30%{
        opacity: 1;
        -o-transform: translate(0, 0);
    }
    90%{
        opacity: 1;
        -o-transform: translate(0, 0);
    }
    100%{
        opacity: 0;
        -o-transform: translate(0, 20px);
    }
}
@keyframes downIn{
    0%{
        opacity: 0;
        transform: translate(0, -20px);
    }
    20%{
        opacity: 0;
        transform: translate(0, -20px);
    }
    30%{
        opacity: 1;
        transform: translate(0, 0);
    }
    90%{
        opacity: 1;
        transform: translate(0, 0);
    }
    100%{
        opacity: 0;
        transform: translate(0, -20px);
    }
}
@-moz-keyframes downIn{
    0%{
        opacity: 0;
        -moz-transform: translate(0, -20px);
    }
    20%{
        opacity: 0;
        -moz-transform: translate(0, -20px);
    }
    30%{
        opacity: 1;
        -moz-transform: translate(0, 0);
    }
    90%{
        opacity: 1;
        -moz-transform: translate(0, 0);
    }
    100%{
        opacity: 0;
        -moz-transform: translate(0, -20px);
    }
}
@-o-keyframes downIn{
    0%{
        opacity: 0;
        -o-transform: translate(0, -20px);
    }
    20%{
        opacity: 0;
        -o-transform: translate(0, -20px);
    }
    30%{
        opacity: 1;
        -o-transform: translate(0, 0);
    }
    90%{
        opacity: 1;
        -o-transform: translate(0, 0);
    }
    100%{
        opacity: 0;
        -o-transform: translate(0, -20px);
    }
}
@keyframes rightIn{
    0%{
        opacity: 0;
        transform: translate(20px, 0);
    }
    20%{
        opacity: 0;
        transform: translate(20px, 0);
    }
    30%{
        opacity: 1;
        transform: translate(0px, 0);
    }
    90%{
        opacity: 1;
        transform: translate(0px, 0);
    }
    100%{
        opacity: 0;
        transform: translate(20px, 0);
    }
}
@-moz-keyframes rightIn{
    0%{
        opacity: 0;
        -moz-transform: translate(20px, 0);
    }
    20%{
        opacity: 0;
        -moz-transform: translate(20px, 0);
    }
    30%{
        opacity: 1;
        -moz-transform: translate(0px, 0);
    }
    90%{
        opacity: 1;
        -moz-transform: translate(0px, 0);
    }
    100%{
        opacity: 0;
        -moz-transform: translate(20px, 0);
    }
}
@-o-keyframes rightIn{
    0%{
        opacity: 0;
        -o-transform: translate(20px, 0);
    }
    20%{
        opacity: 0;
        -o-transform: translate(20px, 0);
    }
    30%{
        opacity: 1;
        -o-transform: translate(0px, 0);
    }
    90%{
        opacity: 1;
        -o-transform: translate(0px, 0);
    }
    100%{
        opacity: 0;
        -o-transform: translate(20px, 0);
    }
}
@keyframes leftIn{
    0%{
        opacity: 0;
        transform: translate(-20px, 0);
    }
    20%{
        opacity: 0;
        transform: translate(-20px, 0);
    }
    30%{
        opacity: 1;
        transform: translate(0px, 0);
    }
    90%{
        opacity: 1;
        transform: translate(0px, 0);
    }
    100%{
        opacity: 0;
        transform: translate(-20px, 0);
    }
}
@-moz-keyframes leftIn{
    0%{
        opacity: 0;
        -moz-transform: translate(-20px, 0);
    }
    20%{
        opacity: 0;
        -moz-transform: translate(-20px, 0);
    }
    30%{
        opacity: 1;
        -moz-transform: translate(0px, 0);
    }
    90%{
        opacity: 1;
        -moz-transform: translate(0px, 0);
    }
    100%{
        opacity: 0;
        -moz-transform: translate(-20px, 0);
    }
}
@-o-keyframes leftIn{
    0%{
        opacity: 0;
        -o-transform: translate(-20px, 0);
    }
    20%{
        opacity: 0;
        -o-transform: translate(-20px, 0);
    }
    30%{
        opacity: 1;
        -o-transform: translate(0px, 0);
    }
    90%{
        opacity: 1;
        -o-transform: translate(0px, 0);
    }
    100%{
        opacity: 0;
        -o-transform: translate(-20px, 0);
    }
}
@keyframes leftDownIn{
    0%{
        opacity: 0;
        transform: translate(-20px, -20px);
    }
    20%{
        opacity: 0;
        transform: translate(-20px, -20px);
    }
    30%{
        opacity: 1;
        transform: translate(0px, 0);
    }
    90%{
        opacity: 1;
        transform: translate(0px, 0);
    }
    100%{
        opacity: 0;
        transform: translate(-20px, -20px);
    }
}
@-moz-keyframes leftDownIn{
    0%{
        opacity: 0;
        -moz-transform: translate(-20px, -20px);
    }
    20%{
        opacity: 0;
        -moz-transform: translate(-20px, -20px);
    }
    30%{
        opacity: 1;
        -moz-transform: translate(0px, 0);
    }
    90%{
        opacity: 1;
        -moz-transform: translate(0px, 0);
    }
    100%{
        opacity: 0;
        -moz-transform: translate(-20px, -20px);
    }
}
@-o-keyframes leftDownIn{
    0%{
        opacity: 0;
        -o-transform: translate(-20px, -20px);
    }
    20%{
        opacity: 0;
        -o-transform: translate(-20px, -20px);
    }
    30%{
        opacity: 1;
        -o-transform: translate(0px, 0);
    }
    90%{
        opacity: 1;
        -o-transform: translate(0px, 0);
    }
    100%{
        opacity: 0;
        -o-transform: translate(-20px, -20px);
    }
}
@keyframes rightUpIn{
    0%{
        opacity: 0;
        transform: translate(20px, 20px);
    }
    20%{
        opacity: 0;
        transform: translate(20px, 20px);
    }
    30%{
        opacity: 1;
        transform: translate(0px, 0);
    }
    90%{
        opacity: 1;
        transform: translate(0px, 0);
    }
    100%{
        opacity: 0;
        transform: translate(20px, 20px);
    }
}
@-moz-keyframes rightUpIn{
    0%{
        opacity: 0;
        -moz-transform: translate(20px, 20px);
    }
    20%{
        opacity: 0;
        -moz-transform: translate(20px, 20px);
    }
    30%{
        opacity: 1;
        -moz-transform: translate(0px, 0);
    }
    90%{
        opacity: 1;
        -moz-transform: translate(0px, 0);
    }
    100%{
        opacity: 0;
        -moz-transform: translate(20px, 20px);
    }
}
@-o-keyframes rightUpIn{
    0%{
        opacity: 0;
        -o-transform: translate(20px, 20px);
    }
    20%{
        opacity: 0;
        -o-transform: translate(20px, 20px);
    }
    30%{
        opacity: 1;
        -o-transform: translate(0px, 0);
    }
    90%{
        opacity: 1;
        -o-transform: translate(0px, 0);
    }
    100%{
        opacity: 0;
        -o-transform: translate(20px, 20px);
    }
}
@keyframes fadeIn{
    0%{
        opacity: 0;
    }
    20%{
        opacity: 0;
    }
    30%{
        opacity: 1;
    }
    90%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@-moz-keyframes fadeIn{
    0%{
        opacity: 0;
    }
    20%{
        opacity: 0;
    }
    30%{
        opacity: 1;
    }
    90%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@-o-keyframes fadeIn{
    0%{
        opacity: 0;
    }
    20%{
        opacity: 0;
    }
    30%{
        opacity: 1;
    }
    90%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
.swiper-slide-active .br_01{
    animation: downIn 4s linear;
    -moz-animation: downIn 4s linear;
    -o-animation: br_downIn01 4s linear;
}
.swiper-slide-active .br_02{
    animation: downIn 4s linear 0.5s;
    -moz-animation: downIn 4s linear 0.5s;
    -o-animation: br_downIn01 4s linear 0.5s;
}
.swiper-slide-active .br_03{
    animation: downIn 4s linear 1s;
    -moz-animation: downIn 4s linear 1s;
    -o-animation: downIn 4s linear 1s;
}
.swiper-slide-active .br_04{
    animation: rightIn 4s linear 1.5s;
    -moz-animation: rightIn 4s linear 1.5s;
    -o-animation: rightIn 4s linear 1.5s;
}
.swiper-slide-active .br_11{
    animation: downIn 4s linear;
    -moz-animation: downIn 4s linear;
    -o-animation: downIn 4s linear;
}
.swiper-slide-active .br_12{
    animation: fadeIn 4s linear 1s;
    -moz-animation: fadeIn 4s linear 1s;
    -o-animation: fadeIn 4s linear 1s;
}
.swiper-slide-active .br_13{
    animation: fadeIn 4s linear 1.5s;
    -moz-animation: fadeIn 4s linear 1.5s;
    -o-animation: fadeIn 4s linear 1.5s;
}
.swiper-slide-active .br_21{
    animation: downIn 4s linear 1s;
    -moz-animation: downIn 4s linear 1s;
    -o-animation: downIn 4s linear 1s;
}
.swiper-slide-active .br_22{
    animation: leftIn 4s linear 1s;
    -moz-animation: leftIn 4s linear 1s;
    -o-animation: leftIn 4s linear 1s;
}
.swiper-slide-active .br_23{
    animation: rightIn 4s linear 1s;
    -moz-animation: rightIn 4s linear 1s;
    -o-animation: rightIn 4s linear 1s;
}
.swiper-slide-active .br_33{
    animation: fadeIn 4s linear;
    -moz-animation: fadeIn 4s linear;
    -o-animation: fadeIn 4s linear;
}
.swiper-slide-active .br_32{
    animation: leftDownIn 4s linear 1s;
    -moz-animation: leftDownIn 4s linear 1s;
    -o-animation: leftDownIn 4s linear 1s;
}
.swiper-slide-active .br_31{
    animation: rightUpIn 4s linear 1s;
    -moz-animation: rightUpIn 4s linear 1s;
    -o-animation: rightUpIn 4s linear 1s;
}
.swiper-slide-active .br_41{
    animation: downIn 4s linear 1s;
    -moz-animation: downIn 4s linear 1s;
    -o-animation: downIn 4s linear 1s;
}
.swiper-slide-active .br_42{
    animation: upIn 4s linear 1s;
    -moz-animation: upIn 4s linear 1s;
    -o-animation: upIn 4s linear 1s;
}
.swiper-slide-active .br_52{
    animation: rightIn 4s linear 1s;
    -moz-animation: rightIn 4s linear 1s;
    -o-animation: rightIn 4s linear 1s;
}
.swiper-slide-active .br_51{
    animation: leftIn 4s linear 1.5s;
    -moz-animation: leftIn 4s linear 1.5s;
    -o-animation: leftIn 4s linear 1.5s;
}