.filter {
  max-width: 1000px;
  margin: auto;
}
.filter__wrapper {
  width: 100%;
  padding: 40px 20px;
  background: #f7f7f7;
}
.filter__condition {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.filter__condition--text {
  margin-right: 4px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 170%;
  color: #757575;
}
.filter__condition--items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  row-gap: 8px;
  -webkit-column-gap: 4px;
     -moz-column-gap: 4px;
          column-gap: 4px;
}
@media (max-width: 900px) {
  .filter__condition--items {
    row-gap: 8px;
    -webkit-column-gap: 8px;
       -moz-column-gap: 8px;
            column-gap: 8px;
  }
}
.filter__condition--item {
  padding: 0 16px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 170%;
  color: #0064cf;
  border: 1px solid #0064cf;
  border-radius: 30px;
}
.filter__condition--item.search {
  color: white;
  background-color: #0064cf;
}
.filter__more {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  padding: 20px 24px;
  background-color: white;
  border: 1px solid #0064cf;
  border-radius: 5px;
}
.filter__more:hover {
  cursor: pointer;
}
.filter__more--text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  color: #0064cf;
}
@media (max-width: 900px) {
  .filter__more--text {
    gap: 0;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
  }
}
.filter__more--text::after {
  content: "";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 26px;
  height: 26px;
  background-image: url('data:image/svg+xml,<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.58268 10.8333L12.9993 16.25L18.416 10.8333" stroke="%230064CF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
}
.filter__more--text.open::after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none"><path d="M18.4173 15.1667L13.0007 9.75L7.58398 15.1667" stroke="%230064CF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.filter__search {
  height: 0;
  overflow: hidden;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.filter__info {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 8px 24px;
  margin: 40px auto;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  color: #f97930;
  background: white;
  border: 1px solid #f97930;
}
@media (max-width: 900px) {
  .filter__info {
    width: 100%;
    padding: 8px 16px;
    margin-bottom: 24px;
  }
}
.filter__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 32px;
}
@media (max-width: 900px) {
  .filter__contents {
    gap: 0;
  }
}
.filter__group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid #ddd;
}
@media (max-width: 900px) {
  .filter__group {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 13px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    width: 100%;
    height: 100%;
    max-height: 56px;
    padding: 16px 0;
    overflow: hidden;
    -webkit-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
  }
}
@media (max-width: 900px) {
  .filter__group.open {
    max-height: 600px;
  }
}
.filter__group.open .filter__group--title::before {
  height: 0;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.filter__group--contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
  width: 100%;
}
.filter__group--wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.filter__group--title {
  position: relative;
  width: 160px;
  min-width: 160px;
}
@media (max-width: 900px) {
  .filter__group--title {
    width: 100%;
  }
  .filter__group--title::before, .filter__group--title::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 28px;
    height: 28px;
    background-image: url('data:image/svg+xml,<svg width="26" height="27" viewBox="0 0 26 27" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23 13L3 13" stroke="%232E2D28" stroke-width="2" stroke-linecap="round"/></svg>');
    background-position: center;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .filter__group--title::before {
    height: 28px;
    -webkit-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
    -webkit-transform: rotate(90deg) translateX(-50%);
            transform: rotate(90deg) translateX(-50%);
  }
  .filter__group--title:hover {
    cursor: pointer;
  }
}
.filter__group--title-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 27px;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
@media (max-width: 900px) {
  .filter__group--title-text {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
  }
}
.filter__group--title-text.large {
  height: 48px;
}
@media (max-width: 900px) {
  .filter__group--title-text.large {
    height: 27px;
  }
}
.filter__group--inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.filter__group--row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.filter__list, .filter__list2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  row-gap: 18px;
  -webkit-column-gap: 24px;
     -moz-column-gap: 24px;
          column-gap: 24px;
}
@media (max-width: 900px) {
  .filter__list, .filter__list2 {
    row-gap: 16px;
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
            column-gap: 0;
  }
}
.filter__list--item, .filter__list2--item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 900px) {
  .filter__list--item, .filter__list2--item {
    width: 50%;
  }
}
.filter__list2 {
  max-width: 560px;
}
@media (max-width: 900px) {
  .filter__list2 {
    -webkit-column-gap: 24px;
       -moz-column-gap: 24px;
            column-gap: 24px;
    max-width: 100%;
  }
}
.filter__list2--item {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.filter__select {
  width: 100%;
  height: 48px;
  padding: 8px 16px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 170%;
  border: 1px solid #cfcfcf;
  border-radius: 5px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  padding: 10px 34px 10px 16px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 170%;
  background-image: url('data:image/svg+xml,<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.58268 10.8333L12.9993 16.25L18.416 10.8333" stroke="%232E2D28" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: calc(100% - 8px) center;
  width: 185px;
  background-color: white;
}
.filter__select:hover {
  border-color: #757575;
}
.filter__select::-webkit-input-placeholder {
  color: #b6b6b6;
}
.filter__select::-moz-placeholder {
  color: #b6b6b6;
}
.filter__select:-ms-input-placeholder {
  color: #b6b6b6;
}
.filter__select::-ms-input-placeholder {
  color: #b6b6b6;
}
.filter__select::placeholder {
  color: #b6b6b6;
}
.filter__select:hover {
  cursor: pointer;
}
.filter__description {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  color: #5c5c5c;
}
.filter__address--wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
}
@media (max-width: 900px) {
  .filter__address--wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.filter__address--group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.filter__address--row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 8px;
}
@media (max-width: 900px) {
  .filter__address--row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.filter__address--select {
  width: 100%;
  height: 48px;
  padding: 8px 16px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 170%;
  border: 1px solid #cfcfcf;
  border-radius: 5px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  padding: 10px 34px 10px 16px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 170%;
  background-image: url('data:image/svg+xml,<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.58268 10.8333L12.9993 16.25L18.416 10.8333" stroke="%232E2D28" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: calc(100% - 8px) center;
  background-color: white;
}
.filter__address--select:hover {
  border-color: #757575;
}
.filter__address--select::-webkit-input-placeholder {
  color: #b6b6b6;
}
.filter__address--select::-moz-placeholder {
  color: #b6b6b6;
}
.filter__address--select:-ms-input-placeholder {
  color: #b6b6b6;
}
.filter__address--select::-ms-input-placeholder {
  color: #b6b6b6;
}
.filter__address--select::placeholder {
  color: #b6b6b6;
}
.filter__address--select:hover {
  cursor: pointer;
}
.filter__address--select:disabled {
  color: #b6b6b6;
  background-color: #ececec;
  background-image: url('data:image/svg+xml,<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.58268 10.8333L12.9993 16.25L18.416 10.8333" stroke="%23B6B6B6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.filter__address--select:disabled:hover {
  cursor: not-allowed;
}
.filter__address--select-wrapper {
  min-width: 185px;
}
@media (max-width: 900px) {
  .filter__address--select-wrapper {
    min-width: 100%;
    max-width: 100%;
  }
}
.filter__address--select-wrapper:first-child {
  margin-right: 8px;
}
@media (max-width: 900px) {
  .filter__address--select-wrapper:first-child {
    margin-right: 0;
    margin-bottom: 8px;
  }
}
.filter__education {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  row-gap: 16px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.filter__education--group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.filter__education--group-title {
  width: 73px;
  min-width: 73px;
  margin-right: 8px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
.filter__education--group-input {
  width: 100%;
  height: 48px;
  padding: 8px 16px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 170%;
  border: 1px solid #cfcfcf;
  border-radius: 5px;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  background-color: white;
}
.filter__education--group-input:hover {
  border-color: #757575;
}
.filter__education--group-input::-webkit-input-placeholder {
  color: #b6b6b6;
}
.filter__education--group-input::-moz-placeholder {
  color: #b6b6b6;
}
.filter__education--group-input:-ms-input-placeholder {
  color: #b6b6b6;
}
.filter__education--group-input::-ms-input-placeholder {
  color: #b6b6b6;
}
.filter__education--group-input::placeholder {
  color: #b6b6b6;
}
.filter__education--group-input:-moz-read-only {
  background-color: #ececec;
}
.filter__education--group-input:read-only {
  background-color: #ececec;
}
.filter__education--group-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 48.5%;
}
@media (max-width: 900px) {
  .filter__education--group-wrapper {
    width: 100%;
  }
}
.filter__lastEducation--wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 32px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 900px) {
  .filter__lastEducation--wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.filter__lastEducation--info {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  color: #5c5c5c;
}
.filter__camera--content {
  margin: auto 0;
}
.filter__keyword--input {
  width: 100%;
  height: 48px;
  padding: 8px 16px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 170%;
  border: 1px solid #cfcfcf;
  border-radius: 5px;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  width: 100%;
  max-width: 460px;
  background: white;
}
.filter__keyword--input:hover {
  border-color: #757575;
}
.filter__keyword--input::-webkit-input-placeholder {
  color: #b6b6b6;
}
.filter__keyword--input::-moz-placeholder {
  color: #b6b6b6;
}
.filter__keyword--input:-ms-input-placeholder {
  color: #b6b6b6;
}
.filter__keyword--input::-ms-input-placeholder {
  color: #b6b6b6;
}
.filter__keyword--input::placeholder {
  color: #b6b6b6;
}
.filter__keyword--input:-moz-read-only {
  background-color: #ececec;
}
.filter__keyword--input:read-only {
  background-color: #ececec;
}
@media (max-width: 900px) {
  .filter__keyword--input {
    max-width: 100%;
  }
}
.filter__teacher--input {
  width: 100%;
  height: 48px;
  padding: 8px 16px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 170%;
  border: 1px solid #cfcfcf;
  border-radius: 5px;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  width: 100%;
  max-width: 112px;
  background: white;
}
.filter__teacher--input:hover {
  border-color: #757575;
}
.filter__teacher--input::-webkit-input-placeholder {
  color: #b6b6b6;
}
.filter__teacher--input::-moz-placeholder {
  color: #b6b6b6;
}
.filter__teacher--input:-ms-input-placeholder {
  color: #b6b6b6;
}
.filter__teacher--input::-ms-input-placeholder {
  color: #b6b6b6;
}
.filter__teacher--input::placeholder {
  color: #b6b6b6;
}
.filter__teacher--input:-moz-read-only {
  background-color: #ececec;
}
.filter__teacher--input:read-only {
  background-color: #ececec;
}
@media (max-width: 900px) {
  .filter__teacher--input {
    max-width: 100%;
  }
}
.filter__buttons {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 900px) {
  .filter__buttons {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 24px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    margin-top: 32px;
  }
}
.filter__buttons--link {
  position: absolute;
  left: 0;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  color: #0064cf;
  text-decoration-line: underline;
  text-decoration-thickness: 6%;
  text-decoration-style: solid;
  text-underline-position: from-font;
  text-underline-offset: auto;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  font-weight: 700;
}
@media (max-width: 900px) {
  .filter__buttons--link {
    position: relative;
  }
}
.filter__buttons--button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
}
.filter__buttons--button-text {
  z-index: 4;
  width: 100%;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  color: white;
  border: none;
}
.filter__buttons--button-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 12px 48px;
  margin: 0 auto;
  position: relative;
}
.filter__buttons--button-wrapper:hover .hover-reverse-bg::before, .filter__buttons--button-wrapper:hover .hover-reverse-bg::after {
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
.filter__buttons--button-wrapper:hover .hover-reverse-bg::before {
  opacity: 0;
}
.filter__buttons--button-wrapper:hover .hover-reverse-bg::after {
  opacity: 1;
}
.filter__buttons--button-wrapper .hover-reverse-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.filter__buttons--button-wrapper .hover-reverse-bg::before, .filter__buttons--button-wrapper .hover-reverse-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
.filter__buttons--button-wrapper .hover-reverse-bg::before {
  background: -webkit-gradient(linear, right top, left top, color-stop(10.5%, #00a5f6), to(#004eea));
  background: linear-gradient(270deg, #00a5f6 10.5%, #004eea 100%);
  opacity: 1;
}
.filter__buttons--button-wrapper .hover-reverse-bg::after {
  background: -webkit-gradient(linear, right top, left top, color-stop(10.5%, #004eea), to(#00a5f6));
  background: linear-gradient(270deg, #004eea 10.5%, #00a5f6 100%);
  opacity: 0;
}
@media (max-width: 900px) {
  .filter__buttons--button-wrapper {
    width: 100%;
    max-width: 100%;
  }
}
.filter__buttons--button-wrapper .hover-reverse-bg {
  z-index: 3;
}
.filter__buttons--searchImage {
  z-index: 4;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
}

.result__wrapper {
  width: calc(100% - 40px);
  max-width: 1000px;
  margin: auto;
}
.result__text {
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
.result__text--wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.result__text--number {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  color: #0064cf;
}
.result__teachers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 64px;
}
@media (max-width: 900px) {
  .result__teachers {
    gap: 40px;
  }
}
.result__area {
  padding: 8px 12px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  color: #0064cf;
  background-color: #f5faff;
  border: 1px solid #cee6fe;
  border-radius: 5px;
}
.result__area--wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 64px;
}
.result__area.active {
  color: white;
  background-color: #0064cf;
}

.teacher__lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 64px;
  margin-top: 40px;
}
@media (max-width: 900px) {
  .teacher__lists {
    gap: 40px;
  }
}
.teacher__list {
  display: grid;
  grid-template-areas: "comment comment comment" "image info favorite" "image info_list detail";
  grid-template-columns: max(22.6%, 226px) auto min(11.2%, 195px);
  -webkit-column-gap: 2.4%;
     -moz-column-gap: 2.4%;
          column-gap: 2.4%;
}
@media (max-width: 900px) {
  .teacher__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
            column-gap: 0;
  }
}
.teacher__comment {
  margin: 16px 24px;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  display: -webkit-box;
  overflow: hidden;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
@media (max-width: 900px) {
  .teacher__comment {
    display: -webkit-box;
    overflow: hidden;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 12px 16px;
  }
}
.teacher__comment--wrapper {
  position: relative;
  grid-area: comment;
  margin-bottom: 26px;
  border: 1px solid #cfcfcf;
  border-radius: 20px;
}
.teacher__comment--wrapper::after {
  content: "";
  position: absolute;
  left: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 50.198px;
  height: 49.009px;
  background-image: url('data:image/svg+xml,<svg fill="none" height="11" viewBox="0 0 17 11" width="17" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><mask id="a" fill="%23fff"><path clip-rule="evenodd" d="m-48-55c-11.0457 0-20 8.9543-20 20v16c0 11.04569 8.9543 20 20 20h48.676506c5.981404 8.57554 15.585294 9.6783 15.585294 9.6783-3.9167-5.90313-4.3141-7.88042-4.6128-9.36649-.0213-.10602-.0421-.20954-.0636-.31181h900.4146c11.046 0 20-8.95431 20-20v-16c0-11.0457-8.954-20-20-20z" fill="%23fff" fill-rule="evenodd"/></mask><g fill="%23fff"><path d="m-84-86c0-1.1046.8954-2 2-2h1072c1.105 0 2 .8954 2 2v144c0 1.1046-.895 2-2 2h-1072c-1.1046 0-2-.8954-2-2z"/><path d="m-82-87h1072v-2h-1072zm1073 1v144h2v-144zm-1 145h-1072v2h1072zm-1073-1v-144h-2v144zm1 1c-.5523 0-1-.4477-1-1h-2c0 1.6568 1.3431 3 3 3zm1073-1c0 .5523-.448 1-1 1v2c1.657 0 3-1.3431 3-3zm-1-145c.552 0 1 .4477 1 1h2c0-1.6568-1.343-3-3-3zm-1072-2c-1.6569 0-3 1.3431-3 3h2c0-.5523.4477-1 1-1z" fill-opacity=".1"/><path clip-rule="evenodd" d="m-48-55c-11.0457 0-20 8.9543-20 20v16c0 11.04569 8.9543 20 20 20h48.676506c5.981404 8.57554 15.585294 9.6783 15.585294 9.6783-3.9167-5.90313-4.3141-7.88042-4.6128-9.36649-.0213-.10602-.0421-.20954-.0636-.31181h900.4146c11.046 0 20-8.95431 20-20v-16c0-11.0457-8.954-20-20-20z" fill-rule="evenodd"/></g><path d="m.676506 1 .820194-.572083-.29847-.427917h-.521724zm15.585294 9.6783-.1141.9934 2.1361.2453-1.1887-1.7916zm-4.6128-9.36649.9804-.19705v-.00001zm-.0636-.31181v-1h-1.2327l.2542 1.20615zm-78.5854-36c0-10.4934 8.5066-19 19-19v-2c-11.598 0-21 9.402-21 21zm0 16v-16h-2v16zm19 19c-10.4934 0-19-8.50659-19-19h-2c0 11.59798 9.402 21 21 21zm48.676506 0h-48.676506v2h48.676506zm-.820196 1.57208c3.1261 4.48189 7.19408 7.00338 10.46239 8.40222 1.6353.6999 3.078 1.1222 4.1167 1.3703.5198.1242.9397.205 1.2335.2552.147.0252.2625.0427.3433.0541.0405.0057.0723.01.095.0129.0113.0014.0204.0025.0272.0034.0034.0004.0062.0007.0084.001.0011.0001.0021.0002.0029.0003.0004.0001.0009.0001.0011.0001.0005.0001.0009.0001.115-.9933.1141-.9935.1144-.99346.1148-.99342 0 .00001.0003.00004.0004.00006.0003.00002.0003.00003.0003.00003-.0001-.00002-.0008-.0001-.002-.00025-.0025-.0003-.0073-.00089-.0143-.00178-.014-.00179-.0369-.00482-.0683-.00926-.0627-.00889-.1593-.02345-.2867-.04523-.2548-.04356-.6319-.11589-1.1059-.22911-.9489-.22664-2.2811-.61598-3.7944-1.26371-3.02903-1.29641-6.75369-3.61406-9.609-7.707713zm17.23879 8.55332c-1.9415-2.92609-2.9869-4.84402-3.5817-6.19076-.5845-1.32337-.7412-2.10958-.884-2.81988l-1.9608.39409c.156.77578.3473 1.72125 1.0153 3.23382.6577 1.4892 1.7694 3.51146 3.7446 6.48843zm-4.4657-9.01065c-.0211-.10518-.0428-.213305-.0655-.3209l-1.957.4123c.0204.09694.0403.19586.0617.30271zm899.3706-1.11475h-900.4146v2h900.4146zm19-19c0 10.49341-8.507 19-19 19v2c11.598 0 21-9.40202 21-21zm0-16v16h2v-16zm-19-19c10.493 0 19 8.5066 19 19h2c0-11.598-9.402-21-21-21zm-960 0h960v-2h-960z" fill="%23cfcfcf" mask="url(%23a)"/></svg>');
  background-repeat: no-repeat;
}
@media (max-width: 900px) {
  .teacher__comment--wrapper {
    grid-column: 100%;
    margin-bottom: 18px;
  }
}
.teacher__image {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  border-radius: 10px;
}
.teacher__image--wrapper {
  grid-area: image;
  width: 226px;
  min-width: 226px;
  height: 226px;
  min-height: 226px;
}
@media (max-width: 900px) {
  .teacher__image--wrapper {
    width: 150px;
    min-width: 150px;
    height: 150px;
    min-height: 150px;
  }
}
@media (max-width: 374px) {
  .teacher__image--wrapper {
    width: 140px;
    min-width: 140px;
    height: 140px;
    min-height: 140px;
  }
}
.teacher__date, .teacher__spDate {
  margin-top: 4px;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  color: #757575;
}
.teacher__date {
  display: none;
}
@media (min-width: 901px) {
  .teacher__date {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.teacher__spDate {
  display: none;
  grid-area: date;
}
@media (max-width: 900px) {
  .teacher__spDate {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin-top: 16px;
  }
}
.teacher__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  grid-area: info;
  gap: 5.21%;
  width: 109%;
  padding-bottom: 12px;
  margin-bottom: 24px;
  border-bottom: 2px solid #ddd;
}
@media (max-width: 900px) {
  .teacher__info {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0;
    width: 50%;
    padding-bottom: 0;
    margin-bottom: 0;
    margin-left: 16px;
    border-bottom: none;
  }
}
.teacher__info--group, .teacher__info--payment, .teacher__info--id {
  word-break: keep-all;
  white-space: nowrap;
}
.teacher__info--group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: auto;
}
@media (max-width: 900px) {
  .teacher__info--group {
    margin-top: 4px;
  }
}
.teacher__info--name {
  font-size: 26px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
@media (max-width: 900px) {
  .teacher__info--name {
    font-size: 24px;
  }
}
.teacher__info--genderMale, .teacher__info--genderFemale {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
.teacher__info--genderMale {
  color: #0064cf;
}
.teacher__info--genderFemale {
  color: #ea2578;
}
.teacher__info--slash {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  color: #909090;
}
.teacher__info--id {
  margin-top: auto;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  color: #757575;
}
@media (max-width: 900px) {
  .teacher__info--id {
    margin-top: 8px;
  }
}
.teacher__info--payment {
  margin-top: auto;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  color: #757575;
}
@media (max-width: 900px) {
  .teacher__info--payment {
    margin-top: 4px;
  }
}
.teacher__info--payment-amount {
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  color: #f97930;
}
.teacher__infoList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #ddd;
}
.teacher__infoList:first-child {
  padding-top: 0;
}
.teacher__infoList:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
@media (max-width: 900px) {
  .teacher__infoList {
    gap: 16px;
  }
}
.teacher__infoList--wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  grid-area: info_list;
}
@media (max-width: 900px) {
  .teacher__infoList--wrapper {
    width: 100%;
    margin-top: 16px;
    margin-bottom: 16px;
  }
}
.teacher__infoList--title-education, .teacher__infoList--title-address, .teacher__infoList--title-method, .teacher__infoList--title-category {
  width: 98px;
  min-width: 98px;
  margin-bottom: auto;
  font-size: 14px;
  font-style: normal;
  line-height: 150%;
  color: #757575;
}
@media (max-width: 900px) {
  .teacher__infoList--title-education, .teacher__infoList--title-address, .teacher__infoList--title-method, .teacher__infoList--title-category {
    width: 70px;
    min-width: 70px;
  }
}
.teacher__infoList--title-lastText {
  letter-spacing: 0;
}
.teacher__infoList--title-education {
  font-weight: 700;
  letter-spacing: 14px;
}
@media (max-width: 900px) {
  .teacher__infoList--title-education {
    letter-spacing: 4px;
  }
}
.teacher__infoList--title-address {
  font-weight: 700;
  letter-spacing: 70px;
}
@media (max-width: 900px) {
  .teacher__infoList--title-address {
    letter-spacing: 42px;
  }
}
.teacher__infoList--title-method {
  font-weight: 700;
  letter-spacing: 14px;
}
@media (max-width: 900px) {
  .teacher__infoList--title-method {
    letter-spacing: 4px;
  }
}
.teacher__infoList--title-category {
  font-weight: 700;
}
.teacher__infoList--value {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
.teacher__favorite {
  grid-area: favorite;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: auto;
  margin-bottom: 24px;
  margin-left: auto;
}
@media (max-width: 900px) {
  .teacher__favorite {
    grid-column: 20px;
    margin-bottom: 0;
    margin-left: 0;
  }
}
@media (max-width: 374px) {
  .teacher__favorite {
    margin-right: 16px;
  }
}
.teacher__detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  grid-area: detail;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}
.teacher__detail:hover .hover-reverse-bg::before, .teacher__detail:hover .hover-reverse-bg::after {
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
.teacher__detail:hover .hover-reverse-bg::before {
  opacity: 0;
}
.teacher__detail:hover .hover-reverse-bg::after {
  opacity: 1;
}
.teacher__detail .hover-reverse-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.teacher__detail .hover-reverse-bg::before, .teacher__detail .hover-reverse-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
.teacher__detail .hover-reverse-bg::before {
  background: -webkit-gradient(linear, right top, left top, color-stop(10.5%, #00a5f6), to(#004eea));
  background: linear-gradient(270deg, #00a5f6 10.5%, #004eea 100%);
  opacity: 1;
}
.teacher__detail .hover-reverse-bg::after {
  background: -webkit-gradient(linear, right top, left top, color-stop(10.5%, #004eea), to(#00a5f6));
  background: linear-gradient(270deg, #004eea 10.5%, #00a5f6 100%);
  opacity: 0;
}
@media (max-width: 900px) {
  .teacher__detail {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: calc(100% - 64px);
    margin-left: auto;
  }
}
.teacher__detail--text {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  color: white;
}

.input__checkbox {
  background-color: white;
}
@media (max-width: 900px) {
  .input__radio--label {
    font-size: 16px;
  }
}
.input__checkbox--label {
  font-size: 16px;
}