@charset "UTF-8";
.my-work-card[data-v-7377736c] {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 162px;
  margin-right: 24px;
  margin-bottom: 12px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  flex-shrink: 0;
  width: 158px;
  height: 284px;
  margin-right: 24px;
  background: #f6f8f9;
  border: 2px solid #000;
  border-radius: 8px;
  cursor: pointer;
}
.caogao[data-v-7377736c] {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 999;
  font-weight: 400;
  color: #000;
  border-color: #000;
  background-color: #ededed;
  padding: 2px 8px;
  color: #000;
  font-size: 12px;
  line-height: 16px;
  border: 1px solid #000;
  border-radius: 4px;
}
.yiwancheng[data-v-7377736c] {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 999;
  font-weight: 400;
  color: #000;
  border-color: #000;
  background: var(--theme-shadow-color);
  padding: 2px 8px;
  color: #000;
  font-size: 12px;
  line-height: 16px;
  border: 1px solid #000;
  border-radius: 4px;
}

/* 隐藏滚动条 */
.rongqiTable[data-v-7377736c]::-webkit-scrollbar {
  width: 0.3em;
  background-color: #F5F5F5;
}

/* 滚动条轨道 */
.rongqiTable[data-v-7377736c]::-webkit-scrollbar-track {
  background-color: #F5F5F5;
}

/* 滚动条滑块 */
.rongqiTable[data-v-7377736c]::-webkit-scrollbar-thumb {
  background-color: #888;
}

/* 鼠标悬停时的滚动条滑块 */
.rongqiTable[data-v-7377736c]::-webkit-scrollbar-thumb:hover {
  background-color: #888;
}
.qubianji[data-v-7377736c] {
  width: 80px;
  height: 30px;
  margin: 75% 0 0 25%;
  background: #fff;
  border-radius: 4px;
  text-align: center;
  line-height: 30px;
}
.qubianji[data-v-7377736c]:hover {
  background: var(--theme-shadow-color);
  color: var(--theme-font-color);
}
.video-preview[data-v-7377736c] {
  position: fixed; /* 固定定位，使蒙层覆盖整个屏幕 */
  top: 0; /* 蒙层从顶部开始 */
  left: 0; /* 蒙层从左边开始 */
  width: 100%; /* 蒙层宽度为100%，覆盖整个屏幕宽度 */
  height: 100%; /* 蒙层高度为100%，覆盖整个屏幕高度 */
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  z-index: 9999; /* 确保蒙层在其他元素之上显示 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease; /* 过渡效果，持续时间为0.5秒，使用ease缓动函数 */
}
.video-preview .video-preview-img[data-v-7377736c] {
  position: fixed;
  top: 20px;
  right: 20px;
  cursor: pointer;
  z-index: 10000; /* 确保蒙层在其他元素之上显示 */
}
.video-preview .video-preview-video[data-v-7377736c] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@-webkit-keyframes rotation-7377736c {
0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
}
}
@keyframes rotation-7377736c {
0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
}
}
.video-preview .video-preview-video-loding[data-v-7377736c] {
  width: 60px;
  height: 60px;
  -webkit-animation: rotation-7377736c 1s linear infinite;
          animation: rotation-7377736c 1s linear infinite; /* 缩短动画周期以加速旋转 */
  will-change: transform; /* 提高性能，提前告知浏览器该元素会变化 */
  display: block; /* 确保图片独占一行，避免布局影响 */
  margin: auto; /* 居中图片（假设在父容器中） */
  color: #3BFFF3;
}