.content-part8{
  width: 100%;
  height: auto;
  /* border: 2px solid red; */
  padding-block: var(--main-block-padding);
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.content-part8-main{
  background-color: black;
  color: white;
  padding: 60px 100px;
  border-radius: 30px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.part8-grid{
  /* border: 2px solid green; */
  flex-grow: 1;
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
  grid-template-rows:0.4fr repeat(5,1fr);
}

/* 每一行元素的设置 */
.part8-grid-item{
  grid-row: 1/2;
  grid-column: span 6;
  /* background-color: rgb(77, 14, 104); */
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 1fr;
  align-items: center;
  /* justify-items:end; */
  /* border-bottom: 1px dashed rgb(104, 97, 97); */
  position: relative;
  color: rgb(143, 143, 143);
  text-transform: capitalize;
  font-weight: 500;

}
.part8-grid-item::after{
  content: "";
  width: 100%;
  height: 1px;
  display: inline-block;
  position: absolute;
  background: repeating-linear-gradient(
    to right,
    transparent,
    transparent 4px, /* 虚线间隔的开始 */
    rgb(37, 37, 37) 4px, 
    rgb(37, 37, 37) 8px /* 虚线间隔的结束 */
  );
  bottom: 0;
}

.line-2{
  grid-row: 2/3;
}
.line-3{
  grid-row: 3/4;
}
.line-4{
  grid-row: 4/5;
}
.line-5{
  grid-row: 5/6;
}
.line-6{
  grid-row: 6/7;
}





.name-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 40px;
}

/* name 列的图片 */
.name-item > div:first-child{
  width: 64px;
  height: 38px;
  /* border: 2px solid red; */
  border-radius: 4px;
  overflow: hidden;
  font-size: 0;
}
.name-item > div:first-child > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.name-item > div:last-child{
  display: flex;
  flex-direction: column;
  color: white;
}

.name-item-text > span:first-child{
  font-size: 1rem;
  
}
.name-item-text > span:last-child {
  font-size: 0.6rem;
  color: rgb(70, 70, 70);
}
.name-item-text > span:last-child > span{
  color: rgb(158, 159, 161);
}

/* total列中的内容整体设置 */
.total-item{
  display: flex;
  flex-direction: column;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  border: 1px solid rgb(46, 46, 46);
  /* width: fit-content; */
  justify-self: self-end;
  border-radius: 12px;
}
/* total列的内容中的4设置 */
.total-item > span:first-child{
  font-size: 1.3rem;
  font-weight: 700;
  color: white;

}

.total-item > span:last-child{
  color: rgb(88, 88, 88);
  font-size: 0.8rem;
}

/* 中间三列文字 */
.part8-grid-item > :nth-child(2){
  font-weight: 200;
  justify-self: center;
  font-size: 0.9rem;
}
.part8-grid-item > :nth-child(3){
  font-weight: 200;
  justify-self: center;
  font-size: 0.9rem;
}
.part8-grid-item > :nth-child(4){
  font-weight: 200;
  justify-self: center;
  font-size: 0.9rem;
}

/* 标题行的文字特别处理 */
.part8-grid-item.line-title > div {
  font-weight: 700;
  font-size: 0.8rem;
  padding-bottom: 20px;
}
.part8-grid-item.line-title > div:last-child{
  justify-self: end;
}


@media screen and (max-width: 1024px) {
  .content-part8-main{
    padding: 40px 50px;
    border-radius: 20px;
  }
  .name-item > div:first-child{
    flex-shrink: 0;
  }
}

@media screen and (max-width: 600px) {
  .name-item-text > span:first-child{
    font-size: 0.8rem;
  }

  .part8-grid-item.line-title > div{
    font-size: 0.6rem;
    padding-bottom:0px
  }
  .part8-grid{
    grid-template-rows: 0.3fr repeat(5, 1fr)
  }
  .total-item{
    padding: 8px 16px;
  }
  .total-item > span:first-child{
    font-size: 1.1rem;
  }
}

@media screen and (max-width: 480px){
  .content-part8{
    display: none;
  }
}