/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Microsoft YaHei", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
}

a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s ease;
}

a:hover {
    color: #ff6b6b;
}

ul, li {
    list-style: none;
}

.btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    background-color: #f0f0f0;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: #e0e0e0;
}

.btn-primary {
    background-color: #ff6b6b;
    color: white;
}

.btn-primary:hover {
    background-color: #ff5252;
    color: white;
}

.more {
    font-size: 14px;
    color: #888;
}

.more:hover {
    color: #ff6b6b;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #ff6b6b;
}

.section-header h2 {
    font-size: 22px;
    color: #333;
    position: relative;
    padding-left: 15px;
}

.section-header h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 20px;
    background-color: #ff6b6b;
    border-radius: 2px;
}

/* 头部样式 */
header {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
}

.logo a {
    display: flex;
    align-items: center;
}

.logo h1 {
    font-size: 24px;
    margin-left: 10px;
    color: #ff6b6b;
}

.search-box {
    flex: 1;
    max-width: 500px;
    margin: 0 20px;
}

.search-box form {
    display: flex;
}

.search-box input {
    flex: 1;
    padding: 10px;
    border: 2px solid #ff6b6b;
    border-radius: 4px 0 0 4px;
    outline: none;
}

.search-box button {
    padding: 10px 15px;
    background-color: #ff6b6b;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}

.user-actions {
    display: flex;
    gap: 10px;
}

/* 导航栏样式 */
nav {
    background-color: #ff6b6b;
}

.main-nav {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

.main-nav li {
    position: relative;
}

.main-nav li a {
    display: block;
    padding: 15px 20px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.main-nav li a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* 轮播图样式 */
.banner {
    margin: 20px auto;
    max-width: 1200px;
    padding: 0 20px;
}

.banner-container {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    height: 400px;
}

.banner-item {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.banner-item.active {
    opacity: 1;
}

.banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: white;
}

.banner-caption h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.banner-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
}

.banner-control {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.banner-control.active {
    background-color: white;
}

/* 热门推荐样式 */
.hot-recommend {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
}

.comic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

.comic-card {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.comic-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.comic-cover {
    position: relative;
    height: 240px;
}

.comic-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comic-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    background-color: #ff6b6b;
    color: white;
    border-radius: 4px;
    font-size: 12px;
}

.comic-info {
    padding: 15px;
}

.comic-info h3 {
    font-size: 16px;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comic-author, .comic-desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.comic-desc {
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.comic-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #888;
}

.comic-score {
    color: #ff6b6b;
    font-weight: bold;
}

/* 排行榜样式 */
.ranking {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
}

.ranking-container {
    display: flex;
    gap: 20px;
}

.ranking-list {
    flex: 1;
    background-color: white;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.ranking-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.ranking-item:last-child {
    border-bottom: none;
}

.ranking-number {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
    color: #666;
    border-radius: 50%;
    font-weight: bold;
    margin-right: 10px;
}

.ranking-item:nth-child(1) .ranking-number {
    background-color: #ff6b6b;
    color: white;
}

.ranking-item:nth-child(2) .ranking-number {
    background-color: #ff9e81;
    color: white;
}

.ranking-item:nth-child(3) .ranking-number {
    background-color: #ffbb94;
    color: white;
}

.ranking-cover {
    width: 60px;
    height: 80px;
    margin-right: 10px;
}

.ranking-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.ranking-info {
    flex: 1;
}

.ranking-info h3 {
    font-size: 16px;
    margin-bottom: 5px;
}

.ranking-desc {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-date {
    font-size: 12px;
    color: #888;
}

/* 最新更新样式 */
.latest-update {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
}

.comic-list {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 15px;
}

.comic-item {
    flex: 0 0 200px;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.comic-item .comic-cover {
    height: 280px;
}

.comic-item .comic-info {
    padding: 15px;
}

.comic-item .comic-info h3 {
    font-size: 16px;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comic-item .comic-author, 
.comic-item .comic-update, 
.comic-item .comic-score {
    font-size: 14px;
    margin-bottom: 5px;
}

.comic-item .comic-score {
    color: #ff6b6b;
    font-weight: bold;
}

/* 完结作品样式 */
.finished-works {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
}

/* APP下载区域样式 */
.app-download {
    max-width: 1200px;
    margin: 30px auto;
    padding: 20px;
    background-color: #ff6b6b;
    border-radius: 8px;
    color: white;
}

.app-container {
    display: flex;
    align-items: center;
}

.app-info {
    flex: 1;
}

.app-info h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.app-info p {
    margin-bottom: 20px;
    font-size: 16px;
}

.app-features {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.feature {
    display: flex;
    align-items: center;
}

.feature i {
    margin-right: 5px;
    font-size: 20px;
}

.app-buttons {
    display: flex;
    gap: 15px;
}

.btn-download {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background-color: white;
    color: #ff6b6b;
    border-radius: 4px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-download:hover {
    background-color: rgba(255, 255, 255, 0.9);
    color: #ff6b6b;
}

.btn-download i {
    margin-right: 10px;
    font-size: 20px;
}

.app-qrcode {
    width: 150px;
    text-align: center;
}

.app-qrcode img {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    margin-bottom: 10px;
    background-color: white;
    padding: 5px;
}

.app-qrcode p {
    font-size: 14px;
}

/* 图标样式 */
.icon-download, .icon-book, .icon-update, .icon-offline, .icon-android, .icon-apple, .icon-weixin, .icon-weibo, .icon-qq, .icon-douyin {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-download {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E");
}

.icon-book {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z'/%3E%3C/svg%3E");
}

.icon-update {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z'/%3E%3C/svg%3E");
}

.icon-offline {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm5 16H7v-2h10v2zm-4-4h-2v-6h2v6z'/%3E%3C/svg%3E");
}

.icon-android {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6b6b'%3E%3Cpath d='M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z'/%3E%3C/svg%3E");
}

.icon-apple {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6b6b'%3E%3Cpath d='M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.68 1.32-1.53 2.6-2.53 4.08zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.32 2.32-1.66 4.22-3.74 4.25z'/%3E%3C/svg%3E");
}

.icon-weixin {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M8.75 13.875c-0.68 0-1.25-0.57-1.25-1.25s0.57-1.25 1.25-1.25 1.25 0.57 1.25 1.25-0.57 1.25-1.25 1.25zM15.25 13.875c-0.68 0-1.25-0.57-1.25-1.25s0.57-1.25 1.25-1.25 1.25 0.57 1.25 1.25-0.57 1.25-1.25 1.25zM20.5 16.875c0 0.966-0.784 1.75-1.75 1.75h-13.5c-0.966 0-1.75-0.784-1.75-1.75v-9.75c0-0.966 0.784-1.75 1.75-1.75h13.5c0.966 0 1.75 0.784 1.75 1.75v9.75zM12 2c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10-4.477-10-10-10z'/%3E%3C/svg%3E");
}

.icon-weibo {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M10.098 20c-3.631 0-6.598-2.091-6.598-4.622 0-2.531 2.967-4.622 6.598-4.622 3.631 0 6.598 2.091 6.598 4.622 0 2.531-2.967 4.622-6.598 4.622zM9.05 17.227c-0.353 0.682-1.209 1.105-2.01 0.945-0.784-0.16-1.136-0.836-0.783-1.517 0.353-0.682 1.174-1.105 1.958-0.945 0.801 0.142 1.174 0.836 0.836 1.517zM11.179 15.108c-0.125 0.214-0.409 0.321-0.641 0.214-0.214-0.107-0.285-0.339-0.16-0.552 0.125-0.214 0.392-0.321 0.606-0.214 0.232 0.089 0.303 0.339 0.196 0.552zM12 12c-0.339-0.071-0.712-0.125-1.105-0.125-2.296 0-4.09 1.517-4.09 3.409s1.794 3.409 4.09 3.409c2.296 0 4.09-1.517 4.09-3.409 0-0.945-0.445-1.794-1.174-2.438 0.089-0.196 0.196-0.409 0.196-0.623 0-0.819-0.677-1.496-1.496-1.496-0.196 0-0.374 0.036-0.534 0.107-0.018-0.196-0.036-0.374-0.036-0.57 0-2.225 1.832-4.037 4.057-4.037s4.057 1.812 4.057 4.037c0 2.225-1.832 4.057-4.057 4.057-0.125 0-0.232-0.018-0.339-0.018 0.339 0.57 0.534 1.209 0.534 1.9 0 2.01-1.636 3.645-3.645 3.645s-3.645-1.636-3.645-3.645c0-2.01 1.636-3.645 3.645-3.645 0.374 0 0.73 0.054 1.069 0.16-0.018-0.214-0.018-0.445-0.018-0.659 0-0.018 0-0.018 0-0.018zM18.963 9.802c0.125 0.409 0.125 0.836 0.125 1.263 0 3.712-3.018 6.73-6.73 6.73-0.409 0-0.801-0.036-1.192-0.107 0.089 0.018 0.196 0.018 0.285 0.018 2.225 0 4.057-1.832 4.057-4.057s-1.832-4.057-4.057-4.057c-0.089 0-0.196 0-0.285 0.018 0.392-0.071 0.784-0.107 1.192-0.107 2.225 0 4.2 1.14 5.358 2.869 0.374-0.196 0.784-0.303 1.209-0.303 1.425 0 2.581 1.156 2.581 2.581 0 1.425-1.156 2.581-2.581 2.581-0.427 0-0.836-0.107-1.209-0.303-0.748 1.121-1.865 1.971-3.178 2.403 1.69-0.57 3.071-1.794 3.801-3.338 0.196 0.036 0.374 0.071 0.57 0.071 1.745 0 3.178-1.425 3.178-3.178s-1.425-3.178-3.178-3.178c-0.196 0-0.374 0.018-0.57 0.071-0.018 0-0.018 0-0.036 0-0.125-0.285-0.267-0.552-0.427-0.819 0.196 0.018 0.374 0.036 0.57 0.036 2.867 0 5.2 2.333 5.2 5.2s-2.333 5.2-5.2 5.2c-0.196 0-0.374-0.018-0.57-0.036 1.14-1.887 1.14-4.235 0-6.122 0.196 0.018 0.374 0.036 0.57 0.036 1.14 0 2.189-0.374 3.053-1.014-0.089-0.089-0.196-0.178-0.303-0.267-0.836 0.57-1.832 0.908-2.903 0.908-0.196 0-0.374-0.018-0.57-0.036 0.018 0.018 0.018 0.018 0.036 0.036z'/%3E%3C/svg%3E");
}

.icon-qq {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M18.371 18.457c-0.089-0.303-0.249-0.552-0.428-0.784 0.16-0.16 0.303-0.339 0.428-0.517 0.125-0.16 0.232-0.339 0.321-0.517 0.196-0.339 0.339-0.712 0.428-1.087 0.089-0.374 0.143-0.748 0.143-1.122 0-0.374-0.054-0.748-0.143-1.122-0.089-0.374-0.232-0.748-0.428-1.087-0.089-0.178-0.196-0.339-0.321-0.517-0.125-0.16-0.267-0.339-0.428-0.499 0.178-0.232 0.339-0.481 0.428-0.784 0.089-0.303 0.143-0.606 0.143-0.927 0-0.303-0.054-0.606-0.143-0.908-0.089-0.303-0.249-0.588-0.428-0.836-0.178-0.249-0.392-0.463-0.641-0.641-0.249-0.178-0.534-0.339-0.836-0.428-0.303-0.089-0.606-0.143-0.908-0.143-0.321 0-0.623 0.054-0.927 0.143-0.303 0.089-0.588 0.249-0.836 0.428-0.249 0.178-0.463 0.392-0.641 0.641-0.178 0.249-0.339 0.534-0.428 0.836-0.089 0.303-0.143 0.606-0.143 0.908 0 0.321 0.054 0.623 0.143 0.927 0.089 0.303 0.249 0.552 0.428 0.784-0.16 0.16-0.303 0.339-0.428 0.499-0.125 0.178-0.232 0.339-0.321 0.517-0.196 0.339-0.339 0.712-0.428 1.087-0.089 0.374-0.143 0.748-0.143 1.122 0 0.374 0.054 0.748 0.143 1.122 0.089 0.374 0.232 0.748 0.428 1.087 0.089 0.178 0.196 0.357 0.321 0.517 0.125 0.178 0.267 0.357 0.428 0.517-0.178 0.232-0.339 0.481-0.428 0.784-0.089 0.303-0.143 0.606-0.143 0.927 0 0.303 0.054 0.606 0.143 0.908 0.089 0.303 0.249 0.588 0.428 0.836 0.178 0.249 0.392 0.463 0.641 0.641 0.249 0.178 0.534 0.339 0.836 0.428 0.303 0.089 0.606 0.143 0.927 0.143 0.303 0 0.606-0.054 0.908-0.143 0.303-0.089 0.588-0.249 0.836-0.428 0.249-0.178 0.463-0.392 0.641-0.641 0.178-0.249 0.339-0.534 0.428-0.836 0.089-0.303 0.143-0.606 0.143-0.908 0-0.321-0.054-0.623-0.143-0.927zM12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10-10-4.477-10-10 4.477-10 10-10zM16.964 14.768c0.018 0.089 0.018 0.178 0.018 0.267 0 0.089 0 0.178-0.018 0.267-0.018 0.089-0.036 0.178-0.071 0.267-0.036 0.089-0.071 0.16-0.125 0.232-0.054 0.071-0.107 0.143-0.178 0.196-0.071 0.054-0.143 0.107-0.214 0.143-0.071 0.036-0.16 0.071-0.249 0.089-0.089 0.018-0.178 0.036-0.267 0.036-0.089 0-0.178 0-0.267-0.018-0.089-0.018-0.178-0.036-0.267-0.071-0.089-0.036-0.16-0.071-0.232-0.125-0.071-0.054-0.143-0.107-0.196-0.178-0.054-0.071-0.107-0.143-0.143-0.214-0.036-0.071-0.071-0.16-0.089-0.249-0.018-0.089-0.036-0.178-0.036-0.267 0-0.089 0-0.178 0.018-0.267 0.018-0.089 0.036-0.178 0.071-0.267 0.036-0.089 0.071-0.16 0.125-0.232 0.054-0.071 0.107-0.143 0.178-0.196 0.071-0.054 0.143-0.107 0.214-0.143 0.071-0.036 0.16-0.071 0.249-0.089 0.089-0.018 0.178-0.036 0.267-0.036 0.089 0 0.178 0 0.267 0.018 0.089 0.018 0.178 0.036 0.267 0.071 0.089 0.036 0.16 0.071 0.232 0.125 0.071 0.054 0.143 0.107 0.196 0.178 0.054 0.071 0.107 0.143 0.143 0.214 0.036 0.071 0.071 0.16 0.089 0.249zM9.536 14.768c0.018 0.089 0.018 0.178 0.018 0.267 0 0.089 0 0.178-0.018 0.267-0.018 0.089-0.036 0.178-0.071 0.267-0.036 0.089-0.071 0.16-0.125 0.232-0.054 0.071-0.107 0.143-0.178 0.196-0.071 0.054-0.143 0.107-0.214 0.143-0.071 0.036-0.16 0.071-0.249 0.089-0.089 0.018-0.178 0.036-0.267 0.036-0.089 0-0.178 0-0.267-0.018-0.089-0.018-0.178-0.036-0.267-0.071-0.089-0.036-0.16-0.071-0.232-0.125-0.071-0.054-0.143-0.107-0.196-0.178-0.054-0.071-0.107-0.143-0.143-0.214-0.036-0.071-0.071-0.16-0.089-0.249-0.018-0.089-0.036-0.178-0.036-0.267 0-0.089 0-0.178 0.018-0.267 0.018-0.089 0.036-0.178 0.071-0.267 0.036-0.089 0.071-0.16 0.125-0.232 0.054-0.071 0.107-0.143 0.178-0.196 0.071-0.054 0.143-0.107 0.214-0.143 0.071-0.036 0.16-0.071 0.249-0.089 0.089-0.018 0.178-0.036 0.267-0.036 0.089 0 0.178 0 0.267 0.018 0.089 0.018 0.178 0.036 0.267 0.071 0.089 0.036 0.16 0.071 0.232 0.125 0.071 0.054 0.143 0.107 0.196 0.178 0.054 0.071 0.107 0.143 0.143 0.214 0.036 0.071 0.071 0.16 0.089 0.249z'/%3E%3C/svg%3E");
}

.icon-douyin {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M16.6 5.82s.51.5 0 0A4.278 4.278 0 015.9 5.38c-.2.1-.36.27-.39.45s.05.47.29.58a6.046 6.046 0 002.96.81 6.301 6.301 0 006.08-4.19 6.278 6.278 0 001.22-2.93 11.036 11.036 0 01-2.32 1.06 5.78 5.78 0 01-1.75.33 4.505 4.505 0 01-3.26-1.4 4.758 4.758 0 01-1.44-3.36A4.505 4.505 0 019.71.28a4.758 4.758 0 013.36-1.44A4.505 4.505 0 0116.33.28a4.758 4.758 0 011.44 3.36v9.84a9.897 9.897 0 01-.22 2.03 9.365 9.365 0 01-1.28 3.09 9.33 9.33 0 01-2.13 2.36 9.046 9.046 0 01-2.82 1.52 9.248 9.248 0 01-6.75-.07 9.038 9.038 0 01-2.78-1.6 9.312 9.312 0 01-2.08-2.42 9.323 9.323 0 01-1.21-3.13 9.897 9.897 0 01-.22-2.03 9.252 9.252 0 011.69-5.34 8.986 8.986 0 014.47-3.4c.35-.12.71-.22 1.08-.29a9.55 9.55 0 011.16-.13c.39-.02.77-.02 1.16 0 .39.01.77.06 1.15.13.37.07.73.17 1.08.29a8.995 8.995 0 014.47 3.4 9.252 9.252 0 011.69 5.34v1.68z'/%3E%3C/svg%3E");
}

/* 文章区域样式 */
.articles {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
}

.article-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.article-item {
    display: flex;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.article-image {
    flex: 0 0 300px;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-content {
    flex: 1;
    padding: 20px;
}

.article-content h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.article-content p {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.6;
    max-height: 135px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
}

.read-more {
    display: inline-block;
    color: #ff6b6b;
    font-weight: bold;
    font-size: 14px;
}

.read-more:hover {
    text-decoration: underline;
}

/* 页脚样式 */
footer {
    background-color: #333;
    color: #ccc;
    padding: 40px 0 20px;
    margin-top: 40px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.footer-logo {
    display: flex;
    align-items: center;
}

.footer-logo h3 {
    margin-left: 10px;
    color: white;
    font-size: 20px;
}

.footer-nav {
    display: flex;
    gap: 40px;
}

.footer-nav-column h4 {
    color: white;
    margin-bottom: 15px;
    font-size: 16px;
}

.footer-nav-column ul li {
    margin-bottom: 8px;
}

.footer-nav-column ul li a {
    color: #ccc;
    font-size: 14px;
}

.footer-nav-column ul li a:hover {
    color: #ff6b6b;
}

.footer-middle {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.app-download-footer h4, .social-media h4 {
    color: white;
    margin-bottom: 15px;
    font-size: 16px;
}

.qrcode-container {
    display: flex;
    gap: 20px;
}

.qrcode {
    text-align: center;
}

.qrcode img {
    width: 100px;
    height: 100px;
    background-color: white;
    padding: 5px;
    border-radius: 4px;
    margin-bottom: 5px;
}

.qrcode p {
    font-size: 14px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #444;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background-color: #ff6b6b;
}

.social-icon i {
    width: 24px;
    height: 24px;
}

.footer-links {
    margin-bottom: 30px;
}

.footer-links h4 {
    color: white;
    margin-bottom: 15px;
    font-size: 16px;
}

.footer-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-links ul li a, .footer-links ul a {
    color: #ccc;
    font-size: 14px;
}

.footer-links ul li a:hover, .footer-links ul a:hover {
    color: #ff6b6b;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #444;
}

.footer-bottom p {
    margin-bottom: 10px;
    font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .header-container {
        flex-wrap: wrap;
    }
    
    .logo {
        margin-bottom: 15px;
    }
    
    .search-box {
        order: 3;
        margin: 15px 0;
        max-width: 100%;
    }
    
    .user-actions {
        order: 2;
    }
    
    .main-nav {
        flex-wrap: wrap;
    }
    
    .banner-container {
        height: 300px;
    }
    
    .comic-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    
    .ranking-container {
        flex-direction: column;
    }
    
    .article-item {
        flex-direction: column;
    }
    
    .article-image {
        flex: 0 0 200px;
    }
    
    .footer-top {
        flex-direction: column;
    }
    
    .footer-logo {
        margin-bottom: 20px;
    }
    
    .footer-nav {
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .footer-middle {
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .main-nav li a {
        padding: 10px;
        font-size: 14px;
    }
    
    .banner-container {
        height: 200px;
    }
    
    .banner-caption h3 {
        font-size: 18px;
    }
    
    .comic-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
    
    .comic-cover {
        height: 180px;
    }
    
    .app-container {
        flex-direction: column;
    }
    
    .app-qrcode {
        margin-top: 20px;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .logo h1 {
        font-size: 18px;
    }
    
    .user-actions .btn {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .main-nav {
        overflow-x: auto;
        justify-content: flex-start;
    }
    
    .main-nav li a {
        padding: 8px;
        font-size: 12px;
        white-space: nowrap;
    }
    
    .banner-container {
        height: 150px;
    }
    
    .banner-caption h3 {
        font-size: 16px;
    }
    
    .banner-caption p {
        font-size: 12px;
    }
    
    .section-header h2 {
        font-size: 18px;
    }
    
    .comic-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 10px;
    }
    
    .comic-cover {
        height: 150px;
    }
    
    .comic-info h3 {
        font-size: 14px;
    }
    
    .comic-author, .comic-desc {
        font-size: 12px;
    }
    
    .app-features {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .app-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .qrcode-container {
        justify-content: center;
    }
}