.page-container {
  position: relative;
  width: max(1200px, 100vw);
  overflow: hidden;
}

.hero-banner {
  width: max(1200px, 100vw);
  height: max(350.28px, 25.69vw);
  /* margin-top: max(22.56px, 1.88vw); */
}

.main-content {
  width: max(946.92px, 78.91vw);
  height: max(1020.36px, 83.03vw);
  margin: max(27.48px, 2.29vw) 0 0 max(129.36px, 10.78vw);
}

.literature-list {
  width: max(686.88px, 57.24vw);
  height: max(821.88px, 68.49vw);
  margin-top: max(18.84px, 1.57vw);
}

.search-bar {
  width: max(679.44px, 56.62vw);
  height: max(20.04px, 1.67vw);
  margin-top: max(6.96px, 0.58vw);
}

.title-section {
  width: max(177.6px, 14.8vw);
  height: max(14.4px, 1.2vw);
  overflow-wrap: break-word;
  font-size: 0;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: max(18.84px, 1.57vw);
  margin-top: max(0.72px, 0.06vw);
}

.title-item {
  width: max(177.6px, 14.8vw);
  height: max(14.4px, 1.2vw);
  overflow-wrap: break-word;
  font-size: max(15px, 1.25vw);
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: max(18.84px, 1.57vw);
  cursor: pointer;
}

.title-item.active {
  color: rgba(45, 80, 226, 1);
  padding-bottom: max(2.52px, 0.21vw);
  border-bottom: 2px solid rgba(45, 80, 226, 1);
}

.title-separator {
  width: max(177.6px, 14.8vw);
  height: max(14.4px, 1.2vw);
  overflow-wrap: break-word;
  color: rgba(91, 91, 91, 1);
  font-size: max(15px, 1.25vw);
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: max(18.84px, 1.57vw);
}

.search-input-group {
  border-radius: 3px;
  width: max(150px, 12.5vw);
  height: max(20.04px, 1.67vw);
  border: 1px solid rgba(91, 91, 91, 1);
  margin-left: max(290.64px, 24.22vw);
}

.search-input {
  width: max(53.16px, 4.43vw);
  height: max(8.16px, 0.68vw);
  border: none;
  outline: none;
  background: transparent;
  color: rgba(171, 171, 171, 1);
  font-size: max(8.64px, 0.72vw);
  font-family: AlibabaPuHuiTi_2_45_Light;
  font-weight: normal;
  text-align: left;
  line-height: max(8.76px, 0.73vw);
  margin: max(5.52px, 0.46vw) 0 0 max(6.24px, 0.52vw);
}

.search-input::placeholder {
  color: rgba(171, 171, 171, 1);
}

.search-icon-wrapper {
  border-radius: 50%;
  height: max(9.48px, 0.79vw);
  border: 1px solid rgba(91, 91, 91, 1);
  width: max(9.48px, 0.79vw);
  margin: max(3.72px, 0.31vw) max(8.04px, 0.67vw) 0 max(73.08px, 6.09vw);
}

.search-icon {
  width: max(3.84px, 0.32vw);
  height: max(3.84px, 0.32vw);
  margin: max(7.44px, 0.62vw) 0 0 max(7.44px, 0.62vw);
}

.search-btn {
  background-color: rgba(45, 80, 226, 1);
  border-radius: 3px;
  height: max(18.84px, 1.57vw);
  margin-left: max(7.56px, 0.63vw);
  width: max(53.76px, 4.48vw);
}

.btn-text {
  width: max(21.96px, 1.83vw);
  height: max(10.08px, 0.84vw);
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: max(10.56px, 0.88vw);
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: max(10.68px, 0.89vw);
  margin: max(4.32px, 0.36vw) 0 0 max(15px, 1.25vw);
}

.literature-cards-container {
  width: max(686.88px, 57.24vw);
  display: flex;
  flex-direction: column;
  gap: max(15px, 1.25vw);
  margin-top: max(15px, 1.25vw);
}

.literature-card {
  background-color: rgba(239, 239, 239, 1);
  border-radius: 6px;
  height: max(66.96px, 5.58vw);
  width: max(686.88px, 57.24vw);
  cursor: pointer;
}

