/**
 * 模板样式表
 */

/* 全局样式
---------------------------------------------------*/
/* 禁止页面溢出出现滚动条 */
:root {
	overflow-x: hidden
}
/* 一些变量 */
* {
	--marRadius: 8px;          /* 卡片圆角 */
	--conBgcolor: #ffffff;   /* 导航、卡片、内容的背景颜色 */
	--bodyBground: #f5f5f6;  /* 页面背景颜色 */
	--fontColor: #5a5c69;    /* 普通文本的颜色 */
	--aColor:  #333333;      /* a 标签的颜色 */
	--aHoverColor:  #f6607d; /* a 标签 hover 状态的颜色 */
	--lightColor: #929292      /* 比较浅一点的文本颜色 */
}
/* 定义所有元素的 width =（border+padding），方便后续计算 */
* { 
	box-sizing: border-box
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	font-weight: 400
}

/* 无样式列表  */
.unstyle-li {
	padding-left: 0px;
	list-style: none;
	/*margin-block: 8px;*/
	font-size: medium;
	    margin-top: 0px;
}
/* 卡片属性。页面以卡片形式组成，这里直接配置，让整个页面的卡片有统一的内边距。 */
.card-padding {
	padding: 1.25rem
}

/* 布局
   行（row）上选择flex布局，并设置允许换行（wrap）
   列（col）则需要通过根据大小屏分别配置，这是网页最重要的地方，是整个网页的骨架
---------------------------------------------------*/
.row {
	display: flex;
	flex-wrap: wrap;
}
/* 大屏下的列 */
@media (min-width:768px)  {
	.column-big {
		padding-right: 10px;
		flex: 0 0 69.666667%;
		max-width: 69.666667%
	}
	/* 工具栏列 */
	.column-small {
		font-size: medium;
		padding-left: 8px;
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 30.333333%;
		max-width: 30.333333%
	}
	/* 文章发布时间和文章阅读评论数这两列的配置 */
	.info-row {
		padding: 1rem !important
	}
	.log-info {
		flex: 0 0 66.666667%;
		max-width: 66.666667%
	}
	.log-count {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
		text-align: right
	}
}
/* 小屏下的列 */
@media (max-width:767px) {

	.column-big {
		padding-right: 8px;
		padding-left: 8px;
		width:100%
	}
	/* 工具栏列 */
	.column-small {
		padding-right: 8px;
		padding-left: 8px;
		width:100%
	}
	/* 文章发布时间和文章阅读评论数两列的配置 */
	.log-info {
		flex: 0 0 60%;
		max-width: 60%
	}
	.log-count {
		white-space: nowrap;
		flex: 0 0 40%;
		max-width: 40%;
		text-align: right
	}
}

/* 最外层整体容器的响应式配置，即 container 配置
---------------------------------------------------*/
.container{
	width: 100%;
	align-items: center;/* 网页容器在整个网页中垂直居中 */
	margin-right: auto;
	margin-left: auto
}
/* container 在不同屏幕下的配置 */
@media (min-width:576px) {.container{max-width: 540px}}
@media (min-width:768px) {.container{max-width: 720px}}
@media (min-width:992px) {.container {max-width: 960px}}
@media (min-width:1201px) {.container {max-width: 1140px}}
/* 设置 container 在小型屏幕上的内外边距 ，使其更符合小型屏幕的观感体验 */
@media (min-width:768px)  {
	.container{
		padding-right: 15px;
		padding-left: 15px;
		margin-right: auto;
		margin-left: auto
	}
}

/* 在绝对定位情况下，主边栏的全宽(可供一些位于主边栏的难以计算宽度的对象使用)
---------------------------------------------------*/
@media (min-width:1px) {.rea-width{width: calc(100% - 18px)}}
@media (min-width:576px) {.rea-width{width: 524px}}
@media (min-width:768px) {.rea-width{width: 450px}}
@media (min-width:992px) {.rea-width{width: 609px}}
@media (min-width:1201px) {.rea-width{width: 730px}}

/* 博客页面底部（footer）没有空隙（即防止 footer 在页面中间位置出现的诡异现象）
---------------------------------------------------*/
body {
	display: flex;
	flex-direction: column;
	height: 100vh;
}
.blog-header {
	flex: 0 0 auto;
}
.blog-container {
	flex: 1 0 auto;
}
.blog-footer {
	flex: 0 0 auto;
}

