* {
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
    font-family: 微软雅黑;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: #FFF;
    font-weight: bold;
    font-size: 3.9vw;
    /* color: #FFF !important; */
}

ul,
p {
    margin: 0;
    padding: 0;
}

.pg-tips {
    margin-top: 3vw;
    font-size: 4.2vw;
    font-weight: bold;
}

h1 {
    font-size: 5vw;
    font-weight: bold;
}

.box {
    background-color: #1B2132;
}

.header-BZDH86 {
    background-color: #181A2F;
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #FFF;
    padding: 3.5vw 4.3vw;
    padding-bottom: 0;
    box-shadow: 0 1px 6px 0 #000;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
}

.header-BZDH86>.header-BZDH86-1 {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.header-BZDH86>.header-BZDH86-1>img {
    width: 25vw;
    height: 25vw;
    border-radius: 3vw;
    margin-right: 5vw;
}

.header-BZDH86>.header-BZDH86-1>.info {
    height: 25vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.nav {
    width: 100%;
    border-top: 2px solid #000;
    display: flex;
    justify-content: center;
    background-color: #181A2F;
    margin-top: 3vw;
    padding: 3vw;
}

.nav>a {
    color: #FFF;
    font-size: 4.2vw;
    padding: 2vw 5vw;
    background-color: #E6601B;
    border-radius: 3vw;
}

.nav>a:first-child {
    margin-right: 5vw;
    background-color: #131724;
}

.yum {
    /* background-color: rgba(134, 74, 249, .35); */
    border-radius: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5vw 0;
    font-size: 9vw;
    font-weight: bold;
}

.yum>span:first-child {
    color: #7B52FF;
    text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
    font-family: Canva Sans, Noto Sans Variable, Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
    animation: scaleFont 2s infinite;
}

@keyframes scaleFont {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0) scale(1);
        /* 初始位置和每次跳动的高度，同时取消旋转 */
    }
    40% {
        transform: translateY(-2vw) scale(1.05);
        /* 跳起的高度，同时逆时针旋转 */
    }
    60% {
        transform: translateY(-1.5vw) scale(1);
        /* 落下的高度，同时顺时针旋转 */
    }
}

.gif {
    display: flex;
}

.gif>img {
    margin: 1vw auto;
    width: 90%;
    border-radius: 3vw;
}

.YF28-CC {
    display: flex;
    padding: 5vw 3vw;
    flex-wrap: wrap;
}

.YF28-CC>.list {
    width: 30%;
    background-color: #272D3F;
    border-radius: 2vw;
    margin: 3.5vw 1.5vw;
    box-shadow: 0 1px 6px 0 #000;
}

.YF28-CC>.list>a {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2vw;
    box-sizing: border-box;
}

.YF28-CC>.list>a>img {
    width: 100%;
}

.tips {
    margin-top: 6vw;
    margin-bottom: 1vw;
}

.q28-none {
    display: none;
}

.jdb-h1 {
    font-size: 5vw;
    font-weight: bold;
}

.footer-sj {
    color: #fff;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(-20px);
    font-size: 3.5vw;
    font-family: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
}

.footer-sj>.footer-img {
    text-align: center;
    width: 96%;
    border-top: 1px solid rgba(43, 59, 74, .3);
    padding: 3.5vw 0;
}

.footer-sj>.footer-img>img {
    width: 60%;
}

.footer-sj>.footer-sj-YF28-CC {
    padding-top: 5vw;
    width: 96%;
    border-top: 1px solid rgba(43, 59, 74, .3);
    margin-bottom: 3vw;
    display: flex;
    justify-content: center;
}

.footer-sj>.footer-sj-YF28-CC>a {
    margin: 0 1.5vw;
}

.footer-sj>.footer-sj-YF28-CC>a>img {
    width: 7.9vw;
}

@media screen and (min-width: 1200px) {
    .pg-tips {
        display: none;
    }
    .jdb-h1 {
        font-size: 1.5vw;
        font-weight: bold;
    }
    a {
        font-size: 1vw;
    }
    h1 {
        font-size: 1.6vw;
    }
    .yum {
        border-radius: 3vw;
        padding: 3.5vw 0;
        font-size: 2.7vw;
        font-weight: bold;
    }
    .yum>span:first-child {
        animation: scaleFont 2s infinite;
    }
    @keyframes scaleFont {
        0%,
        20%,
        50%,
        80%,
        100% {
            transform: translateY(0) scale(1);
            /* 初始位置和每次跳动的高度，同时取消旋转 */
        }
        40% {
            transform: translateY(-1vw) scale(1.05);
            /* 跳起的高度，同时逆时针旋转 */
        }
        60% {
            transform: translateY(-.6vw) scale(1);
            /* 落下的高度，同时顺时针旋转 */
        }
    }
    .nav {
        width: 50%;
        margin-top: 1vw;
        justify-content: flex-end;
        border-top: none;
    }
    .nav>a {
        font-size: .9vw;
        padding: .7vw 1.2vw;
        border-radius: .7vw;
    }
    .nav>a:nth-child(2) {
        margin-right: 6vw;
    }
    .header-BZDH86 {
        padding: 1.7vw 4.3vw;
        flex-direction: row;
        justify-content: space-between;
    }
    .header-BZDH86>.header-BZDH86-1 {
        width: 50%;
        justify-content: start;
    }
    .header-BZDH86>.header-BZDH86-1>img {
        width: 7vw;
        height: 7vw;
        border-radius: 1.2vw;
        margin-right: 5vw;
    }
    .header-BZDH86>.header-BZDH86-1>.info {
        height: 7vw;
    }
    .yum {
        border-radius: 1.2vw;
        padding: 1vw 0;
    }
    p {
        margin: 1vw !important;
    }
    .gif {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .q28-none {
        display: block;
    }
    .gif>img {
        width: 22%;
        margin: .7vw;
        border-radius: 1vw;
    }
    .YF28-CC {
        padding: 2vw 1.5vw;
    }
    .YF28-CC>.list {
        width: 10%;
        border-radius: 1vw;
        margin: 1vw 2vw;
    }
    .YF28-CC>.list>a {
        padding: .7vw;
    }
    .tips {
        margin-top: 6vw;
        margin-bottom: 1vw;
    }
    .footer-sj {
        font-size: 1.2vw;
    }
    .footer-sj>.footer-sj-YF28-CC {
        margin-top: 2vw;
        padding-top: 2vw;
        margin-bottom: 1.2vw;
    }
    .footer-sj>.footer-sj-YF28-CC>a>img {
        width: 2vw;
    }
    .footer-sj>.footer-img {
        text-align: center;
        width: 50%;
        border-top: 1px solid rgba(43, 59, 74, .3);
        padding: 1.2vw 0;
    }
    .footer-sj>.footer-img>img {
        width: 60%;
    }
}