/* BASIC css start */
.top-marquee{
  width: 100%;
  height: 40px;
  background: #000;
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.marquee{
  width: 100%;
  overflow: hidden;
}

.marquee__track{
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: marqueeMove 14s linear infinite; /* ¼Óµµ Á¶Àý */
}

.marquee__set{
  display: inline-flex;
  align-items: center;
}

.marquee__item{
 padding: 0 18px;
  margin-right: 300px; /* +P ÅؽºÆ® »çÀÌ °£°Ý */
}

.marquee__sep{
  opacity: .6;
  padding: 0 10px;
}

.top-marquee:hover .marquee__track{
  animation-play-state: paused;
}

/* ÇÙ½É: ¼¼Æ®°¡ 2°³¶ó¼­ ¡®ÇÑ ¼¼Æ® Æø¡¯¸¸Å­ À̵¿ = -50% */
@keyframes marqueeMove{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* BASIC css end */