/* 文章页面的样式 */

/* 代替首页大图标题和简介的样式 */
.HeaderImg .infomation .title {
    font-weight: normal; /* 标题字体粗细设为正常 */
    letter-spacing: 0.3rem; /* 标题字符间距 */
}

.HeaderImg .infomation .desctitle {
    font-weight: 700; /* 描述标题字体加粗 */
    font-size: 1.8rem; /* 描述标题字体大小 */
    letter-spacing: 1.2rem; /* 描述标题字符间距 */
}

/* 响应式设计：屏幕宽度小于768px时的样式 */
@media (max-width: 768px) {
    .HeaderImg .infomation .title {
        letter-spacing: 0.1rem; /* 小屏幕下标题字符间距缩小 */
    }

    .HeaderImg .infomation .desctitle {
        font-size: 1.1rem; /* 小屏幕下描述标题字体缩小 */
        letter-spacing: 0.3rem; /* 小屏幕下描述标题字符间距调整 */
    }
}

/* 广告区域样式 */
.joe_post__ad {
    padding-top: 20px; /* 广告顶部内边距 */
}

.joe_container .joe_aside {
    padding-top: 12px; /* 侧边栏顶部内边距 */
}

.joe_post__ad-link {
    display: block; /* 广告链接显示为块级元素 */
    position: relative; /* 相对定位，用于子元素绝对定位 */
    margin-bottom: 10px; /* 底部外边距 */
}

.joe_post__ad-link .image {
    width: 100%; /* 广告图片宽度100% */
    border-radius: var(--radius-inner); /* 圆角使用变量 */
    transition: 0.3s; /* 过渡动画0.3秒 */
}

.joe_post__ad-link .image.lazyload,
.joe_post__ad-link .image.lazyloading {
    max-height: 80px; /* 懒加载图片最大高度 */
}

.joe_post__ad-link .image:hover {
    opacity: 0.85; /* 鼠标悬停时透明度变化 */
}

.joe_post__ad-link .icon {
    position: absolute; /* 绝对定位的图标 */
    z-index: 1; /* 层级 */
    top: 5px; /* 距顶部5px */
    right: 5px; /* 距右侧5px */
    font-size: 12px; /* 字体大小 */
    background: rgba(0, 0, 0, 0.45); /* 半透明背景 */
    padding: 2px 5px; /* 内边距 */
    border-radius: 2px; /* 圆角 */
    color: #ebebeb; /* 文字颜色 */
    pointer-events: none; /* 不可点击 */
}

/* 面包屑导航样式 */
.joe_bread {
    padding-top: 20px; /* 顶部内边距 */
    opacity: .6; /* 透明度 */
    color: var(--main-color); /* 主色调变量 */
}

.joe_bread__bread {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    padding-left: 8px; /* 左侧内边距 */
}

.joe_bread__bread .line {
    color: var(--seat); /* 分隔线颜色 */
    padding: 0 8px; /* 分隔线内边距 */
}

.joe_bread__bread .item {
    white-space: nowrap; /* 文本不换行 */
}

.joe_bread__bread .item .link {
    color: var(--main-color); /* 链接颜色 */
    transition: color 0.35s; /* 颜色过渡动画 */
}

.joe_bread__bread .item .link:hover {
    color: var(--theme); /* 悬停时主题色 */
}

.joe_bread__bread .item .icon {
    width: 15px; /* 图标宽度 */
    height: 15px; /* 图标高度 */
    min-width: 15px; /* 最小宽度 */
    min-height: 15px; /* 最小高度 */
    fill: var(--routine); /* 填充颜色 */
    margin-right: 2px; /* 右外边距 */
}

/* 分页样式 */
.joe_post__pagination {
    display: flex; /* 弹性布局 */
    justify-content: space-between; /* 两端对齐 */
}

.joe_post__pagination-item {
    margin-bottom: 15px; /* 底部外边距 */
}

.joe_post__pagination-item a {
    display: block; /* 块级显示 */
    height: 32px; /* 高度 */
    line-height: 32px; /* 行高 */
    padding: 0 15px; /* 内边距 */
    color: #fff; /* 文字颜色 */
    border-radius: 3px; /* 圆角 */
    background: var(--back-line-right); /* 背景色 */
    font-size: 12px; /* 字体大小 */
    box-shadow: var(--box-shadow); /* 阴影 */
}

.joe_post__pagination-item a:hover {
    -webkit-animation: pulse 1s; /* Webkit浏览器动画 */
    animation: pulse 1s; /* 标准动画 */
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); /* 悬停时阴影效果 */
}

.joe_post__pagination-item.next {
    margin-left: auto; /* 右侧自动外边距 */
}

