<style>
/*jssor slider loading skin spin css*/

.jssorl-009-spin img {
    animation-name: jssorl-009-spin;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes jssorl-009-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


/*jssor slider bullet skin 052 css*/

.jssorb052 .i {
    position: absolute;
    cursor: pointer;
}

.jssorb052 .i .b {
    fill: #000;
    fill-opacity: 0.3;
}

.jssorb052 .i:hover .b {
    fill-opacity: .7;
}

.jssorb052 .iav .b {
    fill-opacity: 1;
}

.jssorb052 .i.idn {
    opacity: .3;
}


/*jssor slider arrow skin 053 css*/

.jssora053 {
    display: block;
    position: absolute;
    cursor: pointer;
}

.jssora053 .a {
    fill: none;
    stroke: #fff;
    stroke-width: 640;
    stroke-miterlimit: 10;
}

.jssora053:hover {
    opacity: .8;
}

.jssora053.jssora053dn {
    opacity: .5;
}

.jssora053.jssora053ds {
    opacity: .3;
    pointer-events: none;
}

.main-div-slider {
    position: relative;
    width: 33.33%;
    padding: 15px;
    text-align: center;
    font-size: 14px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.main-div-slider::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: .9;
}

.h1-cheetah:hover {
    text-decoration: underline;
}

.h1-cheetah {
    position: absolute;
    font-size: 14px;
}

.cheetah-div-1::before {
    background-color: #67794F !important;
}

.cheetah-div-2::before {
    background-color: #FBAA2A !important;
}

.cheetah-div-3::before {
    background-color: #F1592A !important;
}

</style>