/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Microsoft YaHei', 'Arial', sans-serif;
}

/* 加载动画样式 */
.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a0a2a 0%, #1a1a3a 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.loading-content {
    text-align: center;
    color: white;
    width: 90%;
    max-width: 400px;
}

.loading-logo h2 {
    font-size: 3rem;
    margin-bottom: 10px;
    color: #ff6b6b;
    text-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
}

.loading-logo p {
    font-size: 1.2rem;
    color: #e0e0ff;
    margin-bottom: 40px;
}

/* 旋转加载动画 */
.loading-spinner {
    width: 80px;
    height: 80px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top-color: #ff6b6b;
    margin: 0 auto 30px;
    animation: spin 1.5s linear infinite;
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.3);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 进度条样式 */
.loading-progress {
    margin-bottom: 20px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1) inset;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ff6b6b, #ff9f43);
    border-radius: 4px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}

.progress-text {
    font-size: 1rem;
    color: #ff6b6b;
    font-weight: bold;
}

/* 建设中文本 */
.building-text {
    font-size: 1.1rem;
    color: #b8b8ff;
    opacity: 0.9;
    margin-top: 20px;
    animation: pulse 2s ease-in-out infinite;
}

/* 参考文字样式 */
.reference-text {
    font-size: 1rem;
    color: #ffcc99;
    opacity: 0.8;
    margin-top: 10px;
    font-style: italic;
    animation: fadeIn 1s ease-in;
}

@keyframes pulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.6; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 加载完成后的样式 */
.loading-container.fade-out {
    opacity: 0;
    visibility: hidden;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .loading-logo h2 {
        font-size: 2.5rem;
    }
    
    .loading-logo p {
        font-size: 1rem;
    }
    
    .loading-spinner {
        width: 60px;
        height: 60px;
    }
}

body {
    font-family: 'Arial', sans-serif;
    overflow-x: hidden;
}

/* 顶部导航栏样式 - 透明并位于图片上方 */
.top-navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent !important;
    backdrop-filter: none !important;
    z-index: 1000;
    padding: 15px 0;
    transition: all 0.3s ease;
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
    margin: 0 !important;
}

/* 顶部导航栏样式 */
.top-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    position: absolute; /* 将导航栏定位为绝对位置 */
    top: 0;
    left: 0;
    right: 0;
    background: transparent !important; /* 强制透明背景 */
    backdrop-filter: none !important; /* 移除模糊效果 */
    z-index: 1000;
    padding: 15px 0;
    transition: all 0.3s ease;
    box-shadow: none !important; /* 移除阴影 */
    border: none !important; /* 移除边框 */
    background-color: transparent !important; /* 确保背景颜色透明 */
    margin: 0 !important;
}

.nav-container {
    max-width: 100%; /* 改为100%宽度以充满整个屏幕 */
    margin: 0;
    display: flex;
    justify-content: space-between; /* 确保logo在左，菜单在右 */
    align-items: center;
    padding: 0 20px;
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
    width: 100%;
}

.nav-logo {
    display: flex;
    flex-direction: column;
    margin-left: 0;
    flex-shrink: 0; /* 防止logo被压缩 */
}

.nav-brand {
    font-family: 'STKaiti', 'KaiTi', serif;
    font-size: 24px;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.nav-tagline {
    font-size: 0.7rem;
    color: #ddd;
    margin-top: 2px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    padding-left: 15px; /* 添加左侧缩进 */
    text-indent: 15px; /* 添加文本缩进 */
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: auto; /* 确保菜单在最右侧 */
    flex-shrink: 0;
}

.nav-menu li {
    margin: 0 15px;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.3s ease;
    padding: 5px 10px;
    position: relative;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 添加文字阴影以提高可读性 */
}

.nav-menu a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 10px;
    background-color: #4a90e2;
    transition: width 0.3s ease;
}

.nav-menu a:hover {
    color: #4a90e2;
}

.nav-menu a:hover::after {
    width: calc(100% - 20px);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    width: 25px;
    height: 3px;
    background: white;
    margin: 3px 0;
    transition: 0.3s;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 添加文字阴影以提高可读性 */
}

