body {
    padding: 0px;
    margin: 0px;
}

.container {
    width: 100vw;
}

.container-content {
    width: 100vw;
}


/** 顶部悬浮 **/

.header {
    width: 100%;
    height: 13.6vw;
    background-image: url('../img/header-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    position: fixed;
    z-index: 100;
    align-items: center;
    justify-content: center;
}

.header-content {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    width: 12.4vw;
    height: 12.4vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    margin-left: 1.466666667vw;
}

.header-avatar {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* background-image: url('../img/icon.png'); */
}

.header-middle-content {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 13.3333vw;
}

.header-right {
    width: 29.7333vw;
    height: 8.5333vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    right: 2vw;
    position: relative;
}

.header-right-button {
    width: 100%;
    height: 100%;
    background-image: url('../img/book.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: scaleAnimation 1s infinite alternate;
}


/** 背景 **/

.body-content {
    width: 100%;
    height: 276.9333333vw;
    background-image: url('../img/bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    top: 13.6vw;
    position: relative;
    margin-bottom: 13.6vw;
}
.book-btn{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 50;
    top: 113.6vw;
}
.body-btn{
    width: 43.3333vw;
    height: 12.5333vw;
    background-image: url('../img/book-btn.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: scaleAnimation 1s infinite alternate;
}

.footer-btn-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 50;
    top: 178.6vw;
    left: .8vw;
}

.footer-btn {
    width: 29.33333333vw;
    height: 29.73333333vw;
    background-image: url('../img/body-btn.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: scaleAnimation 1s infinite alternate;
}

.finger {
    width: 15.87vw;
    height: 16.3765vw;
    background-image: url('../img/finger.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 9.2vw;
    left: 63.6vw;
    animation: scaleAnimation 1s infinite alternate;
}

.alert-container {
    width: 100%;
    height: 100vh;
    background-color: rgb(0, 0, 0, 0.9);
    position: fixed;
    z-index: 2000;
    display: flex;
    justify-content: center;
}

.alert-content {
    width: 100%;
    height: 98.9333vw;
    background-image: url('../img/alert-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50.4vw;
}

.alert-btn {
    width: 43.2vw;
    height: 12.5333vw;
    background-image: url('../img/alert-btn.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 147vw;
    /* left: 48.8vw; */
    animation: scaleAnimation 1s infinite alternate;
}

.alert-finger {
    width: 12.53333333vw;
    height: 12.93333333vw;
    background-image: url('../img/finger.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 112.2vw;
    left: 79vw;
    animation: scaleAnimation 1s infinite alternate;
}

.alert-close {
    width: 9.0667vw;
    height: 9.0667vw;
    background-image: url('../img/close.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 41vw;
    left: 83.7vw;
}

@keyframes scaleAnimation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}


/** 底部公司信息 **/

.footer-container {
    width: 100Vw;
    height: 53.6vw;
    display: flex;
    flex-direction: column;
    background: black;
    position: relative;
    background-image: url('../img/footer-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    align-items: center;
    position: relative;
}

.footer-url {
    width: 67vw;
    height: 9.2vw;
    position: absolute;
    top: 30vw;
    /* border-bottom: 1px solid white; */
    display: flex;
    justify-content: space-between;
    text-align: center;
    line-height: 9.2vw;
}

.body-next-img {
    width: 32vw;
    height: 9.2vw;
    border-radius: 10vw;
    /* background-image: url('../img/right.png'); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.body-prev-img {
    width: 32vw;
    height: 9.2vw;
    border-radius: 10vw;
    /* background-image: url('../img/left.png'); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.footer-url a {
    color: #a9a9a9;
    text-decoration: none;
    font-size: 1.6vw;
}

/* 底部导航栏 */
.footer-nav {
    width: 100vw;
    height: 43.0667vw;
    background-image: url('../img/footer-float.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}