@media only screen and (min-width:1200px) {
     .lbt-box {
        position: relative;
        width: 100%;
        height: 95vh;
    }

    .imgs {
        width: 100%;
        height: 100%;
        perspective: 90vw;
    }

    .imgitem {
        position: absolute;
        width: 25vw;
        height: 25vw;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 0;
        transition: .8s;
        opacity: 0;
    }

        .imgitem img {
            width: 100%;
            height: 100%;
        }

    .cur-img {
        width: 35vw;
        height:34.9vw;
        z-index: 100;
        opacity: 1;
    }

    .pre-img {
        transform: translateX(-21vw) rotateY(30deg) scale(0.8);
        z-index: 9;
        opacity: 0.5;
    }

    .next-img {
        transform: translateX(21vw) rotateY(-30deg) scale(0.8);
        z-index: 9;
        opacity: 0.5;
    }

}

@media only screen and (max-width:768px){
    .lbt-box {
        position: relative;
        width: 100%;
        height: 35vh;
    }

    .imgs {
        width: 100%;
        height: 100%;
        perspective: 90vw;
    }

    .imgitem {
        position: absolute;
        width: 25vw;
        height: 25vw;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 0;
        transition: .8s;
        opacity: 0;
    }

        .imgitem img {
            width: 100%;
            height: 100%;
        }

    .cur-img {
        width: 40vw;
        height: 39.9vw;
        z-index: 100;
        opacity: 1;
    }

    .pre-img {
        transform: translateX(-20vw) rotateY(30deg) scale(0.8);
        z-index: 9;
        opacity: 0.5;
    }

    .next-img {
        transform: translateX(20vw) rotateY(-30deg) scale(0.8);
        z-index: 9;
        opacity: 0.5;
    }
}