/* 响应式设计 - 移动端 */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background: rgba(0, 0, 0, 0.8); /* 移动端菜单使用半透明背景 */
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 20px 0;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-menu li {
        margin: 15px 0;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .nav-toggle.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

/* 品牌Logo样式 */
.brand-logo {
    position: fixed;
    top: 90px; /* 调整位置以避开导航栏 */
    left: 20px;
    z-index: 1001; /* 确保logo在导航栏之上 */
    font-family: 'STKaiti', 'KaiTi', serif;
    font-size: 28px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 1040;
    animation: breathe 3s ease-in-out infinite alternate;
}

/* Logo标语样式 */
.tagline-logo {
    position: fixed;
    top: 130px; /* 调整位置以避开导航栏 */
    left: 30px;
    font-size: 0.9rem;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0.9;
    margin-left: 10px;
}

/* 动画关键帧定义 */
@keyframes breathe {
    0% { opacity: 0.8; }
    100% { opacity: 1; }
}

@keyframes fall {
    0% {
        transform: translateY(-10px) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh) translateX(20px);
        opacity: 0;
    }
}

@keyframes rise {
    0% {
        bottom: -50px;
        transform: translateX(0);
    }
    50% {
        transform: translateX(50px);
    }
    100% {
        bottom: 100vh;
        transform: translateX(0);
    }
}

@keyframes roadMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(-40px); }
}

@keyframes scrollChuanzangJS {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

@keyframes scrollSceneryJS {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* 雪花背景效果 */
.snowflake {
    position: absolute;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    animation-name: fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index: 20;
}

/* 大屏背景样式 */
.hero-section {
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4)), url('1506905925346-21bda4d32df4.avif') center/cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
    padding-top: 0; /* 确保没有顶部内边距 */
    margin-top: 0; /* 确保没有顶部外边距 */
}

.hero-content {
    position: relative;
    z-index: 30;
}

.hero-content h1 {
    font-size: 4rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    margin-top: 60px; /* 为导航栏留出空间 */
}

.hero-content p {
    font-size: 1.5rem;
    margin-bottom: 10px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

.cta-button {
    margin-top: 30px;
    padding: 15px 40px;
    font-size: 1.2rem;
    background: transparent;
    color: white;
    border: 2px solid white;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 30;
    position: relative;
}

.cta-button:hover {
    background: white;
    color: black;
    transform: scale(1.05);
}

/* 动态背景元素 */
.background-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.road-line {
    position: absolute;
    bottom: 15%;
    left: 0;
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(
        to right,
        white,
        white 20px,
        transparent 20px,
        transparent 40px
    );
    animation: roadMove 10s linear infinite;
    z-index: 15;
}

/* 功能模块样式 */
.features-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    padding: 40px 20px 80px;
    max-width: 1200px;
    margin: 20px auto 0;
    position: relative;
    z-index: 40;
}

.feature-card {
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 45;
    transform: translateY(0);
    border: 2px solid white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    background: white;
}

.feature-card:hover {
    transform: translateY(-10px);
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #333;
}

.feature-card p {
    color: #666;
    font-size: 1rem;
}

.features-section {
    position: relative;
    background: none;
    overflow: hidden;
}

.features-section::before {
    content: 
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A"
        "内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中 内容仅供参考,网站开发中\A";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.05);
    font-weight: bold;
    white-space: pre;
    line-height: 1.5;
    opacity: 0.7;
    pointer-events: none;
    z-index: 1;
    word-spacing: 10px;
}

.features-section > * {
    position: relative;
    z-index: 2;
}

/* 底部样式 */
footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 20px;
    position: relative;
    z-index: 50;
}

/* 模态框样式 */
.modal {
    display: none;
    position: fixed;
    z-index: 1040;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal.show {
    display: block;
}

.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: none;
    border-radius: 10px;
    width: 80%;
    max-width: 500px;
    text-align: center;
    position: relative;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1050;
}

.modal-content h2 {
    color: #333;
    margin-top: 0;
    text-align: center;
    border-bottom: 2px solid #4a90e2;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.feature-description {
    font-size: 1.1rem;
    font-weight: 500;
    color: #555;
    text-align: center;
    margin-bottom: 25px;
    padding: 0 10px;
}

.modal-content p {
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
}

.modal-content a {
    color: #4a90e2;
    text-decoration: none;
}

.modal-content a:hover {
    text-decoration: underline;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 1060;
}

.close:hover,
.close:focus {
    color: #000;
}

.modal-content button {
    background-color: #4a90e2;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.modal-content button:hover {
    background-color: #357ae8;
}

/* 功能模块样式增强 */
.feature-sections, .feature-stories, .feature-categories, .feature-travelers {
    margin: 20px 0;
}

.feature-section, .feature-story, .feature-category, .traveler-card {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
}

