:root {
    --vw-unit: 1vw; /* 初始值，会被JavaScript覆盖 */
}

html {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

body {
    flex: 1;
    padding: calc(var(--vw-unit) * 1);
    margin: 0; /* 移除浏览器默认的 body 外边距 */
    background-image: url(../image/bg.png); /* 设置背景图片路径 */
    background-repeat: no-repeat; /* 禁止背景图片重复 */
    background-size: 100% 100%; /* 背景图片拉伸至完全覆盖容器 */
    background-attachment: fixed; /* 背景固定不随页面滚动 */
}

body #header {
    width: 100%; /* 头部宽度占满父容器（body） */
    height: calc(var(--vw-unit) * 5);
}

body #header #titleDiv {
    width: 60%;
    height: calc(var(--vw-unit) * 5); /* 高度与父级头部一致 */
    float: left; /* 左浮动，使后续元素可并排 */
}

body #header #titleDiv img {
    height: calc(var(--vw-unit) * 4);
    float: left; /* 左浮动，与文本并排 */
    vertical-align: middle; /* 垂直居中 */
}

body #header #settingDiv {
    height: calc(var(--vw-unit) * 5); /* 高度与父级头部一致 */
    line-height: calc(var(--vw-unit) * 4); /* 行高与标题图片高度一致 */
    float: right; /* 右浮动，靠右对齐 */
    position: relative; /* 定位上下文（可能用于子元素绝对定位） */
}

body #header #settingDiv a span {
    color: #4582c2; /* 链接文本颜色为蓝色 */
    font-weight: 600; /* 半粗体 */
    margin-right: calc(var(--vw-unit) * 2);
}

body #mainSec {
    padding-top: calc(var(--vw-unit) * 3.8);
    width: 100%;
}

body #mainSec #contentDiv #title-name {
    text-align: center; /* 文字居中 */
    transform: translateY(calc(-1 * var(--vw-unit) * 1));
}

body #mainSec #contentDiv #title-name h1 {
    color: #2088f5; /* 标题颜色为亮蓝色 */
    font-size: calc(var(--vw-unit) * 3.8);
}

body #mainSec #contentDiv #desc-name {
    text-align: center; /* 文字居中 */
    transform: translateY(calc(-1 * var(--vw-unit) * 2.8));
}

body #mainSec #contentDiv #desc-name h2 {
    font-size: calc(var(--vw-unit) * 2);
}

body #mainSec #contentDiv #brief-introduction {
    text-align: center; /* 文字居中 */
    transform: translateY(calc(var(--vw-unit) * 1));
}

body #mainSec #contentDiv #brief-introduction h3 {
    font-size: calc(var(--vw-unit) * 2);
}

body #mainSec #contentDiv #immediate-use {
    text-align: center; /* 文字居中 */
    padding-top: 2%; /* 上内边距 2% */
}

body #mainSec #contentDiv #immediate-use a {
    text-decoration: none; /* 去除链接下划线 */
}

body #mainSec #contentDiv #immediate-use a span {
    color: #4582c2;
    font-size: calc(var(--vw-unit) * 1.8);
    font-weight: 500;
}

body #mainSec #contentDiv #immediate-use .use-apply {
    background-color: green; /* 深蓝色背景 */
    height: calc(var(--vw-unit) * 4); /* 高度与父链接的 line-height 一致，确保对齐 */
    border-radius: 10px; /* 圆角边框，使背景块呈现圆润矩形 */
    font-size: calc(var(--vw-unit) * 2);
    width: calc(var(--vw-unit) * 15.3);
    /*display: flex;*/
    justify-content: center; /* 文本水平居中 */
    align-items: center; /* 文本垂直居中 */
    padding: 5px;
}