a[data-v-78ee6fea] {
  text-decoration: none !important;
}
p[data-v-78ee6fea] {
  margin: 0;
}
.comment-roll-wrapper[data-v-78ee6fea] {
  --radius: 1rem;
  --font-size-medium: 14px;
  --primary-gray: #5578a1;
  --font-color: 0deg 0% 20%;
  animation: opacity .5s 1s var(--animation-in) backwards;
  overflow: hidden;
}
.scroll-wrap[data-v-78ee6fea] {
  height: 125px;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%);
}
.scroll-wrap[data-v-78ee6fea]:last-of-type {
  margin-top: 20px;
}
@keyframes scroll-right-78ee6fea {
from {
    transform: translateX(0);
}
to {
    transform: translateX(50%);
}
}
@keyframes scroll-left-78ee6fea {
from {
    transform: translateX(0);
}
to {
    transform: translateX(-50%);
}
}
.comment-item[data-v-78ee6fea] {
  width: 280px;
  height: 125px;
  transition: .3s;
  padding: 10px;
  border-radius: var(--radius);
  position: relative;
  transform: translateZ(0);
  font-size: var(--font-size-medium);
  transition: .5s;
  border: 1px solid transparent;
  box-shadow: var(--box-shadow-white);
}
.comment-item[data-v-78ee6fea]:hover {
  border-color: var(--primary-opacity-50);
}
.comment-item[data-v-78ee6fea] * {
  transition: .4s;
  pointer-events: none;
}
.comment-item a[data-v-78ee6fea] {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--card-padding);
}
.comment-item a[data-v-78ee6fea]:hover {
  color: #6361DC;
  transition: all .15s ease-in;
}
.comment-item .avatar[data-v-78ee6fea] {
  width: 28px;
  height: 28px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 999px;
  margin-right: 10px;
  position: relative;
  z-index: 2;
  background-position: center;
  background-size: cover;
  border-radius: 9em;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  background-color: #cbd6d6;
}
.comment-item .content[data-v-78ee6fea] {
  word-break: break-all;
  font-size: var(--font-size-small);
}
.comment-item .content .info-desc[data-v-78ee6fea] {
  color: hsl(var(--font-color) / .6);
}
.comment-item .content .info-desc img[data-v-78ee6fea] {
  width: 20px;
  height: 20px;
}
@media screen and (max-width: 768px) {
.comment-item[data-v-78ee6fea] {
    width: 210px;
    height: 100px;
}
.comment-item .avatar[data-v-78ee6fea] {
    width: 20px;
    height: 20px;
}
.line-clamp[data-v-78ee6fea] {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}
}
.comment-item .content .info-desc img[data-v-78ee6fea] {
  width: 20px;
  height: 20px;
  vertical-align: sub;
}
.animate-marquee[data-v-78ee6fea] {
  will-change: transform;
  animation: 60s linear 0s infinite normal none running marquee-78ee6fea;
}
.group:hover .animate-marquee[data-v-78ee6fea] {
  animation-play-state: paused;
}
@keyframes marquee-78ee6fea {
0% {
    transform: translate(0)
}
to {
    transform: translate(calc(-100% - 16px))
}
}
.flex[data-v-78ee6fea] {
  display: flex;
}
.flex-col[data-v-78ee6fea] {
  flex-direction: column;
}
.gap-1[data-v-78ee6fea] {
  gap: .25rem;
}
.gap-4[data-v-78ee6fea] {
  gap: 1rem;
}
.p-2[data-v-78ee6fea] {
  padding: .5rem;
}
.bg-white[data-v-78ee6fea] {
  background: white;
}
.item-center[data-v-78ee6fea] {
  align-items: center;
}
.justify-between[data-v-78ee6fea] {
  justify-content: space-between;
}
.w-full[data-v-78ee6fea] {
  width: 100%;
}
.flex-1[data-v-78ee6fea] {
  flex: 1;
}
.ml-auto[data-v-78ee6fea] {
  margin-left: auto;
}
.flex-shrink-0[data-v-78ee6fea] {
  flex-shrink: 0;
}
.text-xs[data-v-78ee6fea] {
  font-size: .875rem;
}
.text-\[--primary-gray\][data-v-78ee6fea] {
  color: var(--primary-gray);
}
.truncate[data-v-78ee6fea] {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.line-clamp[data-v-78ee6fea] {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2
}
.text-title[data-v-78ee6fea] {
  font-size: 3em;
}
.text-center[data-v-78ee6fea] {
  text-align: center;
}
.my-gap[data-v-78ee6fea] {
  margin: 24px 0;
}