/* 未能缩小。正在返回未缩小的内容。 (1186,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1199,39): run-time error CSS1039: Token not allowed after unary operator: '-scroll-dist' (1202,39): run-time error CSS1039: Token not allowed after unary operator: '-scroll-dist' (1973,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1974,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1975,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1976,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1977,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1978,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1979,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1980,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1981,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1982,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1983,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1984,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1985,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1986,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1987,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1988,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1989,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1990,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1991,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1992,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1993,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1995,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1996,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1997,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1998,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1999,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2000,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2001,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2002,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2003,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2004,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2005,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2006,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2007,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2008,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2009,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2010,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2011,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2012,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2013,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2014,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2015,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2016,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2030,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family' (2060,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface' (2061,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family' (2062,22): run-time error CSS1039: Token not allowed after unary operator: '-navbar-height' (2063,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (2081,21): run-time error CSS1039: Token not allowed after unary operator: '-max-width' (2108,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (2111,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (2147,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light' (2155,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (2162,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (2168,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (2351,19): run-time error CSS1039: Token not allowed after unary operator: '-spacing-2xl' (2355,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (2359,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface' (2364,17): run-time error CSS1039: Token not allowed after unary operator: '-color-on-dark' (2377,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (2386,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (2392,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (2417,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface' (2418,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2420,28): run-time error CSS1039: Token not allowed after unary operator: '-color-muted' (2421,35): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2431,57): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (2437,34): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-soft' (2445,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light' (2450,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2454,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-soft' (2466,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (2472,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (2485,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (2491,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast' (2497,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (2502,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-hover' (2504,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-accent' (2518,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (2523,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light' (2524,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (2525,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (2531,17): run-time error CSS1039: Token not allowed after unary operator: '-color-on-dark' (2537,24): run-time error CSS1039: Token not allowed after unary operator: '-color-on-dark' (2538,17): run-time error CSS1039: Token not allowed after unary operator: '-color-on-dark' (2550,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (2555,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light' (2568,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary' (2576,28): run-time error CSS1039: Token not allowed after unary operator: '-color-muted' (2577,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (2579,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (2580,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface' (2581,35): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast' (2582,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family' (2586,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (2588,32): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light' (2618,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (2619,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (2628,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (2635,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light' (2649,35): run-time error CSS1039: Token not allowed after unary operator: '-color-muted' (2660,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (2661,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast' (2665,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (2671,32): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2678,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (2684,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2689,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary' (2707,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (2730,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (2746,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface' (2747,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border' (2748,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2753,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast' (2756,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (2757,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-soft' (2762,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (2767,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (2774,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light' (2775,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2802,14): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (2803,14): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (2804,14): run-time error CSS1039: Token not allowed after unary operator: '-color-muted' (2805,14): run-time error CSS1039: Token not allowed after unary operator: '-color-muted' (2827,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (2840,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface' (2841,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border' (2843,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2848,29): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (2849,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light' (2854,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (2859,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (2873,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (2875,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (2889,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface' (2890,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border' (2891,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2894,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast' (2897,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (2903,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (2914,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (2929,35): run-time error CSS1039: Token not allowed after unary operator: '-color-muted' (2939,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (2947,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (2953,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (2963,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light' (2965,21): run-time error CSS1039: Token not allowed after unary operator: '-max-width' (2972,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (2974,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast' (2978,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (2987,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (2998,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface' (2999,28): run-time error CSS1039: Token not allowed after unary operator: '-color-muted' (3002,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary' (3009,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (3010,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (3017,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (3020,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (3024,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (3039,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface' (3040,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (3042,28): run-time error CSS1039: Token not allowed after unary operator: '-color-muted' (3048,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (3075,17): run-time error CSS1039: Token not allowed after unary operator: '-color-on-dark' (3087,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (3093,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (3104,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (3113,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (3142,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light' (3151,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (3157,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (3168,28): run-time error CSS1039: Token not allowed after unary operator: '-color-muted' (3169,28): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (3170,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (3184,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface' (3196,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (3199,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (3200,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (3203,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast' (3209,22): run-time error CSS1039: Token not allowed after unary operator: '-color-muted' (3210,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (3215,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (3217,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (3229,46): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (3229,63): run-time error CSS1039: Token not allowed after unary operator: '-color-surface' (3232,28): run-time error CSS1039: Token not allowed after unary operator: '-color-muted' (3238,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (3244,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (3264,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface' (3265,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (3267,28): run-time error CSS1039: Token not allowed after unary operator: '-color-muted' (3268,35): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (3271,39): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (3283,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (3306,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm' (3316,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (3323,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (3350,28): run-time error CSS1039: Token not allowed after unary operator: '-color-muted' (3351,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (3353,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (3354,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast' (3359,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (3361,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (3366,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (3368,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (3386,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface' (3387,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (3389,28): run-time error CSS1039: Token not allowed after unary operator: '-color-muted' (3390,35): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (3390,72): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (3390,108): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (3394,42): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-soft' (3421,32): run-time error CSS1039: Token not allowed after unary operator: '-transition-slow' (3438,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (3456,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (3463,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary' (3482,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (3484,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (3499,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (3500,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast' (3505,37): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (3516,32): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast' (3519,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (3722,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (3723,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light' (3847,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (3871,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (3892,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (3954,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (3955,31): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (3987,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (4033,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (4042,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-hover' */ [data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,transform}[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;transform:translateZ(0)}[data-aos=fade-up]{transform:translate3d(0,100px,0)}[data-aos=fade-down]{transform:translate3d(0,-100px,0)}[data-aos=fade-right]{transform:translate3d(-100px,0,0)}[data-aos=fade-left]{transform:translate3d(100px,0,0)}[data-aos=fade-up-right]{transform:translate3d(-100px,100px,0)}[data-aos=fade-up-left]{transform:translate3d(100px,100px,0)}[data-aos=fade-down-right]{transform:translate3d(-100px,-100px,0)}[data-aos=fade-down-left]{transform:translate3d(100px,-100px,0)}[data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,transform}[data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;transform:translateZ(0) scale(1)}[data-aos=zoom-in]{transform:scale(.6)}[data-aos=zoom-in-up]{transform:translate3d(0,100px,0) scale(.6)}[data-aos=zoom-in-down]{transform:translate3d(0,-100px,0) scale(.6)}[data-aos=zoom-in-right]{transform:translate3d(-100px,0,0) scale(.6)}[data-aos=zoom-in-left]{transform:translate3d(100px,0,0) scale(.6)}[data-aos=zoom-out]{transform:scale(1.2)}[data-aos=zoom-out-up]{transform:translate3d(0,100px,0) scale(1.2)}[data-aos=zoom-out-down]{transform:translate3d(0,-100px,0) scale(1.2)}[data-aos=zoom-out-right]{transform:translate3d(-100px,0,0) scale(1.2)}[data-aos=zoom-out-left]{transform:translate3d(100px,0,0) scale(1.2)}[data-aos^=slide][data-aos^=slide]{transition-property:transform}[data-aos^=slide][data-aos^=slide].aos-animate{transform:translateZ(0)}[data-aos=slide-up]{transform:translate3d(0,100%,0)}[data-aos=slide-down]{transform:translate3d(0,-100%,0)}[data-aos=slide-right]{transform:translate3d(-100%,0,0)}[data-aos=slide-left]{transform:translate3d(100%,0,0)}[data-aos^=flip][data-aos^=flip]{backface-visibility:hidden;transition-property:transform}[data-aos=flip-left]{transform:perspective(2500px) rotateY(-100deg)}[data-aos=flip-left].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-right]{transform:perspective(2500px) rotateY(100deg)}[data-aos=flip-right].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-up]{transform:perspective(2500px) rotateX(-100deg)}[data-aos=flip-up].aos-animate{transform:perspective(2500px) rotateX(0)}[data-aos=flip-down]{transform:perspective(2500px) rotateX(100deg)}[data-aos=flip-down].aos-animate{transform:perspective(2500px) rotateX(0)} /* ============================================= 禄存科技 B2B 精密仪器官网 - 设计系统 v2 配色: 精密橙 #d4552b / 深空黑 #0d0d0d / slate灰过渡 ============================================= */ /* ===== 全局重置 ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 400; color: #1a1a1a; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #ffffff; } a { text-decoration: none; color: inherit; } img { max-width: 100%; height: auto; display: block; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* ===== 导航栏 ===== */ .navbar { position: fixed; top: 0; left: 0; width: 100%; /* 使用高不透明度纯色替代 backdrop-filter:blur — 消除每帧 GPU 重采样，滚动性能提升最大 */ background: rgba(255,255,255,0.97); border-bottom: 1px solid rgba(0,0,0,0.06); z-index: 1000; box-shadow: 0 1px 4px rgba(0,0,0,0.04); transform: translateZ(0); /* 独立合成层，避免滚动时与其他元素一起重绘 */ } .nav-container { max-width: 1400px; margin: 0 auto; padding: 0 40px; height: 70px; display: flex; align-items: center; justify-content: space-between; } .logo { display: flex; align-items: center; height: 100%; } .logo img { height: 44px; width: auto; display: block; } .nav-menu { display: flex; gap: 36px; } .nav-link { font-size: 14px; font-weight: 500; color: #444; transition: color 0.2s; position: relative; padding-bottom: 4px; } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #d4552b; transition: width 0.25s; } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-link:hover, .nav-link.active { color: #d4552b; } .nav-cta { padding: 8px 20px; background: #d4552b; color: white; border-radius: 4px; font-size: 13px; font-weight: 500; transition: background 0.2s, transform 0.2s; } .nav-cta:hover { background: #b0421f; } .mobile-btn { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; } .mobile-btn span { width: 22px; height: 2px; background: #1a1a1a; transition: all 0.2s; } /* 移动端菜单展开状态 */ .nav-menu-open { display: flex !important; flex-direction: column; position: absolute; top: 70px; left: 0; width: 100%; background: rgba(255,255,255,0.98); padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } /* ===== 通用按钮 ===== */ .btn-primary { display: inline-block; padding: 12px 32px; background: #d4552b; color: white; border-radius: 4px; font-size: 14px; font-weight: 500; transition: all 0.2s; cursor: pointer; letter-spacing: 0.5px; } .btn-primary:hover { background: #b0421f; } .btn-outline { display: inline-block; padding: 12px 32px; border: 1px solid #1a1a1a; color: #1a1a1a; border-radius: 4px; font-size: 14px; font-weight: 500; transition: all 0.2s; } .btn-outline:hover { background: #1a1a1a; color: white; } .btn-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #d4552b; transition: gap 0.2s; } .btn-link:hover { gap: 12px; } .btn-large { padding: 14px 40px; font-size: 16px; } .section-footer { text-align: center; margin-top: 28px; } .btn-view-all { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: #d4552b; transition: all 0.2s; padding: 10px 28px; border: 1px solid rgba(212,85,43,0.3); border-radius: 4px; } .btn-view-all:hover { background: #d4552b; color: white; border-color: #d4552b; } /* ===== 通用标签与标题 ===== */ .section-tag { display: inline-block; font-size: 13px; font-weight: 600; color: #d4552b; letter-spacing: 2px; margin-bottom: 12px; text-transform: uppercase; } .section-title { font-size: 36px; font-weight: 600; color: #1a1a1a; margin-bottom: 10px; letter-spacing: -0.5px; } /* ===== Banner 轮播 ===== */ .banner-section { margin-top: 70px; position: relative; width: 100%; height: 88vh; min-height: 520px; } .banner-swiper { width: 100%; height: 100%; overflow: hidden; transform: translateZ(0); /* GPU 合成层，减少 Swiper 切换时的重绘开销 */ } .banner-swiper .swiper-slide { position: relative; display: flex; align-items: center; } /* 全幅背景图 */ .banner-slide-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; } /* 左侧渐变支撑 — 确保白字在任何背景图上可读，右侧透明保留原图 */ .banner-slide-bg::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( to right, rgba(28, 24, 21, 0.45) 0%, rgba(28, 24, 21, 0.20) 30%, rgba(28, 24, 21, 0.05) 50%, transparent 65% ); } .banner-content { position: relative; z-index: 5; max-width: 1200px; margin: 0 auto; padding: 0 60px; color: white; width: 100%; } .banner-content .banner-tag { display: inline-block; padding: 5px 16px; background: rgba(212,85,43,0.2); border: 1px solid rgba(212,85,43,0.5); color: #fca88b; font-size: 12px; font-weight: 500; letter-spacing: 3px; margin-bottom: 28px; border-radius: 3px; } .banner-content h2 { font-size: 52px; font-weight: 700; line-height: 1.15; margin-bottom: 20px; color: #fff; letter-spacing: 0; text-shadow: 0 2px 16px rgba(0,0,0,0.6); max-width: 640px; } .banner-content p { font-size: 16px; color: rgba(255,255,255,0.75); margin-bottom: 36px; line-height: 1.8; max-width: 520px; text-shadow: 0 1px 8px rgba(0,0,0,0.4); } .banner-btns { display: flex; gap: 16px; align-items: center; } .btn-banner-primary { display: inline-block; padding: 14px 38px; background: #d4552b; color: white; border-radius: 4px; font-size: 15px; font-weight: 500; transition: all 0.2s; letter-spacing: 0.5px; box-shadow: 0 4px 16px rgba(212,85,43,0.3); } .btn-banner-primary:hover { background: #b0421f; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(212,85,43,0.4); } .btn-banner-outline { display: inline-block; padding: 14px 38px; border: 1px solid rgba(255,255,255,0.4); color: white; border-radius: 4px; font-size: 15px; font-weight: 500; transition: all 0.2s; letter-spacing: 0.5px; } .btn-banner-outline:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.7); } .banner-swiper .swiper-pagination-bullet { width: 10px; height: 10px; background: white; opacity: 0.35; } .banner-swiper .swiper-pagination-bullet-active { opacity: 1; background: #d4552b; } /* === Prev/Next — 深色圆底+白箭头，浅深背景均清晰可见 === */ .banner-swiper .swiper-button-next, .banner-swiper .swiper-button-prev { width: 50px !important; height: 50px !important; margin-top: -25px !important; left: auto !important; right: auto !important; background: rgba(0, 0, 0, 0.35) !important; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; color: #fff; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .banner-swiper .swiper-button-prev { left: 24px !important; } .banner-swiper .swiper-button-next { right: 24px !important; } /* 暴力覆盖 Swiper 默认 :after 文字 — 双保险单双冒号 */ .banner-swiper .swiper-button-next:after, .banner-swiper .swiper-button-prev:after, .banner-swiper .swiper-button-next::after, .banner-swiper .swiper-button-prev::after { content: "" !important; font-family: inherit !important; font-size: 0 !important; display: none !important; opacity: 0 !important; visibility: hidden !important; } .banner-swiper .swiper-button-next:hover, .banner-swiper .swiper-button-prev:hover { background: #d4552b !important; border-color: #d4552b; box-shadow: 0 4px 20px rgba(212,85,43,0.4); transform: scale(1.08); } .banner-swiper .swiper-button-next:active, .banner-swiper .swiper-button-prev:active { transform: scale(0.95); } /* ===== 滚动提示动画 ===== */ .scroll-indicator { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); z-index: 10; } .scroll-mouse { width: 26px; height: 42px; border: 2px solid rgba(0, 0, 0, 0.35); border-radius: 14px; display: flex; justify-content: center; padding-top: 8px; } .scroll-wheel { width: 3px; height: 8px; background: rgba(0, 0, 0, 0.55); border-radius: 2px; animation: scrollWheel 1.6s ease-in-out infinite; } @keyframes scrollWheel { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(8px); opacity: 0.2; } 100% { transform: translateY(0); opacity: 1; } } /* ===== 理念区域 ===== */ .philosophy { background: #ffffff; padding: 80px 0; } .philosophy-header { text-align: center; margin-bottom: 60px; padding: 0 20px; } .philosophy-header h2 { font-size: 36px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px; letter-spacing: 1px; } .philosophy-header p { font-size: 16px; color: #666; } .philosophy-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .philosophy-item { background: #f8f9fb; border-radius: 8px; padding: 40px 30px; transition: border-color 0.3s, background 0.3s; text-align: center; border: 1px solid transparent; } .philosophy-item:hover { border-color: #d4552b; background: #fff; } .philosophy-icon { width: 64px; height: 64px; margin: 0 auto 20px; background: rgba(212,85,43,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; } .philosophy-item h3 { font-size: 22px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px; } .philosophy-item p { font-size: 14px; color: #666; line-height: 1.7; } /* ===== 产品区域 - Bento 非对称网格重设计 ===== */ .products { padding: 100px 0 80px; background: #fafafa; } .products-header { text-align: center; margin-bottom: 48px; } .products-header .section-title { font-size: 38px; font-weight: 600; color: #1a1a1a; margin-bottom: 10px; } .products-header p { font-size: 16px; color: #6b7280; max-width: 500px; margin: 0 auto; } /* Bento 网格: 2fr+1fr+1fr，第一张主力卡片跨双行 */ .product-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 20px; max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* 主力产品卡片跨双行 */ .product-card:first-child { grid-row: span 2; } .product-card:first-child .product-card-info h4 { font-size: 20px; } .product-card:first-child .product-card-info p { font-size: 14px; } .product-card { background: #ffffff; border-radius: 12px; overflow: hidden; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid #e8eaef; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,0.04); contain: layout style paint; transform: translateZ(0); backface-visibility: hidden; position: relative; } /* 主力产品: 左侧橙色装饰条 + 更深的阴影 */ .product-card:first-child::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: #d4552b; border-radius: 0 2px 2px 0; z-index: 2; } /* 普通卡片: 顶部hover出现细线 */ .product-card:not(:first-child)::before { content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 2px; background: transparent; transition: background 0.3s; } .product-card:not(:first-child):hover::before { background: rgba(212,85,43,0.4); } .product-card:hover { border-color: rgba(212,85,43,0.25); box-shadow: 0 12px 40px rgba(0,0,0,0.08); transform: translateY(-4px); } .product-card-image { width: 100%; background: #f4f5f8; padding: 16px; display: flex; align-items: center; justify-content: center; aspect-ratio: 16/10; overflow: hidden; contain: layout style; } .product-card:first-child .product-card-image { aspect-ratio: 16/9; padding: 24px; } .product-card-image img { max-width: 92%; max-height: 92%; object-fit: contain; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); image-rendering: auto; } .product-card:hover .product-card-image img { transform: scale(1.06); } .product-card-info { padding: 16px 14px 20px; } .product-card-info h4 { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 6px; } .product-card-info p { font-size: 13px; color: #888; line-height: 1.5; margin: 0; } /* ===== 关于我们全屏区 ===== */ .about-hero { position: relative; height: 70vh; min-height: 560px; max-height: 800px; background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: scroll; display: flex; align-items: center; } .about-hero::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background: rgba(13,13,13,0.45); pointer-events: none; } .about-hero-content { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; padding: 0 40px; color: white; text-align: center; } .about-hero-content .section-tag { color: #fca88b; font-size: 13px; letter-spacing: 3px; font-weight: 600; margin-bottom: 16px; display: inline-block; } .about-hero-content h2 { font-size: 40px; font-weight: 600; margin-bottom: 24px; letter-spacing: -0.5px; color: #fff; } .about-hero-content .about-desc { font-size: 16px; color: rgba(255,255,255,0.78); line-height: 1.85; max-width: 680px; margin: 0 auto 40px; } .about-stats { display: flex; gap: 0; justify-content: center; align-items: center; } .about-stat-item { text-align: center; min-width: 160px; flex-shrink: 0; } .about-stat-num { display: block; font-size: 44px; font-weight: 700; margin-bottom: 4px; } .about-stat-label { font-size: 13px; color: rgba(255,255,255,0.85); letter-spacing: 1px; } .about-stat-divider { width: 1px; height: 60px; background: rgba(255,255,255,0.12); margin: 0 30px; flex-shrink: 0; } .about-cta-wrap { margin-top: 44px; } .about-cta-wrap .btn-banner-outline { display: inline-block; padding: 14px 40px; border: 1px solid rgba(255,255,255,0.35); color: white; border-radius: 4px; font-size: 15px; font-weight: 500; transition: all 0.25s; letter-spacing: 0.5px; text-decoration: none; background: rgba(255,255,255,0.04); } .about-cta-wrap .btn-banner-outline:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.6); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); } /* ===== 应用领域 ===== */ .cases { padding: 100px 0; background: #ffffff; } .cases-header { text-align: center; margin-bottom: 56px; } .cases-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 24px; } .cases-text h3 { font-size: 28px; font-weight: 600; color: #1a1a1a; margin-bottom: 16px; } .cases-text p { font-size: 15px; color: #555; line-height: 1.85; margin-bottom: 30px; } .cases-text ul { list-style: none; } .cases-text ul li { font-size: 14px; color: #444; padding: 12px 0 12px 24px; position: relative; border-bottom: 1px solid #f0f0f0; transition: all 0.2s; } .cases-text ul li:last-child { border-bottom: none; } .cases-text ul li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: #d4552b; border-radius: 50%; } .cases-images { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 380px; } .cases-img-item { border-radius: 8px; overflow: hidden; position: relative; } .cases-img-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } .cases-img-item:hover img { transform: scale(1.05); } .cases-img-label { position: absolute; bottom: 12px; left: 12px; background: rgba(28,24,21,0.85); color: white; padding: 5px 14px; border-radius: 4px; font-size: 13px; z-index: 2; } /* ===== 核心优势 ===== */ .advantages { padding: 100px 0; background: #f0f2f5; } .advantages-header { text-align: center; margin-bottom: 56px; padding: 0 20px; } .advantages-header p { font-size: 15px; color: #6b7280; margin-top: 8px; } .advantages-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 960px; margin: 0 auto; padding: 0 24px; } .advantage-card { background: white; border-radius: 14px; padding: 44px 40px; text-align: left; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid #e8eaef; position: relative; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.03); } .advantage-card:hover { border-color: rgba(212,85,43,0.25); box-shadow: 0 12px 36px rgba(0,0,0,0.07); transform: translateY(-4px); } .advantage-icon { width: 52px; height: 52px; margin: 0 0 20px 0; background: rgba(212,85,43,0.07); border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: background 0.3s; } .advantage-icon svg { width: 30px; height: 30px; flex-shrink: 0; } .advantage-card:hover .advantage-icon { background: rgba(212,85,43,0.12); } .advantage-card h4 { font-size: 18px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; } .advantage-card p { font-size: 14px; color: #777; line-height: 1.7; max-width: 360px; } @media (max-width: 768px) { .advantages-grid { grid-template-columns: 1fr; } .advantage-card { padding: 36px 28px; } } /* ===== 为什么选择禄存 ===== */ .why-us { padding: 100px 0; background: #ffffff; } .why-us-header { text-align: center; margin-bottom: 56px; } .why-us-header p { font-size: 15px; color: #6b7280; margin-top: 8px; } .why-us-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; max-width: 1000px; margin: 0 auto; padding: 0 24px; border: 1px solid #e8eaef; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.03); } .why-us-item { padding: 45px 48px; transition: all 0.3s; position: relative; background: #fff; display: flex; gap: 20px; align-items: flex-start; border-right: 1px solid #e8eaef; border-bottom: 1px solid #e8eaef; } .why-us-item:nth-child(2n) { border-right: none; } .why-us-item:nth-child(3), .why-us-item:nth-child(4) { border-bottom: none; } .why-us-item:hover { background: #fafbfc; } .why-us-item:hover .why-us-icon-wrap { background: rgba(212,85,43,0.1); transform: scale(1.05); } .why-us-icon-wrap { width: 52px; height: 52px; min-width: 52px; background: rgba(212,85,43,0.06); border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: all 0.3s; } .why-us-icon-wrap svg { width: 26px; height: 26px; } .why-us-body h4 { font-size: 17px; font-weight: 600; color: #1a1a1a; margin-bottom: 6px; } .why-us-body p { font-size: 14px; color: #777; line-height: 1.7; margin: 0; } .why-us-body .why-us-highlight { display: inline-block; font-size: 13px; font-weight: 600; color: #d4552b; margin-bottom: 4px; letter-spacing: 0.5px; } /* ===== 新闻区域 ===== */ .news { padding: 100px 0; background: #f0f2f5; } .news-header { text-align: center; margin-bottom: 56px; } .news-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1200px; margin: 0 auto; padding: 0 24px; } .news-featured { border-radius: 12px; overflow: hidden; position: relative; height: 380px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); } .news-featured img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } .news-featured:hover img { transform: scale(1.03); } .news-featured-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 30px; background: linear-gradient(to top, rgba(13,13,13,0.9), transparent); color: white; } .news-featured-tag { display: inline-block; padding: 4px 12px; background: #d4552b; border-radius: 3px; font-size: 12px; margin-bottom: 10px; } .news-featured-content h3 { font-size: 20px; font-weight: 600; margin-bottom: 6px; } .news-featured-date { font-size: 12px; color: rgba(255,255,255,0.55); } .news-list { display: flex; flex-direction: column; gap: 0; } .news-item { padding: 22px 0; border-bottom: 1px solid #e0e4ea; transition: all 0.2s; cursor: pointer; } .news-item:last-child { border-bottom: none; } .news-item:hover { padding-left: 12px; } .news-item:hover h3 { color: #d4552b; } .news-item-date { font-size: 12px; color: #d4552b; font-weight: 500; display: block; margin-bottom: 6px; } .news-item h3 { font-size: 16px; font-weight: 500; color: #333; margin-bottom: 4px; transition: color 0.2s; } .news-item p { font-size: 13px; color: #999; } /* ===== CTA 区域 ===== */ .cta { background: #0d0d0d; color: white; border-bottom: 1px solid rgba(255,255,255,0.08); } .cta-split { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; } .cta-left { padding: 80px 60px; } .cta-tag { font-size: 12px; letter-spacing: 3px; color: #fca88b; margin-bottom: 12px; display: block; font-weight: 500; } .cta-title { font-size: 38px; font-weight: 600; margin-bottom: 16px; letter-spacing: -0.5px; line-height: 1.2; } .cta-accent { color: #fca88b; } .cta-text { font-size: 15px; color: rgba(255,255,255,0.55); margin-bottom: 32px; max-width: 440px; } .cta-right { background: #111; border-left: 1px solid rgba(255,255,255,0.06); padding: 80px 60px; display: flex; align-items: center; } .cta-contact { display: flex; flex-direction: column; gap: 16px; } .cta-contact-label { font-size: 11px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 2px; } .cta-phone { font-size: 30px; font-weight: 600; color: white; margin-bottom: 24px; transition: color 0.2s; } .cta-phone:hover { color: #fca88b; } .cta-email { font-size: 18px; color: rgba(255,255,255,0.55); transition: color 0.2s; } .cta-email:hover { color: #fca88b; } /* ===== 页脚 ===== */ .footer { padding: 60px 0 30px; background: #080808; color: rgba(255,255,255,0.55); font-size: 14px; } /* ===== 荣誉客户 ===== */ .partners { padding: 80px 0; background: #ffffff; } .honor-carousel { height: 365px; overflow: hidden; } .honor-carousel-wrap { width: 100%; overflow: hidden; background: #fff; } .honor-row { width: 100%; overflow: hidden; margin-bottom: 15px; } .honor-row:last-child { margin-bottom: 0; } .honor-row ul { display: flex; gap: 0; list-style: none; padding: 0; margin: 0; will-change: transform; --scroll-dist: -800px; /* 兜底值，JS 会在加载后更新 */ width: max-content; } /* 第一行：向左滚动 */ .honor-row:nth-child(1) ul { animation: honorBounce1 18s ease-in-out infinite alternate both; } /* 第二行：向右滚动（反向） */ .honor-row:nth-child(2) ul { animation: honorBounce2 18s ease-in-out infinite alternate both; } @keyframes honorBounce1 { from { transform: translateX(0); } to { transform: translateX(var(--scroll-dist)); } } @keyframes honorBounce2 { from { transform: translateX(var(--scroll-dist)); } to { transform: translateX(0); } } .honor-row li { flex: 0 0 auto; width: 180px; background: transparent; padding: 8px; } .client-logo { width: 100%; height: 100px; background: transparent; display: flex; align-items: center; justify-content: center; overflow: hidden; } .client-logo img { max-width: 90%; max-height: 90%; width: auto; height: auto; object-fit: contain; display: block; transition: all 0.2s; filter: grayscale(100%); opacity: 0.7; } .client-logo img:hover { opacity: 1; filter: grayscale(0%); } /* ===== CTA 区域 ===== */ .cta { background: #1a1a1a; color: white; border-bottom: 1px solid rgba(255,255,255,0.10); } .cta-split { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; } .cta-left { padding: 80px 60px; } .cta-tag { font-size: 12px; letter-spacing: 3px; color: #fca88b; margin-bottom: 12px; display: block; font-weight: 500; } .cta-title { font-size: 36px; font-weight: 600; margin-bottom: 16px; letter-spacing: 1px; } .cta-accent { color: #fca88b; } .cta-text { font-size: 15px; color: rgba(255,255,255,0.65); margin-bottom: 30px; } .cta-right { background: #1a1a1a; border-left: 1px solid rgba(255,255,255,0.08); padding: 80px 60px; display: flex; align-items: center; } .cta-contact { display: flex; flex-direction: column; gap: 16px; } .cta-contact-label { font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 2px; } .cta-phone { font-size: 30px; font-weight: 600; color: white; margin-bottom: 24px; transition: color 0.2s; } .cta-phone:hover { color: #fca88b; } .cta-email { font-size: 18px; color: rgba(255,255,255,0.65); transition: color 0.2s; } .cta-email:hover { color: #fca88b; } /* ===== 页脚 ===== */ .footer { padding: 60px 0 30px; background: #141210; color: rgba(255,255,255,0.65); font-size: 14px; } .footer-main { display: flex; justify-content: space-between; margin-bottom: 40px; flex-wrap: wrap; gap: 40px; } .footer-brand { max-width: 400px; } .footer-logo { font-size: 24px; font-weight: 700; letter-spacing: 3px; margin-bottom: 14px; color: white; } .footer-brand p { font-size: 13px; color: rgba(255,255,255,0.4); line-height: 1.8; margin-bottom: 16px; } .footer-brand .footer-address, .footer-brand .footer-phone, .footer-brand .footer-email { font-size: 13px; color: rgba(255,255,255,0.4); margin-bottom: 5px; display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; } .footer-icon { flex-shrink: 0; width: 18px; text-align: center; } .footer-nav { display: flex; gap: 60px; } .footer-col { display: flex; flex-direction: column; gap: 10px; } .footer-col h4 { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: white; } .footer-col a { font-size: 13px; color: rgba(255,255,255,0.4); transition: color 0.2s; } .footer-col a:hover { color: #fca88b; } .footer-bottom { padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.3); } .footer-links { display: flex; gap: 20px; } .footer-links a { color: rgba(255,255,255,0.3); transition: color 0.2s; } .footer-links a:hover { color: #fca88b; } /* ===== 页脚二维码 ===== */ .footer-qrcodes { display: flex; gap: 25px; margin-top: 20px; } .qrcode-item { text-align: center; width: 110px; } .qrcode-placeholder { width: 90px; height: 90px; background: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; overflow: hidden; } .qrcode-placeholder img { width: 100%; height: 100%; object-fit: cover; } .qrcode-item span { font-size: 12px; color: rgba(255,255,255,0.5); display: block; } /* ===== 浮动按钮组 ===== */ .float-buttons { position: fixed; bottom: 30px; right: 30px; z-index: 999; display: flex; flex-direction: column; gap: 15px; } .float-item { position: relative; width: 56px; height: 56px; border-radius: 50%; background: #ffffff; box-shadow: 0 4px 12px rgba(0,0,0,0.06); cursor: pointer; transition: transform 0.2s; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0,0,0,0.06); } .float-item:hover { border-color: rgba(212,85,43,0.2); background: rgba(212,85,43,0.02); } .float-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; } .float-icon img { width: 100%; height: 100%; object-fit: contain; opacity: 0.7; transition: opacity 0.2s; } .float-item:hover .float-icon img { opacity: 0.9; } .float-content { position: absolute; right: 72px; top: 50%; transform: translateY(-50%); background: white; padding: 15px 20px; border-radius: 8px; box-shadow: 0 8px 24px rgba(212,85,43,0.07); white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.2s; pointer-events: none; } .float-item:hover .float-content { opacity: 1; visibility: visible; right: 76px; pointer-events: auto; } .phone-content { text-align: left; min-width: 180px; padding: 15px 20px; } .phone-number { font-size: 18px; font-weight: 500; color: #1a1a1a; margin-bottom: 4px; } .phone-sub { font-size: 12px; color: #999; } .qr-content { white-space: normal; min-width: 240px; padding: 20px; text-align: center; } .qr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 10px; } .qr-item { text-align: center; } .qr-code { width: 85px; height: 85px; margin: 0 auto 8px; background: #f5f5f7; border-radius: 8px; overflow: hidden; border: 1px solid #f0f0f0; } .qr-code img { width: 100%; height: 100%; object-fit: cover; } .qr-item span { font-size: 12px; color: #666; display: block; line-height: 1.4; } .qr-tip { font-size: 12px; color: #999; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0f0f0; } .back-to-top { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; } .back-to-top.show { opacity: 1; visibility: visible; } /* ===== 响应式 ===== */ @media (max-width: 1200px) { .product-grid { grid-template-columns: 1fr 1fr; } .product-card:first-child { grid-row: auto; } .advantages-grid { grid-template-columns: repeat(2, 1fr); } .banner-content h2 { font-size: 42px; } .philosophy-list { grid-template-columns: repeat(2, 1fr); } .why-us-grid { max-width: 900px; } } @media (max-width: 1024px) { .news-layout { grid-template-columns: 1fr; } .cases-layout { grid-template-columns: 1fr; } .cta-split { grid-template-columns: 1fr; } .product-grid { grid-template-columns: repeat(2, 1fr); } .product-card:first-child { grid-row: auto; } .why-us-grid { grid-template-columns: 1fr; } .why-us-item { border-right: none; } .why-us-item:nth-child(3) { border-bottom: 1px solid #e8eaef; } } @media (max-width: 768px) { .nav-menu { display: none; } .mobile-btn { display: flex; } .banner-content { padding: 0 24px; } .banner-content p { font-size: 14px; } .product-grid { grid-template-columns: repeat(2, 1fr); padding: 0 16px; gap: 12px; } .product-card:first-child { grid-row: auto; } .philosophy-list { grid-template-columns: 1fr; } .why-us-grid { grid-template-columns: 1fr; } .why-us-item { border-right: none; } .why-us-item:nth-child(3) { border-bottom: 1px solid #e8eaef; } .about-hero { height: auto; min-height: 500px; padding: 70px 0; } .about-hero-content { margin: 0 24px; padding: 0; } .about-stats { flex-wrap: wrap; gap: 30px; justify-content: space-evenly; } .about-stat-item { min-width: auto; } .about-stat-divider { display: none; } .section-title { font-size: 28px; } .footer-nav { flex-direction: column; gap: 30px; } .footer-bottom { flex-direction: column; gap: 10px; text-align: center; } .cases-images { height: 250px; } .banner-content h2 { font-size: 28px; } .banner-swiper .swiper-button-next, .banner-swiper .swiper-button-prev { width: 40px !important; height: 40px !important; margin-top: -20px !important; } .banner-swiper .swiper-button-prev { left: 10px !important; } .banner-swiper .swiper-button-next { right: 10px !important; } .banner-swiper .swiper-button-next svg, .banner-swiper .swiper-button-prev svg { width: 12px; height: 12px; } } @media (max-width: 480px) { .product-grid { grid-template-columns: repeat(2, 1fr); padding: 0 12px; gap: 10px; } .product-card:first-child { grid-row: auto; } .advantages-grid { grid-template-columns: 1fr; } .float-buttons { bottom: 15px; right: 15px; gap: 10px; } .float-item { width: 44px; height: 44px; } .float-icon { width: 22px; height: 22px; } .float-content { display: none; } .about-hero-content { padding: 0; } .about-hero-content h2 { font-size: 28px; } .about-stats { gap: 20px; } .about-stat-item { min-width: auto; } .about-stat-num { font-size: 30px; } .why-us-item { padding: 30px 24px; flex-direction: column; align-items: center; text-align: center; } } /* ============================================= 子页面统一设计系统 - Page Design System ============================================= */ /* --- 子页面容器 --- */ .subpage { width: 100%; background: #fff; margin-top: 70px; } /* --- 页面顶部 Banner --- */ .page-banner { position: relative; min-height: 400px; height: 50vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%); overflow: hidden; } .page-banner-dark { background: linear-gradient(135deg, #1a1a1a 0%, #2a2420 100%); } .page-banner-dark .page-banner-stamp, .page-banner-dark .page-banner-subtitle { color: rgba(255,255,255,0.5); } .page-banner-dark .page-banner-title { color: #fff; } .page-banner-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .page-banner-dot { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.08; } .page-banner-dot:nth-child(1) { width: 500px; height: 500px; background: #d4552b; top: -150px; right: -100px; } .page-banner-dot:nth-child(2) { width: 400px; height: 400px; background: #d4552b; bottom: -100px; left: -100px; } .page-banner-dot:nth-child(3) { width: 250px; height: 250px; background: #d4552b; top: 30%; left: 20%; } .page-banner-content { position: relative; z-index: 2; text-align: center; max-width: 800px; padding: 0 20px; } .page-banner-stamp { display: inline-block; font-size: 12px; letter-spacing: 6px; color: #999; font-weight: 500; margin-bottom: 16px; } .page-banner-title { font-size: 56px; font-weight: 600; color: #1a1a1a; line-height: 1.2; margin-bottom: 16px; letter-spacing: 2px; } .page-banner-accent { color: #d4552b; } .page-banner-subtitle { font-size: 16px; color: #888; font-weight: 400; letter-spacing: 1px; } /* --- 统一 Section --- */ .page-section { padding: 80px 0; } .page-section-gray { background: #f5f7fa; } .page-section-white { background: #fff; } .page-section-dark { background: #1a1a1a; color: #fff; } .page-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* --- 面包屑 --- */ .breadcrumb { font-size: 13px; color: #999; padding: 20px 0 0; max-width: 1200px; margin: 0 auto; padding-left: 20px; padding-right: 20px; } .breadcrumb a { color: #d4552b; text-decoration: none; } .breadcrumb span { color: #999; } /* --- 通用卡片 --- */ .card-grid { display: grid; gap: 24px; margin-top: 50px; } .card-grid-2 { grid-template-columns: repeat(2, 1fr); } .card-grid-3 { grid-template-columns: repeat(3, 1fr); } .card-grid-4 { grid-template-columns: repeat(4, 1fr); } .card { background: #fff; border-radius: 8px; padding: 30px; border: 1px solid #e8eaef; transition: border-color 0.3s; } .card:hover { border-color: #d4552b; } .card-icon { width: 56px; height: 56px; margin-bottom: 16px; background: rgba(212,85,43,0.06); border-radius: 12px; display: flex; align-items: center; justify-content: center; } .card-icon svg { width: 28px; height: 28px; } .card h4 { font-size: 17px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; } .card p { font-size: 14px; color: #777; line-height: 1.7; } /* --- 统一表单 --- */ .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 14px; color: #555; margin-bottom: 6px; font-weight: 500; } .form-control { width: 100%; padding: 12px 16px; border: 1px solid #dde1e6; border-radius: 6px; font-size: 15px; color: #333; background: #fff; transition: border-color 0.2s; box-sizing: border-box; font-family: inherit; } .form-control:focus { border-color: #d4552b; outline: none; box-shadow: 0 0 0 3px rgba(212,85,43,0.1); } .form-control::placeholder { color: #bbb; } textarea.form-control { resize: vertical; min-height: 120px; } /* --- 按钮系统 --- */ .btn { display: inline-block; padding: 12px 32px; border-radius: 4px; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; transition: all 0.2s; } .btn-primary { background: #d4552b; color: #fff; } .btn-primary:hover { background: #b0421f; } .btn-outline { background: transparent; color: #d4552b; border: 1px solid rgba(212,85,43,0.3); } .btn-outline:hover { background: rgba(212,85,43,0.06); } /* --- FAQ 手风琴 --- */ .faq-list { max-width: 800px; margin: 0 auto; } .faq-item { border-bottom: 1px solid #e8eaef; } .faq-question { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; cursor: pointer; font-size: 16px; font-weight: 500; color: #1a1a1a; transition: color 0.2s; } .faq-question:hover { color: #d4552b; } .faq-question .faq-icon { font-size: 20px; color: #999; transition: transform 0.3s; } .faq-item.active .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-answer p { padding-bottom: 20px; color: #666; font-size: 15px; line-height: 1.8; margin: 0; } /* --- 时间轴组件 --- */ .timeline { margin-top: 60px; } .timeline-item { display: flex; gap: 60px; padding: 30px 0; border-bottom: 1px solid #eaecf0; } .timeline-item:last-child { border-bottom: none; } .timeline-year { font-size: 24px; font-weight: 700; color: #d4552b; min-width: 100px; flex-shrink: 0; } .timeline-content h3 { font-size: 20px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; } .timeline-content p { font-size: 15px; color: #666; line-height: 1.7; margin: 0; } /* --- 数据统计 --- */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .stat-item { text-align: center; } .stat-number { display: block; font-size: 48px; font-weight: 700; color: #d4552b; margin-bottom: 4px; line-height: 1.1; } .stat-label { font-size: 13px; color: #999; text-transform: uppercase; letter-spacing: 1px; } /* --- 合作伙伴网格 --- */ .partner-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 50px; } .partner-item { text-align: center; padding: 20px 16px; background: #fff; border: 1px solid #eaecf0; border-radius: 8px; font-size: 14px; color: #555; transition: all 0.3s; } .partner-item:hover { border-color: #d4552b; color: #d4552b; box-shadow: 0 4px 12px rgba(0,0,0,0.04); } /* --- 两栏布局 --- */ .split-layout { display: flex; gap: 80px; align-items: flex-start; } .split-left { flex: 1.2; } .split-right { flex: 1; } /* --- 联系我们信息卡片 --- */ .contact-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; } .contact-info-card { text-align: center; padding: 40px 24px; background: #fff; border: 1px solid #e8eaef; border-radius: 8px; transition: border-color 0.3s, background 0.3s; } .contact-info-card:hover { border-color: #d4552b; background: #fefdfb; } .contact-info-card .info-icon { width: 56px; height: 56px; margin: 0 auto 16px; background: rgba(212,85,43,0.06); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .contact-info-card .info-icon svg { width: 28px; height: 28px; } .contact-info-card h4 { font-size: 17px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; } .contact-info-card p { font-size: 14px; color: #777; line-height: 1.6; } /* --- 新闻列表 --- */ .news-list-item { display: flex; gap: 24px; padding: 24px 0; border-bottom: 1px solid #eaecf0; transition: all 0.3s; cursor: pointer; } .news-list-item:hover { background: rgba(212,85,43,0.02); padding-left: 12px; } .news-list-thumb { width: 200px; height: 140px; border-radius: 6px; object-fit: cover; flex-shrink: 0; } .news-list-body { flex: 1; display: flex; flex-direction: column; justify-content: center; } .news-list-body h4 { font-size: 18px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; } .news-list-body p { font-size: 14px; color: #777; line-height: 1.6; margin-bottom: 8px; } .news-list-meta { font-size: 12px; color: #bbb; } /* --- 产品/案例详情 --- */ .detail-header { text-align: center; padding: 60px 0 40px; } .detail-header h1 { font-size: 36px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px; } .detail-header .detail-meta { font-size: 13px; color: #999; } .detail-body { max-width: 860px; margin: 0 auto; } .detail-body p { font-size: 16px; color: #444; line-height: 1.9; margin-bottom: 24px; } .detail-body img { width: 100%; border-radius: 8px; margin: 24px 0; } /* ===== 子页面响应式 ===== */ @media (max-width: 1024px) { .card-grid-4 { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(2, 1fr); } .partner-grid { grid-template-columns: repeat(3, 1fr); } .contact-info-grid { grid-template-columns: repeat(2, 1fr); } .split-layout { gap: 50px; } } @media (max-width: 768px) { .page-banner { height: 40vh; min-height: 320px; } .page-banner-title { font-size: 38px; } .page-section { padding: 60px 0; } .card-grid-2, .card-grid-3, .card-grid-4 { grid-template-columns: repeat(2, 1fr); } .partner-grid { grid-template-columns: repeat(3, 1fr); } .split-layout { flex-direction: column; gap: 40px; } .timeline-item { flex-direction: column; gap: 12px; padding: 24px 0; } .timeline-year { min-width: auto; } .stats-grid { gap: 20px; } .stat-number { font-size: 36px; } .contact-info-grid { grid-template-columns: 1fr; } .news-list-item { flex-direction: column; gap: 12px; } .news-list-thumb { width: 100%; height: 180px; } } @media (max-width: 480px) { .page-banner { height: 35vh; min-height: 260px; } .page-banner-title { font-size: 28px; } .page-banner-stamp { letter-spacing: 3px; } .card-grid-2, .card-grid-3, .card-grid-4 { grid-template-columns: 1fr; } .partner-grid { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: 1fr; } .stat-number { font-size: 32px; } } /* ============================================= 全局子页面风格统一覆盖规则 确保所有子页面与主页视觉一致 ============================================= */ /* --- 容器统一 --- */ .product-page, .contact-page, .news-page, .news-detail-page, .product-detail-page, .case-detail-page { margin-top: 70px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* --- 品牌色覆盖：所有子页面强调色统一为橙色 --- */ .product-page a, .contact-page a, .news-page a, .news-detail-page a, .product-detail-page a, .case-detail-page a { color: #d4552b; } /* Hero 标题品牌色 */ [class$="-hero-accent"] { color: #d4552b; font-weight: 600; } [class$="-hero-title"] { font-weight: 600; color: #1a1a1a; } [class$="-hero-stamp"] { letter-spacing: 4px; font-weight: 500; } /* --- 按钮统一 --- */ .product-page .btn-primary, .contact-page .btn-primary, .news-page .btn-primary, .product-detail-page .btn-primary, .case-detail-page .btn-primary { background: #d4552b; color: #fff; border-radius: 4px; } .product-page .btn-primary:hover, .contact-page .btn-primary:hover, .news-page .btn-primary:hover, .product-detail-page .btn-primary:hover, .case-detail-page .btn-primary:hover { background: #b0421f; } /* --- 表单统一 --- */ .product-page input, .product-page textarea, .product-page select, .contact-page input, .contact-page textarea, .contact-page select { border-radius: 6px; border-color: #dde1e6; } .product-page input:focus, .contact-page input:focus { border-color: #d4552b; box-shadow: 0 0 0 3px rgba(212,85,43,0.1); } /* --- 卡片统一 --- */ .product-page [class$="-card"]:hover, .contact-page [class$="-card"]:hover, .news-page [class$="-card"]:hover, .product-detail-page [class$="-card"]:hover { border-color: #d4552b; } /* --- FAQ 统一 --- */ .product-page .faq-question:hover, .contact-page .faq-question:hover, .news-page .faq-question:hover, .product-detail-page .faq-question:hover, .case-detail-page .faq-question:hover { color: #d4552b; } /* --- 标签/Tab 活跃态 --- */ .product-page [class$="-tab"].active, .news-page [class$="-item"].active { color: #d4552b; border-color: #d4552b; } /* --- 徽章与装饰 --- */ [class$="-badge"] { background: #d4552b; } [class$="-dot"].dot-1, [class$="-dot"]:nth-child(1) { background: #d4552b; } /* --- 加载动画 --- */ .loading-spinner, [class*="loading"] [class*="spinner"] { border-top-color: #d4552b; } /* --- 图标 SVG 描边色 --- */ .product-page svg[stroke="#0071e3"], .contact-page svg[stroke="#0071e3"], .news-page svg[stroke="#0071e3"], .product-detail-page svg[stroke="#0071e3"], .news-detail-page svg[stroke="#0071e3"], .case-detail-page svg[stroke="#0071e3"] { stroke: #d4552b; } /* ============================================= 性能优化 — GPU 加速 + 懒渲染 ============================================= */ /* AOS 元素不预先声明 will-change，让浏览器在动画触发时自动优化合成层 */ /* 产品网格：使用 content-visibility 延迟渲染屏外内容，减少初始布局开销 */ .product-grid { content-visibility: auto; contain-intrinsic-size: auto 500px; } /* Swiper 容器不再强制 GPU 合成层 — Swiper 内部已自行优化 */ /* 替换 transition:all 为精确属性，避免非必要计算 */ .btn-banner-outline, .btn-primary, .btn-link, .product-card, .product-card img, .cases-img-item img, .advantage-card, .news-featured img, .news-item, .nav-link, .nav-cta { transition-property: transform, opacity, background-color, border-color, color, box-shadow; } .btn-primary, .nav-cta, .btn-banner-outline { transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } /* ================================================================ 禄存科技 LUCUNDA - 全站统一设计系统 v2.0 设计方向: Trust & Authority + Industrial Premium 强调: #E25D2A (品牌橙) 背景: #F8FAFC / #FFFFFF | 深色区: #0A1628 (冷海军蓝) ================================================================ */ /* ----- 设计Token (CSS变量) ----- */ :root { --color-primary: #1c1815; --color-accent: #E25D2A; --color-accent-hover: #C44A1F; --color-accent-light: rgba(226, 93, 42, 0.06); --color-accent-soft: rgba(226, 93, 42, 0.12); --color-accent-glow: rgba(226, 93, 42, 0.25); --color-bg: #F8FAFC; --color-surface: #FFFFFF; --color-muted: #E8ECF1; --color-border: #E2E8F0; --color-text: #1C1815; --color-text-secondary: #475569; --color-text-muted: #64748B; --color-text-light: #94A3B8; --color-on-dark: #FFFFFF; --color-on-dark-muted: rgba(255, 255, 255, 0.55); --color-on-dark-dim: rgba(255, 255, 255, 0.08); --color-success: #16A34A; --color-success-bg: #E8F5E9; --color-error: #DC2626; --color-error-bg: #FFEBEE; --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-full: 50%; --shadow-sm: 0 2px 8px rgba(226, 93, 42, 0.04); --shadow-md: 0 8px 24px rgba(226, 93, 42, 0.06); --shadow-lg: 0 12px 40px rgba(226, 93, 42, 0.08); --shadow-accent: 0 8px 24px rgba(226, 93, 42, 0.18); --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; --transition-slow: 0.4s ease; --spacing-xs: 8px; --spacing-sm: 16px; --spacing-md: 24px; --spacing-lg: 40px; --spacing-xl: 60px; --spacing-2xl: 80px; --spacing-3xl: 120px; --max-width: 1200px; --navbar-height: 70px; } /* ================================================================ 0. 全局滚动条修复 + 页面淡入 ================================================================ */ html { overflow-x: hidden; scroll-behavior: smooth; } body { margin: 0; padding: 0; background: #FFFFFF; font-family: var(--font-family); font-weight: 500; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-weight: 700; } /* 页面进入动画 */ .news-page, .contact-page, .subpage { animation: pageFadeIn 0.35s ease; } @keyframes pageFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ================================================================ 1. 子页面容器 & 基础重置 ================================================================ */ .subpage, .news-page, .contact-page, .detail-page, .news-detail-page { width: 100%; background: var(--color-surface); font-family: var(--font-family); margin-top: var(--navbar-height); color: var(--color-text); } .subpage *, .news-page *, .contact-page *, .detail-page *, .news-detail-page * { box-sizing: border-box; } /* ----- 统一容器 ----- */ .subpage .container, .news-container, .contact-container, .page-container, .detail-page .container, .news-detail-page .container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; } /* ================================================================ 2. 统一 Page Banner (Hero) ================================================================ */ .page-banner { position: relative; min-height: 400px; height: 50vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #F8FAFC 0%, #E8ECF1 100%); overflow: hidden; } .page-banner-bg { position: absolute; inset: 0; pointer-events: none; } .page-banner-dot { position: absolute; border-radius: var(--radius-full); filter: blur(80px); opacity: 0.08; background: var(--color-accent); } .page-banner-dot:nth-child(1) { width: 500px; height: 500px; top: -150px; right: -100px; } .page-banner-dot:nth-child(2) { width: 400px; height: 400px; bottom: -100px; left: -100px; } .page-banner-dot:nth-child(3) { width: 250px; height: 250px; top: 30%; left: 20%; } .page-banner-content { position: relative; z-index: 2; text-align: center; max-width: 800px; padding: 0 20px; } .page-banner-stamp { display: inline-block; font-size: 12px; letter-spacing: 6px; color: var(--color-text-light); font-weight: 500; margin-bottom: 16px; } .page-banner-title { font-size: 56px; font-weight: 700; color: var(--color-text); line-height: 1.2; margin-bottom: 16px; letter-spacing: 2px; } .page-banner-accent { color: var(--color-accent); font-weight: 700; } .page-banner-subtitle { font-size: 16px; color: var(--color-text-muted); font-weight: 400; letter-spacing: 1px; } /* Dark banner variant - 冷海军蓝工业风 */ .page-banner-dark { background: linear-gradient(160deg, #0A1628 0%, #112240 40%, #0A1628 100%); min-height: 560px; position: relative; } .page-banner-dark::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 60%, rgba(226,93,42,0.04) 0%, transparent 55%), radial-gradient(ellipse at 70% 30%, rgba(96,165,250,0.04) 0%, transparent 50%); pointer-events: none; z-index: 0; } .page-banner-dark .page-banner-bg { background: none; } .page-banner-dark .page-banner-stamp { font-size: 13px; letter-spacing: 8px; color: #94A3B8; font-weight: 600; margin-bottom: 20px; } .page-banner-dark .page-banner-title { font-size: 64px; font-weight: 800; color: #FFFFFF; letter-spacing: -1px; line-height: 1.1; margin-bottom: 20px; } .page-banner-dark .page-banner-accent { color: #E25D2A; } .page-banner-dark .page-banner-subtitle { font-size: 17px; color: rgba(255,255,255,0.5); font-weight: 400; letter-spacing: 2px; } .page-banner-dark .page-banner-content { padding: 100px 20px 80px; position: relative; z-index: 2; } .page-banner-dark .page-banner-dot { opacity: 0.03; } /* 网格图案 - 统一所有深色Hero */ .page-banner-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(148,163,184,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.04) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%); z-index: 1; } /* Hero Badge - 胶囊标签 (在深色 Banner 内) */ .hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 24px; border: 1px solid rgba(226, 93, 42, 0.30); border-radius: 50px; font-size: 13px; font-weight: 500; color: #F08C55; letter-spacing: 1px; margin-bottom: 40px; background: rgba(226, 93, 42, 0.06); backdrop-filter: blur(4px); } .hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #E25D2A; animation: heroBadgePulse 2s infinite; } @keyframes heroBadgePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* Hero Stats - 数字统计条 (在深色 Banner 内) */ .hero-stats { display: flex; justify-content: center; align-items: center; gap: 0; margin-top: 44px; } .hero-stat { padding: 0 48px; text-align: center; } .hero-stat-num { display: block; font-size: 48px; font-weight: 800; color: #FFFFFF; line-height: 1; margin-bottom: 8px; } .hero-stat-num small { font-size: 22px; font-weight: 400; color: rgba(255, 255, 255, 0.4); margin-left: 2px; } .hero-stat-label { font-size: 14px; color: rgba(255, 255, 255, 0.4); letter-spacing: 2px; font-weight: 400; } .hero-stat-divider { width: 1px; height: 48px; background: rgba(255, 255, 255, 0.12); } @media (max-width: 768px) { .hero-badge { margin-bottom: 28px; font-size: 12px; padding: 6px 18px; } .hero-stats { flex-wrap: wrap; gap: 24px; margin-top: 40px; } .hero-stat { padding: 0 20px; } .hero-stat-num { font-size: 36px; } .hero-stat-divider { display: none; } } @media (max-width: 480px) { .hero-stats { gap: 16px; margin-top: 32px; } .hero-stat { padding: 0 12px; } .hero-stat-num { font-size: 28px; } .hero-stat-num small { font-size: 16px; } } /* 滚动提示动画 —— 子页面深色 Banner 底部 */ .page-banner-dark .scroll-indicator { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); z-index: 10; } .page-banner-dark .scroll-mouse { width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 14px; display: flex; justify-content: center; padding-top: 8px; } .page-banner-dark .scroll-wheel { width: 3px; height: 8px; background: rgba(255, 255, 255, 0.55); border-radius: 2px; animation: scrollWheel 1.6s ease-in-out infinite; } @keyframes scrollWheel { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(8px); opacity: 0.2; } 100% { transform: translateY(0); opacity: 1; } } /* ================================================================ 3. 统一 Section 布局 ================================================================ */ .page-section { padding: var(--spacing-2xl) 0; } .page-section-gray { background: var(--color-bg); } .page-section-white { background: var(--color-surface); } .page-section-dark { background: #1c1815; color: var(--color-on-dark); } /* ----- 统一 Section Header ----- */ .section-header { text-align: center; margin-bottom: 60px; } .section-header .section-tag { display: inline-block; font-size: 13px; font-weight: 600; color: var(--color-accent); letter-spacing: 2px; margin-bottom: 12px; text-transform: uppercase; } .section-header .section-title { font-size: 36px; font-weight: 700; color: var(--color-primary); margin-bottom: 10px; } .section-header .section-desc { font-size: 16px; color: var(--color-text-muted); margin-top: 12px; } /* ================================================================ 4. 统一卡片系统 ================================================================ */ .card-grid { display: grid; gap: 24px; } .card-grid-2 { grid-template-columns: repeat(2, 1fr); } .card-grid-3 { grid-template-columns: repeat(3, 1fr); } .card-grid-4 { grid-template-columns: repeat(4, 1fr); } .card { background: var(--color-surface); border-radius: var(--radius-md); padding: 36px 28px; border: 1px solid var(--color-muted); transition: border-color var(--transition-normal); text-align: center; position: relative; overflow: hidden; } .card::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(circle at 50% 50%, var(--color-accent) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 0; } .card:hover { border-color: var(--color-accent-soft); } .card:hover::after { opacity: 0.06; } .card > * { position: relative; z-index: 1; } .card-icon { width: 64px; height: 64px; margin: 0 auto 20px; background: var(--color-accent-light); border-radius: 16px; display: flex; align-items: center; justify-content: center; transition: all var(--transition-normal); } .card:hover .card-icon { background: var(--color-accent-soft); transform: scale(1.05); } .card-icon svg { width: 36px; height: 36px; } .card h4 { font-size: 18px; font-weight: 700; color: var(--color-text); margin-bottom: 10px; } .card p { font-size: 14px; color: var(--color-text-muted); line-height: 1.7; margin: 0; } /* ================================================================ 5. 统一按钮系统 ================================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 32px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; transition: all var(--transition-fast); letter-spacing: 0.5px; gap: 8px; } .btn-primary { background: var(--color-accent); color: #fff; } .btn-primary:hover { background: var(--color-accent-hover); transform: translateY(-2px); box-shadow: var(--shadow-accent); color: #fff; text-decoration: none; } .btn-primary:disabled { background: #ccc; cursor: not-allowed; transform: none; box-shadow: none; } .btn-outline { background: transparent; color: var(--color-accent); border: 1px solid rgba(226, 93, 42, 0.3); } .btn-outline:hover { background: var(--color-accent-light); border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; } .btn-dark-outline { background: transparent; color: var(--color-on-dark); border: 1px solid rgba(255, 255, 255, 0.3); } .btn-dark-outline:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--color-on-dark); color: var(--color-on-dark); text-decoration: none; } .btn-large { padding: 14px 40px; font-size: 16px; } .btn-ghost { border: none; background: none; color: var(--color-accent); padding: 8px 16px; } .btn-ghost:hover { background: var(--color-accent-light); } /* ================================================================ 6. 统一表单系统 ================================================================ */ .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 14px; color: var(--color-text-secondary); margin-bottom: 6px; font-weight: 500; } .form-control { width: 100%; padding: 12px 16px; border: 2px solid var(--color-muted); border-radius: var(--radius-sm); font-size: 15px; color: var(--color-text); background: var(--color-surface); transition: border-color var(--transition-fast); font-family: var(--font-family); } .form-control:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px var(--color-accent-light); } .form-control::placeholder { color: #bbb; } textarea.form-control { resize: vertical; min-height: 120px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* ================================================================ 7. 统一数据统计 ================================================================ */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .stat-item { text-align: center; padding: 30px; background: var(--color-bg); border-radius: var(--radius-lg); } .stat-item:hover { } .stat-number { display: block; font-size: 48px; font-weight: 800; color: var(--color-accent); margin-bottom: 4px; line-height: 1.1; } .stat-label { font-size: 13px; color: var(--color-text-light); text-transform: uppercase; letter-spacing: 1px; } /* ================================================================ 8. 统一 FAQ 手风琴 ================================================================ */ .faq-list { max-width: 800px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--color-muted); } .faq-question { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--color-text); transition: color var(--transition-fast); } .faq-question:hover { color: var(--color-accent); } .faq-icon { font-size: 20px; color: #999; transition: transform var(--transition-normal); flex-shrink: 0; margin-left: 12px; } .faq-item.active .faq-icon { transform: rotate(45deg); color: var(--color-accent); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--transition-normal); } .faq-answer p { padding-bottom: 20px; color: var(--color-text-secondary); font-size: 15px; line-height: 1.8; margin: 0; } /* ================================================================ 9. Service 服务承诺 —— 非对称卡片布局 ================================================================ */ .service-promise-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: stretch; } .promise-hero-card { background: linear-gradient(145deg, #0A1628 0%, #112240 100%); border-radius: var(--radius-lg); padding: 48px 40px; color: #fff; display: flex; flex-direction: column; justify-content: center; } .promise-hero-card h3 { font-size: 22px; font-weight: 700; margin: 20px 0 16px; color: #fff; } .promise-hero-card p { font-size: 15px; line-height: 1.8; color: rgba(255,255,255,0.72); margin: 0; } .promise-hero-icon { width: 56px; height: 56px; background: rgba(226,93,42,0.15); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; } .promise-hero-icon svg { width: 36px; height: 36px; } .promise-side-cards { display: flex; flex-direction: column; gap: 16px; } .promise-side-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 24px; display: flex; gap: 16px; align-items: flex-start; transition: box-shadow var(--transition-fast); } .promise-side-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-accent-soft); } .promise-side-card h4 { font-size: 15px; font-weight: 600; color: var(--color-text); margin: 0 0 6px; } .promise-side-card p { font-size: 13px; color: var(--color-text-muted); line-height: 1.6; margin: 0; } .promise-side-icon { width: 44px; height: 44px; background: var(--color-accent-light); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .promise-side-icon svg { width: 28px; height: 28px; } /* ================================================================ 10. Service 服务流程 —— 竖向时间线 ================================================================ */ .service-timeline { max-width: 800px; margin: 60px auto 0; position: relative; } .service-timeline::before { content: ''; position: absolute; left: 140px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent) 30%, var(--color-muted) 30%, var(--color-muted) 100%); } .tl-step { display: flex; gap: 40px; align-items: flex-start; padding-bottom: 48px; position: relative; } .tl-step:last-child { padding-bottom: 0; } .tl-step-marker { min-width: 140px; text-align: right; padding-right: 20px; padding-top: 2px; } .tl-step-marker span { display: inline-block; background: var(--color-accent); color: #fff; font-size: 13px; font-weight: 600; padding: 4px 14px; border-radius: 20px; letter-spacing: 0.5px; position: relative; z-index: 1; } .tl-step-body { flex: 1; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid transparent; border-radius: var(--radius-md); padding: 24px 28px; transition: border-left-color 0.3s ease, background 0.3s ease; } .tl-step:hover .tl-step-body { border-left-color: var(--color-accent); background: var(--color-accent-light); } .tl-step-body h4 { font-size: 17px; font-weight: 600; color: var(--color-text); margin: 0 0 8px; } .tl-step-body p { font-size: 14px; color: var(--color-text-muted); line-height: 1.7; margin: 0; } /* ================================================================ 11. Service 服务网络 ================================================================ */ .network-layout { display: flex; flex-direction: column; gap: 32px; } .network-map { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .network-map img { width: 100%; height: auto; display: block; } .network-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .network-stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 28px 20px; text-align: center; transition: box-shadow var(--transition-fast); } .network-stat-card:hover { box-shadow: var(--shadow-md); } .network-stat-num { display: block; font-size: 36px; font-weight: 800; color: var(--color-accent); line-height: 1.1; margin-bottom: 6px; } .network-stat-num small { font-size: 22px; font-weight: 600; } .network-stat-label { display: block; font-size: 13px; color: var(--color-text-muted); letter-spacing: 0.5px; } /* ================================================================ 12. 统一时间轴 ================================================================ */ .timeline { margin-top: 60px; } .timeline-item { display: flex; gap: 60px; padding: 32px 0; border-bottom: 1px solid var(--color-muted); } .timeline-item:last-child { border-bottom: none; } .timeline-year { font-size: 24px; font-weight: 700; color: var(--color-accent); min-width: 100px; flex-shrink: 0; } .timeline-content h3 { font-size: 20px; font-weight: 600; color: var(--color-text); margin-bottom: 8px; } .timeline-content p { font-size: 15px; color: var(--color-text-muted); line-height: 1.7; margin: 0; } /* ================================================================ 13. 统一面包屑 ================================================================ */ .breadcrumb { font-size: 13px; color: var(--color-text-light); padding: 24px 0 0; max-width: var(--max-width); margin: 0 auto; padding-left: 20px; padding-right: 20px; } .breadcrumb a { color: var(--color-text-muted); text-decoration: none; transition: color var(--transition-fast); } .breadcrumb a:hover { color: var(--color-accent); } .breadcrumb .separator { margin: 0 8px; color: #ccc; } .breadcrumb .current { color: var(--color-text); } /* ================================================================ 14. 统一徽章 & 标签 ================================================================ */ .badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; background: var(--color-surface); border: 1px solid var(--color-muted); border-radius: 40px; font-size: 13px; color: var(--color-text-secondary); font-weight: 500; } .badge-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-accent); flex-shrink: 0; } .tag { display: inline-block; padding: 4px 12px; background: var(--color-bg); border-radius: 30px; font-size: 12px; color: var(--color-text-muted); } .tag-active { background: var(--color-accent); color: #fff; } /* ================================================================ 15. 统一认证卡片 ================================================================ */ .cert-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-bottom: 40px; } .cert-card { background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-muted); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease; } .cert-card:hover { transform: perspective(800px) rotateY(-1.5deg) rotateX(1.5deg); box-shadow: var(--shadow-md); } .cert-img { position: relative; aspect-ratio: 4/3; overflow: hidden; } .cert-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .cert-card:hover .cert-img img { transform: scale(1.04); } .cert-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); color: var(--color-on-dark); font-size: 16px; font-weight: 600; } .cert-body { padding: 24px; } .cert-body h4 { font-size: 18px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; } .cert-body>p { font-size: 14px; color: var(--color-accent); margin-bottom: 12px; } .cert-body ul { list-style: none; padding: 0; } .cert-body ul li { font-size: 13px; color: var(--color-text-muted); padding: 4px 0 4px 16px; position: relative; } .cert-body ul li::before { content: '•'; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; } .badge-row { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 20px; } /* ================================================================ 13. 统一流程步骤 ================================================================ */ .process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .process-item { text-align: center; padding: 24px; } .process-num { font-size: 48px; font-weight: 800; color: var(--color-accent-light); background: none; margin-bottom: 16px; line-height: 1; } .process-item h4 { font-size: 18px; font-weight: 600; color: var(--color-text); margin-bottom: 8px; } .process-item p { font-size: 14px; color: var(--color-text-muted); line-height: 1.6; } /* ================================================================ 14. 统一加载动画 ================================================================ */ .loading-spinner { display: inline-block; width: 40px; height: 40px; border: 3px solid var(--color-muted); border-top-color: var(--color-accent); border-radius: var(--radius-full); animation: spin 0.8s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ================================================================ 15. 统一分类导航 ================================================================ */ .category-nav { padding: 30px 0 10px; background: var(--color-surface); } .category-tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .category-tab { padding: 9px 22px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--color-text-muted); background: var(--color-bg); border: 1px solid transparent; cursor: pointer; transition: all var(--transition-fast); text-decoration: none; display: inline-block; } .category-tab:hover { background: var(--color-muted); color: var(--color-text); text-decoration: none; } .category-tab.active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } .category-tab.active:hover { color: #fff; } /* ================================================================ 16. 统一 CTA Section ================================================================ */ .subpage .cta-box { text-align: center; background: linear-gradient(135deg, var(--color-bg), var(--color-surface)); border-radius: 16px; padding: 60px 40px; border: 1px solid var(--color-muted); } .subpage .cta-box h2 { font-size: 32px; font-weight: 700; color: var(--color-text); margin-bottom: 12px; } .subpage .cta-box>p { font-size: 16px; color: var(--color-text-muted); margin-bottom: 30px; } .subpage .cta-box .cta-actions { display: flex; gap: 16px; justify-content: center; margin-bottom: 20px; } .subpage .cta-box .cta-note { font-size: 13px; color: #bbb; } /* ================================================================ 17. 统一新闻卡片 ================================================================ */ .news-card { background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-muted); transition: border-color var(--transition-normal); } .news-card:hover { border-color: var(--color-accent); } .news-card-link { text-decoration: none; color: inherit; display: block; } .news-card-image { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--color-bg); } .news-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .news-card:hover .news-card-image img { transform: scale(1.05); } .news-card-date { position: absolute; bottom: 16px; left: 16px; background: rgba(255, 255, 255, 0.95); padding: 6px 14px; border-radius: 30px; font-size: 13px; font-weight: 500; box-shadow: var(--shadow-sm); } .news-card-content { padding: 20px; } .news-card-title { font-size: 18px; font-weight: 600; color: var(--color-text); margin-bottom: 10px; line-height: 1.4; } .news-card-excerpt { font-size: 14px; color: var(--color-text-muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ================================================================ 21. 统一分页 ================================================================ */ .pagination { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 40px; } .page-link { display: flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--color-muted); border-radius: var(--radius-sm); font-size: 13px; color: var(--color-text-muted); transition: all var(--transition-fast); text-decoration: none; } .page-link:hover:not(.disabled) { background: var(--color-accent); color: #fff; border-color: var(--color-accent); text-decoration: none; } .page-link.active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } .page-link.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .page-dots { color: #999; padding: 0 4px; } /* ================================================================ 19. 统一产品卡片 ================================================================ */ .product-card { background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-muted); transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal); display: flex; flex-direction: column; } .product-card:hover { border-color: var(--color-accent-soft); box-shadow: 0 12px 40px rgba(0,0,0,0.07); transform: translateY(-3px); } .product-link-wrapper { text-decoration: none; color: inherit; display: flex; flex-direction: column; flex: 1; min-height: 0; } .product-image { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #f4f5f8; display: flex; align-items: center; justify-content: center; padding: 36px; flex-shrink: 0; } .product-image img { width: 92%; height: 92%; object-fit: contain; transition: transform var(--transition-slow); } .product-card:hover .product-image img { transform: scale(1.05); } .product-actions-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(255, 255, 255, 0.92); opacity: 0; transition: opacity var(--transition-normal); } .product-card:hover .product-actions-overlay { opacity: 1; } .product-info { padding: 28px 24px 24px; display: flex; flex-direction: column; flex: 1; text-align: center; } .product-title { font-size: 20px; font-weight: 700; color: var(--color-text); margin-bottom: 8px; line-height: 1.3; } .product-desc { font-size: 14px; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-meta { display: flex; gap: 6px; flex-wrap: wrap; } .product-meta span { font-size: 11px; padding: 2px 8px; background: var(--color-bg); border-radius: 3px; color: var(--color-text-muted); } .product-footer { display: flex; justify-content: center; align-items: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid #f3f4f6; } .product-link { font-size: 15px; font-weight: 500; color: var(--color-text); transition: all var(--transition-fast); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; border-bottom: 1.5px solid var(--color-accent); padding-bottom: 4px; } .product-link:hover { transform: none; } .product-link::after { content: '\2192'; font-size: 16px; transition: transform var(--transition-fast); } .product-card:hover .product-link { color: var(--color-accent); } .product-card:hover .product-link::after { transform: translateX(4px); } /* ================================================================ 20. 响应式设计 ================================================================ */ @media (max-width: 1200px) { .page-banner-title { font-size: 48px; } } @media (max-width: 1024px) { .page-banner { height: 45vh; min-height: 350px; } .page-banner-title { font-size: 42px; } .section-title, .section-header .section-title { font-size: 32px; } .card-grid-4 { grid-template-columns: repeat(2, 1fr); } .card-grid-3 { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(2, 1fr); } .process-steps { grid-template-columns: repeat(2, 1fr); } .cert-grid { grid-template-columns: 1fr; } .product-image { padding: 24px; } .product-title { font-size: 18px; } .product-info { padding: 24px 18px 20px; } .products-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 22px !important; } } @media (max-width: 768px) { .page-banner { height: 40vh; min-height: 320px; } .page-banner-title { font-size: 36px; letter-spacing: 1px; } .page-banner-stamp { font-size: 11px; letter-spacing: 4px; } .page-banner-subtitle { font-size: 14px; } .page-section { padding: 60px 0; } .section-header { margin-bottom: 40px; } .section-title, .section-header .section-title { font-size: 28px; } .card-grid-2, .card-grid-3, .card-grid-4 { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .stat-item { padding: 20px; } .stat-number { font-size: 36px; } .process-steps { grid-template-columns: 1fr; gap: 16px; } .process-item { padding: 16px; } .process-num { font-size: 36px; } .timeline-item { flex-direction: column; gap: 12px; padding: 24px 0; } .timeline-year { min-width: auto; } .form-row { grid-template-columns: 1fr; } .cert-grid { grid-template-columns: 1fr; } .badge-row { gap: 12px; } .cta-actions { flex-direction: column; align-items: center; } .product-link-wrapper { flex-direction: column; } .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } .product-image { padding: 24px; } .product-info { padding: 20px 14px 18px; } .product-title { font-size: 16px; } .product-desc { font-size: 13px; } .product-link { font-size: 13px; } } @media (max-width: 480px) { .page-banner { height: 35vh; min-height: 260px; } .page-banner-title { font-size: 28px; } .page-banner-stamp { letter-spacing: 3px; } .section-title, .section-header .section-title { font-size: 24px; } .card-grid-2, .card-grid-3, .card-grid-4 { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr; } .stat-number { font-size: 32px; } .process-steps { grid-template-columns: 1fr; } .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .product-image { padding: 18px; } .product-info { padding: 16px 10px 14px; } .product-title { font-size: 14px; } .product-desc { font-size: 12px; } .product-link { font-size: 12px; } } /* ================================================================ 20. 产品优势面板 - Design System (离线测温仪 + 在线炉温监控) ================================================================ */ /* ----- 通用优势 Section ----- */ .product-adv-section { padding: 80px 0 70px; background: #fff; position: relative; overflow: hidden; } .adv-offline-section::before { content: ''; position: absolute; top: -160px; right: -160px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(226,93,42,0.03) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .adv-online-section { background: #fafbfc; border-top: 1px solid #eff1f4; } /* ----- 优势头部 ----- */ .adv-header { text-align: center; margin-bottom: 56px; } .adv-badge { display: inline-block; font-weight: 600; font-size: 11px; letter-spacing: 2px; color: var(--color-accent); background: var(--color-accent-light); padding: 4px 14px; border-radius: 4px; margin-bottom: 16px; } .adv-title { font-size: 36px; font-weight: 700; color: #1c1815; margin-bottom: 12px; letter-spacing: 0.5px; line-height: 1.3; } .adv-subtitle { font-size: 16px; color: #777; margin: 0; max-width: 500px; margin-left: auto; margin-right: auto; } /* ================================================================ A. 离线测温仪 优势布局 ================================================================ */ .adv-offline-grid { display: grid; grid-template-columns: 280px 1fr; gap: 48px; max-width: 1100px; margin: 0 auto 40px; align-items: start; } .adv-offline-hero { position: sticky; top: 90px; } .adv-offline-visual { padding: 32px 20px; border-radius: 16px; background: rgba(226,93,42,0.03); border: 1px solid rgba(226,93,42,0.08); display: flex; align-items: center; justify-content: center; } .adv-offline-visual svg { width: 100%; max-width: 180px; height: auto; } /* 优势条目列表 */ .adv-offline-list { display: flex; flex-direction: column; gap: 0; } .adv-item { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-bottom: 1px solid #eff1f4; } .adv-item:last-child { border-bottom: none; } .adv-item-icon { width: 44px; height: 44px; min-width: 44px; background: rgba(226,93,42,0.06); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.25s; } .adv-item:hover .adv-item-icon { background: rgba(226,93,42,0.12); transform: scale(1.05); } .adv-item-icon svg { width: 22px; height: 22px; } .adv-item-body { display: flex; flex-direction: column; gap: 4px; } .adv-item-body strong { font-size: 15px; font-weight: 600; color: #1c1815; line-height: 1.3; } .adv-item-body span { font-size: 13px; color: #888; line-height: 1.55; } /* 离线 CTA */ .adv-offline-cta { text-align: center; padding-top: 8px; } .adv-cta-link { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; background: #1c1815; color: #fff; border-radius: 6px; font-size: 14px; font-weight: 500; text-decoration: none; transition: all 0.25s; } .adv-cta-link:hover { background: var(--color-accent); transform: translateX(4px); text-decoration: none; color: #fff; } .adv-cta-link svg { transition: transform 0.25s; } .adv-cta-link:hover svg { transform: translateX(3px); } /* ================================================================ B. 在线炉温监控系统 优势布局 ================================================================ */ /* 通用优势卡片 */ .adv-online-common { max-width: 1100px; margin: 0 auto 48px; } .adv-section-label { font-size: 14px; font-weight: 600; color: var(--color-accent); letter-spacing: 2px; margin-bottom: 20px; padding-bottom: 8px; border-bottom: 2px solid rgba(226,93,42,0.15); display: inline-block; } .adv-online-common-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .adv-common-card { background: #fff; border-radius: 12px; padding: 28px 20px; border: 1px solid #eef0f2; text-align: center; transition: all 0.3s; } .adv-common-card:hover { border-color: var(--color-accent); } .adv-common-card-icon { width: 48px; height: 48px; margin: 0 auto 14px; background: rgba(226,93,42,0.06); border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: all 0.25s; } .adv-common-card:hover .adv-common-card-icon { background: rgba(226,93,42,0.12); transform: scale(1.05); } .adv-common-card-icon svg { width: 28px; height: 28px; } .adv-common-card strong { display: block; font-size: 15px; font-weight: 600; color: #1c1815; margin-bottom: 6px; } .adv-common-card span { font-size: 13px; color: #888; line-height: 1.5; } /* Tab 切换控制区 */ .adv-online-tabs { max-width: 1100px; margin: 0 auto; } .adv-tabs-nav { display: flex; gap: 0; border-bottom: 2px solid #eef0f2; margin-bottom: 28px; } .adv-tab-btn { padding: 12px 24px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; font-size: 14px; font-weight: 500; color: #888; cursor: pointer; transition: all 0.2s; position: relative; } .adv-tab-btn:hover { color: #1c1815; } .adv-tab-btn.active { color: var(--color-accent); border-bottom-color: var(--color-accent); font-weight: 600; } /* Tab 面板 */ .adv-tab-panel { display: none; } .adv-tab-panel.active { display: block; animation: advFadeIn 0.3s ease; } @keyframes advFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Tab 内容卡片网格 */ .adv-tab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .adv-tab-card { background: #fff; border-radius: 10px; padding: 24px 20px; border: 1px solid #eef0f2; text-align: center; transition: all 0.3s; } .adv-tab-card:hover { border-color: var(--color-accent); } .adv-tab-card-icon { width: 40px; height: 40px; margin: 0 auto 12px; background: rgba(226,93,42,0.06); border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: all 0.25s; } .adv-tab-card:hover .adv-tab-card-icon { background: rgba(226,93,42,0.12); } .adv-tab-card-icon svg { width: 22px; height: 22px; } .adv-tab-card strong { display: block; font-size: 14px; font-weight: 600; color: #1c1815; margin-bottom: 6px; } .adv-tab-card span { font-size: 13px; color: #888; line-height: 1.5; } .adv-tab-card-wide { grid-column: 1 / -1; } /* 在线系列 CTA */ .adv-online-cta { text-align: center; padding-top: 40px; } .adv-cta-link-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 36px; background: var(--color-accent); color: #fff; border-radius: 6px; font-size: 15px; font-weight: 500; text-decoration: none; transition: all 0.25s; } .adv-cta-link-primary:hover { background: var(--color-accent-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(226,93,42,0.28); text-decoration: none; color: #fff; } .adv-cta-link-primary svg { transition: transform 0.25s; } .adv-cta-link-primary:hover svg { transform: translateX(3px); } .adv-cta-contact { margin-top: 16px; font-size: 14px; color: #999; } .adv-cta-contact strong { color: #1c1815; font-weight: 600; } /* ================================================================ 20.1 优势面板响应式 ================================================================ */ @media (max-width: 1024px) { .adv-offline-grid { grid-template-columns: 1fr; gap: 32px; } .adv-offline-hero { position: static; max-width: 280px; margin: 0 auto; } .adv-online-common-grid { grid-template-columns: repeat(2, 1fr); } .adv-tab-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .product-adv-section { padding: 60px 0 50px; } .adv-title { font-size: 26px; } .adv-header { margin-bottom: 36px; } .adv-offline-list .adv-item { padding: 16px 0; } .adv-item-icon { width: 38px; height: 38px; min-width: 38px; } .adv-online-common-grid { grid-template-columns: 1fr; gap: 14px; } .adv-tabs-nav { flex-wrap: wrap; } .adv-tab-btn { padding: 10px 16px; font-size: 13px; } .adv-tab-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .adv-title { font-size: 22px; } .adv-subtitle { font-size: 14px; } .adv-item-body strong { font-size: 14px; } .adv-common-card { padding: 22px 16px; } }