@charset "utf-8";
/* CSS Document — DBN(数据刷网络) v2.0 (cleaned 2026-06-17) */

/* ================================================================
   CSS Design Tokens
   ================================================================ */
:root {
    --color-primary:        #27d;
    --color-accent:         #FF9532;
    --color-danger:         #CC0A0D;
    --color-white:          #FFFFFF;
    --color-black:          #000000;
    --color-bg:             #F8F8F8;
    --color-text:           #363636;
    --color-text-light:     #808080;
    --color-link:           #0E0D0D;
    --color-link-hover:     #FD0004;
    --max-width:            1300px;
    --font-body:            "仿宋", "Times New Roman", sans-serif;
    --font-heading:         "华文仿宋", "Times New Roman", serif;
}

/* ================================================================
   Base
   ================================================================ */
BODY {
    margin: 0 auto;
    width: 100%;
    min-height: 100vh; height: auto;
    background: var(--color-bg);
}

ul li { list-style: none; }

a:link, a:visited { color: var(--color-link); text-decoration: none; }
a:hover, a:active { color: var(--color-link-hover); text-decoration: underline; }

/* ================================================================
   Header — Modern Flexbox Layout v3.0 (2026-06-19)
   ================================================================ */
#head {
    background: #fff;
    margin: 0 auto;
    width: 100%;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    position: sticky; top: 0; z-index: 100;
}

#head01 {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ---- Left: Logo + site name ---- */
#head-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

#headtp { display: flex; align-items: center; }
#headtp img { display: block; width: 44px; height: 44px; border-radius: 8px; }

#headym { display: flex; align-items: center; }
#headym img { display: block; width: auto; height: 34px; }

/* 隐藏旧版权声明块（已废弃） */
#headbq { display: none; }
#logintopandsearch { display: none; }

/* ---- Right: User area + Search ---- */
#head-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

#headlogintop {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

/* 隐藏旧的5个装饰图标 */
#headlogintop-1, #headlogintop-2, #headlogintop-3, #headlogintop-4, #headlogintop-5,
#headlogintop-7 { display: none; }

/* ---- 登录/注册按钮 — 现代文字样式 ---- */

/* 登录按钮（outline） */
#headlogintop-8 { display: inline-block; }
#headlogintop-8 a,
a#headlogintop-8 {
    display: inline-block; padding: 7px 20px;
    background: transparent; color: #374151;
    border: 1.5px solid #d1d5db; border-radius: 20px;
    font-size: 13px; font-weight: 500; text-decoration: none;
    font-family: "Microsoft YaHei","PingFang SC",sans-serif;
    transition: all .15s ease;
}
#headlogintop-8 a:hover,
a#headlogintop-8:hover { border-color: #2563eb; color: #2563eb; background: transparent; text-decoration: none; }
#headlogintop-8 img { display: none; }

/* 注册按钮（filled） */
#headlogintop-6 { display: inline-block; }
#headlogintop-6 a,
a#headlogintop-6 {
    display: inline-block; padding: 7px 20px;
    background: #2563eb; color: #fff; border-radius: 20px;
    font-size: 13px; font-weight: 500; text-decoration: none;
    font-family: "Microsoft YaHei","PingFang SC",sans-serif;
    transition: all .15s ease;
}
#headlogintop-6 a:hover,
a#headlogintop-6:hover { background: #1d4ed8; text-decoration: none; color: #fff; }
#headlogintop-6 img { display: none; }

/* ---- 已登录状态 ---- */
#header-username-link {
    display: inline-flex; align-items: center;
    padding: 6px 14px;
    color: #374151; font-size: 13px; font-weight: 500;
    font-family: "Microsoft YaHei","PingFang SC",sans-serif;
    text-decoration: none; border-radius: 20px;
    transition: background .15s;
}
#header-username-link:hover { background: #f3f4f6; text-decoration: none; color: #2563eb; }

