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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
}

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

/* 导航栏 */
.navbar {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

.navbar:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

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

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

.logo-img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    margin-right: 10px;
    transition: transform 0.3s ease;
    object-fit: contain;
}

.logo:hover .logo-img {
    transform: rotate(5deg);
}

.nav-links {
    display: flex;
    list-style: none;
}

.nav-links li {
    margin-left: 30px;
    position: relative;
}

.nav-link {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
    padding: 5px 0;
}

.nav-link:hover {
    color: #007bff;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #007bff;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* 下拉菜单 */
.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    z-index: 1;
    border-radius: 4px;
    overflow: hidden;
}

.dropdown-content a {
    display: block;
    padding: 12px 16px;
    margin: 0;
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.dropdown-content a:hover {
    background-color: #f5f5f5;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* 首页 */
.hero {
    margin-top: 80px;
    padding: 100px 0;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8f4f8 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(0, 123, 255, 0.1) 0%, transparent 70%);
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    margin-bottom: 50px;
}

.hero-logo {
    width: 120px;
    height: 120px;
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    object-fit: contain;
}

.hero-logo:hover {
    transform: scale(1.05);
}

.hero h1 {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

.location {
    font-size: 18px;
    margin-bottom: 10px;
    color: #666;
}

.slogan {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 40px;
    color: #007bff;
    letter-spacing: 1px;
}

.services {
    display: flex;
    justify-content: space-around;
    margin: 50px 0;
    position: relative;
    z-index: 1;
}

.service-item {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    flex: 1;
    margin: 0 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #007bff, #00bfff);
}

.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.service-item h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #333;
}

.service-item p {
    color: #666;
}

.intro {
    max-width: 800px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.8;
    color: #666;
    position: relative;
    z-index: 1;
}

.intro p {
    margin-bottom: 15px;
}

/* 通用标题样式 */
.section-title {
    text-align: center;
    font-size: 36px;
    margin-bottom: 15px;
    color: #333;
}

.section-subtitle {
    text-align: center;
    font-size: 18px;
    margin-bottom: 50px;
    color: #666;
}

/* 我们的项目 */
.projects {
    padding: 100px 0;
    background-color: #fff;
}

.project-cards {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.project-card {
    background-color: #f5f5f5;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    text-decoration: none;
    color: #333;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex: 1;
    max-width: 350px;
    position: relative;
    overflow: hidden;
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 123, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.project-card:hover::before {
    left: 100%;
}

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

.project-icon {
    margin-bottom: 20px;
}

.project-img {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

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

.project-card h3 {
    font-size: 24px;
    margin-bottom: 15px;
}

.project-card p {
    color: #666;
    margin-bottom: 20px;
}

.project-link {
    display: inline-block;
    color: #007bff;
    font-weight: 500;
    transition: color 0.3s ease, transform 0.3s ease;
}

.project-card:hover .project-link {
    color: #0056b3;
    transform: translateX(5px);
}

/* 我们的优势 */
.advantages {
    padding: 100px 0;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8f4f8 100%);
}

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

.advantage-item {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.advantage-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #007bff, #00bfff);
}

.advantage-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.advantage-icon {
    margin-bottom: 20px;
}

.advantage-img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

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

.advantage-item h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #333;
}

.advantage-item p {
    color: #666;
}

/* 小米穿戴设备动画展示 */
.wearable-animation {
    padding: 100px 0;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8f4f8 100%);
    text-align: center;
}

.animation-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
    margin-top: 50px;
}

