* {
  box-sizing: border-box;
}
@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.ticker-wrap {
  position: fixed;
  bottom: 0;
  left: 12%;
  overflow: hidden;
  height: 8%;
  background-color: rgb(90, 68, 139);
  padding-left: 100%;
  box-sizing: content-box;
}
.ticker-wrap .ticker {
  position: fixed;
  display: inline-block;
  left: 100%;
  height: 3rem;
  line-height: 1.3rem;
  white-space: nowrap;
  padding-right: 100%;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 60s;
  animation-duration: 60s;
}
.ticker-wrap .ticker__item {
  display: inline-block;
  
  padding: 0.3rem;
  font-size: 20px;
  color: white;
  text-shadow: 0 1px 5px black;
}
.box {
  margin: auto;
  position: fixed;
  width: 12%;
  display: flex;
  align-items: center;
  vertical-align: middle;
  text-shadow: 0 1px 5px black;
  text-indent: 1rem;
  bottom: 0;
  left: 0;
  overflow: hidden;
  height: 8%;
  background-color: #533B8C;
  padding-left: 0%;
  box-sizing: content-box;
  color: white;
  float: right;
  z-index: 10;
}
.box_left {
  position: fixed;
  width: 12%;
  display: flex;
  align-items: center;
  vertical-align: middle;
  text-indent: 10px;
  bottom: 0;
  right: 0;
  overflow: hidden;
  height: 8%;
  background-color: #533B8C;
  padding-right: 0%;
  box-sizing: content-box;
  color: white;
  float: right;
  z-index: 10;
}