.feature-section:hover, .feature-story:hover, .feature-category:hover, .traveler-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.feature-section h3, .feature-story h3, .feature-category h3, .traveler-card h3 {
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2rem;
    border-left: 4px solid #4a90e2;
    padding-left: 10px;
}

.story-author {
    font-style: italic;
    color: #7f8c8d;
    margin: 5px 0 10px;
    font-size: 0.9rem;
}

.story-excerpt {
    margin-bottom: 10px;
}

.read-more-btn {
    background-color: transparent;
    color: #4a90e2;
    border: 1px solid #4a90e2;
    padding: 5px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.read-more-btn:hover {
    background-color: #4a90e2;
    color: white;
}

.feature-category ul, .feature-contacts ul {
    list-style-type: none;
    padding-left: 10px;
}

.feature-category li {
    margin-bottom: 8px;
    color: #555;
}

.feature-contacts {
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
}

.feature-contacts h3 {
    color: #856404;
    margin-top: 0;
}

.feature-contacts li {
    margin-bottom: 5px;
    color: #555;
}

.traveler-card {
    position: relative;
    padding-bottom: 50px;
}

.traveler-card p {
    margin-bottom: 10px;
}

/* 删除按钮样式 */
.delete-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background-color 0.3s ease;
}

.delete-btn:hover {
    background-color: #c0392b;
}

/* 同路人表单样式 */
.traveler-form {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-top: 30px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    max-width: 100%;
    box-sizing: border-box;
}

.traveler-form h3 {
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    border-left: 4px solid #4a90e2;
    padding-left: 10px;
}

.form-group {
    margin-bottom: 15px;
    text-align: left;
    padding: 0 5px;
    box-sizing: border-box;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path d="M7 10l5 5 5-5z" fill="%23666"/></svg>') no-repeat right 12px center;
    min-height: 40px;
    max-width: 100%;
    -webkit-box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.3);
}

.form-group select {
    cursor: pointer;
    z-index: 10;
    position: relative;
    max-width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
}

/* 确保select选项正确显示 */
.form-group select option {
    padding: 8px;
    background-color: #fff;
    color: #333;
    max-width: 100%;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-line-clamp: none;
    -webkit-box-orient: horizontal;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-overflow: ellipsis;
    max-width: 100vw;
    max-width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
    max-width: 100vw;
    max-width: 100vw;
    max-width: 100vw;
    max-width: 100vw;
    max-width: 100vw;
    max-width: 100vw;
    max-width: 100vw;
    max-width: 100vw;
    max-width: 100vw;
    max-width: 100vw;
}

.form-group select option:hover {
    background-color: #f0f0f0;
}

.submit-btn {
    background-color: #4a90e2;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    width: 100%;
    transition: background-color 0.3s ease;
}

.submit-btn:hover {
    background-color: #357ae8;
}

.modal-actions {
    text-align: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.modal-content button:hover {
    background-color: #357ae8;
}

.tagline {
    font-size: 0.8rem;
    margin-top: 5px;
    opacity: 0.8;
}

#real-time {
    font-size: 0.7rem;
    color: #ddd;
    margin-left: 10px;
    font-weight: normal;
}

.tagline-hero {
    font-size: 1.2rem;
    margin: 10px 0;
    opacity: 0.9;
    font-style: italic;
}

/* 内容页面样式 */
.content-section {
    max-width: 1200px;
    margin: 120px auto 40px;
    padding: 0 20px;
}

.content-section h1 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.5rem;
    color: #333;
}

.content-section h2 {
    margin: 30px 0 20px;
    color: #444;
}

.intro-text p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #555;
}

.route-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    padding: 20px;
    border-radius: 10px;
}

.route-item {
    background: #f0f0f0;
    padding: 10px 15px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    min-width: 80px;
}

.route-arrow {
    font-size: 1.2rem;
    color: #666;
}

.route-provinces {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
}

