body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

img{
    margin: 0;
    padding: 0;
}

.header{
    width: 100%;
    height: 1044px;
    background-image: url('../images/success_bg_1.png');
    background-size: cover;
    text-align: center;
}

@keyframes zoom {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.1);
    }
}

.header-logo{
    width: 754px;
    height: 298px;
    margin-top: 200px;
}

.header-logo:hover{
    animation: zoom 0.3s forwards;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.header-down{
    position: absolute;
    bottom: 125px;
    left: 50%;
    transform: translateX(-50%);
    animation: blink 1s infinite;
}

.skill{
    width: 100%;
    height: 1280px;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url('../images/success_bg_2.png');
}

@keyframes floatingLantu {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(-5%);
    }
    100% {
        transform: translateY(-0%);
    }
}

.lantu{
    width: 742px;
    height: 992px;
    margin-top: 250px;
    animation: floatingLantu 2.5s ease-in-out infinite;
}

.info{
    height: 1015px;
    background-image: url('../images/success_bg_3.png');
}

.qrcode{
    height: 1021px;
    background-image: url('../images/success_bg_4.png');
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.back-home{
    width: 320px;
    height: 135px;
    z-index: 10;
    background-image: url('../images/back_home.png');
}

.back-home:hover{
    background-image: url('../images/back_home_checked.png');
}