.vue-slider-box {
        width: 100%;
        height: 100%;
    }
    .vue-slider-main {
        width: 80%;
        height: 100%;
        position: relative;
        margin: 0 auto;
        z-index: 1;
        overflow: hidden;
    }
    .vue-slider-prev-btn,
    .vue-slider-next-btn {
        display: block;
        position: absolute;
        width: 3rem;
        height: 3rem;
        top: 50%;
        z-index: 2;
    }
    .vue-slider-prev-btn {
        left: 0.5rem;
    }
    .vue-slider-next-btn {
        right: 0.5rem;
    }
    .vue-slider-prev-btn i,
    .vue-slider-next-btn i {
        display: block;
        width: 100%;
        height: 100%;
        border: 1px solid #fff;
        border-radius: 50%;
        position: relative;
        transition: all .4s;
    }
    .vue-slider-prev-btn:hover i,
    .vue-slider-next-btn:hover i {
        background-color: rgba(255, 255, 255, 0.8);
    }
    .vue-slider-prev-btn i:before,
    .vue-slider-next-btn i:before {
        content: '';
        width: 1rem;
        height: 1rem;
        border: 0px;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        position: absolute;
        top: 50%;
        margin-top: -0.55rem;
    }
    .vue-slider-prev-btn i:before {
        -ms-transform: rotate(225deg);
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
        right: 0.8rem;
    }
    .vue-slider-next-btn i:before {
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        left: 0.8rem;
    }
    .vue-slider-prev-btn:hover i:before,
    .vue-slider-next-btn:hover i:before {
        border-top: 1px solid #333;
        border-right: 1px solid #333;
    }

    .vue-slider-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        width: 100%;
        height: 90%;
        max-width: 100vw;
        max-height: 90vh;
        text-align: center;
        color: #fff;
    }
    .vue-slider-content-box {
        transition: all .2s;
        height: 90%;
    }
    .vue-slider-content img {
        width: 100%;
        height: 90%;
        object-fit: contain;
        margin: auto;
        max-width: 100vw;
        max-height: 90vh;
    }

    .vue-slider-thumbnail-box {
        width: 100%;
        height: 10%;
        max-width: 100vw;
        max-height: 10vh;
        position: absolute;
        bottom: 0;
        z-index: 9;
    }

    .vue-slider-thumbnail-list {
        width: 100%;
        height: 100%;
        list-style: none;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        text-align: center;
        white-space: nowrap;
    }

    .vue-slider-thumbnail {
        height: 100%;
        display: inline-block;
        margin: 0.1rem;
        padding: 0px;
    }

    .vue-slider-thumbnail img {
        height: 100%;
        object-fit: contain;
        margin: auto;
    }

    .show-next-enter-active,
    .show-next-leave-active,
    .show-prev-enter-active,
    .show-prev-leave-active {
        transition: all .4s;
    }
    .show-next-enter,
    .show-prev-leave-to {
        transform: translate(50%, -50%);
    }
    .show-next-leave-to,
    .show-prev-enter {
        transform: translate(-150%, -50%);
    }
    .fullscreen-controller {
        z-index: 10;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background-color: #333;
    }
    .slider-touch-frame {
        width: 100%;
        height: 100%;
        max-height: 90vh;
    }
    .slider-menu-top {
        display: flex;
    }
    .slider-top-center {
        margin: 1rem;
        width: 100%;
    }
    .slider-top-right {
        margin: 0.6rem;
    }
    .image-title {
        font-size: 1.2rem;
        text-align: center;
        color: #fff;
    }
    .slider-close-button {
        width: 2.4rem;
        height: 2.4rem;
        color: #fff;
        font-size: 1.2rem;
        -webkit-text-size-adjust: 100%;
        background-color: #333;
        border: 1px solid #fff;
        border-radius: 50%;
        transition: all .4s;
        padding: 0rem;
    }
    .slider-close-button:hover {
        color: #333;
        background-color: rgba(255, 255, 255, 0.8);
    }
    .photo-slider-enter-active,
    .photo-slider-leave-active {
      transition: opacity .25s;
    }
    .photo-slider-enter,
    .photo-slider-leave-to {
      opacity: 0;
    }
    .slider-menu {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 90%;
        z-index: 3;
    }
    .slider-menu-enter-active,
    .slider-menu-leave-active {
      transition: opacity .5s;
    }
    .slider-menu-enter,
    .slider-menu-leave-to {
      opacity: 0;
    }
    .slider-image-frame {
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
    }
    .selected-thumbnail {
        opacity: 1.0;
    }
    .unselected-thumbnail {
        opacity: 0.5;
    }