/*引用图标库*/
@font-face {
  font-family: 'iconfont';  /* Project id 4660907 */
  src: url('//at.alicdn.com/t/c/font_4660907_b24o7c3oljc.woff2?t=1725492702654') format('woff2'),
       url('//at.alicdn.com/t/c/font_4660907_b24o7c3oljc.woff?t=1725492702654') format('woff'),
       url('//at.alicdn.com/t/c/font_4660907_b24o7c3oljc.ttf?t=1725492702654') format('truetype');
}


/* 更多推荐按钮的加号图标 */
/* 使用iconfont图标库，设置图标的样式和内容 */
.banner-button-text:before {
    font-family: iconfont;                   /* 设置字体家族为iconfont */
    content: '\e605';                        /* 设置图标的Unicode字符 */
    margin-right: 5px;                       /* 图标右侧的外边距为5px */
}

/* 更多推荐内文章的样式 */
/* 设置帖子组的样式，使其具有圆角，隐藏溢出内容，允许水平滚动 */
.recent-top-post-group {
    border-radius: 12px;                     /* 圆角半径为12px */
    overflow: hidden;                        /* 隐藏溢出的内容 */
    overflow-x: auto;                        /* 水平方向允许滚动 */
    width: 100%;                             /* 宽度为100% */
    margin-bottom: 0                         /* 底部外边距为0 */
}

/* 最近顶部帖子的布局设置 */
/* 设置顶部帖子的布局为灵活盒，水平排列，不换行，允许水平滚动 */
.recent-post-top {
    display: flex;                           /* 显示为弹性盒子 */
    flex-direction: row;                     /* 弹性盒子的方向为水平 */
    flex-wrap: nowrap;                       /* 不允许子项换行 */
    width: 100%;                             /* 宽度为100% */
    overflow-x: scroll                       /* 水平方向允许滚动 */
}


/* 隐藏滚动条 */
/* 在顶部帖子的滚动条中隐藏原生的滚动条 */
.recent-post-top::-webkit-scrollbar {
    display: none;                           /* 隐藏滚动条 */
}



/*文章框架 内部布局*/
span.recent-post-top-text {
    position: absolute;
    top: 0;
    left: -40px;
    display: flex;
    z-index: 1;
    background: #425AEF;
    color: #fff;
    padding: 2px 8px;
    font-size: 1.5rem !important;
    border-radius: 12px 0 12px 0;
    transition: .3s;
    cursor: pointer
}


/*文章 鼠标悬停 左上角弹出推荐图标*/
.recent-post-item:hover .recent-post-top-text {
    left: 0
}


/*文章图片高度*/
.recent-post-top .recent-post-item .post_cover a {
    height: 100px;
    overflow: hidden;
    display: flex
}

/*文章图片样式*/
.recent-post-top .recent-post-item .post_cover img {
    object-fit: cover;
        height: 100px;
    width: 100%;
    border-radius: 12px 12px 0 0
}



/*文章标题样式*/
.recent-post-top .recent-post-item .recent-post-info {
    padding: .3rem .5rem .3rem .5rem !important;
    transition: .3s
}



/* 限制文章标题的显示行数为2行，超出部分隐藏 */
.recent-post-top .recent-post-item .recent-post-info .article-title {
    -webkit-line-clamp: 2; /* 设置显示的行数为2行 */
    overflow: hidden; /* 超出部分隐藏 */
    display: -webkit-box; /* 使用弹性盒子布局 */
    -webkit-box-orient: vertical; /* 盒子方向为垂直 */
    line-height: 1.5; /* 行间距设置为1.5倍 */
    margin-top: 0.5rem; /* 上边距设置 */
    font-weight: 700; /* 字体粗细 */
    font-size: 1.5rem !important; /* 字体大小设置，使用!important确保优先级 */
    padding: 0 !important; /* 消除默认的内边距，确保内容不超出显示区域 */
}



/*右侧文章列表框架*/
.recent-post-group {
	/* 设置为灵活盒显示，主轴为水平方向 */
	display:flex;
	/* 主轴方向为行，从左到右 */
	flex-direction:row;
	/* 允许项目在侧轴上自动折行 */
	flex-wrap:wrap;
	/* 主轴之间的间距分布，项目在主轴上的间隔 */
	justify-content:space-between;
	/* 侧轴之间的间距分布，项目在侧轴上的间隔 */
	align-content:space-between;
	/* 项目之间的垂直水平间距，可根据需要启用或注释掉 */
	gap:1.0rem
}