.province-item {
    background: #e3f2fd;
    padding: 10px 15px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    min-width: 80px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.location-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.location-card h3 {
    color: #333;
    margin-bottom: 10px;
}

.location-card p {
    color: #666;
    line-height: 1.5;
}

.tips-section {
    margin: 40px 0;
}

.tip-card {
    background: #e9f7fe;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.tip-card h3 {
    color: #2c3e50;
    margin-bottom: 10px;
}

.tip-card p {
    color: #34495e;
    line-height: 1.6;
}

.back-button {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1040;
}

.back-button a {
    display: inline-block;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
}

.back-button a:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* 功能卡片链接样式 */
.feature-card-link {
    text-decoration: none;
    color: inherit;
    z-index: 20;
    position: relative;
}

/* 川藏南线滚动路线样式 */
.chuanzang-route {
    position: absolute;
    bottom: 18%;
    left: 0;
    width: 100%;
    height: 30px;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    z-index: 15;
}

.chuanzang-route .route-track {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 100px; /* 增加头部和尾部间距 */
    flex-shrink: 0;
    white-space: nowrap;
    will-change: transform;
    /* 添加宽度以确保内容正确显示 */
    width: max-content;
}

.chuanzang-route .route-item {
    padding: 2px 10px;
    margin: 0 3px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    font-weight: bold;
    font-size: 0.8rem;
    white-space: nowrap;
    color: #333;
}

.chuanzang-route .route-arrow {
    color: white;
    font-size: 0.8rem;
    margin: 0 3px;
}

/* 川藏南线滚动动画在JavaScript中定义 */

/* 风景介绍滚动样式 */
.scenery-scroll {
    position: absolute;
    bottom: 5%;
    left: 0;
    width: 100%;
    height: 20px;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    z-index: 15;
}

.scenery-track {
    display: flex;
    align-items: center;
    padding: 0 100px;
    flex-shrink: 0;
    white-space: nowrap;
    will-change: transform;
    /* 添加宽度以确保内容正确显示 */
    width: max-content;
}

.scenery-item {
    margin: 0 30px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    flex-shrink: 0;
}

/* 风景介绍滚动动画在JavaScript中定义 */

/* 泡泡效果样式 */
.bubbles-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    /* 确保不会遮挡其他元素 */
    z-index: 5;
}

.bubble {
    position: absolute;
    bottom: -50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: rise 10s infinite ease-in;
    /* 确保泡泡在正确层级 */
    z-index: 5;
}