/* 动画关键帧定义 */
@-webkit-keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 var(--theme); /* 动画起始阴影 */
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 var(--theme); /* 动画起始阴影 */
    }
}

/* 支付组件样式 */
.pay-box.pay-widget .vip-price {
    padding-top: 8px; /* 顶部内边距 */
    width: 100%; /* 宽度100% */
    display: inline-block; /* 行内块元素 */
    text-align: center; /* 居中对齐 */
    border-top: 1px solid rgba(255, 255, 255, .1); /* 上边框 */
    color: inherit; /* 继承颜色 */
}

.vip-price:hover {
    color: inherit; /* 悬停时颜色不变 */
    background: rgba(0, 0, 0, .05); /* 悬停背景 */
}

.vip-price-text {
    display: inline-block; /* 行内块显示 */
}

.pay-widget .vip-price+.vip-price {
    border-left: 1px solid rgba(255, 255, 255, .1); /* 相邻元素左边框 */
}

/* 支付相关元素宽度100% */
.pay-widget .cashier-link,
.pay-widget .initiate-pay,
.pay-widget .pay-button .dropup,
.pay-widget .signin-loader,
.pay-widget .vip-price,
.pay-widget .vip-price-buts {
    width: 100%;
}

.pay-widget .but-group>.but,
.pay-widget .but-group>.vip-price {
    width: 50%; /* 按钮组宽度50% */
}

.pay-widget .cashier-link,
.pay-widget .initiate-pay {
    padding: .5em; /* 内边距 */
}

.pay-widget .vip-price>.em12 {
    font-size: 2em; /* 字体大小2倍 */
    display: block; /* 块级显示 */
}

.pay-widget .price-box>.c-yellow {
    text-align: center; /* 居中对齐 */
    --this-color: #fff; /* 自定义颜色变量 */
}

.pay-gallery {
    width: 45%; /* 宽度45% */
    background: var(--main-border-color); /* 背景色 */
}

.pay-box .paid-info {
    border-left: 1px dashed rgba(255, 255, 255, .51); /* 虚线左边框 */
    padding-left: 20px; /* 左内边距 */
}

.pay-thumb {
    width: 40%; /* 缩略图宽度 */
}

.pay-widget .paid-info {
    border: unset; /* 移除边框 */
    padding: unset; /* 移除内边距 */
    border-top: 1px dashed rgba(255, 255, 255, .51); /* 上虚线边框 */
    padding-top: 10px; /* 上内边距 */
}

.paid-box {
    border-radius: var(--main-radius); /* 圆角 */
    padding: 0 !important; /* 强制移除内边距 */
}

.paid-info-box.flex {
    display: flex; /* 弹性布局 */
}

.paid-info a {
    color: inherit; /* 继承颜色 */
}

.paid-gallery {
    background: var(--main-border-color); /* 背景色 */
    padding: 60px; /* 内边距 */
}

.paid-down-group>.btn-block {
    display: inline-block; /* 行内块显示 */
    width: 50%; /* 宽度50% */
}

.pay-box {
    font-size: 14px; /* 字体大小 */
    position: relative; /* 相对定位 */
    overflow: hidden; /* 溢出隐藏 */
    line-height: 1.4; /* 行高 */
}

.pay-box .pay-tag,
.vip-product .vip-tag {
    font-size: 13px; /* 标签字体大小 */
    padding: 3px 10px; /* 内边距 */
    right: auto; /* 取消右对齐 */
    width: auto; /* 宽度自适应 */
    top: 10px; /* 距顶部10px */
    background: var(--this-bg); /* 背景色变量 */
    color: var(--this-color); /* 文字颜色变量 */
    border-radius: var(--main-radius) 0 var(--main-radius) 0; /* 圆角样式 */
    line-height: 1.4; /* 行高 */
    z-index: 1; /* 层级 */
}

.pay-box ul.list-inline {
    margin: 0 !important; /* 强制移除外边距 */
    padding: 0 !important; /* 强制移除内边距 */
}

.pay-box ul.list-inline li {
    width: 90px; /* 列表项宽度 */
    margin: 0; /* 移除外边距 */
}

.pay-box ul.list-inline li+li {
    width: calc(100% - 95px); /* 相邻列表项宽度计算 */
}

.cashier-link {
    padding: .5em 3em; /* 内边距 */
}

.but.initiate-pay {
    padding: .6em 1em; /* 内边距 */
}

/* 支付信息相关样式 */
.paid-info-box,
.pay-attr,
.pay-box .pay-details,
.pay-box .pay-extra-hide {
    font-size: 13px; /* 字体大小 */
    background: var(--muted-border-color); /* 背景色 */
    display: block; /* 块级显示 */
    padding: 6px 10px; /* 内边距 */
    line-height: 1.4; /* 行高 */
    color: var(--muted-color); /* 文字颜色 */
    border-radius: 4px; /* 圆角 */
}

