.background {
    background-image: url("/static/information/sex/pictures/background.png");
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    flex-direction: column; /* 纵向排列 */
    align-items: center; /* 水平居中 */
    justify-content: flex-end; /* 使内容向底部对齐 */
    position: relative; /* 为绝对定位子元素提供相对定位的上下文 */
}

.boy_image {
    position: absolute; /* 绝对定位 */
    width: 30%;
    height: 16%;
    bottom: 33%; /* 距离底部 20% 的位置 */
    left: 10%; /* 水平居中 */
}

.girl_image {
    position: absolute; /* 绝对定位 */
    width: 30%;
    height: 16%;
    bottom: 33%; /* 距离底部 20% 的位置 */
    right: 10%; /* 水平居中 */
}

.button {
    position: absolute; /* 绝对定位 */
    width: 90%;
    height: 12%;
    bottom: 2%; /* 距离底部 20% 的位置 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 通过 translateX 使其居中 */
}


.boy_image,
.girl_image {
    transition: transform 0.3s ease; /* 设置过渡效果 */
}

.boy_image:hover,
.girl_image:hover {
    transform: scale(1.1); /* 鼠标悬浮时放大 */
}
.human{
    height: 30%;
    width: 80%;
    bottom: 55%;




}
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.slide-in-left {
    animation: slideInLeft 0.5s ease forwards;
}

.slide-in-right {
    animation: slideInRight 0.5s ease forwards;
}