/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

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

a:hover {
    color: #e53e3e;
}

ul, ol {
    list-style: none;
}

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

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

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

.header-top {
    padding: 20px 0;
}

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

.logo a {
    display: flex;
    align-items: center;
    color: #c62f2f;
    font-size: 24px;
    font-weight: bold;
}

.film-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23c62f2f"><path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4zM11.25 15.25L10 18l-1.25-2.75L6 14l2.75-1.25L10 10l1.25 2.75L14 14l-2.75 1.25zm5.69-3.31L16 14l-.94-2.06L13 11l2.06-.94L16 8l.94 2.06L19 11l-2.06.94z"/></svg>') no-repeat center center;
    background-size: contain;
}

.search-box {
    position: relative;
    width: 300px;
}

.search-box input {
    width: 100%;
    padding: 10px 40px 10px 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
}

.search-box input:focus {
    border-color: #c62f2f;
    box-shadow: 0 0 5px rgba(198, 47, 47, 0.3);
}

.search-box button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
}

.search-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>') no-repeat center center;
    background-size: contain;
}

.main-nav {
    background-color: #c62f2f;
}

.main-nav ul {
    display: flex;
    justify-content: space-between;
}

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

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

/* 轮播图样式 */
.banner {
    padding: 30px 0;
    background-color: #f5f5f5;
}

