/* 字体 */
@font-face{
    font-family: "SourceHanSansSC-Medium-2";
    font-weight: 1 999;
    src: url("../font/SourceHanSansSC-Medium-2.otf");
}

@font-face{
    font-family: "Microsoft Yahei UI";
    font-weight: 1 999;
    src: url("../font/Microsoft Yahei UI.ttf");
}

/* 主体 */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* 防止出现滚动条 */
}

/* 背景设置：确保铺满和居中 */
.background {
    /* 强制占满整个浏览器窗口 */
    width: 100vw;  
    height: 100vh;
    
    /* 背景图设置 */
    background-image: url("../images/background.jpg");
    
    /* 核心：确保图片缩放、居中且不重复 */
    background-position: center center; 
    background-size: cover;             
    background-repeat: no-repeat;
    background-attachment: fixed;
    
    /* 弹性布局，确保内部元素居中基准正确 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 信息板容器：全屏覆盖，作为绝对定位元素的父容器 */
.info {
    position: relative;
    width: 100%;
    height: 100%;
    /* 去掉了原本的阴影和圆角 */
    box-shadow: none;
    border-radius: 0;
}

/* 按钮位置 */
.info .button {
    position: absolute;
    bottom: 32px; 
    left: 32px;
    width: 32px;
    height: 32px;
    z-index: 1000;
}

.info .button img {
    width: 100%;
    height: 100%;
    display: block;
}

/* 左侧遮罩 */
.info .left-box {
    position: absolute;
    top: 0;
    left: 0;
    /* 保持原设计的一半宽度 */
    width: 50%; 
    height: 100%;
    background-image: linear-gradient(to top right, rgba(200,104,107, 0.9), rgba(142,145,197, 0.5));
    z-index: 1;
}

/* 右侧遮罩 */
.info .right-box {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-color: rgb(100,100,100);
    opacity: 0.4;
    z-index: 1;
}

/* 时间文字区域 */
.info .time {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 使用 flexbox 居中时间内容 */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 2; 
}

.info .time .title {
    font-family: "SourceHanSansSC-Medium-2";
    color: white;
    letter-spacing: 2px;
    font-size: 24px;
    margin-bottom: 20px;
}

.info .time .time-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 1000px; 
    max-width: 90%; 
    height: 300px;
    margin-bottom: 48px;
}

.info .time .time-box div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 20%;
    height: 80%;
}

.info .time .time-box div p {
    font-family: "Microsoft Yahei UI", bold;
    color: white;
    font-size: 128px;
    margin: 0;
    font-size: clamp(60px, 10vw, 128px); 
}

.info .time .time-box div span {
    color: rgb(228, 228, 228);
    font-size: 32px;
    letter-spacing: 8px;
    opacity: 0.6;
}

.info .time .sub-title {
    font-family: "Microsoft Yahei UI";
    color: white;
    font-size: 20px;
    letter-spacing: 4px;
    margin: 0;
}

.info .time .sub-title.tips {
    margin: 16px;
}