html { font-size: 100px; }
.p_r { position: relative; }
.img {

width: 100%;
    height: 100%;
    object-fit: cover; }


.img-list .item {
    width: 32%;
    margin-right: 2%;
    margin-top: .3rem;
    background-color: #efefef;
}

.img-list .item:nth-of-type(3n) {
    margin-right: 0;
}

.img-list .item .pic {
    width: 100%;
    height: 1.9rem;
    overflow: hidden;
}

.img-list .item .text {
    line-height: .6rem;
    font-size: .2rem;
    border: 1px #e5e5e5 solid;
    border-top: 2px #971d12 solid;
}


.img-details .gallery-top {
    margin-top: .4rem;
}

.img-details .gallery-top .swiper-slide {
    height: 5.8rem;
    overflow: hidden;
}

.img-details .gallery-top .swiper-pagination {
    width: auto;
    color: #FFF;
    font-family: 'Georgia';
    font-size: .2rem;
    z-index: 10;
    bottom: .15rem;
    left: .2rem;
}

.img-details .gallery-top .swiper-pagination::after {
    content: '';
    position: absolute;
    right: -.2rem;
    width: 1px;
    height: .4rem;
    background-color: rgba(255, 255, 255, .3);
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.img-details .gallery-top .swiper-pagination-current {
    color: #e7bb7f;
}

.img-details .gallery-top .text {
    background-color: rgba(0, 0, 0, .3);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: .6rem;
    line-height: .6rem;
    padding-left: 1.2rem;
    color: #FFF; font-size: .18rem;
}

.img-details .gallery-thumbs {
    margin-top: .3rem;
    padding-left: .45rem;
    padding-right: .45rem;
    margin-left: 1.34rem;
    margin-right: 1.4rem;
}

.img-details .gallery-thumbs .swiper-slide {
    height: .9rem;
}

.img-details .gallery-thumbs .swiper-button-next,
.img-details .gallery-thumbs .swiper-button-prev {
    width: .28rem;
    height: .7rem;
    background-color: #eee;
    top: .1rem;
    margin-top: 0;
    background-size: .12rem;
}

.img-details .gallery-thumbs .swiper-button-prev {
    left: 0;
}

.img-details .gallery-thumbs .swiper-button-next {
    right: 0;
}

.img-details .gallery-thumbs .swiper-slide-active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 3px #244CB2 solid;
}

.img-details .prev {
    width: 1.2rem;
    height: .87rem;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
}

.img-details .prev.next {
    left: auto;
    right: 0;
}

.img-details .prev .text {
    position: absolute;
    left: 50%;
    top: 50%;
    color: #FFF;
    font-size: .16rem;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    z-index: 10;
    display: none;
}

.img-details .prev::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/tbg1.png)no-repeat center;
    background-size: cover;
    left: .05rem;
    top: .05rem;
    z-index: -1;
}
.img-details .gallery-thumbs .swiper-button-next:hover,
    .img-details .gallery-thumbs .swiper-button-prev:hover {
        background-color: #244CB2;
    }
    .img-details .gallery-thumbs .swiper-button-next:hover {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
    }
    .img-details .gallery-thumbs .swiper-button-prev:hover {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
    }
    .img-details .prev:hover::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #244CB2;
        opacity: .8;
        z-index: 2;
    }
    .img-details .prev:hover .text {
        display: block;
    }
@media (max-width: 1199px) {
    html {
        font-size: 10vw;
    }
}