/* 博客头部属性的配置
---------------------------------------------------*/
.blog-header {
	margin-bottom: 2.3rem;
	background-color: var(--conBgcolor);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) /* 阴影 */
}
.blog-header-c {
	height: 71.63px;
	display: flex;
	justify-content: space-between /* 导航栏为主轴方向两端对齐，即大标题与导航两部分，一个向左靠齐，一个向右靠齐 */
}
/* 博客标题和副标题 */
.blog-header-title {
	font-size: 26px;
	z-index: 1
}
.blog-header-subtitle {
	font-size: small;
	letter-spacing: 0.2rem;
	position: absolute;
	padding-top: 48px;
	z-index: 0
}

/* 导航链接的上下内边距（padding-block）要大，可使光标离开字符后一段距离依然能唤起子导航标签
 * 另外li标签的列表项标记为空 （list-style: none） */
.nav-link {
	padding: 1rem 0.5rem 1rem 0.5rem
}
.list-menu {
	list-style: none
}

/* 导航列表的响应式配置
   在不同大小的屏幕上，导航菜单会有不同的样式。
   样式根据屏幕大小分为两种：767px以上，767px以下
---------------------------------------------------*/
/* 大屏幕 */
@media (min-width:768px)  {
	.nav-list {
		display: flex;
		padding-block: 4.5px;
		text-align: center
	}
	/* 大屏幕列表样式 */
	.list-menu .list-menu{
		border-bottom: 1px solid #f1f1f1;
	}

	.list-menu:last-child { 
		border-bottom: unset
	}
	.blog-header-toggle {
		display: none
	}
}
/* 小屏幕 */
@media (max-width:767px)  {
	.header {
		padding: 0.6rem 1rem;
		margin-bottom: 30px!important;
		height:80px
	}
	.blog-header-title {
		position: absolute;
		left: 17px;
		top: 18px
	}
	.blog-header-subtitle {
		padding-top: 60px;
		left: 17px;
		top: -9px
	}
	/* 仅在小屏幕上显示切换菜单边框和切换菜单 */
	.blog-header-toggle {
		cursor: pointer;
		position: absolute;
		top: 25px;
		right: 25px;
	}
	.blogtoggle-icon {
		display: inline-block;
		width: 28px;
		height: 19px;
		margin-top: -3px;
		vertical-align: middle;
	}
	/* 小屏幕的导航变成下拉框 */
	.blog-header-nav {
		display: none;
		z-index: 999;
		position: absolute;
		width: calc(100% - 4px);
		background: white;
		top: 72px;
		left: 0
	}
	/* 小屏幕上头部的列表样式 */
	.nav-list {
		margin-top: 0px;
		margin-bottom: 10px
	}
	.list-menu {
		line-height: 28px;
		width: 90%
	}
}

/* 大屏幕下的下拉框样式，这里设置的透明度为0（opacity: 0.0;）。但小屏状态下
 * 没有隐藏，所以下面会在小屏部分，即767px及以下的部分对这个属性覆盖。 */
.dropdown-menus {
	background: white;
	opacity: 0.0;
	z-index: 4;
	list-style: none;
	margin-left: -26px;
	position: absolute;
	padding-left: 0px;
	border: 1px solid #f1f1f1;
	border-radius: 4px;
	top: -3000px;
	margin-bottom: -34px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1)
}
.dropdown-menus .list-menu{
	padding: 6px
}

/* 顶部菜单栏的小屏属性，“小屏”定义在767px及以下。当然这个也包含小屏的下拉框样式。 */
@media all and (max-width: 767px) {
	.nav-list {
		text-align: left !important;
		padding-left: 10%;
		letter-spacing: 3px;
		line-height: 17px
	}
	.dropdown-menus {
		opacity: 1;
		margin-left: 0px;
		position: unset;
		padding-left: 30px;
		border: 0px solid #f1f1f1;
		width: auto;
		top: 0px;
		margin-bottom: 0px;
		box-shadow: 0 0 0 0 white;
		font-size: smaller
	}
}

