@charset "UTF-8";

/** 媒体查询 */

/** 布局 */

.h {
  height: 3.75rem;
}

@media (max-width: 800px) {
  .h {
    height: 1.875rem;
  }
}

.design-title .t1 {
  font-weight: bold;
  font-size: 3.75rem;
  color: #333333;
}

.design-title .t2 {
  font-size: 1.875rem;
  color: #666666;
  margin-top: 1.875rem;
}

@media (max-width: 800px) {
  .design-title .t1 {
    font-size: 1.5rem;
  }

  .design-title .t2 {
    font-size: 1rem;
    margin-top: 0.9375rem;
  }
}

.design-select {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1.875rem;
}

.design-select .item {
  font-size: 1.5rem;
  color: #333333;
  transition: color 0.3s;
}

.design-select .item:hover,
.design-select .item.active {
  color: #E6000D;
}

.design-select .item.active {
  font-weight: bold;
}

@media (min-width: 800px) {
  .design-select {
    margin-left: 1.875rem;
  }
}

@media (max-width: 800px) {
  .design-select {
    margin-top: 1.875rem;
  }

  .design-select .item {
    font-size: 1rem;
  }
}

.design-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.3125rem 6.25rem;
  margin-top: 6.25rem;
}

/*.design-list .item:nth-child(odd) {*/
/*  margin-top: 6.25rem;*/
/*}*/

.design-list .item .img img {
  transition: all 0.3s;
}

.design-list .item:hover .img img {
  transform: scale(1.1);
}

.design-list .item:hover .t1 {
  color: #E6000D;
}

.design-list .bottom {
  /*padding: 1.25rem 1.875rem;*/
  padding: 1.25rem 0;
}

.design-list .t1 {
  font-size: 1.2rem;
  color: #333333;
}

.design-list .t2 {
  font-size: 1rem;
  color: #666666;
}

.design-list .icon {
  width: 2.3125rem;
}

@media (max-width: 800px) {
  .design-list .bottom {
    padding: 0.625rem 0;
  }

  .design-list .t1 {
    font-size: 1rem;
  }

  .design-list .t2 {
    font-size: 0.8125rem;
  }

  .design-list .icon {
    width: 1.25rem;
  }
}

@media (min-width: 500px) and (max-width: 800px) {
  .design-list {
    gap: 0.3125rem 1.875rem;
    margin-top: 1.875rem;
  }

  .design-list .item:nth-child(odd) {
    margin-top: 1.875rem;
  }
}

@media (max-width: 500px) {
  .design-list {
    gap: 1.25rem;
    margin-top: 0;
    grid-template-columns: 1fr;
    margin-top: 1.875rem;
  }

  .design-list .item {
    border: 0.0625rem solid #eee;
  }

  .design-list .item:nth-child(odd) {
    margin-top: 0;
  }
}