@charset "UTF-8";
/* CSS Document */
.rotate {
  position: relative;
  margin: 0px auto;
  width: 360px;
  height: 48px;
  overflow: hidden;
  color: silver; 
}
.rotate:hover {
  cursor: pointer;
  color: silver;
  transition: all 0.5s;
}
.rotate .line {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
}
.rotate .line:nth-of-type(1) {
  transform: rotate(0deg);
}
.rotate .line:nth-of-type(2) {
  transform: rotate(90deg);
  margin-left:156px;
}
.rotate .line:nth-of-type(3) {
  transform: rotate(180deg);
}
.rotate .line:nth-of-type(4) {
  transform: rotate(270deg);
  margin-left:-156px;
}
.rotate .line i {
  left: 0;
  top: 0;
  width: 200%;
  display: block;
  position: absolute;
  border-bottom: 1px dashed #f1f1f1;
  animation: move 6.5s infinite linear;
}
.rotate .text {
  width:340px;
  line-height: 16px;
  display: block;
  text-align: left;
  position: relative;
  font-size: 9px; 
  
}
@keyframes move {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}