/*3个按钮 鼠标悬停放大效果 缓慢动画*/
.categoryItem {
    overflow: hidden;
    transform: scale(1);
    transition: all 0.8s cubic-bezier(0.65, 0.15, 0.37, 1.19);
    height: 48%;
    border-radius: 12px
}


/*3个按钮背景颜色样式*/
a.categoryButton {
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.67);
    border-radius: 12px;
    display: inline-block;
    text-align: left;
    line-height: 4em;
    font-weight: 800;
    font-size: 16px;
    color: #FFF;
    transition: all .8s cubic-bezier(.39, .575, .565, 1);
    transform: scale(1);
    overflow: hidden
}


/*3个按钮背景图标样式 倾斜*/
a.categoryButton i {
    transform: scale(1.5) rotate(15deg)
}


/*3个按钮 文字下面横向样式*/
a.categoryButton:after {
    top: 45px;
    width: 1rem;
    left: 21px;
    height: 2px;
    background: #fff;
    content: "";
    border-radius: 1px;
    position: absolute
}


/*3个按钮 文字样式*/
.categoryButtonText {
    padding-left: 21px;
    font-weight: 400
}


/*3个按钮背景图标样式 放大 虚化*/
a.categoryButton i {
    font-size: 6rem;
    opacity: .3;
    position: absolute;
    right: 15px;
    top: 10%;
    transition: 0.5s;
    width: 100px;
    text-align: center;
    filter: blur(2px)
}



	/*右侧框架*/
    .topGroup {                                  /* 选择类名为topGroup的元素 */
        display: flex;                           /* 显示为弹性盒子 */
        flex-direction: row;                     /* 弹性盒子的方向为水平 */
        flex-wrap: wrap;                         /* 允许子项换行 */
        justify-content: flex-start;               /* 水平方向上对齐方式为左对齐 */
        height: calc(165px * 2 + 1.0rem);        /* 总高度为两篇文章高度加上间隔 */
        align-content: space-between;            /* 多行之间的间距均匀分布，首尾贴边 */
        width: calc(50%);                        /* 宽度为50% */
        position: relative;                      /* 相对定位 */
		margin-left: 1.0rem;                     /* 左侧外边距为0.5rem */
    }

	/* 更多推荐内文章的样式 */
	/* 设置每个文章的布局，尺寸，边距，背景，边框等属性 */
	.recent-post-top .recent-post-item {
	    display: flex;                           /* 显示为弹性盒子 */
	    flex-direction: column;                  /* 弹性盒子的方向为垂直 */
	    border-radius: 12px;                     /* 圆角半径为12px */
	    overflow: hidden;                        /* 隐藏溢出的内容 */
	    width: calc(33.333% - 0.75rem);          /* 每篇文章宽度减去间隔0.25 */
	    height: 165px;                           /* 高度为165px */
		border: 1px solid #F3F3F3;               /*边框*/
		box-shadow: 0 2px 4px 0 rgb(0 0 0 / 5%); /* 盒子阴影 */
	    transition: .3s;                         /* 过渡效果持续时间为0.3秒 */
	    position: relative;                      /* 相对定位 */
	}
	/* 第二排去除底部间隔 */
	.recent-post-top .recent-post-item:nth-child(2n) {
	    margin-bottom: 0;
	}
	
	
    /*左侧框架*/
    div#bannerGroup {                            /* 选择id为bannerGroup的div元素 */
        width: calc(50% - 1.0rem);                /* 宽度为50% */
        margin-right: 0.8rem;                      /* 右侧外边距为1rem */
        height: calc(165px * 2 + 1.0rem); /* 总高度为两篇文章高度加上间隔 */
        display: flex;                           /* 显示为弹性盒子 */
        flex-direction: column;                  /* 弹性盒子的方向为垂直 */
        justify-content: space-between           /* 垂直方向上项目间隔分布 */
    }


	/* 左侧 上部分图标框架 */
	div#banners {                                   /* 选择 id 为 banners 的 div 元素 */
	    display: flex;                              /* 显示为弹性盒子 */
	    width: 100%;                               /* 宽度为 100% */
	    height: calc(80% - 1.0rem);                /* 高度为 70% 减去底部边距 */
	    background: var(--header-bg);               /* 背景颜色使用 --header-bg 变量定义的颜色 */
	    margin-bottom: 1.0rem;                       /* 底部外边距为 1rem */
	    box-shadow: var(--heo-shadow-border);        /* 边框样式使用 --style-border-always 变量定义的边框 */
	    border-radius: 12px;                        /* 边框圆角半径为 12px */
	    overflow: hidden;                           /* 内容超出时隐藏多余部分 */
	    position: relative;                         /* 相对定位 */
	    flex-direction: column;                     /* 弹性盒子的方向为垂直 */
	    overflow: hidden;                           /* 再次声明隐藏溢出内容 */
	    transition: 0.3s;                           /* 过渡效果持续时间为 0.3 秒 */
	    clip-path: inset(0 0 0 0 round 12px);       /* 使用圆角矩形裁剪路径 */
	}
	:root {
	    --heo-shadow-border: 8px 8px 8px 8px #00000050;
	    --style-border-always: 1px solid var(--heo-card-border);
	}
	

    /*右侧图片框架*/
    .topGroup .todayCard {                      /* 选择.topGroup下的.todayCard类 */
        position: absolute;                      /* 绝对定位 */
        width: 100%;                             /* 宽度为100% */
        z-index: 10;                              /* 确保在层级中位于其他元素上方 */
        height: calc(165px * 2 + 1.0rem);        /* 总高度为两篇文章高度加上间隔 */
        border-radius: 12px;                     /* 圆角半径为12px */
        overflow: hidden;                        /* 隐藏溢出内容 */
        transition: 0.3s;                        /* 过渡效果持续时间为0.3秒 */
        display: flex;                           /* 显示为弹性盒子 */
        cursor: pointer;                         /* 鼠标指针变为手型 */
        pointer-events: all                      /* 允许所有指针事件 */
    }



    /* 定义横幅标题的样式，使其在父容器中垂直居中对齐 */
    .banners-title {
        /* 设置标题距离父容器顶部的距离 */
        top: 2rem;
        /* 设置标题距离父容器左侧的距离 */
        left: 1.7rem;
        /* 将标题定位在父容器中的绝对位置 */
        position: absolute;
        /* 使用弹性盒子布局标题内容 */
        display: flex;
        /* 设置弹性盒子的主轴为垂直方向 */
        flex-direction: column;
    }
    
    /* 定义横幅的大标题样式 */
    .banners-title-big {
        /* 设置大标题的字体大小 */
        font-size: 36px;
        /* 设置大标题的行高，实现文本垂直居中 */
        line-height: 1;
        /* 设置大标题的字体粗细 */
        font-weight: 700;
        /* 设置大标题与小标题之间的间距 */
        margin-bottom: 8px;
    }

    /* 定义横幅的小标题样式 */
    .banners-title-small {
        /* 设置小标题的字体大小 */
        font-size: 16px;
        /* 设置小标题的行高 */
        line-height: 1;
        /* 设置小标题与标题容器底部的间距 */
        margin-top: 8px;
        margin-left: 0px; /* 添加左侧外边距 */
        margin-bottom: 0.5rem;
    }



	/*左侧 鼠标悬浮 弹窗*/
    #banner-hover {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        padding-left: 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        opacity: 0;
        transition: cubic-bezier(0.71, 0.15, 0.16, 1.15) 0.6s
    }


    /*随便逛逛 文字样式*/
    .bannerText {
        color: #fff;
        font-size: 4rem;
        line-height: 4rem;
        font-weight: bold;
        margin-top: 20px
    }

    /*随便逛逛 右边箭头图标*/
    .bannerText::after{
        content: '\e603';
        font-family: iconfont;
        margin-left: 5px;
    }


	/*左侧 鼠标悬停 弹窗*/
    #banners:hover #banner-hover {              /* 当鼠标悬停在#banners上时，选择#banner-hover元素 */
        opacity: 1;                              /* 设置透明度为1 */
        padding-left: 2rem;                      /* 左侧内边距为2rem */
        background: #4259efc9;                   /* 背景颜色 */
        backdrop-filter: blur(15px) !important;  /* 背景模糊效果 */
        -webkit-backdrop-filter: blur(15px);     /* Webkit浏览器的背景模糊效果 */
        -webkit-backface-visibility: hidden;     /* 隐藏背面 */
        -webkit-transform-style: preserve-3d;    /* 保留3D变换 */
        transition: 0.3s;                        /* 过渡效果持续时间为0.3秒 */
        background-size: 200%;                   /* 背景图片大小 */
    }

	/*纸飞机 样式*/
    #banners #banner-hover i {                  /* 选择#banners下的#banner-hover中的i元素 */
        font-size: 80px;                         /* 字体大小为80px */
        opacity: 0.4                             /* 透明度为0.4 */
    }
    
	/*右侧 整体标题 布局*/
    .topGroup .todayCard .todayCard-info {      /* 选择.todayCard下的.todayCard-info类 */
        position: absolute;                      /* 绝对定位 */
        bottom: 2rem;                            /* 底部位置为2rem */
        left: 2rem;                              /* 左侧位置为2rem */
        z-index: 2;                              /* Z轴顺序为2 */
        max-width: 60%;                          /* 最大宽度为60% */
        transition: 0.3s                         /* 过渡效果持续时间为0.3秒 */
    }
    
	/*右侧 大标题 样式*/
    .topGroup .todayCard-info .todayCard-title-1 { 
        font-size: 28px;                         /* 字体大小为28px */
        font-weight: bold;                       /* 字体加粗 */
        line-height: 36px;                       /* 行高为36px */
        color: rgba(50, 51, 53, 0.8)             /* 文字颜色 */
    }


	/*右侧 小标题 样式*/
    .topGroup .todayCard-info .todayCard-title-2 { 
        font-size: 16px;                         /* 字体大小为16px */
        line-height: 36px;                       /* 行高为36px */
        color: rgba(50, 51, 53, 0.8)             /* 文字颜色 */
    }
    
     /*更多推荐 按钮位置*/
    .topGroup .banner-button-group {            /* 选择.topGroup下的.banner-button-group类 */
        position: absolute;                      /* 绝对定位 */
        right: 2rem;                             /* 右侧位置为2rem */
        bottom: 2rem;                            /* 底部位置为2rem */
        display: flex;                           /* 显示为弹性盒子 */
        transition: 0.3s                         /* 过渡效果持续时间为0.3秒 */
    }
    
     /*更多推荐 按钮样式*/
    .topGroup .banner-button {                  /* 选择.topGroup下的.banner-button类 */
        border-radius: 20px;                     /* 圆角半径为20px */
        display: flex;                           /* 显示为弹性盒子 */
        align-items: center;                     /* 垂直居中对齐 */
        z-index: 1;                              /* Z轴顺序为1 */
        transition: 0.3s;                        /* 过渡效果持续时间为0.3秒 */
        cursor: pointer;                         /* 鼠标指针变为手型 */
        backdrop-filter: saturate(180%) blur(20px) !important; /* 背景模糊效果 */
        -webkit-backdrop-filter: blur(20px);     /* Webkit浏览器的背景模糊效果 */
        transform: translateZ(0);                /* Z轴上的位移 */
        height: 40px;                            /* 高度为40px */
        width: 118px;                            /* 宽度为118px */
        justify-content: center                  /* 水平居中对齐 */
    }

	/*右侧大图样式*/
    .topGroup .todayCard .todayCard-cover {     /* 选择.todayCard下的.todayCard-cover类 */
        position: absolute;                      /* 绝对定位 */
        min-width: 100%;                         /* 最小宽度为100% */
        min-height: 100%;                        /* 最小高度为100% */
        top: 0;                                  /* 顶部位置为0 */
        left: 0;                                 /* 左侧位置为0 */
        background-size: cover;                  /* 背景图片覆盖 */
        z-index: -1;                             /* Z轴顺序为-1 */
        transition: 0.3s                         /* 过渡效果持续时间为0.3秒 */
    }