.animation-wrapper {
    position: relative;
    width: 300px;
    height: 300px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.animation-frame {
    width: 260px;
    height: 260px;
    border-radius: 15px;
    background-color: #000;
    position: relative;
    overflow: hidden;
}

/* 刷脸成功动画 */
.face-recognition {
    background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
    background-size: cover;
    background-position: center;
    animation: faceRecognitionAnimation 3s infinite linear;
}

/* 已扣1动画 */
.payment-success {
    background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
    background-size: cover;
    background-position: center;
    animation: paymentSuccessAnimation 3s infinite linear;
}

/* 刷卡岛重塑动画 */
.card-island {
    background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
    background-size: cover;
    background-position: center;
    animation: cardIslandAnimation 3s infinite linear;
}

/* 刷脸成功序列帧动画 - 使用所有48张图片 */
@keyframes faceRecognitionAnimation {
    0% { background-image: url('new刷脸成功/1 (1).png'); }
    2.08% { background-image: url('new刷脸成功/1 (2).png'); }
    4.17% { background-image: url('new刷脸成功/1 (3).png'); }
    6.25% { background-image: url('new刷脸成功/1 (4).png'); }
    8.33% { background-image: url('new刷脸成功/1 (5).png'); }
    10.42% { background-image: url('new刷脸成功/1 (6).png'); }
    12.5% { background-image: url('new刷脸成功/1 (7).png'); }
    14.58% { background-image: url('new刷脸成功/1 (8).png'); }
    16.67% { background-image: url('new刷脸成功/1 (9).png'); }
    18.75% { background-image: url('new刷脸成功/1 (10).png'); }
    20.83% { background-image: url('new刷脸成功/1 (11).png'); }
    22.92% { background-image: url('new刷脸成功/1 (12).png'); }
    25% { background-image: url('new刷脸成功/1 (13).png'); }
    27.08% { background-image: url('new刷脸成功/1 (14).png'); }
    29.17% { background-image: url('new刷脸成功/1 (15).png'); }
    31.25% { background-image: url('new刷脸成功/1 (16).png'); }
    33.33% { background-image: url('new刷脸成功/1 (17).png'); }
    35.42% { background-image: url('new刷脸成功/1 (18).png'); }
    37.5% { background-image: url('new刷脸成功/1 (19).png'); }
    39.58% { background-image: url('new刷脸成功/1 (20).png'); }
    41.67% { background-image: url('new刷脸成功/1 (21).png'); }
    43.75% { background-image: url('new刷脸成功/1 (22).png'); }
    45.83% { background-image: url('new刷脸成功/1 (23).png'); }
    47.92% { background-image: url('new刷脸成功/1 (24).png'); }
    50% { background-image: url('new刷脸成功/1 (25).png'); }
    52.08% { background-image: url('new刷脸成功/1 (26).png'); }
    54.17% { background-image: url('new刷脸成功/1 (27).png'); }
    56.25% { background-image: url('new刷脸成功/1 (28).png'); }
    58.33% { background-image: url('new刷脸成功/1 (29).png'); }
    60.42% { background-image: url('new刷脸成功/1 (30).png'); }
    62.5% { background-image: url('new刷脸成功/1 (31).png'); }
    64.58% { background-image: url('new刷脸成功/1 (32).png'); }
    66.67% { background-image: url('new刷脸成功/1 (33).png'); }
    68.75% { background-image: url('new刷脸成功/1 (34).png'); }
    70.83% { background-image: url('new刷脸成功/1 (35).png'); }
    72.92% { background-image: url('new刷脸成功/1 (36).png'); }
    75% { background-image: url('new刷脸成功/1 (37).png'); }
    77.08% { background-image: url('new刷脸成功/1 (38).png'); }
    79.17% { background-image: url('new刷脸成功/1 (39).png'); }
    81.25% { background-image: url('new刷脸成功/1 (40).png'); }
    83.33% { background-image: url('new刷脸成功/1 (41).png'); }
    85.42% { background-image: url('new刷脸成功/1 (42).png'); }
    87.5% { background-image: url('new刷脸成功/1 (43).png'); }
    89.58% { background-image: url('new刷脸成功/1 (44).png'); }
    91.67% { background-image: url('new刷脸成功/1 (45).png'); }
    93.75% { background-image: url('new刷脸成功/1 (46).png'); }
    95.83% { background-image: url('new刷脸成功/1 (47).png'); }
    97.92% { background-image: url('new刷脸成功/1 (48).png'); }
    100% { background-image: url('new刷脸成功/1 (1).png'); }
}

/* 已扣1序列帧动画 - 使用所有图片 */
@keyframes paymentSuccessAnimation {
    0% { background-image: url('已扣1/frame_1_美图抠图10-04-2025.png'); }
    1.33% { background-image: url('已扣1/frame_2_美图抠图10-04-2025.png'); }
    2.67% { background-image: url('已扣1/frame_3_美图抠图10-04-2025.png'); }
    4% { background-image: url('已扣1/frame_4_美图抠图10-04-2025.png'); }
    5.33% { background-image: url('已扣1/frame_5_美图抠图10-04-2025.png'); }
    6.67% { background-image: url('已扣1/frame_6_美图抠图10-04-2025.png'); }
    8% { background-image: url('已扣1/frame_7_美图抠图10-04-2025.png'); }
    9.33% { background-image: url('已扣1/frame_8_美图抠图10-04-2025.png'); }
    10.67% { background-image: url('已扣1/frame_9_美图抠图10-04-2025.png'); }
    12% { background-image: url('已扣1/frame_10_美图抠图10-04-2025.png'); }
    13.33% { background-image: url('已扣1/frame_12_美图抠图10-04-2025.png'); }
    14.67% { background-image: url('已扣1/frame_13_美图抠图10-04-2025.png'); }
    16% { background-image: url('已扣1/frame_14_美图抠图10-04-2025.png'); }
    17.33% { background-image: url('已扣1/frame_15_美图抠图10-04-2025.png'); }
    18.67% { background-image: url('已扣1/frame_17_美图抠图20251004.png'); }
    20% { background-image: url('已扣1/frame_18_美图抠图10-04-2025.png'); }
    21.33% { background-image: url('已扣1/frame_19_美图抠图10-04-2025.png'); }
    22.67% { background-image: url('已扣1/frame_20_美图抠图10-04-2025.png'); }
    24% { background-image: url('已扣1/frame_27_美图抠图10-04-2025.png'); }
    25.33% { background-image: url('已扣1/frame_30_美图抠图10-04-2025.png'); }
    26.67% { background-image: url('已扣1/frame_39_美图抠图10-04-2025.png'); }
    28% { background-image: url('已扣1/frame_41_美图抠图10-04-2025.png'); }
    29.33% { background-image: url('已扣1/frame_43_美图抠图10-04-2025.png'); }
    30.67% { background-image: url('已扣1/frame_44_美图抠图10-04-2025.png'); }
    32% { background-image: url('已扣1/frame_45_美图抠图10-04-2025.png'); }
    33.33% { background-image: url('已扣1/frame_52_美图抠图10-04-2025.png'); }
    34.67% { background-image: url('已扣1/frame_54_美图抠图10-04-2025.png'); }
    36% { background-image: url('已扣1/frame_55_美图抠图10-04-2025_副本.png'); }
    37.33% { background-image: url('已扣1/frame_56_美图抠图20251004.png'); }
    38.67% { background-image: url('已扣1/frame_57_美图抠图20251004.png'); }
    40% { background-image: url('已扣1/frame_58_美图抠图10-04-2025.png'); }
    41.33% { background-image: url('已扣1/frame_59_美图抠图10-04-2025.png'); }
    42.67% { background-image: url('已扣1/frame_60_美图抠图10-04-2025.png'); }
    44% { background-image: url('已扣1/frame_61_美图抠图10-04-2025.png'); }
    45.33% { background-image: url('已扣1/frame_62_美图抠图10-04-2025.png'); }
    46.67% { background-image: url('已扣1/frame_63_美图抠图10-04-2025.png'); }
    48% { background-image: url('已扣1/frame_64_美图抠图10-04-2025.png'); }
    49.33% { background-image: url('已扣1/frame_65_美图抠图10-04-2025.png'); }
    50.67% { background-image: url('已扣1/frame_66_美图抠图10-04-2025.png'); }
    52% { background-image: url('已扣1/frame_67_美图抠图10-04-2025.png'); }
    53.33% { background-image: url('已扣1/frame_68_美图抠图10-04-2025.png'); }
    54.67% { background-image: url('已扣1/frame_69_美图抠图10-04-2025.png'); }
    56% { background-image: url('已扣1/frame_70_美图抠图10-04-2025.png'); }
    57.33% { background-image: url('已扣1/frame_71_美图抠图10-04-2025.png'); }
    58.67% { background-image: url('已扣1/frame_72_美图抠图10-04-2025.png'); }
    60% { background-image: url('已扣1/frame_73_美图抠图10-04-2025.png'); }
    61.33% { background-image: url('已扣1/frame_74_美图抠图10-04-2025.png'); }
    62.67% { background-image: url('已扣1/frame_75_美图抠图10-04-2025.png'); }
    64% { background-image: url('已扣1/frame_76_美图抠图10-04-2025.png'); }
    65.33% { background-image: url('已扣1/frame_77_美图抠图10-04-2025.png'); }
    66.67% { background-image: url('已扣1/frame_78_美图抠图10-04-2025.png'); }
    68% { background-image: url('已扣1/frame_79_美图抠图10-04-2025.png'); }
    69.33% { background-image: url('已扣1/frame_80_美图抠图10-04-2025.png'); }
    70.67% { background-image: url('已扣1/frame_81_美图抠图10-04-2025.png'); }
    72% { background-image: url('已扣1/frame_83_美图抠图10-04-2025.png'); }
    73.33% { background-image: url('已扣1/frame_85_美图抠图10-04-2025.png'); }
    74.67% { background-image: url('已扣1/frame_86_美图抠图10-04-2025.png'); }
    76% { background-image: url('已扣1/frame_87_美图抠图10-04-2025.png'); }
    77.33% { background-image: url('已扣1/frame_88_美图抠图10-04-2025.png'); }
    78.67% { background-image: url('已扣1/frame_89_美图抠图10-04-2025.png'); }
    80% { background-image: url('已扣1/frame_90_美图抠图10-04-2025.png'); }
    81.33% { background-image: url('已扣1/frame_91_美图抠图10-04-2025.png'); }
    82.67% { background-image: url('已扣1/frame_92_美图抠图10-04-2025.png'); }
    84% { background-image: url('已扣1/frame_93_美图抠图10-04-2025.png'); }
    85.33% { background-image: url('已扣1/frame_95_美图抠图10-04-2025.png'); }
    86.67% { background-image: url('已扣1/frame_97_美图抠图10-04-2025.png'); }
    88% { background-image: url('已扣1/frame_98_美图抠图10-04-2025.png'); }
    89.33% { background-image: url('已扣1/frame_100_美图抠图10-04-2025.png'); }
    90.67% { background-image: url('已扣1/frame_102_美图抠图10-04-2025.png'); }
    92% { background-image: url('已扣1/frame_104_美图抠图10-04-2025.png'); }
    93.33% { background-image: url('已扣1/frame_105_美图抠图10-04-2025.png'); }
    94.67% { background-image: url('已扣1/frame_108_美图抠图10-04-2025.png'); }
    96% { background-image: url('已扣1/frame_109_美图抠图10-04-2025.png'); }
    97.33% { background-image: url('已扣1/frame_110_美图抠图10-04-2025.png'); }
    98.67% { background-image: url('已扣1/frame_111_美图抠图10-04-2025.png'); }
    100% { background-image: url('已扣1/frame_1_美图抠图10-04-2025.png'); }
}

/* 刷卡岛重塑序列帧动画 - 使用所有图片 */
@keyframes cardIslandAnimation {
    0% { background-image: url('刷卡岛重塑/frame_4_副本.png'); }
    1.67% { background-image: url('刷卡岛重塑/frame_5_副本.png'); }
    3.33% { background-image: url('刷卡岛重塑/frame_6_副本.png'); }
    5% { background-image: url('刷卡岛重塑/frame_7_副本.png'); }
    6.67% { background-image: url('刷卡岛重塑/frame_8_副本.png'); }
    8.33% { background-image: url('刷卡岛重塑/frame_9_副本.png'); }
    10% { background-image: url('刷卡岛重塑/frame_11_副本.png'); }
    11.67% { background-image: url('刷卡岛重塑/frame_12_副本.png'); }
    13.33% { background-image: url('刷卡岛重塑/frame_13_副本.png'); }
    15% { background-image: url('刷卡岛重塑/frame_14_副本.png'); }
    16.67% { background-image: url('刷卡岛重塑/frame_15_副本.png'); }
    18.33% { background-image: url('刷卡岛重塑/frame_16_副本.png'); }
    20% { background-image: url('刷卡岛重塑/frame_17_副本.png'); }
    21.67% { background-image: url('刷卡岛重塑/frame_18_副本.png'); }
    23.33% { background-image: url('刷卡岛重塑/frame_19_副本.png'); }
    25% { background-image: url('刷卡岛重塑/frame_20_副本.png'); }
    26.67% { background-image: url('刷卡岛重塑/frame_21_副本.png'); }
    28.33% { background-image: url('刷卡岛重塑/frame_22_副本.png'); }
    30% { background-image: url('刷卡岛重塑/frame_23_副本.png'); }
    31.67% { background-image: url('刷卡岛重塑/frame_24_副本.png'); }
    33.33% { background-image: url('刷卡岛重塑/frame_25_副本.png'); }
    35% { background-image: url('刷卡岛重塑/frame_26_副本.png'); }
    36.67% { background-image: url('刷卡岛重塑/frame_27_副本.png'); }
    38.33% { background-image: url('刷卡岛重塑/frame_28_副本.png'); }
    40% { background-image: url('刷卡岛重塑/frame_29_副本.png'); }
    41.67% { background-image: url('刷卡岛重塑/frame_30_副本.png'); }
    43.33% { background-image: url('刷卡岛重塑/frame_31_副本.png'); }
    45% { background-image: url('刷卡岛重塑/frame_32_副本.png'); }
    46.67% { background-image: url('刷卡岛重塑/frame_33_副本.png'); }
    48.33% { background-image: url('刷卡岛重塑/frame_34_副本.png'); }
    50% { background-image: url('刷卡岛重塑/frame_35_副本.png'); }
    51.67% { background-image: url('刷卡岛重塑/frame_36_副本.png'); }
    53.33% { background-image: url('刷卡岛重塑/frame_37_副本.png'); }
    55% { background-image: url('刷卡岛重塑/frame_38_副本.png'); }
    56.67% { background-image: url('刷卡岛重塑/frame_39_副本.png'); }
    58.33% { background-image: url('刷卡岛重塑/frame_40_副本.png'); }
    60% { background-image: url('刷卡岛重塑/frame_41_副本.png'); }
    61.67% { background-image: url('刷卡岛重塑/frame_42_副本.png'); }
    63.33% { background-image: url('刷卡岛重塑/frame_43_副本.png'); }
    65% { background-image: url('刷卡岛重塑/frame_44_副本.png'); }
    66.67% { background-image: url('刷卡岛重塑/frame_45_副本.png'); }
    68.33% { background-image: url('刷卡岛重塑/frame_46_副本.png'); }
    70% { background-image: url('刷卡岛重塑/frame_47_副本.png'); }
    71.67% { background-image: url('刷卡岛重塑/frame_48_副本.png'); }
    73.33% { background-image: url('刷卡岛重塑/frame_49_副本.png'); }
    75% { background-image: url('刷卡岛重塑/frame_50_副本.png'); }
    76.67% { background-image: url('刷卡岛重塑/frame_51_副本.png'); }
    78.33% { background-image: url('刷卡岛重塑/frame_52_副本.png'); }
    80% { background-image: url('刷卡岛重塑/frame_53_副本.png'); }
    81.67% { background-image: url('刷卡岛重塑/frame_54_副本.png'); }
    83.33% { background-image: url('刷卡岛重塑/frame_55_副本.png'); }
    85% { background-image: url('刷卡岛重塑/frame_56_副本.png'); }
    86.67% { background-image: url('刷卡岛重塑/frame_57_副本.png'); }
    88.33% { background-image: url('刷卡岛重塑/frame_58_副本.png'); }
    90% { background-image: url('刷卡岛重塑/frame_59_副本.png'); }
    91.67% { background-image: url('刷卡岛重塑/frame_60_副本.png'); }
    93.33% { background-image: url('刷卡岛重塑/frame_61_副本.png'); }
    95% { background-image: url('刷卡岛重塑/frame_62_副本.png'); }
    96.67% { background-image: url('刷卡岛重塑/frame_4_副本.png'); }
    100% { background-image: url('刷卡岛重塑/frame_4_副本.png'); }
}

/* 隐藏图片路径 - 防止在F12中暴露 */
@media print {
    .face-recognition, .payment-success, .card-island {
        background-image: none !important;
    }
}

/* 禁用选择和拖拽 */
* {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

img {
    -webkit-user-drag: none;
    user-drag: none;
}

.animation-info {
    flex: 1;
    min-width: 300px;
    text-align: left;
}

.animation-info h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #333;
}

.animation-info p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

/* 联系我们 */
.contact {
    padding: 100px 0;
    background-color: #fff;
    text-align: center;
}

.contact-info {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.contact-item {
    background-color: #f5f5f5;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    flex: 1;
    min-width: 250px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.contact-item h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #333;
}

.contact-item p {
    font-size: 16px;
    color: #666;
}

.contact-item a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-item a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.contact-message {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.contact-message p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

/* 页脚 */
.footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 30px 0;
}

.footer p {
    margin: 0;
}

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

.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 30px;
    border-radius: 8px;
    width: 80%;
    max-width: 600px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover {
    color: #333;
}

.modal-content h3 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

.modal-content p {
    margin-bottom: 15px;
    color: #666;
    line-height: 1.6;
}

.modal-content a {
    color: #007bff;
    text-decoration: none;
}

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

/* 响应式设计 */
@media (max-width: 768px) {
    .navbar .container {
        flex-direction: column;
    }

    .nav-links {
        margin-top: 15px;
    }

    .nav-links li {
        margin-left: 15px;
        margin-right: 15px;
    }

    .hero h1 {
        font-size: 36px;
    }

    .services {
        flex-direction: column;
        align-items: center;
    }

    .service-item {
        margin: 10px 0;
        width: 90%;
    }

    .project-cards {
        flex-direction: column;
        align-items: center;
    }

    .project-card {
        width: 90%;
        max-width: none;
    }

    .advantages h2,
    .projects h2,
    .contact h2 {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 80px 0;
    }

    .hero h1 {
        font-size: 28px;
    }

    .service-item,
    .project-card,
    .advantage-item {
        padding: 20px;
    }

    .modal-content {
        width: 90%;
        margin: 20% auto;
    }
}