@charset "utf-8";

/* CSS Document */

.banner {
    position: relative;
    margin: 30px 0;
    width: 100%;
    height: 450px;
    overflow: hidden;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.banner .swiper-slide {
    width: 750px;
    height: 450px;
    overflow: hidden;
}

.banner .swiper-slide .img_box {
    position: relative;
    width: 750px;
    height: 450px;
    overflow: hidden;
    opacity: .5;
    -webkit-opacity: .5;
    -ms-opacity: .5;
    -moz-opacity: .5;
    transition: all .7s ease-in;
    -moz-transition: all .7s ease-in;
    -webkit-transition: all .7s ease-in;
}

.banner .swiper-slide .img_box a {
    position: relative;
    display: block;
    z-index: 999;
}

.banner .swiper-slide .img_box:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .2);
}

.banner .swiper-slide .img_box img {
    width: 100%;
    height: 450px;
    transition: all .4s ease-in;
    -moz-transition: all .4s ease-in;
    -webkit-transition: all .4s ease-in;
}

.banner .swiper-slide .img_box .cover_title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -40px;
    padding: 10px;
    padding-right: 135px;
    font-size: 16px;
    color: #fff;
    background: rgba(0, 0, 0, .7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all .7s ease-in;
    -moz-transition: all .7s ease-in;
    -webkit-transition: all .7s ease-in;
}

.banner .swiper-slide.swiper-slide-active .img_box {
    opacity: 1;
    -webkit-opacity: 1;
    -ms-opacity: 1;
    -moz-opacity: 1;
}

.banner .swiper-slide.swiper-slide-active .img_box:after {
    background: none;
}

.banner .swiper-slide.swiper-slide-active .img_box .cover_title {
    bottom: 0;
}

.swiper-button-next,
.swiper-button-prev {
    outline: none;
}

.banner .swiper-button-next,
.banner .swiper-button-prev {
    width: 58px;
    height: 100px;
    margin-top: -50px;
}

.banner .swiper-button-prev,
.banner .swiper-container-rtl .swiper-button-next {
    left: -58px;
    opacity: .8;
    -webkit-opacity: .8;
    -moz-opacity: .8;
    background: url(../images/prev.png) no-repeat;
    transition: all .4s ease-in;
    -moz-transition: all .4s ease-in;
    -webkit-transition: all .4s ease-in;
}

.banner:hover .swiper-button-prev,
.banner:hover .swiper-container-rtl .swiper-button-next {
    left: 0;
}

.banner .swiper-button-next,
.banner .swiper-container-rtl .swiper-button-prev {
    right: -58px;
    opacity: .8;
    -webkit-opacity: .8;
    -moz-opacity: .8;
    background: url(../images/next.png) no-repeat;
    transition: all .4s ease-in;
    -moz-transition: all .4s ease-in;
    -webkit-transition: all .4s ease-in;
}

.banner:hover .swiper-button-next,
.banner:hover .swiper-container-rtl .swiper-button-prev {
    right: 0;
}

.banner .swiper-container-horizontal>.swiper-pagination-bullets,
.banner .swiper-pagination-custom,
.banner .swiper-pagination-fraction {
    right: 240px;
    left: inherit;
    bottom: 15px;
    width: auto;
}

.banner .swiper-pagination-bullet {
    background: #fff;
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
}

.banner .swiper-pagination-bullet-active {
    background: #759be9;
}


/*********************************** 滑过样式 ************************************/

.banner .swiper-slide.swiper-slide-active .img_box:hover img {
    -webkit-transform: scale(1.05, 1.05);
    -moz-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
}