body {
    background-color: #000000;
}

#intro-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
    opacity: 0; /* 初始不可见 */
    transition: opacity 1s ease; /* 淡入动画效果 */
}

#intro-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
}

.center-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center; /* 垂直居中 */
    color: #fff; /* 文字顏色 */
    z-index: 10; /* 确保在其他元素之上 */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.24);
    padding: 1.5rem 0;
}

.background-box {
    position: absolute;
    top: auto;
    left: -10%;
    right: auto;
    bottom: auto;
    z-index: -1; /* 在文字后面 */
    width:120%; /* 设置宽度为80% */
    height: 100%; /* 设置高度为60% */
    border-radius: 20px;
    align-items: center; /* 垂直居中 */
    background: rgba(68, 68, 68, 0.8);
    box-shadow: 0 2px 10px rgba(41, 41, 41, 0.5);
}

.video-img {
    width: 130px; /* 设定宽度 */
    height: auto; /* 保持纵横比 */
    margin-right: 10px; /* 图像和分隔线之间的间距 */
    animation: slideInRight 2s forwards; /* 图片从右滑入 */
}

.divider {
    border-left: 5px solid #fff; /* 垂直分隔线 */
    height: 80px; /* 线的高度 */
    margin: 0px 25px; /* 左右边距 */
    animation: fadeInRotate 2s forwards; /* 线淡入并旋转 */
}

.title-text {
    font-size: 42px; /* 修改为你想要的大小 */
    line-height: 1.2; /* 行间距 */
    color: #ffffff; /* 字体颜色 */
    animation: slideInLeft 2s forwards; /* 文字从左滑入 */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    font-weight: bolder; /* 设置为粗体 */
    white-space: nowrap;
    margin: 0;
}


.subtitle-text {
    font-size: 26px; /* 修改为你想要的大小 */
    line-height: 1.2; /* 行间距 */
    color: #ffffff; /* 字体颜色 */
    animation: slideInLeft 2s forwards;/* 文字从左滑入 */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    font-weight: bolder; /* 设置为粗体 */
    white-space: nowrap;
    margin-top: 5px;
}


/* 动画效果 */
@keyframes fadeInRotate {
    0% {
        opacity: 0;
        transform: rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: rotate(1080deg);
    }
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}


@media (max-width: 800px) {
    .video-img {
        width: 100px; /* 设定新的宽度 */
        margin-right: 3px; /* 图像和分隔线之间的间距 */
    }
    .title-text {
        font-size: 32px; /* 修改为你想要的大小 */
    }
    .subtitle-text {
        font-size: 20px; /* 修改为你想要的大小 */
    }
    .background-box {
        width:115%; /* 设置宽度为80% */
    }
}