/* 下拉框的样式 */
.list-menu:hover .dropdown-menus {
	opacity: 0.95;
	top: 56px;
	transition: opacity 0.2s
}

/* 列出文章（或文章条目）页
---------------------------------------------------*/
 /* 卡片上的文章发布时间这部分的属性 */
.info-row {
	padding: 1rem;
	padding-bottom: 8px !important
}

/* 文章阅读页
---------------------------------------------------*/
 /* 文章作者、时间等信息下hr水平线的属性，设置margin-bottom为四级 */
.bottom-5{
	margin-bottom: 1.5rem !important
}
/* 标签的属性，设置margin-top为三级 */
.top-5, .mtop-5 {
	margin-top: 3rem !important
}
/* 验证码模态窗的配置 */
.modal-dialog {
	display:none;
	background-color: white; 
	border-radius: var(--marRadius);
	border: 1px solid #dedede;
	position: fixed;
	z-index: 100;
	/* 定位 */
	top: 35%;
	left: 50%;
	transform: translate3d(-50%,-50%,0)
}
/* 验证码模态窗的按钮 */
.btn {
	cursor: pointer;
	color: #848798;
	background-color: white;
	padding: 8px 11px;
	font-weight: 800;
	border-radius: var(--marRadius);
	margin-block: 12px;
	margin-inline: 17.5px;
	border: 1px solid #dedede
}
.btn:hover {
	color: #50525e
} 
.modal-header {
	text-align: center;
	border-bottom: 0px;
	width: 250px;
	padding: 20px
}
.modal-content img {
    width: 100%;
}
.modal-content input[name="imgcode"] {
padding: 6px 8px !important;
    margin-right: 20px;
    margin-block: 30px;
    border: 1px solid #dedede;
    width: 80%;
    text-align: center;
    margin: 25px 0 0 25px;
    border-radius: 4px;
}
.modal-content .modal-footer {
	padding: 10px;
	text-align: center
}
/* 弹出验证码模态窗后，屏幕背景要锁住 */
.lock-screen {
	display:none;
	z-index: 99;
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: #2d2d2b;
	top: 0;
	left: 0;
	opacity: 0.5
}
/* 验证码的点击样式 */
#captcha {
	cursor: pointer
}

/* 禁止滚动 */
.scroll-fix{overflow:hidden}

/* 阴影
   文章列出页的文章摘要卡片和边栏组件卡片的阴影和鼠标浮动后的阴影
---------------------------------------------------*/
.shadow-theme {
	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.02);
	border-radius: var(--marRadius);
	background-color: var(--conBgcolor);
	transition: box-shadow 0.4s
}

/* 日历样式
---------------------------------------------------*/
/* 日历的加载样式，防止翻页造成太大的视觉变化 */
.cal_loading {
	margin-bottom: 243px
}

#calendar {
	color: #212529
}
#calendar a {
	color: #000;
	font-weight: bolder
}
.calendartop {
	letter-spacing: 3px;
	width: 100%;
	text-align: center;
	color: #000
}
.calendartop a {
	font-weight: 100 !important
}
.calendar {
	margin-bottom: -8px;
	width: 100%
}
.calendar td {
	text-align: center;
	padding: 1px 10px;
	line-height: 1.6
}
.calendar td a:link {
	color: #886353;
	text-decoration: none
}
.calendar td a:hover {
	color: #886353;
	text-decoration: none
}
.calendar tr {
	height: 40px
}

.day2 a:after
 {
      content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background:#6f88ff78;
    border-radius: 50%;
    border: 3px solid #fff;
    margin-top: -4px;
    margin-left: -4px;

}

.day {
    background: #6f88ff!important;    color: #fff;
}
.day a{color: #fff!important;}
.sun {
	color: #333
}
.week {
	color: #333
}

/* 侧边栏卡片样式
---------------------------------------------------*/


/* 分页按钮样式
---------------------------------------------------*/
.pagination {
	font-size: 14px;
	padding: 10px;
	text-align: center
}
.pagination span {
	padding: 5.5px 6px 3px 6px;
	margin: 0 5px;
	border-radius: 8px;
	line-height: 3;
	color: #858796
}
.pagination a {
	color: #c0bcbc;
	padding: 5.5px 10px 6px 10px;
	background: white;
	margin: 0 5px;
	line-height: 3;
	border-radius: 8px
}
.pagination a:hover {
	text-decoration: none
}
.comment-list #pagenavi {
text-align: center;
    font-size: 14px;
    margin-top: -0.75rem;
    margin-bottom: 0.5rem;
}
.comment-list #pagenavi span {
	padding: 5px 15px 5px 15px;
