.swiper-container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    direction: ltr;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Fix of Webkit flickering */
    z-index: 1;
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    -webkit-transition-property: -webkit-transform, left, top;
    -webkit-transition-duration: 0s;
    -webkit-transform: translate3d(0px,0,0);
    -webkit-transition-timing-function: ease;
    -moz-transition-property: -moz-transform, left, top;
    -moz-transition-duration: 0s;
    -moz-transform: translate3d(0px,0,0);
    -moz-transition-timing-function: ease;
    -o-transition-property: -o-transform, left, top;
    -o-transition-duration: 0s;
    -o-transform: translate3d(0px,0,0);
    -o-transition-timing-function: ease;
    -o-transform: translate(0px,0px);
    -ms-transition-property: -ms-transform, left, top;
    -ms-transition-duration: 0s;
    -ms-transform: translate3d(0px,0,0);
    -ms-transition-timing-function: ease;
    transition-property: transform, left, top;
    transition-duration: 0s;
    transform: translate3d(0px,0,0);
    transition-timing-function: ease;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.swiper-free-mode > .swiper-wrapper {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin: 0 auto;
}

.swiper-slide {
    float: left;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    width: 100%;
    height: auto;
}

    .swiper-slide a {
        background-position: center;
        background-repeat: no-repeat;
        height:100%;
    }

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
    -ms-touch-action: pan-y;
}

.swiper-wp8-vertical {
    -ms-touch-action: pan-x;
}

.i_banner_pagination {
    bottom: 20px;
}

.swiper-container {
    width: 100%;
    height: auto;
    margin-top: 30px;
}

@media screen and (max-width:800px) {
    .swiper-container {
        height: 260px;
    }
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    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;
}

.swiper-slide {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}




.swiper-container .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    height: 185px;
    /* Center slide text vertically */
    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;
}

@media screen and (max-width:800px) {
    .swiper-slide {
        width: 50%;
    }
}

.pre, .next {
    font-size: 30px;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #ffffff;
    background-color: #b2b2b2;
    position: absolute;
}

.pre {
    left: -70px;
    top: 57%;
    background-image: url(/img/left_direction.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
}

.next {
    right: -70px;
    top: 57%;
    background-image: url(/img/right_direction.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
}

    .pre:hover, .next:hover {
        cursor: pointer;
    }
    @media only screen and (max-width:800px){
        .next {
            right: 10px;
            width:30px;
            z-index: 2;
        }
        .pre{
            left:10px;
            width:30px;
            z-index:2;
        }
    }