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

body {
    font-family: 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: #f8f9fa;
}

img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

a {
    text-decoration: none;
    color: #3a6df0;
    transition: all 0.3s ease;
}

a:hover {
    color: #2a4db7;
}

ul, ol {
    list-style: none;
}

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

.section {
    padding: 60px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-header h2 {
    font-size: 32px;
    color: #2a3f65;
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
}

.section-header h2:after {
    content: '';
    position: absolute;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #3a6df0, #8a3df0);
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.section-header p {
    color: #6c757d;
    font-size: 16px;
}

.bg-light {
    background-color: #f0f4f9;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3a6df0;
    color: #fff;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: #2a4db7;
    color: #fff;
}

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

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

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

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

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

.logo img {
    height: 40px;
    width: auto;
}

.main-nav ul {
    display: flex;
}

.main-nav li {
    margin-left: 20px;
}

.main-nav a {
    color: #333;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 4px;
}

.main-nav a:hover {
    color: #3a6df0;
    background-color: #f0f4f9;
}

/* Banner样式 */
.banner {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    padding: 80px 0;
    text-align: center;
}

.banner-content {
    max-width: 800px;
    margin: 0 auto;
}

.banner h1 {
    font-size: 42px;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.banner p {
    font-size: 18px;
    margin-bottom: 30px;
}

.search-box {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
}

.search-box input {
    flex: 1;
    padding: 12px 15px;
    border: none;
    border-radius: 4px 0 0 4px;
    font-size: 16px;
}

.search-box button {
    padding: 12px 25px;
    background-color: #ff6b6b;
    color: #fff;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
}

.search-box button:hover {
    background-color: #ff5252;
}

/* 最新更新动漫样式 */
.anime-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
}

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

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

.anime-thumb {
    position: relative;
    height: 320px;
}

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

.episode {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(255, 107, 107, 0.9);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
}

.anime-info {
    padding: 15px;
}

.anime-info h3 {
    font-size: 18px;
    margin-bottom: 5px;
    color: #2a3f65;
}

.anime-info p {
    color: #6c757d;
    font-size: 14px;
    margin-bottom: 10px;
}

.rating {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rating span:first-child {
    color: #ffc107;
}

.rating span:last-child {
    color: #3a6df0;
    font-weight: 500;
}

.more-btn {
    text-align: center;
    margin-top: 40px;
}

/* 热门推荐样式 */
.anime-slider {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 10px 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.anime-slider::-webkit-scrollbar {
    height: 8px;
}

.anime-slider::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.anime-slider::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.anime-slider::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.anime-slide {
    flex: 0 0 300px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    scroll-snap-align: start;
}

.anime-slide img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.slide-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: #fff;
    padding: 15px;
}

.slide-info h3 {
    font-size: 18px;
    margin-bottom: 5px;
}

.slide-info p {
    font-size: 14px;
}

/* 完美世界专区样式 */
.perfect-world-content {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.pw-info {
    display: flex;
    padding: 30px;
}

.pw-cover {
    flex: 0 0 300px;
    margin-right: 30px;
}

.pw-cover img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.pw-details {
    flex: 1;
}

.pw-details h3 {
    font-size: 28px;
    color: #2a3f65;
    margin-bottom: 20px;
}

.info-item {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
}

.info-item span:first-child {
    font-weight: 600;
    width: 60px;
    color: #6c757d;
}

.info-item p {
    margin-top: 0;
    line-height: 1.8;
}

.action-btns {
    margin-top: 30px;
    display: flex;
    gap: 15px;
}

.episode-list {
    padding: 30px;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

.episode-list h3 {
    font-size: 20px;
    color: #2a3f65;
    margin-bottom: 20px;
}

.episode-list ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.episode-list li a {
    display: block;
    padding: 8px 15px;
    background-color: #fff;
    border-radius: 4px;
    text-align: center;
    color: #3a6df0;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.episode-list li a:hover {
    background-color: #3a6df0;
    color: #fff;
    border-color: #3a6df0;
}

/* 经典动漫样式 */
.classic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

.classic-card {
    text-align: center;
    transition: transform 0.3s ease;
}

.classic-card:hover {
    transform: translateY(-5px);
}

.classic-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
}

.classic-card h3 {
    font-size: 16px;
    color: #2a3f65;
}

/* 更新时间表样式 */
.schedule-table {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
}

.schedule-day {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.schedule-day h3 {
    font-size: 18px;
    color: #2a3f65;
    margin-bottom: 15px;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 2px solid #e9ecef;
}

.schedule-day ul li {
    padding: 8px 0;
    border-bottom: 1px dashed #e9ecef;
    color: #6c757d;
}

.schedule-day ul li:last-child {
    border-bottom: none;
}

/* 动漫分类索引样式 */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
}

.category-item {
    text-align: center;
    transition: transform 0.3s ease;
}

.category-item:hover {
    transform: translateY(-5px);
}

.category-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    border: 3px solid #fff;
}

.category-item h3 {
    font-size: 16px;
    color: #2a3f65;
}

/* 文章样式 */
.articles-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.article-item {
    background-color: #fff;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.article-item h3 {
    font-size: 22px;
    color: #2a3f65;
    margin-bottom: 10px;
}

.article-meta {
    color: #6c757d;
    font-size: 14px;
    margin-bottom: 15px;
}

.article-item p {
    line-height: 1.8;
    color: #4a5568;
}

/* 关于我们样式 */
.about-content {
    display: flex;
    align-items: center;
    gap: 40px;
}

.about-text {
    flex: 1;
}

.about-text p {
    margin-bottom: 20px;
    line-height: 1.8;
}

.about-text ul {
    margin-bottom: 20px;
    padding-left: 20px;
}

.about-text ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px;
}

.about-text ul li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #3a6df0;
}

.about-image {
    flex: 0 0 400px;
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* 页脚样式 */
.footer {
    background-color: #2a3f65;
    color: #fff;
    padding: 60px 0 30px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-logo p {
    margin-top: 15px;
    color: rgba(255, 255, 255, 0.7);
}

.footer-links h3, .footer-contact h3 {
    font-size: 18px;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer-links h3:after, .footer-contact h3:after {
    content: '';
    position: absolute;
    width: 40px;
    height: 2px;
    background-color: #ff6b6b;
    bottom: 0;
    left: 0;
}

.footer-links ul li {
    margin-bottom: 10px;
}

.footer-links ul li a {
    color: rgba(255, 255, 255, 0.7);
}

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

.footer-contact p {
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.7);
}

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

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #fff;
    transition: all 0.3s ease;
}

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

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 992px) {
    .pw-info {
        flex-direction: column;
    }
    
    .pw-cover {
        margin-right: 0;
        margin-bottom: 30px;
        max-width: 300px;
    }
    
    .about-content {
        flex-direction: column;
    }
    
    .about-image {
        order: -1;
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .header .container {
        flex-direction: column;
    }
    
    .logo {
        margin-bottom: 15px;
    }
    
    .main-nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .main-nav li {
        margin: 5px;
    }
    
    .banner h1 {
        font-size: 32px;
    }
    
    .section {
        padding: 40px 0;
    }
    
    .section-header h2 {
        font-size: 28px;
    }
    
    .anime-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

@media (max-width: 576px) {
    .banner h1 {
        font-size: 28px;
    }
    
    .search-box {
        flex-direction: column;
    }
    
    .search-box input {
        border-radius: 4px;
        margin-bottom: 10px;
    }
    
    .search-box button {
        border-radius: 4px;
    }
    
    .anime-grid {
        grid-template-columns: 1fr;
    }
    
    .schedule-table {
        grid-template-columns: 1fr 1fr;
    }
    
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
    }
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.anime-card, .classic-card, .category-item, .schedule-day, .article-item {
    animation: fadeIn 0.6s ease forwards;
}

.anime-card:nth-child(2) {
    animation-delay: 0.1s;
}

.anime-card:nth-child(3) {
    animation-delay: 0.2s;
}

.anime-card:nth-child(4) {
    animation-delay: 0.3s;
}

/* 图标样式 */
.icon-weibo, .icon-wechat, .icon-qq {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-weibo {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M407 177.6c7.6-24-13.4-46.8-37.4-41.7-22 4.8-28.8-28.1-7.1-32.8 50.1-10.9 92.3 37.1 76.5 84.8-6.8 21.2-38.8 10.8-32-10.3zM214.8 446.7C108.5 446.7 0 395.3 0 310.4c0-44.3 28-95.4 76.3-143.7C176 67 279.5 65.8 249.9 161c-4 13.1 12.3 5.7 12.3 6 79.5-33.6 140.5-16.8 114 51.4-3.7 9.4 1.1 10.9 8.3 13.1 135.7 42.3 34.8 215.2-169.7 215.2zm143.7-146.3c-5.4-55.7-78.5-94-163.4-85.7-84.8 8.6-148.8 60.3-143.4 116s78.5 94 163.4 85.7c84.8-8.6 148.8-60.3 143.4-116zM347.9 35.1c-25.9 5.6-16.8 43.7 8.3 38.3 72.3-15.2 134.8 52.8 111.7 124-7.4 24.2 29.1 37 37.4 12 31.9-99.8-55.1-195.9-157.4-174.3zm-78.5 311c-17.1 38.8-66.8 60-109.1 46.3-40.8-13.1-58-53.4-40.3-89.7 17.7-35.4 63.1-55.4 103.4-45.1 42 10.8 63.1 50.2 46 88.5zm-86.3-30c-12.9-5.4-30 .3-38 12.9-8.3 12.9-4.3 28 8.6 34 13.1 6 30.8 .3 39.1-12.9 8-13.1 3.1-28.3-9.7-34zm32.6-13.4c-5.1-1.7-11.4 .6-14.3 5.4-2.9 5.1-1.4 10.6 3.7 12.9 5.1 2 11.7-.3 14.6-5.4 2.8-5.2 1.1-10.9-4-12.9z'/%3E%3C/svg%3E");
}
.icon-wechat {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23ffffff' d='M385.2 167.6c6.4 0 12.6.3 18.8 1.1C387.4 90.3 303.3 32 207.7 32 100.5 32 13 104.8 13 197.4c0 53.4 29.3 97.5 77.9 131.6l-19.3 58.6 68-34.1c24.4 4.8 43.8 9.7 68.2 9.7 6.2 0 12.1-.3 18.3-.8-4-12.9-6.2-26.6-6.2-40.8-.1-84.9 72.9-154 165.3-154zm-104.5-52.9c14.5 0 24.2 9.7 24.2 24.4 0 14.5-9.7 24.2-24.2 24.2-14.8 0-29.3-9.7-29.3-24.2.1-14.7 14.6-24.4 29.3-24.4zm-136.4 48.6c-14.5 0-29.3-9.7-29.3-24.2 0-14.8 14.8-24.4 29.3-24.4 14.8 0 24.4 9.7 24.4 24.4 0 14.6-9.6 24.2-24.4 24.2zM563 319.4c0-77.9-77.9-141.3-165.4-141.3-92.7 0-165.4 63.4-165.4 141.3S305 460.7 397.6 460.7c19.3 0 38.9-5.1 58.6-9.9l53.4 29.3-14.8-48.6C534 402.1 563 363.2 563 319.4zm-219.1-24.5c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.8 0 24.4 9.7 24.4 19.3 0 10-9.7 19.6-24.4 19.6zm107.1 0c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.5 0 24.4 9.7 24.4 19.3.1 10-9.9 19.6-24.4 19.6z'/%3E%3C/svg%3E");
}

.icon-qq {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ffffff' d='M433.754 420.445c-11.526 1.393-44.86-52.741-44.86-52.741 0 31.345-16.136 72.247-51.051 101.786 16.842 5.192 54.843 19.167 45.803 34.421-7.316 12.343-125.51 7.881-159.632 4.037-34.122 3.844-152.316 8.306-159.632-4.037-9.045-15.25 28.918-29.214 45.783-34.415-34.92-29.539-51.059-70.445-51.059-101.792 0 0-33.334 54.134-44.859 52.741-5.37-.65-12.424-29.644 9.347-99.704 10.261-33.024 21.995-60.478 40.144-105.779C60.683 98.063 108.982.006 224 0c113.737.006 163.156 96.133 160.264 214.963 18.118 45.223 29.912 72.85 40.144 105.778 21.768 70.06 14.716 99.053 9.346 99.704z'/%3E%3C/svg%3E");
}