cursor: not-allowed;
    line-height: 3;
    border-radius: 8px;

    background: #ddd;
    color: #fff;
    text-align: center;
}
.comment-list #pagenavi a {
margin: 0 5px;
    line-height: 3;
    padding: 5px 15px 5px 15px;
    background: #ffff00;
    padding: 5px 15px 5px 15px;

    line-height: 3;
    border-radius: 8px;

    background: #6f88ff;
    color: #fff;
}


/*文章条目中的部分样式
---------------------------------------------------*/
/* 文章条目的标题 */
.card-title {
	margin-bottom: 30px
}


/* 文章内容页样式
---------------------------------------------------*/
.log-con {
	background-color: var(--conBgcolor);
	border-radius: var(--marRadius);
	max-width: 960px;
	padding: 30px;
	font-size: 16px;
	height: fit-content;
	letter-spacing: 0.5px
}
.log-con p {
	margin-top: 0;
	margin-bottom: 16px
}
.log-con .date {
	margin-bottom: 0px
}
.log-con .markdown {
	margin-inline: 5px;
}
.loglist-content h1 {
	font-size: medium;
	font-family: inherit;
	letter-spacing: 0.5px;
	margin: 0
}
.loglist-content h2 {
	font-size: medium;
	font-family: inherit;
	letter-spacing: 0.5px;
	margin: 0
}
.loglist-content h3 {
	font-size: medium;
	font-family: inherit;
	letter-spacing: 0.5px;
	margin: 0
}
.loglist-content h4 {
	font-size: medium;
	font-family: inherit;
	letter-spacing: 0.5px;
	margin: 0
}
.loglist-content h5 {
	font-size: medium;
	font-family: inherit;
	letter-spacing: 0.5px;
	margin: 0
}
.loglist-content p {
	font-size: medium;
	font-family: inherit;
	margin: 0
}
/* 需要改名，侧边栏链接卡片的友情链接属性 */
.no-margin-bottom {
	font-size: medium;
	padding-left: 10px
}
/* 摘要内容部分 */
.loglist-body {
	margin-bottom: -22px;
	font-size: small
}
.loglist-body p {
	margin: 0 -6px 0 0
}
/* 文章标题和标签等 */
.loglist-title {
	font-size: x-large
}
.loglist-tag {
	margin-top: 30px;
	line-height: 2;
	color: #000000
}
.loglist-tag a {
	color: #929292
}
.loglist-cover {
	width: 100%;
	height: 205px;
	border-radius: var(--marRadius) 10px 0 0
}
.loglist-cover img {
	position: absolute;
	opacity: 0.8;
	border-radius: var(--marRadius) 10px 0 0;
	transition: all 0.4s;
	clip: rect(50px,730px,250px,0px);
	margin-top: -50px
}
.loglist-cover img:hover {
	opacity: 0.7;
	transform: scale(1.01);
	clip: rect(50px,730px,250px,0px)
}
/* 文章分类 */
.loglist-sort {
	user-select: none;
	display: inline-block;
	position: relative;
	margin-left: 10px;
	bottom: 2px;
	padding: 6px;
	padding-bottom: 3px;
	border: 1px solid #e8e8e8
}
@media (max-width:415px) {.loglist-cover{ height: 160px;overflow: hidden}.loglist-cover img {position:unset;	width: 730px;}}
@media (max-width:375px) {.loglist-cover{ height: 140px;overflow: hidden}.loglist-cover img {position:unset;	width: 730px;}}
/* 条目的其他内容 */
.loglist-content {
	font-size: medium;
	margin-left: 1px;
	margin-bottom: 5px;
	margin-right: 3px;
	margin-top: 30px
}
.log-info {
	font-size: small;
	letter-spacing: 0.5px;
}
.log-info a {
	color: var(--lightColor)
}
.log-count {
	font-size: small
}
.log-count a {
	color: var(--fontColor)
}
/* 侧边栏组件的一些样式 */
.bloggerinfo {
	margin-bottom: -10px;
	text-align: center
}
.bloggerinfo-img {
	width: 100px;
	height: 100px;
	border: 0px solid #c2a9a9;
	border-radius: 50%
}
.comm-lates-name {
	font-weight: bolder
}
.bloginfo-name {
	font-size: x-large;
	margin-top: 15px;
	margin-bottom: 0px
}
.bloginfo-descript {
	margin-top: 20px;
	margin-bottom: 15px;
	color: #929292
}
/* 搜索栏 */
.search {
	width: 80%;
	box-shadow: none;
	float: left;
	font-size: 1rem;
	padding: 0.4rem 0.75rem;
	line-height: 1.5;
	color: #495057;
	border: 1px solid #e8e8e8;
	/* 兼容 Safari ，Safari默认input会有1px的上下外边距 */
	margin-block: 0;
	border-radius: 0.25rem
}
.search-submit{background-color: #6f88ff!important;
    line-height: 0;
    color: #FFFFFF;
    margin-left: -25px;
    height: 38px;

    border: 0;
    border-radius: 0 3px 3px 0;
    padding: 0;width: 20%;
}
/* 文章阅读和文章条目的标签 */
.tags {
	border: 1px solid #e8e8e8;
	padding: 1px 6px;
	border-radius: 4px;
	white-space: nowrap
}
/* 侧边栏组件中的标签 */
.tag-container {
	margin-block: 0;
	text-overflow: ellipsis
}
.tags-side {
	padding: 2px 6px;
	border-radius: 4px;
	white-space: nowrap
}
/* 侧边栏组件中的最新文章样式 */
.blog-lates,.blog-hot {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}
/* 返回上页图标 */
.back-top {
	font-size: 20px;
	text-align: center;
	height: 34px;
	width: 34px;
	margin-left: -90px;
	position: absolute;
	top: 151px;
	border: 1px solid #dcdcdd;
	color: #dcdcdd;
	border-radius: 50%;
	cursor: pointer
}
.back-top:hover {
	border: 1px solid #bbbbbb;
	color: #bbbbbb
}
/* 文章条目中的分割线 */
.list-line {
	border: 0;
	margin-top: 12px;
	margin-bottom: -7px;
	border-top: 2px solid rgb(245, 245, 246)
}