.header-link-mute {
    color: #9ca3af; font-size: 13px;
    font-family: "Microsoft YaHei","PingFang SC",sans-serif;
    text-decoration: none; transition: color .15s;
}
.header-link-mute:hover { color: #2563eb; text-decoration: none; }

#header-logout-link {
    display: inline-block; padding: 6px 16px;
    color: #9ca3af; font-size: 13px; font-weight: 500;
    font-family: "Microsoft YaHei","PingFang SC",sans-serif;
    border: 1.5px solid #e5e7eb; border-radius: 20px;
    text-decoration: none; transition: all .15s;
}
#header-logout-link:hover { border-color: #dc2626; color: #dc2626; text-decoration: none; }

/* ---- Search ---- */
#search { margin: 0; font-family: "Microsoft YaHei",sans-serif; display: flex; align-items: center; }
#search form { display: flex; align-items: center; gap: 0; }
#usersearch {
    border: 1.5px solid #e2e8f0; border-right: none;
    padding: 7px 14px; border-radius: 20px 0 0 20px;
    width: 200px; box-sizing: border-box; font-size: 13px;
    transition: border-color .15s; height: 34px;
    font-family: "Microsoft YaHei",sans-serif;
}
#usersearch:focus { outline: none; border-color: #2563eb; }
#searchsubmit {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0 20px 20px 0; height: 34px; width: 42px;
    border: 1.5px solid #2563eb; background-color: #2563eb;
    color: white; font-size: 14px; cursor: pointer;
    transition: background .15s; padding: 0; margin: 0;
}
#searchsubmit:hover { background: #1d4ed8; border-color: #1d4ed8; }

/* 搜索框一键清除按钮 */
#search .search-field { position: relative; display: inline-flex; align-items: center; }
#search .search-field #usersearch { padding-right: 30px; }
#search #searchclear {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; border: none; border-radius: 50%;
    background: #cbd5e1; color: #fff; font-size: 13px; line-height: 1;
    display: none; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; transition: background .15s;
}
#search #searchclear:hover { background: #64748b; }

/* ================================================================
   Navigation Bar — Clean, Modern, Consistent
   v3.1 2026-06-23 — 优化字体、间距与交互反馈
   ================================================================ */
#header {
    height: 46px; line-height: 46px;
    background: #fafbfc;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
    overflow: visible;
}
#header li {
    display: inline-block; text-align: center;
    font-weight: 500;
    font-family: "Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
    padding: 0 13px; white-space: nowrap;
    transition: background .15s ease;
}
#header li:hover { background: rgba(37,99,235,.04); }
#header li a {
    font-size: 14.5px; letter-spacing: .4px;
    transition: color .15s ease; color: #374151; text-decoration: none;
    display: inline-block; position: relative;
}
#header li a::after {
    content: ''; position: absolute; bottom: -3px; left: 50%;
    width: 0; height: 2px;
    background: #2563eb; border-radius: 1px;
    transition: all .2s ease; transform: translateX(-50%);
}
#header li a:hover::after { width: 100%; }

#header1 {
    line-height: 46px; padding: 0;
    width: 100%; height: 46px;
    margin: 0 auto; overflow: visible;
    max-width: 1300px;
}
#headerli0 { text-align: center; float: none; margin: 0; padding-left: 0; }

#headerli0 a:link, #headerli0 a:visited { color: #374151; text-decoration: none; transition: color .15s; }
#headerli0 a:hover, #headerli0 a:active { color: #2563eb; text-decoration: none; }

.honhover {}
.honhover:hover { font-family: "华文行楷"; font-size: 28px; }

/* ================================================================
   Block 1 — Hero / Carousel
   ================================================================ */
#block1 {
    background: var(--color-bg);
    width: 100%; height: auto; min-height: 150px;
    margin: 3px auto 0; overflow: visible;
}
#block1-1 { background: url("../images/4.jpg"); height: auto; min-height: 150px; float: left; width: 780px; text-align: center; overflow: hidden; }
#block1-2 { background: var(--color-white); height: auto; min-height: 150px; width: 188px; float: left; margin-left: 6px; text-align: center; overflow: hidden; }
#block1-3 { background: var(--color-white); height: auto; min-height: 150px; width: 320px; float: right; margin-left: 6px; text-align: center; overflow: hidden; }
#block1-3G-1 { height: 100px; width: 320px; background: #F1D3D3; float: left; }
#block1-3G-2 { height: 280px; width: 320px; background: #F143D7; float: left; }

