/* _c9u29btod */
* {margin: 0;box-sizing: border-box;padding: 0}

:root {--white: #ffffff;--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);--secondary-color: #1a1a2e;--text-light: #666;--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2);--accent-color: #ffd700;--primary-color: #c8102e;--text-color: #333;--bg-color: #f5f5f5}

body {line-height: 1.6;color: var(--text-color);font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;overflow-x: hidden}

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

/* 导航栏 */
.navbar {background: #000000;top: 0;width: 100%;box-shadow: var(--shadow);position: fixed;transition: all 0.3s ease;height: 86px;z-index: 1000}

/* 分割线 */
.divider {height: 20px;top: 86px;width: 100%;z-index: 999;background-color: #1a1a1a;left: 0;position: fixed}

.navbar .container {display: flex;gap: 35rem;height: 100%;padding: 0 40px;max-width: 100%;align-items: center;justify-content: flex-start}

.nav-brand {display: flex;height: 100%;flex-shrink: 0;align-items: center}

.logo {height: 53px;object-fit: contain;width: 432px}

.nav-menu {list-style: none;gap: 2.5rem;display: flex;padding: 0;align-items: center;margin: 0;margin-left: 0}

.nav-menu li {position: relative}

.nav-menu a {padding: 0.5rem 0;font-size: 1.1rem;transition: all 0.3s ease;color: var(--white);position: relative;display: block;text-decoration: none;font-weight: 500}

.nav-menu a::after {width: 0;content: '';height: 2px;position: absolute;bottom: 0;left: 0;background: var(--accent-color);transition: width 0.3s ease}

.nav-menu a:hover {color: var(--accent-color)}

.nav-menu a:hover::after {width: 100%}

.hamburger {gap: 4px;flex-direction: column;cursor: pointer;display: none}

.hamburger span {background: var(--white);transition: all 0.3s ease;height: 2px;width: 20px}

/* Hero区域 */
.hero {background-size: cover;height: 500px;background-position: center;margin: 106px auto 0;background-color: #1a1a1a;background-image: url('../images/BN-4.jpg');background-repeat: no-repeat;width: 100%}

.hero-content {justify-content: flex-start;padding-left: 50px;display: flex;align-items: center;height: 100%}

.hero-text {flex-direction: column;display: flex;justify-content: center;align-items: flex-start;gap: 30px}

/* 标题样式 */
.hero-title {color: #ffffff;display: flex;align-items: center;justify-content: flex-start;height: 72px;width: 500px;padding: 0;margin: 0;text-align: left}

/* 文本区域样式 */
.hero-description-wrapper {align-items: center;display: flex;height: 74px;margin: 0;justify-content: flex-start;width: 500px;padding: 0}

.hero-description {margin: 0;color: #ffffff;padding: 0;text-align: left}

/* 按钮区域样式 */
.hero-buttons {display: flex;padding: 0;justify-content: flex-start;align-items: center;gap: 16px;height: 48px;width: 467px;margin: 0}

/* 按钮样式 */
.hero-buttons .btn {display: block;height: 48px;cursor: pointer;background-position: center;width: 145px;text-decoration: none;background-repeat: no-repeat;background-size: cover;border: none;margin: 0;padding: 0}

.btn-1 {background-image: url('../images/btn-1.png')}

.btn-2 {background-image: url('../images/btn-2.png')}

.btn-3 {background-image: url('../images/btn-3.png')}

/* 新闻资讯 */
.news {overflow: hidden;padding: 5rem 0;background-repeat: no-repeat;background-image: url('../images/news-bg.jpg');background-position: center;background-color: #1a1a1a;background-size: cover;position: relative}

.news::before {background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);content: '';right: 0;pointer-events: none;width: 300px;height: 300px;top: 0;position: absolute}

.news-title {padding-left: 20px;font-weight: 700;margin-bottom: 2rem;color: #ffffff;font-size: 2.5rem;line-height: 1.2}

.news-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 2rem;padding: 0 20px}

.news-card {background: #2a2a2a;overflow: hidden;transition: transform 0.3s ease, box-shadow 0.3s ease;cursor: pointer;border-radius: 15px}

.news-card:hover {transform: translateY(-5px);box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5)}

.news-banner {height: 200px;overflow: hidden;width: 100%;position: relative}

.news-banner img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease}

.news-card:hover .news-banner img {transform: scale(1.05)}

.news-content {padding: 1.5rem}

.news-card-title {display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;margin-bottom: 0.75rem;line-height: 1.4;font-size: 1.1rem;-webkit-box-orient: vertical;font-weight: 600;overflow: hidden;color: #ffffff}

.news-card-description {line-height: 1.6;line-clamp: 3;-webkit-line-clamp: 3;font-size: 0.9rem;overflow: hidden;-webkit-box-orient: vertical;margin-bottom: 1rem;color: #999999;display: -webkit-box}

.news-date {font-size: 0.85rem;color: #c8102e;font-weight: 500}

/* 手机App展示 */
.app-showcase {background: #1a1a1a;padding: 5rem 0}

.app-showcase-header {margin-bottom: 3rem;text-align: center;padding: 0 20px}

.app-showcase-title {margin-bottom: 1.5rem;color: #ffffff;font-size: 2.5rem;text-align: center;font-weight: 700}

.app-showcase-description {margin: 0 auto;text-align: center;font-size: 1.1rem;color: rgba(255, 255, 255, 0.8);max-width: 800px;line-height: 1.8}

.app-images-grid {justify-content: center;overflow-x: auto;flex-direction: row;-webkit-overflow-scrolling: touch;display: flex;scroll-snap-type: x proximity;flex-wrap: nowrap;gap: 1.5rem;align-items: center;padding: 0 20px}

.app-image-item {border-radius: 20px;transition: transform 0.3s ease, box-shadow 0.3s ease;width: 200px;overflow: hidden;flex: 0 0 auto;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);scroll-snap-align: start;height: 400px}

.app-image-item:hover {transform: translateY(-10px);box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3)}

.app-image-item img {display: block;width: 100%;object-fit: cover;height: 100%}

/* 背景图片板块 */
.banner-section {height: 900px;align-items: flex-start;position: relative;display: flex;background-color: #1a1a1a;background-position: center;justify-content: center;background-size: cover;background-repeat: no-repeat;width: 100%;background-image: url('../images/banner-section.jpg')}

.banner-section::before {left: 0;background: rgba(0, 0, 0, 0.4);top: 0;z-index: 1;position: absolute;height: 100%;content: '';width: 100%}

.banner-section .container {z-index: 2;position: relative;padding-top: 3rem;width: 100%}

.banner-content {padding: 0 20px;max-width: 800px;margin: 0 auto;text-align: center}

.banner-title {margin-bottom: 2rem;font-weight: 700;color: #ffffff;font-size: 3.5rem;text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);line-height: 1.2}

.banner-description {text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);line-height: 1.8;font-size: 1.2rem;color: rgba(255, 255, 255, 0.95)}

/* 红龙官方APP新版 */
.app-preview {position: relative;background-size: cover;background-image: url('../images/app-preview-bg.jpg');overflow: hidden;background-repeat: no-repeat;padding: 5rem 0;background-position: center;background: #1a1a1a}

.app-preview::before {position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 1;background: rgba(0, 0, 0, 0.6);content: ''}

.app-preview .container {z-index: 2;position: relative}

.app-preview-header {margin-bottom: 4rem;padding: 0 20px;text-align: center}

.app-preview-title {font-size: 3rem;font-weight: 700;border-radius: 10px;background: rgba(200, 16, 46, 0.1);padding: 1rem 2rem;margin-bottom: 1.5rem;color: #c8102e;border: 2px solid rgba(200, 16, 46, 0.3);display: inline-block}

.app-preview-desc {margin: 0 auto;line-height: 1.8;font-size: 1.1rem;max-width: 800px;color: rgba(255, 255, 255, 0.9)}

.app-preview-phones {gap: 2rem;justify-content: center;display: flex;flex-wrap: wrap;padding: 0 20px;align-items: center}

.phone-item {width: 300px;transition: transform 0.3s ease, box-shadow 0.3s ease;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);padding: 10px;border-radius: 30px;height: auto;max-width: 100%;flex: 0 0 auto;overflow: hidden;background: #000}

.phone-item:hover {transform: translateY(-10px) scale(1.02);box-shadow: 0 30px 80px rgba(200, 16, 46, 0.4)}

.phone-item img {display: block;width: 100%;border-radius: 25px;height: auto}

/* 文章正文 */
.article {padding: 5rem 0;background: var(--bg-color)}

.article-content {text-align: center;max-width: 900px;padding: 0 20px;margin: 0 auto}

.article-title {margin-bottom: 1.5rem;font-size: 2.5rem;font-weight: 700;color: var(--secondary-color);text-align: center;line-height: 1.3}

.article-meta {gap: 1.5rem;border-bottom: 1px solid #e0e0e0;padding-bottom: 1.5rem;display: flex;margin-bottom: 2.5rem}

.article-date,
.article-author {color: var(--text-light);font-size: 0.95rem}

.article-date::before {content: '📅 '}

.article-author::before {content: '✍️ '}

.article-body {line-height: 1.8;color: var(--text-color)}

.article-body p {font-size: 1.05rem;margin-bottom: 1.5rem}

.article-body h2 {font-weight: 600;font-size: 1.8rem;margin-bottom: 1rem;color: var(--secondary-color);margin-top: 2.5rem}

.article-body h3 {margin-bottom: 1rem;margin-top: 2rem;font-weight: 600;color: var(--secondary-color);font-size: 1.5rem}

.article-body ul,
.article-body ol {padding-left: 2rem;margin-bottom: 1.5rem}

.article-body li {font-size: 1.05rem;margin-bottom: 0.75rem}

.article-body strong {color: var(--secondary-color);font-weight: 600}

.article-body a {color: var(--primary-color);text-decoration: none;transition: color 0.3s ease}

.article-body a:hover {text-decoration: underline;color: #a00d26}

.article-body {text-align: left}

.article-keywords {flex-wrap: wrap;padding-top: 2rem;margin-top: 3rem;display: flex;justify-content: center;gap: 0.75rem;border-top: 1px solid #e0e0e0}

.keyword-tag {transition: all 0.3s ease;border-radius: 20px;background: #f5f5f5;color: var(--text-color);display: inline-block;font-size: 0.9rem;padding: 0.5rem 1rem;border: 1px solid #e0e0e0}

.keyword-tag:hover {background: var(--primary-color);color: #ffffff;transform: translateY(-2px);border-color: var(--primary-color);box-shadow: 0 4px 8px rgba(200, 16, 46, 0.2)}

/* 特色功能 */
.features {padding: 5rem 0;background: var(--bg-color)}

.section-title {text-align: center;margin-bottom: 1rem;color: var(--secondary-color);font-size: 2.5rem}

.section-subtitle {color: var(--text-light);margin-bottom: 3rem;font-size: 1.2rem;text-align: center}

.features-grid {margin-top: 3rem;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));display: grid;gap: 2rem}

.feature-card {background: var(--white);padding: 2rem;transition: all 0.3s ease;text-align: center;box-shadow: var(--shadow);border-radius: 15px}

.feature-card:hover {box-shadow: var(--shadow-lg);transform: translateY(-10px)}

.feature-icon {font-size: 3rem;margin-bottom: 1rem}

.feature-card h3 {margin-bottom: 1rem;font-size: 1.5rem;color: var(--secondary-color)}

.feature-card p {color: var(--text-light);line-height: 1.8}

/* 下载区域 */
.download {padding: 5rem 0;background: var(--white)}

.download-grid {grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));margin-top: 3rem;display: grid;gap: 2rem}

.download-card {color: var(--white);box-shadow: var(--shadow);padding: 2.5rem;border-radius: 15px;transition: all 0.3s ease;background: linear-gradient(135deg, var(--secondary-color) 0%, #16213e 100%);text-align: center}

.download-card:hover {transform: translateY(-10px);box-shadow: var(--shadow-lg)}

.download-icon {margin-bottom: 1rem;font-size: 4rem}

.download-card h3 {font-size: 1.5rem;margin-bottom: 0.5rem}

.download-card p {opacity: 0.9;margin-bottom: 1.5rem}

/* 联系我们 */
.contact {padding: 5rem 0;background: var(--bg-color)}

.contact-content {gap: 3rem;margin-top: 3rem;grid-template-columns: 1fr 1fr;display: grid}

.contact-info {flex-direction: column;display: flex;gap: 2rem}

.contact-item {gap: 1.5rem;align-items: flex-start;display: flex}

.contact-icon {flex-shrink: 0;font-size: 2rem}

.contact-item h3 {color: var(--secondary-color);margin-bottom: 0.5rem}

.contact-item p {color: var(--text-light)}

.contact-form {border-radius: 15px;background: var(--white);box-shadow: var(--shadow);padding: 2rem}

.contact-form h3 {color: var(--secondary-color);margin-bottom: 1.5rem}

.contact-form input,
.contact-form textarea {margin-bottom: 1rem;border-radius: 5px;width: 100%;border: 1px solid #ddd;font-family: inherit;font-size: 1rem;padding: 0.75rem}

.contact-form textarea {resize: vertical}

/* 页脚 */
.footer {margin-top: 0;color: #ffffff;padding: 3rem 0 1.5rem;background: #1a1a1a}

.footer-content {grid-template-columns: 1fr 2fr;margin-bottom: 2rem;gap: 3rem;display: grid}

.footer-brand {flex-direction: column;display: flex;gap: 1rem}

.footer-logo {height: 50px;width: auto;object-fit: contain}

.footer-desc {font-size: 0.9rem;line-height: 1.6;color: rgba(255, 255, 255, 0.7)}

.footer-links {grid-template-columns: repeat(3, 1fr);gap: 2rem;display: grid}

.footer-column h4 {margin-bottom: 1rem;color: #ffffff;font-size: 1.1rem;font-weight: 600}

.footer-column ul {list-style: none;margin: 0;padding: 0}

.footer-column ul li {margin-bottom: 0.75rem}

.footer-column ul li a {color: rgba(255, 255, 255, 0.7);font-size: 0.9rem;text-decoration: none;transition: color 0.3s ease}

.footer-column ul li a:hover {color: #ff69b4}

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

.footer-bottom p {margin-bottom: 0.5rem;color: rgba(255, 255, 255, 0.7);font-size: 0.9rem}

.footer-disclaimer {color: #ff69b4;font-size: 0.85rem}

/* 响应式设计 */
@media (max-width: 768px) {height: 68px;.navbar {
        width: 100%}

    .logo {height: 32px;width: 200px}

    .hamburger {display: flex}

    .nav-menu {position: fixed;box-shadow: var(--shadow);left: -100%;width: 100%;background: #000000;flex-direction: column;top: 88px;padding: 2rem 0;text-align: center;transition: 0.3s}

    .nav-menu.active {left: 0}

    .divider {top: 68px}

    .hero {background-size: cover;background-color: #1a1a1a;height: 214px;background-repeat: no-repeat;background-position: center;width: 100%;margin: 88px auto 0;background-image: url('../images/mb-BN-h5.jpg')}

    .hero-content {padding-left: 30px}

    .hero-text {gap: 10px;align-items: flex-start}

    /* 移动端标题和文本区域容器 - 总高度134px */
    .hero-title,
    .hero-description-wrapper {margin-left: 0;width: 172px}

    /* 移动端标题样式 */
    .hero-title {font-size: 1.2rem;margin: 0;display: flex;justify-content: flex-start;text-align: left;padding: 0;align-items: center;width: 172px;height: 60px}

    /* 移动端文本区域样式 */
    .hero-description-wrapper {align-items: center;display: flex;width: 172px;height: 64px;justify-content: flex-start;margin: 0;padding: 0}

    .hero-description {text-align: left;margin: 0;padding: 0;line-height: 1.3;font-size: 0.75rem}

    /* 移动端按钮区域样式 */
    .hero-buttons {margin: 0 auto;transform: translateX(15px);gap: 8px;justify-content: center;align-items: center;min-height: 36px;width: 100%;max-width: 280px;height: auto;display: flex}

    /* 移动端按钮样式 */
    .hero-buttons .btn {height: 36px;width: 88px;background-size: contain}


    .news-title {margin-bottom: 1.5rem;padding-left: 15px;font-size: 1.8rem;line-height: 1.2}

    .news-grid {display: flex;gap: 1rem;-webkit-overflow-scrolling: touch;flex-direction: row;scroll-snap-type: x mandatory;padding: 0 15px;overflow-x: auto;scrollbar-width: thin}

    .news-card {border-radius: 10px;min-width: 280px;scroll-snap-align: start}

    .news-banner {height: 180px}

    .news-content {padding: 1rem}

    .news-card-title {margin-bottom: 0.5rem;font-size: 1rem}

    .news-card-description {font-size: 0.85rem;margin-bottom: 0.75rem}

    .news-date {font-size: 0.8rem}

    .app-showcase-header {margin-bottom: 2rem;padding: 0 15px}

    .app-showcase-title {font-size: 2rem;margin-bottom: 1rem}

    .app-showcase-description {font-size: 0.9rem;padding: 0 15px;line-height: 1.6}

    .app-images-grid {scroll-snap-type: x proximity;gap: 1rem;padding: 0 15px;justify-content: flex-start}

    .app-image-item {scroll-snap-align: start;min-width: 160px;width: 160px;border-radius: 15px;height: 320px}

    .app-preview {padding: 3rem 0}

    .app-preview-header {margin-bottom: 2.5rem;padding: 0 15px}

    .app-preview-title {padding: 0.75rem 1.5rem;font-size: 1.8rem}

    .app-preview-desc {font-size: 1rem;padding: 0 15px}

    .app-preview-phones {padding: 0 15px;flex-direction: column;gap: 1.5rem}

    .phone-item {max-width: 280px;width: 100%}

    .banner-section {height: 356px}

    .banner-section .container {padding-top: 1.5rem}

    .banner-content {padding: 0 15px}

    .banner-title {margin-bottom: 0.75rem;font-size: 1.3rem}

    .banner-description {line-height: 1.5;font-size: 0.8rem}

    .article-title {font-size: 2rem;margin-bottom: 1rem}

    .article-meta {flex-direction: column;padding-bottom: 1rem;gap: 0.75rem;margin-bottom: 2rem}

    .article-content {padding: 0 15px}

    .article-body p {margin-bottom: 1.25rem;font-size: 1rem}

    .article-body h2 {margin-top: 2rem;font-size: 1.5rem;margin-bottom: 0.75rem}

    .article-body h3 {font-size: 1.3rem;margin-bottom: 0.75rem;margin-top: 1.5rem}

    .article-body ul,
    .article-body ol {padding-left: 1.5rem}

    .article-body li {font-size: 1rem;margin-bottom: 0.5rem}

    .article-keywords {padding-top: 1.5rem;margin-top: 2rem;gap: 0.5rem}

    .keyword-tag {padding: 0.4rem 0.8rem;font-size: 0.8rem}

    .footer-content {grid-template-columns: 1fr;gap: 2rem}

    .footer-links {gap: 1.5rem;grid-template-columns: 1fr}

    .footer-column {margin-bottom: 1.5rem}

    .footer-logo {height: 40px}

    .footer-bottom {padding-top: 1.5rem}

    .footer-bottom p {font-size: 0.85rem}

    .footer-disclaimer {font-size: 0.8rem}

    .features-grid,
    .download-grid {grid-template-columns: 1fr}

    .contact-content {grid-template-columns: 1fr}

    .section-title {font-size: 2rem}
}


/* 平滑滚动 */
html {scroll-behavior: smooth}

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

.feature-card,
.download-card {animation: fadeInUp 0.6s ease-out}


._cpbf0ht6r{}

._c9whrbdrr{}

._c74kqp74u{}