.slider-photo-gallery {
    overflow: hidden;
}

.slider-photo-gallery div {
    transition: none !important;
}

:root {
    --jssor-photo-gallery-width: 96rem;
    --jssor-photo-gallery-height: calc(var(--jssor-photo-gallery-width) * 9 / 16);
    --jssor-photo-gallery-thumbnails-visible: 5;
}

.jssor-photo-gallery {
    position: relative;
    width: var(--jssor-photo-gallery-width);
    height: var(--jssor-photo-gallery-height);
    background: transparent;
    overflow: visible;
}

.jssor-photo-gallery .nav-arrow {
    position: absolute;
    left: 0;
    top: 0;
    height: 12rem;
    width: 9rem;
    opacity: 1;
}

.jssor-photo-gallery .nav-arrow:hover {
    opacity: 1;
    cursor: pointer;
}

.jssor-photo-gallery .nav-arrow.nav-arrowdn {
    opacity: 1;
}

.jssor-photo-gallery .nav-arrow.nav-arrowds {
    opacity: .25;
    pointer-events: none;
}

.jssor-photo-gallery .nav-arrow.right {
    left: auto;
    right: 0;
}

.jssor-photo-gallery .nav-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
    padding: 2rem;
}

.jssor-photo-gallery .nav-arrow svg circle {
    fill: #000;
    opacity: .6;
}

.jssor-photo-gallery .nav-arrow svg path {
    fill: #fff;
    opacity: 1;
}

.jssor-photo-gallery .nav-arrow:hover svg path {
    fill: #ff0;
}

.jssor-photo-gallery .loading {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--jssor-photo-gallery-width);
    height: var(--jssor-photo-gallery-height);
    background-color: rgba(0,0,0,.7);
}

.jssor-photo-gallery .loading .progress-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -5%;
    font-size: calc(var(--jssor-photo-gallery-width) / 10);
    color: #fff;
}

.jssor-photo-gallery .slides {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--jssor-photo-gallery-width);
    height: var(--jssor-photo-gallery-height);
    overflow: hidden;
}

.jssor-photo-gallery figure {
    width: 100%;
    height: 100%;
}

.jssor-photo-gallery figure img {
    object-fit: cover;
    object-position: top;
    width: 100%;
    height: 100%;
}

.jssor-photo-gallery figure figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.8rem 2.7rem;
    line-height: 1.2;
    max-height: 40%;
    overflow-y: auto;
    color: #fff;
    background-color: rgba(0,0,0,.5);
    cursor: default;
}

.jssor-photo-gallery figure figcaption a {
    color: #ff0;
}

.jssor-photo-gallery figure figcaption a:hover {
    opacity: .8;
}

.jssor-photo-gallery .nav-thumb {
    position: absolute;
    left: 0;
    bottom: calc(var(--jssor-photo-gallery-height) / var(--jssor-photo-gallery-thumbnails-visible) * -1);
    height: calc(var(--jssor-photo-gallery-height) / var(--jssor-photo-gallery-thumbnails-visible));
    width: var(--jssor-photo-gallery-width);
}

.jssor-photo-gallery .nav-thumb .p {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--jssor-photo-gallery-width) / var(--jssor-photo-gallery-thumbnails-visible));
    height: calc(var(--jssor-photo-gallery-height) / var(--jssor-photo-gallery-thumbnails-visible));
    background-color: #fff;
    margin: .1rem .1rem 0 .1rem;
    cursor: pointer;
}

.jssor-photo-gallery .nav-thumb .p .t {
    object-fit: cover;
    width: 100%;
    height: 100%;
    vertical-align: top;
    opacity: .5;
}

.jssor-photo-gallery .nav-thumb .p:hover .t {
    opacity: 1;
}

.jssor-photo-gallery .nav-thumb .pav .t,
.jssor-photo-gallery .nav-thumb .pdn .t,
.jssor-photo-gallery .nav-thumb .p:hover.pdn .t {
    opacity: 1;
}