/* ================================================================
   Block 2 — Sidebar + Recommendations
   ================================================================ */
#block2 {
    background: var(--color-bg); position: relative;
    width: 100%; height: 790px;
    margin: 0 auto; overflow: visible;
}
#block2-1   { background: var(--color-white); width: 18%; height: 790px; float: left; }
#block2-1-1 { background: var(--color-white); width: 116px; height: 780px; float: left; clear: both; }
#block2-1-2 { background: #6C6C6C; width: 1px; height: 790px; float: left; }
#block2-1-3 { background: var(--color-white); width: 116px; height: 790px; float: left; }

/* Left sidebar nav items */
.li0 { float: left; margin: 0; _display: inline; }
.li1 { float: left; width: 116px; height: 28px; }
.li1 a {
    display: block; height: 28px; text-align: center;
    padding-top: 8px; font: 12pt var(--font-body);
    font-weight: 800; color: var(--color-text);
}
.li1 a:hover, .onhover { background: var(--color-accent) url("../images/nav_on.gif"); color: #FFF; }

/* Recommendations */
#block2-2 { background: var(--color-bg); height: 790px; width: 734px; float: left; margin-left: 0.5%; }
#block2-2-1, #block2-2-2, #block2-2-3, #block2-2-4, #block2-2-5, #block2-2-6 { background: var(--color-white); height: 112px; margin-top: 2px; }
#block2-2-1 { margin-top: 0; }
#block2-2-7 { background: var(--color-white); height: 106px; margin-top: 2px; }
#block2-2-1:hover, #block2-2-2:hover, #block2-2-3:hover, #block2-2-4:hover,
#block2-2-5:hover, #block2-2-6:hover, #block2-2-7:hover { background-color: var(--color-bg); }

.list-tit h2 { font-family: "仿宋", "Times New Roman"; margin-top: 0; padding: 10px 0 0 25px; font-size: 17pt; }
.list-summary {
    height: 37px; font-family: "仿宋", "Times New Roman";
    padding: 10px 0 0 25px; font-size: 12pt;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.list-other { height: 38px; }

/* Today's picks */
#block2-3     { background: var(--color-white); width: 319px; height: 790px; float: right; }
#block2-3-1   { background: var(--color-white); height: 50px; }
#block2-3-1-1 { background: var(--color-white); height: 50px; width: 30px; float: left; }
#block2-3-1-1-1 { background: var(--color-danger); margin: 14px 0 0 20px; height: 20px; width: 5px; }
#block2-3-1-2 { background: var(--color-white); height: 50px; width: 269px; float: left; }
#block2-3-1-1-2 {
    background: var(--color-white); margin: 10px 0 0 0; height: 30px; width: 289px; font-size: 14pt;
}
#block2-3-1-1-2 a { display: block; color: #888; font: 12pt SimSun, serif; float: right; margin-top: 5px; }

#block2-3-2   { background: #0A0909; height: 740px; }
#block2-3-2-1 { background: var(--color-white); height: 740px; width: 58px; float: left; }
#block2-3-2-2 { background: #0DE6F3; height: 740px; width: 261px; float: left; }

.lij { margin: 0; padding: 0; background: var(--color-white) url(left_nav_bottom_bg.gif) no-repeat bottom; height: 740px; }
.lij li a {
    display: block; width: 261px; height: 58px; margin: 0 50px 0 0;
    padding: 5px 0 0 10px; font: 14px/58px var(--font-heading); color: var(--color-text-light);
}
.lij li a:hover { margin-left: 0; background: url("../images/article_on_bg.gif") no-repeat; color: var(--color-black); }

.li21    { float: left; width: 261px; height: 58px; margin-top: 3.5px; }
.li21div { width: 251px; height: 58px; text-align: inherit; }
.li21 h {
    margin: 0; overflow: hidden; display: -webkit-box;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    word-wrap: break-word; word-break: break-all;
}

.li211 { float: left; width: 261px; height: 58px; margin-top: 3.5px; overflow: hidden; }
.li211 h {
    margin: 0; padding: 0; line-height: 25px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    word-wrap: break-word; word-break: break-all; overflow: visible;
}
.li211 a { display: block; width: 261px; height: 58px; padding: 5px 0 0 10px; font: 16px/58px var(--font-heading); color: var(--color-text-light); }
.li211 a:hover { margin-left: 0; background: url("../images/article_on_bg.gif") no-repeat; color: var(--color-black); }

/* ================================================================
   Block 03 — Ad Banners
   ================================================================ */
#block03 {
    background: var(--color-bg); position: relative;
    width: 100%; height: 320px;
    margin: 0 auto; overflow: visible;
}
#block03-1 { background: var(--color-white); width: 233px; height: 320px; float: left; }
#block03-2 { background: var(--color-white); height: 320px; width: 734px; float: left; margin-left: 0.6%; }
#block03-3 { background: var(--color-white); width: 319px; height: 320px; float: right; }

