/* 主体 */
body.主体 { margin: 0; }

/* 页眉 */
header.普通页眉 { position: fixed; top: 0; width: calc(100% - 2vw); z-index: 2020; height: 56px; padding: 0 1vw; display: flex; flex-direction: row; align-items: center; justify-content: space-between; background: white; transition: top 0.5s ease-out; }

/* 导航 */
nav.普通导航 { position: fixed; background-color: white; z-index: 500; transition: all 0.5s ease-out; }

/* 主区 */
main.普通主区 { margin-top: 56px; display: flex; }

/* 文章 */
article.普通文章 { display: flex; flex-wrap: wrap; flex: 1; background-color: #f5f5f5; min-width: 70%; }

/* 侧边 */
aside.普通侧边 { display: flex; flex-wrap: wrap; }

/* 页脚 */
footer.普通页脚 { width: 100%; }

/* 分区 */
div.弹性分区 { display: flex; }
div.弹性换行分区 { display: flex; flex-wrap: wrap; }
div.窄边分区 {  margin: 5px; padding: 5px; }
div.显示页面分区 { display: flex; flex-wrap: wrap; }
div.隐藏页面分区 { display: none; }
div.标头分区 { display: flex; align-items: center; }
div.小头分区 { display: flex; justify-content: space-between; width: 100%; }
div.右边距分区 { margin: 0 16px 0 0; }
div.内边距分区 { padding: 8px; }
div.全宽边距分区 { margin: 1vw; padding: 1vw; width: calc(100% - 4vw); }
div.缩略图分区:hover { filter: brightness(0.8); cursor: pointer; }
div.紧凑视频分区 { display: flex; cursor: pointer; margin: 10px; }
div.紧凑视频分区:hover { filter: brightness(0.9); background: rgb(0 0 0 / 5%); cursor: pointer; }
div.紧凑缩图分区 { position: relative; flex: 1; }
div.紧凑细节分区 { margin-left: 10px; flex: 2; }
div.建议搜索分区 { position: absolute; background: white; top: 40px; width: calc(100% - 90px + 2vw); }
div.面具分区 { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgb(0 0 0 / 80%); z-index: 1000; }
div.视频占位分区 { width: 100%; height: calc(30vw + 100px); }
div.全尺寸分区 { width: 100%; height: 100%; }

/* 标题 */
h5.矮边小标题 { margin: 2px 0; }

/* 按钮 */
button.图标按钮 { background: none; border: none; outline: none; }

/* 图片 */
img.小方图片 { width: 24px; height: 24px; }
img.小圆图片 { width: 36px; height: 36px; object-fit: cover; border-radius: 25px; }
img.小矮图片 { height: 24px; }
img.覆盖图片 { width: 100%; aspect-ratio: 1.3; object-fit: cover; }
img.包含图片 { width: 100%; height: 100%; object-fit: contain; }
img.加载中图片 { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 50px; height: 50px; z-index: 600; }

/* 段落 */
p.缩进段落 { text-indent: 2em; }
p.矮边段落 { margin: 2px 0; }
p.灰小矮段落 { color: gray; font-size: small; margin: 2px 0; }
p.建议搜索段落 { margin: 2px; padding: 10px; cursor: default; }
p.建议搜索段落:hover { background: #eaeaea; }

/* 行内 */
span.顶部行内 { font-size: 5px; color: gray; vertical-align: top; }
span.灰色行内 { color: gray; }
span.标题行内 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 1.4rem; }
span.右下行内 { position: absolute; background: rgb(0 0 0 / 50%); color: white; bottom: 0; right: 0; }

/* 链接 */
a.标识链接 { text-decoration: none; }
a.按钮链接 { display: flex; border: 1px solid #065fd4; padding: 5px 12px; color: #065fd4; text-decoration: none }
a.方块链接 { width: 72px; padding: 16px 0 14px; outline: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; color: gray; }

/* 表单 */
form.全宽表单 { display: flex; width: calc(100% - 20px); padding: 10px; background: white; position: relative; }
form.变宽表单 { display: flex; width: calc(80vw - 300px); position: relative; }

/* 输入 */
input.搜索输入 { border: 1px solid #ccc; border-right: none; box-shadow: inset 0 0 5px 3px rgb(130 130 130 / 10%); font-size: 16px; outline: none; flex: 1; padding: 5px; }
input.搜索输入:focus { outline: #a8a8ff auto 0.1px; }

/* 按钮 */
button.搜索按钮 { cursor: pointer; width: 65px; border: 1px solid #d3d3d3; background-color: #f8f8f8; border-radius: 0 2px 2px 0; }

/* 框架 */
iframe.小屏固定框架 { width: 100%; height: 100%; max-height: calc(30vw + 100px); }
iframe.小屏固定框架:focus { outline: none; }


/* 小尺寸 */
@media (max-width: 767.99px) {
    nav.普通导航 { bottom: 0; left: 0; right: 0; }
    nav.小屏隐藏导航 { display: none; }
    main.普通主区 { width: 100%; flex-wrap: wrap; }
    div.标头分区 { display: none; }
    div.小屏弹性分区 { display: flex; }
    div.丰富分区 { margin: 1% 0; width: 100%; }
    video.小屏固定视频 { position: fixed; left: 0; top: 0; z-index: 500; padding-top: 58px; background: black; }
}

/* 中尺寸 */
@media (min-width: 768px) and (max-width: 991.99px) {
    div.小头分区 { display: none; }
    nav.普通导航 { top: 56px; left: 0; bottom: 0; }
    main.普通主区 { margin-left: 72px; width: calc(100% - 72px); }
    div.丰富分区 { margin: 1%; width: 48%; }
}

/* 大尺寸 */
@media (min-width: 992px) and (max-width: 1199.99px) {
    div.小头分区 { display: none; }
    nav.普通导航 { top: 56px; left: 0; bottom: 0; }
    main.普通主区 { margin-left: 72px; width: calc(100% - 72px); }
    div.丰富分区 { margin: 1%; width: 31.33%; }
}

/* 超大尺寸 */
@media (min-width: 1200px) {
    div.小头分区 { display: none; }
    nav.普通导航 { top: 56px; left: 0; bottom: 0; }
    main.普通主区 { margin-left: 72px; width: calc(100% - 72px); }
    div.丰富分区 { margin: 1%; width: 23%; }
}