.log-classify-c {
	margin-left: -27px;
	list-style: none;
	font-size: medium
}

/* 各处的日期文字样式 */
.date {
	margin: 0;
	text-align: center;
	color: #7f7f7f
}
.date a {
	color: #7f7f7f
}
.log-con .date {
	font-size: small
}
.log-title {
	text-align: center;
	margin-bottom: 30px;
	font-size: 1.75rem
}
.page-title {
	margin-bottom: 30px;
	font-size: 1.75rem
}
/* 相邻文章按钮的样式 */
.neighbor-log {
	overflow: hidden;
	margin-block: 20px
}
.prev-log {
	margin: 3px 0px;
	float: left;
	padding: 6px 6px 4px 6px;
	font-size: medium;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 50rem
}
.next-log {
	margin: 3px 0px;
	float: right;
	padding: 6px 6px 4px 6px;
	font-size: medium;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 50rem
}



/* 网页足部
---------------------------------------------------*/
.footinfo {
	line-height: 2;
	padding-block: 20px;
	text-align: center !important;
}

/* 图片放大
---------------------------------------------------*/
img[data-action="zoom"] {
	cursor: zoom-in
  }
.zoom-img,
.zoom-img-wrap {
	position: relative;
	z-index: 666;
	-webkit-transition: all 300ms;
		 -o-transition: all 300ms;
			transition: all 300ms;
  }
img.zoom-img {
	cursor: zoom-out
  }
.zoom-overlay {
	z-index: 420;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	opacity: 0;
	-webkit-transition:	  opacity 300ms;
		 -o-transition:	  opacity 300ms;
			transition:	  opacity 300ms;
  }
.zoom-overlay-open .zoom-overlay {
	opacity: 1;
  }
.zoom-overlay-open,
.zoom-overlay-transitioning {
	cursor: default;
  }
