/* 页面背景 */
body{margin:0;padding:0;font-family:inherit;line-height:1.5;}
ul, li{list-style-type:none;margin: 0;padding: 0;}
a{list-style:none;text-decoration: none;color: #333;transition: color 0.2s;}
a:link, a:visited{text-decoration:none;color:#333;}
a:hover,a:focus{text-decoration:underline;text-decoration:none;color:#333;}

.page-bg {
  background-color: #f9fafb;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: #333;
}

/* 顶部栏 */
.header-bar {
  background-color: #333333;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}

.site-title {
  font-size: 20px;
  font-weight: bold;
}
.site-title a{
  color: #FFFFFF;
}

.menu-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.icon {
  width: 24px;
  height: 24px;
  color: #FFFFFF;
}

/* 侧边菜单 */
.mobile-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 260px;
  height: 100%;
  background-color: #fff;
  box-shadow: 2px 0 5px rgba(0,0,0,0.2);
  z-index: 1000;
  transition: left 0.3s ease-in-out;
}

.mobile-menu.menu-open {
  left: 0;
}

.menu-header {
  font-size: 18px;
  font-weight: bold;
  padding: 16px;
  background-color: #fff;
  border-bottom: 1px solid #e5e7eb;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  display: block;
  padding: 12px 16px;
  color: #333;
  text-decoration: none;
}

.menu-item:hover {
  background-color: #f9fafb;
}

.anavbg{background-color: #eee;}

/* 主要内容区 */
.main-content {
  padding: 16px;
}

/* banner区域 */
.banner-section {
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 24px;
}

.banner-wrapper {
  width: 100%;
  overflow: hidden;
}

.banner-slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}
.banner-slider a {
  display: block;
  flex-shrink: 0;
  width: 100%;
}
.banner-img {
  width: 100%;
  flex-shrink: 0;
  border-radius: 8px;
}

/* 最新更新区域 */
.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
}

.comic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.comic-card {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.comic-img {
  width: 100%;
  display: block;
}

.comic-info {
  padding: 8px;
  text-align: left;
}

.comic-title {
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  overflow:hidden; word-wrap:normal; white-space:nowrap; text-overflow:ellipsis;
}

.comic-sub {
  font-size: 12px;
  color: #666;
  margin: 4px 0 0;
  overflow:hidden; word-wrap:normal; white-space:nowrap; text-overflow:ellipsis;
}

/* 列表页 */
.navlist{font-size:12px; margin-bottom:12px; color: #777777;}
.navlist a{font-size:12px; color: #777777;}
.listpagebox{width:100%; height:36px; margin:0px auto; padding:30px 0px; font-size:14px; color:#555555; display:flex; justify-content: center; overflow:hidden;}
.listpagebox a{display:block; float:left; height:30px; line-height:30px; margin:6px; padding:0px 6px; border:1px solid #e0e0e0; border-radius: 5px; font-size:14px;}
.nextpage{border-right:1px solid #e9e9e9;}
.listpagebox a:hover{color:#555555; background-color:#cccccc;}
.nowpage{display:block; float:left; height:30px; line-height:30px; margin:6px; padding:0px 4px; border:1px solid #e0e0e0; border-radius: 5px; font-size:14px; color:#555555; background-color:#cccccc;}
.nowpage b{font-weight: normal;}
.pageput{color:#555555; float:left; padding:0px; outline: none; border:1px solid #e0e0e0; margin:6px; text-align: center; width: 38px; font-size: 14px; height: 30px; line-height: 30px; border-radius: 5px;}
.taozhu{display:block; float:left; color:#999999; border:1px solid #e0e0e0; height:34px; line-height:34px; margin:0px; padding:0px 18px; font-size:14px; cursor: pointer; }

/* 内页 */
.comic-tit{margin-top: 20px; font-weight: normal; font-size: 18px; text-align: center;}
.comic-tit h1{font-weight: normal;font-size: 18px;color: #333; font-weight: bold;}
.navbox{padding-left: 2%; font-size:12px; padding-bottom:10px; color: #777777; overflow:hidden; word-wrap:normal; white-space:nowrap; text-overflow:ellipsis;}
.navbox a{font-size:12px; color: #777777;}
.comic-container {display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 1%;width: 98%;}
.comic-image-container {position: relative;width: 100%;overflow: hidden;display: flex;align-items: center;justify-content: center;}
.comic-image {width: 100%;height: auto;transition: transform 0.3s ease;}
.comic-image-container {min-height: 400px;background-color: #e0e0e0;background-position: center;background-repeat: no-repeat;}
.loading-indicator {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 40px;height: 40px;border: 4px solid #ccc;border-top: 4px solid #333;border-radius: 50%;animation: spin 1s linear infinite;display: none;}
@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.pagination {margin: 24px 0px;text-align: center; color: #999;}
.pagination button{padding: 5px 10px;background-color: #fff; color: #999; border:1px solid #999; border-radius: 5px; margin: 0 5px;}
.pagination a{padding: 5px 10px;background-color: #fff; color: #999; border:1px solid #999; border-radius: 5px; cursor: pointer;margin: 0 5px;}
.page-input {width: 30px;margin: 0 10px;padding:6px;border-radius: 5px;border:1px solid #999;}

/* 搜索 */
.sodiv {margin-top: 44px; padding: 2%; width: 96%;}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.search-box input.schinput {
  width: 100%;
  padding: 10px 40px 10px 15px;
  border-radius: 25px;
  border: 1px solid #ddd;
  font-size: 14px;
  outline: none;
}

.search-box .search-button {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-box .search-button svg {
  width: 26px;
  height: 26px;
  fill: #999;
  transition: fill 0.2s ease;
}

.search-box .search-button:hover svg {
  fill: #333;
}

.barn {width: 100%; padding:1% 0;}
.barn img{width: 100%;height: auto;transition: transform 0.3s ease;}

@media (min-width: 746px) {
  .main-content img {
    display: none;
    pointer-events: none;
  }
  .comic-container img {
    display: none;
    pointer-events: none;
  }
}

.site-footer {
  background-color: #fff;
  color: #555;
  text-align: center;
  padding: 30px 20px;
  margin-top:30px;
  font-size: 0.9rem;
}