/* Slides Container */


.slides-container {
    cursor: move;
    position: absolute;
    left: 0;
    top: 0;
    width: 800px;
    height: 800px;
    overflow: hidden;
}

/* Loading Screen */
.loading-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Semi-transparent dark overlay */
}
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    background: url('img/loading.gif') no-repeat center center;
    background-size: contain;
    transform: translate(-50%, -50%); /* Centers the spinner */
}

/* Stage 100% Wrap */
.stage-100-percent-wrap {
	position: relative;
	margin: 0 auto;
	width: 800px;
	height: 800px; 
	overflow: hidden; 
	background:#000; 
	margin-bottom: 1px;
}

/* Arrow Navigator */
.jssora21l, .jssora21r {
	position: absolute;
	width: 55px;
	height: 55px;
	cursor: pointer;
	background: url(../../img/a21.png) center center no-repeat;
}
.jssora21l { background-position: -3px -33px; left: 8px; }
.jssora21r { background-position: -63px -33px; right: 8px; }
.jssora21l:hover { background-position: -123px -33px; }
.jssora21r:hover { background-position: -183px -33px; }
.jssora21l.jssora21ldn { background-position: -243px -33px; }
.jssora21r.jssora21rdn { background-position: -303px -33px; }

/* Bullet Navigator */
.jssorb21 {
	position: absolute;
}
.jssorb21 div, .jssorb21 div:hover, .jssorb21 .av {
  width: 19px;
  height: 19px;
  text-align: center;
  line-height: 19px;
  color: white;
  font-size: 12px;
  background: url(img/b21.png) no-repeat;
  cursor: pointer;
}
.jssorb21 div { background-position: -5px -5px; }
.jssorb21 div:hover, .jssorb21 .av:hover { background-position: -35px -5px; }
.jssorb21 .av { background-position: -65px -5px; }
.jssorb21 .dn, .jssorb21 .dn:hover { background-position: -95px -5px; }