@import url('./my_root.css');
.category_box {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.category_box .top {
  width: 1720px;
  display: grid;
  grid-gap: 20px;
  grid-auto-flow: dense;
  grid-template-columns: repeat(6, 1fr);
  justify-content: center;
}
.category_box .top .classify {
  height: 100%;
  min-height: 60px;
  display: flex;
  border-radius: 13px;
  background: var(--my-category-top-classify-bgcolor);
  transition: transform 0.2s, background 0.2s;
  text-decoration: none;
  align-items: center;
}
.category_box .top .classify .classify_l {
  height: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px 0 0 13px;
  overflow: hidden;
}
.category_box .top .classify .classify_l .classify_icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.category_box .top .classify .classify_r {
  color: var(--my-category-top-classify-r-color);
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 18px;
  line-height: 20px;
  overflow: hidden;
  text-transform: uppercase;
  padding-left: 22px;
  border-radius: 0 13px 13px 0;
}
.category_box .top .classify:hover {
  transform: scale(1.04);
  background: var(--my-category-top-classify-hover-bgcolor);
  box-shadow: var(--my-category-top-classify-hover-box-shadow);
}
@media (max-width: 1780px) {
  .category_box .top {
    width: 1575px;
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 1635px) {
  .category_box .top {
    width: 1430px;
  }
}
@media (max-width: 1490px) {
  .category_box .top {
    width: 1285px;
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1345px) {
  .category_box .top {
    width: 1140px;
  }
}
@media (max-width: 1200px) {
  .category_box .top {
    width: 995px;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1055px) {
  .category_box .top {
    width: 850px;
  }
}
@media (max-width: 910px) {
  .category_box .top {
    width: 705px;
    grid-template-columns: repeat(2, 1fr);
  }
  .category_box .top .classify {
   height: 10vw;
  }
}
@media (max-width: 750px) {
  .category_box .top {
    width: 100%;
    grid-gap: 3.4vw;
    grid-template-columns: repeat(2, 43vw);
  }
  .category_box .top .classify {
    width: 43vw;
   height: 10vw;
    border-radius: 3.7vw;
  }
  .category_box .top .classify .classify_l {
    border-radius: 2.4vw 0 0 2.4vw;
    width: 15.5vw;
  }
  .category_box .top .classify .classify_r {
    font-size: 3.2vw;
    line-height: 3.7vw;
    padding-left: 3.7vw;
    border-radius: 0 2.4vw 2.4vw 0;
  }
}
.category_box .category_more {
  margin-top: 30px;
}
@media (max-width: 750px) {
  .category_box .category_more {
    margin-top: 5vw;
  }
}