/* 基础重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    padding: 0 !important;
    margin: 0 !important;
    color: #262626;
    font-family: SourceHanSansCN-Regular;
}

p {
    padding: 0;
    margin: 0;
}

ul {
    padding: 0 !important;
    margin: 0 !important;
}

ul, li {
    list-style: none;
}

img {
    vertical-align: bottom;
}

a {
    color: inherit !important;
    text-decoration: none !important;
}

.header {
    height: 0;
}

@font-face {
    font-family: 'SourceHanSansCN-Regular';
    src: url('/fonts/HONORSans-Regular.ttf');
}


@font-face {
    font-family: 'SourceHanSansCN-Bold';
    src: url('/fonts/HONORSans-Bold.ttf');
}

@font-face {
    font-family: 'HarmonyOS_Sans_Regular';
    src: url('/fonts/HONORSans-Regular.ttf');
}

@font-face {
    font-family: 'HONORSans-Medium';
    src: url('/fonts/HONORSans-Medium.ttf');
}


.blod {
    font-family: "SourceHanSansCN-Bold" !important;
}

.number {
    font-family: "HarmonyOS_Sans_Regular" !important;
}

.number-blod {
    font-family: "HONORSans-Medium" !important;
    font-weight: 900;
}


@media screen and (max-width: 1199px) {
    .pc {
        display: none;

    }

    .mobile {
        display: block;
        margin-top: 1rem;
    }
}

@media screen and (min-width: 1200px) {
    .pc {
        display: block;
        margin-top: 80px;
    }

    .mobile {
        display: none;
    }
}

.scroll-animation {
    transform: translateY(60px);
    opacity: 0;
    /* 初始状态不设置transition */
}

.scroll-animation.active {
    transform: translateY(0);
    opacity: 1;
    /* 只在激活状态设置过渡 */
    transition: all 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.scroll-left-animation {
    transform: translateX(-260px);
    opacity: 0;
    /* 初始状态不设置transition */
}

.scroll-left-animation.active {
    transform: translateX(0);
    opacity: 1;
    /* 只在激活状态设置过渡 */
    transition: all 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.scroll-right-animation {
    transform: translateX(260px);
    opacity: 0;
    /* 初始状态不设置transition */
}

.scroll-right-animation.active {
    transform: translateX(0);
    opacity: 1;
    /* 只在激活状态设置过渡 */
    transition: all 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.scroll-top-animation {
    transform: translateY(-60px);
    opacity: 0;
    /* 初始状态不设置transition */
}

.scroll-top-animation.active {
    transform: translateY(0);
    opacity: 1;
    /* 只在激活状态设置过渡 */
    transition: all 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/*.shake-animation {*/
/*    animation: shake 1s ease-in-out infinite alternate;*/
/*}*/

@keyframes shake {
    0%, 100% {
        transform: translateX(0) translateY(0);
    }
    25% {
        transform: translateX(-2px) translateY(-2px);
    }
    50% {
        transform: translateX(-5px) translateY(-5px);
    }
    75% {
        transform: translateX(-2px) translateY(-2px);
    }
}


@keyframes microVibration {
    0% { transform: translateX(0); }
    15% { transform: translateX(2.5px) rotate(0.15deg); }
    25% { transform: translateX(5px) rotate(0.3deg); }
    50% { transform: translateX(-5px) rotate(-0.3deg); }
    75% { transform: translateX(2.5px) rotate(0.1deg); }
}

.shake-animation {
    animation:
            subtleShake 6s ease-in-out infinite ,cubic-bezier(0.22, 0.61, 0.36, 1),
            microVibration 0.5s steps(3, end) infinite ;
}

.hover-3d {
    transition:
            transform 0.6s cubic-bezier(0.53, 2, 0.32, 2),
            box-shadow 0.4s ease;
}
.hover-3d:hover {
    transform:
            translateZ(30px)
            rotateX(5deg)
            rotateY(-5deg);
    box-shadow:
            0 20px 40px rgba(0,0,0,0.2),
            0 0 40px rgba(255,255,255,0.2) inset;
}

.shake-box {
    animation: smoothShake 2s ease-in-out infinite,cubic-bezier(0.5, 2, 0.5, 2);
    display: inline-block;
    /* 其他样式 */
}

@keyframes smoothShake {
    0%, 100% {
        transform: translate(0, 0) scale(1) ;
    }
    50% {
        transform: translate(30px, 10px) scale(1) ;
    }
}

.shake-box-2 {
    animation: smoothShake-2 2s ease-in-out infinite,cubic-bezier(0.5, 2, 0.5, 2);
    display: inline-block;
    /* 其他样式 */
}

@keyframes smoothShake-2 {
    0%, 100% {
        transform: translate(0, 0) scale(1) ;
    }
    50% {
        transform: translate(0px, -30px) scale(1) ;
    }
}