/* MODAL WINDOW */
#modalTrigger:checked ~ .modal {
  opacity: 1;
  visibility: visible;
  pointer-events: initial;
}
#modalTrigger:checked ~ .modal .modal-inner {
  transform: none;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.2s ease-in-out;
}
.modal .modal-inner {
  position: relative;
  text-align: center;
  max-width: calc(100% - 50px);
  width: 700px;
  padding: 30px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  background-color: var(--color14);
  border-radius: 3px;
  z-index: 2;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.45);
  transform: translate(0, 100%);
  transition: all 0.2s ease;
}
.modal .modal-inner .close-modal {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  height: 1.2rem;
  width: 1.2rem;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36.18' height='36.18' viewBox='0 0 36.18 36.18'%3E%3Cpath d='M18.09,3.015A15.075,15.075,0,1,1,3.015,18.09,15.092,15.092,0,0,1,18.09,3.015ZM18.09,0A18.09,18.09,0,1,0,36.18,18.09,18.091,18.091,0,0,0,18.09,0Zm9.045,24.931-6.922-6.856,6.853-6.915L24.931,9.045l-6.852,6.918L11.163,9.114,9.045,11.232l6.924,6.862L9.114,25.017l2.118,2.118L18.1,20.206l6.921,6.859,2.115-2.135Z' fill='%23545C68'/%3E%3C/svg%3E%0A");
  background-size: contain;
  background-repeat: no-repeat;
  transition: all 0.2s ease;
}
.modal .modal-inner .close-modal label {
  height: 1.2rem;
  width: 1.2rem;
  color: transparent;
  cursor: pointer;
}
.modal .overlay-modal {
  position: absolute;
  background: rgba(0, 0, 0, 0.75);
  height: 100%;
  width: 100%;
  z-index: 1;
}

/* MODAL CONTENT */
.filter-wrapper {
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  color: var(--color08);
}
.filter-box {
  width: calc(50% - 15px);
  text-align: left;
  padding: 0 0 20px 0;
}
.filter-box h3 {
  display: block;
  font-size: var(--font18);
  padding: 20px 0;
}
.filter-box hr {
  border: 1px solid var(--color15);
  border-width: 1px 0 0 0;
}
.filter-reset-box {
  width: 100%;
  height: 20px;
  justify-content: flex-start;
  color: var(--color08);
}
.filter-reset-box span {
  font-size: var(--font12);
  cursor: pointer;
}
.filter-reset-box span:hover {
  color: var(--color16);
}