@charset "utf-8";
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft Yahei', sans-serif;
      background-color: #fff;
      color: #333;
    }
ul, li{list-style-type:none;margin: 0;padding: 0;}
a{list-style:none;text-decoration: none;}
a:link, a:visited{list-style:none;text-decoration:none;}
a:hover,a:focus{list-style:none;text-decoration:none;}

/* ¶¥²¿À¸ */
.header-bar {
  background-color: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  z-index: 50;
  color: #333;
}

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

.site-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}
.site-title a{
  color: #333;
}
.menu-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

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

/* ²à±ß²Ëµ¥ */
.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: 16px 20px;
  color: #333;
  text-decoration: none;
}

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

.main {
  margin-top: 10px;
  padding: 15px;
}

/* 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;
}

.navlist{font-size:12px; margin-bottom:16px; color: #777777;}
.navlist a{font-size:12px; color: #777777;}
.listpagebox{width:100%; height:40px; margin:30px auto; font-size:14px; color:#555555; display:flex; justify-content: center; overflow:hidden;}
.listpagebox a{display:block; float:left; height:30px; line-height:30px; color:#555555; margin:6px; padding:0px 6px; border:1px solid #e0e0e0; border-radius: 5px; font-size:14px;}
.nextpage{border-right:1px solid #e9e9e9;}
.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 4px; 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: 0px auto 10px; font-weight: normal; font-size: 18px; text-align: center;}
.comic-tit h1{font-weight: normal;font-size: 18px;color: #333; font-weight: bold;}
.navbox{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;width: 100%;}
.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;}

.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;
}


    .list-title {
      font-size: 16px;
      margin: 30px 0 10px;
      color: #555;
    }

    .list-title h2{
	  padding-left:8px;
      font-size: 16px;
      font-weight: bold;
      color: #555;
    }
    .list-title h2 a{
      color: #555;
    }
    .manga-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .manga-item {
      background-color: #fff;
      overflow: hidden;
      border-radius: 8px;
	  box-sizing: border-box;
    }

    .manga-item img {
      width: 100%;
	  height: auto;
	  display: block;
      border-radius: 6px;
    }

    .manga-item span {
      display: block;
      margin: 3px;
      font-size: 13px;
      color: #555;overflow:hidden; word-wrap:normal; white-space:nowrap; text-overflow:ellipsis;

    }
    .manga-item span a{
      color: #555;
    }

@media (min-width: 746px) {
  .main 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;
}