.carousel {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    background-color: #cdcdcd;
}

.carousel-item .slide-image {
    width: 100%;
    height: 400px;
    background-size: cover;
    background-repeat: no-repeat;
}

.carousel-item {
    position: absolute;
    width: 100%;
    height:400px;
    border: none;
    top: 0;
    left: 100%;
}

.carousel-item.active {
    left: 0;
    transition: all 0.5s ease-out;
}

.carousel-item div {
    height: 100%;
}

.red {
    background-color: red;
}

.green {
    background-color: green;
}

.yellow {
    background-color: yellow;
}

.violet {
    background-color: violet;
}

.jssorb05 {
	position: absolute;
}
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
	position: absolute;
	width: 16px;
	height: 16px;
	background: url('images/b05.png') no-repeat;
	overflow: hidden;
	cursor: pointer;
}

.jssorb05 div { background-position: -7px -7px; }
.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
.jssorb05 .av { background-position: -67px -7px; }
.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }
.jssora22l, .jssora22r {
	display: block;
	position: absolute;
	width: 40px;
	height: 58px;
	cursor: pointer;
	background: url('images/a22.png') center center no-repeat;
	overflow: hidden;
}
.jssora22l { background-position: -10px -31px; }
.jssora22r { background-position: -70px -31px; }
.jssora22l:hover { background-position: -130px -31px; }
.jssora22r:hover { background-position: -190px -31px; }
.jssora22l.jssora22ldn { background-position: -250px -31px; }
.jssora22r.jssora22rdn { background-position: -310px -31px; }



.serh11{color:#fff;margin-top:20px;text-align:center;font-weight:900;text-shadow:1px 1px #000;}
.serb1{border:2px #ff0;border-radius:10px;padding:10px;background-color:#00000033;color:#fff;}
.serb{border:2px #ff0;border-radius:10px;padding:10px;height:250px;background-color:#00000033;color:#fff;}
.serh1{color:#fff;margin-top:100px;text-align:center;font-weight:900;text-shadow:1px 1px #000;}
.ser1{font-size:50px;margin-top:50px;font-weight:900;color:#ff0;text-shadow:6px 0px 8px #000;}
.ser2{padding:6px;border:1px solid white;}
@media only screen and (max-width: 600px) {
        .carousel {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background-color: #cdcdcd;
}

.carousel-item .slide-image {
    width: 100%;
    height: 230px;
    background-size: cover;
    background-repeat: no-repeat;
}


.carousel-item {
    position: absolute;
    width: 100%;
    height:230px;
    border: none;
    top: 0;
    left: 100%;
}
}