.swiper {
    width: 50vw;
    height: 28vw;
    margin: 5vw auto;
    position: relative;
}

.swiper .picture {
    width: 100%;
    height: 100%;
    position: relative;
}

.swiper .picture li {
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -ms-transition: all 0.8s;
    transition: all 0.8s;
    width: 50vw;
    height: 28vw;
    position: absolute;
    left: 50%;
    margin-left: -25vw;
    overflow: hidden;
    box-shadow: 2px 2px 6px 1px rgba(0, 0, 0, 0.5);
    filter: grayscale(80%) blur(2px);
}

.swiper .picture li img {
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
    padding: 3px; 
    border: 1px solid #debd64;
}

.swiper .picture li.now {
    z-index: 9;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    filter: grayscale(0);
}

.next {
    z-index: 6;
    -webkit-transform: translateX(14vw);
    -moz-transform: translateX(14vw);
    -o-transform: translateX(14vw);
    -ms-transform: translateX(14vw);
    transform: translateX(14vw);
}

.prev {
    z-index: 6;
    -webkit-transform: translateX(-14vw);
    -moz-transform: translateX(-14vw);
    -o-transform: translateX(-14vw);
    -ms-transform: translateX(-14vw);
    transform: translateX(-14vw);
}



.swiper .cricle {
    position: absolute;
    bottom: -10vw;
    width: 100%;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper .cricle li {
    width: 2.4vw;
    height: 2.5vw;
    margin: 0 0.5vw;
    background: url(../images/select.png) no-repeat center center/100% 100%;

}
.swiper .cricle li._bg {
    background-image: url(../images/select-on.png);
}
.swiper .btns { position: absolute; left: 0; top: 0; z-index: 98; width: 100%; height: 100% }
.swiper .btns a { display: block;  position: absolute; top: 50%; z-index: 999; width: 3.7vw; height: 4.9vw; background: url(../images/arrow.png) no-repeat 0 0/100% 100%; top: 50%; margin-top: -2.5vw; }

.swiper .btns a.leftbtn { left: -13vw; transform: rotate(180deg); }
.swiper .btns a.rightbtn { right: -13vw; }
.swiper .btns a:hover { filter: brightness(120%); }


.leftBox,
.rightBox {
    height: 28vw;
    position: absolute;
    top: 0;
    z-index: 99;
}

.leftBox {
    width: 8vw;
    left:  -14vw;
}

.rightBox {
    width: 8vw;
    right: -14vw;
}

@media only screen and (min-width: 1300px) {
    .swiper { width: 800px; height: 450px; margin: 80px auto; }
    .swiper .picture li { width: 800px; height: 450px; margin-left: -400px; }
    .swiper .cricle { bottom: -100px; }
    .swiper .cricle li { width: 24px; height: 25px; margin: 0 5px; }
    .swiper .btns a { width: 37px; height: 49px; margin-top: -24px; }
    .next {
        z-index: 6;
        -webkit-transform: translateX(180px);
        -moz-transform: translateX(180px);
        -o-transform: translateX(180px);
        -ms-transform: translateX(180px);
        transform: translateX(180px);
    }

    .prev {
        z-index: 6;
        -webkit-transform: translateX(-180px);
        -moz-transform: translateX(-180px);
        -o-transform: translateX(-180px);
        -ms-transform: translateX(-180px);
        transform: translateX(-180px);
    }

    .leftBox,
    .rightBox {
        height: 450px;
    }

    .leftBox {
        width: 100px;
        left:  -180px;
    }

    .rightBox {
        width: 100px;
        right: -180px;
    }

    .swiper .btns a.leftbtn { left: -150px; }
    .swiper .btns a.rightbtn { right: -150px; }
}

@media only screen and (orientation:portrait ) {
    .swiper .cricle { bottom: -12vw; }
    .swiper .cricle li {
        width: 4vw;
        height: 4vw;
        margin: 0 0.5vw;
    }
    .swiper {
        width: 64vw;
        height: 36vw;
        margin: 10vw auto;
    }
    .swiper .picture li {
        width: 64vw;
        height: 36vw;
        margin-left: -32vw;
    }
    .leftBox, .rightBox { height: 36vw; }
    .swiper .btns a { width: 5vw; height: 6.6vw; margin-top: -3.3vw; }
}