/* ================================================================
   Block 3 — Tutorials + Navigation Cards
   ================================================================ */
#block3 {
    background: var(--color-bg); position: relative;
    width: 100%; height: 500px;
    margin: 0 auto; overflow: visible;
}

#block3-1   { background: #B22EDE; width: 233px; height: 500px; float: left; }
#block3-1-1 { background: url("../images/zxjsdt.jpg"); width: 233px; height: 50px; float: left; }
#block3-1-2 { background: var(--color-white); width: 233px; height: 450px; float: left; }

#zxjs      { width: 233px; height: 50px; margin: 0; }
.zxli0     { float: left; margin: 0; _display: inline; }
.zxli1     { float: left; width: 233px; height: 50px; }
.zxli1 a   { display: block; height: 50px; text-align: center; line-height: 50px; padding-top: 12px; font: var(--font-size-lg, 18pt) var(--font-body); font-weight: 800; color: #FFF; }
.zxli1 a:hover { background: var(--color-accent) url("../images/ZXDTnav_on01.jpg"); color: #FFF; }

.zli0     { float: left; margin: 0; _display: inline; }
.zli1     { float: left; width: 116.5px; height: 28px; }
.zli1 a   { display: block; height: 28px; text-align: center; padding-top: 8px; font: var(--font-size-sm, 12pt) var(--font-body); font-weight: 800; color: var(--color-text); }
.zli1 a:hover { background: var(--color-accent) url("../images/ZXDTnav_on.jpg"); color: #FFF; }

#block3-2 { background: var(--color-bg); height: 500px; width: 1060px; float: right; position: relative; }
#block3-2-2 { background: var(--color-bg); height: 370px; width: 1060px; margin-top: 130px; }

/* Walk navigation cards */
.youzou1     { background: var(--color-bg); height: 182.5px; width: 1060px; float: left; }
.youzou1-1   { height: 182.5px; width: 208px; float: left; position: relative; }
.youzou1-01  { background: #6793E8; position: absolute; width: 208px; height: 182.5px; z-index: 100; left: 0; top: 0; }
.youzou1-11  { width: 208px; height: 50px; position: absolute; left: 0; top: 132px; z-index: 180; line-height: 50px; text-align: center; }
.youzou1-11 h { font-size: var(--font-size-lg, 18pt); line-height: 50px; text-align: center; color: #700204; }
.youzou1-1:hover { opacity: 0.50; filter: alpha(opacity=50); -ms-filter: "alpha(opacity=50)"; -moz-opacity: 0.50; }
.youzou1-1 h:hover { color: var(--color-black); }

#youzou1-2 { background: #1699CD; height: 182.5px; width: 208px; float: left; margin-left: 5px; position: relative; }
#youzou1-3 { background: #E3DA3D; height: 182.5px; width: 208px; float: left; margin-left: 5px; position: relative; }
#youzou1-4 { background: #E8A955; height: 182.5px; width: 208px; float: left; margin-left: 5px; position: relative; }
#youzou1-5 { background: #4B7FEE; height: 182.5px; width: 208px; float: left; margin-left: 5px; position: relative; }

#youzou2   { background: var(--color-bg); height: 182.5px; width: 1060px; float: left; margin-top: 5px; }
#youzou2-1 { background: #FA0D73; height: 182.5px; width: 208px; float: left; }
#youzou2-2 { background: #1699CD; height: 182.5px; width: 208px; float: left; margin-left: 5px; }
#youzou2-3 { background: #E3DA3D; height: 182.5px; width: 208px; float: left; margin-left: 5px; }
#youzou2-4 { background: #E8A955; height: 182.5px; width: 208px; float: left; margin-left: 5px; }
#youzou2-5 { background: #4B7FEE; height: 182.5px; width: 208px; float: left; margin-left: 5px; }

/* ================================================================
   Block 041/042 — Bottom Ads
   ================================================================ */
#block041   { background: var(--color-white); position: relative; width: 100%; height: auto; min-height: 150px; margin: 8px auto 0; overflow: hidden; }
#block041-1 { background: var(--color-white); width: 1301px; height: auto; min-height: 150px; position: relative; }
#block042   { background: #1a1a2e; position: relative; width: 100%; height: 720px; margin: 8px auto 0; overflow: hidden; }
#block042-1 { background: var(--color-white); width: 1301px; height: 720px; position: relative; }

/* ================================================================
   Block 4 — Footer
   ================================================================ */
#block4 {
    background: #1a1a2e; position: relative;
    width: 100%; height: auto; min-height: 150px;
    margin: 0 auto; overflow: visible;
}
#block4-1 {
    background: #1a1a2e;
    width: 100%; height: 280px;
    margin: 0 auto; overflow: visible;
}
#block4-1 li { color: var(--color-white); }
#block4-1 h  { color: var(--color-white); font-size: 14px; }

#block4-1-1, #block4-1-2, #block4-1-2p, #block4-1-3 { width: 100%; min-height: 25px; height: auto; margin: 0 auto; overflow: visible; }

#block4-1-1-n  { background: #1a1a2e; width: 1200px; min-height: 25px; height: auto; margin: 0 auto; overflow: visible; text-align: center; }
#block4-1-1-n0 { text-align: center; }

#block4-1-2 { text-align: center; }
#block4-1-2-n { background: #1a1a2e; width: 1200px; min-height: 25px; height: auto; margin: 0 auto; overflow: visible; }

#block4-1-2p    { text-align: center; }
#block4-1-2-np  { background: #1a1a2e; width: 1200px; min-height: 25px; height: auto; margin: 0 auto; overflow: visible; }
#beianIMG       { width: 40px; height: 40px; background: #1a1a2e; float: left; margin: 3px 0 0 470px; text-align: center; }
#beianIMGH      { width: 220px; height: 40px; background: #1a1a2e; float: left; text-align: center; margin-top: -10px; }
#block4-1-2-np h { line-height: 45px; align-content: center; margin-top: 0; }

#block4-1-3 { text-align: center; }
#block4-1-3-n { background: #1a1a2e; width: 1200px; min-height: 25px; height: auto; margin: 0 auto; overflow: visible; }

#block4-1-4   { background: #1a1a2e; width: 75%; height: 70.2%; float: right; }
#block4-1-4-1 { background: #1a1a2e; width: 25%; height: 100%; float: left; }
#block4-1-4-1 img { display: inline-block; vertical-align: middle; }
#block4-1-4-1 h   { float: left; padding-left: 10px; }
#block4-1-4-2 { background: #1a1a2e; width: 25%; height: 100%; float: left; }
#block4-1-4-3 { background: #1a1a2e; width: 25%; height: 100%; float: left; }
#block4-1-4-4 { background: #1a1a2e; width: 25%; height: 100%; float: left; }

#headtpwb     { background: #1a1a2e; height: 20px; width: 25%; }
#headtpwb img { display: inline-block; vertical-align: middle; margin-top: -6.5%; }

/* ================================================================
   响应式设计（2026-06-19 新增）
   ================================================================ */

/* 汉堡菜单按钮（默认隐藏，移动端显示） */
#hamburger-btn { display: none; cursor: pointer; font-size: 24px; padding: 8px 12px; background: none; border: none; color: #333; }

/* 平板（≤1024px） */
@media (max-width: 1024px) {
    #head01, #header1, #block1, #block2, #block03, #block3, #block041, #block042 { width: 100% !important; }
    #block1-1 { width: 65% !important; }
    #block1-2 { display: none; }
    #block1-3 { width: 33% !important; }
    #block2-2 { width: 60% !important; }
    #block2-3 { width: 37% !important; }
    #block2-1 { width: 20% !important; }
    .article-wrap { max-width: 95% !important; margin: 15px auto !important; padding: 20px !important; }
}

/* 手机（≤768px） */
@media (max-width: 768px) {
    #hamburger-btn { display: block; position: absolute; right: 10px; top: 10px; z-index: 1000; }
    /* Header — mobile stack */
    #head { position: static; }
    #head01 { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 10px; }
    #head-left { gap: 8px; }
    #headtp img { width: 36px !important; height: 36px !important; }
    #headym img { height: 24px !important; width: auto !important; }
    #head-right { width: 100%; justify-content: center; flex-wrap: wrap; gap: 10px; }
    #headlogintop { gap: 8px; }
    #headlogintop-8 a, a#headlogintop-8 { padding: 5px 14px; font-size: 12px; }
    #headlogintop-6 a, a#headlogintop-6 { padding: 5px 14px; font-size: 12px; }
    #header-username-link { font-size: 12px; padding: 5px 12px; }
    #header-logout-link { font-size: 12px; padding: 5px 12px; }
    #search { margin: 0; }
    #usersearch { width: 140px !important; font-size: 12px; }
    /* Nav — hamburger */
    #header1 { height: auto; }
    #headerli0 { display: none; width: 100%; float: none; margin: 0; }
    #headerli0.open { display: block; }
    #headerli0 li { float: none; display: block; text-align: left; padding: 8px 15px; border-bottom: 1px solid #eee; width: 100%; }
    #block1 { height: auto !important; }
    #block1-1 { width: 100% !important; float: none; height: 200px !important; }
    #block1-1 img { height: 200px !important; }
    #block1-2 { display: none; }
    #block1-3 { display: none; }
    #block2 { height: auto !important; }
    #block2-1 { display: none; }
    #block2-2 { width: 100% !important; float: none; height: auto !important; }
    #block2-3 { width: 100% !important; float: none; height: auto !important; }
    #block03, #block3, #block041, #block042 { height: auto !important; }
    #block03-1, #block03-2, #block03-3 { width: 100% !important; float: none; margin: 5px 0; }
    #block3-1 { display: none; }
    #block3-2 { width: 100% !important; float: none; }
    #block3-2-2 { width: 100% !important; margin-top: 10px; height: auto !important; }
    .youzou1, #youzou2 { width: 100% !important; height: auto !important; }
    .youzou1-1, .youzou1-01, .youzou1-11 { width: 48% !important; margin: 1% !important; height: auto !important; }
    #block4 { height: auto !important; }
    #block4-1 { width: 100% !important; height: auto !important; }
    #block4-1-1, #block4-1-2, #block4-1-1-n, #block4-1-2-n { width: 100% !important; }
    #beianIMG { margin-left: 10px !important; }
    #block4-1-4 { width: 100% !important; height: auto !important; }
    .tworegislogin { width: 100% !important; }
    .login, .login2 { width: 95% !important; float: none !important; margin: 10px auto !important; }
    .article-wrap { max-width: 100% !important; padding: 15px !important; }
    .article-wrap h1 { font-size: 18px; }
    .sidebar { display: none; }
    .article-wrap + div[style*="margin-right"] { margin-right: 0 !important; }
    .search-box input { width: 100% !important; }
    .member-wrap { max-width: 95% !important; }
    .admin-wrap table { font-size: 11px; }
    img { max-width: 100%; height: auto; }
}