.literature-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.card-content,
.card-content-row,
.card-title-row,
.card-meta-row {
  width: max(466.32px, 38.86vw);
  height: max(30px, 2.5vw);
  margin: max(12.48px, 1.04vw) 0 0 max(13.08px, 1.09vw);
}

.card-text {
  width: max(466.32px, 38.86vw);
  height: max(30px, 2.5vw);
}

.card-title {
  width: max(465.72px, 38.81vw);
  height: max(13.2px, 1.1vw);
  overflow-wrap: break-word;
  color: rgba(45, 80, 226, 1);
  font-size: max(14px, 1.14vw);
  font-family: AlibabaPuHuiTi_2_75_SemiBold;
  font-weight: normal;
  text-align: justifyLeft;
  white-space: nowrap;
  line-height: max(13.8px, 1.15vw);
  margin-left: max(0.72px, 0.06vw);
}

.card-meta {
  width: max(240px, 20vw);
  height: max(9.48px, 0.79vw);
  overflow-wrap: break-word;
  font-size: 0;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: max(10.08px, 0.84vw);
  margin-top: max(7.56px, 1.2vw);
}

.meta-label,
.meta-separator,
.meta-value {
  width: max(240px, 20vw);
  height: max(9.48px, 0.79vw);
  overflow-wrap: break-word;
  color: rgba(91, 91, 91, 1);
  font-size: max(9.96px, 0.83vw);
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: max(10.08px, 0.84vw);
}

.card-tags {
  /* width: max(70.68px, 5.89vw);
  height: max(9.48px, 0.79vw);
  margin: max(3.12px, 0.26vw) 0 max(11.76px, 0.98vw) max(593.04px, 49.42vw); */
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
  padding-right: 20px;
}

.tag {
  /* width: max(70.68px, 5.89vw); */
  height: max(9.48px, 0.79vw);
  overflow-wrap: break-word;
  color: rgba(91, 91, 91, 1);
  font-size: max(9.96px, 0.83vw);
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: max(10.08px, 0.84vw);
}



.prev,
.page-numbers {
  width: max(320.64px, 26.72vw);
  height: max(13.8px, 1.15vw);
  overflow-wrap: break-word;
  color: rgba(91, 91, 91, 1);
  font-size: max(15px, 1.25vw);
  font-family: ArialMT;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: max(22.56px, 1.88vw);
}

.current-page {
  width: max(320.64px, 26.72vw);
  height: max(13.8px, 1.15vw);
  overflow-wrap: break-word;
  color: rgba(45, 80, 226, 1);
  font-size: max(18.72px, 1.56vw);
  font-family: ArialMT;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: max(22.56px, 1.88vw);
}

.sidebar {
  box-shadow: 3px 4px 70px 0px rgba(0, 0, 0, 0.02);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  width: max(240px, 20vw);
  height: max(1116.36px, 93.03vw);
}

.sidebar-title {
  width: max(48.84px, 4.07vw);
  height: max(11.88px, 0.99vw);
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: max(12.48px, 1.04vw);
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: max(15px, 1.25vw);
  margin: max(28.08px, 2.34vw) 0 max(24px, 2vw) max(20.52px, 1.71vw);
}

.tag-grid {
  width: max(198.84px, 16.57vw);
  flex-wrap: wrap;
  margin: max(15px, 1.25vw) 0 0 max(19.92px, 1.66vw);
  gap: max(8.4px, 0.7vw);
}

.tag-item {
  box-shadow: 1px 1px 7px -1px rgba(0, 0, 0, 0.25);
  border-radius: 13px;
  height: max(16.92px, 1.41vw);
  width: max(51.96px, 4.33vw);
  color: #000;
  text-align: center;
  cursor: pointer;
}

.tag-item.active {
  background-color: rgba(45, 80, 226, 1);
  color: #fff;
}

.tag-text {
  width: 100%;
  overflow-wrap: break-word;
  font-size: max(8.76px, 0.73vw);
  font-family: AlibabaPuHuiTi_2_75_SemiBold;
  font-weight: normal;
  text-align: justifyLeft;
  white-space: nowrap;
  display: inline-block;
  margin: 0 auto;
  line-height: max(19.2px, 1.6vw);
}

