.search-container {
    display: flex;
    align-items: center;
    max-width: 400px;
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
}

#search-button {
    padding: 0px 5px;
    background-color: #007bff00;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* #search-button:hover {
    background-color: #0056b3;
} */
 /* 图标样式 */
#search-button i {
    margin-right: 5px;
}

/* 手机端 */
@media (max-width: 576px) {
  .box { width: 100%; }
}

/* 平板 */
@media (min-width: 577px) and (max-width: 992px) {
  .box { width: 50%; }
}

/* 桌面端 */
@media (min-width: 993px) {
  .box { width: 25%; }
}