@charset "utf-8";

/*1024*/
@media screen and (min-width:1024px) {

    /* --- 公用样式 --- */
    .pc {
        display: block;
    }

    .wap {
        display: none;
    }

    .left {
        float: left;
    }

    .right {
        float: right;
    }

    .img {
        transition: all .6s ease;
        overflow: hidden;
    }

    .img:hover {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

    a:hover {
        color: #06f;
    }

    .clear {
        clear: both;
    }

    /* 修复：PC端页面布局错位问题 - 微信公众号风格自适应 */
    .wrap {
        width: 677px;
        /* 默认宽度改为677px */
        max-width: 100%;
        /* 限制最大宽度 */
        margin: 0 auto;
        transition: width 0.3s ease;
        /* 宽度变化时的平滑过渡效果 */
        box-sizing: border-box;
        /* 确保内边距不会撑破外部容器 */
    }

    /* 屏幕宽度 >= 1440px (常见笔记本/小显示器) */
    @media screen and (min-width: 1440px) {
        .wrap {
            width: 677px;
        }
    }

    /* 屏幕宽度 >= 1920px (标准台式机显示器) */
    @media screen and (min-width: 1920px) {
        .wrap {
            width: 677px;
        }
    }

    /* 屏幕宽度 >= 2560px (2K/4K大屏) */
    @media screen and (min-width: 2560px) {
        .wrap {
            width: 677px;
        }
    }

    /* 微信公众号风格响应式正文布局 */
    .article {
        margin: 0 auto;
        /* 居中对齐 */
        box-sizing: border-box;
        /* 确保内边距不会撑破外部容器 */
    }

    /* 内容居中 */
    .article p {
        text-align: justify;
        /* 两端对齐，适合中文阅读 */
    }

    /* 强制图片居中，避免影响包含内联样式的复杂排版 */
    .article img:not([style]) {
        margin-left: auto;
        margin-right: auto;
        display: block;
        max-width: 100%;
    }

    /* PC 端（宽屏）视图 */
    @media screen and (min-width: 1024px) {
        .article {
            width: 100%;
            /* 正文区域占满父容器 */
            padding: 30px 0;
            /* 上下内边距，左右为0 */
            margin: 0 auto;
        }
    }

    /* 移动端（窄屏）视图 */
    @media screen and (max-width: 1023px) {
        .article {
            width: 100%;
            /* 自适应宽度 */
            padding: 30px 16px;
            /* 左右各16px内边距 */
        }
    }

    /* 左右分栏布局修复 */
    .box-left {
        float: none;
        /* 取消浮动 */
        width: 100%;
        /* 占满宽度 */
        display: block;
    }

    .box-right {
        float: none;
        /* 取消浮动 */
        width: 100%;
        /* 占满宽度 */
        padding: 20px;
        background: #fff;
        box-sizing: border-box;
        border-left: none;
        margin: 0 auto;
        /* 居中 */
    }

    /* 清除浮动 */
    .page-box:after {
        content: "";
        display: table;
        clear: both;
    }

    /* 首页幻灯片和搜索框宽度调整 */
    .hero-slider,
    .hero-search {
        width: 100%;
        max-width: 100%;
    }

    /* 幻灯片多端适配 */
    .pc-slide {
        display: block !important;
    }

    .wap-slide {
        display: none !important;
    }

    @media screen and (max-width: 1023px) {
        .pc-slide {
            display: none !important;
        }

        .wap-slide {
            display: block !important;
        }
    }

    /* --- 字体样式 --- */
    @font-face {
        font-family: eng;
        src: url(./img/CenturyGothic.TTF);
        src: url(./img/CenturyGothic.eot)\9;
    }



    /* --- 框架 --- */
    html {
        background: #F4F4F4;
    }

    /* --- 全局字体样式 --- */
    img {
        max-width: 100%;
        height: auto;
    }

    body {
        font: 400 16px/1.8 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        color: #333;
        background: #F4F4F4;
    }


    /* --- 首页 --- */

    /* logo */
    .logo {
        margin: 0 auto 5px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 24px;
        width: 100%
    }

    .logo h1 {
        text-align: left;
        font-size: 80px;
        font-weight: bold;
        color: #fff;
        margin-top: 2px;
    }

    .logo .home-logo {
        display: inline-block;
        margin: 2px 0 0 0;
        height: 120px;
        width: auto;
        border-radius: 12px
    }

    .home-links {
        margin-top: 2px;
        display: flex;
        align-items: center;
        gap: 64px;
        margin-left: 60px
    }

    .home-links a {
        display: inline-block;
        padding: 8px 12px;
        border: 2px solid #06f;
        border-radius: 999px;
        color: #06f;
        background: #fff;
        font-size: 16px;
        transition: all .2s ease
    }

    .home-links a:hover {
        background: #06f;
        color: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .08)
    }

    .home-links a:active {
        transform: scale(.98)
    }

    .hero-slider {
        width: 100%;
        height: 300px;
        margin: 20px auto 30px auto;
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        background: #f9f9f9;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .08)
    }

    .hero-slides {
        list-style: none;
        margin: 0;
        padding: 0;
        height: 100%
    }

    .hero-slides li {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity .6s
    }

    .hero-slides li.active {
        opacity: 1
    }

    .hero-slides img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    .hero-dots {
        position: absolute;
        left: 50%;
        bottom: 12px;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        z-index: 2
    }

    .hero-dots span {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .5);
        cursor: pointer;
        transition: all .3s ease
    }

    .hero-dots span:hover {
        background: rgba(255, 255, 255, .8)
    }

    .hero-dots span.active {
        background: #fff
    }

    /* 搜索框（独立于幻灯片） */
    .hero-search {
        width: 100%;
        margin: 0 auto 35px auto;
    }

    .hero-search .search {
        position: relative;
        display: flex;
        align-items: center;
        background: #fff;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
        padding: 0;
        margin: 0;
        transition: border-color .3s ease, box-shadow .3s ease
    }

    .hero-search .search:focus-within {
        border-color: #06f;
        box-shadow: 0 4px 16px rgba(0, 102, 255, .12)
    }

    .hero-search .search input {
        flex: 1;
        height: 54px;
        padding: 0 24px;
        font-size: 17px;
        color: #333;
        background: transparent;
        border: none;
        outline: none
    }

    .hero-search .search input::-webkit-input-placeholder {
        color: #9ca3af
    }

    .hero-search .search input::-moz-placeholder {
        color: #9ca3af
    }

    .hero-search .search input:-ms-input-placeholder {
        color: #9ca3af
    }

    .hero-search .search button {
        height: 54px;
        padding: 0 32px;
        background: linear-gradient(135deg, #06f 0%, #0051d5 100%);
        color: #fff;
        border: none;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all .3s ease;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        margin-left: -1px
    }

    .hero-search .search button:hover {
        background: linear-gradient(135deg, #06f 0%, #0066ff 100%);
        box-shadow: 0 4px 12px rgba(0, 102, 255, .25)
    }


    /* 推荐书籍 */
    .recommend {
        background: #fff;
        width: 100%;
        margin: 0 auto;
        background: #fff;
        border-radius: 10px;
        padding: 0 30px;
    }

    .recommend .title {
        border-bottom: 1px solid #efefef;
        padding-top: 20px;
        padding-bottom: 20px;
        overflow: hidden;
        position: relative;
        padding-left: 20px;
    }

    .recommend .title:before {
        background: #06f;
        content: "";
        width: 3px;
        height: 24px;
        left: 0;
        position: absolute;
        top: 25px;
    }

    .recommend .title h2 {
        float: left;
        font-size: 24px;
        color: #333;
    }

    .recommend .title h2 em {
        color: #999;
        font-weight: lighter;
    }

    .recommend .title .more {
        float: right;
    }

    .recommend .bd {
        border-bottom: 1px solid #efefef;
    }

    .recommend .bd ul {
        padding-top: 20px;
        padding-bottom: 20px;
        overflow: hidden;
    }

    .recommend .bd li {
        float: left;
        width: 50%;
        line-height: 280%;
        padding-left: 36px;
        position: relative;
    }

    .recommend .bd li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        background: linear-gradient(135deg, #06f 0%, #0066ff 100%);
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(0, 102, 255, .15)
    }

    .recommend .hd {
        padding-top: 30px;
        padding-bottom: 30px;
        text-align: center;
    }

    .recommend .hd li {
        display: inline-block;
        width: 10px;
        height: 10px;
        background: #efefef;
        border-radius: 100px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .recommend .hd li.on {
        background: #06f;
    }

    .recommend-bottom {
        text-align: center;
        margin-top: -2px;
    }

    /* 友情链接 */
    .friends {
        text-align: center;
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .friends a {
        color: #fff;
        font-size: 14px;
        margin-left: 10px;
        margin-right: 10px;
    }

    /* 底部 */
    .footer {
        text-align: center;
        font-size: 14px;
        color: #000;
        background: #EDEDED;
        margin-top: 50px;
        padding-bottom: 10px
    }

    .footer a {
        color: #000;
        margin-left: 10px;
        margin-right: 10px;
    }



    /* --- 内页 --- */

    /* 头部 */
    .page-header {
        background: #F4F4F4;
        padding: 24px 0;
    }

    .page-top-links {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
        margin: 10px auto 0 auto;
        width: 100%;
    }

    .page-top-links a {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 12px 24px;
        background: #fff;
        color: #06f;
        border-radius: 32px;
        font-size: 16px;
        font-weight: bold;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        transition: transform .2s ease;
        line-height: 1;
    }

    .page-top-links a:hover {
        transform: scale(1.05);
    }

    .page-top-links a:active {
        transform: scale(0.95);
    }

    /* logo */
    .page-logo {
        display: none;
    }

    /* 搜索 */
    .page-search {
        display: none;
    }

    .page-search input {
        background: none;
        border: none;
        padding-left: 20px;
        line-height: 44px;
        color: #fff;
        border-radius: 100px;
        border: 3px solid #fff;
        height: 50px;
        width: 100%;
        transition: all .3s ease;
    }

    .page-search button {
        width: 20%;
        height: 44px;
        background: url(./img/search.png) no-repeat center center;
        border: none;
        cursor: pointer;
        position: absolute;
        top: 37px;
        right: 0;
    }

    .page-search input:focus {
        border: 3px solid #f90;
    }



    /* 框架 */
    .page-box {
        background: #EDEDED;
        margin-top: 30px;
        margin-bottom: 50px;
        overflow: hidden;
        box-shadow: 0px 10px 30px #49403F;
    }

    /* 修复：移除错误的隐藏样式 */
    .box-left {
        float: left;
        width: 280px;
        display: block;
        /* 覆盖之前的 display: none */
    }

    .box-right {
        float: right;
        width: calc(100% - 300px);
        padding: 20px;
        background: #fff;
        box-sizing: border-box;
        border-left: none;
    }

    /* centered page layout */
    .centered .box-left {
        display: none
    }

    .centered .box-right {
        float: none;
        width: 100%;
        margin: 0 auto
    }


    /* 广告位 */
    .ad {
        background: #00CCFF;
        text-align: center;
        margin-bottom: 10px;
    }

    .ad-300-200 {
        line-height: 200px;
        color: #fff;
    }

    .ad-300-100 {
        line-height: 100px;
        color: #fff;
    }

    .ad-840-100 {
        line-height: 100px;
        color: #fff;
        margin-bottom: 30px;
    }


    /* 侧栏 */
    .page-recommend {
        border: 1px solid #efefef;
        background: #fff;
        margin-bottom: 10px;
    }

    .page-recommend h3 {
        border-bottom: 1px solid #efefef;
        padding: 15px;
        font-size: 16px;
        color: #666;
    }

    .page-recommend ul {
        padding: 15px;
    }

    .page-recommend li {
        font-size: 14px;
        line-height: 220%;
        position: relative;
        padding-left: 15px;
    }

    .page-recommend li:before {
        content: "";
        width: 5px;
        height: 5px;
        background: #ccc;
        border-radius: 100%;
        left: 0;
        top: 11px;
        position: absolute;
    }

    .page-recommend ul {
        padding: 15px;
    }

    .page-recommend div {
        padding: 0.8em 0 0.5em 1em;
        line-height: 1.5em;
    }


    .page-recommend table {
        width: 96%;
        padding: 0 2% 0 2%;
        text-align: center;
    }

    .page-recommend caption,
    th {
        text-align: center;
    }

    .page-recommend input[type="text"] {
        border: 1px solid #bfd0d7;
        height: 28px;
        line-height: 24px;
        width: 210px;
    }

    .page-recommend input[type="submit"] {
        border: 1px solid #bfd0d7;
        height: 28px;
        line-height: 24px;
        width: 50px;
        margin-left: 0px;
        background: #e5f0f6;
    }


    /* 热门 */
    .page-hot {
        overflow: hidden;
        margin-bottom: 20px;
        display: block;
    }

    .page-hot h3 {
        font-size: 24px;
        margin-bottom: 15px;
        color: #333;
    }

    .page-hot li {
        float: left;
        width: 33.333%;
        position: relative;
        padding-left: 15px;
        line-height: 220%;
        font-size: 14px;
    }

    .page-hot li:before {
        content: "";
        width: 5px;
        height: 5px;
        background: #ccc;
        border-radius: 100%;
        left: 0;
        top: 11px;
        position: absolute;
    }

    .content-hot {
        background: #f9f9f9;
        padding: 20px;
    }

    /* hide hot block in centered pages */
    .centered .page-hot {
        display: none
    }


    /* 列表 */
    .page-list {}

    .page-list li {
        border-bottom: 1px solid #efefef;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .page-list h3 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .page-list p {
        font-size: 14px;
        line-height: 200%;
        color: #999;
    }


    /* 分页 */
    .showpage {
        text-align: center;
        padding-bottom: 30px;
        margin-top: 30px;
    }

    .showpage a {
        background: #efefef;
        padding: 10px 15px;
        border-radius: 5px;
        margin-left: 5px;
        margin-right: 5px;
        font-size: 14px;
    }

    .showpage a.now {
        background: #06e;
        color: #fff;
    }


    /* 标题 */
    .title h1 {
        text-align: center;
        font-size: 32px;
        margin-bottom: 30px;
        margin-top: 20px;
    }

    .articleinfo {
        text-align: center;
        font-size: 12px;
        margin-bottom: 30px;
        margin-top: 20px;
    }

    /* 内容 */
    .article {
        padding: 30px;
        overflow-wrap: break-word;
    }

    .article img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 10px auto;
    }

    /* 编辑器内容标题样式 - 只覆盖没有内联样式的标题 */
    .article h1:not([style]),
    .article h2:not([style]),
    .article h3:not([style]),
    .article h4:not([style]),
    .article h5:not([style]),
    .article h6:not([style]) {
        font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-weight: 600;
        color: #333;
        margin: 20px 0 10px 0;
        line-height: 1.5;
    }

    .article h1:not([style]) {
        font-size: 24px;
    }

    .article h2:not([style]) {
        font-size: 20px;
    }

    .article h3:not([style]) {
        font-size: 18px;
    }

    .article h4:not([style]) {
        font-size: 16px;
    }

    .article h5:not([style]) {
        font-size: 15px;
    }

    .article h6:not([style]) {
        font-size: 14px;
    }

    /* 编辑器表格样式 */
    .article table {
        border-collapse: collapse;
        width: 100%;
        margin: 10px 0;
        font-size: 14px;
        background: #fff;
    }

    .article table th,
    .article table td {
        border: 1px solid #ddd;
        padding: 8px 12px;
        text-align: left;
        line-height: 1.5;
    }

    .article table th {
        background: #f5f5f5;
        font-weight: 600;
        color: #333;
    }

    .article table tr:nth-child(even) {
        background: #f9f9f9;
    }

    .article table tr:hover {
        background: #f0f0f0;
    }

    /* 播放器样式 */
    .edui-video-video {
        width: 48%;
        /* 稍微小于50% */
        height: 40px;
        transform: scale(2);
        transform-origin: center top;
        /* 从中心放大 */
        margin: 15px auto 55px auto;
        /* 水平居中 */
        display: block;
        border-radius: 4px;
        outline: none;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    /* 视频播放器样式修复 */
    video.edui-video-video {
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        margin: 20px auto !important;
        max-width: 100%;
    }

    /* 编辑器内容样式优化 - 只对没有内联样式的元素应用默认样式 */
    /* 只覆盖没有内联样式的 section */
    .article section:not([style]) {
        margin: 10px 0;
    }

    /* 只覆盖没有内联样式的 p */
    .article p:not([style]) {
        margin: 16px 0;
        line-height: 1.8;
        font-size: 16px;
        color: #333;
    }

    .article strong:not([style]) {
        font-weight: bold;
    }

    .article button:not([style]),
    .article input[type="button"]:not([style]),
    .article input[type="submit"]:not([style]) {
        /* 按钮重置，使用编辑器定义的样式 */
        margin: 0;
        padding: 0;
        border: none;
        background: none;
        font: inherit;
        cursor: pointer;
        box-sizing: border-box;
    }

    /* 文章导航 */
    .post-navigation {
        overflow: hidden;
        margin: 20px 0;
        padding: 15px;
        background: #f9f9f9;
        border-radius: 5px;
        font-size: 14px;
    }

    .post-prev {
        float: left;
        width: 48%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .post-next {
        float: right;
        width: 48%;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .post-navigation a {
        color: #06f;
    }

    .post-navigation a:hover {
        text-decoration: underline;
    }

    /* 相关文章 */
    .related-posts {
        margin: 20px 0;
        padding: 20px;
        background: #f9f9f9;
        border-radius: 8px;
    }

    .related-posts h3 {
        font-size: 18px;
        border-bottom: none;
        margin-bottom: 15px;
        color: #333;
        border-left: 4px solid #06f;
        padding-left: 12px;
        line-height: 1;
    }

    .related-posts ul {
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .related-posts li {
        width: 48%;
        line-height: 36px;
        padding-left: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
        box-sizing: border-box;
        border-bottom: 1px dashed #e0e0e0;
    }

    .related-posts li:before {
        content: "";
        width: 4px;
        height: 4px;
        background: #06f;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 16px;
    }

    .related-posts a {
        color: #555;
        display: block;
        transition: all .2s ease;
    }

    .related-posts a:hover {
        color: #06f;
        transform: translateX(5px);
    }


    /* 定制 */
    .write-btn {
        margin-bottom: 50px;
    }

    .write-btn a {
        background: #06e;
        text-align: center;
        width: 200px;
        height: 50px;
        line-height: 50px;
        display: block;
        margin: 0 auto;
        color: #fff;
        border-radius: 10px;
        box-shadow: 0px 10px 20px #A4C8FF;
        transition: all .3s ease;
    }

    .write-btn a:hover {
        background: #09f;
    }


    /* 免费 */
    .page-free ul {
        padding-bottom: 30px;
        overflow: hidden;
        margin-top: 20px;
    }

    .page-free h3 {
        background: #f9f9f9;
        padding: 10px 15px;
        font-size: 16px;
        color: #666;
        margin-bottom: 10px;
    }

    .page-free li {
        float: left;
        width: 33.33%;
        padding-left: 30px;
        line-height: 250%;
        font-size: 14px;
        position: relative;
    }

    .page-free li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        background: linear-gradient(135deg, #06f 0%, #0066ff 100%);
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 102, 255, .15)
    }


    .page-pinglun h3 {
        background: #f9f9f9;
        padding: 10px 15px;
        font-size: 16px;
        color: #666;
        margin-bottom: 10px;
    }
}




/*---------------------------引用\评论----------------------------------*/
ul.msg {
    width: 98%;
    margin: 10px 0 20px 0;
    padding: 5px 1% 5px 1%;
    text-align: left;
    list-style-position: outside;
    table-layout: fixed;
    word-wrap: break-word;
}

li.msgname {
    padding: 0 0 0.8em 0.5em;
    margin: 0px;
    font-weight: bold;
    font-size: 1em;
    border-bottom: 1px dotted #eaeaea;
}

li.msgname * {}

li.msgurl {
    text-align: right;
    padding: 2px 10px 2px 10px;
    margin: 0;
    font-size: 1em;
}


li.msggravatar {
    display: block;
    float: left;
    margin-right: 5px;
}

li.msgarticle {
    list-style-position: outside;
    padding: 10px;
    margin: 0;
    line-height: 160%;
    background: #FFF;
    padding-left: 55px;
}

li.msgtime {
    padding: 5px 0 0 0;
    font-weight: normal;
    font-size: 0.8em;
}

img.avatar {
    width: 40px;
    height: 40px;
    float: left;
    padding: 0px 4px 4px 0px;
    border: 0px solid #eaeaea;
}

ul.msg ul.msg {
    padding: 10px 0 0 0;
    margin: 20px 0 0 0;
    border-bottom: none;
}

ul.msg ul.msg li.msgarticle {
    padding-bottom: 0px;
}

ul.msg ul.msg li.msgname {}


/*-------------------留言回复------------------------------*/
li.msgarticle div.quote {
    margin: 10px 0 0 0;
    padding: 10px;
    background: #FFFFFF;
    border: 1px #F4F4F4 solid;
}

li.msgarticle div.quote-title {
    margin: 0;
    padding: 0;
    font-size: 1em;
    color: red;
}





/************评论发表用的样式*************/
/* 置顶阅读 */
.top-read {
    width: 100%;
    margin: 20px auto;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 8px;
}

.top-read .title {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.top-read .title h2 {
    font-size: 20px;
    border-left: 4px solid #06f;
    padding-left: 15px;
    color: #333;
}

.top-read .bd ul {
    overflow: hidden;
}

.top-read .bd li {
    float: left;
    width: 50%;
    padding-right: 20px;
    box-sizing: border-box;
    margin-bottom: 15px;
    font-size: 16px;
}

.top-read .bd li:nth-child(2n) {
    padding-right: 0;
    padding-left: 20px;
}

.top-read .bd a {
    display: block;
    background: #f9f9f9;
    padding: 15px 20px;
    border-radius: 4px;
    color: #333;
    transition: all .3s;
}

.top-read .bd a:hover {
    background: #06f;
    color: #fff;
}

#divCommentPost {
    width: 96%;
    margin: 0 0 0 0;
    padding: 1em 2% 1.5em 2%;
}

#divCommentPost p {
    margin-top: 10px;
}

#divCommentPost label {
    margin-top: 5px;
}

#divCommentPost p.posttop {
    color: #3c6da7;
}

#divCommentPost img {
    margin-bottom: -0.5em;
}

#cancel-reply {
    float: right;
    margin-right: 2em;
}

