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

:root {
    --yx-c1: #00d4ff;
    --yx-c2: #0099ff;
    --yx-c3: #0066ff;
    --yx-c4: #3366ff;
    --yx-c5: #00ffcc;
    --yx-c6: #00ccaa;
    --yx-dark: #0a0e27;
    --yx-darker: #050810;
    --yx-light: #ffffff;
    --yx-gray: #e5e7eb;
    --yx-text: #1f2937;
    --yx-shadow: rgba(0, 212, 255, 0.15);
}

body {
    font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
    line-height: 1.6;
    color: var(--yx-text);
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #dbeafe 100%);
    overflow-x: hidden;
}

.w5t8r3e6y {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.x9k4m7n2p {
    background: linear-gradient(135deg, var(--yx-c1) 0%, var(--yx-c2) 50%, var(--yx-c3) 100%);
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 25px var(--yx-shadow);
    backdrop-filter: blur(10px);
    animation: x3z7n9m2 0.6s ease-out;
}

@keyframes x3z7n9m2 {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.q2a7s9d4f {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.z8x5c3v1b {
    font-size: 36px;
    font-weight: bold;
    animation: z4m8k3p7 2s ease-in-out infinite;
}

@keyframes z4m8k3p7 {
    0%, 100% {
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 25px rgba(255, 255, 255, 0.4);
    }
    50% {
        text-shadow: 0 0 25px rgba(255, 255, 255, 0.9), 0 0 35px rgba(255, 255, 255, 0.6), 0 0 45px rgba(0, 212, 255, 0.3);
    }
}

.z8x5c3v1b a {
    color: var(--yx-light);
    text-decoration: none;
    transition: all 0.3s ease;
}

.n4m8l6k3j {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

.n4m8l6k3j a {
    color: var(--yx-light);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 25px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.n4m8l6k3j a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

.n4m8l6k3j a:hover::before {
    width: 350px;
    height: 350px;
}

.n4m8l6k3j a:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
}

.g7h5j9k2l {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.05) 0%, rgba(0, 102, 255, 0.08) 100%);
    overflow: hidden;
}

.p3o8i5u7y {
    position: relative;
}

.t6r9e4w2q {
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.5s ease;
}

.t6r9e4w2q.a1s3d5f7g {
    animation: t8y3u5i2 0.8s ease-out;
}

@keyframes t8y3u5i2 {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.t6r9e4w2q:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 212, 255, 0.25);
}

.t6r9e4w2q img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.t6r9e4w2q:hover img {
    transform: scale(1.08);
}

.h8j4k6l9m {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(10, 14, 39, 0.95), rgba(10, 14, 39, 0.6), transparent);
    color: var(--yx-light);
    padding: 40px 30px;
    transform: translateY(0);
    transition: all 0.5s ease;
}

.t6r9e4w2q:hover .h8j4k6l9m {
    padding: 50px 30px;
}

