.card-front {
  position: relative; /* 确保伪元素相对于 .card-front 定位 */
  padding: 18px;
  margin: 2vw;
  border-radius: 5px;
  box-shadow: 0px 5px 15px rgba(0,0,0,.2);
  overflow: hidden;
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center; 
  overflow: hidden; /* 确保内容不会超出边界 */
}

.card-front::before {
    content: ''; /* 伪元素的内容为空 */
    position: absolute; /* 绝对定位 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3); /* 半透明黑色遮罩 */
    z-index: 1; /* 确保遮罩在内容下方 */
}

.card-info, .card-content {
    position: relative; /* 确保内容在遮罩之上 */
    z-index: 2; /* 确保内容在遮罩之上 */
}

.card-info {
    margin-bottom: 15px;
}

.card-name {
  font-size: 3.8vw;
  color: #fff;
  padding: .5vw 0;
}

.card-job {
  margin-top: 0px;
  color: #fff;
  font-size: 3vw;
}

.card-desc {
  color: #fff;
  font-size: 3.5vw;
  margin-bottom: 10px;
}

.card-circle {
    float: left;
    margin-right: 2vw;
    height: 10vw;
    position: relative;
    margin-top: -2px;
    z-index: 2; 
}
.card-circle img{
    width: 10vw;
    height: 10vw;
    border-radius: 100%;
}
.card-greet {
    color: #fff;
    border-radius: 1vw;
    font-size: 3vw;
    display: inline-block;
    padding: 0 2vw;
    position: absolute;
    right: 1vw;
    margin-top: -35px;
    border: 1px solid #fff;
}

.card-bar {
    color: #fff;
    border-radius: 1vw;
    display: inline-block;
    padding: 0px 2vw;
    position: absolute;
    right: 7vw;
    margin-top: -12px;
    z-index: 2;
}