.main-content {
  background: rgba(250, 250, 250, 0.9804);
  padding-bottom: calc(90 / var(--fontsize) * 1rem);
}

.main-content .hero-banner {
  position: relative;
  width: 100%;
  height: calc(316 / var(--fontsize) * 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../images/search/1.png") no-repeat center center;
  background-size: cover;
  overflow: hidden;
}

.main-content .hero-banner .hero-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

.main-content .hero-banner .hero-overlay .hero-subtitle {
  font-size: calc(16 / var(--fontsize) * 1rem);
  font-weight: 700;
  line-height: calc(21 / var(--fontsize) * 1rem);
  margin-bottom: calc(12 / var(--fontsize) * 1rem);
}

.main-content .hero-banner .hero-overlay .hero-title {
  font-size: calc(48 / var(--fontsize) * 1rem);
  font-weight: 700;
  line-height: calc(83 / var(--fontsize) * 1rem);
  margin-bottom: calc(30 / var(--fontsize) * 1rem);
}

.main-content .hero-banner .hero-overlay .hero-desc {
  font-size: calc(24 / var(--fontsize) * 1rem);
  line-height: calc(32 / var(--fontsize) * 1rem);
  font-weight: 400;
}

.main-content .breadcrumb {
  display: flex;
  align-items: center;
  gap: calc(7 / var(--fontsize) * 1rem);
  padding: calc(37 / var(--fontsize) * 1rem) 0;
  margin-left: calc(248 / var(--fontsize) * 1rem);
  color: #666666;
  font-size: calc(14 / var(--fontsize) * 1rem);
  line-height: calc(24 / var(--fontsize) * 1rem);
}

.main-content .breadcrumb a {
  color: #666666;
  text-decoration: none;
}

.main-content .breadcrumb a:hover {
  color: #333333;
}

.main-content .content-wrapper {
  display: flex;
  gap: calc(36 / var(--fontsize) * 1rem);
  margin: 0 calc(248 / var(--fontsize) * 1rem);
}

.main-content .content-wrapper .article-section {
  width: calc(972 / var(--fontsize) * 1rem);
  flex: 0 0 calc(972 / var(--fontsize) * 1rem);
}

.main-content .content-wrapper .article-section .article-list {
  display: flex;
  flex-direction: column;
  gap: calc(24 / var(--fontsize) * 1rem);
  min-height: calc(500 / var(--fontsize) * 1rem);
}

.main-content .content-wrapper .article-section .article-list .article-card {
  height: calc(200 / var(--fontsize) * 1rem);
  border-radius: calc(20 / var(--fontsize) * 1rem);
  background: white;
  display: flex;
  gap: calc(16 / var(--fontsize) * 1rem);
  padding: calc(20 / var(--fontsize) * 1rem);
  cursor: pointer;
  text-decoration: none;
}

.main-content .content-wrapper .article-section .article-list .article-card .article-cover {
  width: calc(216 / var(--fontsize) * 1rem);
  height: calc(160 / var(--fontsize) * 1rem);
  background: #fafafa;
  border-radius: calc(16 / var(--fontsize) * 1rem);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.main-content .content-wrapper .article-section .article-list .article-card .article-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.main-content .content-wrapper .article-section .article-list .article-card .article-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.main-content .content-wrapper .article-section .article-list .article-card .article-content .article-info {
  display: flex;
  flex-direction: column;
}

.main-content .content-wrapper .article-section .article-list .article-card .article-content .article-info .article-title {
  font-weight: bold;
  font-size: calc(18 / var(--fontsize) * 1rem);
  color: #333;
  line-height: calc(24 / var(--fontsize) * 1rem);
  margin-bottom: calc(7 / var(--fontsize) * 1rem);
}

.main-content .content-wrapper .article-section .article-list .article-card .article-content .article-info .article-desc {
  font-size: calc(14 / var(--fontsize) * 1rem);
  color: #666666;
  line-height: calc(24 / var(--fontsize) * 1rem);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(48 / var(--fontsize) * 1rem);
}

.main-content .content-wrapper .article-section .article-list .article-card .article-content .article-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-content .content-wrapper .article-section .article-list .article-card .article-content .article-footer .article-meta {
  display: flex;
  align-items: center;
  gap: calc(12 / var(--fontsize) * 1rem);
}

.main-content .content-wrapper .article-section .article-list .article-card .article-content .article-footer .article-date {
  font-size: calc(14 / var(--fontsize) * 1rem);
  line-height: calc(24 / var(--fontsize) * 1rem);
  color: #666666;
}

.main-content .content-wrapper .article-section .pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: calc(40 / var(--fontsize) * 1rem);
}

.main-content .content-wrapper .article-section .pagination-wrapper .pagination {
  display: flex;
  align-items: center;
  gap: calc(12 / var(--fontsize) * 1rem);
}

.main-content .content-wrapper .article-section .pagination-wrapper .pagination .pagination-info {
  font-size: calc(14 / var(--fontsize) * 1rem);
  color: #333;
  margin-right: calc(8 / var(--fontsize) * 1rem);
}

.main-content .content-wrapper .article-section .pagination-wrapper .pagination .pagination-info span {
  color: #1890ff;
  font-weight: bold;
}

.main-content .content-wrapper .article-section .pagination-wrapper .pagination .pagination-btn {
  padding: calc(8 / var(--fontsize) * 1rem) calc(16 / var(--fontsize) * 1rem);
  border: 1px solid #ddd;
  background: white;
  border-radius: calc(4 / var(--fontsize) * 1rem);
  cursor: pointer;
  font-size: calc(14 / var(--fontsize) * 1rem);
  color: #333;
  transition: all 0.3s;
}

.main-content .content-wrapper .article-section .pagination-wrapper .pagination .pagination-btn:hover:not(:disabled) {
  border-color: #1890ff;
  color: #1890ff;
}

.main-content .content-wrapper .article-section .pagination-wrapper .pagination .pagination-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.main-content .content-wrapper .article-section .pagination-wrapper .pagination .pagination-pages {
  display: flex;
  gap: calc(8 / var(--fontsize) * 1rem);
}

.main-content .content-wrapper .article-section .pagination-wrapper .pagination .pagination-pages .page-number {
  width: calc(32 / var(--fontsize) * 1rem);
  height: calc(32 / var(--fontsize) * 1rem);
  border: 1px solid #ddd;
  background: white;
  border-radius: calc(4 / var(--fontsize) * 1rem);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(14 / var(--fontsize) * 1rem);
  color: #333;
  transition: all 0.3s;
}

.main-content .content-wrapper .article-section .pagination-wrapper .pagination .pagination-pages .page-number:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.main-content .content-wrapper .article-section .pagination-wrapper .pagination .pagination-pages .page-number.active {
  background: #1890ff;
  border-color: #1890ff;
  color: white;
}

.main-content .content-wrapper .article-section .pagination-wrapper .pagination .pagination-jumper {
  display: flex;
  align-items: center;
  gap: calc(8 / var(--fontsize) * 1rem);
  font-size: calc(14 / var(--fontsize) * 1rem);
  color: #333;
  margin-left: calc(8 / var(--fontsize) * 1rem);
}

.main-content .content-wrapper .article-section .pagination-wrapper .pagination .pagination-jumper input {
  width: calc(50 / var(--fontsize) * 1rem);
  height: calc(32 / var(--fontsize) * 1rem);
  border: 1px solid #ddd;
  border-radius: calc(4 / var(--fontsize) * 1rem);
  text-align: center;
  font-size: calc(14 / var(--fontsize) * 1rem);
  outline: none;
  -moz-appearance: textfield;
}

.main-content .content-wrapper .article-section .pagination-wrapper .pagination .pagination-jumper input::-webkit-outer-spin-button, .main-content .content-wrapper .article-section .pagination-wrapper .pagination .pagination-jumper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.main-content .content-wrapper .article-section .pagination-wrapper .pagination .pagination-jumper input:focus {
  border-color: #1890ff;
}

.main-content .content-wrapper .sidebar {
  display: flex;
  flex-direction: column;
  gap: calc(24 / var(--fontsize) * 1rem);
  width: calc(416 / var(--fontsize) * 1rem);
  flex: 0 0 calc(416 / var(--fontsize) * 1rem);
}

.main-content .content-wrapper .sidebar .hots-card {
  width: calc(416 / var(--fontsize) * 1rem);
  min-height: calc(520 / var(--fontsize) * 1rem);
  border-radius: calc(20 / var(--fontsize) * 1rem);
  padding: calc(24 / var(--fontsize) * 1rem);
  background: white;
}

.main-content .content-wrapper .sidebar .hots-card .hots-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-content .content-wrapper .sidebar .hots-card .hots-header .hots-title {
  font-size: calc(18 / var(--fontsize) * 1rem);
  color: #333;
}

.main-content .content-wrapper .sidebar .hots-card .hots-header .hots-tabs {
  display: flex;
  align-items: center;
  gap: calc(14 / var(--fontsize) * 1rem);
}

.main-content .content-wrapper .sidebar .hots-card .hots-header .hots-tabs .hots-tab {
  width: calc(28 / var(--fontsize) * 1rem);
  height: calc(28 / var(--fontsize) * 1rem);
  border-radius: calc(4 / var(--fontsize) * 1rem);
  border: none;
  cursor: pointer;
  font-size: calc(16 / var(--fontsize) * 1rem);
  color: white;
  background: rgba(204, 204, 204, 0.8);
  transition: background 0.3s;
}

.main-content .content-wrapper .sidebar .hots-card .hots-header .hots-tabs .hots-tab.active {
  background: #ff3c82;
}

.main-content .content-wrapper .sidebar .hots-card .hots-header .hots-tabs .hots-tab:hover {
  background: #ff3c82;
}

.main-content .content-wrapper .sidebar .hots-card .hots-list {
  height: 100%;
  margin-top: calc(29 / var(--fontsize) * 1rem);
  display: flex;
  flex-direction: column;
  gap: calc(23 / var(--fontsize) * 1rem);
}

.main-content .content-wrapper .sidebar .hots-card .hots-list .hots-item {
  display: flex;
  align-items: center;
  gap: calc(12 / var(--fontsize) * 1rem);
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.3s;
}

.main-content .content-wrapper .sidebar .hots-card .hots-list .hots-item:hover {
  opacity: 0.8;
}

.main-content .content-wrapper .sidebar .hots-card .hots-list .hots-item .hots-rank {
  width: calc(21 / var(--fontsize) * 1rem);
  height: calc(21 / var(--fontsize) * 1rem);
  border-radius: calc(4 / var(--fontsize) * 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: calc(16 / var(--fontsize) * 1rem);
  flex-shrink: 0;
}

.main-content .content-wrapper .sidebar .hots-card .hots-list .hots-item .hots-rank.rank-1 {
  background: #ff7a7a;
}

.main-content .content-wrapper .sidebar .hots-card .hots-list .hots-item .hots-rank.rank-2 {
  background: #ff9a7b;
}

.main-content .content-wrapper .sidebar .hots-card .hots-list .hots-item .hots-rank.rank-3 {
  background: #ff9a7b;
}

.main-content .content-wrapper .sidebar .hots-card .hots-list .hots-item .hots-rank.rank-default {
  background: rgba(204, 204, 204, 0.8);
}

.main-content .content-wrapper .sidebar .hots-card .hots-list .hots-item .hots-title-text {
  width: calc(335 / var(--fontsize) * 1rem);
  font-size: calc(16 / var(--fontsize) * 1rem);
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-content .content-wrapper .sidebar .sidebar-image {
  width: calc(416 / var(--fontsize) * 1rem);
  height: calc(418 / var(--fontsize) * 1rem);
}

.main-content .content-wrapper .sidebar .sidebar-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(20 / var(--fontsize) * 1rem);
}