/* 定义标签组图标的样式 */
.tags-group-icon {
    /* 设置标签组图标的宽度 */
    width: 100px;
    /* 设置标签组图标的高度 */
    height: 100px;
    /* 设置标签组图标的圆角半径，以实现圆角效果 */
    border-radius: 30px
}


/*左侧滚动图标 倾斜角度*/
.tags-group-all {
    display: flex;
    transform: rotate(-30deg)
}

/*左侧 滚动图标 整体布局*/
.tags-group-wrapper {
    margin-top: 7rem; /* 设置上边距 */
    display: flex; /* 使用弹性盒子布局 */
    flex-wrap: nowrap; /* 不允许项目换行 */
    animation: rowup 30s linear infinite /* 应用名为rowup的动画，持续30秒，线性速度，无限循环 */
}

/* 左侧 滚动图标 2个为一组 交错样式 */
.tags-group-icon-pair .tags-group-icon:nth-child(even) {
    /* 增加顶部边距，以调整元素的垂直位置 */
    margin-top: 1rem;
    /* 水平向左移动，创造动画效果 */
    transform: translate(-60px)
}

/* 设置图标的的左边距，以调整元素的水平位置 */
.tags-group-icon-pair {
    margin-left: 1rem
}

/* 滚动图标内部的图片的显示方式，对齐方式和文本样式 */
.tags-group-icon {
    /* 使用flex布局来对齐图标内的内容 */
    display: flex;
    /* 水平和垂直居中对齐 */
    align-items: center;
    justify-content: center;
    /* 设置文字颜色为白色 */
    color: #fff;
    /* 设置字体大小 */
    font-size: 66px;
    /* 设置字体加粗 */
    font-weight: 700
}