.slider {
    position: relative;
    height: 400px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

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

.slide.active {
    opacity: 1;
}

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

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

.slide-content h2 {
    font-size: 28px;
    margin-bottom: 10px;
}

.slider-controls {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.prev, .next {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #c62f2f;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 10px;
    font-size: 18px;
    font-weight: bold;
}

.dots {
    display: flex;
    justify-content: center;
    margin: 0 20px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ddd;
    margin: 0 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background-color: #c62f2f;
    transform: scale(1.2);
}

/* 主要内容区样式 */
main {
    padding: 30px 0;
}

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

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

.section-header h1:after, .section-header h2:after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: #c62f2f;
    margin: 10px auto 0;
}

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

/* 厂史介绍模块 */
.about-section {
    padding: 50px 0;
    background-color: #fff;
    margin-bottom: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.about-content {
    display: flex;
    align-items: center;
    gap: 30px;
}

.about-text {
    flex: 1;
}

.about-text p {
    margin-bottom: 15px;
    text-align: justify;
}

.about-image {
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 经典作品模块 */
.classic-films {
    padding: 50px 0;
    background-color: #f9f9f9;
    margin-bottom: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.film-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
}

.film-card {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.film-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.film-poster {
    height: 300px;
    overflow: hidden;
}

.film-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.film-card:hover .film-poster img {
    transform: scale(1.1);
}

.film-info {
    padding: 20px;
}

.film-info h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #c62f2f;
}

.film-info .director, .film-info .year {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

.film-info .desc {
    font-size: 14px;
    color: #333;
    margin-top: 10px;
    line-height: 1.5;
}

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

.more-btn a {
    display: inline-block;
    padding: 10px 30px;
    background-color: #c62f2f;
    color: #fff;
    border-radius: 30px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.more-btn a:hover {
    background-color: #a82828;
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(198, 47, 47, 0.3);
}

/* 最新作品模块 */
.new-films {
    padding: 50px 0;
    background-color: #fff;
    margin-bottom: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.new-film-showcase {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.showcase-main {
    position: relative;
    height: 400px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

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

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

.showcase-info h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.showcase-info .release {
    font-size: 16px;
    margin-bottom: 10px;
    color: #ddd;
}

.showcase-info .desc {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.btn-group {
    display: flex;
    gap: 15px;
}

.btn {
    display: inline-block;
    padding: 8px 20px;
    background-color: #c62f2f;
    color: #fff;
    border-radius: 20px;
    font-size: 14px;
    transition: all 0.3s ease;
}

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

.showcase-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.showcase-item {
    position: relative;
    height: 150px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.showcase-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.showcase-item:hover img {
    transform: scale(1.1);
}

.showcase-item h4 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: #fff;
    font-size: 16px;
    text-align: center;
}

/* 名人堂模块 */
.hall-of-fame {
    padding: 50px 0;
    background-color: #f9f9f9;
    margin-bottom: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.fame-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 30px;
}

.fame-card {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    text-align: center;
}

.fame-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.fame-photo {
    height: 250px;
    overflow: hidden;
}

.fame-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.fame-card:hover .fame-photo img {
    transform: scale(1.1);
}

.fame-info {
    padding: 15px;
}

.fame-info h3 {
    font-size: 18px;
    margin-bottom: 5px;
    color: #c62f2f;
}

.fame-info .title {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

.fame-info .works {
    font-size: 12px;
    color: #333;
}

/* 历史沿革模块 */
.history {
    padding: 50px 0;
    background-color: #fff;
    margin-bottom: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.timeline {
    position: relative;
    padding: 20px 0;
}

.timeline:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background-color: #c62f2f;
}

.timeline-item {
    position: relative;
    margin-bottom: 50px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-date {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #c62f2f;
    color: #fff;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: bold;
    z-index: 1;
}

.timeline-content {
    position: relative;
    width: 45%;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    margin-top: 30px;
}

.timeline-item:nth-child(odd) .timeline-content {
    margin-left: auto;
}

.timeline-content h3 {
    font-size: 20px;
    color: #c62f2f;
    margin-bottom: 10px;
}

.timeline-content p {
    font-size: 14px;
    margin-bottom: 15px;
}

.timeline-content img {
    width: 100%;
    border-radius: 5px;
}

/* APP下载模块 */
.app-download {
    padding: 50px 0;
    background-color: #f9f9f9;
    margin-bottom: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.app-content {
    display: flex;
    align-items: center;
    gap: 30px;
}

.app-info {
    flex: 1;
}

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

.app-slogan {
    font-size: 18px;
    color: #666;
    margin-bottom: 20px;
}

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

.app-features li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.feature-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23c62f2f"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>') no-repeat center center;
    background-size: contain;
}

.download-btns {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.android-btn, .ios-btn {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.android-btn:hover, .ios-btn:hover {
    background-color: #c62f2f;
    color: #fff;
}

.android-icon, .ios-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.android-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><path 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"/></svg>') no-repeat center center;
    background-size: contain;
}

.ios-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><path 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-.57 1.5-1.31 2.99-2.53 4.08zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>') no-repeat center center;
    background-size: contain;
}

.qrcode {
    text-align: center;
}

.qrcode img {
    width: 100px;
    height: 100px;
    margin-bottom: 5px;
}

.qrcode p {
    font-size: 12px;
    color: #666;
}

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

.app-preview img {
    max-height: 400px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* 文章模块 */
.articles {
    padding: 50px 0;
    background-color: #fff;
    margin-bottom: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.article-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.article-item {
    display: flex;
    gap: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}

.article-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.article-img {
    flex: 0 0 300px;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
}

.article-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.article-item:hover .article-img img {
    transform: scale(1.1);
}

.article-content {
    flex: 1;
}

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

.article-content h3 a:hover {
    color: #c62f2f;
}

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

.article-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
    text-align: justify;
}

.read-more {
    display: inline-block;
    padding: 5px 15px;
    background-color: #c62f2f;
    color: #fff;
    border-radius: 15px;
    font-size: 12px;
    transition: all 0.3s ease;
}

.read-more:hover {
    background-color: #a82828;
    color: #fff;
}

/* 页脚样式 */
footer {
    background-color: #333;
    color: #fff;
    padding-top: 50px;
}

.footer-top {
    padding-bottom: 30px;
}

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

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

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

.footer-column p {
    font-size: 14px;
    color: #ccc;
    line-height: 1.6;
}

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

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

.footer-column ul li a:hover {
    color: #c62f2f;
    padding-left: 5px;
}

.contact-info li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    font-size: 14px;
    color: #ccc;
}

.location-icon, .phone-icon, .email-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    flex-shrink: 0;
}

.location-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ccc"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>') no-repeat center center;
    background-size: contain;
}

.phone-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ccc"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>') no-repeat center center;
    background-size: contain;
}

.email-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ccc"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>') no-repeat center center;
    background-size: contain;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.social-link {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    transition: all 0.3s ease;
}

.social-link:hover {
    background-color: #c62f2f;
    transform: translateY(-3px);
}

.weibo-icon, .wechat-icon, .douyin-icon, .bilibili-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.weibo-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><path d="M9.82 13.87c-1.82.2-3.02 1.41-2.69 2.7.33 1.29 2.08 2.16 3.9 1.96 1.82-.2 3.02-1.41 2.69-2.7-.33-1.29-2.08-2.16-3.9-1.96zm1.11 2.66c-.35.38-.87.55-1.17.37-.29-.17-.24-.61.11-.99.35-.38.87-.55 1.17-.37.29.17.24.61-.11.99zm1.89-1.51c-.12.14-.3.2-.39.12-.09-.07-.07-.24.05-.38.12-.14.3-.2.39-.12.09.08.07.24-.05.38zm0 0M17.72 10.69c.39-.44.48-1.09.32-1.69-.16-.57-.57-1.05-1.13-1.3l.01-.01c-.15-.06-.3-.12-.46-.15-.16-.03-.32-.05-.48-.05-.63-.02-1.27.18-1.73.63l-.01-.01c-.13.11-.24.24-.34.37-.1.13-.18.28-.24.43-.06.15-.1.31-.12.47-.02.16-.02.32 0 .48.01.16.04.32.09.47.04.15.1.29.18.43.08.14.17.26.27.38.1.12.22.23.34.32.13.09.26.17.4.24.14.07.29.12.44.16.15.04.31.06.47.07.16 0 .31-.01.47-.04.15-.03.3-.07.44-.13.14-.06.28-.13.41-.22.13-.08.25-.18.36-.29.11-.11.21-.23.29-.36.09-.13.16-.27.22-.41.06-.14.1-.29.13-.44.03-.15.04-.31.04-.47 0-.16-.02-.31-.06-.47-.04-.15-.09-.3-.16-.44-.07-.14-.15-.27-.24-.4-.09-.13-.2-.25-.31-.35l-.01-.01c.19.06.37.14.54.24.17.1.32.22.45.36zm-1.97-.09c-.31.34-.46.77-.44 1.2.01.43.19.85.52 1.16.33.31.76.46 1.2.44.43-.01.85-.19 1.16-.52.31-.33.46-.76.44-1.2-.01-.43-.19-.85-.52-1.16-.33-.31-.76-.46-1.2-.44-.43.01-.85.19-1.16.52zm0 0M9.89 10.11c-3.5.39-6.15 2.73-5.93 5.23.22 2.5 3.26 4.21 6.76 3.82 3.5-.39 6.15-2.73 5.93-5.23-.22-2.5-3.26-4.21-6.76-3.82zm2.67 6.11c-.71.81-1.73 1.22-2.88 1.22-1.16 0-2.31-.42-2.88-1.25-.58-.85-.55-1.78-.55-1.78s-.16-1.47 1.38-2.48c1.54-1.01 2.76-.42 2.76-.42s.29-.31.51-.59c.22-.28.2-.62.2-.62s-.06-.15.13-.21c.19-.06.66.49.66.49s1.64 1.97.66 4.17c0 0 .32.32.66.32.34 0 .66-.42.66-.42s.03-1.24-1.31-2.56c0 0-.36-.45-.2-.91.17-.46.51-.4.51-.4s2.29 1.08 1.36 4.78c0 0-.06.46.33.25.39-.21.33-.65.33-.65s.66-2.58-1.38-4.02c0 0-.36-.4-.1-.71.26-.31.62-.1.62-.1s2.54 1.06 1.84 5.11c0 0-.13.59.26.59.39 0 .49-.59.49-.59s.92-3.69-1.41-5.8c0 0 .66-.51 1.38.1.72.61.98 1.29.98 1.29s.3-.1.3.2c0 .3-.23.51-.23.51s.3.25.07.51c-.23.25-.56.15-.56.15s-.06 1.78-1.88 3.22zm0 0M18.01 8.17c.06.01.12.02.18.02.34 0 .64-.24.71-.59.01-.06.02-.12.02-.18 0-.34-.24-.64-.59-.71-.06-.01-.12-.02-.18-.02-.34 0-.64.24-.71.59-.01.06-.02.12-.02.18 0 .34.24.64.59.71zm1.51-2.13c.12.03.25.05.37.05.7 0 1.32-.49 1.46-1.21.03-.12.05-.25.05-.37 0-.7-.49-1.32-1.21-1.46-.12-.03-.25-.05-.37-.05-.7 0-1.32.49-1.46 1.21-.03.12-.05.25-.05.37 0 .7.49 1.32 1.21 1.46zm0 0"/></svg>') no-repeat center center;
    background-size: contain;
}

.wechat-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><path d="M9.5 8.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm5 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm-6.43 9.87l-1.2-2.41c-.88.29-1.89.44-2.87.44-3.86 0-7-2.24-7-5s3.14-5 7-5 7 2.24 7 5c0 1.5-.76 2.86-2 3.83l1.5 3-2.43.14zM16.5 19c-1.4 0-2.71-.39-3.8-1.04l-4.7 2.04 1-4c-1.56-1.37-2.5-3.27-2.5-5.5 0-4.14 4.48-7.5 10-7.5s10 3.36 10 7.5-4.48 7.5-10 7.5zm-4-11c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm5 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"/></svg>') no-repeat center center;
    background-size: contain;
}

.douyin-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><path d="M16.6 5.82s.51.5 0 0A4.278 4.278 0 0 1 15.54 3h-3.09v12.4a2.592 2.592 0 0 1-2.59 2.5c-1.42 0-2.59-1.16-2.59-2.5 0-1.34 1.16-2.5 2.59-2.5.46 0 .89.12 1.26.34v-3.17C8.85 9.75 6.8 11.84 6.8 14.33c0 2.58 2.12 4.66 4.72 4.66 2.6 0 4.72-2.08 4.72-4.66V10.2c1.4.91 3.06 1.45 4.84 1.45v-3.09c-1.79 0-3.42-.73-4.59-1.91 0 0 .05-.04.09-.07zm-1.06-1.32z"/></svg>') no-repeat center center;
    background-size: contain;
}

.bilibili-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><path d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906L17.813 4.653zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773H5.333zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373z"/></svg>') no-repeat center center;
    background-size: contain;
}

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

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

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

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

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

.footer-middle ul li a:hover, .footer-middle ul a:hover {
    color: #c62f2f;
}

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

.copyright {
    font-size: 14px;
    color: #ccc;
    margin-bottom: 10px;
}

.icp {
    font-size: 12px;
    color: #999;
}

.icp a {
    color: #999;
    margin-right: 10px;
}

.icp a:hover {
    color: #c62f2f;
}

.icp img {
    width: 14px;
    height: 14px;
    margin-right: 5px;
    vertical-align: middle;
}

/* 响应式样式 */
@media (max-width: 1200px) {
    .container {
        padding: 0 20px;
    }
}

@media (max-width: 992px) {
    .about-content, .app-content {
        flex-direction: column;
    }
    
    .timeline-content {
        width: 80%;
        margin: 30px auto 0;
    }
    
    .timeline-item:nth-child(odd) .timeline-content {
        margin-left: auto;
        margin-right: auto;
    }
    
    .article-item {
        flex-direction: column;
    }
    
    .article-img {
        flex: 0 0 auto;
        height: 200px;
    }
}

@media (max-width: 768px) {
    .header-top .container {
        flex-direction: column;
        gap: 20px;
    }
    
    .search-box {
        width: 100%;
    }
    
    .main-nav ul {
        flex-wrap: wrap;
    }
    
    .main-nav li {
        flex: 0 0 50%;
    }
    
    .slider {
        height: 300px;
    }
    
    .film-cards, .fame-cards {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    
    .showcase-list {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .footer-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .section-header h1, .section-header h2 {
        font-size: 24px;
    }
    
    .main-nav li {
        flex: 0 0 100%;
    }
    
    .slider {
        height: 200px;
    }
    
    .slide-content h2 {
        font-size: 20px;
    }
    
    .timeline:before {
        left: 20px;
    }
    
    .timeline-date {
        left: 20px;
        transform: none;
        width: 100px;
        text-align: center;
        font-size: 12px;
        padding: 5px 10px;
    }
    
    .timeline-content {
        width: calc(100% - 40px);
        margin-left: 40px;
        margin-top: 40px;
    }
    
    .timeline-item:nth-child(odd) .timeline-content {
        margin-left: 40px;
    }
}