﻿* {
    padding: 0;
    margin: 0;
}

.wznt {
    background: url(../images/wznt.jpg) no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 11.6vw 8vw 0 8vw;
    display: none;
}

.wznt-bd {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wznt-text img {
    display: block;
    width: 100%;
}

.wznt-jqr {
    width: 30vw;
    position: relative;
    margin-top: 5vw;
}

.wznt-jqr-bd img {
    display: block;
    width: 100%;
}

.wznt-jqr-eye {
    width: 44.9%;
    position: absolute;
    left: 10%;
    top: 27.5%;
    z-index: 9;
}

.wznt-jqr-eye img {
    display: block;
    width: 100%;
    animation: blink 8s infinite;
}

.wznt-btn {
    width: 35.6vw;
    display: flex;
    align-items: center;
    position: relative;
}

.wznt-btn::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50px;
    box-shadow: 0 0 30px rgba(255, 255, 255, .5);
    animation: _btndx 3s infinite;
    background: #04478e;
}

@keyframes _btndx {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.1, 1.2);
    }

    50% {
        transform: scale(1);
    }

    75% {
        transform: scale(1.1, 1.2);
    }

    100% {
        transform: scale(1);
    }
}

.wznt-btn img {
    width: 100%;
    position: relative;
    z-index: 8;
}

.wznt-btn-gx {
    position: absolute;
    left: 2.5vw;
    width: 6.058vw;
    z-index: 9;
}

.wznt-btn-gx img {
    animation: _gx 5s infinite;
}

@keyframes _gx {
    0% {
        opacity: 1;
        transform: scale(1);
        border-radius: 0;
    }

    10% {
        opacity: .8;
    }

    20% {
        opacity: .9;
        transform: scale(.85);
        border-radius: 5% 20% 50% 20%;
    }

    30% {
        opacity: .6;
    }

    40% {
        opacity: 1;
        transform: scale(.9);
        border-radius: 50% 10% 30% 50%;
    }

    50% {
        opacity: .85;
    }

    60% {
        opacity: .7;
        transform: scale(.75);
        border-radius: 0% 50% 0% 30%;
    }

    70% {
        opacity: .9;
    }

    80% {
        opacity: .75;
        transform: scale(.8);
        border-radius: 10% 20% 50% 30%;
    }

    90% {
        opacity: .6;
    }

    100% {
        opacity: 1;
        transform: rotate(360deg);
        transform: scale(.9);
    }
}

@keyframes blink {

    0%,
    10% {
        transform: scaleY(1);
    }

    5%,
    15% {
        transform: scaleY(0.5);
    }

    30%,
    40% {
        transform: scaleY(1);
    }

    35%,
    45% {
        transform: scaleY(0.5);
    }

    60%,
    70% {
        transform: scaleY(1);
    }

    65%,
    75% {
        transform: scaleY(0.5);
    }

    85%,
    95% {
        transform: scaleY(0.5);
    }

    80%,
    100% {
        transform: scaleY(1);
    }
}



@media screen and (max-width:1024px) {
    .wznt {
        display: block;
    }
}