/* 滚动图标内部的图片的显示大小 */
.tags-group-icon img {
    width: 65%
}


/*三个按钮组件*/
.recent-post-top .categoryGroup {            /* 选择.recent-post-top下的.categoryGroup类 */
    display: flex;                           /* 设置显示为弹性盒子 */
    flex-direction: column;                  /* 弹性盒子的方向为垂直 */
    justify-content: space-between;          /* 垂直方向上项目间隔分布 */
    min-width: 200px;                        /* 最小宽度设置为200px */
    padding-bottom: 0px                     /* 底部内边距为10px */
}

/*三个按钮布局*/
.categoryItem {
	width: calc(100% / 3 - .33rem);
	height: 100%;
	margin-right: 1.0rem   /*右侧边距*/
}

/*三个按钮布局 最后一个右侧边距为0*/
.categoryItem:last-child {
	margin-right: 0
}

/*3个按钮布局 + 高度显示*/
.recent-post-top .categoryGroup {
	flex-direction: row;
	height: 25%
}

/*3个按钮 鼠标悬浮放大*/
.categoryItem:hover {
	width: 50%
}

/* 3个按钮 颜色*/
a.categoryButton.wniui_one {
    background: linear-gradient(to right, #358bff, #15c6ff);
    background-size: 200%
}

a.categoryButton.wniui_two {
    background: linear-gradient(to right, #f65, #ffbf37);
    background-size: 200%
}

a.categoryButton.wniui_three {
    background: linear-gradient(to right, #18e7ae, #1eebeb);
    background-size: 200%
}


/*左侧滚动图标 滚动动画*/
@keyframes rowup {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

/*3个按钮 引用图标*/
.wniui_one>.icon-star-smile-fill:after {
    font-family: iconfont;
    content: '\e628'
}

.wniui_two>.icon-fire-fill:after {
    font-family: iconfont;
    content: '\e699'
}

.wniui_three>.icon-book-mark-fill:after {
    font-family: iconfont;
    content: '\e72c'
}

/*3个按钮 鼠标悬浮  内部图标缩小动画*/
.categoryItem:hover i {
    opacity: .8;
    transition: .8s;
    transition-delay: .15s;
    transform: scale(1.03) rotate(0);
    font-size: 4rem;
    filter: blur(0)
}

/*更多推荐按钮 鼠标悬停变色*/
.banner-button-group:hover {
    background-color: #1856fb;
    border-radius: 50%
}

/*纸飞机图标*/
.icon-right::after {
    content: '\e6c9';
    font-family: iconfont;
    color:rgba(255,255,255);
}

.todayCard-info>h5 {
    color: #fff
}