.search-main {
  padding-top: calc(170 * var(--vmin));
  padding-bottom: calc(120 * var(--vmin));
  min-height: calc(600 * var(--vmin));
}

.search-main .section-title {
  display: block;
}

.search-box {
  display: flex;
  gap: calc(20 * var(--vmin));
  margin-top: calc(60 * var(--vmin));
}

.search-box__field {
  position: relative;
  flex: 1;
  display: flex;
}

.search-box__input {
  flex: 1;
  width: 100%;

  padding: calc(20 * var(--vmin)) calc(60 * var(--vmin)) calc(20 * var(--vmin)) calc(28 * var(--vmin));
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  font-size: calc(17 * var(--vmin));
  color: var(--c-text-dark);
  outline: none;
  transition: border-color 0.25s;
}

.search-box__input:focus {
  border-color: var(--c-green);
}

.search-box__input::placeholder {
  color: #bbbbbb;
}

.search-box__btn {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--vmin));
  padding: 0 calc(36 * var(--vmin));
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--c-green);
  color: var(--c-white);
  font-size: calc(16 * var(--vmin));
  cursor: pointer;
  transition: background 0.25s;
}

.search-box__btn:hover {
  background: #249640;
}

.search-box__clear {
  position: absolute;
  top: 50%;
  right: calc(24 * var(--vmin));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(30 * var(--vmin));
  height: calc(30 * var(--vmin));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e8e8e8;
  color: #999999;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.25s, color 0.25s;
}

.search-box__clear[hidden] {
  display: none;
}

.search-box__clear:hover {
  background: #d6d6d6;
  color: var(--c-text-dark);
}

.search-tip {
  margin-top: calc(24 * var(--vmin));
  font-size: calc(14 * var(--vmin));
  color: #999999;
}

.search-history {
  margin-top: calc(40 * var(--vmin));
}

.search-history[hidden] {
  display: none;
}

.search-history__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(16 * var(--vmin));
}

.search-history__title {
  font-size: calc(15 * var(--vmin));
  color: #999999;
}

.search-history__clear {
  padding: 0;
  border: 0;
  background: none;
  font-size: calc(14 * var(--vmin));
  color: #999999;
  cursor: pointer;
  transition: color 0.25s;
}

.search-history__clear:hover {
  color: var(--c-text-dark);
}

.search-history__list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--vmin));
}

.search-history__list li {
  display: flex;
  align-items: center;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  background: var(--c-white);
  transition: border-color 0.25s;
}

.search-history__list li:hover {
  border-color: var(--c-green);
}

.search-history__item {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--vmin));
  padding: calc(10 * var(--vmin)) calc(8 * var(--vmin)) calc(10 * var(--vmin)) calc(20 * var(--vmin));
  border: 0;
  background: none;
  font-size: calc(15 * var(--vmin));
  color: var(--c-text);
  cursor: pointer;
  max-width: calc(320 * var(--vmin));
}

.search-history__item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-history__icon {
  flex-shrink: 0;
  color: #bbbbbb;
}

.search-history__del {
  flex-shrink: 0;
  display: flex;
  padding: 0 calc(16 * var(--vmin)) 0 calc(4 * var(--vmin));
  border: 0;
  background: none;
  color: #cccccc;
  cursor: pointer;
  transition: color 0.25s;
}

.search-history__del:hover {
  color: var(--c-text-dark);
}

.search-history:not([hidden]) + .search-list {
  margin-top: calc(36 * var(--vmin));
}

.search-list {
  margin-top: calc(50 * var(--vmin));
}

.search-list .search-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(20 * var(--vmin));
  padding: calc(28 * var(--vmin)) calc(32 * var(--vmin));
  margin-top: calc(16 * var(--vmin));
  border: 1px solid var(--c-border);
  border-radius: calc(10 * var(--vmin));
  background: var(--c-white);
  cursor: pointer;
  transition: box-shadow 0.3s, transform 0.3s;
}

.search-list .search-item:hover {
  box-shadow: 0 calc(10 * var(--vmin)) calc(30 * var(--vmin)) rgba(0, 0, 0, 0.08);
  transform: translateY(calc(-3 * var(--vmin)));
}

.search-item__type {
  flex-shrink: 0;
  padding: calc(6 * var(--vmin)) calc(16 * var(--vmin));
  border-radius: var(--radius-pill);
  background: rgba(45, 174, 74, 0.1);
  font-size: calc(13 * var(--vmin));
  color: var(--c-green);
}

.search-item__type[data-type="解决方案"] {
  background: rgba(10, 77, 160, 0.1);
  color: var(--c-blue);
}

.search-item__type[data-type="服务支持"] {
  background: rgba(42, 130, 228, 0.1);
  color: var(--c-blue-bright);
}

.search-item__type[data-type="新闻"] {
  background: rgba(191, 108, 25, 0.12);
  color: rgba(191, 108, 25, 1);
}

.search-item__title {
  overflow: hidden;
  font-size: calc(17 * var(--vmin));
  color: var(--c-text-dark);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-empty {
  margin-top: calc(50 * var(--vmin));
  font-size: calc(16 * var(--vmin));
  color: #999999;
  text-align: center;
}

@media (max-width: 1200px) {
  .search-main {
    padding-top: calc(130 * var(--vmin));
    padding-bottom: calc(80 * var(--vmin));
  }
}

@media (max-width: 768px) {
  .search-main {
    padding-top: calc(80 * var(--vmin));
  }
}