.swiper-box {
    margin-bottom:30px;
}

.pic_page {
    position: absolute;
    z-index: 100;
    right: 20px;
    bottom: 20px;
    font-size: 18px;
    color: #FF5909;
    font-weight: bold
}



.view {
    position: relative
}

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

    .view .arrow-left {
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -25px;
        width: 28px;
        height: 50px;
        background: url('../images/arrow_l.png') no-repeat center;
        background-size: 100%;
        z-index: 10
    }

    .view .arrow-right {
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -25px;
        width: 28px;
        height: 50px;
        background: url('../images/arrow_r.png') no-repeat center;
        z-index: 10
    }

    .view .swiper-slide div {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover
    }

.preview {
    width: 100%;
    margin-top: 18px;
    position: relative
}

    .preview .swiper-container {
        margin-left: 45px;
        margin-right: 45px
    }

    .preview .swiper-slide {
        width: 158px;
        height: 90px;
        cursor: pointer;
        overflow: hidden
    }

        .preview .swiper-slide img {
            width: 145px;
            height: 86px;
            margin: 0 auto;
            border: 2px solid #edeef5
        }

    .preview .arrow-left {
        background-size: 100% 100%;
        position: absolute;
        left: 0px;
        top: 10px;
        margin-top: -9px;
        width: 44px;
        height: 90px;
        text-align: center;
        z-index: 10
    }

        .preview .arrow-left span {
            display: inline-block;
            width: 38px;
            height: 38px;
            background: url('../images/left_btn.png') no-repeat center;
            background-size: 100% 100%;
          /*  transform: rotate(180deg);*/
            margin-top: 24px
        }

    .preview .arrow-right {
        position: absolute;
        right: 0px;
        top: 10px;
        margin-top: -9px;
        width: 44px;
        height: 90px;
        text-align: center;
        z-index: 10
    }

        .preview .arrow-right span {
            display: inline-block;
            width: 38px;
            height: 38px;
            background: url('../images/right_btn.png') no-repeat center;
            background-size: 100% 100%;
            margin-top: 24px
        }

    .preview .active-nav img {
        padding: 0;
        border-color: #ff5909;
        opacity: .9
    }
@media only screen and (max-width:768px) 
{
    .view .swiper-container {
        width: 100%;
        height: 180px
    }

}