/**
 * 模板样式表
 */

/* 全局样式
---------------------------------------------------*/
/* 禁止页面溢出出现滚动条 */
: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: .75rem;
		flex: 0 0 69.666667%;
		max-width: 69.666667%
	}
	/* 工具栏列 */
	.column-small {
		font-size: medium;
		padding-left: .75rem;
		-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: 1001;
	/* 定位 */
	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: 1000;
	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
}

/* 日历样式
---------------------------------------------------*/
/* 日历的加载样式，防止翻页造成太大的视觉变化 */
/*侧边日历*/
#calendar{font-family:Arial,sans-serif;padding: 1rem;}
.calendar-li{padding:1rem 2rem 1.5rem}
.calendartop{width:100%;text-align:center}
.calendartop td{padding:10px;border:none}
.calendartop a{text-decoration:none;color:#435eeb}
.calendartop a:hover{color:#0056b3}
.calendar{width:100%;border-collapse:collapse}
.calendar tbody{color:#7f838a}
.calendar td{height:40px;text-align:center;vertical-align:middle;border:none}
.calendar .week{}
.calendar .sun{color:#ff0000}
.calendar .day{color:#fff;border-radius:50%;position:relative;z-index:1}
.calendar .day a{color:#fff}
.calendar .day:after{content:'';display:block;border-radius:50%;background-color:#eb4343;position:absolute;top:4px;right:0;left:0;width:30px;text-align:center;margin:0 auto;height:30px;z-index:-1}
.calendar .day2 a{color:#435eeb;text-decoration:none}
.calendar .day2 a:hover{color:#218838}
.calendar td:empty{background-color:#f9f9f9}
.calendar th,.calendar td{padding:0}
@media (max-width:767.98px){.calendar td{height:38px}}

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


/* 分页按钮样式
---------------------------------------------------*/
.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: 14px;
    padding: 4px;
    text-align: center;
    color: #203656;
    background: #ebf0f6;
}

/* 文章列出页 编辑 链接的样式 
---------------------------------------------------*/
.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%
	}

	.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;
	}
}