.filter-select {
	padding: 12px 20px; background: #eceeef; border-radius: 5px; margin-bottom: 18px;
	.filter-group {
		display: flex; align-items: center; 
		&:not(:last-child) {
			margin-bottom: 15px;
		}
	}
	.title {
		font-size: 1.5rem; font-weight: 800; width: 90px;
	}
	.checkbox {
		display: flex; gap: 7px; flex-wrap: wrap; width: calc(100% - 90px);
		.input-check {
			input {
				display: none;
				&:checked+label {
					border-color: #000; color: #000; font-weight: 800;
					svg {
						fill: #000;
					}
				}
				&.type-1 {
					&:checked+label {
						border-color: var(--blue); color: var(--blue);
						svg {
							fill: var(--blue);
						}
					}
				}
				&.type-2 {
					&:checked+label {
						border-color: var(--green); color: var(--green);
						svg {
							fill: var(--green);
						}
					}
				}
				&.type-3 {
					&:checked+label {
						border-color: var(--pink); color: var(--pink);
						svg {
							fill: var(--pink);
						}
					}
				}
				&.type-4 {
					&:checked+label {
						border-color: var(--orange); color: var(--orange);
						svg {
							fill: var(--orange);
						}
					}
				}
				&.type-5 {
					&:checked+label {
						border-color: #14aabb; color: #14aabb;
						svg {
							fill: #14aabb;
						}
					}
				}
				&.type-6 {
					&:checked+label {
						border-color: #4a5ca1; color: #4a5ca1;
						svg {
							fill: #4a5ca1;
						}
					}
				}
				&.type-7 {
					&:checked+label {
						border-color: #7c14bb; color: #7c14bb;
						svg {
							fill: #7c14bb;
						}
					}
				}
				&.type-8 {
					&:checked+label {
						border-color: #d16200; color: #d16200;
						svg {
							fill: #d16200;
						}
					}
				}
				&.type-9 {
					&:checked+label {
						border-color: #058338; color: #058338;
						svg {
							fill: #058338;
						}
					}
				}
				&.type-10 {
					&:checked+label {
						border-color: #a485ff; color: #a485ff;
						svg {
							fill: #a485ff;
						}
					}
				}
			}
			label {
				font-weight: 600; font-size: 1.4rem; position: relative; padding: 5px 17px; border: 1px solid var(--line); border-radius: 4px; color: #777; display: block; text-align: center; background: #fff; cursor: pointer;
				svg {
					fill: #ccc; margin-right: 2px; width: 12px; height: 9px;
				}
			}
		}
	}
}

@media (max-width: 1060px) {
	.filter-select {
		.checkbox {
			.input-check {
				label {
					font-size: 1.3rem; padding: 7px 15px;
				}
			}
		}
		.title {
			font-size: 1.6rem; padding-right: 20px;
		}
	}
}

@media (max-width: 768px) {
	.filter-select {
		.checkbox {
			.input-check {
				text-align: center; min-width: auto;
				label {
					font-size: 1.2rem;
				}
			}
		}
		.title {
			font-size: 1.4rem; padding-right: 15px;
		}
	}
}

@media (max-width: 475px) {
	.filter-select {
		padding: 5px 0 0; margin-bottom: 10px; background: transparent;
		.title {
			display: none;
		}
		.checkbox {
			gap: 5px; width: 100%;
		}
	}
}