@font-face {
    font-family: 'ez';
    src: url('../images/ez.ttf') format('truetype');
}
body {
    font-family: 'ez';
}
.page {
    width: 100vw;height: 100vh;position: absolute;
    left: 0vw;top: 0vw;
    z-index: 1000;overflow: hidden;display: none;
}
.basebg {
    width: 100%;
    position: fixed;
    left: 0vw;
    top: 0vw;
    z-index: -100;
}
.bg {
    animation: 2s bg forwards;
    width: 100%;
    position: fixed;
    left: 0vw;
    top: 0vw;
    z-index: -100;
}
@keyframes bg {
    0% {
        transform: scale(1.1)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}
.sty_1 {
    animation: 1s sty_1 forwards;
    opacity: 0;
    width: 30vw;
    top: 8vw;
    left: 9vw;
    position: absolute;
    z-index: 10;
}
@keyframes sty_1 {
0% { transform: translateY(-6vw);}
    100% {
        opacity: 1;
        transform: translateY(0vw);
    }
}
.sty_2 {
    animation: 1s 0.3s sty_2 forwards;
    opacity: 0;
    width: 77vw;
    top: 11vw;
    left: 12vw;
    position: absolute;
    z-index: 10;
}
@keyframes sty_2 {
    0% {
        transform: translateY(-6vw);
    }

    100% {
        opacity: 1;
        transform: translateY(0vw);
    }
}
.sty_3 {
    animation: 2s 0.5s sty_3 forwards;
    opacity: 0;
    width: 43vw;
    top: 97vw;
    left: 57vw;
    position: absolute;
    z-index: 10;
}
@keyframes sty_3 {
    0% {
        transform: translateX(6vw);
    }

    100% {
        opacity: 1;
        transform: translateX(0vw);
    }
}
.sty_4 {
    animation: 1s 0.8s sypanel forwards;
    opacity: 0;
    width: 54vw;
    top: 149vw;
    left: 23vw;
    position: absolute;
    z-index: 10;
}

.sty_5 {
    animation: 1s 1s sypanel forwards;
    opacity: 0;
    width: 32vw;
    top: 171vw;
    left: 34vw;
    position: absolute;
    z-index: 10;
}
.sty_6 {
    animation: 1s 1.2s sypanel forwards;
    opacity: 0;
    width: 60vw;
    top: 181vw;
    left: 20vw;
    position: absolute;
    z-index: 10;
}
.sty_7 {
    animation: 1s 0.3s sty_7 forwards;
    opacity: 0;
    width: 36vw;
    top: 95vw;
    left: 32vw;
    position: absolute;
    z-index: 11;
}
@keyframes sty_7 {
    0% {
        transform: translateY(6vw);
    }

    100% {
        opacity: 1;
        transform: translateY(0vw);
    }
}
.sypanel {
    animation: 1s 0.6s sypanel forwards;
    opacity: 0;
    width: 50vw;
    height: 14vw;
    overflow: hidden;
    text-align: center;
    position: absolute;
    left: 25vw;
    top: 130vw;
}
@keyframes sypanel {
    0% {
        transform: translateY(6vw);
    }

    100% {
        opacity: 1;
        transform: translateY(0vw);
    }
}
    .sypanel .sytitle {
        width: 100%;
        height: auto;
        text-align: center;
        font-size: 3vw;
        color: #79b7f0;
    }
    .sypanel .jdt {
        width: 100%;
        height: 8px;
        position: relative;
        background: #c7d7f0;
        border-radius: 20px;
        margin-top: 2vw;
    }
        .sypanel .jdt .jd1 {
            width: 100%;
            height: 8px;
            left: 0vw;
            top: 0vw;
            position: absolute;
            background: #0148ba;
            border-radius: 20px;
        }
    .sypanel .jd2 {
        width: 100%;
        min-width: 5vw;
        height: auto;
        left: 0vw;
        top: 0vw;
        position: absolute;
        color: #0148ba;
        font-size: 2.4vw;
        margin-top: 10px;
        text-align: right;
    }
.sty_8 {
    animation: 1s sty_8 forwards;
    opacity: 0;
    width: 54vw;
    top: 171vw;
    left: 23vw;
    position: absolute;
    z-index: 11;
}
@keyframes sty_8 {
    0% {
        transform: translateY(-6vw);
    }

    100% {
        opacity: 1;
        transform: translateY(0vw);
    }
}
.sty_9 {
    animation: 1s sty_9 forwards;
    opacity: 0;
    width: 88vw;
    top: 29vw;
    left: 6vw;
    position: absolute;
    z-index: 11;
}
@keyframes sty_9 {
    0% {
        transform: translateY(6vw);
    }

    100% {
        opacity: 1;
        transform: translateY(0vw);
    }
}
.sty_10 {
    animation: 1s 1s sty_10 forwards;
    opacity: 0;
    width: 19vw;
    top: 121vw;
    left: 40.5vw;
    position: absolute;
    z-index: 11;
}
@keyframes sty_10 {
    0% {
        transform: scale(0.7)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}
.sty_11 {
    animation: 2s 1s sty_10 forwards;
    opacity: 0;
    width: 84vw;
    top: 173vw;
    left: 8vw;
    position: absolute;
    z-index: 11;
}
@keyframes sty_11 {
    0% {
        transform: translateY(6vw);
    }

    100% {
        opacity: 1;
        transform: translateY(0vw);
    }
}
.sty_12 {
    width: 82vw;
    top: 5vw;
    left: 2vw;
    position: absolute;
    z-index: 11;
}
.sty_13 {
    width: 93vw;
    top: 43vw;
    left: 4vw;
    position: absolute;
    z-index: 1;
    opacity: 1
}
.sty_14 {
    width: 54vw;
    top: 171vw;
    left: 23vw;
    position: absolute;
    z-index: 11;
}
.sty_15 {
    width: 46vw;
    top: 120vw;
    left: 4vw;
    position: absolute;
    z-index: 111;
}
.sty_16 {
    width: 100vw;
    top: 57vw;
    left: 0vw;
    position: absolute;
    z-index: 8;
}
.sty_17 {
    width: 24vw;
    top: 120vw;
    left: 27vw;
    position: absolute;
    z-index: 11;
}
.sty_18 {
    width: 42vw;
    top: 80vw;
    left: 47.5vw;
    position: absolute;
    z-index: 11;
}
.sty_19 {
    width: 42vw;
    top: 49vw;
    left: 14vw;
    position: absolute;
    z-index: 11;
}

.hd {
    width: 72vw;
    height: 10vw;
    top: 123vw;
    left: 14vw;
    position: absolute;
    z-index: 11;
    color: #838183;
    line-height: 10vw;
    font-size: 4vw;
    text-align: center;
    background: #4b494c;border-radius: 10vw;
}
    .hd div {
        width: 17vw;
        height: 10vw;
        position: absolute;
        background: #f5911e;
        border-radius: 10vw;
        text-align: center;
    }
.hd div img {
    width: 7vw;margin-top: 2.5vw;
}
        .sty_20 {
            width: 64vw;
            top: 47vw;
            left: 18vw;
            position: absolute;
            z-index: 11;
        }
.sty_21 {
    width: 15vw;
    top: 145vw;
    left: 42.5vw;
    position: absolute;
    z-index: 11;
}
.sty_22 {
    width: 72vw;
    top: 46vw;
    left: 14vw;
    position: absolute;
    z-index: 11;
}
.sty_23 {
    width: 64vw;
    top: 123vw;
    left: 18vw;
    position: absolute;
    z-index: 11;
}
.txm {
    width: 56vw;
    height: 20px;
    border: 1px red solid;
    position: absolute;
    z-index: 16;
    top: 92vw;
    left: 22vw;
}
#video {
    width: 100%;height: 100%;
    background: #000;position: absolute;
    left: 0vw;top: 0vw;
    z-index: 100;display: none;
}
.ts {
    width: 100%;
    height: auto;
    color: #fff;
    font-size: 4vw;
    text-align: center;
    position: absolute;
    left: 0vw;
    bottom: 30vw;
    z-index: 101;
    display: none;
}
.fanhui {
    width: 30vw;
    height: 9vw;
    color: #fff;
    font-size: 4vw;
    text-align: center;
    position: absolute;
    left: 35vw;
    bottom: 16vw;
    z-index: 101;
    background: #0148ba;
    border-radius: 5vw;
    border: none;
    display: none;
}
.pz {
    width: 30vw;
    height: 9vw;
    color: #fff;
    font-size: 4vw;
    text-align: center;
    position: absolute;
    left: 35vw;
    bottom: 34vw;
    z-index: 101;
    background: #0148ba;
    border-radius: 5vw;
    border: none;
}