div.reply-frm {
    background: #f0f0f0;
    box-shadow: 0 0 15px #333;
    margin: 1em 1% !important;
    padding: .3em .8em !important;
    min-width: 330px;
}

.page-navigator {
    text-align: center;
    font-size: 0.9375em;
    padding: 20px 0 0
}

.page-navigator a {
    display: inline-block;
    padding: 1px 5px;
    margin: 3px;
    border-radius: 3px
}

.page-navigator a:hover {
    background-color: #130c0e;
    color: #fff
}



input.text {
    border: 1px solid #d7d7d7;
    line-height: 20px;
    height: 24px;
    padding: 2px 5px 2px 5px;
}

#txaArticle {
    padding: 0.5em;
    width: 98%;
    height: 150px;
    border: 1px solid #d7d7d7;
}

input.button {
    color: #FFFFFF;
    font-size: 14px;
    width: 100px;
    height: 32px;
    background: #3a6ea5;
    border: 1px solid #3399CC;
    cursor: pointer;
}

/* slider title/logo overlay */
.slider-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center
}

.slider-logo {
    height: 160px;
    width: auto;
    display: inline-block;
    border-radius: 12px
}

@media screen and (max-width:1023px) {
    .slider-logo {
        height: 96px
    }
}

/* home dark background */
html.home {
    background: #F4F4F4 !important
}

body.home {
    background: #F4F4F4
}

/* category nav (home) */
.catnav {
    background: #F4F4F4;
    padding: 12px 0;
    margin: 5px 0 20px
}

/* 修复：PC端分类导航样式丢失问题 */
.catnav .wrap {
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.catnav,
.catnav a {
    -webkit-tap-highlight-color: transparent
}

/* 修复：确保PC端也能正确应用样式 */
.catnav ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0;
    padding: 0;
}

.catnav ul li {
    list-style: none;
    scroll-snap-align: start
}

.catnav ul a {
    display: inline-block;
    padding: 8px 14px;
    border: 2px solid #06f;
    border-radius: 999px;
    color: #06f;
    background: #fff;
    transition: background .2s ease, transform .05s ease, box-shadow .2s ease;
    text-decoration: none;
}

.catnav ul a:hover {
    background: #06f;
    color: #fff
}

.catnav ul a:active {
    transform: scale(0.97);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, .15) inset;
    background: #06d;
    color: #fff
}