.cover-unclip {
	/* 放大后的图片无裁剪、无圆角、无透明度 */
	clip: unset!important;
	border-radius: unset!important;
	opacity: 1!important
}
/* toc
---------------------------------------------------*/
.toc-con {
	padding: 30px;
	padding-right: 50px;
	left: 150px;
	width: 300px;
	position: absolute;
	top: 200px
}
.toc-con li{
	font-size: 14px;
	line-height: 1.8rem;
	cursor: pointer;
	list-style: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}
.toc-con div {
	scrollbar-color: #0000002b #fff0
}
.toc-con div::-webkit-scrollbar {
	width: 5px;
	background-color: rgb(0 0 0 / 0%)
}
.toc-con div::-webkit-scrollbar-thumb {
	background-color: rgb(0 0 0 / 10%)
}
/* page 页面 */
#page{
	margin-bottom: 24px
}

/* 摘要的溢出（overflow）操作 
---------------------------------------------------*/
.subtitle-overflow {
	max-width: 700px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

/* 「归档」的样式 
---------------------------------------------------*/
.archive {
	font-size: .8125rem;
    padding: 4px;
    text-align: center;
    color: #203656;
    background: #f2f2f5;
}

/* 文章列出页 编辑 链接的样式 
---------------------------------------------------*/
.loglist-article-edit a {
	color: #929292
}

/* 一些适应各屏幕尺寸显示效果的样式
---------------------------------------------------*/
@media all and (max-width: 1200px) and (min-width: 992px) {

	/* mh 是方便在中、小屏幕隐藏元素的 class */
	.mh {
		display: none
	}
	.bloggerinfo-img {
		width: 70px;
		height: 70px
	}
	.bloginfo-name {
		margin-top: 32px
	}
	/* 中型屏状态下的日历 */
	#calendar {
		margin-left: -8px;
	}
}

@media all and (max-width: 991px) {
	/* 头部无容器的限宽 */
	.blog-header-c {
		max-width: unset !important
	} 
	.blog-header-c {
		height: 74px
	}
	body {
		width: 100%;
		margin: -2px;
		padding-left: 2px
	}
	/* mh 是方便在中、小屏幕隐藏元素的 class */
	.mh {
		display: none
	}
	.loglist-title {
		font-size: 18px;
		font-weight: 500
	}
	.bloggerinfo {
		margin-bottom: 0px
	}
	.mb-5, .mtop-5 {
		margin-bottom: 2rem !important
	}
	.log-title {
		text-align: left
	}
	.log-con {
		padding: 30px 16px
	}
	.commentform .comment-info {
		width: 100%
	}

	/* 展开菜单后，博客头部的下边距变大 */
	.bottom-change {
		margin-bottom: 13px
	}

	/* 为文章列出页卡片在小屏幕的观感体验优化 */
	.card-title {
		margin-bottom: 10px
	}
	.loglist-content {
		margin-top: 10px
	}
	.loglist-tag {
		margin-top: 10px
	}
	/* 博客头部的下边距 */
	.blog-header {
		margin-bottom: 1.6rem
	}

	/* 侧边栏日历 */
	#calendar {
		margin-left: 0
	}
}
/* 在平板一些处于中间尺寸的不常见设备所做的缩放和其他一些调整样式 */
@media all and (max-width: 991px) and (min-width: 768px) {

	#calendar {
		transform: scale(0.8);
		margin-left: -14px;
		margin-top: -14px
	}
	.unstyle-li form {
		transform: scale(0.7);
		width: 255px;
		margin-left: -47px
	}
	/* 中屏幕下缩短边栏评论日期显示 */
	.logcom-latest-time {
		max-width: 60px
	}

}
/* 对一些极小尺寸屏幕所做的比较妥协的缩放等调整 */
@media all and (max-width: 349px) {

	#calendar {
		transform: scale(0.7);
		margin-left: -46px;
		margin-top: -14px
	}
	.unstyle-li form {
		transform: scale(0.7);
		width: 255px;
		margin-left: -47px
	}
	.bloginfo-name {
		font-size: small
	}
}
/* 普通移动设备的显示样式 */
@media all and (max-width: 577px) {
	.dropdown-menus .list-menu{
		padding-bottom : 0px
	}
	.nav-link {
		padding: 8px;
	}
	/* 卡片容器内边距略小一点 */
	.card-padding {
		padding: 14px;
	}
	.side-bar .widget {
		margin-bottom: 1.5rem
	}
	.pagination:after {
		content: "";
		margin-bottom: 20px;
		display: block;
		clear: both
	}
	.bar_top_line {
		display: block;
		margin-bottom: 23px
	}
	.pagination span {
		padding: 5.5px 9px 3px 9px
	}
	.pagination a {
		padding: 5.5px 9px 3px 9px
	}
	.comment .comment-info {
		float: left;
		margin-left: unset;
		width: 100%
	}
	.com_control {
		height: 44px
	}
	.mb-5, .mtop-5 {
		margin-bottom: 1.6rem !important
	}
	#pagenavi {
		line-height: 45px
	}
	.loglist-content p {
		font-size: 14px;
	}
	
	/* 摘要的溢出（overflow）操作 在 小屏幕上要截得多一点 */
	.subtitle-overflow {
		max-width: 80%
	}
	/* 网页顶部的下拉菜单在移动端的显示优化 */
	.dropdown-menus .list-menu{
		padding: 0px;
		letter-spacing: 2px
	}
}
/* 为 toc 移动端设立的样式 */
@media all and (max-width: 1274px) {
	.toc-con {
		height: 100vh;
		width: 60%;
		max-width: 300px;
		padding-right: 30px;
		/* 磨砂效果 */
		background: rgba(237, 237, 237, 0.8);
		backdrop-filter: blur(2px);
		/* 兼容 Safari 磨砂效果 */
		-webkit-backdrop-filter: blur(2px);
		/* 始终固定位置 */
		z-index: 2;
		position: fixed!important;
		top: 0!important
	}
	.toc-link {
		color: rgb(189, 189, 189);
		font-size: 10px;
		padding-left: 10px;
	}
}

