@charset "utf-8";
/* CSS Document */
 @font-face { font-family:"HarmonyOS Sans"; src:url('https://t.mcn.plus/assets/fonts/harmonyos_sans_sc_regular-webfont.eot?#iefix') format('embedded-opentype'),  url('https://t.mcn.plus/assets/fonts/harmonyos_sans_sc_regular-webfont.woff2') format('woff2'),  url('https://t.mcn.plus/assets/fonts/harmonyos_sans_sc_regular-webfont.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }

@font-face { font-family:"DINBold"; src:url('https://t.mcn.plus/assets/fonts/DINBold.eot?#iefix') format('embedded-opentype'),  url('https://t.mcn.plus/assets/fonts/DINBold.woff2') format('woff2'),  url('https://t.mcn.plus/assets/fonts/DINBold.woff') format('woff'); font-style:normal; font-display:swap; } 
 
body>header.header .nav>li.active>a{color:#3280fc}
.load-next-page a{background-color:#3280fc}
.notice_headlines h2{background:#3280fc}
.page-tags-info:hover{border-color:#3280fc}
.page-tags-info:hover a{background:#3280fc;border-color:#3280fc}
.bulletin-list .bulletin-date:after,.bulletin-list .bulletin-date:before{background:#3280fc}
.bulletin-list .bulletin-time:after,.bulletin-list .bulletin-time:before{border:4px solid #3280fc}
.post-tag a:hover{background-color:#3280fc}
body>header.header .dropdown-menu>li>a:hover{color:#3280fc}
.navbar-action a{background-color:#3280fc;border:1px solid #3280fc}
.bulletin-list .bulletin-time{color:#3280fc}
.post_info .post-list-cat{background-color:#3280fc1a}
.post_info .post-list-cat a{color:#3280fc}
.article-container .post_tit .info .post-list-cat{background-color:#3280fc1a}
.article-container .post_tit .info .post-list-cat a{color:#3280fc}
.cms-module__border:before{background-color:#3280fc;}
.cms-module__border:after{background-color:#3280fc;}
.widget-border:before{background-color:#3280fc;}
.widget-border:after{background-color:#3280fc;}
.com-submit{background-color:#3280fc;}
.article-directory ol li a:hover {color: #3280fc;}
.article-directory ol li a.current {color: #3280fc;}
.gray-dot{background-color:#3280fc;}
.divSearchPanel form input[type=text]:focus{border-color:#3280fc}
.divSearchPanel form input[type=submit]{background-color:#3280fc;}
.divCalendar caption a{color:#3280fc;}
.divCalendar td a{color:#3280fc}
.divNavBar a:hover{background-color:#3280fc;}
.divCatalog a:hover{background-color:#3280fc;}
.divArchives ul li a:hover{color:#3280fc}
.divStatistics ul li::before{color:#3280fc}
.divFavorites ul li::before{color:#3280fc}
.divLinkage ul li::before{color:#3280fc}
.divAuthors ul li a:hover{color:#3280fc}
.pagination ul>.active>a,.pagination ul>.active>span{background-color:#3280fc;}
.abautor ul.widget-about-posts li:before{background:#3280fc;}
.abautor .widget-article-newest span{color:#fff; background:#0D6EFD; padding:5px 10px; border-radius:3px; }
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {background-color: #3280fc;}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {background-color: #3280fc;}
.swiper-pagination-bullet-active {background: #3280fc!important;opacity: 1!important;}
@media (max-width: 1000px) {.navbar-collapse{background:#3280fc}.collapse.in .primary-menu:before{background:#3280fc}
.user-wrap a { border:1px solid #fff;} }

/* 登录注册弹窗 */
.navbar-action { display: flex; align-items: center; gap: 20px; padding: 15px;  position: relative; z-index: 100; }
.user-wrap a { color: #fff; text-decoration: none; padding: 8px 15px; border-radius: 4px; transition: all 0.2s; display: inline-block; }
.user-wrap a:hover { background: #84B3FD; }
.auth-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.auth-modal { background-color: #fff; border-radius: 8px; width: 100%; max-width: 420px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); overflow: hidden; transform: translateY(20px); transition: transform 0.3s; margin: 20px; }
.auth-modal-overlay.active { opacity: 1; visibility: visible; }
.auth-modal-overlay.active .auth-modal { transform: translateY(0); }
.auth-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #84B3FD; }
.auth-tabs { display: flex; gap: 10px; }
.auth-tab { padding: 8px 16px; cursor: pointer; font-size: 16px; font-weight: 500; color: #6c757d; border-radius: 4px; transition: all 0.2s; }
.auth-tab.active { color: #495057; background: #f1f3f5; }
.close-modal { font-size: 22px; cursor: pointer; color: #adb5bd; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s; }
.close-modal:hover { background: #f1f3f5; color: #495057; }
.auth-modal-body { padding: 20px; }
.auth-form { display: none; }
.auth-form.active { display: block; animation: fadeIn 0.3s; }
@keyframes  fadeIn {  from { opacity: 0; } to { opacity: 1; } }
.form-group { margin-bottom: 15px; position: relative; }
.form-group i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #adb5bd; }
.form-group input { width: 100%; padding: 12px 15px 12px 38px; border: 1px solid #dee2e6; border-radius: 4px; font-size: 14px; transition: border-color 0.2s; }
.form-group input:focus { border-color: #4dabf7; outline: none; box-shadow: 0 0 0 2px rgba(77, 171, 247, 0.2); }
.form-group.required label:after { content: '*'; color: #ff6b6b; margin-left: 4px; }
.captcha-group { display: flex; gap: 10px; }
.captcha-group input { flex: 1; }
.captcha-img { width: 100px; height: 40px; background: #f1f3f5; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; color: #868e96; }
.more-options-toggle { display: flex; align-items: center; color: #4dabf7; font-size: 13px; margin: 10px 0; cursor: pointer; }
.more-options-toggle i { margin-right: 5px; transition: transform 0.2s; }
.more-options-toggle.active i { transform: rotate(180deg); }
.more-options { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.more-options.active { max-height: 500px; }
.avatar-upload { display: flex; align-items: center; margin-bottom: 15px; }
.avatar-preview { width: 50px; height: 50px; border-radius: 50%; background: #f1f3f5; margin-right: 10px; overflow: hidden; }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload-btn { padding: 8px 12px; background: #f1f3f5; border-radius: 4px; font-size: 13px; cursor: pointer; transition: background 0.2s; }
.avatar-upload-btn:hover { background: #e9ecef; }
.form-options { display: flex; justify-content: space-between; align-items: center; margin: 15px 0; font-size: 13px; }
.form-options label { display: flex; align-items: center; color: #6c757d; cursor: pointer; }
.form-options input[type="checkbox"] { margin-right: 6px; }
.forgot-password { color: #6c757d; text-decoration: none; transition: color 0.2s; }
.forgot-password:hover { color: #3280FC; }
.auth-btn { width: 100%; padding: 12px; background-color: #3280FC; color: white; border: none; border-radius: 4px; font-size: 16px; font-weight: 500; cursor: pointer; transition: background-color 0.2s; }
.auth-btn:hover { background-color: #339af0; }
.privacy-policy { text-align: center; margin-top: 15px; font-size: 13px; color: #868e96; }
.privacy-policy a { color: #3280FC; text-decoration: none; }
.social-login { margin-top: 25px; text-align: center; }
.social-login p { color: #adb5bd; font-size: 13px; margin-bottom: 15px; position: relative; }
.social-login p:before,  .social-login p:after { content: ''; position: absolute; top: 50%; width: 30%; height: 1px; background-color: #e9ecef; }
.social-login p:before { left: 0; }
.social-login p:after { right: 0; }
.social-icons { display: flex; justify-content: center; gap: 15px; }
.social-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; text-decoration: none; transition: transform 0.2s; }
.social-icon:hover { transform: translateY(-2px); }
.social-icon.wechat { background-color: #07C160; }
.social-icon.weibo { background-color: #E6162D; }
.social-icon.qq { background-color: #3280fc; } 
@media (max-width: 480px) { 
.auth-modal { margin: 10px; }
.auth-modal-header { padding: 15px; }
.auth-modal-body { padding: 15px; }
.auth-tab { padding: 8px 12px; font-size: 15px; }
.captcha-group { flex-direction: column; }
.captcha-img { width: 100%; margin-top: 10px; } }
#authModal:not(.active) { display: none !important; }

/* 侧栏悬浮功能 */
.sidebar-float { position: fixed; right: 20px; bottom: 80px; z-index: 999; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.float-btn { width: 50px; height: 50px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; position: relative; }
.float-btn:hover { background:#0D6EFD; /* QQ蓝色 */ color: white; transform: translateY(-3px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); }
.float-btn i { font-size: 20px; }
.qrcode-popup { position: absolute; right: 60px; width: 150px; padding: 15px; background: #fff; border-radius: 8px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); display: none; text-align: center; }
.qrcode-popup img { width: 120px; height: 120px; margin-bottom: 10px; }
.qrcode-popup p { font-size: 12px; color: #666; }
.float-btn:hover .qrcode-popup { display: block; animation: fadeIn 0.3s; }
@keyframes fadeIn {  from { opacity: 0; transform: translateX(10px); }
to { opacity: 1; transform: translateX(0); } }
/* 返回顶部按钮的显示/隐藏 */
.back-to-itop { opacity: 0; visibility: hidden; transition: all 0.3s; }
.back-to-itop.show { opacity: 1; visibility: visible; }
/* QQ客服按钮特殊样式 */
.qq-service { background:#0D6EFD; color: white; }
.qq-service:hover { background: #fbbc05; }
/* 响应式调整 */
@media (max-width: 768px) {
.sidebar-float { right: 10px; bottom:80px; }
.float-btn { width: 40px; height: 40px; }
.float-btn i { font-size: 16px; }
.qrcode-popup { right: 50px; width: 130px; padding: 10px; }
.qrcode-popup img { width: 110px; height: 110px; } }

/* 代码块基础样式 */
.article_content pre, .comment pre { margin: 20px 0; font-family:"HarmonyOS Sans", monospace; font-size:14px; line-height: 1.5; background: #272822; color: #f8f8f2; padding: 15px; border-radius: 4px; overflow-x: auto; position: relative; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); tab-size: 4; }
/* 代码块标题栏 */
.article_content pre::before, .comment pre::before { content: attr(data-language); display: block; padding: 5px 10px; background: #3e3d32; color: #a6a28c; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: -15px -15px 15px -15px; border-radius: 4px 4px 0 0; }
/* 代码行高亮 */
.article_content pre .highlight, .comment pre .highlight { background: rgba(255, 215, 0, 0.2); display: inline-block; width: 100%; padding:0 5px; margin: 0 -5px; }
/* 代码语法高亮 */
.article_content pre .keyword, .comment pre .keyword { color: #f92672; font-weight: bold; }    /* 关键字 */
.article_content pre .string, .comment pre .string { color: #e6db74; }                       /* 字符串 */
.article_content pre .comment, .comment pre .comment { color: #75715e; font-style: italic; }  /* 注释 */
.article_content pre .function, .comment pre .function { color: #66d9ef; }                     /* 函数 */
.article_content pre .number, .comment pre .number { color: #ae81ff; }                       /* 数字 */
.article_content pre .operator, .comment pre .operator { color: #f8f8f2; }                    /* 运算符 */
/* 复制按钮样式 */
.article_content pre .copy-btn, .comment pre .copy-btn { position: absolute; right: 10px; top: 10px; background: rgba(255, 255, 255, 0.1); color: #f8f8f2; border: none; border-radius: 3px; padding:3px 8px; font-size: 11px; cursor: pointer; transition: all 0.2s; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.article_content pre .copy-btn:hover, .comment pre .copy-btn:hover { background: rgba(255, 255, 255, 0.2); }
/* 响应式调整 */
@media (max-width: 768px) { .article_content pre,  .comment pre { font-size: 12px; padding: 12px; margin: 15px 0; } }

/* 帝国CMS列表分页样式 .listpage a,  */
/* 分页容器基础样式 */
.listpage { display: flex; justify-content: center; align-items: center; gap: 8px; margin:20px 0; font-size: 14px; }
/* 所有分页项基础样式 */
.listpage a { display: inline-block; min-width: 32px; height: 32px; line-height: 32px; text-align: center; padding: 0 10px; border-radius: 4px; color: #555; text-decoration: none; border: 1px solid #e0e0e0; background: #f9f9f9; transition: all 0.3s ease; }
/* 总条数特殊样式 */
.listpage a[title="总条数"] { background: #f0f4f8; color: #4a5568; border-color: #cbd5e0; margin-right:0px; }
/* 当前页样式（第2页） */
.listpage .pageclick { background:#3280fc; color: white; border-color:#3280fc; font-weight: normal; cursor: default; }
/* 普通页码悬停效果 */
.listpage a[href*="index"]:hover { background:#EDF5FF; border-color: #cbd5e0; color:#333; }
/* 首页/末页特殊样式 */
.listpage a:contains("首页"), .listpage a:contains("尾页") { padding: 0 12px; }
/* 上一页/下一页特殊样式 */
.listpage a:contains("上一页"), .listpage a:contains("下一页") { padding: 0 12px; }
/* 禁用状态（当前页） */
/*.listpage a:not([href]) { cursor: default; }*/
 @media (max-width: 768px) {
.listpage { flex-wrap: wrap; }
.listpage a[title="总条数"] { margin-right: 0; width: 100%; margin-bottom: 10px; } }
.listpage dt {background: #0D6EFD;padding: 0 10px;border: 0;line-height: 30px;border-radius: 3px;color: #fff;}
/* .abautor .widget-article-newest { padding:0 10px 0 10px;background:#fff;position:relative;z-index:2;color:#06c	} */
.widget-about-desc { padding:10px 0 5px 0; }
.widget-about-desc ul { width: 90%; margin: 0 auto; font-size:14px;}
.widget-about-desc ul li { width:23%; float:left; border:1px solid rgba(0,0,0,.08); background:#fff; margin-left:2%; padding:15px 0; border-radius:4px; color:#a2a6b1;} 
.widget-about-desc ul li dt { font-size:16px; padding-bottom:5px; color:#2a2a2a; font-weight:bold; }
.widget-about-desc ul li:hover { cursor:pointer; background:#f6f6f6;  }

/* 社交媒体图标样式 */
.social-icons { margin:10px 0 5px 0; padding: 0; }
.social-icons ul { display: flex; justify-content: center; gap: 15px; list-style: none; padding: 0; margin: 0; }
.social-icons img { width: 40px; height: 40px; border-radius:25%; padding:0px; box-sizing: border-box; transition: all 0.3s ease; filter: brightness(1); }
.social-icons a:hover img { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.social-icons li:nth-child(1) img { background-color: #07C160; }
.social-icons li:nth-child(2) img { background-color: #FF2442; }
.social-icons li:nth-child(3) img { background-color: #ffffff; }
.social-icons li:nth-child(4) img { background-color: #f00; }
.social-icons li:nth-child(5) img { background-color: #fb7299; }

/* 默认隐藏底部菜单（PC端） */
.bottom-nav { display:none;}
.bottom-nav i { font-size:18px;}
/* 移动端样式 */
@media (max-width:768px) {
.bottom-nav { display:flex;position:fixed;bottom:0;left:0;right:0;height:60px;background-color:#fff;box-shadow:0 -2px 10px rgba(0, 0, 0, 0.1);z-index:100;}
.nav-item { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#999;text-decoration:none;font-size:14px;transition:all 0.3s ease;position:relative;}
/* 选中状态样式 */
.nav-item.active { color:#4285F4;}
.nav-item.active .nav-icon { transform:translateY(-3px);}
/* 选中状态指示器（小圆点） */
/* .nav-item.active::after { content:'';position:absolute;top:5px;width:6px;height:6px;background-color:#4285F4;border-radius:50%;} */
.nav-icon { font-size:20px;margin-bottom:0px;transition:all 0.3s ease;}
/* 中间按钮特殊样式 */
/* .nav-item:nth-child(3) { position:relative;}
.nav-item:nth-child(3)::before { content:'';position:absolute;top:-15px;width:50px;height:50px;background-color:white;border-radius:50%;box-shadow:0 -2px 5px rgba(0, 0, 0, 0.1);z-index:-1;}
.nav-item:nth-child(3) .nav-icon { font-size:24px;background:linear-gradient(135deg, #4285F4, #34A853);-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:-10px;} } */
/* 选中状态指示器（小圆点） */
/* .nav-item.active::after { content:'';position:absolute;top:5px;width:6px;height:6px;background-color:#4285F4;border-radius:50%;} */
.nav-icon { font-size:20px;margin-bottom:0px;transition:all 0.3s ease;}
/* 中间按钮特殊样式 */
/* .nav-item:nth-child(3) { position:relative;}
.nav-item:nth-child(3)::before { content:'';position:absolute;top:-15px;width:50px;height:50px;background-color:white;border-radius:50%;box-shadow:0 -2px 5px rgba(0, 0, 0, 0.1);z-index:-1;}
.nav-item:nth-child(3) .nav-icon { font-size:24px;background:linear-gradient(135deg, #4285F4, #34A853);-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:-10px;} */
}
#enewspl li { border-bottom: 1px dashed #eaeaea; padding-bottom:10px; }
.comment-inner {background:#f7f7f7; padding:2px 10px; border-radius:3px; margin:10px 0; }

/** 帮助 **/
.ho-show-digg { margin:2rem 0 0rem;padding:2rem 0 0;text-align:center;border-top:1px solid #eee; line-height:35px;}
.ho-show-digg dd:nth-child(2) a, .ho-show-digg dd:nth-child(2) em {  padding:.5rem 2rem;margin:0 .5rem;border:1px solid #0D6EFD;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;font-size:16px;}
.ho-show-digg dd:nth-child(2) a:hover, .ho-show-digg dd:nth-child(2) em:hover { color:#fff;background:#0D6EFD;transition:all .5s ease-out;cursor:pointer;}
.ho-show-digg dd:nth-child(3) { font-size:0.875rem;}
.ho-show-digg dd:last-child { font-size:16px; }
.ho-show-digg dd:last-child a:hover { text-decoration:underline;}
.ho-show-digg #diggnum { color:#f00; }
/* --内容下载样式 Str-- */
.single_ts { width: 100%; height: auto; margin: 0 auto; text-align: center; font-size: 16px; padding: 10px; margin-bottom:20px; margin-top:5px; border-radius: 5px; 
background: rgba(250, 242, 22, 0.6); }
.single_ts a { color: #f00; font-weight: bold; font-size:16px;}
.single_ts em { display:inline-block; background: #1487f4; color: #fff; font-weight: bold; font-style: normal; padding:3px 10px; border-radius: 3px;}  
.single_ts em a { background: #1487f4; color: #fff;  }
.mbtext-box { background: #fff; overflow: hidden; padding:20px 20px 10px 20px; margin: 0; border:1px solid #ccc; border-radius:5px; margin-bottom:15px; }
.mbtext-box #tab { margin: 0; font-weight: bold; font-size: 16px; border-bottom:1px solid #f2f2f2; padding-bottom:10px; }
.mbtext-box #tab-content { margin: 0; overflow: initial; }
.mb-base dl { margin:0px 0; float: left; width: 100%; padding:5px 0 0 0; }
.mb-base dd { border-bottom: #f2f2f2 1px solid; color: #2c3e50; line-height: 28px; padding: 10px 0;  }
.mb-base dd p {  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  }
.mb-base dd span { float: left; margin: 0 20px 0 0; padding: 0 0 0 0; position: relative; width:80px; text-indent: 30px; }
.mb-base dd span:after { position: absolute; content: ''; background: #ddd; width: 1px; height: 20px; right: 0; top: 5px }
.mb-base dd i { display: inline-block; }
.mb-base dd:nth-child(1) { background: url('../img/mbicon01.png') no-repeat left center; background-size: 20px }
.mb-base dd:nth-child(2) { background: url('../img/mbicon02.png') no-repeat left center; background-size: 20px }
.mb-base dd:nth-child(3) { background: url('../img/mbicon03.png') no-repeat left center; background-size: 20px }
.mb-base dd:nth-child(4) { background: url('../img/mbicon04.png') no-repeat left center; background-size: 20px }
.mb-base dd:nth-child(5) { background: url('../img/mbicon05.png') no-repeat left center; background-size: 20px }
.mb-base dd:nth-child(6) { background: url('../img/mbicon07.png') no-repeat left center; background-size: 20px }
.mb-base dd:nth-child(7) { background: url('../img/mbicon08.png') no-repeat left 16px; background-size: 20px }
.mb-base dd:nth-child(8) { background: url('../img/mbicon08.png') no-repeat left 16px; background-size: 20px; border-bottom:none; }
.mb-base dd:nth-child(4) i { display: inline-block; width: 20px; height: 20px; background: url(../img/mbicon09.png) no-repeat left 5px; background-size: 20px; }
.mb-base dd:nth-child(3) img { height: 16px; display: inline-block; vertical-align: middle; }
.mb-base dd:nth-child(3) a { margin-right: 20px; color: #2c3e50; padding-left: 30px; display: inline-block; background: url("../img/mbicon11.png") no-repeat 0 3px; background-size: 24px; }
.mb-base dd:nth-child(3) a:hover { color: #1487f4 }
.mb-base dd:nth-child(3) b { color: #f00; font-size: 18px; margin-right: 5px }
.mb-base a { font-size:16px;}
a.btn-yulan { padding: 5px 10px; margin-right:10px; background: #1487f4; border-radius: 3px; color: #fff; }
a.btn-yulan:hover { background: #0976dc; }
a.btn-wd { padding:5px 10px; background: #52d2a3; border-radius: 3px; color: #fff; }
a.btn-wd:hover { background: #36bc8b; }
 @media only screen and (max-width: 768px) {
.mb-base dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.mb-base img { width:30px; height:auto;}
/* --内容下载样式 End-- */

/*************************************************************************************/
.weibo-item { background-color: #fff; border-radius:3px; padding: 15px; margin-bottom: 15px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.user-info { display: flex; align-items: center; margin-bottom: 12px; }
.avatar { width: 40px; height: 40px; border-radius:10%; margin-right: 10px; object-fit: cover; }
.user-name { font-weight: bold; font-size: 16px; margin-bottom:8px; }
.post-time { font-size: 12px; color: #999; }
.content { margin-bottom: 12px; font-size: 15px; word-break: break-word; }
.topic { color: #ff8200; margin-right: 5px; }
.image-container { margin-top: 10px; display: grid; grid-gap:10px; }

/*.image-container.single { grid-template-columns: 1fr; }*/
/*.image-container.double { grid-template-columns: repeat(2, 1fr); }*/

.image-container.single { grid-template-columns: repeat(3, 1fr); }
.image-container.double { grid-template-columns: repeat(3, 1fr); }
.image-container.triple { grid-template-columns: repeat(3, 1fr); }

.weibo-image { width: 100%; height: auto; border-radius: 5px; cursor: zoom-in; object-fit: cover; }
.image-container.single .weibo-image { max-height:210px; width: 100%; }
.image-container.double .weibo-image,  .image-container.triple .weibo-image { aspect-ratio: 1; }
.actions { display: flex; justify-content: space-around; padding-top: 10px; border-top: 1px solid #f0f0f0; margin-top: 10px; }
.action-item { display: flex; align-items: center; color: #666; font-size:14px; }
.action-item i { padding-right:4px; }
.action-icon { margin-right: 5px; font-size: 16px; }
/* 灯箱样式 */
.lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 1000; justify-content: center; align-items: center; }
.lightbox.active { display: flex; }
.lightbox-img { max-width: 90%; max-height: 90%; object-fit: contain; }
.lightbox-close { position: absolute; top: 20px; right: 20px; color: white; font-size: 30px; cursor: pointer; }
.lightbox-nav { position: absolute; width: 100%; display: flex; justify-content: space-between; padding: 0 20px; box-sizing: border-box; }
.lightbox-prev, .lightbox-next { color: white; font-size: 30px; cursor: pointer; background-color: rgba(0, 0, 0, 0.5); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/*************************************************************************************/

.badge { display: inline-flex; height: 20px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 1px rgba(0,0,0,0.2); line-height: 20px; font-size: 11px; color: white; text-align: center; }
.badge a { color:#fff; }
.badge-left { background-color: #555; padding: 0 8px; position: relative; }
.badge-left::after { content: ""; position: absolute; top: 0; right: -4px; width: 8px; height: 20px; background: linear-gradient(135deg, transparent 50%, #555 50%); transform: skewX(20deg); }
.badge-right { padding: 0 8px; position: relative; }
.badge-text { position: relative; text-shadow: 0 1px 1px rgba(0,0,0,0.3); }
/* 不同徽章的颜色 */
.bgli1 .badge-right { background:#00B16A; }
.bgli2 .badge-right { background:#F01F7A;}
.bgli3 .badge-right { background:#CB3837;}
.bgli4 .badge-right { background:#5E8B7E;}
.bgli5 .badge-right { background:#F7B93E;}
.bgli6 .badge-right { background:#0077B5;}
.bgli7 .badge-right { background:#8DBB06;}
.bgli8 .badge-right { background:#4DB6AC;}


.footer .container p:nth-of-type(2) {  padding:8px 0;  }
.footer .container b { padding:0 3px; font-weight:normal; }
@media (max-width: 768px) { 
.footer .container p:nth-of-type(1) {  padding:5px 0;  }
.footer .container #span { display: block;  width: auto;  } 
.badge { margin-bottom:5px; }
.footer { padding:30px 0 70px 0; } }