.sidebar-divider {
  width: max(226.32px, 18.86vw);
  height: max(0.72px, 0.06vw);
  margin: max(32.4px, 2.7vw) 0 0 max(6.24px, 0.52vw);
}

.journals-container {
  width: max(240px, 20vw);
  display: flex;
  flex-direction: column;
  gap: max(29.28px, 2.44vw);
}

.journal-item {
  width: max(189.48px, 15.79vw);
  height: max(78.84px, 6.57vw);
  margin: 0 0 0 max(19.92px, 1.66vw);
}

.journal-cover {
  width: max(57.6px, 4.8vw);
  height: max(78.84px, 6.57vw);
  cursor: pointer;
}

.journal-cover:hover {
  transform: scale(1.05);
}

.journal-info {
  width: max(108.24px, 9.02vw);
  height: max(61.32px, 5.11vw);
  margin-top: max(0.72px, 0.06vw);
}

.journal-name {
  width: max(90px, 7.5vw);
  height: max(10.68px, 0.89vw);
  overflow-wrap: break-word;
  color: rgba(86, 88, 95, 1);
  font-size: max(11.16px, 0.93vw);
  font-family: AlibabaPuHuiTi_2_75_SemiBold;
  font-weight: normal;
  text-align: justifyLeft;
  white-space: nowrap;
  line-height: max(13.8px, 1.15vw);
  margin-left: max(0.72px, 0.06vw);
}

.journal-meta {
  width: max(98.76px, 8.23vw);
  height: max(9.48px, 0.79vw);
  overflow-wrap: break-word;
  color: rgba(86, 88, 95, 1);
  font-size: max(9.96px, 0.83vw);
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: max(10.08px, 0.84vw);
  margin-top: max(21.36px, 1.78vw);
}

.journal-publisher {
  width: max(108.24px, 9.02vw);
  height: max(10.08px, 1.84vw);
  overflow-wrap: break-word;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: max(10.08px, 0.84vw);
  margin-top: max(10.08px, 0.84vw);
  overflow: hidden;
  text-overflow: ellipsis;
}

.publisher-text,
.ellipsis {
  width: max(108.24px, 9.02vw);
  height: max(10.08px, 0.84vw);
  overflow-wrap: break-word;
  color: rgba(86, 88, 95, 1);
  font-size: max(9.96px, 0.83vw);
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: max(10.08px, 0.84vw);
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipsis {
  font-size: max(10.56px, 0.88vw);
  line-height: max(15.72px, 1.31vw);
}

.tag-grid :hover {
  background-color: rgba(45, 80, 226, 1);
  color: #fff;
  border-radius: 13px;
}

.pagination {
  width: 100%;
  max-width: 400px;
  margin: 50px auto 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 40px;
  padding-bottom: 40px;
}

.pagination-prev,
.pagination-next {
  color: rgba(91, 91, 91, 1);
  font-size: 14px;
  font-family: ArialMT;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 1.8;
  cursor: pointer;
  padding: 5px 10px;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.pagination-prev:hover,
.pagination-next:hover {
  color: rgba(45, 80, 226, 1);
  background-color: rgba(45, 80, 226, 0.1);
}

.pagination-number {
  color: rgba(91, 91, 91, 1);
  font-size: 14px;
  font-family: ArialMT;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 1.8;
  cursor: pointer;
  padding: 5px 12px;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.pagination-number:hover {
  color: rgba(45, 80, 226, 1);
  background-color: rgba(45, 80, 226, 0.1);
}

.pagination-number.active {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(45, 80, 226, 1);
  font-weight: bold;
}

.pagination-spacer {
  display: none;
}

.page-title {
  background-color: rgba(45, 80, 226, 1);
  height: 60px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 100px;
  display: flex;
  align-items: center;
}

.page-title-text {
  color: rgba(255, 255, 255, 1);
  font-size: 20px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 60px;
  margin-left: 200px;
}

.page-title-bg {
  position: absolute;
  left: 150px;
  top: 90px;
  width: 120px;
  height: 90px;
}