.c-cate-card {
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.c-cate-card__input {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
}
.c-cate-card__wrap {
  padding: var(--spacing-8);
  border-radius: var(--spacing-8);
  border: 1px solid transparent;
  background-color: var(--color-white);
  cursor: pointer;
  -webkit-transition: border 0.3s, background-color 0.3s;
  transition: border 0.3s, background-color 0.3s;
}
.c-cate-card__wrap:hover {
  border: 1px solid var(--color-primary);
}
.c-cate-card__title-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: var(--spacing-4);
  padding-bottom: 0;
  margin-bottom: var(--spacing-8);
}
.c-cate-card__title {
  margin-left: var(--spacing-16);
  font-size: var(--text-xl);
  font-weight: 700;
}
.c-cate-card__img-mask {
  --img-w-ratio: 3;
  --img-h-ratio: 2;
  border-radius: var(--spacing-4);
  background-color: var(--color-bg);
  overflow: hidden;
  -webkit-transition: background-color 0.3s, opacity 0.3s;
  transition: background-color 0.3s, opacity 0.3s;
}
.c-cate-card__img {
  user-drag: none;
  -webkit-user-drag: none;
}
@media (max-width: 575.98px) {
  .c-cate-card__title-wrap {
    padding-left: 0;
    padding-right: 0;
  }
  .c-cate-card__title {
    margin-left: var(--spacing-8);
    font-size: var(--text-lg);
  }
}
.c-cate-card__input:not(:checked) + .c-cate-card__wrap {
  background-color: var(--color-gray-light-40);
}
.c-cate-card__input:not(:checked) + .c-cate-card__wrap .c-cate-card__img-mask {
  background-color: transparent;
  opacity: 0.4;
}
/*# sourceMappingURL=step-01.css.map */