.pay-attr {
    line-height: 1.6; /* 行高 */
}

.pay-box .pay-mark {
    font-size: 12px; /* 字体大小 */
    margin-right: 3px; /* 右外边距 */
}

.pay-box .pay-cuont {
    margin-left: 10px; /* 左外边距 */
    font-size: 12px; /* 字体大小 */
    padding: 1px 10px; /* 内边距 */
    vertical-align: top; /* 顶部对齐 */
}

.pay-box .pay-details {
    margin-top: 10px; /* 上外边距 */
    padding: 10px; /* 内边距 */
}

.pay-details ul {
    margin-top: 0 !important; /* 强制移除上外边距 */
    margin-bottom: 0 !important; /* 强制移除下外边距 */
}

.pay-box .pay-thumbnail {
    width: 80px; /* 缩略图宽度 */
    height: 80px; /* 缩略图高度 */
}

.pay-box .pay-thumbnail img {
    height: 100%; /* 图片高度100% */
}

.pay-box .pay-box-price {
    color: #fb403f; /* 价格颜色 */
    margin: 4px 0; /* 外边距 */
    font-size: 16px; /* 字体大小 */
}

.pay-box .vip-price {
    border: none; /* 无边框 */
    font-size: 12px; /* 字体大小 */
    padding: 4px 12px; /* 内边距 */
    flex: content; /* 弹性内容 */
}

.original-price {
    opacity: .7; /* 透明度 */
    position: relative; /* 相对定位 */
    padding: 0 3px 0 2px; /* 内边距 */
    font-size: 14px; /* 字体大小 */
    display: inline-block; /* 行内块显示 */
}

.original-price::before {
    content: ''; /* 伪元素内容 */
    position: absolute; /* 绝对定位 */
    width: 100%; /* 宽度100% */
    height: 1px; /* 高度1px */
    background: #ff343b; /* 删除线颜色 */
    top: .6em; /* 顶部位置 */
    left: 0; /* 左边位置 */
    transform: rotate(5deg); /* 旋转5度 */
}

.pay-box .but-download {
    padding: 10px 10px 5px 10px; /* 内边距 */
    min-width: 50%; /* 最小宽度 */
}

.pay-box .but-download .but {
    min-width: 130px; /* 按钮最小宽度 */
}

.pay-box .but-download .but+.but {
    min-width: auto; /* 相邻按钮宽度自动 */
}

.pay-box .but-download .but svg.icon,
.pay-box .but-download .but>.fa {
    margin-right: 1em; /* 图标右外边距 */
}

/* 不同下载按钮的背景色 */
.pay-box .but.baidu {
    background: #1578f8; /* 百度网盘颜色 */
}

.pay-box .but.lanzou {
    background: #f37526; /* 蓝奏云颜色 */
}

.pay-box .but.alipan {
    background: #66f; /* 阿里云盘颜色 */
}

.pay-box .but.weiyun {
    background: #33b0fa; /* 微云颜色 */
}

.pay-box .but.onedrive {
    background: #1254c6; /* OneDrive颜色 */
}

.pay-box .but.tianyi {
    background: #fe9c0a; /* 天翼云颜色 */
}

.pay-box .but.ctfile {
    background: #08be9f; /* 城通网盘颜色 */
}

/* 响应式设计：屏幕宽度小于640px */
@media (max-width: 640px) {
    .pay-box {
        padding: 10px; /* 内边距 */
    }

    .pay-title {
        margin-top: 18px; /* 上外边距 */
    }

    .pay-box .price-box {
        text-align: center; /* 居中对齐 */
    }

    .pay-flexbox {
        flex-wrap: wrap; /* 弹性换行 */
    }

    .pay-box .but-group>.but {
        width: 50%; /* 按钮宽度50% */
    }

    .pay-box .pay-button .signin-loader,
    .pay-box .vip-price-buts {
        width: 100%; /* 宽度100% */
    }

    .pay-gallery {
        width: 100%; /* 宽度100% */
        margin: 0; /* 移除外边距 */
    }

    .paid-gallery {
        padding: 30px; /* 内边距调整 */
    }

    .cashier-link,
    .initiate-pay {
        width: 100%; /* 宽度100% */
    }

    .user-pay .pay-box {
        padding: 10px 15px; /* 内边距 */
    }
}

/* 响应式设计：屏幕宽度小于480px */
@media (max-width: 480px) {
    .pay-box .but-download {
        width: auto; /* 宽度自适应 */
    }
}