@charset "utf-8";
* { margin: 0; padding: 0; font-size: 100%; }
html { background: url(image/bg.jpg) top center no-repeat #f3f4ef; background-size: cover; background-attachment: fixed; }
body { background: #85b8f4; width: 100%; max-width: 720px; min-height: 100vh; margin: 0 auto; line-height: 1.5; font-size: 14px; font-family: "微软雅黑"; word-break: break-all; word-wrap: break-word; }
ol, ul { list-style: none; }
img { max-width: 100%; vertical-align: middle; }
a { display: inline-block; text-decoration: none; color: inherit; }
a:hover { text-decoration: underline; }
:focus { outline: 0; }

.header { width: 100%; max-width: 720px; border-radius: 0 0 5px 5px; overflow: hidden; background: #f44336; position: fixed; top: 0; left: 0; right: 0; margin: auto; z-index: 9; }
.header .logo-bar { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 10px 0 0; position: relative; }
.header .logo-bar .logo { display: flex; align-items: center; height: 60px; padding-left: 8px; }
.header .logo-bar .logo-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff; background: linear-gradient(135deg, #ff7043, #c62828); box-shadow: 0 0 0 2px #ffd54f, 0 2px 6px rgba(0, 0, 0, .4); color: #fff; line-height: 1.05; font-size: 15px; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.header .logo-bar .logo-badge b { display: block; font-size: 15px; font-weight: 900; }
.header .logo-bar .logo-text { display: flex; flex-direction: column; margin-left: 10px; line-height: 1; }
.header .logo-bar .logo-text strong { font-size: 25px; font-weight: 900; letter-spacing: 2px; color: #fff; text-shadow: 0 2px 0 #b71c1c, 0 3px 4px rgba(0, 0, 0, .45); }
.header .logo-bar .logo-text em { align-self: flex-start; margin-top: 5px; padding: 2px 8px; border-radius: 10px; font-style: normal; font-size: 12px; color: #d50000; background: linear-gradient(#fffde7, #ffe082); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.header .logo-bar .quan { width: 60px; height: 60px; position: absolute; left: 0; right: 0; margin: auto; }
.header .logo-bar .quan img { width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 0 20px #000; animation: z 5s linear 0s infinite; }
.header .logo-bar .home { line-height: 1; text-align: center; color: #fff; font-size: 12px; }
.header .logo-bar .home img { width: 30px; height: 30px; margin-bottom: 3px; }
.header .logo-bar .home span { display: block; }
.header-blank { height: 226px; }
@media screen and (max-width: 720px) {
    .header .logo-bar { padding: 0 5px 0 0; }
    .header .logo-bar .quan { position: relative; }
}
@keyframes z { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } }

.box { margin: 1px 0; padding: 4px; border-radius: 5px; background: #f44336; }
.box:empty { display: none; }
.zl-item { margin: 5px 1px; }
@media screen and (max-width: 720px) { .box { margin: 1px; } }
.box img { width: 100%; }

.KJ-TabBox { height: 166px; overflow: hidden; color: #333; background: #fff; font-family: 'PingFang SC', 'microsoft yahei', arial, 'helvetica neue', 'hiragino sans gb', sans-serif; }
.KJ-TabBox ul, .KJ-TabBox li { margin: 0; list-style: none; padding: 0; border: 0; font-size: 18px; }
.KJ-TabBox ul { display: flex; height: 36px; padding: 8px 0 0 8px; box-sizing: border-box; border-bottom: solid 2px #fff; }
.KJ-TabBox li { flex: 1; height: 26px; line-height: 26px; margin-right: 8px; text-align: center; border-radius: 4px; background: #eee; cursor: pointer; }
.KJ-TabBox li.cur { color: #fff; background: #ff9900; }
.KJ-TabBox li:nth-child(1).cur { background: #1fb61d; }
.KJ-TabBox li:nth-child(2).cur { background: #e71607; }
.KJ-TabBox li:nth-child(3).cur { background: #2389e9; }
.KJ-TabBox > div { display: none; }
.KJ-TabBox > div.cur { display: block; }
@media screen and (max-width: 650px) { .KJ-TabBox ul, .KJ-TabBox li { font-size: 16px; } }

/* 顶部跳转按钮：精华帖子 / 玄机彩图（按 720 宽等比缩放） */
.zt-btns { --u: calc(min(100vw, 720px) / 720); display: flex; margin: calc(var(--u) * 6) calc(var(--u) * 5) calc(var(--u) * 5); overflow: hidden; border: 1px solid #67a4f5; border-radius: calc(var(--u) * 20); background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .12); }
.zt-btns a { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2); flex: 1; min-width: 0; height: calc(var(--u) * 44); border-right: 1px solid #67a4f5; background: linear-gradient(to top, #fff, #eee, #fff); font-size: calc(var(--u) * 21); font-weight: 800; line-height: 1; white-space: nowrap; }
.zt-btns a:last-child { border-right: 0; }
.zt-btns a:hover { text-decoration: none; background: linear-gradient(to top, #fff, #dfeaff, #fff); }
.zt-btns a img { flex: none; width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.zt-btns a.is-blue { color: #00f; }
.zt-btns a.is-red { color: #f00; }
@media screen and (max-width: 600px) { .zt-btns { --u: calc(100vw / 440); } .zt-btns a { font-size: calc(var(--u) * 19); } .zt-btns a img { width: calc(var(--u) * 22); height: calc(var(--u) * 22); } }

/* 精华帖子 / 玄机彩图区 */
.box > .tit { line-height: 40px; padding-bottom: 3px; color: #ff0; text-align: center; font-weight: bold; font-size: 26px; text-shadow: 1px 4px 1px #b99b5f; border-bottom: solid 1px #000; background: linear-gradient(transparent, #dacfcf); }
.tie-con { font-size: 16px; background: #fff; }
.tie-con ul li { background: url(image/tj.gif) 5px center no-repeat; }
.tie-con ul li a { display: block; position: relative; padding: 0 24px 0 40px; line-height: 36px; font-weight: bold; border-bottom: solid 1px #b99b5f; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.tie-con ul li a::after { content: '›'; position: absolute; right: 8px; color: #b99b5f; font-size: 22px; }
@media screen and (max-width: 720px) { .tie-con { font-size: 14px; } }
.xjct { width: 100%; border-spacing: 0; background: #fff; line-height: 1.75; font-size: 16px; font-weight: bold; }
.xjct th { color: #fff; border: dashed 1px #c0c0c0; background: #4292ef; }
.xjct td { text-align: center; border: dashed 1px #c0c0c0; }
#lightbox { display: none; position: fixed; inset: 0; z-index: 99; overflow: auto; background: rgba(0, 0, 0, .85); cursor: zoom-out; }
#lightbox img { display: block; width: 100%; max-width: 720px; margin: 0 auto; }
