.container {
  margin: 1.2rem 1.3rem;
}

.crumb a:last-child {
  color: rgba(51, 51, 51, 1);
}

.crumb a {
  color: rgba(153, 153, 153, 1);
}

.p_label {
  margin: .815rem 0 .6rem 0;
}


.tabs {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: .5rem;
  position: relative;
  border-bottom: .02rem solid rgba(224, 224, 224, 1);
}

.tabs .tab {
  padding: 0 0 .2rem 0;
  font-family: 'Microsoft YaHei';
  font-weight: 350;
  color: rgba(153, 153, 153, 1);
  line-height: 130%;
  position: relative;
  transition: color .5s ease-in-out;
}

.tabs .tab.active {
  color: rgba(14, 110, 184, 1);
}

.tabs .tab::after {
  content: '';
  position: absolute;
  bottom: -.015rem;
  left: 0;
  width: 0;
  height: .02rem;
  background: rgba(14, 110, 184, 1);
  /* transform: scaleX(0); */
  transition: width .5s ease-in-out;
}

.tabs .tab.active::after {
  width: 100%;
}



.list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .75rem 0 0 0;
}

.list .item {
  padding: .25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  border-radius: .1rem;
  width: 48%;
}

.list .item:hover {
  background: rgba(248, 248, 248, 1);
}

.list .item .img_box {
  width: 7.52rem;
  height: 4.72rem;
  border-radius: .1rem;
  overflow: hidden;
}

.list .item .img_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all .5s ease-in-out;
}

.list .item:hover .img_box img {
  transform: scale(1.05);
}

.list .item .tag {
  font-weight: 300;
  font-family: 'Microsoft YaHei';
  line-height: 100%;
  color: rgba(102, 102, 102, 1);
  margin: .3962rem 0 .21rem 0;
}

.list .item .name {
  font-weight: 400;
  font-family: 'Microsoft YaHei';
  line-height: 100%;
  color: rgba(51, 51, 51, 1);
  margin: 0 0 .51rem 0;
}

.list .item:hover .name {
  color: rgba(0, 64, 152, 1);
}

.list .item .bottom {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.list .item .bottom .left span:first-child {
  font-weight: 350;
  font-family: 'Microsoft YaHei';
  line-height: 100%;
  color: rgba(102, 102, 102, 1);
  margin: 0 .15rem 0 0;
}

.list .item .bottom .left span:last-child {
  font-weight: 500;
  font-family: 'Microsoft YaHei';
  line-height: 100%;
  color: rgba(0, 64, 152, 1);
}

.list .item .bottom .btn {
  width: 2rem;
  height: .48rem;
  border-radius: 1rem;
  border: .01rem solid rgba(51, 51, 51, 0.51);

  font-weight: 400;
  font-family: 'Microsoft YaHei';
  line-height: 100%;
  color: rgba(51, 51, 51, 1);

  display: flex;
  justify-content: center;
  align-items: center;
  gap: .08rem;
}

.list .item:hover .bottom .btn {
  border: .01rem solid rgba(0, 64, 152, 1);
  color: rgba(0, 64, 152, 1);
}

.list .item .bottom .btn img {
  width: .14rem;
  height: .14rem;
}

.list .item .bottom .btn.normal,
.list .item:hover .bottom .btn .active {
  display: block;
}

.list .item:hover .bottom .btn .normal,
.list .item .bottom .btn .active {
  display: none;
}


@media (max-width: 767px) {
    .container {
        margin: 1.2rem 20px;
    }
    .list .item .img_box {
        width: 100%;
    }
    .list .item {
        padding: 0;
    }
    .container .p_label {
        font-size: 24px;
    }
    .list .item .tag {
        font-size: 14px;
        line-height: 1.5;
    }
    .list .item .name {
        font-size: 18px;
    }
    
    .list .item .bottom .left span:first-child {
        font-size: 14px;
    }
    .list .item .bottom .left span:last-child {
        font-size: 12px;
    }
}