/* 增强的响应式设计 */
@media (max-width: 1024px) {
    /* 修复select选项超出容器问题 */
    select::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    select::-webkit-scrollbar-thumb {
        background: transparent;
    }
    
    select {
        max-width: 100vw;
        width: 100%;
        box-sizing: border-box;
        word-wrap: break-word;
        overflow-wrap: break-word;
        -webkit-box-sizing: border-box;
        -webkit-appearance: none;
        -moz-appearance: none;
        max-height: 200px;
        overflow-y: auto;
        text-overflow: ellipsis;
        position: relative;
        max-width: 100%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        overflow: hidden;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
    }
    .hero-content h1 {
        font-size: 3.5rem;
    }
    
    .features-section {
        padding: 30px 20px 60px;
    }
    
    .form-group {
        margin-bottom: 15px;
        text-align: left;
        padding: 0 3px;
        box-sizing: border-box;
        max-width: 100%;
    }
    
    .hero-content p {
        font-size: 1.1rem;
    }
    
    .features-section {
        grid-template-columns: 1fr;
        padding: 30px 15px 50px;
        gap: 20px;
    }
    
    .brand-logo {
        font-size: 24px;
        top: 15px;
        left: 15px;
    }
    
    .tagline-logo {
        font-size: 0.8rem;
        top: 50px;
        left: 20px;
    }
    
    .content-section {
        margin-top: 100px;
    }
    
    .content-section h1 {
        font-size: 2rem;
    }
    
    .locations-grid {
        grid-template-columns: 1fr;
    }
    
    .route-map ul {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    
    .route-flow {
        flex-direction: column;
    }
    
    .route-flow .route-arrow {
        transform: rotate(90deg);
    }
    
    /* 响应式模态框 */
    .modal-content {
        width: 90%;
        margin: 25% auto;
        padding: 15px 10px;
        max-height: 70vh;
        overflow-y: auto;
    }
    
    .modal-content h2 {
        font-size: 1.5rem;
    }
    
    .feature-section h3, .feature-story h3, .feature-category h3, .traveler-card h3 {
        font-size: 1.1rem;
    }
    
    .traveler-form {
        padding: 15px 10px;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .form-group input,
    .form-group select {
        font-size: 0.9rem;
        padding: 8px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14"><path d="M7 10l5 5 5-5z" fill="%23666"/></svg>') no-repeat right 7px center;
        min-height: 36px;
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
        position: relative;
        z-index: 1;
    }
    
    .form-group select {
        cursor: pointer;
        z-index: 10;
        position: relative;
        max-width: 100%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        overflow: hidden;
    }
    
    /* 确保select选项正确显示 */
    .form-group select option {
        padding: 6px;
        background-color: #fff;
        color: #333;
        max-width: 100%;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        -webkit-line-clamp: none;
        -webkit-box-orient: horizontal;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        text-overflow: ellipsis;
        max-width: 100vw;
        max-width: 100%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        overflow: hidden;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
    }
    
    .form-group select option:hover {
        background-color: #f0f0f0;
    }
}

@media (max-width: 768px) {
    /* 为中等屏幕设备设置select下拉菜单最大高度 */
    select {
        max-height: 180px;
    }
    /* 修复select选项超出容器问题 */
    select::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    select::-webkit-scrollbar-thumb {
        background: transparent;
    }
    
    select {
        max-width: 100vw;
        width: 100%;
        box-sizing: border-box;
        word-wrap: break-word;
        overflow-wrap: break-word;
        -webkit-box-sizing: border-box;
        -webkit-appearance: none;
        -moz-appearance: none;
        max-height: 180px;
        overflow-y: auto;
        text-overflow: ellipsis;
        position: relative;
        max-width: 100%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        overflow: hidden;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
    }
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .form-group {
        margin-bottom: 15px;
        text-align: left;
        padding: 0 3px;
        box-sizing: border-box;
        max-width: 100%;
    }
    
    .hero-content p {
        font-size: 1.1rem;
    }
    
    .features-section {
        grid-template-columns: 1fr;
        padding: 30px 15px 50px;
        gap: 20px;
    }
    
    .brand-logo {
        font-size: 24px;
        top: 15px;
        left: 15px;
    }
    
    .tagline-logo {
        font-size: 0.8rem;
        top: 50px;
        left: 20px;
    }
    
    .content-section {
        margin-top: 100px;
    }
    
    .content-section h1 {
        font-size: 2rem;
    }
    
    .locations-grid {
        grid-template-columns: 1fr;
    }
    
    .route-map ul {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    
    .route-flow {
        flex-direction: column;
    }
    
    .route-flow .route-arrow {
        transform: rotate(90deg);
    }
    
    /* 响应式模态框 */
    .modal-content {
        width: 90%;
        margin: 25% auto;
        padding: 15px 10px;
        max-height: 70vh;
        overflow-y: auto;
    }
    
    .modal-content h2 {
        font-size: 1.5rem;
    }
    
    .feature-section h3, .feature-story h3, .feature-category h3, .traveler-card h3 {
        font-size: 1.1rem;
    }
    
    .traveler-form {
        padding: 15px 10px;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .form-group input,
    .form-group select {
        font-size: 0.9rem;
        padding: 8px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14"><path d="M7 10l5 5 5-5z" fill="%23666"/></svg>') no-repeat right 7px center;
        min-height: 36px;
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
        position: relative;
        z-index: 1;
    }
    
    .form-group select {
        cursor: pointer;
        z-index: 10;
        position: relative;
        max-width: 100%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        overflow: hidden;
    }
    
    /* 确保select选项正确显示 */
    .form-group select option {
        padding: 6px;
        background-color: #fff;
        color: #333;
        max-width: 100%;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        -webkit-line-clamp: none;
        -webkit-box-orient: horizontal;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        text-overflow: ellipsis;
        max-width: 100vw;
        max-width: 100%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        overflow: hidden;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
    }
    
    .form-group select option:hover {
        background-color: #f0f0f0;
    }
}

@media (max-width: 480px) {
    /* 为小屏幕设备设置更小的select下拉菜单最大高度 */
    select {
        max-height: 150px;
    }
    /* 修复select选项超出容器问题 */
    select::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    select::-webkit-scrollbar-thumb {
        background: transparent;
    }
    
    select {
        max-width: 100vw;
        width: 100%;
        box-sizing: border-box;
        word-wrap: break-word;
        overflow-wrap: break-word;
        -webkit-box-sizing: border-box;
        -webkit-appearance: none;
        -moz-appearance: none;
        max-height: 150px;
        overflow-y: auto;
        text-overflow: ellipsis;
        position: relative;
        max-width: 100%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        overflow: hidden;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
    }
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .form-group {
        margin-bottom: 15px;
        text-align: left;
        padding: 0 2px;
        box-sizing: border-box;
        max-width: 100%;
    }
    
    .hero-content p {
        font-size: 1rem;
    }
    
    .cta-button {
        padding: 10px 30px;
        font-size: 1rem;
    }
    
    .brand-logo {
        font-size: 20px;
        top: 10px;
        left: 10px;
    }
    
    .tagline-logo {
        font-size: 0.7rem;
        top: 45px;
        left: 15px;
    }
    
    /* 优化移动端模态框 */
    .modal-content {
        width: 95%;
        margin: 30% auto;
        padding: 15px 5px;
        max-height: 70vh;
        overflow-y: auto;
    }
    
    .modal-content h2 {
        font-size: 1.3rem;
    }
    
    .feature-section, .feature-story, .feature-category, .traveler-card {
        padding: 12px;
    }
    
    .traveler-form {
        padding: 15px 5px;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .form-group input,
    .form-group select {
        font-size: 0.9rem;
        padding: 6px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14"><path d="M7 10l5 5 5-5z" fill="%23666"/></svg>') no-repeat right 6px center;
        min-height: 32px;
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
        position: relative;
        z-index: 1;
    }
    
    .form-group select {
        cursor: pointer;
        z-index: 10;
        position: relative;
        max-width: 100%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        overflow: hidden;
    }
    
    /* 确保select选项正确显示 */
    .form-group select option {
        padding: 5px;
        background-color: #fff;
        color: #333;
        max-width: 100%;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        -webkit-line-clamp: none;
        -webkit-box-orient: horizontal;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        text-overflow: ellipsis;
        max-width: 100vw;
        max-width: 100%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        overflow: hidden;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
        max-width: 100vw;
    }
    
    .form-group select option:hover {
        background-color: #f0f0f0;
    }
    
    .submit-btn {
        padding: 10px;
        font-size: 0.9rem;
    }
    
    /* 优化滚动路线在移动端的显示 */
    .chuanzang-route {
        bottom: 20%;
    }
    
    .chuanzang-route .route-item {
        font-size: 0.7rem;
        padding: 2px 8px;
    }
    
    .scenery-scroll {
        display: none; /* 在极小屏幕上隐藏风景介绍滚动，避免信息过载 */
    }
}

/* 为大屏幕设备设置默认最大高度 */
@media (min-width: 1025px) {
    select {
        max-height: 220px;
    }
}

/* 确保select选项在所有设备上都有合适的最大宽度 */
@media (min-width: 1025px) {
    select option {
        max-width: 100%;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* 为中等屏幕设备设置select选项最大宽度 */
@media (max-width: 1024px) and (min-width: 769px) {
    select option {
        max-width: 100%;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* 为小屏幕设备设置select选项最大宽度 */
@media (max-width: 768px) {
    select option {
        max-width: 100%;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* 为极小屏幕设备设置select选项最大宽度 */
@media (max-width: 480px) {
    select option {
        max-width: 100%;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* 为所有设备设置select下拉菜单的通用样式 */
select::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

select::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

select::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

select::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 确保select下拉菜单不会超出视口 */
select:focus {
    outline: none;
}

select::-webkit-scrollbar-corner {
    background: transparent;
}

/* 确保select选项在所有设备上都有合适的最大宽度 */
select option {
    max-width: 100vw;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-line-clamp: none;
    -webkit-box-orient: horizontal;
    text-overflow: ellipsis;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: relative;
    z-index: 1;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    max-width: 100vw;
    max-width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
    max-width: 100vw;
    max-width: 100vw;
    max-width: 100vw;
    max-width: 100vw;
    max-width: 100vw;
    max-width: 100vw;
    max-width: 100vw;
    max-width: 100vw;
    max-width: 100vw;
    max-width: 100vw;
    max-width: 100vw;
}

/* 确保select在所有设备上都有合适的最大宽度 */
select {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100vw !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    overflow: hidden !important;
    max-width: 100vw !important;
    max-width: 100vw !important;
    max-width: 100vw !important;
    max-width: 100vw !important;
    max-width: 100vw !important;
    max-width: 100vw !important;
    max-width: 100vw !important;
    max-width: 100vw !important;
    max-width: 100vw !important;
    max-width: 100vw !important;
    max-width: 100vw !important;
}

/* 确保select选项在所有设备上都有合适的最大宽度 */
select option {
    max-width: 100% !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    -webkit-line-clamp: none !important;
    -webkit-box-orient: horizontal !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    max-width: 100% !important;
    text-overflow: ellipsis !important;
    max-width: 100vw !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    overflow: hidden !important;
    max-width: 100vw !important;
    max-width: 100vw !important;
    max-width: 100vw !important;
    max-width: 100vw !important;
    max-width: 100vw !important;
    max-width: 100vw !important;
    max-width: 100vw !important;
    max-width: 100vw !important;
    max-width: 100vw !important;
    max-width: 100vw !important;
    max-width: 100vw !important;
}