@charset "utf-8";
/* CSS Document */
/* 默认 = 移动端（<768px）*/
    /* 防止iOS Safari输入框聚焦自动缩放*/
    input, textarea, select {
        font-size: 16px !important;
    }
    .container{
        width:100%;
    }
    .overanimation{
        transition-duration:0.5s;
        -webkit-transition-duration:0.5s;/* Safari */
    }
    header{
        width:100%;
		height:70px;
        background-color:#000;
		background-image:url('/uploads/site/header-background.jpg');
		background-position:center top;
		background-repeat:no-repeat;
        background-size:100% auto;
        margin:0 auto;
        padding:0;
        overflow:hidden;
    }
    /*global*/
    .wrapper{
        border-radius:5px;
        background:var(--wrapperColor);
        margin:0 auto;
        padding:0;
    }
    .topnav{
        width:100%;
        height:5rem;
        line-height:3rem;
        font-size:1.6rem;
        color:var(--topnavColor);
        background:var(--titleBackgroundColor);
        margin:0;
        padding:1rem 18px;
    }
    .topnav-left,.topnav-right{
        margin:0;
        padding:0;
    }
    ul.topnav-left li:nth-child(1),ul.topnav-left li:nth-child(2){
        display:none;
    }
    ul.topnav-left li.mobile-menu{
        width:3rem;
        height:3rem;
        background:url('../img/icon_mobile_menu_light.png') left center no-repeat;
        background-size:3rem 3rem;
        display:inline-block;
    }
    ul.topnav-left li.dark{
        background:url('../img/icon_mobile_menu_dark.png') left center no-repeat;
        background-size:3rem 3rem;
    }
    ul.topnav-left li.mobile-layout-color{
        width:3rem;
        height:3rem;
    }
    ul.topnav-left li.mobile-layout-color span.lightToDark{
        width:3rem;
        height:3rem;
        background:url(../img/light.png) center center no-repeat;
        background-size:2rem 2rem;
        display:block;
        cursor:pointer;
    }
    ul.topnav-left li.mobile-layout-color span.darkToLight{
        width:3rem;
        height:3rem;
        background:url(../img/dark.png) center center no-repeat;
        background-size:2rem 2rem;
        display:block;
        cursor:pointer;
    }
    .topnav li a{
        width:auto;
        height:3rem;
        line-height:3rem;
        font-size:1.6rem;
        color:var(--topnavColor);
    }
    .topnav li a:hover{
        color:var(--darkTitleColor);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .topnav-right .dropdown-menu a{
        color:var(--blackColor);
    }
    .topnav-right .dropdown-menu a:hover{
        color:var(--darkTitleColor);
    }
    .header-inner{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:0 18px;
    }
    .logo{
        width:auto;
        height:7rem;
        text-align:center;
        display:block;
        margin:0;
        padding:1rem 0;
        overflow:hidden;
        flex:1;
    }
    .logo img{
        width:auto;
        height:5rem;
    }
    .mobile-search-toggle{
        width:3.5rem;
        height:3.5rem;
        line-height:3.5rem;
        text-align:center;
        color:#fff;
        font-size:2rem;
        cursor:pointer;
        flex-shrink:0;
    }
    .mobile-search-box{
        width:100%;
        padding:0 18px 10px;
        display:none;
    }
    .mobile-search-box.show{
        display:block;
    }
    .mobile-search-container{
        display:flex;
        width:100%;
        height:4rem;
        border-radius:2rem;
        background:rgba(255,255,255,0.2);
        overflow:hidden;
    }
    .mobile-keywords{
        flex:1;
        height:100%;
        border:none;
        background:transparent;
        padding:0 1.5rem;
        font-size:16px;
        color:#fff;
        outline:none;
    }
    .mobile-keywords::placeholder{
        color:rgba(255,255,255,0.7);
    }
    .mobile-search-btn{
        width:4rem;
        height:100%;
        border:none;
        background:transparent;
        color:#fff;
        font-size:1.6rem;
        cursor:pointer;
        padding:0;
    }
    .site-info{
        width:100%;
        height:auto;
        display:block;
        margin:0 auto;
        padding:10px 0;
        overflow:hidden;
    }
    .site-name{
        width:100%;
        height:auto;
        line-height:100%;
        text-align:center;
        display:block;
        margin:0 auto 5px;
    }
    .site-name a{
        font-size:24px;
        /*color:#EAEAEA;*/
        font-family:'poppins';
        text-align:center;
        font-weight:bold;
        background: linear-gradient(to right, #ff8c4c, #3f387c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent; /* 兼容标准属�?*/
    }
    .site-intro{
        width:100%;
        height:auto;
        line-height:100%;
        font-size:14px;
        color:#EAEAEA;
        font-weight:bold;
        font-family:'lato';
        text-align:center;
        margin-bottom:0;
    }
    .header-search{
		display:none;
    }
    nav#nav{
        width:100%;
        height:100%;
        background:var(--navBackgroundColor);
        margin:0;
        padding:0;
        overflow-x:hidden;
        overflow-y:scroll;
        display:none;
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        z-index:10000000000;
    }
    nav ul,nav ul.nav,nav ul.nav-list{
        width:100%;
        height:auto;
        margin:0;
        padding:6rem 2rem 2rem;
    }
    nav ul li{
        width:100%;
        height:auto;
        margin:0;
        padding:0 2rem;
        display:block;  /* 加：横向排列 */
        float:none;  /* 加：横向排列 */
        position:static;
    }
    nav ul li a{
        width:100%;
        height:5rem;
        line-height:5rem;
        font-size:3rem;
        color:var(--navColor);
        font-weight:bold;
        text-align:left;
        background:none;
        margin:0;
        padding:0 0 0 38px;
        display:block;
    }
    nav ul li a sup{
        font-size:2rem;
        color:var(--lightBlueColor);
        font-weight:normal;
        background:none;
    }
    nav ul li a:hover,nav ul li a.current{
        color:var(--navColor);
        text-decoration:none;
        background:var(--lightBlueColor);
    }
    nav ul li a:hover sup,nav ul li a.current sup{
        color:var(--navColor);
    }
	nav ul li a.follow-feed-nav{
	    position:relative;
	}
	nav ul li a.follow-feed-nav sup{
	    color:var(--lightBlueColor);
	}
	nav ul li a.follow-feed-nav:hover sup,
	nav ul li a.follow-feed-nav.current sup{
	    color:var(--navColor);
	}
	nav ul li a.follow-feed-nav .follow-unread-badge{
	    display:inline-flex;
	    align-items:center;
	    justify-content:center;
	    min-width:18px;
	    height:18px;
	    line-height:18px;
	    padding:0 5px;
	    border-radius:9px;
	    background:#B22712;
	    color:#fff;
	    font-size:11px;
	    font-weight:bold;
	    font-style:normal;
	    margin-left:5px;
	    vertical-align:middle;
	    position:relative;
	    top:-1px;
	}
	nav ul li a.follow-feed-nav:hover .follow-unread-badge,
	nav ul li a.follow-feed-nav.current .follow-unread-badge{
	    background:#fff;
	    color:#B22712;
	}
        @keyframes rotate{
        from{
            transform:rotate(0deg)
        }
        to{
            transform:rotate(360deg)
        }
    }
    nav#nav .layout-color{
        width:5rem;
        height:5rem;
        position:fixed;
        top:5px;
        left:5px;
        z-index:100000000002;
        display:none;
    }
    nav#nav .layout-color-click{
        animation:rotate 0.5s linear 0s 1;
    }
    nav#nav span.lightToDark{
        width:5rem;
        height:5rem;
        background:url(../img/light.png) center center no-repeat;
        background-size:2rem 2rem;
        display:block;
        cursor:pointer;
    }
    nav#nav span.darkToLight{
        width:5rem;
        height:5rem;
        background:url(../img/dark.png) center center no-repeat;
        background-size:2rem 2rem;
        display:block;
        cursor:pointer;
    }
    .subnav{
        width:100%;
        height:auto;
        text-align:left;
        background:var(--navBackgroundColor);
        display:block;
        position:static;
        top:auto;
        left:auto;
        right:auto;
        z-index:auto;
    }
    nav ul li:hover .subnav{
        display:block;
    }
    .subnav a{
        width:100%;
        height:5rem;
        line-height:5rem;
        font-size:3rem;
        color:var(--navColor);
        font-weight:bold;
        text-align:left;
        background:none;
        padding:0 2rem 0 7rem;
        display:block;
    }
    .subnav a sup{
        color:var(--lightBlueColor);
        font-size:2rem;
    }
    .subnav a:hover,.subnav a.current{
        color:var(--navColor);
        text-decoration:none;
        background:var(--lightBlueColor);
    }
    .subnav a:hover sup,.subnav a.current sup{
        color:var(--navColor);
    }
    nav#nav .mobile-menu-close{
        width:5rem;
        height:5rem;
        font-size:5rem;
        color:var(--titleColor);
        position:fixed;
        top:5px;
        right:5px;
        z-index:100000000001;
        display:none;
    }
    .breadcrumb{
        width:100%;
        height:auto;
        line-height:2.5rem;
        font-size:1.4rem;
        color:var(--lightColor);
        border-radius:0;
        background:var(--backgroundColor);
        margin:5px auto 0;
        padding:10px 20px;
        overflow:hidden;
    }
    .breadcrumb a{
        color:var(--subTitleColor);
    }
    .breadcrumb a:hover{
        color:var(--hoverColor,#236ddb);
    }
    main.homepage-main-body,main.subpage-main-body{
        height:auto;
        margin:0px auto 0;
        padding:0;
    }
    .subpage-left{
    	height:auto;
    	margin:0;
    	padding:0;
    }
    .main-left{
    	height:auto;
    	margin:0;
    	padding:0;
    }
	.ai-site-notice{
		background:none;
		border:none;
		border-radius:0;
		padding:10px 15px;
		margin-top:5px;
		margin-bottom:5px;
		color:var(--subTitleColor);
		font-size:1.4rem;
		line-height:1.7;
		display:flex;
		align-items:flex-start;
	}
    ul.subpage-blog-list{
        width:100%;
        height:auto;
        list-style:none;
        display:flex;
        flex-wrap:wrap;
        margin:0;
    }
    ul.subpage-blog-list li{
        width:100%;
        height:auto;
        list-style:none;
        background:var(--backgroundColor);
        margin-right:0;
        margin-bottom:4px;
        padding:10px 15px;
        overflow:hidden;
    }
    ul.subpage-blog-list li h3{
        width:100%;
        height:auto;
        line-height:3rem;
        margin-bottom:0;
        padding:0;
        overflow:hidden;
    }
    ul.subpage-blog-list li h3 a{
        width:100%;
        height:auto;
        /*line-height:3rem;*/
        font-size:1.8rem;
        color:var(--titleColor);
        font-weight:bold;
        display:inline-block;
    }
    ul.subpage-blog-list li h3 a sup{
        font-size:1.4rem;
        color:var(--redColor);
        margin-left:3px;
    }
    ul.subpage-blog-list li h3 a:hover,.main-left ul.subpage-blog-list li h3 a:hover sup{
        color:var(--hoverColor,#236ddb);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    ul.subpage-blog-list li .blog-info{
        width:100%;
        height:4.5rem;
        line-height:2rem;
        font-size:1.4rem;
        color:var(--lightColor);
        border-bottom:1px solid var(--borderColor);
        margin-bottom:10px;
        padding-bottom:5px;
    }
    ul.subpage-blog-list li .blog-info .avatar{
        width:20px;
        height:40px;
    }
    ul.subpage-blog-list li .blog-info .avatar img{
        width:20px;
        height:20px;
        border-radius:50%;
        margin:10px 0 0;
    }
    ul.subpage-blog-list li .blog-info-right{
        width:auto;
        height:40px;
        margin-left:5px;
    }
    ul.subpage-blog-list li .blog-info-right .username{
        width:auto;
        font-style:normal;
        display:block;
        margin-left:5px;
    }
    ul.subpage-blog-list li .blog-info-right .username a{
        width:auto;
        height:auto;
        line-height:140%;
        font-size:14px;
        color:var(--lightColor);
    }
    ul.subpage-blog-list li .blog-info-right .username a:hover{
        color:var(--hoverColor,#236ddb);
    }
    ul.subpage-blog-list li .blog-info-right .readtimes{
        font-style:normal;
    }
    ul.subpage-blog-list li .blog-info-right .readtimes a{
        line-height:140%;
        font-size:14px;
        color:var(--lightColor);
    }
    ul.subpage-blog-list li .blog-info-right .readtimes a:hover{
        color:var(--hoverColor,#236ddb);
    }
    ul.subpage-blog-list li .blog-info-right .postedtime{
        background:none;
        padding-left:0;
        display:inline-block;
        float:right;
    }
    ul.subpage-blog-list li .blog-thumbnail{
        width:100%;
        height:200px;
        margin-bottom:10px;
        background:none;
        /*display: flex;*/ /* 设置容器为flex布局 */
        /*justify-content: center;*/ /* 水平居中对齐子项�?*/
        /*align-items: center;*/ /* 垂直居中对齐子项�?*/
        display: grid;  /*设置容器为Grid布局 */
        place-items: center;  /*同时水平和垂直居中对齐子项目 */
        overflow:hidden;
        position:relative;
    }
    ul.subpage-blog-list li .blog-thumbnail img{
        width:100%;
        height:auto;
        min-height:100%;
        position:absolute;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
    	-ms-transform:translate(-50%,-50%);
    	transform:translate(-50%,-50%);
    }
    ul.subpage-blog-list li .blog-thumbnail a:hover img{
        width:120%;
        height:auto;
        min-height:120%;
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    ul.subpage-blog-list li .blog-thumbnail mark{
        width:auto;
        height:auto;
        background:#C05763;
        padding:3px 5px;
        position:absolute;
        top:auto;
        left:10px;
        right:auto;
        bottom:10px;
        z-index:2;
    }
    ul.subpage-blog-list li .blog-thumbnail mark.dark{
        background:#C05763;
    }
    ul.subpage-blog-list li .blog-thumbnail mark a{
        width:auto;
        height:auto;
        font-size:14px;
        color:#ECC6CC;
        font-weight:normal;
        display:block;
    }
    ul.subpage-blog-list li .blog-thumbnail mark em,ul.subpage-blog-list li .blog-thumbnail mark i{
        display:none;
    }
    .blog-thumbnail mark{
        width:auto;
        height:auto;
        background:#C05763;
        padding:3px 5px;
        position:absolute;
        top:auto;
        left:10px;
        bottom:10px;
        z-index:2;
    }
    .blog-thumbnail mark a{
        width:auto;
        height:auto;
        font-size:14px;
        color:#ECC6CC;
        font-weight:normal;
        display:block;
    }
    ul.subpage-blog-list li .blog-content{
        width:100%;
        /*height:6rem;*/
        /*line-height:3rem;*/
        /*font-size:1.4rem;*/
        color:var(--subTitleColor);
        margin-bottom:0;
        overflow:hidden;
    }
    ul.subpage-blog-list li .blog-content span.needPassword{
        color:rgba(255,0,0,1);
    }
    ul.subpage-blog-list li .readmore{
        width:100%;
        height:auto;
    }
    ul.subpage-blog-list li .readmore a{
        width:auto;
        height:3.2rem;
        line-height:3rem;
        font-size:1.6rem;
        color:var(--lightColor);
        text-align:center;
        border:1px solid var(--borderColor);
        border-radius:5px;
        /*background:url('../img/readmore.png') 5px center no-repeat;
        background-size:2rem 2rem;*/
        padding:0 5px;
        display:inline-block;
    }
    ul.subpage-blog-list li .readmore a:hover{
        color:#fff;
        /*background:var(--blueColor) url('../img/readmore_hover.png') 5px center no-repeat;
        background-size:18px 18px;*/
        border:1px solid var(--blueColor);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .homepage-container{
        width:100%;
        height:auto;
        background-color:var(--backgroundColor);
        margin-bottom:5px;
        padding-top:15px;
    }
    ul.category-videos{
        width: calc(100% - 20px); /* 调整边距 */
        margin: 5px 10px 0; /* 调整边距 */
    }
    ul.category-videos li{
        width: 100%; /* 改为100%宽度 */
        height: auto; /* 高度自适应 */
        margin: 0 0 10px 0; /* 调整边距，取消右侧margin */
        padding: 10px; /* 添加内边�?*/
        float: none; /* 取消浮动 */
        display: block; /* 改为块级显示 */
        box-sizing: border-box; /* 包含padding和border在宽度内 */
        background:var(--vlogBackgroundColor);
    }
    ul.category-videos li:nth-child(3n){
        float: none; /* 取消nth-child的特殊浮�?*/
        margin: 0 0 10px 0; /* 保持与其他li相同的边�?*/
    }
    ul.category-videos li .video-thumbnail{
        width: 100%; /* 缩略图占满容器宽�?*/
        height: 200px; /* 设置一个合适的高度 */
        margin-bottom: 10px; /* 添加底部间距 */
        position:relative;
    }
    ul.category-videos li .video-thumbnail img{
        width: 100%; /* 图片宽度100%填充容器 */
        height: 100%; /* 高度100%填充容器 */
        object-fit: cover; /* 保持比例裁剪填充 */
        min-height: auto; /* 覆盖原来的min-height */
    }
    /* 超小屏幕上视频标记和统计信息的样式调整 */
    ul.category-videos li .video-thumbnail mark{
        position: absolute;
        top: 0px; /* 调整位置 */
        left: 5px;
        z-index: 2;
        padding: 2px 5px; /* 添加内边距使背景更好 */
        font-size: 10px; /* 调整字体大小 */
        background:#C05763;
    }
    ul.category-videos li .video-thumbnail mark a{
        font-size: 10px; /* 调整字体大小 */
        color:#ECC6CC;
    }
    ul.category-videos li .video-thumbnail mark em,ul.category-videos li .video-thumbnail mark i{
        font-size: 12px; /* 调整字体大小 */
        color:var(--darkTitleColor);
    font-weight:normal;
    font-style:normal;
    }
    ul.category-videos li .video-thumbnail span.video-play-count{
        position: absolute;
        left: 10px;
        bottom: 10px; /* 调整位置，避免与duration重叠 */
        z-index: 2;
        font-size: 12px; /* 调整字体大小 */
        color:#fff;
        /*background:url('../img/video_play_count.png?var7') left center no-repeat;
        background-size:auto 14px; /* 调整图标大小 */
        padding-left: 0; /* 调整内边�?*/
    }
    ul.category-videos li .video-thumbnail span.video-duration{
        position: absolute;
        right: 10px;
        bottom: 10px; /* 调整位置，与play-count对齐 */
        z-index: 2;
        font-size: 12px; /* 调整字体大小 */
        color:#fff;
    }
    ul.category-videos li h3{
        height: auto; /* 高度自适应 */
        line-height: 1.4; /* 调整行高 */
        padding: 0 5px 5px; /* 调整内边�?*/
    }
    ul.category-videos li h3 a{
        font-size: 18px; /* 调整字体大小 */
        line-height: 1.4; /* 调整行高 */
        color:var(--titleColor);
        font-weight:bold;
    }
    ul.category-videos li h3 a sup{
        font-size:14px;
        color:var(--redColor);
        margin-left:3px;
    }
    ul.category-videos li .blog-info{
        height: auto; /* 高度自适应 */
        line-height: 1.4; /* 调整行高 */
        font-size:14px;
        color:var(--lightColor);
        padding: 0 5px 5px; /* 调整内边�?*/
    }
    ul.category-videos li .blog-info .avatar{
        width:20px;
        height:20px;
    }
    ul.category-videos li .blog-info .avatar img{
        width: 20px; /* 调整头像大小 */
        height: 20px; /* 调整头像大小 */
        border-radius:50%;
    }
    ul.category-videos li .blog-info-right{
        width: calc(100% - 25px); /* 调整宽度 */
        height: auto; /* 高度自适应 */
    }
    ul.category-videos li .blog-info-right .username{
        width:auto;
        font-style:normal;
        display:inline-block;
    }
    ul.category-videos li .blog-info-right .username a i{
        color:var(--greenColor);
        margin-right:3px;
    }
    ul.category-videos li .blog-info-right .username a,
    ul.category-videos li .blog-info-right .readtimes a{
        font-size: 14px; /* 调整字体大小 */
        color:var(--lightColor);
    }
    ul.category-videos li .blog-info-right .postedtime{
        /*background:url('../img/icon_date.png') left center no-repeat;
        background-size: 16px 16px; /* 调整图标大小 */
        padding-left:0; /* 调整图标位置 */
        display:inline-block;
    }
    .category-list{
        width:calc(100% - 36px);
        height:4rem;
        border-bottom:0.5rem solid #B68955;
        margin:0 20px;
        padding:0;
    }
    .category-tab{
        width:auto;
        height:3.5rem;
        display:inline-block;
    }
    .category-tab a{
        width:auto;
        height:3.5rem;
        line-height:3.5rem;
        font-size:1.8rem;
        color:#B68955;
        font-weight:bold;
        background:none;
        padding:0 15px;
        display:block;
    }
    .category-tab.current{
        width:auto;
        height:3.5rem;
        display:inline-block;
    }
    .category-tab.current a{
        width:auto;
        height:3.5rem;
        line-height:3.5rem;
        font-size:1.8rem;
        color:#EAE5D3;
        background:#B68955;
        padding:0 15px;
        display:block;
    }
    .category-tab a:hover{
        color:#EAE5D3;
        background:#B68955;
        padding:0 5px;
        display:block;
    }
    .category-hot{
        width:100%;
        height:auto;
        list-style:none;
        padding:10px 20px;
        overflow:hidden;
    }
    .category-hot h3{
        width:100%;
        height:auto;
        line-height:3rem;
        margin-bottom:10px;
        padding:0;
        overflow:hidden;
    }
    .category-hot h3 a{
        width:100%;
        height:auto;
        line-height:3rem;
        font-size:2rem;
        color:var(--titleColor);
        font-weight:bold;
        display:inline-block;
    }
    .category-hot h3 a sup{
        font-size:12px;
        color:var(--redColor);
        margin-left:3px;
    }
    .category-hot h3 a:hover,.category-hot h3 a:hover sup{
        color:var(--hoverColor,#236ddb);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .category-hot .blog-info{
        width:100%;
        height:51px;
        line-height:20px;
        font-size:12px;
        color:var(--lightColor);
        border-bottom:1px solid var(--borderColor);
        margin-bottom:10px;
        padding-bottom:10px;
    }
    .category-hot .avatar{
        width:40px;
        height:40px;
    }
    .category-hot .avatar img{
        width:40px;
        height:40px;
        border-radius:50%;
    }
    .category-hot .blog-info-right{
        width:calc(100% - 50px);
        height:40px;
        margin-left:10px;
    }
    .category-hot .username{
        width:100%;
        font-style:normal;
        display:block;
    }
    .category-hot .username a{
        width:auto;
        height:auto;
        line-height:140%;
        font-size:12px;
        color:var(--lightColor);
    }
    .category-hot .username a i{
        color:var(--greenColor);
        margin-right:3px;
    }
    .category-hot .username a:hover{
        color:var(--hoverColor,#236ddb);
    }
    .category-hot .readtimes{
        font-style:normal;
    }
    .category-hot .readtimes a{
        line-height:140%;
        font-size:12px;
        color:var(--lightColor);
    }
    .category-hot .readtimes a:hover{
        color:var(--hoverColor,#236ddb);
    }
    .category-hot .postedtime{
        /*background:url('../img/icon_date.png') left center no-repeat;
        background-size:14px 14px;*/
        padding-left:0;
        display:inline-block;
        float:right;
    }
    .category-hot .blog-thumbnail{
        width:100%;
        height:184px;
        margin-bottom:10px;
        background:none;
        /*display: flex;*/ /* 设置容器为flex布局 */
        /*justify-content: center;*/ /* 水平居中对齐子项�?*/
        /*align-items: center;*/ /* 垂直居中对齐子项�?*/
        display: grid;  /*设置容器为Grid布局 */
        place-items: center;  /*同时水平和垂直居中对齐子项目 */
        overflow:hidden;
        position:relative;
    }
    .category-hot .blog-thumbnail img{
        width:100%;
        height:auto;
        min-height:100%;
        position:absolute;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
    	-ms-transform:translate(-50%,-50%);
    	transform:translate(-50%,-50%);
    }
    .category-hot .blog-thumbnail a:hover img{
        width:120%;
        height:auto;
        min-height:120%;
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .category-hot .blog-thumbnail mark{
        width:auto;
        height:auto;
        background:#C05763;
        padding:3px 5px;
        position:absolute;
        top:auto;
        left:10px;
        right:auto;
        bottom:10px;
        z-index:2;
    }
    .category-hot .blog-thumbnail mark.dark{
        background:#C05763;
    }
    .category-hot .blog-thumbnail mark a{
        width:auto;
        height:auto;
        font-size:14px;
        color:#ECC6CC;
        font-weight:normal;
        display:block;
    }
    .category-hot .blog-thumbnail mark em,.category-hot .blog-thumbnail mark i{
        display:none;
    }
    .category-hot .blog-content{
        width:100%;
        height:auto;
        line-height:2.5rem;
        font-size:1.6rem;
        color:var(--subTitleColor);
        margin-bottom:10px;
        overflow:hidden;
    }
    .category-hot .blog-content span.needPassword{
        color:rgba(255,0,0,1);
    }
    .category-hot .readmore{
        width:100%;
        height:auto;
    }
    .category-hot .readmore a{
        width:auto;
        height:30px;
        line-height:28px;
        font-size:14px;
        color:var(--lightColor);
        text-align:center;
        border:1px solid var(--borderColor);
        border-radius:5px;
        /*background:url('../img/readmore.png') 5px center no-repeat;
        background-size:18px 18px;*/
        background-color:none;
        padding:0 5px;
        display:inline-block;
    }
    .category-hot .readmore a:hover{
        color:#fff;
        /*background:var(--blueColor) url('../img/readmore_hover.png') 5px center no-repeat;
        background-size:18px 18px;*/
        background-color:var(--blueColor);
        border:1px solid var(--blueColor);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .category-blog-list{
        width:100%;
        height:auto;
        list-style:none;
        padding:10px 20px;
        overflow:hidden;
    }
    .category-blog-list .blog-item{
        width:100%;
        height:auto;
        /*background:rgba(47,47,48,1);*/
        overflow:hidden;
        display:inline-block;
        margin-bottom:5px;
        padding-bottom:11px;
        border-bottom:1px solid var(--borderColor);
    }
    .category-blog-list .blog-item:nth-child(5){
        height:94px;
        margin-bottom:0;
        padding-bottom:0;
        border:none;
        border-bottom-width:0;
    }
    .category-blog-list .blog-item-right{
        width:calc(100% - 170px);
        height:auto;
    }
    .category-blog-list .blog-item-right h3{
        width:100%;
        height:46px;
        line-height:23px;
        margin-bottom:5px;
        padding:0;
        overflow:hidden;
    }
    .category-blog-list .blog-item-right h3 a{
        width:100%;
        height:23px;
        line-height:23px;
        font-size:16px;
        color:var(--titleColor);
        font-weight:bold;
        display:inline-block;
    }
    .category-blog-list .blog-item-right h3 a sup{
        font-size:12px;
        color:var(--redColor);
        margin-left:3px;
    }
    .category-blog-list .blog-item-right h3 a:hover,.category-hot .blog-item-right h3 a:hover sup{
        color:var(--hoverColor,#236ddb);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .category-blog-list .blog-item-right .blog-info{
        width:100%;
        height:auto;
        line-height:18px;
        font-size:12px;
        color:var(--lightColor);
    }
    .category-blog-list .blog-item-right .avatar{
        width:15px;
        height:15px;
    }
    .category-blog-list .blog-item-right .avatar img{
        width:15px;
        height:15px;
        border-radius:50%;
    }
    .category-blog-list .blog-item-right .blog-info-right{
        width:calc(100% - 20px);
        height:auto;
        margin-left:5px;
        overflow:hidden;
        white-space:nowrap;
    }
    .category-blog-list .blog-item-right .blog-info-right .username{
        max-width:calc(100% - 80px);
        font-style:normal;
        display:inline-block;
        overflow:hidden;
        text-overflow:ellipsis;
        vertical-align:bottom;
    }
    .category-blog-list .blog-item-right .blog-info-right .username a{
        width:auto;
        height:auto;
        line-height:15px;
        font-size:12px;
        color:var(--lightColor);
    }
    .category-blog-list .blog-item-right .blog-info-right .username a:hover{
        color:var(--hoverColor,#236ddb);
    }
    .category-blog-list .blog-item-right .blog-info-right .readtimes{
        font-style:normal;
    }
    .category-blog-list .blog-item-right .blog-info-right .readtimes a{
        line-height:15px;
        font-size:12px;
        color:var(--lightColor);
    }
    .category-blog-list .blog-item-right .blog-info-right .readtimes a:hover{
        color:var(--hoverColor,#236ddb);
    }
    .category-blog-list .blog-item-right .blog-info-right .postedtime{
        margin-left:5px;
        padding-left:0;
        display:none;
    }
    .category-blog-list .blog-item .blog-thumbnail{
        width:160px;
        height:90px;
        background:none;
        /*display: flex;*/ /* 设置容器为flex布局 */
        /*justify-content: center;*/ /* 水平居中对齐子项 */
        /*align-items: center;*/ /* 垂直居中对齐子项 */
        display: grid;  /*设置容器为Grid布局 */
        place-items: center;  /*同时水平和垂直居中对齐子项目 */
        overflow:hidden;
        position:relative;
        display:inline-block;
        float:left;
    }
    .category-blog-list .blog-item .blog-thumbnail img{
        width:100%;
        height:auto;
        min-height:100%;
        position:absolute;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
    	-ms-transform:translate(-50%,-50%);
    	transform:translate(-50%,-50%);
    }
    .category-blog-list .blog-item .blog-thumbnail a:hover img{
        width:120%;
        height:auto;
        min-height:120%;
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .category-blog-list .blog-item .blog-thumbnail mark{
        width:auto;
        height:auto;
        background:#C05763;
        padding:3px 5px;
        position:absolute;
        top:auto;
        left:5px;
        bottom:5px;
        z-index:2;
    }
    .category-blog-list .blog-item .blog-thumbnail mark a{
        font-size:14px;
        color:#ECC6CC;
        font-weight:normal;
    }
    .category-blog-list .blog-item-right .blog-content{
        width:100%;
        height:19px;
        line-height:19px;
        font-size:12px;
        color:var(--subTitleColor);
        margin-bottom:5px;
        overflow:hidden;
    }
    .category-blog-list .blog-item-right .blog-content span.needPassword{
        color:rgba(255,0,0,1);
    }
    .pages{
        width:100%;
        height:auto;
        font-size:1.6rem;
        color:var(--titleColor);
        text-align:center;
        background:var(--backgroundColor);
        margin-bottom:5px;
        padding:10px;
    }
    .pages a{
        font-size:1.6rem;
        color:var(--titleColor);
    }
    .pages a:hover{
        color:var(--hoverColor,#236ddb);
    }
    aside.sidebar{
    	display:none;
    }
    .friendLink{
        width:100%;
        height:auto;
        text-align:left;
        background:var(--backgroundColor);
        margin:0 auto;
        padding:10px 20px;
    }
    .friendLink span{
        height:auto;
        line-height:180%;
        font-size:1.4rem;
        color:var(--topnavColor);
        margin:0;
        padding:0;
    }
    .friendLink span.friendLinkTitle{
        color:var(--titleColor);
        font-weight:bold;
        display:inline-block;
        margin-right:10px;
    }
    .friendLink span.friendLinkList{
        display:inline-block;
    }
    .friendLink span.friendLinkList a{
        color:var(--topnavColor);
        display:inline-block;
        margin-right:10px;
    }
    .friendLink span.friendLinkList a:hover{
        color:var(--hoverColor,#236ddb);
    }
    footer{
        width:100%;
        height:auto;
        background:var(--lightBackgroundColor);
        margin:0 auto;
        padding:10px 20px;
    }
    footer p{
        width:100%;
        height:auto;
        line-height:180%;
        font-size:1.4rem;
        color:var(--topnavColor);
        text-align:center;
        margin:0;
        padding:0;
    }
    footer p a{
        color:var(--topnavColor);
    }
    footer p a:hover{
        color:var(--hoverColor,#236ddb);
    }
    .backToTop{
        display:none;
    }


/* 桌面端（>=768px）*/
@media screen and (min-width:768px){
	.container{
	    max-width:1140px;
	}
    .overanimation{
        transition-duration:0.5s;
        -webkit-transition-duration:0.5s;/* Safari */
    }
    header{
        width:100%;
        height:208px;
        background-color:#000;
		background-image:url('/uploads/site/header-background.jpg');
		background-position:center top;
		background-repeat:no-repeat;
		background-size:cover;
        margin:0 auto;
        padding:0;
        overflow:hidden;
    }
    /*global*/
    .wrapper{
        border-radius:5px;
        background:var(--wrapperColor);
        margin:0 auto;
        padding:10px;
    }
    .topnav{
        width:100%;
        height:45px;
        line-height:25px;
        font-size:14px;
        color:var(--topnavColor);
        background:var(--titleBackgroundColor);
        margin:0;
        padding:10px 20px;
    }
    .topnav-left,.topnav-right{
        margin:0;
        padding:0;
    }
    ul.topnav-left li.weather{
        display:inline-block;
    }
	ul.topnav-left li:nth-child(1),ul.topnav-left li:nth-child(2),ul.topnav-left li:nth-child(3),ul.topnav-left li:nth-child(4){
		display:inline-block;
	}
    ul.topnav-left li.mobile-menu{
        display:none !important;  /* �?!important 压住内联样式 */
    }
    ul.topnav-left li.dark{
        display:none !important;  /* �?!important 压住内联样式 */
    }
    ul.topnav-left li.mobile-layout-color{
        display:none;
    }
    .topnav li a{
        width:auto;
        height:25px;
        line-height:25px;
        font-size:14px;
        color:var(--topnavColor);
    }
    .topnav li a:hover{
        color:var(--darkTitleColor);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .topnav-right .dropdown-menu a{
        color:var(--blackColor);
    }
    .topnav-right .dropdown-menu a:hover{
        color:var(--darkTitleColor);
    }
    .header-inner{
        display:block;
        padding:0;
    }
    .logo{
        width:auto;
        height:118px;
        text-align:center;
        display:block;
        margin:0 auto;
        padding:38px 0 20px;
        overflow:hidden;
    }
    .logo img{
        width:auto;
        height:65px;
    }
    .site-info{
        width:100%;
        height:auto;
        display:block;
        margin:0 auto;
        padding:50px 0 20px;
        overflow:hidden;
    }
    .site-name{
        width:100%;
        height:auto;
        line-height:100%;
        text-align:center;
        display:block;
        margin:0 auto 10px;
    }
    .site-name a{
        font-size:36px;
        /*color:#EAEAEA;*/
        font-family:'poppins';
        text-align:center;
        font-weight:bold;
        background: linear-gradient(to right, #ff8c4c, #3f387c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent; /* 兼容标准属性 */
    }
    .site-intro{
        width:100%;
        height:auto;
        line-height:100%;
        font-size:16px;
        color:#EAEAEA;
        font-weight:bold;
        font-family:'lato';
        text-align:center;
        margin-bottom:0;
    }
    .header-search{
        width:50%;
        height:auto;
        display:block;
        margin:0 auto;
        padding:0 0 45px;
    }
    .header-search-container{
        width:100%;
        height:auto;
    }
    .header-search-container .keywords{
        width:calc(100% - 60px);
        height:45px;
        line-height:45px;
        font-size:16px;
        color:var(--lightColor);
        text-align:left;
        border-radius:10px 0 0 10px;
        border:none;
        border-right:none;
        background:var(--deepColor);
        padding:0 0 0 15px;
    }
    .header-search-container .btn-header-search{
        width:60px;
        height:45px;
        line-height:45px;
        font-size:14px;
        color:var(--redColor);
        text-align:center;
        border-radius:0 15px 10px 0;
        border:none;
        border-left:none;
        background:var(--deepColor) url(../img/search.png) center center no-repeat;
        background-size:20px 20px;
        cursor:pointer;
        margin:0;
        padding:0;
    }
    .header-search ul.hotwords{
        width:100%;
        height:auto;
        line-height:25px;
        font-size:14px;
        color:rgba(255,0,0,1);
        overflow:hidden;
        margin:10px 0 0;
        padding:0;
        display:none;
    }
    .header-search ul.hotwords li{
        margin:0;
        padding:0;
    }
    .header-search ul.hotwords li.hotwords-title{
        width:auto;
        height:25px;
        line-height:25px;
        font-size:14px;
        color:rgba(255,0,0,1);
        padding-left:27px;
        background:url(../img/hotwords.svg) left center no-repeat;
        background-size:25px 25px;
        display:inline-block;
    }
    .header-search .hotwords li a{
        width:auto;
        height:25px;
        line-height:25px;
        font-size:14px;
        color:#fff;
        display:inline-block;
    }
    .header-search .hotwords li a:hover{
        color:var(--hoverColor,#236ddb);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
	nav#nav {
		width: 100%;
		height: 40px;
		background: var(--navBackgroundColor);
		margin: 0;
		padding: 0;
		display: block !important;
		position: static !important;
		overflow: visible;  /* 改：允许 subnav 溢出显示 */
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		z-index: auto !important;
	}
	nav ul, nav ul.nav, nav ul.nav-list {
		width: calc(100% - 60px);
		height: 40px;
		margin: 0 auto;
		padding: 0;  /* 改：padding:auto 无效，改为 0 */
	}
	nav ul li {
		width: auto;
		height: 40px;
		margin: 0;
		padding: 0;
		display: inline-block;  /* 加：横向排列 */
		float: left;  /* 加：横向排列 */
		position:relative;
	}
	nav ul li a {
		width: auto;
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		color: var(--navColor);
		font-weight: bold;
		text-align: center;
		background: none;
		margin: 0;
		padding: 0 20px 0 38px;
		display: inline-block;  /* 改：block→inline-block */
	}
    nav ul li a sup{
        font-size:12px;
        color:var(--lightBlueColor);
        font-weight:normal;
        background:none;
        display:inline-block;
    }
    nav ul li a:hover,nav ul li a.current{
        color:var(--navColor);
        text-decoration:none;
        background:var(--lightBlueColor);
    }
    nav ul li a:hover sup,nav ul li a.current sup{
        color:var(--navColor);
    }
	nav ul li a.follow-feed-nav{
	    position:relative;
	}
	nav ul li a.follow-feed-nav sup{
	    color:var(--lightBlueColor);
	}
	nav ul li a.follow-feed-nav:hover sup,
	nav ul li a.follow-feed-nav.current sup{
	    color:var(--navColor);
	}
	nav ul li a.follow-feed-nav .follow-unread-badge{
	    display:inline-flex;
	    align-items:center;
	    justify-content:center;
	    min-width:18px;
	    height:18px;
	    line-height:18px;
	    padding:0 5px;
	    border-radius:9px;
	    background:#B22712;
	    color:#fff;
	    font-size:11px;
	    font-weight:bold;
	    font-style:normal;
	    margin-left:5px;
	    vertical-align:middle;
	    position:relative;
	    top:-1px;
	}
	nav ul li a.follow-feed-nav:hover .follow-unread-badge,
	nav ul li a.follow-feed-nav.current .follow-unread-badge{
	    background:#fff;
	    color:#B22712;
	}
    @keyframes rotate{
        from{
            transform:rotate(0deg)
        }
        to{
            transform:rotate(360deg)
        }
    }
    nav#nav .layout-color{
        width:20px;
        height:40px;
        margin-right:20px;
        position:static !important;
        top:auto !important;
        left:auto !important;
        z-index:auto !important;
        display:block !important;
        overflow:hidden;
    }
    nav#nav .layout-color-click{
        animation:rotate 0.5s linear 0s 1;
    }
    nav#nav span.lightToDark{
        width:20px;
        height:40px;
        background:url(../img/light.png) center center no-repeat;
        background-size:20px 20px;
        display:block;
        cursor:pointer;
    }
    nav#nav span.darkToLight{
        width:20px;
        height:40px;
        background:url(../img/dark.png) center center no-repeat;
        background-size:20px 20px;
        display:block;
        cursor:pointer;
    }
    .subnav{
        width:auto;
        height:auto;
        text-align:left;
        background:var(--navBackgroundColor);
        display:none;
        position:absolute;
        top:40px;
        left:0;
        right:0;
        z-index:999999999999;
    }
    nav ul li:hover .subnav{
        display:block;
    }
    .subnav a{
        width:auto;
        height:40px;
        line-height:40px;
        font-size:16px;
        color:var(--navColor);
        font-weight:bold;
        text-align:left;
        background:none;
        padding:0 15px;
        display:block;
    }
    .subnav a sup{
        color:var(--lightBlueColor);
        font-size:12px;
    }
    .subnav a:hover,.subnav a.current{
        color:var(--navColor);
        text-decoration:none;
        background:var(--lightBlueColor);
    }
    .subnav a:hover sup,.subnav a.current sup{
        color:var(--navColor);
    }
    nav#nav .mobile-menu-close{
        width:auto;
        height:auto;
        font-size:auto;
        color:var(--titleColor);
        position:auto !important;
        top:auto !important;
        right:auto !important;
        z-index:auto !important;
        display:none !important;
    }
    .breadcrumb{
        width:100%;
        height:46px;
        line-height:26px;
        font-size:14px;
        color:var(--lightColor);
        border-radius:0;
        background:var(--backgroundColor);
        margin:5px auto 0;
        padding:10px 15px;
        overflow:hidden;
    }
    .breadcrumb a{
        color:var(--subTitleColor);
    }
    .breadcrumb a:hover{
        color:var(--hoverColor,#236ddb);
    }
    main.homepage-main-body,main.subpage-main-body{
        height:auto;
        margin:5px auto 0;
        padding:0;
    }
    .subpage-left{
    	height:auto;
    	margin:0;
    	padding:0;
    }
    .main-left{
    	height:auto;
    	margin:0;
    	padding:0 5px 0 0;
    }
	.ai-site-notice{
		background:none;
		border:none;
		border-radius:0;
		padding:10px 5%;
		margin-top:0;
		margin-bottom:5px;
		color:var(--subTitleColor);
		font-size:14px;
		line-height:1.7;
		display:flex;
		align-items:flex-start;
	}
    ul.subpage-blog-list{
        width:100%;
        height:auto;
        list-style:none;
        display:flex;
        flex-wrap:wrap;
        margin:0;
        padding:0 5px 0 0;
    }
    ul.subpage-blog-list li{
        width:100%;
        height:146px;
        list-style:none;
        background:var(--backgroundColor);
        margin-right:0px;
        margin-bottom:5px;
        padding:10px 20px;
        overflow:hidden;
    }
    .subpage-blog-thumbnail{
        width:224px;
        height:126px;
        margin-bottom:0;
        background:none;
        /*display: flex;*/ /* 设置容器为flex布局 */
        /*justify-content: center;*/ /* 水平居中对齐子项 */
        /*align-items: center;*/ /* 垂直居中对齐子项 */
        display: grid;  /*设置容器为Grid布局 */
        place-items: center;  /*同时水平和垂直居中对齐子项目 */
        overflow:hidden;
        position:relative;
    }
    .subpage-blog-thumbnail img{
        width:100%;
        height:100%;
        min-height:100%;
        position:absolute;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
    	-ms-transform:translate(-50%,-50%);
    	transform:translate(-50%,-50%);
    }
    .subpage-blog-thumbnail  a:hover img{
        width:120%;
        height:auto;
        min-height:120%;
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .subpage-blog-thumbnail mark{
        width:auto;
        height:auto;
        background:#C05763;
        padding:3px 5px;
        position:absolute;
        top:auto;
        left:10px;
        right:auto;
        bottom:10px;
        z-index:2;
    }
    .subpage-blog-thumbnail mark.dark{
        background:#C05763;
    }
    .subpage-blog-thumbnail mark a{
        width:auto;
        height:auto;
        font-size:14px;
        color:#ECC6CC;
        font-weight:normal;
        display:block;
    }
    .subpage-blog-thumbnail mark em,.subpage-blog-thumbnail mark i{
        display:none;
    }
    .blog-thumbnail mark{
        width:auto;
        height:auto;
        background:#C05763;
        padding:3px 5px;
        position:absolute;
        top:auto;
        left:10px;
        bottom:10px;
        z-index:2;
    }
    .blog-thumbnail mark a{
        width:auto;
        height:auto;
        font-size:14px;
        color:#ECC6CC;
        font-weight:normal;
        display:block;
    }
    .subpage-blog-content{
        width:551px;
        min-height:126px;
        height:auto;
    }
    .subpage-blog-content h3{
        width:100%;
        height:50px;
        min-height:50px;
        margin-bottom:0;
        padding:0;
        overflow:hidden;
        display:block;
    }
    .subpage-blog-content h3 a{
        width:100%;
        height:50px;
        line-height:25px;
        font-size:16px;
        color:var(--titleColor);
        font-weight:bold;
        display:block;
    }
    .subpage-blog-content h3 a:hover{
        color:var(--hoverColor,#236ddb);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .subpage-blog-content .blog-content{
        width:100%;
        height:40px;
        min-height:40px;
        line-height:20px;
        font-size:14px;
        margin:6px 0 0;
        padding:0;
        overflow:hidden;
        display:block;
        color:var(--subTitleColor);
    }
    .subpage-blog-content .blog-infomation{
        width:100%;
        min-height:25px;
        line-height:25px;
        font-size:14px;
        margin-top:5px;
        margin-bottom:0;
        padding-bottom:0;
        display:flex;
        align-items:center;
        justify-content:space-between;
        flex-wrap:wrap;
        gap:6px;
    }
    .subpage-blog-content .blog-tags{
        line-height:25px;
        font-size:14px;
        color:var(--lightColor);
        flex:1;
        min-width:0;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }
    .subpage-blog-content .blog-tag-item{
        display:inline-block;
        font-size:14px;
        color:var(--blueColor);
        margin-right:6px;
        text-decoration:none;
        line-height:25px;
    }
    .subpage-blog-content .blog-tag-item:hover{
        color:var(--hoverColor);
    }
    .subpage-blog-content .blog-meta{
        flex-shrink:0;
    }
    .subpage-blog-content .blog-meta .postedtime{
        font-size:14px;
        color:var(--lightColor);
        white-space:nowrap;
    }
    .subpage-blog-content .blog-meta .postedtime i{
        margin-right:3px;
    }
    .subpage-blog-thumbnail .video-duration{
        position:absolute;
        right:10px;
        bottom:10px;
        background:rgba(0,0,0,0.75);
        color:#fff;
        font-size:14px;
        line-height:1;
        padding:3px 5px;
        border-radius:3px;
        pointer-events:none;
        z-index:2;
    }
    .subpage-blog-thumbnail{
        position:relative;
    }
    .subpage-blog-thumbnail>a{
        display:block;
    }
    /*.subpage-blog-content .blog-infomation .blog-infomation-right .readtimes{
        font-style:normal;
    }
    .subpage-blog-content .blog-infomation .blog-infomation-right .readtimes a{
        line-height:25px;
        font-size:12px;
        color:var(--lightColor);
    }
    .subpage-blog-content .blog-infomation .blog-infomation-right .readtimes a:hover{
        color:var(--hoverColor,#236ddb);
    }*/
    .subpage-blog-content .blog-infomation .blog-infomation-right .postedtime{
        width:150px;
        height:25px;
        line-height:25px;
        font-size:14px;
        color:var(--lightColor);
        text-align:right;
        display: block;
    }
    
    /*ul.subpage-blog-list li .blog-content{
        width:100%;
        height:50px;
        line-height:25px;
        font-size:14px;
        color:var(--subTitleColor);
        margin-bottom:10px;
        overflow:hidden;
    }
    ul.subpage-blog-list li .blog-content span.needPassword{
        color:rgba(255,0,0,1);
    }
    ul.subpage-blog-list li .readmore{
        width:100%;
        height:auto;
    }
    ul.subpage-blog-list li .readmore a{
        width:auto;
        height:30px;
        line-height:28px;
        font-size:14px;
        color:var(--lightColor);
        text-align:center;
        border:1px solid var(--borderColor);
        border-radius:5px;
        background:url('../img/readmore.png') 5px center no-repeat;
        background-size:18px 18px;
        padding:0 5px 0 28px;
        display:inline-block;
    }
    ul.subpage-blog-list li .readmore a:hover{
        color:#fff;
        background:var(--blueColor) url('../img/readmore_hover.png') 5px center no-repeat;
        background-size:18px 18px;
        border:1px solid var(--blueColor);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari *
    }*/
    .homepage-container{
        width:100%;
        height:auto;
        background-color:var(--backgroundColor);
        margin-bottom:5px;
        padding-top:20px;
    }
    ul.category-videos{
        width:calc(100% - 40px);
        height:auto;
        margin:10px 20px 0;
        padding:0;
        background:red;
    }
    ul.category-videos li{
        width:251.6666666666667px;
        height:221px;
        margin:0 20px 10px 0;
        padding:0;
        background:var(--vlogBackgroundColor);
        display:inline-block;
        float:left;
		box-sizing: border-box; /* 包含padding和border在宽度内 */
    }
    ul.category-videos li:nth-child(3n){
        margin:0 0 10px 0;
        float:right;
    }
    ul.category-videos li .video-thumbnail{
        width:251.6666666666667px;
        height:140px;
        background:none;
        /*display: flex;*/ /* 设置容器为flex布局 */
        /*justify-content: center;*/ /* 水平居中对齐子项 */
        /*align-items: center;*/ /* 垂直居中对齐子项 */
        display: grid;  /*设置容器为Grid布局 */
        place-items: center;  /*同时水平和垂直居中对齐子项目 */
        overflow:hidden;
        position:relative;
        display:inline-block;
        float:left;
    }
    ul.category-videos li .video-thumbnail img{
        width:100%;
        height:auto;
        min-height:100%;
        position:absolute;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
    	-ms-transform:translate(-50%,-50%);
    	transform:translate(-50%,-50%);
    }
    ul.category-videos li .video-thumbnail a:hover img{
        width:120%;
        height:auto;
        min-height:120%;
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    ul.category-videos li .video-thumbnail mark{
        width:auto;
        height:auto;
        background:#C05763;
        position:absolute;
        top:0;
        left:5px;
        z-index:2;
    }
    ul.category-videos li .video-thumbnail mark a{
        width:auto;
        height:auto;
        font-size:12px;
        color:#ECC6CC;
        display:block;
    }
    ul.category-videos li .video-thumbnail mark em,ul.category-videos li .video-thumbnail mark i{
        width:auto;
        height:auto;
        font-size:14px;
        color:var(--darkTitleColor);
        font-weight:normal;
        font-style:normal;
        display:inline-block;
        margin-left:5px;
    }
    ul.category-videos li .video-thumbnail span.video-play-count{
        width:auto;
        height:25px;
        line-height:25px;
        font-size:14px;
        color:#fff;
        display:block;
        /*background:url('../img/video_play_count.png?var7') left center no-repeat;
        background-size:auto 16px;*/
        padding-left:0;
        position:absolute;
        left:10px;
        bottom:6px;
    	z-index:2;
    }
    ul.category-videos li .video-thumbnail span.video-duration{
        width:auto;
        height:25px;
        line-height:25px;
        position:absolute;
        right:10px;
        bottom:6px;
        font-size:14px;
        color:#fff;
        display:block;
    }
    ul.category-videos li h3{
        width:100%;
        height:50px;
        line-height:25px;
        margin-bottom:0;
        padding:0 5px;
        overflow:hidden;
    }
    ul.category-videos li h3 a{
        width:100%;
        height:25px;
        line-height:25px;
        font-size:16px;
        color:var(--titleColor);
        font-weight:bold;
        display:inline-block;
    }
    ul.category-videos li h3 a sup{
        font-size:12px;
        color:var(--redColor);
        margin-left:3px;
    }
    ul.category-videos li h3 a:hover,ul.category-videos li h3 a:hover sup{
        color:var(--hoverColor,#236ddb);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    ul.category-videos li .blog-info{
        width:100%;
        height:15px;
        line-height:15px;
        font-size:12px;
        color:var(--lightColor);
		margin:0;
        padding:0 5px;
    }
    ul.category-videos li .blog-info .avatar{
        width:15px;
        height:15px;
    }
    ul.category-videos li .blog-info .avatar img{
        width:15px;
        height:15px;
        border-radius:50%;
    }
    ul.category-videos li .blog-info-right{
        width:calc(100% - 20px);
        height:15px;
        margin-left:5px;
    }
    ul.category-videos li .blog-info-right .username{
        width:auto;
        font-style:normal;
        display:inline-block;
    }
    ul.category-videos li .blog-info-right .username a{
        width:auto;
        height:auto;
        line-height:15px;
        font-size:12px;
        color:var(--lightColor);
    }
    ul.category-videos li .blog-info-right .username a:hover{
        color:var(--hoverColor,#236ddb);
    }
    ul.category-videos li .blog-info-right .username a i{
        color:var(--greenColor);
        margin-right:3px;
    }
    ul.category-videos li .blog-info-right .readtimes{
        font-style:normal;
    }
    ul.category-videos li .blog-info-right .readtimes a{
        line-height:15px;
        font-size:12px;
        color:var(--lightColor);
    }
    ul.category-videos li .blog-info-right .readtimes a:hover{
        color:var(--hoverColor,#236ddb);
    }
    ul.category-videos li .blog-info-right .postedtime{
        /*background:url('../img/icon_date.png') left center no-repeat;
        background-size:14px 14px;*/
        padding-left:0;
        display:inline-block;
    }
    .category-list{
        width:calc(100% - 40px);
        height:34px;
        border-bottom:4px solid #B68955;
        margin:0 20px;
        padding:0;
        overflow:hidden;
    }
    .category-tab{
        width:auto;
        height:30px;
        display:inline-block;
        overflow:hidden;
    }
    .category-tab a{
        width:auto;
        height:30px;
        line-height:30px;
        font-size:18px;
        color:#B68955;
        font-weight:bold;
        background:none;
        padding:0 15px;
        display:block;
        overflow:hidden;
    }
    .category-tab.current{
        width:auto;
        height:30px;
        display:inline-block;
    }
    .category-tab.current a{
        width:auto;
        height:30px;
        line-height:30px;
        font-size:18px;
        color:#EAE5D3;
        background:#B68955;
        padding:0 15px;
        display:block;
    }
    .category-tab a:hover{
        color:#EAE5D3;
        background:#B68955;
        padding:0 15px;
        display:block;
    }
    .category-hot{
        width:100%;
        height:auto;
        list-style:none;
        padding:20px 20px 20px 20px;
        overflow:hidden;
    }
    .category-hot h3{
        width:100%;
        height:25px;
        line-height:25px;
        margin-bottom:10px;
        padding:0;
        overflow:hidden;
    }
    .category-hot h3 a{
        width:100%;
        height:25px;
        line-height:25px;
        font-size:16px;
        color:var(--titleColor);
        font-weight:bold;
        display:inline-block;
    }
    .category-hot h3 a sup{
        font-size:12px;
        color:var(--redColor);
        margin-left:3px;
    }
    .category-hot h3 a:hover,.category-hot h3 a:hover sup{
        color:var(--hoverColor,#236ddb);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .category-hot .blog-info{
        width:100%;
        height:51px;
        line-height:20px;
        font-size:12px;
        color:var(--lightColor);
        border-bottom:1px solid var(--borderColor);
        margin-bottom:10px;
        padding-bottom:10px;
    }
    .category-hot .avatar{
        width:40px;
        height:40px;
    }
    .category-hot .avatar img{
        width:40px;
        height:40px;
        border-radius:50%;
    }
    .category-hot .blog-info-right{
        width:calc(100% - 50px);
        height:40px;
        margin-left:10px;
    }
    .category-hot .username{
        width:100%;
        font-style:normal;
        display:block;
    }
    .category-hot .username a{
        width:auto;
        height:auto;
        line-height:140%;
        font-size:12px;
        color:var(--lightColor);
    }
    .category-hot .username a i{
        color:var(--greenColor);
        margin-right:3px;
    }
    .category-hot .username a:hover{
        color:var(--hoverColor,#236ddb);
    }
    .category-hot .readtimes{
        font-style:normal;
    }
    .category-hot .readtimes a{
        line-height:140%;
        font-size:12px;
        color:var(--lightColor);
    }
    .category-hot .readtimes a:hover{
        color:var(--hoverColor,#236ddb);
    }
    .category-hot .postedtime{
        /*background:url('../img/icon_date.png') left center no-repeat;
        background-size:14px 14px;*/
        padding-left:0;
        display:inline-block;
        float:right;
    }
    .category-hot .blog-thumbnail{
        width:100%;
        height:184px;
        margin-bottom:10px;
        background:none;
        /*display: flex;*/ /* 设置容器为flex布局 */
        /*justify-content: center;*/ /* 水平居中对齐子项 */
        /*align-items: center;*/ /* 垂直居中对齐子项 */
        display: grid;  /*设置容器为Grid布局 */
        place-items: center;  /*同时水平和垂直居中对齐子项目 */
        overflow:hidden;
        position:relative;
    }
    .category-hot .blog-thumbnail img{
        width:100%;
        height:auto;
        min-height:100%;
        position:absolute;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
    	-ms-transform:translate(-50%,-50%);
    	transform:translate(-50%,-50%);
    }
    .category-hot .blog-thumbnail a:hover img{
        width:120%;
        height:auto;
        min-height:120%;
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .category-hot .blog-thumbnail mark{
        width:auto;
        height:auto;
        background:#C05763;
        padding:3px 5px;
        position:absolute;
        top:auto;
        left:10px;
        right:auto;
        bottom:10px;
        z-index:2;
    }
    .category-hot .blog-thumbnail mark.dark{
        background:#C05763;
    }
    .category-hot .blog-thumbnail mark a{
        width:auto;
        height:auto;
        font-size:14px;
        color:#ECC6CC;
        font-weight:normal;
        display:block;
    }
    .category-hot .blog-thumbnail mark em,.category-hot .blog-thumbnail mark i{
        display:none;
    }
    .category-hot .blog-content{
        width:100%;
        height:auto;
        line-height:25px;
        font-size:14px;
        color:var(--subTitleColor);
        margin-bottom:10px;
        overflow:hidden;
    }
    .category-hot .blog-content span.needPassword{
        color:rgba(255,0,0,1);
    }
    .category-hot .readmore{
        width:100%;
        height:auto;
    }
    .category-hot .readmore a{
        width:auto;
        height:30px;
        line-height:28px;
        font-size:14px;
        color:var(--lightColor);
        text-align:center;
        border:1px solid var(--borderColor);
        border-radius:5px;
        /*background:url('../img/readmore.png') 5px center no-repeat;
        background-size:18px 18px;*/
        background-color:none;
        padding:0 5px;
        display:inline-block;
    }
    .category-hot .readmore a:hover{
        color:#fff;
        /*background:var(--blueColor) url('../img/readmore_hover.png') 5px center no-repeat;
        background-size:18px 18px;*/
        border:1px solid var(--blueColor);
        background-color:var(--blueColor);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .category-blog-list{
        width:465px;
        height:auto;
        padding:20px 20px 10px 0;
        list-style:none;
        overflow:hidden;
    }
    .category-blog-list .blog-item{
        width:100%;
        height:auto;
        /*background:rgba(47,47,48,1);*/
        overflow:hidden;
        display:inline-block;
        margin-bottom:5px;
        padding-bottom:3px;
        border-bottom:1px solid var(--borderColor);
    }
    .category-blog-list .blog-item:nth-child(5){
        height:94px;
        margin-bottom:0;
        padding-bottom:0;
        border:none;
        border-bottom-width:0;
    }
    .category-blog-list .blog-item-right{
        width:calc(100% - 170px);
        height:auto;
    }
    .category-blog-list .blog-item-right h3{
        width:100%;
        height:46px;
        line-height:23px;
        margin-bottom:5px;
        padding:0;
        overflow:hidden;
    }
    .category-blog-list .blog-item-right h3 a{
        width:100%;
        height:23px;
        line-height:23px;
        font-size:16px;
        color:var(--titleColor);
        font-weight:bold;
        display:inline-block;
    }
    .category-blog-list .blog-item-right h3 a sup{
        font-size:12px;
        color:var(--redColor);
        margin-left:3px;
    }
    .category-blog-list .blog-item-right h3 a:hover,.category-hot .blog-item-right h3 a:hover sup{
        color:var(--hoverColor,#236ddb);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .category-blog-list .blog-item-right .blog-info{
        width:100%;
        height:20px
        line-height:20px;
        font-size:12px;
        color:var(--lightColor);
    }
    .category-blog-list .blog-item-right .avatar{
        width:15px;
        height:15px;
    }
    .category-blog-list .blog-item-right .avatar img{
        width:15px;
        height:15px;
        border-radius:50%;
    }
    .category-blog-list .blog-item-right .blog-info-right{
        width:calc(100% - 20px);
        height:20px
        margin-left:5px;
        overflow:hidden;
        white-space:nowrap;
    }
    .category-blog-list .blog-item-right .blog-info-right .username{
        max-width:calc(100% - 80px);
        font-style:normal;
        display:inline-block;
        overflow:hidden;
        text-overflow:ellipsis;
        vertical-align:bottom;
    }
    .category-blog-list .blog-item-right .blog-info-right .username a{
        width:auto;
        height:auto;
        line-height:20px;
        font-size:12px;
        color:var(--lightColor);
    }
    .category-blog-list .blog-item-right .blog-info-right .username a:hover{
        color:var(--hoverColor,#236ddb);
    }
    .category-blog-list .blog-item-right .blog-info-right .readtimes{
        height:20px;
        line-height:20px;
        font-size:12px;
        color:var(--lightColor);
        font-style:normal;
        display:inline-block;
    }
    .category-blog-list .blog-item-right .blog-info-right .readtimes a{
        line-height:20px;
        font-size:12px;
        color:var(--lightColor);
    }
    .category-blog-list .blog-item-right .blog-info-right .readtimes a:hover{
        color:var(--hoverColor,#236ddb);
    }
    .category-blog-list .blog-item-right .blog-info-right .postedtime{
        /*background:url('../img/icon_date.png') left center no-repeat;
        background-size:14px 14px;*/
        height:20px;
        line-height:20px;
        font-size:12px;
        color:var(--lightColor);
        padding-left:0;
        display:inline-block;
    }
    .category-blog-list .blog-item .blog-thumbnail{
        width:160px;
        height:90px;
        background:none;
        /*display: flex;*/ /* 设置容器为flex布局 */
        /*justify-content: center;*/ /* 水平居中对齐子项 */
        /*align-items: center;*/ /* 垂直居中对齐子项 */
        display: grid;  /*设置容器为Grid布局 */
        place-items: center;  /*同时水平和垂直居中对齐子项目 */
        overflow:hidden;
        position:relative;
        display:inline-block;
        float:left;
    }
    .category-blog-list .blog-item .blog-thumbnail img{
        width:100%;
        height:auto;
        min-height:100%;
        position:absolute;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
    	-ms-transform:translate(-50%,-50%);
    	transform:translate(-50%,-50%);
    }
    .category-blog-list .blog-item .blog-thumbnail a:hover img{
        width:120%;
        height:auto;
        min-height:120%;
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .category-blog-list .blog-item .blog-thumbnail mark{
        width:auto;
        height:auto;
        background:#C05763;
        padding:3px 5px;
        position:absolute;
        top:auto;
        left:5px;
        bottom:5px;
        z-index:2;
    }
    .category-blog-list .blog-item .blog-thumbnail mark a{
        font-size:14px;
        color:#ECC6CC;
        font-weight:normal;
    }
    .category-blog-list .blog-item-right .blog-content{
        width:100%;
        height:20px;
        line-height:20px;
        font-size:12px;
        color:var(--subTitleColor);
        margin-bottom:5px;
        overflow:hidden;
    }
    .category-blog-list .blog-item-right .blog-content span.needPassword{
        color:rgba(255,0,0,1);
    }
    .pages{
        width:calc(100% - 4px);
        height:auto;
        font-size:14px;
        color:var(--titleColor);
        text-align:center;
        background:var(--backgroundColor);
        margin-bottom:5px;
        padding:10px 0;
    }
    .pages a{
        font-size:14px;
        color:var(--titleColor);
    }
    .pages a:hover{
        color:var(--hoverColor,#236ddb);
    }
    aside.sidebar{
    	height:auto;
    	margin:0;
    	padding:0;
    }
    aside ul{
    	width:100%;
    	height:auto;
    	margin:0;
    	padding:0;
    }
    aside ul li{
    	width:100%;
    	height:auto;
    	background:var(--lightBackgroundColor);
    	display:block;
    	margin-bottom:5px;
    	padding:0;
    }
    aside ul li.side-banner{
        width:100%;
        height:auto;
        padding:0;
		display:block;
        position:relative;
    }
    aside ul li.side-banner img{
    	width:100%;
    	height:auto;
        border-bottom:0;
    	display:block;
    	padding:0;
    }
    aside ul li.side-banner p{
    	width:95%;
    	height:auto;
    	line-height:25px;
    	font-size:16px;
    	color:#caadc4;
    	text-align:left;
    	background:#725190;
		display:block;
    	margin:0;
    	padding:0 10px;
        position: absolute;
        right:0;
        bottom:0;
    }
    .side-banner-border{
    	width:30px;
    	height:90%;
    	border:10px solid var(--redColor);
    	border-right:none;
        /*background:var(--navBackgroundColor);*/
        top:5%;
        bottom:5%;
        left:0;
        z-index:2;
    }
    .side-banner-redblock{
    	width:50px;
    	height:calc(90% - 20px);
        background:var(--blackColor);
        top:calc(5% + 10px);
        bottom:calc(5% + 10px);
        left:10px;
        z-index:2;
    }
    aside ul li h4{
    	width:100%;
    	height:45px;
    	line-height:45px;
    	font-size:18px;
    	color:var(--topnavColor);
    	font-weight:bold;
    	background:var(--titleBackgroundColor);
    	display:block;
    	margin:0;
    	padding:0 5%;
    }
    aside ul li h4 span{
    	width:auto;
    	height:45px;
    	line-height:45px;
    	color:var(--topnavColor);
    	font-weight:bold;
    	background:url(../img/index_side_title_light.png) left center no-repeat;
    	background-size:20px 20px;
    	display:inline-block;
    	padding:0 0 0 23px;
    }
    aside.sidebar ul li h4 span.dark{
    	background:url(../img/index_side_title_dark.png) left center no-repeat;
    	background-size:20px 20px;
    }
    aside ul li h4 small{
        font-size:12px;
    	color:var(--darkTitleColor);
    	font-weight:bold;
    	display:inline-block;
    	margin:0 0 0 5px;
    	padding:0;
    }
    .side-user-info{
        margin:0;
        padding:20px 5%;
    }
    .side-user-center{
		width:100%;
		height:32px;
        margin:0;
        padding:0;
    }
    .side-user-info .avatar{
        width:32px;
        height:32px;
        margin:0 auto;
        position:relative;
    }
    .side-user-info .user-border{
        width:30px;
        height:80%;
        border:10px solid var(--redColor);
        border-right:none;
        position:absolute;
        left:0;
        top:10%;
        bottom:10%;
    }
    /*.user-topline{
        width:30px;
        height:10px;
        background:var(--redColor);
        position:absolute;
        left:0;
        top:10px;
    }
    .user-bottomline{
        width:30px;
        height:10px;
        background:var(--redColor);
        position:absolute;
        left:0;
        bottom:10px;
    }*/
    .side-user-info .user-blackblock{
        width:40px;
        height:calc(80% - 20px);
        background:var(--blackColor);
        position:absolute;
        left:10px;
        top:calc(10% + 10px);
        bottom:calc(10% + 10px);
        z-index:3;
    }
    .side-user-info .avatar img{
        width:32px;
        height:32px;
        border-radius:50%;
        display:block;
    }
    .side-user-info .avatar .side-user-avatar-icon{
        width:32px;
        height:32px;
        line-height:32px;
        font-size:24px;
        color:var(--subTitleColor);
        text-align:center;
    }
    .side-user-info h3{
        width:auto;
        height:32px;
        line-height:32px;
        font-size:16px;
        color:var(--titleColor);
        font-weight:bold;
        font-family:'Arial';
        margin:0 0 0 15px;
		padding:0;
        overflow:hidden;
    }
    .side-user-info h3 a{
        font-size:16px;
        color:var(--topnavColor);
        font-weight:bold;
        font-family:'Arial';
    }
	.side-user-info h3 a:hover{
        color:#406599;
    }
    .side-user-info .user-intro{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:14px;
        color:var(--subTitleColor);
        text-align:center;
        padding:20px 0 0;
        overflow:hidden;
    }
    .side-user-info .user-intro p{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:14px;
        color:var(--subTitleColor);
        margin:0;
        padding:0 0 10px;
        overflow:hidden;
    }
    .side-user-info .user-intro p.notice{
        color:var(--redColor);
        font-weight:bold;
    }
    .side-user-stats{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:0;
        padding:20px 0 0;
    }
    .side-user-stats a{
        flex:1;
        min-width:0;
        text-align:center;
        text-decoration:none;
    }
    .side-user-stats a:hover{
        text-decoration:none;
    }
    .side-user-stats a:hover strong{
        color:#505050;
    }
    .side-user-stats strong{
        display:block;
        color:var(--topnavColor);
        font-size:20px;
        line-height:1.2;
        font-weight:bold;
    }
    .side-user-stats em{
        display:block;
        color:var(--subTitleColor);
        font-size:14px;
        line-height:1.4;
        font-style:normal;
        margin-top:2px;
    }
    .side-contribute-btn{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:6px;
        height:36px;
        line-height:36px;
        border-radius:4px;
        background:#912f22;
        color:#e4c297;
        font-size:14px;
        font-weight:bold;
        text-align:center;
        margin-top:16px;
        padding:0 16px;
        text-decoration:none;
    }
    .side-contribute-btn:hover{
        background:var(--redColor);
        opacity:0.85;
        color:#e4c297;
        text-decoration:none;
    }
    .side-contribute-btn i{
        color:#e4c297;
    }
    .userall-profile-bar{
        display:flex;
        align-items:center;
        gap:15px;
        flex-wrap:wrap;
        margin:0 0 5px;
        padding:18px;
        border-radius:4px;
        background:var(--backgroundColor);
    }
    .userall-avatar img{
        width:64px;
        height:64px;
        border-radius:50%;
        object-fit:cover;
    }
    .userall-profile-info{
        flex:1;
        min-width:150px;
    }
    .userall-nickname{
        font-size:18px;
        color:var(--titleColor);
        margin:0 0 4px;
        font-weight:bold;
    }
    .userall-intro{
        font-size:13px;
        color:var(--subTitleColor);
        margin:0;
        line-height:1.4;
    }
    .userall-profile-stats{
        display:flex;
        gap:20px;
    }
    .userall-profile-stats span{
        text-align:center;
    }
    .userall-profile-stats strong{
        display:block;
        color:var(--titleColor);
        font-size:18px;
        line-height:1.2;
        font-weight:bold;
    }
    .userall-profile-stats em{
        display:block;
        color:var(--subTitleColor);
        font-size:12px;
        font-style:normal;
        margin-top:2px;
    }
    .userall-profile-bar > .article-author-follow-btn{
        margin-left:auto;
        flex-shrink:0;
        height:34px !important;
        line-height:32px !important;
        padding:0 18px !important;
        font-size:14px !important;
        border-radius:6px !important;
        border:1.5px solid var(--blueColor,#236ddb) !important;
        background:transparent !important;
        color:var(--blueColor,#236ddb) !important;
    }
    .userall-profile-bar > .article-author-follow-btn i{
        color:var(--blueColor,#236ddb) !important;
    }
    .userall-profile-bar > .article-author-follow-btn.is-following{
        background:var(--blueColor,#236ddb) !important;
        color:#fff !important;
    }
    .userall-profile-bar > .article-author-follow-btn.is-following i{
        color:#fff !important;
    }
    .userall-profile-bar > .article-author-follow-btn:hover{
        background:var(--blueColor,#236ddb) !important;
        color:#fff !important;
        border-color:var(--blueColor,#236ddb) !important;
    }
    .userall-profile-bar > .article-author-follow-btn:hover i{
        color:#fff !important;
    }
    .userall-content-tabs{
        display:flex;
        gap:0;
        margin:0 0 10px;
        padding:0;
        border-radius:4px;
        background:var(--backgroundColor);
        border-bottom:1px solid var(--borderColor);
    }
    .userall-content-tabs .tab-item{
        padding:12px 20px;
        font-size:14px;
        color:var(--subTitleColor);
        text-decoration:none;
        border-bottom:2px solid transparent;
        margin-bottom:-1px;
        transition:all 0.2s;
    }
    .userall-content-tabs .tab-item:hover{
        color:var(--hoverColor);
    }
    .userall-content-tabs .tab-item.active{
        color:var(--hoverColor);
        border-bottom-color:var(--hoverColor);
        font-weight:500;
    }
    .userall-content-tabs .tab-item .count{
        font-size:12px;
        color:var(--subTitleColor);
        margin-left:4px;
    }
    .empty-content-tip{
        text-align:center;
        padding:60px 20px;
        color:var(--subTitleColor);
        list-style:none;
        background:var(--backgroundColor);
        border-radius:4px;
    }
    .empty-content-tip i{
        font-size:48px;
        color:var(--borderColor);
        margin-bottom:10px;
    }
    .empty-content-tip p{
        margin:0;
        font-size:14px;
    }
    .side-login-prompt-box{
        margin:0 0 5px;
        padding:18px 2%;
        text-align:center;
        overflow:hidden;
    }
    .side-login-prompt-box p{
        color:var(--subTitleColor);
        font-size:16px;
        line-height:1.6;
        margin:0 0 14px;
        padding:0;
    }
    .side-login-prompt-box a{
        display:inline-block;
        min-width:92px;
        height:32px;
        line-height:32px;
        border-radius:4px;
        background:var(--redColor,#d9534f);
        color:#fff;
        font-size:14px;
        font-weight:bold;
        text-align:center;
        padding:0 16px;
    }
    .side-login-prompt-box a:hover{
        background:#c9302c;
        color:#fff;
    }
/* 文章列表样式 */
.side-article-list {
    list-style: none;
    padding:10px 5%;
    margin: 0;
}

.side-article-item {
    border-bottom:1px solid var(--borderColor);
    background:none;
    margin:0 0 5px;
    padding:0 0;
}

.side-article-item:last-child {
    border-bottom: none;
}

.side-article-item a {
        height:auto;
        line-height:1.5;
        font-size:14px;
        color:var(--topnavColor);
        background:none;
        display:inline-block;
        margin-right:0;
        margin-bottom:3px;
        padding:0;
}

.side-article-item a:hover {
    color:var(--hoverColor);
    transition-duration: 1s;
    -webkit-transition-duration: 1s; /* Safari */
}

/* 时间样式 */
.side-article-item time {
    line-height:140%;
    font-size:12px;
    color:var(--lightColor,#a1a1a1);
    font-style:normal;
    display:block;
    margin-top:5px;
}

.side-article-item dl{
    position:relative;
    margin:0;
    padding:8px 0;
    min-height:60px;
}

/* AI & EV 资讯卡片样式 */
#aiNewsList {
    padding: 10px 5%;
}
.ai-news-card {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    text-decoration: none;
    color: inherit;
}
.ai-news-card:last-child {
    margin-bottom: 0;
}
.ai-news-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 4px;
    background: var(--deepColor);
}
.ai-news-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.ai-news-card:hover .ai-news-card-img img {
    transform: scale(1.03);
}
.ai-news-card-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--topnavColor);
    line-height: 1.5;
    margin-top: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ai-news-card:hover .ai-news-card-title {
    color: var(--hoverColor, #236ddb);
}
.ai-news-card-meta {
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--lightColor, #999);
}
.ai-news-card-meta .ai-news-read {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.ai-news-card-meta .ai-news-read i {
    font-size: 12px;
}
.ai-news-card-meta .ai-news-time {
    color: var(--lightColor, #999);
}

/* 作者热门 AUTHOR'S HOT（视频详情页） */
.author-hot-list{
    padding:10px 5%;
}
.author-hot-card{
    display:block;
    width:100%;
    margin-bottom:12px;
    text-decoration:none;
    color:inherit;
}
.author-hot-card:last-child{
    margin-bottom:0;
}
.author-hot-img{
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:4px;
    background:var(--deepColor);
    position:relative;
}
.author-hot-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.author-hot-play{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:38px;
    height:38px;
    background:rgba(0,0,0,0.55);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:18px;
}
.author-hot-img span.video-play-count{
    position:absolute;
    left:10px;
    bottom:10px;
    z-index:2;
    font-size:12px;
    color:#fff;
    /*background:url('../img/video_play_count.png?var7') left center no-repeat;
    background-size:auto 14px;*/
    padding-left:0;
    line-height:14px;
}
.author-hot-img span.video-duration{
    position:absolute;
    right:10px;
    bottom:10px;
    z-index:2;
    font-size:12px;
    color:#fff;
    line-height:14px;
}
.author-hot-title{
    font-size:14px;
    font-weight:bold;
    color:var(--topnavColor);
    line-height:1.5;
    margin-top:5px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.author-hot-card:hover .author-hot-title{
    color:var(--hoverColor,#236ddb);
}
.author-hot-meta{
    margin-top:5px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px;
    color:var(--lightColor,#999);
}
.author-hot-meta span{
    display:inline-flex;
    align-items:center;
    gap:3px;
}

.side-article-item dt{
    position:absolute;
    right:0;
    top:8px;
    width:60px;
    height:60px;
    display: none;
    overflow:hidden;
    border-radius:3px;
}
.side-article-item dt img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
}
.side-article-item dd{
    width:100%;
    height:auto;
    display: block;
    padding-right:70px;
    box-sizing:border-box;
}

/* 按钮样式 */
#changeBatchWrapper {
    margin: 0 auto 10px;
    padding-bottom:10px;
}

#changeBatch {
    width:90%;
    margin:0 5%;
    padding:10px 0 10px;
    font-size: 14px;
    border-radius: 4px;
    transition: all 0.3s;
}

#changeBatch:hover {
    background: #409eff;
    color: #fff;
}

#changeBatch:disabled {
    background: #f5f5f5;
    color: #ccc;
    cursor: not-allowed;
}

/* 侧边栏标签云 */
.side-tag-cloud {
    padding: 12px 15px;
    line-height: 1.9;
}
.side-tag-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 2px 4px 2px 0;
    padding: 1px 6px;
    color: var(--topnavColor);
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.3s;
    font-weight: normal;
}
.side-tag-item:hover {
    background: rgba(35,109,219,0.08);
    color: var(--hoverColor);
    transform: scale(1.05);
}
.side-tag-count {
    font-size: 10px;
    background: var(--borderColor);
    color: var(--lightColor);
    padding: 0px 5px;
    border-radius: 10px;
    transition: all 0.3s;
    font-weight: normal;
    line-height: 1.6;
}
.side-tag-item.tag-yellow .side-tag-count {
    background: rgba(255,185,9,0.2);
    color: #cc9400;
}
.side-tag-item.tag-yellow:hover .side-tag-count {
    background: #ffB909;
    color: #fff;
}
.side-tag-item.tag-green .side-tag-count {
    background: rgba(1,121,93,0.15);
    color: #01604c;
}
.side-tag-item.tag-green:hover .side-tag-count {
    background: #01795D;
    color: #fff;
}
.side-tag-item.tag-blue .side-tag-count {
    background: rgba(0,154,214,0.15);
    color: #007bac;
}
.side-tag-item.tag-blue:hover .side-tag-count {
    background: #009ad6;
    color: #fff;
}
.side-tag-item.tag-red .side-tag-count {
    background: rgba(178,39,18,0.15);
    color: #8f1f0f;
}
.side-tag-item.tag-red:hover .side-tag-count {
    background: #B22712;
    color: #fff;
}
.side-tag-item.tag-pink .side-tag-count {
    background: rgba(238,147,162,0.2);
    color: #d6687b;
}
.side-tag-item.tag-pink:hover .side-tag-count {
    background: #EE93A2;
    color: #fff;
}
.side-tag-item.tag-purple .side-tag-count {
    background: rgba(71,23,109,0.15);
    color: #391258;
}
.side-tag-item.tag-purple:hover .side-tag-count {
    background: #47176D;
    color: #fff;
}
.side-tag-item:not(.tag-yellow):not(.tag-green):not(.tag-blue):not(.tag-red):not(.tag-pink):not(.tag-purple):hover .side-tag-count {
    background: var(--hoverColor);
    color: #fff;
}
/* 6种主题色标签 */
.side-tag-item.tag-yellow {
    color: #ffB909;
    font-weight: bold;
}
.side-tag-item.tag-green {
    color: #01795D;
    font-weight: bold;
}
.side-tag-item.tag-blue {
    color: #009ad6;
    font-weight: bold;
}
.side-tag-item.tag-red {
    color: #B22712;
    font-weight: bold;
}
.side-tag-item.tag-pink {
    color: #EE93A2;
    font-weight: bold;
}
.side-tag-item.tag-purple {
    color: #47176D;
    font-weight: bold;
}
.side-tag-item.tag-yellow:hover {
    background: rgba(255,185,9,0.15);
}
.side-tag-item.tag-green:hover {
    background: rgba(1,121,93,0.15);
}
.side-tag-item.tag-blue:hover {
    background: rgba(0,154,214,0.15);
}
.side-tag-item.tag-red:hover {
    background: rgba(178,39,18,0.15);
}
.side-tag-item.tag-pink:hover {
    background: rgba(238,147,162,0.2);
}
.side-tag-item.tag-purple:hover {
    background: rgba(71,23,109,0.15);
}
.side-tag-more {
    display: inline-block;
    font-size: 14px;
    color: var(--subTitleColor);
    text-decoration: none;
    margin-top: 5px;
}
.side-tag-more:hover {
    color: var(--hoverColor);
    text-decoration: underline;
}
    em.indexSideArticleSort{
        width:20px;
        height:16px;
        line-height:16px;
        font-size:12px;
        color:rgba(220,220,220,1);
        font-style:normal;
        text-align:center;
        border-radius:4px;
        display:inline-block;
        margin:2px 5px 2px 0;
    }
    em.indexSideArticleSort1{
        background:rgba(190,75,102,1);
    }
    em.indexSideArticleSort2{
        background:rgba(210,113,90,1);
    }
    em.indexSideArticleSort3{
        background:rgba(214,144,89,1);
    }
    em.indexSideArticleSort4{
        background:rgba(222,167,94,1);
    }
    em.indexSideArticleSort5{
        background:rgba(228,195,119,1);
    }
    em.indexSideArticleSort6,em.indexSideArticleSort7,em.indexSideArticleSort8,em.indexSideArticleSort9{
        color:#959596;
        background:rgba(255,255,255,0.8);
    }
    /* 热门点击 标签样式 */
    .hot-badge{
        color:var(--redColor);
        font-weight:bold;
        font-size:13px;
        margin-right:2px;
    }
    ul.side-comment-list{
        margin:0;
        padding:10px 5%;
    }
    ul.side-comment-list li.side-comment-item{
        border-bottom:1px solid var(--borderColor);
        background:none;
        margin:0 0 5px;
        padding:0 0 5px;
    }
    ul.side-comment-list li.side-comment-item a{
        line-height:140%;
        font-size:14px;
        color:var(--subTitleColor);
        word-break:break-all;
        word-wrap:break-word;
    }
    ul.side-comment-list li.side-comment-item a u.commentContent{
        line-height:140%;
        font-size:14px;
        color:var(--hoverColor,#236ddb);
        font-style:normal;
        TEXT-DECORATION-LINE:underline;/*文本装饰线*/
        TEXT-DECORATION-STYLE:wavy;/*文本装饰线样式*/
        TEXT-DECORATION-COLOR:red;/*文本装饰线颜色*/
        
    }
    ul.side-comment-list li.side-comment-item a:hover,ul.side-comment-list li.side-comment-item a:hover u.commentContent{
        color:var(--hoverColor,#236ddb);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    ul.side-link-list{
        margin:0;
        padding:10px 5%;
    }
    ul.side-link-list li{
        width:auto;
    }
    ul.side-link-list li a{
        height:25px;
        line-height:25px;
        font-size:14px;
        color:var(--subTitleColor);
        background:url('../img/icon_link.png') -8px center no-repeat;
        background-size:25px 25px;
        display:inline-block;
        margin-right:15px;
        margin-bottom:3px;
        padding:0 0 0 18px;
    }
    ul.side-link-list li a:hover{
        color:var(--hoverColor);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    ul.side-tag-list{
        margin:0;
        padding:10px 5%;
    }
    ul.side-tag-list li{
        width:auto;
    }
    ul.side-tag-list li a{
        height:25px;
        line-height:25px;
        font-size:14px;
        color:var(--subTitleColor);
        border:1px solid var(--borderColor);
        display:inline-block;
        margin-right:15px;
        margin-bottom:3px;
        padding:0 3px;
    }
    ul.side-tag-list li a:hover{
        color:rgba(220,220,220,1);
        background:var(--subTitleColor);
    }
    .sidebar-more{
        width:100%;
        height:40px;
    }
    .sidebar-more a{
        width:100%;
        height:40px;
        line-height:40px;
        font-size:16px;
        color:#fff;
        text-align:center;
        background:var(--blueColor);
        display:block;
    }
    .sidebar-more a:hover{
        background:var(--redColor);
    }
    .friendLink{
        width:100%;
        height:auto;
        text-align:left;
        background:var(--backgroundColor);
        margin:0 auto 5px;
        padding:20px;
    }
    .friendLink span{
        height:auto;
        line-height:180%;
        font-size:14px;
        color:var(--topnavColor);
        margin:0;
        padding:0;
    }
    .friendLink span.friendLinkTitle{
        color:var(--titleColor);
        font-weight:bold;
        display:inline-block;
        margin-right:10px;
    }
    .friendLink span.friendLinkList{
        display:inline-block;
    }
    .friendLink span.friendLinkList a{
        color:var(--topnavColor);
        display:inline-block;
        margin-right:10px;
    }
    .friendLink span.friendLinkList a:hover{
        color:var(--hoverColor,#236ddb);
    }
    footer{
        width:100%;
        height:auto;
        background:var(--lightBackgroundColor);
        margin:0 auto;
        padding:20px;
    }
    footer p{
        width:100%;
        height:auto;
        line-height:180%;
        font-size:14px;
        color:var(--topnavColor);
        text-align:center;
        margin:0;
        padding:0;
    }
    footer p a{
        color:var(--topnavColor);
    }
    footer p a:hover{
        color:var(--hoverColor,#236ddb);
    }
    .backToTop{
        display:none;
        width:0;
        height:0;
        line-height:50px;
        background:var(--redColor) url('../img/backtotop.png') center center no-repeat;
        background-size:30px 30px;
        position:fixed;
        right:0;
        bottom:0;
        cursor:pointer;
        overflow:hidden;
    }

    .category-hot{
        width:368px;
    }
    .category-hot h3{
        height:50px;
    }
    .category-hot h3 a{
        height:50px;
    }
    .category-hot .blog-info-right{
        width:278px;
    }
    .category-hot .blog-content{
        height:150px;
        margin-bottom:43px;
    }
    .category-blog-list{

    }
    /*.category-blog-list .blog-item-right{
        width:277px;
    }
    .category-blog-list .blog-item-right .blog-info-right{
        width:257px;
    }
    ul.subpage-blog-list li .blog-info-right{
        width:211px;
    }*/
    .side-article-item dt{
        display: flex;
    }
    .side-article-item dd{
        width:100%;
        display: block;
    }
	.backToTop{
		width:50px;
		height:50px;
		right:50px;
		bottom:50px;
	}
	.member-favorites-empty{
	    border:1px dashed #d8e2ef;
	    border-radius:14px;
	    color:#6b7280;
	    text-align:center;
		
		height:auto;
		background-color:var(--backgroundColor);
		margin-bottom:5px;
		padding:10px 15px;
	}
	.member-favorites-empty i{
	display:block;
	color:#19c894;
	font-size:42px;
	margin-bottom:12px;
	}
	.member-favorites-empty p{
		color:#6b7280;
		font-size:15px;
		margin:0 0 18px;
	}
}

.rq-pagination-empty{
    width:100%;
    margin:14px auto 0;
    padding:22px 12px;
    background:var(--backgroundColor,#fff);
    border-radius:8px;
    font-size:14px;
}
.rq-pagination-wrap{
    width:100%;
    margin:14px auto 0;
    padding:16px 10px 18px;
    background:var(--backgroundColor,#fff);
    border-radius:8px;
    overflow:hidden;
}
.rq-pagination-summary{
    width:100%;
    line-height:1;
    font-size:13px;
    color:var(--subTitleColor,#777);
    text-align:center;
    margin:0 0 12px;
}
.rq-pagination-summary strong{
    color:var(--redColor,#f00);
    font-weight:bold;
}
ul.rq-pagination{
    display:block!important;
    text-align:center;
    margin:0;
    padding:0;
    list-style:none;
    font-size:0;
}
ul.rq-pagination li.page-item{
    display:inline-block!important;
    margin:0!important;
    padding:0!important;
    list-style:none!important;
    float:none!important;
    width:auto!important;
    font-size:13px;
    vertical-align:top;
}
ul.rq-pagination li.page-item .page-link{
    display:inline-block!important;
    width:auto!important;
    min-width:36px;
    height:36px;
    line-height:34px!important;
    box-sizing:border-box;
    white-space:nowrap;
    text-align:center;
    border:1px solid rgba(120,120,120,.22)!important;
    border-radius:18px!important;
    color:var(--subTitleColor,#555)!important;
    background:var(--wrapperColor,#fff)!important;
    font-size:13px;
    text-decoration:none!important;
    padding:0 12px!important;
    margin:3px!important;
    position:relative!important;
    float:none!important;
    vertical-align:top;
    transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
ul.rq-pagination li.page-item:first-child .page-link,
ul.rq-pagination li.page-item:last-child .page-link{
    border-radius:18px!important;
    margin-left:3px!important;
}
ul.rq-pagination li.page-item .page-link:hover{
    color:#fff!important;
    border-color:var(--redColor,#f00)!important;
    background:var(--redColor,#f00)!important;
    transform:translateY(-1px);
}
ul.rq-pagination li.page-item.active .page-link{
    color:#fff!important;
    border-color:var(--redColor,#f00)!important;
    background:var(--redColor,#f00)!important;
    font-weight:bold;
}
ul.rq-pagination li.page-item.disabled .page-link{
    color:rgba(120,120,120,.45)!important;
    border-color:rgba(120,120,120,.14)!important;
    background:rgba(120,120,120,.08)!important;
    cursor:not-allowed;
    transform:none;
}
ul.rq-pagination li.page-item.rq-page-ellipsis .page-link{
    min-width:36px;
    font-size:18px;
    font-weight:bold;
    border-color:transparent!important;
    background:transparent!important;
    color:var(--subTitleColor,#777)!important;
    cursor:default;
    padding:0 4px!important;
}
ul.rq-pagination li.page-item.rq-page-edge{
    display:none;
}

@media screen and (min-width:768px){
    .rq-pagination-empty,
    .rq-pagination-wrap{
        margin:20px 5px 8px 0;
        padding:18px 16px;
    }
    .rq-pagination-wrap{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:14px;
    }
    .rq-pagination-summary{
        width:auto;
        min-width:86px;
        text-align:left;
        margin:0;
    }
    ul.rq-pagination{
        text-align:right;
        flex:1;
    }
    ul.rq-pagination li.page-item .page-link{
        min-width:40px;
        height:40px;
        line-height:38px!important;
        font-size:14px;
        margin:3px!important;
    }
    ul.rq-pagination li.page-item.rq-page-edge{
        display:inline-block!important;
    }
}

/* ===== AI 股票行情侧栏样式 ===== */
.side-stock-list {
    padding: 10px 15px;
    margin: 0;
}

.side-stock-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--borderColor);
}

.side-stock-item:last-child {
    border-bottom: none;
}

.stock-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stock-name {
    font-size: 14px;
    font-weight: bold;
    color: var(--topnavColor);
    line-height: 1.4;
}

.stock-code {
    font-size: 12px;
    color: var(--subTitleColor);
    line-height: 1.3;
}

.stock-price-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.stock-price-wrap.stock-up {
    color: #e74c3c;
}

.stock-price-wrap.stock-down {
    color: #2ecc71;
}

.stock-price {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.stock-change {
    font-size: 12px;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

/* 暗色模式适配 */
[data-theme="dark"] .stock-price-wrap.stock-up {
    color: #ff6b6b;
}

[data-theme="dark"] .stock-price-wrap.stock-down {
    color: #51cf66;
}

/* ========== 标签云聚合页 ========== */
.tag-cloud-container {
    padding: 20px;
    margin-bottom: 20px;
}
.tag-cloud-title {
    font-size: 20px;
    margin: 0 0 8px;
    color: var(--titleColor);
}
.tag-cloud-title i {
    color: #009ad6;
    margin-right: 8px;
}
.tag-cloud-desc {
    font-size: 14px;
    color: var(--subTitleColor);
    margin: 0 0 20px;
}
.tag-cloud-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: baseline;
    padding: 20px;
    border-radius: 8px;
    background: var(--backgroundColor);
    border: 1px solid var(--borderColor);
}
.tag-cloud-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--titleColor);
    text-decoration: none;
    transition: all 0.3s;
    border-radius: 4px;
    line-height: 1.5;
    font-weight: normal;
}
.tag-cloud-item:hover {
    transform: scale(1.08);
}
.tag-cloud-item .tag-count {
    font-size: 10px;
    background: var(--borderColor);
    color: var(--lightColor);
    padding: 0px 5px;
    border-radius: 10px;
    transition: all 0.3s;
    font-weight: normal;
}
/* 6种主题色标签 */
.tag-cloud-item.tag-yellow {
    color: #ffB909;
    font-weight: bold;
}
.tag-cloud-item.tag-yellow .tag-count {
    background: rgba(255,185,9,0.2);
    color: #cc9400;
}
.tag-cloud-item.tag-yellow:hover .tag-count {
    background: #ffB909;
    color: #fff;
}
.tag-cloud-item.tag-green {
    color: #01795D;
    font-weight: bold;
}
.tag-cloud-item.tag-green .tag-count {
    background: rgba(1,121,93,0.15);
    color: #01604c;
}
.tag-cloud-item.tag-green:hover .tag-count {
    background: #01795D;
    color: #fff;
}
.tag-cloud-item.tag-blue {
    color: #009ad6;
    font-weight: bold;
}
.tag-cloud-item.tag-blue .tag-count {
    background: rgba(0,154,214,0.15);
    color: #007bac;
}
.tag-cloud-item.tag-blue:hover .tag-count {
    background: #009ad6;
    color: #fff;
}
.tag-cloud-item.tag-red {
    color: #B22712;
    font-weight: bold;
}
.tag-cloud-item.tag-red .tag-count {
    background: rgba(178,39,18,0.15);
    color: #8f1f0f;
}
.tag-cloud-item.tag-red:hover .tag-count {
    background: #B22712;
    color: #fff;
}
.tag-cloud-item.tag-pink {
    color: #EE93A2;
    font-weight: bold;
}
.tag-cloud-item.tag-pink .tag-count {
    background: rgba(238,147,162,0.2);
    color: #d6687b;
}
.tag-cloud-item.tag-pink:hover .tag-count {
    background: #EE93A2;
    color: #fff;
}
.tag-cloud-item.tag-purple {
    color: #47176D;
    font-weight: bold;
}
.tag-cloud-item.tag-purple .tag-count {
    background: rgba(71,23,109,0.15);
    color: #391258;
}
.tag-cloud-item.tag-purple:hover .tag-count {
    background: #47176D;
    color: #fff;
}
/* 普通标签悬停效果 */
.tag-cloud-item:not(.tag-yellow):not(.tag-green):not(.tag-blue):not(.tag-red):not(.tag-pink):not(.tag-purple):hover {
    color: var(--hoverColor);
    background: rgba(35,109,219,0.08);
}
@media (max-width: 767px) {
    .tag-cloud-title {
        font-size: 18px;
    }
    .tag-cloud-container {
        padding: 15px;
    }
    .tag-cloud-wrap {
        gap: 8px;
    }
}

/* ===== 标签详情页样式 ===== */
.tag-detail-header {
    width: 835px;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 5px;
    background: var(--lightBackgroundColor);
}
.tag-detail-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.tag-detail-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--subTitleColor);
}
.tag-detail-badge i {
    color: var(--themeColor);
}
.tag-detail-name {
    font-size: 24px;
    font-weight: bold;
    color: var(--topnavColor);
    margin: 0;
}
.tag-detail-count {
    font-size: 13px;
    color: var(--subTitleColor);
}
.related-tags {
    width: 835px;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 5px;
    background: var(--lightBackgroundColor);
}
.related-tags-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--topnavColor);
    margin: 0 0 12px 0;
}
.related-tags-cloud {
    line-height: 2.2;
}
.related-tag-item {
    display: inline-block;
    margin: 3px 8px 3px 0;
    padding: 2px 6px;
    color: var(--hoverColor);
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.2s;
    font-weight: normal;
    line-height: 1.6;
}
.related-tag-item:hover {
    background: rgba(35,109,219,0.08);
    color: var(--blueColor);
    text-decoration: underline;
}
.related-tag-item.tag-yellow {
    color: #cc9400;
}
.related-tag-item.tag-yellow:hover {
    background: rgba(255,185,9,0.15);
    color: #ffB909;
}
.related-tag-item.tag-green {
    color: #01604c;
}
.related-tag-item.tag-green:hover {
    background: rgba(1,121,93,0.15);
    color: #01795D;
}
.related-tag-item.tag-blue {
    color: #007bac;
}
.related-tag-item.tag-blue:hover {
    background: rgba(0,154,214,0.15);
    color: #009ad6;
}
.related-tag-item.tag-red {
    color: #8f1f0f;
}
.related-tag-item.tag-red:hover {
    background: rgba(178,39,18,0.15);
    color: #B22712;
}
.related-tag-item.tag-pink {
    color: #d6687b;
}
.related-tag-item.tag-pink:hover {
    background: rgba(238,147,162,0.2);
    color: #EE93A2;
}
.related-tag-item.tag-purple {
    color: #391258;
}
.related-tag-item.tag-purple:hover {
    background: rgba(71,23,109,0.15);
    color: #47176D;
}

/* ===== 作者排行榜样式 ===== */
.author-rank-container {
    padding: 20px;
    border-radius: 8px;
}
.author-rank-title {
    font-size: 22px;
    font-weight: bold;
    color: var(--titleColor, #333);
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.author-rank-title i {
    color: #ffB909;
}
.author-rank-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--borderColor, #eee);
    padding-bottom: 10px;
}
.author-rank-tab {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    color: var(--subTitleColor, #666);
    text-decoration: none;
    transition: all 0.3s;
}
.author-rank-tab:hover {
    color: var(--blueColor, #009ad6);
    background: rgba(0,154,214,0.1);
    text-decoration: none;
}
.author-rank-tab.active {
    background: var(--blueColor, #009ad6);
    color: #fff;
}
.author-rank-desc {
    font-size: 13px;
    color: var(--lightColor, #999);
    margin-bottom: 20px;
}
.author-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.author-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-radius: 8px;
    background: var(--backgroundColor);
    border: 1px solid var(--borderColor);
    transition: all 0.3s;
}
.author-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.author-rank-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
    background: var(--borderColor, #eee);
    color: var(--lightColor, #999);
}
.author-rank-badge.rank-1 {
    background: linear-gradient(135deg, #ffB909 0%, #ff9500 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(255,185,9,0.4);
}
.author-rank-badge.rank-2 {
    background: linear-gradient(135deg, #c0c0c0 0%, #a0a0a0 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(192,192,192,0.4);
}
.author-rank-badge.rank-3 {
    background: linear-gradient(135deg, #cd7f32 0%, #a05a2c 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(205,127,50,0.4);
}
.author-avatar-wrap {
    flex-shrink: 0;
}
.author-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--borderColor, #eee);
}
.author-avatar-default {
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--lightColor, #999);
}
.author-info {
    flex: 1;
    min-width: 0;
}
.author-name {
    font-size: 16px;
    font-weight: bold;
    color: var(--titleColor, #333);
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.author-name:hover {
    color: var(--hoverColor);
    text-decoration: none;
}
.author-intro {
    font-size: 13px;
    color: var(--subTitleColor);
    margin: 0 0 8px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.author-stats {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.stat-item {
    font-size: 12px;
    color: var(--lightColor);
    display: flex;
    align-items: center;
    gap: 4px;
}
.stat-item i {
    font-size: 12px;
    color: var(--lightColor);
}
.author-action {
    flex-shrink: 0;
}
.btn-follow {
    border-radius: 20px;
    padding: 4px 16px;
    font-size: 13px;
}

/* ===== 侧边栏热门作者样式 ===== */
.side-authors {
    padding: 0 15px;
}
.side-author-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--borderColor, #f0f0f0);
}
.side-author-item:last-child {
    border-bottom: none;
}
.side-author-rank {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
    flex-shrink: 0;
    background: var(--borderColor, #eee);
    color: var(--lightColor, #999);
}
.side-author-rank.rank-1 {
    background: var(--pinkColor);
    color: #fff;
}
.side-author-rank.rank-2 {
    background: var(--purpleColor);
    color: #fff;
}
.side-author-rank.rank-3 {
    background: var(--redColor);
    color: #fff;
}
.side-author-rank.rank-active {
    background: var(--accentGreenColor);
    color: #fff;
}
.side-author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.side-author-avatar-default {
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--lightColor, #999);
}
.side-author-info {
    flex: 1;
    min-width: 0;
}
.side-author-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--topnavColor, #333);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.side-author-name:hover {
    color: var(--hoverColor);
    text-decoration: none;
}
.side-author-stats {
    font-size: 12px;
    color: var(--darkTitleColor);
}
.side-author-follow {
    flex-shrink: 0;
}
.side-btn-follow {
    padding: 2px 10px;
    font-size: 12px;
    border-radius: 12px;
}
.side-author-more {
    display: block;
    text-align: center;
    font-size: 14px;
    color: var(--subTitleColor);
    text-decoration: none;
    padding: 10px 0;
    border-top: 1px dashed var(--borderColor);
}
.side-author-more:hover {
    color: var(--hoverColor);
    text-decoration: underline;
}
.side-recommend-authors {
    display: flex;
    flex-wrap: wrap;
    padding: 5px 0;
}
.side-recommend-author-item {
    width: 33.333%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 5px;
    text-decoration: none;
    transition: transform 0.2s ease;
}
.side-recommend-author-item:hover {
    text-decoration: none;
    transform: translateY(-2px);
}
.side-recommend-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}
.side-recommend-author-item:hover .side-recommend-avatar {
    border-color: var(--themeColor);
}
.side-recommend-avatar-default {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--lightColor, #999);
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}
.side-recommend-author-item:hover .side-recommend-avatar-default {
    border-color: var(--themeColor);
}
.side-recommend-name {
    font-size: 12px;
    color: var(--topnavColor);
    margin-top: 6px;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.side-recommend-author-item:hover .side-recommend-name {
    color: var(--themeColor);
}
[data-theme="dark"] .side-recommend-avatar-default {
    background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
    color: var(--darkTitleColor);
}

@media (max-width: 767px) {
    .author-rank-container {
        padding: 15px;
    }
    .author-rank-title {
        font-size: 18px;
    }
    .author-card {
        flex-wrap: wrap;
        padding: 12px;
        gap: 10px;
    }
    .author-rank-badge {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    .author-avatar {
        width: 48px;
        height: 48px;
    }
    .author-stats {
        gap: 10px;
    }
    .stat-item {
        font-size: 11px;
    }
    .author-action {
        width: 100%;
        text-align: right;
    }

    /* 用户主页移动端适配 */
    .userall-profile-bar {
        padding: 15px;
        gap: 12px;
    }
    .userall-avatar img {
        width: 52px;
        height: 52px;
    }
    .userall-profile-info {
        order: -1;
        width: 100%;
    }
    .userall-nickname {
        font-size: 16px;
    }
    .userall-profile-stats {
        gap: 15px;
        margin-left: auto;
    }
    .userall-profile-stats strong {
        font-size: 16px;
    }
    .userall-profile-bar > .article-author-follow-btn {
        width: 100%;
        justify-content: center;
        margin-left:0;
    }
    .userall-content-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .userall-content-tabs .tab-item {
        padding: 10px 14px;
        font-size: 13px;
        white-space: nowrap;
    }
    .userall-content-tabs .tab-item .count {
        font-size: 11px;
    }

    /* 列表卡片移动端间距优化 */
    .subpage-blog-item {
        padding: 12px 4%;
        margin: 0 0 8px;
    }
    .subpage-blog-thumbnail {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 10px !important;
        position: relative;
    }
    .subpage-blog-thumbnail > a {
        display: block;
        width: 100%;
    }
    .subpage-blog-thumbnail img {
        width: 100% !important;
        height: auto !important;
        border-radius: 6px;
        display: block;
    }
    .subpage-blog-thumbnail mark {
        position: absolute;
        left: 10px;
        bottom: 10px;
        background: #C05763;
        padding: 3px 8px;
        font-size: 13px;
    }
    .subpage-blog-thumbnail mark a {
        color: #ECC6CC;
    }
    .subpage-blog-thumbnail .video-duration {
        position: absolute;
        right: 8px;
        bottom: 8px;
        background: rgba(0,0,0,0.75);
        color: #fff;
        font-size: 11px;
        padding: 3px 6px;
        border-radius: 3px;
        pointer-events: none;
        z-index: 2;
    }
    .subpage-blog-content {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .subpage-blog-content h3 {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 8px;
        padding: 0;
        overflow: visible;
    }
    .subpage-blog-content h3 a {
        width: 100%;
        height: auto !important;
        line-height: 1.5 !important;
        font-size: 17px !important;
        display: block;
    }
    .subpage-blog-content .blog-content {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        line-height: 1.6 !important;
        font-size: 14px !important;
        margin: 6px 0 !important;
        padding: 0 !important;
        color: var(--subTitleColor);
        overflow: hidden;
        display: block;
    }
    .subpage-blog-content .blog-infomation {
        width: 100%;
        height: auto !important;
        line-height: 1.5;
        font-size: 12px;
        margin-top: 8px !important;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 6px;
    }
    .subpage-blog-content .blog-tags {
        font-size: 12px;
        color: var(--lightColor);
        flex: 1;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 1.5;
    }
    .subpage-blog-content .blog-tag-item {
        display: inline-block;
        font-size: 12px;
        color: var(--blueColor);
        margin-right: 8px;
        text-decoration: none;
        line-height: 1.5;
    }
    .subpage-blog-content .blog-meta {
        flex-shrink: 0;
    }
    .subpage-blog-content .blog-meta .postedtime {
        font-size: 12px;
        color: var(--lightColor);
        white-space: nowrap;
    }
    .subpage-blog-content .blog-meta .postedtime i {
        margin-right: 3px;
    }
    .category-hot .blog-info,
    .blog-item .blog-info,
    .category-videos li .blog-info {
        margin: 8px 0 0;
    }
}

/* ==============================================
   作者名下拉菜单 + 关注按钮样式（全局生效）
   ============================================== */
.author-dropdown-wrap{
    position:relative !important;
    display:inline-block !important;
    overflow:visible !important;
    vertical-align: middle !important;
}
/* 确保下拉菜单hover时在最上层 */
.author-dropdown-wrap:hover{
    z-index: 100000 !important;
}
/* 确保下拉菜单不被父容器裁剪 - 补全所有可能裁剪的父容器 */
.category-videos,
.category-videos li,
.category-hot,
.category-blog-list,
.category-blog-list .blog-item,
.category-blog-list .blog-item-right,
.category-hot .blog-info,
.category-blog-list .blog-item .blog-info,
.category-videos li .blog-info,
.blog-info,
.blog-info-right,
.category-hot .blog-info-right,
.category-blog-list .blog-item .blog-info-right,
.category-blog-list .blog-item-right .blog-info-right,
.category-videos li .blog-info .blog-info-right,
ul.category-videos,
ul.category-blog-list{
    overflow:visible !important;
}
.author-dropdown-wrap .author-name{
    position:relative;
    z-index:2;
}
/* 修复普通文章列表用户名垂直对齐 */
.category-blog-list .blog-item-right .blog-info-right .username{
    vertical-align: middle !important;
}
/* 列表项hover时提升z-index，确保下拉菜单显示在其他卡片之上 */
.category-videos li,
.category-hot,
.category-blog-list .blog-item{
    position: relative;
}
.category-videos li:hover,
.category-hot:hover,
.category-blog-list .blog-item:hover{
    z-index: 100000 !important;
}
.author-dropdown-menu{
    position:absolute;
    left:0;
    top:15px;
    min-width:130px;
    background:#000;
    border-radius:3px;
    box-shadow:0 3px 10px rgba(0,0,0,0.3);
    padding:5px 0;
    z-index:99999 !important;
    opacity:0;
    visibility:hidden;
    transform:translateY(-5px);
    transition:all 0.15s ease;
}
.author-dropdown-menu::before{
    content:'';
    position:absolute;
    top:-5px;
    left:15px;
    width:0;
    height:0;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:5px solid #000;
}
.author-dropdown-wrap:hover .author-dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.author-dropdown-menu a{
    display:block !important;
    height:36px !important;
    line-height:20px !important;
    padding:8px 18px !important;
    color:#fff !important;
    font-size:14px !important;
    text-decoration:none !important;
    white-space:nowrap;
}
.author-dropdown-menu a:hover{
    background:var(--blueColor);
    color:#fff !important;
}
/* 下拉菜单分割线 */
.author-dropdown-menu .dropdown-divider{
    height:1px;
    background:rgba(255,255,255,0.15);
    margin:5px 0;
}
/* 下拉菜单内关注按钮样式 */
.author-dropdown-menu .dropdown-follow-btn{
    color: #fff !important;
    font-weight: bold;
}
.author-dropdown-menu .dropdown-follow-btn i{
    margin-right: 6px;
    font-style: normal;
}
.author-dropdown-menu .dropdown-follow-btn.is-following{
    color: #90ee90 !important;
}
.author-dropdown-menu .dropdown-follow-btn.is-following:hover{
    background: var(--redColor) !important;
    color: #fff !important;
}
.author-dropdown-menu .dropdown-follow-btn.is-loading{
    opacity: .65;
    pointer-events: none;
}
/* category-hot 行高20px，调整下拉菜单位置 */
.category-hot-username.author-dropdown-wrap .author-dropdown-menu{
    top:20px;
}
.list-follow-mini{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:20px !important;
    height:15px !important;
    line-height:15px !important;
    font-size:13px !important;
    font-weight:bold;
    background:var(--blueColor) !important;
    color:#fff !important;
    border-radius:2px;
    margin-left:5px;
    vertical-align:middle;
    text-decoration:none;
    cursor:pointer;
}
.list-follow-mini:hover{
    background:rgba(0,154,214,0.8) !important;
    color:#fff !important;
    text-decoration:none;
}
.list-follow-mini.is-following{
    background:var(--greenColor) !important;
    color:#fff !important;
}
.list-follow-mini.is-loading{
    opacity:.65;
    pointer-events:none;
}

/* 无限滚动加载 */
.infinite-scroll-sentinel{
    height:1px;
    width:100%;
}
.infinite-scroll-status{
    padding:20px 0;
    color:var(--subTitleColor);
    font-size:14px;
}
.infinite-scroll-loading .bi{
    display:inline-block;
    margin-right:6px;
    animation:spin 1s linear infinite;
}
.infinite-scroll-error{
    color:#C05763;
    cursor:pointer;
    text-decoration:underline;
}
.infinite-scroll-end{
    color:var(--subTitleColor);
    opacity:.7;
}
@keyframes spin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}

/* 加载更多按钮 */
.load-more-wrap{
    padding:20px 0;
    text-align:center;
}
.load-more-btn{
    background:var(--redColor);
    color:#fff;
    border:none;
    padding:10px 32px;
    border-radius:6px;
    font-size:14px;
    cursor:pointer;
    transition:opacity .2s, transform .1s;
}
.load-more-btn:hover:not(:disabled){
    opacity:.85;
}
.load-more-btn:active:not(:disabled){
    transform:scale(.97);
}
.load-more-btn:disabled{
    cursor:not-allowed;
    opacity:.6;
}

/* 隐藏原始分页组件 */
.infinite-scroll-enabled .rq-pagination-wrap{
    display:none !important;
}