/* 轮播图容器 */
.blog-slider {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

/* 轮播图 */
.slider {
    display: flex;
    width: 400%;
    transition: transform 0.5s ease-in-out;
}

.slide {
    width: 25%;
    background-size: cover;
    background-position: center;
    height: 300px;
    position: relative;
}

.slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.slide:hover::before {
    opacity: 1;
}

.slide::after {
    content: attr(alt);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    padding: 10px 20px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
}

.slide:hover::after {
    opacity: 1;
}

/* 轮播图指示器 */
/* 将.slider-dots元素定位为绝对定位，使其脱离文档流 */
/* 距离轮播图底部 10px，水平居中显示 */
.slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    /* 通过 translateX(-50%) 实现水平居中 */
    transform: translateX(-50%);
    /* 使用 flex 布局，让内部元素水平排列 */
    display: flex;
}

/* 轮播图指示器中的每个小圆点样式 */
/* 选择.slider-dots 下的所有类名为 dot 的元素 */
.slider-dots.dot {
    /* 设置小圆点的宽度为 10px */
    width: 10px;
    /* 设置小圆点的高度为 10px */
    height: 10px;
    /* 将小圆点设置为圆形 */
    border-radius: 50%;
    /* 设置小圆点的背景颜色为半透明白色 */
    background-color: rgba(255, 255, 255, 0.5);
    /* 设置小圆点之间的左右外边距为 5px */
    margin: 0 5px;
    /* 将鼠标指针样式设置为手型，表示可点击 */
    cursor: pointer;
}

/* 轮播图指示器中当前激活的小圆点样式 */
/* 选择.slider-dots 下类名为 dot 且同时具有 active 类的元素 */
.slider-dots.dot.active {
    /* 将激活的小圆点背景颜色设置为白色 */
    background-color: #fff;
}

