.instructContent {
  padding: 60px 0 120px;
}

.instructContent .--search {
  position     : relative;
  margin-bottom: 12px;
}

.instructContent .--search input {
  background   : #ffffff;
  border       : 1px solid #dedede;
  border-radius: 4px;
  height       : 44px;
  padding      : 0 32px 0 16px;
  width        : 100%;
}

.instructContent .--search input::-moz-placeholder {
  color: #bdbdbd;
}

.instructContent .--search input::placeholder {
  color: #bdbdbd;
}

.instructContent .--search input:focus {
  border : 1px solid var(--color-1);
  outline: none;
}

.instructContent .--search .--icon {
  position      : absolute;
  top           : 50%;
  right         : 12px;
  pointer-events: none;
  transform     : translate(0, -50%);
}

.instructContent .--right .--title {
  font-size    : 32px;
  margin-bottom: 10px;
  font-weight  : 700;
  line-height  : 40px;
}

.instructContent .--right .--des {
  font-size    : 15px;
  font-style   : italic;
  font-weight  : 600;
  margin-bottom: 30px;
}

.instructContent .--right article img {
  max-width    : 100%;
  height       : auto;
  -o-object-fit: contain;
  object-fit   : contain;
}

.instructContent .--right article a {
  color     : var(--color-1);
  transition: all 0.15s ease;
}

.instructContent .--right article a:hover {
  color: var(--color-1);
}

.instructContent .--right .pagination {
  margin-top: 30px;
}

.instructContent .instuctUI2 .tabContent::-webkit-scrollbar {
  height: 6px;
}

.instructContent .instuctUI2 .tabContent::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.instructContent .instuctUI2 .tabContent::-webkit-scrollbar-thumb {
  background: #323232;
}

@media (max-width: 1023px) {
  .instructContent {
    padding: 60px 0;
  }

  .instructContent .--left button {
    display      : flex !important;
    padding      : 0 16px;
    height       : 44px;
    border-radius: 4px;
    border       : 1px solid #dedede;
    background   : #fff;
    align-items  : center;
    line-height  : 1;
  }

  .instructContent .--left button span {
    color: #000;
  }

  .instructContent .--left .--top {
    position: relative;
  }

  .instructContent .--left .collapse {
    margin-top: 12px;
  }

  .instructContent .--left .--search {
    margin-bottom: 0;
    width        : 44px;
    height       : 44px;
    border-radius: 4px;
    border       : 1px solid #dedede;
    position     : absolute;
    top          : 50%;
    transform    : translate(0, -50%);
    right        : 0;
    transition   : all 0.3s ease;
  }

  .instructContent .--left .--search.active {
    width: 100%;
  }

  .instructContent .--left .--search.active input {
    opacity       : 1;
    pointer-events: auto;
  }

  .instructContent .--left .--search input {
    width         : 100%;
    height        : 100%;
    opacity       : 0;
    pointer-events: none;
  }

  .instructContent .--left .collapse .tabAll {
    display: flex !important;
  }

  .instructContent .--right {
    margin-top: 24px;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .instructContent .--right {
    margin-top: 0;
  }

  .instructContent .--left button {
    text-align: left;
  }
}

@media (max-width: 1023px) {
  #instruct {
    padding-top: 100px;
  }
}

/*# sourceMappingURL=instruct.css.map */