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

body {
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    color: #333;
    background-color: #f5f5f5;
    line-height: 1.6;
}

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

ul, li {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.btn {
    display: inline-block;
    padding: 8px 20px;
    background-color: #e51937;
    color: #fff;
    border-radius: 4px;
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: #c01730;
    transform: translateY(-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 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
}

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

.logo svg {
    margin-right: 10px;
}

h1 {
    font-size: 24px;
    color: #e51937;
    margin: 0;
}

.search-box {
    display: flex;
    align-items: center;
}

.search-box form {
    display: flex;
    align-items: center;
}

.search-box input {
    width: 300px;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    outline: none;
    font-size: 14px;
}

.search-box button {
    padding: 10px 15px;
    background-color: #e51937;
    color: #fff;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.search-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M15.7 14.3l-4.2-4.2c0.8-1.1 1.3-2.5 1.3-4.1 0-3.9-3.1-7-7-7S0 2.1 0 6s3.1 7 7 7c1.6 0 3-0.5 4.1-1.3l4.2 4.2c0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.4-0.4 0.4-1 0-1.4zM2 6c0-2.8 2.2-5 5-5s5 2.2 5 5-2.2 5-5 5-5-2.2-5-5z'/%3E%3C/svg%3E") no-repeat center;
    margin-right: 5px;
}

/* 导航菜单 */
nav {
    background-color: #333;
}

.main-nav {
    display: flex;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
}

.main-nav li {
    position: relative;
}

.main-nav a {
    display: block;
    padding: 15px 25px;
    color: #fff;
    font-weight: 500;
    text-align: center;
}

.main-nav a:hover {
    background-color: #e51937;
}

/* 轮播图 */
.banner {
    position: relative;
    margin: 20px 0;
}

.banner-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    height: 400px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.banner-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease;
}

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

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

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

.banner-info h2 {
    font-size: 28px;
    margin-bottom: 10px;
}

.banner-info p {
    font-size: 16px;
    margin-bottom: 20px;
    max-width: 600px;
}

.banner-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    transform: translateY(-50%);
    z-index: 10;
}

.banner-controls span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.banner-controls span:hover {
    background-color: rgba(229, 25, 55, 0.8);
}

.banner-dots {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    z-index: 10;
}

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

.banner-dots .dot.active {
    background-color: #e51937;
}

/* 公共部分 - 章节标题 */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e51937;
}

.section-header h2 {
    font-size: 24px;
    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: #e51937;
}

.section-header .more {
    color: #666;
    font-size: 14px;
}

.section-header .more:hover {
    color: #e51937;
}

/* 电影卡片网格 */
.movie-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

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

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

.movie-poster {
    position: relative;
    height: 0;
    padding-top: 140%; /* 宽高比 */
    overflow: hidden;
}

.movie-poster img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.movie-card:hover .movie-poster img {
    transform: scale(1.05);
}

.movie-poster .score {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(229, 25, 55, 0.9);
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
}

.movie-info {
    padding: 15px;
}

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

.movie-meta {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
}

.movie-desc {
    font-size: 12px;
    color: #666;
    height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
}

.watch-btn {
    display: block;
    width: 100%;
    padding: 8px 0;
    background-color: #e51937;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.watch-btn:hover {
    background-color: #c01730;
}

/* 热门推荐和最新上映 */
.hot-section, .new-section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

/* 分类浏览 */
.category-section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.category-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.category-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: all 0.3s ease;
}

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

.category-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.category-item h3 {
    font-size: 16px;
    margin: 10px 0 5px;
}

.category-item p {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
    padding: 0 10px;
}

.category-btn {
    display: block;
    margin: 0 10px 10px;
    padding: 6px 0;
    background-color: #f0f0f0;
    color: #333;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.category-btn:hover {
    background-color: #e51937;
    color: #fff;
}

/* 精选文章 */
.article-section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.article-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.article-item {
    display: flex;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

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

.article-item img {
    width: 200px;
    height: 150px;
    object-fit: cover;
}

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

.article-content h3 {
    font-size: 16px;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-meta {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
}

.article-desc {
    font-size: 14px;
    color: #666;
    height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
}

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

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

/* APP下载 */
.app-section {
    background-color: #fff;
    padding: 40px 0;
    margin: 40px 0;
}

.app-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
}

.app-info {
    flex: 1;
    padding-right: 40px;
}

.app-info h2 {
    font-size: 28px;
    color: #333;
    margin-bottom: 15px;
}

.app-info p {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
}

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

.feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 30px;
}