/* 轮播图箭头 */
/* 定义轮播图箭头的通用样式 */
.slider-arrow {
    /* 绝对定位，使其脱离文档流 */
    position: absolute;
    /* 垂直居中显示 */
    top: 50%;
    /* 通过 translateY(-50%) 实现垂直居中 */
    transform: translateY(-50%);
    /* 增大按钮宽度为 40px */
    width: 40px; 
    /* 增大按钮高度为 40px */
    height: 40px; 
    /* 调整背景色为半透明黑色 */
    background-color: rgba(0, 0, 0, 0.6); 
    /* 设置按钮文字颜色为白色 */
    color: #fff; 
    /* 文字水平居中 */
    text-align: center;
    /* 根据高度调整行高，使文字垂直居中 */
    line-height: 40px; 
    /* 设置鼠标指针样式为手型，表示可点击 */
    cursor: pointer;
    /* 设置元素的层级为 10，确保在其他元素之上 */
    z-index: 10;
    /* 去除默认边框 */
    border: none; 
    /* 添加圆角使按钮更美观 */
    border-radius: 5px; 
    /* 以下是添加按钮图标（这里以伪元素示例，你也可以使用实际的图标文件 ）*/
}

/* 轮播图左箭头样式 */
/* 选择类名为 slider-arrow-left 的元素 */
.slider-arrow-left {
    /* 距离轮播图左侧 10px */
    left: 10px;
}

/* 轮播图右箭头样式 */
/* 选择类名为 slider-arrow-right 的元素 */
.slider-arrow-right {
    /* 距离轮播图右侧 10px */
    right: 10px;
}

/* 轮播图左箭头的图标样式 */
/* 在.slider-arrow-left 元素前添加内容 */
.slider-arrow-left::before {
    /* 显示左箭头符号 */
    content: "\2190"; 
    /* 调整图标大小为 20px */
    font-size: 20px; 
}

/* 轮播图右箭头的图标样式 */
/* 在.slider-arrow-right 元素前添加内容 */
.slider-arrow-right::before {
    /* 显示右箭头符号 */
    content: "\2192"; 
    /* 调整图标大小为 20px */
    font-size: 20px; 
}

/* 小圆点指示器容器 */
/* 定义小圆点指示器容器的样式 */
.slider-indicators {
    /* 绝对定位，使其脱离文档流 */
    position: absolute;
    /* 距离轮播图底部 10px */
    bottom: 10px;
    /* 水平居中显示 */
    left: 50%;
    /* 通过 translateX(-50%) 实现水平居中 */
    transform: translateX(-50%);
    /* 使用 flex 布局，让内部元素水平排列 */
    display: flex;
    /* 设置圆点之间的间距为 10px */
    gap: 10px; 
}

/* 小圆点样式 */
/* 选择.slider-indicators 下的所有类名为 dot 的元素 */
.slider-indicators.dot {
    /* 设置小圆点的宽度为 12px */
    width: 12px;
    /* 设置小圆点的高度为 12px */
    height: 12px;
    /* 将小圆点设置为圆形 */
    border-radius: 50%;
    /* 设置小圆点的背景颜色为半透明白色 */
    background-color: rgba(255, 255, 255, 0.5);
    /* 设置鼠标指针样式为手型，表示可点击 */
    cursor: pointer;
}

/* 小圆点指示器中当前激活的小圆点样式 */
/* 选择.slider-indicators 下类名为 dot 且同时具有 active 类的元素 */
.slider-indicators.dot.active {
    /* 将激活的小圆点背景颜色设置为白色 */
    background-color: #fff;
}

/* 电脑端适配 */
/* 当屏幕宽度大于等于 768px 时应用此样式 */
@media (min-width: 768px) {
    /* 选择类名为 blog-slider 的元素 */
   .blog-slider {
        /* 设置轮播图的高度为 200px */
        height: 200px;
    }
}

/* 手机端适配 */
/* 当屏幕宽度小于等于 767px 时应用此样式 */
@media (max-width: 767px) {
    /* 选择类名为 blog-slider 的元素 */
   .blog-slider {
        /* 设置轮播图的高度为 150px */
        height: 150px;
    }
}

/* 文章列表样式 */
/* 选择类名为 list-home 的元素 */
.list-home {
    /* 去除外边距 */
    margin: 0;
    /* 去除内边距 */
    padding: 0;
}

/* 白色文章卡片样式 */
/* 选择类名为 white-post 的元素 */
.white-post {
    /* 设置文章卡片之间的底部外边距为 20px */
    margin-bottom: 20px;
    /* 设置文章卡片的内边距为 20px */
    padding: 20px;
    /* 设置文章卡片的背景颜色为浅灰色 */
    background-color: #f9f9f9;
    /* 为文章卡片添加圆角 */
    border-radius: 5px;
}