/* 文章列表页 */
.page-column { padding: 0 24px; background-color: #fff;}
.page-column .column-title { margin-bottom: 8px; padding-top: 16px; padding-bottom: 8px; border-bottom: 1px solid #eee;}
.page-column .column-title .title { position: relative; display: inline-block; line-height: 32px; font-size: 20px; font-weight: 500;}
.page-column .column-title .title::after { content: ''; position: absolute; left: 0; bottom: -9px; width: 100%; height: 2px; background-color: #fa7a20;}
.page-column .column-classify { display: flex; flex-wrap: wrap;}
.page-column .column-classify .classify-item { display: block; width: 120px; height: 40px; background-color: #fff; border: 1px solid #ddd; line-height: 40px; text-align: center; font-size: 14px;}
.page-column .column-classify .classify-item:not(:first-child) { margin-left: -1px;}
.page-column .column-crumbs {}
/* 文章列表 */
.article-item { display: flex; padding: 16px 0; background-color: #fff;}
.article-item:not(:last-child) { border-bottom: 1px solid #eee;}
.article-item .img { width: 160px; height: 120px; margin-right: 20px; overflow: hidden;}
.article-item .img img { width: 100%; height: 100%; object-fit: cover;}
.article-item .info { flex: 1; min-width: 0; padding: 8px 0;}
.article-item .title { font-size: 20px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.article-item .meta { margin-top: 8px; font-size: 13px; color: #888;}
.article-item .desc { margin-top: 8px; line-height: 24px; font-size: 14px; color: #666; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis;}

/* 文章详情页 */
.page-details { padding: 0 24px; background-color: #fff;}
.page-details .article-hd { padding: 24px 0; border-bottom: 1px solid #eee;}
.page-details .article-title { padding: 24px 0 8px; font-size: 34px;}
.page-details .article-info { line-height: 24px; color: #888;}
.page-details .article-info span { padding-right: 16px; white-space: nowrap;}
.page-details .article-info a { color: #888;}
.page-details .article-info a:hover { color: #00a0e9;}
.page-details .article-bd { padding: 24px 0 32px;}
.m-article .article-text { line-height: 26px; font-size: 16px; text-align: justify;}
.m-article .article-text p { margin: 12px 0; text-indent: 2em;}
.m-article .article-text img { display: block; margin: 0 auto; max-width: 100%; height: auto;}
.m-next-pre { display: flex; justify-content: space-between; padding-top: 16px; margin-top: 40px; border-top: 1px solid #eee; font-size: 14px;}
.m-next-pre .prev,
.m-next-pre .next { width: 40%; padding: 8px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.m-next-pre .prev { text-align-last: left;}
.m-next-pre .next { text-align: right;}

.m-permission { position: relative; margin: 24px 0;}
.m-permission .permission-bg { background-color: rgba(220, 220, 220, 0.1); line-height: 24px; font-size: 16px; color: #888; filter: blur(3px); user-select: none;}
.m-permission .permission-main { position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 16px 24px;}
.m-permission .permission-text { text-align: center; font-size: 16px;}
.m-permission .permission-btn { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: inline-block; margin-top: 8px;  padding: 8px 16px; background-color: #fa7a20; border: 1px solid #fa7a20; border-radius: 4px; color: #fff;}
.m-permission .permission-btn a:hover { background-color: #F1B305; border-color: #F1B305; color: #fff;}

/* 会员购买 套餐 */
.vip-wrap { overflow: hidden; background-color: #fff; border-radius: 8px;}
.vip-header { padding: 48px 0; background-color: #318aff;}
.vip-header .vip-title { text-align: center; font-size: 32px; color: #fff;}
.vip-header .vip-desc { margin-top: 8px; text-align: center; font-size: 16px; color: rgba(255, 255, 255, 0.9);}
.vip-package { display: flex; justify-content: space-evenly; padding: 32px 24px;}
.vip-package .package-item { width: 240px; height: 120px; padding: 16px 16px; border: 2px solid #eee; border-radius: 8px; text-align: center; cursor: pointer;}
.vip-package .package-item .price { color: #FF3F15;}
.vip-package .package-item .price .yen { margin-right: 2px; font-size: 16px;}
.vip-package .package-item .price .num { font-size: 36px; font-weight: 700;}
.vip-package .package-item .title { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #aaa; font-size: 16px;}
.vip-package .package-item .desc { margin-top: 4px;text-align: center; color: #888;}
.vip-package .package-item.on { border-color: #ff5a00; box-shadow: 0 4px 8px rgba(255, 90, 0, 0.2);}
/* 会员购买 套餐 */
.vip-pay { margin: 24px 24px 0; padding: 24px 24px 32px; border: 1px dashed #ddd;}
.vip-pay .pay-title { text-align: center; font-size: 16px;}
.vip-pay .pay-list { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 24px 0;}
.vip-pay .pay-item { width: 180px; padding: 16px 16px; text-align: center; background-color: #fff; border: 1px solid #eee; border-radius: 8px; cursor: pointer;}
.vip-pay .pay-item .title { font-size: 16px; user-select: none;}
.vip-pay .pay-item.on { border-color: #ff5a00; box-shadow: 0 4px 8px rgba(255, 90, 0, 0.2);}
.vip-pay .pay-item.on .title { color: #ff5a00;}
.vip-pay .pay-item.disable { cursor: not-allowed;}
.vip-pay .pay-item.disable .title { color: #aaa;}
.vip-submit { margin-top: 48px; padding: 0 24px 48px;}
.vip-submit .btn { margin: 0 auto; width: 50%; padding: 12px 24px; background-color: #ff5a00; border: 1px solid #ff5a00; border-radius: 4px; text-align: center; font-size: 18px; color: #fff; cursor: pointer;}
/* 上传支付凭证 */
.upload-voucher { margin: 24px 0 8px;}
.upload-voucher .upload-label { text-align: center; font-size: 16px;}
.upload-voucher .upload-input { margin-top: 16px; display: flex; justify-content: center;}
.upload-voucher .upload-img { position: relative; margin: 0 8px; width: 144px; height: 144px; padding: 1px; border: 1px solid #ddd; border-radius: 4px;}
.upload-voucher .upload-img img { width: 100%; height: 100%;}
.upload-voucher .upload-img .del { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; background-color: rgba(100, 100, 100, 0.6); text-align: center; line-height: 16px; font-size: 12px; color: #fff; cursor: pointer;}
.upload-voucher .upload-btn { display: inline-block; margin: 0 8px; width: 144px; height: 144px; padding: 1px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;}
.upload-voucher .upload-btn .text { display: flex; align-items: center; height: 100%; justify-content: center; color: #888;}