.h8j4k6l9m h2 {
    font-size: 32px;
    margin-bottom: 12px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.h8j4k6l9m p {
    font-size: 18px;
    opacity: 0.95;
}

.b3n6m8v4c {
    min-height: calc(100vh - 200px);
}

.k5l9p2o3i {
    padding: 70px 0;
}

.u7y9i3o2p {
    font-size: 42px;
    text-align: center;
    margin-bottom: 60px;
    background: linear-gradient(135deg, var(--yx-c1), var(--yx-c3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
    animation: u5i9o3p7 3s ease-in-out infinite alternate;
}

@keyframes u5i9o3p7 {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(15deg);
    }
}

.r5t7y2u4i {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 35px;
}

.e3w5q8a7s {
    background: var(--yx-light);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    animation: e7s3a9q5 0.6s ease-out;
}

@keyframes e7s3a9q5 {
    from {
        transform: scale(0.85) translateY(30px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.e3w5q8a7s:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 45px rgba(0, 153, 255, 0.25);
}

.e3w5q8a7s a {
    text-decoration: none;
    color: var(--yx-text);
    display: block;
}

.d2f5g9h3j {
    position: relative;
    overflow: hidden;
}

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

.e3w5q8a7s:hover .d2f5g9h3j img {
    transform: scale(1.12);
    filter: brightness(1.15);
}

.k8l3m5n7b {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, var(--yx-c1), var(--yx-c3));
    color: var(--yx-light);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.e3w5q8a7s h3 {
    font-size: 18px;
    margin: 18px 16px 10px;
    color: var(--yx-text);
    font-weight: 600;
}

.e3w5q8a7s p {
    margin: 0 16px 8px;
    color: #6b7280;
    font-size: 14px;
}

.e3w5q8a7s time {
    display: block;
    margin: 0 16px 18px;
    color: #9ca3af;
    font-size: 13px;
}

.v7c9x4z2n {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
}

.m8n2b5v9c {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 35px;
}

.x4c7v2b8n {
    background: var(--yx-light);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}

.x4c7v2b8n:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(252, 211, 77, 0.3);
}

.x4c7v2b8n a {
    text-decoration: none;
    color: var(--yx-text);
    display: flex;
    gap: 0;
}

.x4c7v2b8n img {
    width: 180px;
    height: 140px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.x4c7v2b8n:hover img {
    transform: scale(1.1);
}

.l9k5j3h8g {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.l9k5j3h8g h3 {
    font-size: 17px;
    margin-bottom: 12px;
    color: var(--yx-text);
    font-weight: 600;
    line-height: 1.5;
}

.l9k5j3h8g p {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 12px;
    line-height: 1.7;
}

.l9k5j3h8g time {
    color: #9ca3af;
    font-size: 12px;
}

.f6d9s3a8j {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 50%, #f9a8d4 100%);
}

.p9o4i6u2y {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 35px;
}

.t3r7e9w2q {
    background: var(--yx-light);
    padding: 28px;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    animation: t9w2q5e7 0.7s ease-out;
}

@keyframes t9w2q5e7 {
    from {
        transform: rotateX(15deg) scale(0.9);
        opacity: 0;
    }
    to {
        transform: rotateX(0) scale(1);
        opacity: 1;
    }
}

.t3r7e9w2q:hover {
    transform: scale(1.04) translateY(-5px);
    box-shadow: 0 15px 40px rgba(249, 168, 212, 0.25);
}

.y8u5i2o9p {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.y8u5i2o9p img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--yx-c1);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
}

.a5s7d9f3g strong {
    display: block;
    color: var(--yx-text);
    font-size: 17px;
    font-weight: 600;
}

.a5s7d9f3g time {
    font-size: 13px;
    color: #9ca3af;
}

.t3r7e9w2q p {
    color: #4b5563;
    line-height: 1.9;
    font-size: 15px;
}

.z2x9c5v7b {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    padding: 50px 0;
}

.n8m4k6j2h {
    background: var(--yx-light);
    padding: 35px;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.n8m4k6j2h h3 {
    font-size: 26px;
    margin-bottom: 25px;
    color: var(--yx-text);
    text-align: center;
    font-weight: bold;
}

.l5p8o3i9u {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.l5p8o3i9u a {
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--yx-c1), var(--yx-c3));
    color: var(--yx-light);
    text-decoration: none;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
}

.l5p8o3i9u a:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.35);
}

.q4w8e6r3t {
    background: linear-gradient(135deg, var(--yx-dark) 0%, var(--yx-darker) 100%);
    color: var(--yx-light);
    padding: 50px 0;
    text-align: center;
    margin-top: 80px;
}

.y7u9i2o5p p {
    margin: 12px 0;
    font-size: 15px;
    opacity: 0.9;
}

.i3u7y9o2p {
    position: fixed;
    bottom: 35px;
    right: 35px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--yx-c1), var(--yx-c3));
    color: var(--yx-light);
    border: none;
    border-radius: 50%;
    font-size: 26px;
    cursor: pointer;
    box-shadow: 0 6px 25px rgba(0, 212, 255, 0.3);
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    z-index: 999;
}

.i3u7y9o2p.visible {
    opacity: 1;
    visibility: visible;
    animation: i7o2p9y3 0.6s ease-out;
}

@keyframes i7o2p9y3 {
    from {
        transform: scale(0) rotate(270deg);
    }
    to {
        transform: scale(1) rotate(0deg);
    }
}

.i3u7y9o2p:hover {
    transform: translateY(-6px) scale(1.15);
    box-shadow: 0 10px 35px rgba(0, 212, 255, 0.5);
}

@media (max-width: 768px) {
    .z8x5c3v1b {
        font-size: 26px;
    }

    .n4m8l6k3j {
        gap: 18px;
        justify-content: center;
    }

    .n4m8l6k3j a {
        font-size: 14px;
        padding: 8px 16px;
    }

    .t6r9e4w2q img {
        height: 350px;
    }

    .u7y9i3o2p {
        font-size: 32px;
    }

    .r5t7y2u4i {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 25px;
    }

    .m8n2b5v9c {
        grid-template-columns: 1fr;
    }

    .x4c7v2b8n a {
        flex-direction: column;
    }

    .x4c7v2b8n img {
        width: 100%;
        height: 220px;
    }

    .p9o4i6u2y {
        grid-template-columns: 1fr;
    }

    .i3u7y9o2p {
        bottom: 25px;
        right: 25px;
        width: 50px;
        height: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

img {
    display: block;
    max-width: 100%;
}

a {
    cursor: pointer;
}