@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap);
/* 通配选择器 */
*{
    /* 将所有浏览器的外边距清零 */
    margin: 0;
    /* 将所有浏览器的内边距清零 */
    padding: 0;
    /* 全页面统一使用Poppins字体，如果加载失败，回退到无衬线字体族 */
    font-family: 'Poppins', sans-serif; 
}
body{ 
    background: #0a2a43;
}
section{ 
    /* 成为包含块，后面伪元素用 absolute 会相对于它定位 */
    position: relative;
    width: 100%;
    height: 100vh;/* vh单位：当前窗口可见区域的高度 */
    /* 把超出部分裁掉，防止出现滚动条 */
    overflow: hidden;
    /* 开启弹性盒子 */
    display: flex;
    /* 主轴水平居中 */
    justify-content: center;
    /* 交叉轴垂直居中 */
    align-items: center;
}
section:before{ 
    /* 伪元素必须有 content 才显示 */
    content: '';
    /* 绝对定位 */
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    /* 从下往上由深靛蓝渐变到透明，制造“淡出”效果。 */
    background: linear-gradient(to top,#0a2a43,transparent);
    /* 拉高层级确保罩住图片 */
    z-index: 3;
}
section:after{ 
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a2a43;
    z-index: 3;
    /* 把这一层的“色相/饱和度”信息融合到下方图像，实现统一色调的滤镜效果 */
    mix-blend-mode: color;
}
section img{ 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 保持比例裁剪，填满容器不变形 */
    object-fit: cover;
    /* 让图片不拦截鼠标事件 */
    pointer-events: none;
}
#text{
    /* 保持其在正常文档流，但又可以 z-index 控制层级 */
     position: relative;
     color: #fff;
     font-size: 8vw;/* 1vw=视口宽度的1% */
     /* 层级高于图片（默认 z-index 是 auto，相当于 0），确保字浮在图上面 */
     z-index: 1;
}
#road{ 
    z-index: 2;
}

/* 3. 文章区样式 */
.content{
    /* 上下各留 80 px 的“呼吸区”，左右各留 20 px */
    padding: 80px 20px;      /* 上下留呼吸空间 */
    max-width: 800px;        /* 阅读宽度 */
    margin: 0 auto;          /* 居中 */
}

.card{
    background: #f7f9fb;
    /* 四个角切成 12 px 的圆角 */
    border-radius: 12px;
    /* 卡片内部四周留 30 px 空白 */
    padding: 30px;
    /* 卡片与卡片之间空 40 px */
    margin-bottom: 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,.08);
}

.card h3{
    font-size: 1.8rem;
    /* 标题与下方段落留 15 px 空隙 */
    margin-bottom: 15px;
    color: #0a2a43;        /* 沿用主题色 */
}

.card h3 a {
    color: inherit;          /* 继续用深靛蓝 #0a2a43 */
}

.card p{
    font-size: 1rem;
}