.carousel__inner img {
  width: 100%;
  height: 100%;
}

.carousel ul {
  list-style: none;
  margin: 0;
}

.carousel {
  position: relative;
  user-select: none;
}

.carousel__container {
  position: relative;
}

.carousel__inner {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.carousel__indicators {
  position: absolute;
  /*bottom: 10px; 20211225 */
  bottom: 15%; /* 20211225 */
  left: 0;
  right: 0;
  margin-left: 2rem;
  margin-right: 2rem;
  display: flex;
  justify-content: center;
  z-index: 30;
  padding: 0;
}
.carousel__indicators li {
  background-color: #bbbbbb;
  height: 3px;
  width: 30px;
  margin: 3px;
  cursor: pointer;
}
.carousel__indicators li.active {
  background-color: #ffffff;
}

.carousel__control {
  position: absolute;
  top: 0;
  /*bottom: 0%;*/
  /*width: 15%;*/
  color: #bbbbbb;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 999;

  left:1rem;
}
.carousel__control:hover {
  color: #ffffff;
}


.carousel__control.carousel__control--pause {
  top: 0.5rem;
}
.carousel__control.carousel__control--prev {
  top: 3.5rem;
}
.carousel__control.carousel__control--next {
  top: 6.5rem;
}

/*.carousel__control.carousel__control--prev {
  left: 0;
}
.carousel__control.carousel__control--next {
  right: 0;
}*/
/*.carousel__control .carousel__control--prev__icon,
.carousel__control .carousel__control--next__icon {
  width: 20px;
  height: 20px;
}*/

/*.carousel .carousel__control i {
	font-size: 2em;
	background: rgb(204 204 204 / 70%);
	border-radius: 50px;
	padding: 12px;
	width: 55px;
	height: auto;
	justify-content: center;
	align-items: center;
}*/
.carousel .carousel__control i {
	font-size: 1.5rem;
	background: rgb(204 204 204 / 70%);
	border-radius: 2.5rem;
	padding: 0.5rem;
	justify-content: center;
	align-items: center;
}

.carousel .carousel__control i:hover {
	background: rgb(255 255 204 / 70%);
}

.carousel__item {
  display: none;
  transition: transform 0.6s;
}

.carousel .active {
  display: block;
}
.active.carousel__item--left {
  transform: translate3d(-100%, 0, 0);
}
.active.carousel__item--left.carousel__item--next {
  transform: translate3d(0, 0, 0);
}
.active.carousel__item--right {
  transform: translate3d(100%, 0, 0);
}
.active.carousel__item--right.carousel__item--prev {
  transform: translate3d(0, 0, 0);
}

.carousel__item--next,
.carousel__item--prev {
  position: absolute;
  top: 0;
}

.carousel__item--next {
  transform: translatex(100%);
}

.carousel__item--prev {
  transform: translatex(-100%);
}