.sp-slider{
    -ms-touch-action:pan-y;
    touch-action:pan-y;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    position:relative;
    overflow:hidden
}
.sp-slider .sp-indicator-container,.sp-slider-outer-stage{
    background:#fff;
    -webkit-perspective:1000px;
    perspective:1000px;
    transition-timing-function:linear;
    -webkit-transition-timing-function:linear
}
.sp-slider-outer-stage{
    overflow:hidden;
    position:relative;
    transition-property:transform,-webkit-transform,width,scale;
    -webkit-transition-property:transform,-webkit-transform,width,scale
}
.sp-slider.on-3d-active .sp-slider-outer-stage{
    background:orange
}
.sp-slider .sp-indicator-container{
    position:absolute;
    width:100%;
    top:0;
    left:0;
    height:5px;
    z-index:9;
    transform-style:preserve-3d;
    transition-property:transform,-webkit-transform,width;
    -webkit-transition-property:transform,-webkit-transform,width
}
.sp-slider .sp-indicator.line-indicator{
    width:0;
    top:0;
    left:0;
    background:red;
    height:5px
}
.sp-slider .sp-indicator.circle-indicator{
    width:50px;
    height:50px;
    right:10px;
    top:10px;
    background:0 0;
    border-radius:50% 50%;
    display:inline-block
}
.sp-slider .item-mask,.sp-slider .sp-item{
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden
}
.sp-slider .sp-item{
    visibility:hidden;
    will-change:transform;
    -webkit-perspective:1000px;
    perspective:1000px;
    transform-style:preserve-3d;
    transition-property:transform,-webkit-transform,opacity,clip,clip-path;
    -webkit-transition-property:transform,-webkit-transform,opacity,-webkit-opacity,clip,clip-path;
    position:absolute
}
.sp-slider .sp-dots ul li .dot-indicator,.sp-slider .sp-item,.sp-slider.sp-bubble-slider .sp-item{
    transition-timing-function:linear;
    -webkit-transition-timing-function:linear
}
.sp-slider.sp-clip-slider .sp-item{
    transition-timing-function:ease;
    -webkit-transition-timing-function:ease
}
.sp-slider.sp-fade-slider .sp-item{
    transition-timing-function:ease-out;
    -webkit-transition-timing-function:ease-out
}
.sp-slider.sp-basic-slider .sp-item{
    transition-timing-function:cubic-bezier(.51,.15,.2,.74);
    -webkit-transition-timing-function:cubic-bezier(.51,.15,.2,.74)
}
.sp-slider.sp-stack-slider .sp-item{
    transition-timing-function:cubic-bezier(.42,0,0,.92);
    -webkit-transition-timing-function:cubic-bezier(.42,0,0,.92)
}
.sp-slider .sp-item .sp-background{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-position:center;
    background-size:cover;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    z-index:-1
}
.sp-slider.on-3d-active .sp-item{
    visibility:hidden;
    opacity:0;
    z-index:1
}
.sp-slider.on-3d-active .sp-item.active{
    -webkit-transform:translate3d(0,0,-200px);
    transform:translate3d(0,0,-200px);
    opacity:1
}
.sp-slider.on-3d-active .sp-item.next-3d,.sp-slider.on-3d-active .sp-item.prev-3d{
    opacity:1;
    visibility:visible;
    z-index:2
}
.sp-slider.on-3d-active .sp-item.next-3d [data-layer=true],.sp-slider.on-3d-active .sp-item.prev-3d [data-layer=true]{
    opacity:0;
    visibility:hidden
}
.sp-slider .item-mask{
    position:relative;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover
}
.sp-slider .sp-item img{
    width:100%;
    display:none
}
.sp-slider .sp-item.next-item{
    z-index:2
}
.sp-slider .sp-item.active,.sp-slider .sp-item.dragenable,.sp-slider .sp-item.next-item{
    visibility:visible;
    transform-style:preserve-3d
}
.sp-slider .sp-item.prev-item{
    z-index:1;
    visibility:visible
}
.sp-slider .sp-item [data-layer=true]{
    opacity:0;
    transition-timing-function:.2s!important
}
.sp-slider .sp-item.active [data-layer=true]{
    opacity:1
}
.sp-slider .sp-dots,.sp-slider .sp-nav-control{
    position:relative;
    height:20px;
    width:100%;
    margin-top:5px;
    z-index:3
}
.sp-slider .sp-dots{
    position:absolute;
    bottom:50px;
    left:50%;
    transform:translateX(-50%)
}
.sp-slider .sp-dots ul li,.sp-slider .sp-nav-control .nav-control{
    display:inline-block;
    background:rgba(255,255,255,.4);
    cursor:pointer
}
.sp-slider .sp-nav-control .nav-control{
    padding:10px;
    text-align:center;
    bottom:100px;
    height:40px;
    width:40px;
    border:1px solid #ababab;
    position:absolute
}
.sp-slider .sp-nav-control .nav-control.next-control{
    right:0
}
.sp-slider .sp-nav-control .nav-control.prev-control{
    left:0
}
.sp-slider .sp-dots ul{
    margin:-4px;
    padding:0;
    list-style:none;
    text-align:center
}
.sp-slider .sp-dots ul li{
    height:4px;
    width:30px;
    margin:5px;
    border:0;
    border-radius:2px;
    position:relative
}
.sp-slider .sp-dots ul li.active{
    width:80px
}
.sp-slider .sp-dots ul li .dot-indicator{
    position:absolute;
    -webkit-perspective:1000px;
    perspective:1000px;
    transform-style:preserve-3d;
    transition-property:transform,-webkit-transform,width;
    -webkit-transition-property:transform,-webkit-transform,width;
    width:0;
    left:0;
    top:0;
    height:4px;
    border-radius:2px
}
.sp-slider .sp-dots ul li .dot-indicator.active{
    background:#fff;
    width:100%;
    top:0;
    border-radius:2px
}
.spin-circle-indicator{
    width:3em;
    height:3em;
    padding:0;
    position:relative;
    top:0;
    right:0;
    z-index:9
}
.spin-circle-indicator:hover{
    color:#0eb7da
}
.spin-circle-indicator::after,.spin-circle-indicator::before{
    top:0;
    left:0;
    box-sizing:inherit;
    content:'';
    position:absolute;
    width:100%;
    height:100%
}
.spin-circle-indicator::before{
    border:2px solid transparent
}
.spin-circle-indicator.start::before{
    border-top-color:#fbff00;
    border-right-color:#fbff00;
    border-bottom-color:#fbff00
}
.spin-circle-indicator::after{
    border:0 solid transparent
}
.spin-circle-indicator.start::after{
    border-top:2px solid #fbff00;
    border-left-width:2px;
    border-right-width:2px;
    transform:rotate(270deg)
}
.circle-indicator{
    position:absolute;
    right:10px;
    top:10px
}
.sp-slider_number{
    position:absolute;
    z-index:9;
    bottom:20px;
    left:20px;
    font-size:22px;
    color:#fff;
    line-height:1
}
.sp-slider .sp-item .sp-video-background{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1
}
.sp-slider .sp-item .sp-video-background iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:-2
}
.sp-slider .sp-item .sp-video-background .sp-video-background-mask{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    height:100%;
    width:100%;
    background:rgba(0,0,0,.01);
    z-index:1
}
.sp-slider .sp-item .sp-video-background .sp-video-background-mask .sp-video-control{
    position:absolute;
    right:60px;
    bottom:60px;
    cursor:pointer
}
