@charset "utf-8";
body, html {margin: 0;padding: 0;height: 100%;width: 100%;box-sizing: border-box;font-family: Arial, sans-serif;background-color: #333;}
ul, li{list-style-type:none;margin: 0;padding: 0;}
a:link, a:visited{text-decoration:none;color:#999;}
a:hover,a:focus{text-decoration:underline;color:#999;text-decoration:none;}
.clear{clear:both; height:44px; line-height:44px;}

.navbar {background-color: #333;color: white;padding-left: 2%;padding-right: 2%;padding-top: 12px;padding-bottom: 12px;width: 96%;position: relative;box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.6);}
.navbar-container {display: flex;justify-content: space-between;align-items: center;}
.navbar-container a{color:#ddd;}
.navbar-logo {font-size: 20px;font-weight: bold;}
.navbar-menu {list-style: none;display: flex;margin: 0;padding: 0;}
.navbar-menu li {margin-left: 20px;}
.navbar-menu a {text-decoration: none;color: #ddd;font-size: 16px; padding:0px 10px;}
.navbar-toggle {display: none;flex-direction: column;cursor: pointer;}
.navbar-toggle .bar {width: 24px;height: 3px;background-color: #ddd;margin: 3px 0;}

@media (max-width: 768px) {
    .navbar-menu {position: fixed;top: 0;right: -250px;width: 250px;height: 100vh;z-index:999;background-color: #333;flex-direction: column;align-items: center;
        justify-content: flex-start;
        padding-top: 60px;
        transition: right 0.3s ease-in-out;
    }
    .navbar-menu.active {right: 0;}
    .navbar-menu li {margin: 15px 0;}
	.navbar-menu a {padding:15px 40px;}
    .navbar-toggle {display: flex;}
}
.anavbg a{color:#777;}

.imbox, .history{list-style: none;margin-top: 10px;padding: 1%;width: 98%;}
.imbox ul {margin: 1%;width: 98%;display: flex; flex-wrap: wrap; justify-content: space-between;}
.imbox li {display: flex;flex-direction: column;width: 49%;box-sizing: border-box;margin-bottom:15px;}
.impic {position: relative;width: 100%;height: 0;padding-bottom: 140%;overflow: hidden;}
.impic img {position: absolute;width: 100%;height: 100%; border-radius: 5px; object-fit: cover;}
.imnum{position: absolute; border-top-left-radius: 5px; border-bottom-right-radius: 5px; bottom: 0;right: 0; z-index: 5; color:#eee; font-size:12px; padding:0px 10px; height:22px; line-height:22px; background-color: rgb(0 0 0 / 50%);}
.imtit{height:41px;}
.imtit a{display:block; height: 18px;line-height:18px;text-align: left;font-size: 14px;padding-top:5px;overflow:hidden; word-wrap:normal; white-space:nowrap; text-overflow:ellipsis;}
.imtit span{display:block; height: 18px;line-height:18px;font-size: 14px; color:#999; overflow:hidden; word-wrap:normal; white-space:nowrap; text-overflow:ellipsis;}
.imboxnav{font-size: 18px;margin-top: 1%;margin-left: 1%;margin-right: 1%;margin-bottom:2%;width: 98%;border-bottom:1px solid #777;}
.imboxcla{padding-left:10px;height: 40px;line-height:40px;border-left:2px solid #ff7777;color:#999;}
.imboxmo{height: 40px;line-height:40px;font-size: 18px;float:right;}

.navlist{padding-left: 2%; padding-top: 1%; font-size:12px; margin-top:10px; color: #777777; overflow:hidden; word-wrap:normal; white-space:nowrap; text-overflow:ellipsis;}
.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-title{margin-top: 20px; font-weight: normal; font-size: 18px; text-align: center;}
.comic-title h1{font-weight: normal;font-size: 18px;color: #999;}
.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: #333; color: #999; border:1px solid #999; border-radius: 5px; margin: 0 5px;}
.pagination a{padding: 5px 10px;background-color: #333; 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;}

.ifooter{height:40px; line-height:40px; margin:0px auto; padding-top:30px; font-size:12px; color:#999999; display:flex; justify-content: center;}

.history ul{padding-left:1%;padding-right:1%;}
.history li{width: 100%; border-bottom:1px dashed #e0e0e0;}
.history li a{width: 100%; display:block; padding:15px 0px; overflow:hidden; word-wrap:normal; white-space:nowrap; text-overflow:ellipsis;}
.history li a span{color:#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;
}