.feature-icon {
    width: 40px;
    height: 40px;
    background-color: #f0f0f0;
    border-radius: 50%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon.download {
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23e51937' d='M10 15l-5-5h3V2h4v8h3l-5 5zm9-4v6c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2v-6h2v6h14v-6h2z'/%3E%3C/svg%3E") no-repeat center;
}

.feature-icon.hd {
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23e51937' d='M3 3h14c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2zm0 2v10h14V5H3zm2 2h2v6H5V7zm4 0h2v6H9V7zm4 0h2v2h-2v2h2v2h-2V7z'/%3E%3C/svg%3E") no-repeat center;
}

.feature-icon.subtitle {
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23e51937' d='M3 15h14v-2H3v2zm0-4h14v-2H3v2zm0-4h14V5H3v2zm0-4h14V1H3v2z'/%3E%3C/svg%3E") no-repeat center;
}

.feature-icon.update {
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23e51937' d='M10 3v2.5L5 10l5 4.5V17l-7-7 7-7zm0 14v-2.5L15 10l-5-4.5V3l7 7-7 7z'/%3E%3C/svg%3E") no-repeat center;
}

.feature span {
    font-size: 14px;
    color: #666;
}

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

.app-btn {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    margin-right: 15px;
    transition: all 0.3s ease;
}

.app-btn:hover {
    background-color: #e51937;
}

.app-btn i {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.android-icon {
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M15 5H5c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zM7 7h2v2H7V7zm0 4h2v2H7v-2zm4-4h2v2h-2V7zm0 4h2v2h-2v-2z'/%3E%3C/svg%3E") no-repeat center;
}

.ios-icon {
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M15.38 7.8C14.91 6.21 13.57 5 12 5c-1.17 0-2.19.55-2.86 1.4-.17.21-.33.45-.47.7-.15-.25-.31-.49-.47-.7C7.55 5.55 6.52 5 5.35 5 3.78 5 2.44 6.21 1.97 7.8 1.46 9.5 2.94 12.06 5 13.72V19l3-3 3 3v-5.28c2.06-1.66 3.54-4.22 3.03-5.92zM5.35 7c-.52 0-.94-.43-.94-.95s.42-.95.94-.95.94.43.94.95-.42.95-.94.95zm1.7 1.49c-.6-.1-1.05-.61-1.05-1.24 0-.67.53-1.2 1.2-1.2s1.2.53 1.2 1.2c0 .63-.45 1.14-1.05 1.24-.07-.31-.18-.6-.3-.86.12-.27.23-.56.3-.86.07.3.18.59.3.86-.12.26-.23.55-.3.86z'/%3E%3C/svg%3E") no-repeat center;
}

.qr-code {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qr-code img {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
}

.qr-code p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.app-preview {
    flex: 1;
    text-align: center;
}

.app-preview img {
    max-width: 300px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

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

.ranking-tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

.ranking-tabs .tab {
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    color: #666;
    position: relative;
}

.ranking-tabs .tab.active {
    color: #e51937;
    font-weight: 500;
}

.ranking-tabs .tab.active:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #e51937;
}

.ranking-list {
    display: none;
}

.ranking-list.active {
    display: block;
}

.ranking-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

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

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

.ranking-item:nth-child(1) .rank {
    background-color: #ffd700;
    color: #fff;
}

.ranking-item:nth-child(2) .rank {
    background-color: #c0c0c0;
    color: #fff;
}

.ranking-item:nth-child(3) .rank {
    background-color: #cd7f32;
    color: #fff;
}

.ranking-item img {
    width: 80px;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 15px;
}

.ranking-info {
    flex: 1;
}

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

.ranking-info p {
    font-size: 14px;
    color: #999;
    margin-bottom: 10px;
}

.ranking-score {
    display: flex;
    align-items: center;
}

.ranking-score .score {
    font-size: 16px;
    font-weight: bold;
    color: #e51937;
    margin-right: 10px;
}

.progress-bar {
    flex: 1;
    height: 6px;
    background-color: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
}

.progress {
    height: 100%;
    background-color: #e51937;
    border-radius: 3px;
}

.ranking-btn {
    padding: 8px 20px;
    background-color: #e51937;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    margin-left: 20px;
    transition: all 0.3s ease;
}

.ranking-btn:hover {
    background-color: #c01730;
}

/* 友情链接 */
.links-section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

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

.links-container ul {
    display: flex;
    flex-wrap: wrap;
}

.links-container li {
    margin-right: 20px;
    margin-bottom: 10px;
}

.links-container a {
    color: #666;
    font-size: 14px;
    transition: all 0.3s ease;
}

.links-container a:hover {
    color: #e51937;
}

/* 页脚 */
footer {
    background-color: #333;
    color: #fff;
    padding: 40px 0 20px;
}

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

.footer-top {
    display: flex;
    margin-bottom: 30px;
}

.footer-logo {
    flex: 1;
}

.footer-logo h2 {
    font-size: 18px;
    margin-top: 15px;
    color: #fff;
}

.footer-nav {
    flex: 2;
    display: flex;
    justify-content: space-between;
}

.footer-nav-col h3 {
    font-size: 16px;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
}

.footer-nav-col h3:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: #e51937;
}

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

.footer-nav-col ul li a {
    color: #ccc;
    font-size: 14px;
    transition: all 0.3s ease;
}

.footer-nav-col ul li a:hover {
    color: #e51937;
}

.footer-middle {
    display: flex;
    justify-content: space-between;
    padding: 30px 0;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
}

.footer-contact h3 {
    font-size: 16px;
    margin-bottom: 15px;
}

.footer-contact p {
    display: flex;
    align-items: center;
    color: #ccc;
    font-size: 14px;
    margin-bottom: 15px;
}

.email-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ccc' d='M14 3H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm0 9H2V5l6 3 6-3v7zm-6-4L2 5h12l-6 3z'/%3E%3C/svg%3E") no-repeat center;
    margin-right: 8px;
}

.social-links {
    display: flex;
}

.social-link {
    width: 40px;
    height: 40px;
    background-color: #444;
    border-radius: 50%;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.social-link:hover {
    background-color: #e51937;
}

.social-link.weibo {
    background: #444 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M8.29 14.3c-2.04-.67-3.34-2.5-2.92-4.12.42-1.62 2.4-2.4 4.44-1.73 2.04.68 3.34 2.5 2.92 4.13-.42 1.62-2.4 2.4-4.44 1.73zm1.76-2.88c-.4-.12-.91.12-1.12.57-.22.45-.05.9.34 1.02.4.11.92-.12 1.14-.57.21-.45.05-.9-.36-1.02zm-1.05.7c-.14-.04-.32.05-.4.2-.1.16-.02.32.12.36.15.04.32-.04.42-.2.08-.16.02-.32-.14-.36zm.12-1.68c-1.94-.52-4.13.82-4.96 2.94-.84 2.12.02 4.38 1.96 4.9 1.94.52 4.13-.82 4.96-2.94.84-2.12-.02-4.38-1.96-4.9zm7.18-2.96c-.76-.82-1.86-1.14-2.9-.94-.24.04-.4.26-.36.5.04.24.26.4.5.36.74-.14 1.54.07 2.08.67.54.6.68 1.4.42 2.12-.08.22.04.48.26.56.22.08.48-.04.56-.26.37-1.02.16-2.19-.56-3.01zm2.6-2.35c-1.55-1.7-3.84-2.36-5.98-1.93-.29.06-.48.34-.42.64.06.29.34.48.64.42 1.8-.36 3.73.12 5.05 1.57 1.32 1.45 1.67 3.42.92 5.16-.1.28.04.58.32.68.28.1.58-.04.68-.32.9-2.09.48-4.51-1.21-6.22z'/%3E%3C/svg%3E") no-repeat center;
}

.social-link.wechat {
    background: #444 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M13.55 5.6c-3.4 0-6.15 2.3-6.15 5.15 0 2.85 2.75 5.15 6.15 5.15.36 0 .7-.03 1.04-.08l.96.58c.36.2.6.36.7.36.06 0 .09-.02.09-.07v-1.21c1.04-.58 3.36-2.24 3.36-4.73 0-2.85-2.75-5.15-6.15-5.15zm-2.32 2.5c-.4 0-.73-.33-.73-.73s.33-.73.73-.73.73.33.73.73-.33.73-.73.73zm4.68 0c-.4 0-.73-.33-.73-.73s.33-.73.73-.73.73.33.73.73-.33.73-.73.73z'/%3E%3Cpath fill='%23fff' d='M8.37 2C4.38 2 1.13 4.66 1.13 7.98c0 1.64.8 3.16 2.43 4.22v1.42c0 .05.03.07.08.07.1 0 .34-.15.7-.36l1.03-.58c.97.2 1.95.29 3 .29h.27c-.16-.54-.24-1.1-.24-1.68 0-3.35 3.26-6.07 7.28-6.07h.28C15.3 3.05 12.07 2 8.37 2zM5.73 5.13c-.51 0-.93-.42-.93-.93s.42-.93.93-.93.93.42.93.93-.42.93-.93.93zm5.28 0c-.51 0-.93-.42-.93-.93s.42-.93.93-.93.93.42.93.93-.42.93-.93.93z'/%3E%3C/svg%3E") no-repeat center;
}

.social-link.douyin {
    background: #444 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M15.92 5.92c-.75-.35-1.36-.96-1.7-1.7-.36-.77-.36-1.64-.36-2.72h-3v11.74c0 .65-.27 1.24-.7 1.67-.44.44-1.03.7-1.67.7-.65 0-1.24-.27-1.67-.7-.44-.44-.7-1.03-.7-1.67 0-1.3 1.06-2.36 2.36-2.36.26 0 .52.04.76.12V7.07c-.25-.03-.5-.05-.76-.05-2.2 0-4.25 1.2-5.33 3.15-.26.47-.45.98-.58 1.5-.13.53-.2 1.07-.2 1.62 0 1.56.6 3.02 1.7 4.1.44.44.95.8 1.5 1.08.56.28 1.15.47 1.76.56.6.1 1.22.1 1.83 0 .6-.1 1.2-.28 1.75-.56.56-.28 1.06-.64 1.5-1.08.44-.44.8-.95 1.08-1.5.28-.56.47-1.15.56-1.76.1-.6.1-1.22 0-1.83V8.9c1.4.7 3 1.1 4.7 1.1V7c-.74 0-1.47-.13-2.16-.38-.7-.25-1.33-.62-1.88-1.1.03.13.06.26.1.4z'/%3E%3C/svg%3E") no-repeat center;
}

.footer-qr {
    text-align: center;
}

.footer-qr img {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
}

.footer-qr p {
    font-size: 14px;
    color: #ccc;
}

.footer-bottom {
    padding-top: 20px;
    text-align: center;
}

.footer-bottom p {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .movie-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .category-container {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .article-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
    }
    
    .search-box {
        margin-top: 15px;
        width: 100%;
    }
    
    .search-box input {
        width: 100%;
    }
    
    .main-nav {
        flex-wrap: wrap;
    }
    
    .main-nav a {
        padding: 10px 15px;
    }
    
    .banner-container {
        height: 300px;
    }
    
    .movie-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .category-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .article-item {
        flex-direction: column;
    }
    
    .article-item img {
        width: 100%;
        height: 200px;
    }
    
    .app-container {
        flex-direction: column;
    }
    
    .app-info {
        padding-right: 0;
        margin-bottom: 30px;
    }
    
    .footer-top {
        flex-direction: column;
    }
    
    .footer-logo {
        margin-bottom: 30px;
    }
    
    .footer-nav {
        flex-wrap: wrap;
    }
    
    .footer-nav-col {
        width: 50%;
        margin-bottom: 20px;
    }
    
    .footer-middle {
        flex-direction: column;
    }
    
    .footer-contact {
        margin-bottom: 30px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 20px;
    }
    
    .movie-grid {
        grid-template-columns: 1fr;
    }
    
    .category-container {
        grid-template-columns: 1fr;
    }
    
    .app-features {
        flex-wrap: wrap;
    }
    
    .feature {
        width: 50%;
        margin-bottom: 20px;
    }
    
    .app-buttons {
        flex-direction: column;
    }
    
    .app-btn {
        margin-right: 0;
        margin-bottom: 15px;
    }
    
    .footer-nav-col {
        width: 100%;
    }
}