@-webkit-keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-168px * 10));
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-168px * 10));
  }
}
.slider {
  background: white;
  height: 85px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.slider::before, .slider::after {
  content: "";
  height: 64px;
  position: absolute;
  width: 156px;
  z-index: 2;
}
.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
  display: none;
}
.slider::before {
  left: 0;
  top: 0;
  display: none;
}
.slider .slide-track {
  -webkit-animation: scroll 40s linear infinite;
          animation: scroll 40s linear infinite;
  display: flex;
  width: calc(168px * 20);
}
.slider .slide {
  height: 64px;
  width: 156px;
  position: relative;
  background: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)) padding-box padding-box, linear-gradient(to right, rgb(133, 9, 234), rgb(28, 210, 238)) border-box border-box;
  background-origin: border-box;
  background-clip: content-box, border-box;
  padding: 2px;
  border-radius: 50px;
  margin: 0 6px;
  z-index: 9999;
}

.slider img {
	width: 50px;
	height: 50px;
	position: absolute;
	object-fit: cover;
    border-radius: 30px;
	left: 7px;
	top: 6.5px;
}

.slider p {
	padding: 0;
	margin: 0;
	white-space: nowrap;    /* 텍스트 줄바꿈 방지 */
	overflow: hidden;       /* 넘치는 텍스트 숨김 */
	text-overflow: ellipsis;/* 넘치는 부분 "..."으로 표시 */
	width: 90px;
}

.slider .text-div {
	position: absolute;
	top: 6px;
	left: 65px;
}
.slider .artist-name {
	font-size: 18px;
	font-weight: 600;
}

.slider .fav-count {
	display: flex;
	align-items: center;
}

.slider .fav-number {
	color: #999999;
	font-size: 14px;
	font-weight: 400;
	padding-left: 5px;
	align-items: center;
	white-space: nowrap;    /* 텍스트 줄바꿈 방지 */
	overflow: hidden;       /* 넘치는 텍스트 숨김 */
	text-overflow: ellipsis;/* 넘치는 부분 "..."으로 표시 */
	width: 60px;
}

.artist-heart {
	color: #8509EA;
	font-size: 17px !important;
}

.slider .slide-track.track-middle {
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

.slider:hover .slide-track {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}