/* jssor slider container */
.jssor_1 {
    position: relative;
    margin: 0 auto;
    top: 0px;
    left: 0px;
    width: 1180px;
    height: 380px;
    overflow: hidden;
    visibility: hidden;
}

.loading {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.7);
}

.slide1 {
    opacity: 0.7;
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.slide2 {
    position: absolute;
    display: block;
    background: url('img/loading.gif') no-repeat center center;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.slides {
    cursor: default;
    position: relative;
    top: 0px;
    left: 0px;
    width: 1180px;
    height: 380px;
    overflow: hidden;
}

/* gambar di dalam slide */
.slides img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* biar tidak stretch */
    object-position: center;  /* fokus tengah */
}

.jssort09-600-45 {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 1180px;
    height: 45px;
}

.slide3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.4;
}

.jssorb01 {
    position: absolute;
    bottom: 16px;
    right: 16px;
}
.prototype {
    width: 12px;
    height: 12px;
}

/* bullets */
.jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
    position: absolute;
    width: 12px;
    height: 12px;
    opacity: .7;
    overflow: hidden;
    cursor: pointer;
    border: #000 1px solid;
}
.jssorb01 div { background-color: gray; }
.jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
.jssorb01 .av { background-color: #fff; }
.jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }

/* arrows */
.jssora05l, .jssora05r {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: url('img/a17.png') no-repeat;
    overflow: hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05l.jssora05ldn { background-position: -250px -40px; }
.jssora05r.jssora05rdn { background-position: -310px -40px; }
.jssora05l.jssora05lds { background-position: -10px -40px; opacity: .3; pointer-events: none; }
.jssora05r.jssora05rds { background-position: -70px -40px; opacity: .3; pointer-events: none; }

/* thumbnail */
.jssort09-600-45 .p {
    position: absolute;
    top: 0;
    left: 0;
    width: 1180px;
    height: 45px;
}
.jssort09-600-45 .t {
    font-family: verdana;
    font-weight: normal;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: #fff;
    line-height: 45px;
    font-size: 20px;
    padding-left: 10px;
}