.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction {
	bottom: unset !important;
	top: 10px !important;
	right: 10px !important;
	left: unset !important;
	width: unset !important
}

.dplayer-controller .dplayer-icons .dplayer-full .dplayer-full-in-icon {
	display: none !important
}

@-webkit-keyframes rotateCount {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@keyframes rotateCount {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@-webkit-keyframes progress {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: 30px 0
	}
}

@keyframes progress {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: 30px 0
	}
}

@-webkit-keyframes drawing {
	100% {
		stroke-dashoffset: -400
	}
}

@keyframes drawing {
	100% {
		stroke-dashoffset: -400
	}
}

@-webkit-keyframes swingIconSet {
	0% {
		-webkit-transform: rotate(-30deg);
		transform: rotate(-30deg)
	}

	100% {
		-webkit-transform: rotate(30deg);
		transform: rotate(30deg)
	}
}

@keyframes swingIconSet {
	0% {
		-webkit-transform: rotate(-30deg);
		transform: rotate(-30deg)
	}

	100% {
		-webkit-transform: rotate(30deg);
		transform: rotate(30deg)
	}
}

@-webkit-keyframes showComment {
	0% {
		-webkit-transform: translate3d(0, 100px, 0);
		transform: translate3d(0, 100px, 0);
		opacity: 0
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1
	}
}

@keyframes showComment {
	0% {
		-webkit-transform: translate3d(0, 100px, 0);
		transform: translate3d(0, 100px, 0);
		opacity: 0
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1
	}
}

@-webkit-keyframes scaleLove {
	0% {
		-webkit-transform: scale(1.2);
		transform: scale(1.2)
	}

	100% {
		-webkit-transform: scale(0.8);
		transform: scale(0.8)
	}
}

@keyframes scaleLove {
	0% {
		-webkit-transform: scale(1.2);
		transform: scale(1.2)
	}

	100% {
		-webkit-transform: scale(0.8);
		transform: scale(0.8)
	}
}

@-webkit-keyframes showFullLoad {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@keyframes showFullLoad {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@-webkit-keyframes waveMove {
	0% {
		background-position: 0 100%
	}

	100% {
		background-position: -20px 100%
	}
}

@keyframes waveMove {
	0% {
		background-position: 0 100%
	}

	100% {
		background-position: -20px 100%
	}
}

@-webkit-keyframes jSlideUp {
	0% {
		opacity: 0.75;
		-webkit-transform: translate3d(0, 50px, 0);
		transform: translate3d(0, 50px, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes jSlideUp {
	0% {
		opacity: 0.75;
		-webkit-transform: translate3d(0, 50px, 0);
		transform: translate3d(0, 50px, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

.jSlideUp {
	-webkit-animation-name: jSlideUp;
	animation-name: jSlideUp
}

@-webkit-keyframes jScale {
	0% {
		opacity: 0.75;
		-webkit-transform: scale(0.5);
		transform: scale(0.5)
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes jScale {
	0% {
		opacity: 0.75;
		-webkit-transform: scale(0.5);
		transform: scale(0.5)
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

.jScale {
	-webkit-animation-name: jScale;
	animation-name: jScale
}

@-webkit-keyframes jScaleUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 50px, 0) scale3d(0.75, 0.5, 1);
		transform: translate3d(0, 50px, 0) scale3d(0.75, 0.5, 1)
	}

	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
		transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
	}
}

@keyframes jScaleUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 50px, 0) scale3d(0.75, 0.5, 1);
		transform: translate3d(0, 50px, 0) scale3d(0.75, 0.5, 1)
	}

	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
		transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
	}
}

@-webkit-keyframes showTabs {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@keyframes showTabs {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@-webkit-keyframes showWallpaper {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(0.3, 0.8, 0);
		transform: scale3d(0.3, 0.8, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}

@keyframes showWallpaper {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(0.3, 0.8, 0);
		transform: scale3d(0.3, 0.8, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}

.jScaleUp {
	-webkit-animation-name: jScaleUp;
	animation-name: jScaleUp
}

.wow {
	visibility: hidden
}

.wow.off {
	visibility: visible
}

::-webkit-scrollbar {
	width: 7px;
	height: 7px
}

::-webkit-scrollbar-thumb {
	border-radius: 3.5px;
	background-color: var(--theme);
	
}


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	outline: none;
	font-family: nexzhu
}

body {	
	padding-bottom: env(safe-area-inset-bottom);	
	font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
	font-family: nexzhu!important;		
}
@font-face {
  font-family: "nexzhu";
  src: url(https://laolion.com/usr/themes/Typecho-Joe-Theme/fonts/blockdole.woff2) format("woff2"),
       url(https://laolion.com/usr/themes/Typecho-Joe-Theme/fonts/blockdole.woff) format("woff"),
       url(https://laolion.com/usr/themes/Typecho-Joe-Theme/fonts/blockdole.ttf) format("truetype"),
       url(https://laolion.com/usr/themes/Typecho-Joe-Theme/fonts/blockdole.eot) format("embedded-opentype"),
       url(https://laolion.com/usr/themes/Typecho-Joe-Theme/fonts/blockdole.svg) format("svg");
}
@font-face {
  font-family: "light";
  src: url(https://laolion.com/usr/themes/Typecho-Joe-Theme/fonts/light.woff2) format("woff2"),
       url(https://laolion.com/usr/themes/Typecho-Joe-Theme/fonts/light.woff) format("woff"),
       url(https://laolion.com/usr/themes/Typecho-Joe-Theme/fonts/light.ttf) format("truetype"),
       url(https://laolion.com/usr/themes/Typecho-Joe-Theme/fonts/light.eot) format("embedded-opentype"),
       url(https://laolion.com/usr/themes/Typecho-Joe-Theme/fonts/light.svg) format("svg");
}

h1,h2,h3,h4,h5,h6 {
	font-weight: 400
}

a {
	color: var(--main);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent
}

li {
	list-style: none
}

img,canvas {
	border: 0;
	vertical-align: middle
}

input,button,textarea {
	outline: none;
	border-radius: 0
}

button {
	cursor: pointer
}

img[src=''],img:not([src]) {
	border: 0;
	opacity: 0
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

#live2d-widget {
	z-index: 1 !important
}

.j-barrager-list {
	display: none
}

.j-barrager {
	display: flex;
	align-items: center;
	position: fixed;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 333;
	height: 34px;
	border-radius: 17px;
	padding: 0 10px 0 7px;
	background: rgba(0,0,0,0.75);
	pointer-events: none
}

.j-barrager img {
	width: 24px;
	height: 24px;
	margin-right: 5px;
	border-radius: 50%
}

.j-barrager p {
	max-width: 500px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	color: #fff;
	line-height: 24px
}

.j-barrager p img {
	display: none
}

.j-barrager p .owo {
	display: inline-block;
	border-radius: 0;
	margin-right: 0;
	vertical-align: top
}

.j-drop {
	display: flex;
	align-items: center;
	cursor: pointer
}

.j-loading {
	position: fixed;
	right: 10px;
	width: 30px;
	height: 30px;
	z-index: 666
}

.j-loading path,.j-loading rect {
	fill: var(--theme)
}

.j-loading.full {
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0 !important;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	z-index: 888;
	-webkit-animation: showFullLoad 0.25s;
	animation: showFullLoad 0.25s
}

.j-loading.full svg {
	width: 200px;
	height: 200px
}

.j-loading.full img {
	width: 50px
}

.j-dropdown {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%) perspective(600px) rotateX(-45deg);
	transform: translateX(-50%) perspective(600px) rotateX(-45deg);
	visibility: hidden;
	opacity: 0;
	z-index: 444;
	border-top: 3px solid var(--theme);
	transition: opacity 0.35s, visibility 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, visibility 0.35s, transform 0.35s;
	transition: opacity 0.35s, visibility 0.35s, transform 0.35s, -webkit-transform 0.35s;
	-webkit-transform-origin: top;
	transform-origin: top;
	background: var(--background);
	box-shadow: 0 0 10px rgba(0,0,0,0.15);
	border-radius: 0 0 4px 4px;
	padding: 10px 0;
	text-align: center
}

.j-dropdown::before {
	content: '';
	position: absolute;
	top: -10px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid var(--theme)
}

.j-dropdown.active {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateX(-50%) perspective(600px) rotateX(0);
	transform: translateX(-50%) perspective(600px) rotateX(0)
}

.j-dropdown a {
	display: block;
	padding: 0 15px;
	line-height: 36px;
	height: 36px;
	color: var(--minor);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.j-dropdown a:hover {
	color: var(--theme);
	background: var(--classD)
}

.j-dropdown a.active {
	color: var(--main)
}

.j-header-default {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background: var(--background);
	box-shadow: 1px 1px 5px var(--main);
	z-index: 555;
	width: 100%;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.j-header-default .progress {
	position: absolute;
	left: 0;
	bottom: -3px;
	height: 3px;
	background: var(--theme);
	opacity: 0.75;
	z-index: 666;
	border-radius: 0 1.5px 1.5px 0;
	transition: width 0.35s
}

.j-header-default .above {
	border-bottom: 1px solid var(--classC)
}

.j-header-default .above .container {
	display: flex;
	align-items: center
}

.j-header-default .above .container .logo {
	position: relative;
	display: flex;
	align-items: center;
	font-size: 0;
	height: 60px;
	padding-right: 15px;
	margin-right: 15px
}

.j-header-default .above .container .logo::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 1px;
	height: 20px;
	background: var(--classB);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%)
}

.j-header-default .above .container .logo a img {
	max-width: 150px;
	max-height: 50px;
	-o-object-fit: cover;
	object-fit: cover
}

.j-header-default .above .container .nav {
	display: flex;
	align-items: center
}

.j-header-default .above .container .nav .link {
	position: relative;
	height: 60px;
	line-height: 60px;
	font-size: 15px;
	padding: 0 8px;
	margin-right: 15px;
	transition: color 0.35s;
	white-space: nowrap
}

.j-header-default .above .container .nav .link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	opacity: 0;
	transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
	border-radius: 6px 6px 0 0;
	-webkit-transform: scale3d(0, 0, 0);
	transform: scale3d(0, 0, 0);
	background: var(--theme)
}

.j-header-default .above .container .nav .link:hover:not(.drops) {
	color: var(--theme)
}

.j-header-default .above .container .nav .link:hover:not(.drops)::after {
	opacity: 1;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1)
}

.j-header-default .above .container .nav .link.active:not(.drops) {
	color: var(--main)
}

.j-header-default .above .container .nav .link.active:not(.drops)::after {
	opacity: 1;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1)
}

.j-header-default .above .container .nav .link.drops {
	color: var(--main)
}

.j-header-default .above .container .nav .link.drops svg {
	width: 15px;
	height: 15px;
	fill: var(--main);
	margin-left: 5px;
	margin-top: -3px
}

.j-header-default .above .container .nav .link.drops .j-dropdown {
	min-width: 120px;
	max-width: 150px
}

.j-header-default .above .container .search {
	position: relative;
	display: flex;
	align-items: center;
	height: 60px;
	margin-left: auto
}

.j-header-default .above .container .search input {
	background: var(--classC);
	width: 170px;
	height: 34px;
	border: none;
	border: 1px solid transparent;
	padding: 0 20px;
	color: var(--routine);
	transition: border-color 0.35s, background 0.35s;
	font-size: 13px;
	border-radius: 17px 0 0 17px
}

.j-header-default .above .container .search input:focus {
	background: var(--background);
	border-color: var(--theme)
}

.j-header-default .above .container .search input:focus ~ span {
	-webkit-transform: translate3d(0, -50%, 0) rotateY(180deg);
	transform: translate3d(0, -50%, 0) rotateY(180deg)
}

.j-header-default .above .container .search button {
	position: relative;
	z-index: 1;
	height: 34px;
	border: none;
	background: var(--theme);
	color: #fff;
	font-size: 13px;
	border-radius: 0 17px 17px 0;
	padding: 0 10px
}

.j-header-default .above .container .search span {
	position: absolute;
	top: 50%;
	left: 142px;
	width: 28px;
	height: 38px;
	background: url(../img/search.png);
	background-size: 100% 100%;
	transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	transition: transform 0.35s, -webkit-transform 0.35s;
	-webkit-transform: translate3d(100%, -50%, 0) rotateY(180deg);
	transform: translate3d(100%, -50%, 0) rotateY(180deg)
}

.j-header-default .above .container .slide {
	display: none;
	position: relative;
	width: 20px;
	height: 20px
}

.j-header-default .above .container .slide span {
	display: block;
	position: absolute;
	height: 2px;
	width: 20px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	top: 0;
	background-color: var(--main);
	border-radius: 2px;
	transition: top 0.35s ease, opacity 0.35s, -webkit-transform 0.35s;
	transition: top 0.35s ease, transform 0.35s, opacity 0.35s;
	transition: top 0.35s ease, transform 0.35s, opacity 0.35s, -webkit-transform 0.35s
}

.j-header-default .above .container .slide span:nth-child(2) {
	top: 9px
}

.j-header-default .above .container .slide span:nth-child(3) {
	top: 18px
}

.j-header-default .above .container .slide.active span:nth-child(1) {
	top: 9px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg)
}

.j-header-default .above .container .slide.active span:nth-child(2) {
	opacity: 0
}

.j-header-default .above .container .slide.active span:nth-child(3) {
	top: 9px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg)
}

.j-header-default .above .container .search-toggle {
	display: none;
	text-align: center;
	width: 30px;
	height: 30px;
	line-height: 30px;
	margin-left: 15px
}

.j-header-default .above .container .search-toggle svg {
	display: none;
	width: 20px;
	height: 20px;
	fill: var(--routine);
	vertical-align: middle
}

.j-header-default .above .container .search-toggle .open {
	display: inline-block
}

.j-header-default .above .container .search-toggle.active .open {
	display: none
}

.j-header-default .above .container .search-toggle.active .close {
	display: inline-block
}

.j-header-default .above .container .search-toggle-xs {
	display: none;
	width: 20px;
	height: 20px;
	fill: var(--routine)
}

.j-header-default .below .container {
	display: flex;
	align-items: center
}

.j-header-default .below .container .nav {
	display: flex;
	align-items: center;
	flex: 1;
	width: 0
}

.j-header-default .below .container .nav .link {
	position: relative;
	height: 45px;
	line-height: 45px;
	margin-right: 15px;
	color: var(--minor)
}

.j-header-default .below .container .nav .link:hover {
	color: var(--theme)
}

.j-header-default .below .container .nav .link.active {
	color: var(--theme)
}

.j-header-default .below .container .nav .link .j-drop a {
	color: var(--minor)
}

.j-header-default .below .container .nav .link .j-drop svg {
	width: 14px;
	height: 14px;
	fill: var(--minor);
	margin-left: 5px;
	margin-top: -3px
}

.j-header-default .below .container .nav .link .j-drop:hover a {
	color: var(--theme)
}

.j-header-default .below .container .nav .link .j-drop:hover svg {
	fill: var(--theme)
}

.j-header-default .below .container .nav .link .j-dropdown {
	top: 55px;
	min-width: 120px;
	max-width: 150px
}

.j-header-default .below .container .census {
	display: flex;
	align-items: center;
	height: 45px;
	position: relative;
	margin-left: 15px
}

.j-header-default .below .container .census .j-drop span {
	color: var(--routine)
}

.j-header-default .below .container .census .j-drop svg {
	width: 15px;
	height: 15px;
	fill: var(--routine);
	margin-right: 5px
}

.j-header-default .below .container .census .j-drop:hover span {
	color: var(--theme)
}

.j-header-default .below .container .census .j-drop:hover svg {
	fill: var(--theme)
}

.j-header-default .below .container .census .j-dropdown {
	top: 55px;
	padding: 20px 15px 0
}

.j-header-default .below .container .census .j-dropdown #census {
	width: 300px;
	height: 200px
}

.j-header-default .below .container .logged {
	height: 45px;
	display: flex;
	align-items: center;
	position: relative;
	margin-left: 15px
}

.j-header-default .below .container .logged .j-drop span {
	color: var(--routine)
}

.j-header-default .below .container .logged .j-drop svg {
	width: 15px;
	height: 15px;
	fill: var(--routine);
	margin-right: 5px
}

.j-header-default .below .container .logged .j-drop:hover span {
	color: var(--theme)
}

.j-header-default .below .container .logged .j-drop:hover svg {
	fill: var(--theme)
}

.j-header-default .below .container .logged .j-dropdown {
	width: 120px;
	top: 55px;
	background: var(--classD);
}

.j-header-default .below .container .sign {
	display: flex;
	align-items: center;
	margin-left: 15px
}

.j-header-default .below .container .sign svg {
	width: 15px;
	height: 15px;
	fill: var(--routine);
	margin-right: 5px
}

.j-header-default .below .container .sign .line {
	color: var(--minor);
	margin: 0 5px
}

.j-header-default .below .container .sign .sign-box {
	display: flex;
	align-items: center;
	position: relative;
	height: 45px
}

.j-header-default .below .container .sign .sign-box .j-drop {
	color: var(--routine);
	cursor: pointer
}

.j-header-default .below .container .sign .sign-box .j-drop:hover {
	color: var(--theme)
}

.j-header-default .below .container .sign .sign-box .j-dropdown {
	top: 55px;
	padding: 15px;
	width: 250px;
	text-align: left;
	background: var(--classD);
}

.j-header-default .below .container .sign .sign-box .j-dropdown .form-item {
	margin-bottom: 15px
}

.j-header-default .below .container .sign .sign-box .j-dropdown .form-item:last-child {
	margin-bottom: 0
}

.j-header-default .below .container .sign .sign-box .j-dropdown .form-item div {
	margin-bottom: 5px;
	color: var(--routine);
	font-size: 12px
}

.j-header-default .below .container .sign .sign-box .j-dropdown .form-item input {
	width: 100%;
	height: 34px;
	border-radius: 4px;
	border: 1px solid var(--classA);
	padding: 0 15px;
	color: var(--theme);
	transition: border-color 0.35s
}

.j-header-default .below .container .sign .sign-box .j-dropdown .form-item input:focus {
	border-color: var(--theme)
}

.j-header-default .below .container .sign .sign-box .j-dropdown .form-item button {
	color: var(--background);
	width: 100%;
	height: 34px;
	border: none;
	border-radius: 4px;
	background: var(--main);
	transition: opacity 0.35s
}

.j-header-default .below .container .sign .sign-box .j-dropdown .form-item button:hover {
	opacity: 0.85
}

.j-header-default .below .container .barrager {
	width: 40px;
	height: 20px;
	position: relative;
	border-radius: 10px;
	cursor: pointer;
	background: var(--minor);
	transition: background 0.35s;
	margin-left: 15px;
	-webkit-appearance: none
}

.j-header-default .below .container .barrager::after {
	content: '弹';
	font-size: 12px;
	width: 22px;
	height: 22px;
	line-height: 22px;
	text-align: center;
	position: absolute;
	color: var(--minor);
	top: 50%;
	left: 0;
	border-radius: 50%;
	background-color: var(--background);
	box-shadow: 0 0 5px rgba(0,0,0,0.35);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	transition: left 0.35s
}

.j-header-default .below .container .barrager:checked {
	background-color: var(--theme)
}

.j-header-default .below .container .barrager:checked::after {
	left: 20px;
	color: var(--theme)
}

.j-header-fluid {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	display: flex;
	height: 70px;
	background: var(--background);
	box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1);
	z-index: 555;
	width: 100%;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.j-header-fluid .progress {
	position: absolute;
	top: 0;
	left: 0;
	height: 3px;
	background: var(--theme);
	opacity: 0.75;
	z-index: 666;
	border-radius: 0 1.5px 1.5px 0;
	transition: width 0.35s
}

.j-header-fluid .left {
	display: flex;
	align-items: center;
	margin-right: auto
}

.j-header-fluid .right {
	display: flex;
	align-items: center
}

.j-header-fluid .logo {
	position: relative;
	display: flex;
	align-items: center;
	font-size: 0;
	height: 70px;
	padding-right: 15px;
	margin-right: 15px
}

.j-header-fluid .logo::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 1px;
	height: 20px;
	background: var(--classB);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%)
}

.j-header-fluid .logo a {
	display: block
}

.j-header-fluid .logo a img {
	max-width: 150px;
	max-height: 50px;
	-o-object-fit: cover;
	object-fit: cover
}

.j-header-fluid .nav {
	display: flex;
	align-items: center
}

.j-header-fluid .nav .link {
	position: relative;
	height: 70px;
	line-height: 70px;
	font-size: 15px;
	padding: 0 8px;
	margin-right: 15px;
	transition: color 0.35s
}

.j-header-fluid .nav .link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	opacity: 0;
	transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
	border-radius: 6px 6px 0 0;
	-webkit-transform: scale3d(0, 0, 0);
	transform: scale3d(0, 0, 0);
	background: var(--theme)
}

.j-header-fluid .nav .link:hover {
	color: var(--theme)
}

.j-header-fluid .nav .link:hover::after {
	opacity: 1;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1)
}

.j-header-fluid .nav .link.active {
	color: var(--theme)
}

.j-header-fluid .nav .link.active::after {
	opacity: 1;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1)
}

.j-header-fluid .nav .drop {
	position: relative;
	display: flex;
	align-items: center;
	margin-right: 15px
}

.j-header-fluid .nav .drop .j-drop {
	height: 70px
}

.j-header-fluid .nav .drop .j-drop span {
	color: var(--main);
	transition: color 0.35s
}

.j-header-fluid .nav .drop .j-drop svg {
	width: 15px;
	height: 15px;
	fill: var(--main);
	margin-left: 5px;
	transition: fill 0.35s
}

.j-header-fluid .nav .drop .j-drop:hover span {
	color: var(--theme)
}

.j-header-fluid .nav .drop .j-drop:hover svg {
	fill: var(--theme)
}

.j-header-fluid .nav .drop .j-dropdown {
	top: 80px;
	min-width: 120px;
	max-width: 150px
}

.j-header-fluid .nav .drop .j-dropdown.census {
	padding: 20px 15px 0;
	max-width: none
}

.j-header-fluid .nav .drop .j-dropdown.census #census {
	width: 300px;
	height: 200px
}

.j-header-fluid .search {
	position: relative;
	display: flex;
	align-items: center;
	height: 70px;
	margin-left: 20px
}

.j-header-fluid .search input {
	background: var(--classC);
	width: 170px;
	height: 38px;
	border: none;
	border: 1px solid transparent;
	border-right: none;
	padding: 0 20px;
	color: var(--routine);
	transition: border-color 0.35s, background 0.35s;
	font-size: 13px;
	border-radius: 4px 0 0 4px
}

.j-header-fluid .search input:focus {
	background: var(--background);
	border-color: var(--theme)
}

.j-header-fluid .search button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: none;
	background: var(--theme);
	color: var(--background);
	font-size: 13px;
	border-radius: 0 4px 4px 0;
	transition: opacity 0.35s
}

.j-header-fluid .search button:hover {
	opacity: 0.85
}

.j-header-fluid .search button svg {
	width: 15px;
	height: 15px;
	fill: var(--background);
	transition: fill 0.35s
}

.j-header-fluid .search span {
	width: 28px;
	height: 38px;
	background: url(../img/search.png);
	background-size: 100% 100%
}

.j-header-fluid .logged {
	display: flex;
	align-items: center;
	position: relative;
	margin-left: 20px;
	height: 70px
}

.j-header-fluid .logged .j-drop img {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--classA);
	padding: 3px;
	transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	transition: transform 0.35s, -webkit-transform 0.35s
}

.j-header-fluid .logged .j-drop:hover img {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg)
}

.j-header-fluid .logged .j-dropdown {
	width: 120px;
	top: 70px
}

.j-header-fluid .sign {
	display: flex;
	align-items: center;
	margin-left: 20px
}

.j-header-fluid .sign .sign-box {
	display: flex;
	align-items: center;
	position: relative;
	height: 70px
}

.j-header-fluid .sign .sign-box .j-drop {
	position: relative;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	transition: transform 0.5s, -webkit-transform 0.5s;
	font-size: 12px;
	border: none;
	width: 65px;
	height: 28px;
	line-height: 28px
}

.j-header-fluid .sign .sign-box .j-drop span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-perspective: 300px;
	perspective: 300px;
	background: var(--background);
	color: var(--element);
	border: 1px solid var(--element)
}

.j-header-fluid .sign .sign-box .j-drop span:first-child {
	-webkit-transform: translateZ(14px);
	transform: translateZ(14px)
}

.j-header-fluid .sign .sign-box .j-drop span:last-child {
	-webkit-transform: translateY(14px) rotateX(-90deg);
	transform: translateY(14px) rotateX(-90deg)
}

.j-header-fluid .sign .sign-box .j-drop:hover {
	-webkit-transform: rotateX(90deg);
	transform: rotateX(90deg)
}

.j-header-fluid .sign .sign-box .j-dropdown {
	top: 80px;
	padding: 15px;
	width: 250px;
	text-align: left
}

.j-header-fluid .sign .sign-box .j-dropdown .form-item {
	margin-bottom: 15px
}

.j-header-fluid .sign .sign-box .j-dropdown .form-item:last-child {
	margin-bottom: 0
}

.j-header-fluid .sign .sign-box .j-dropdown .form-item div {
	margin-bottom: 5px;
	color: var(--routine);
	font-size: 12px
}

.j-header-fluid .sign .sign-box .j-dropdown .form-item input {
	width: 100%;
	height: 34px;
	border-radius: 4px;
	border: 1px solid var(--classA);
	padding: 0 15px;
	color: var(--routine);
	transition: border-color 0.35s
}

.j-header-fluid .sign .sign-box .j-dropdown .form-item input:focus {
	border-color: var(--theme)
}

.j-header-fluid .sign .sign-box .j-dropdown .form-item button {
	color: var(--background);
	width: 100%;
	height: 34px;
	border: none;
	border-radius: 4px;
	background: var(--theme);
	transition: opacity 0.35s
}

.j-header-fluid .sign .sign-box .j-dropdown .form-item button:hover {
	opacity: 0.85
}

.j-header-fluid .sign .sign-box:last-child span {
	color: var(--background);
	background: var(--element)
}

.j-header-fluid .barrager {
	width: 40px;
	height: 20px;
	position: relative;
	border-radius: 10px;
	cursor: pointer;
	background: var(--minor);
	transition: background 0.35s;
	-webkit-appearance: none
}

.j-header-fluid .barrager::after {
	content: '弹';
	font-size: 12px;
	width: 22px;
	height: 22px;
	line-height: 22px;
	text-align: center;
	position: absolute;
	color: var(--minor);
	top: 50%;
	left: 0;
	border-radius: 50%;
	background-color: var(--background);
	box-shadow: 0 0 5px rgba(0,0,0,0.35);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	transition: left 0.35s
}

.j-header-fluid .barrager:checked {
	background-color: var(--theme)
}

.j-header-fluid .barrager:checked::after {
	left: 20px;
	color: var(--theme)
}

.j-header-fluid .search-toggle {
	display: none;
	text-align: center;
	width: 30px;
	height: 30px;
	line-height: 30px;
	margin-left: 15px
}

.j-header-fluid .search-toggle svg {
	display: none;
	width: 20px;
	height: 20px;
	fill: var(--routine);
	vertical-align: middle
}

.j-header-fluid .search-toggle .open {
	display: inline-block
}

.j-header-fluid .search-toggle.active .open {
	display: none
}

.j-header-fluid .search-toggle.active .close {
	display: inline-block
}

.j-header-fluid .slide {
	display: none;
	position: relative;
	width: 20px;
	height: 20px;
	margin-right: 15px
}

.j-header-fluid .slide span {
	display: block;
	position: absolute;
	height: 2px;
	width: 20px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	top: 0;
	background-color: var(--routine);
	border-radius: 2px;
	transition: top 0.35s ease, opacity 0.35s, -webkit-transform 0.35s;
	transition: top 0.35s ease, transform 0.35s, opacity 0.35s;
	transition: top 0.35s ease, transform 0.35s, opacity 0.35s, -webkit-transform 0.35s
}

.j-header-fluid .slide span:nth-child(2) {
	top: 9px
}

.j-header-fluid .slide span:nth-child(3) {
	top: 18px
}

.j-header-fluid .slide.active span:nth-child(1) {
	top: 9px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg)
}

.j-header-fluid .slide.active span:nth-child(2) {
	opacity: 0
}

.j-header-fluid .slide.active span:nth-child(3) {
	top: 9px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg)
}

.j-header-fluid .search-toggle-xs {
	display: none;
	width: 20px;
	height: 20px;
	fill: var(--routine);
	margin-left: auto
}

.j-actions {
	position: fixed;
	z-index: 444;
	bottom: 86px;
	right: 30px
}

.j-actions .item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--background);
	border-radius: 50%;
	cursor: pointer;
	margin-top: 15px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1),0 5px 20px rgba(0,0,0,0.2);
	-webkit-transform: scale(0);
	transform: scale(0);
	transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	transition: transform 0.35s, -webkit-transform 0.35s
}

.j-actions .item svg {
	width: 25px;
	height: 25px;
	fill: var(--theme)
}

.j-actions .item.active {
	-webkit-transform: scale(1);
	transform: scale(1)
}

.j-actions .item .color-pick {
	position: absolute;
	bottom: 0;
	right: 50px;
	opacity: 0;
	visibility: hidden;
	-webkit-transform: perspective(600px) rotateX(45deg);
	transform: perspective(600px) rotateX(45deg);
	transition: opacity 0.35s, visibility 0.35s, -webkit-transform 0.35s;
	transition: transform 0.35s, opacity 0.35s, visibility 0.35s;
	transition: transform 0.35s, opacity 0.35s, visibility 0.35s, -webkit-transform 0.35s;
	-webkit-transform-origin: bottom;
	transform-origin: bottom
}

.j-actions .item .color-pick.active {
	opacity: 1;
	visibility: visible;
	-webkit-transform: rotateX(0);
	transform: rotateX(0)
}

.j-actions .item.light {
	-webkit-transform: scale(1);
	transform: scale(1)
}

.j-actions .item.light svg {
	transition: fill 0.35s;
	fill: var(--main)
}

.j-actions .item.light.current svg {
	fill: var(--theme)
}

.j-footer {	
	color: var(--minor);
	background: var(--background);	
}

.j-footer .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80px
}

.j-footer .container a {
	color: var(--minor)
}

.j-footer .container a:hover {
	color: var(--theme);
	text-decoration: underline
}

.j-footer .container .banquan {
	display: flex;
	align-items: center
}

.j-footer .container .banquan .info {
	margin-right: 10px
}

.j-footer .container .banquan svg {
	width: 18px;
	height: 18px;
	-webkit-animation: rotateCount 2s infinite alternate;
	animation: rotateCount 2s infinite alternate
}

.j-footer .container .banquan .time {
	margin-left: 5px
}

.j-footer .container .banquan-links {
	display: flex;
	align-items: center
}

.j-footer .container .banquan-links a {
	margin-left: 20px
}

.j-footer .container .banquan-links a:first-child {
	margin-left: 0
}

.j-adaption {
	position: relative;
	width: 0;
	min-width: 0;
	flex: 1
}

.j-index {
	display: flex;
	padding-top: 20px;
	padding-bottom: 20px
}

.j-index .main {
	padding: 0 20px;
	background: var(--background);
	box-shadow: 1px 1px 5px var(--main);
	border-radius: var(--radius-pc)
}

.j-index .main .search-title {
	display: flex;
	align-items: center;
	height: 45px;
	line-height: 45px;
	color: var(--main);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border-bottom: 1px solid var(--classC)
}

.j-index .main .search-title svg {
	width: 20px;
	height: 20px;
	min-width: 20px;
	min-height: 20px;
	margin-right: 5px
}

.j-index .main .search-title section {
	display: flex;
	align-items: center
}

.j-index .main .search-title section .active {
	color: var(--main);
	margin: 0 5px
}

.j-index .main .index-title {
	display: flex;
	align-items: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border-bottom: 1px solid var(--classC)
}

.j-index .main .index-title h2 {
	position: relative;
	color: var(--main);
	font-size: 14px;
	font-weight: 500;
	height: 40px;
	line-height: 40px
}

.j-index .main .index-title h2::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--theme);
	z-index: 1
}

.j-index .main .index-title .notice {
	display: flex;
	align-items: center;
	margin-left: auto;
	height: 40px
}

.j-index .main .index-title .notice svg {
	min-width: 20px;
	min-height: 20px;
	width: 20px;
	height: 20px;
	margin-right: 5px
}

.j-index .main .index-title .notice a {
	color: var(--minor);
	font-size: 14px;
	line-height: 20px;
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.j-index .main .index-title .notice a:hover {
	color: var(--theme)
}

.j-index .main .index-ad {
	padding-top: 20px
}

.j-index .main .index-ad a {
	position: relative;
	display: block;
	transition: opacity 0.35s
}

.j-index .main .index-ad a img {
	width: 100%;
	height: 200px;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: calc(var(--radius-pc) / 2)
}

.j-index .main .index-ad a:hover {
	opacity: 0.85
}

.j-index .main .index-hot {
	padding-top: 20px
}

.j-index .main .index-hot .title {
	display: none
}

.j-index .main .index-hot .hot {
	display: flex;
	justify-content: space-around
}

.j-index .main .index-hot .hot li {
	width: 25%;
	padding: 0 7.5px
}

.j-index .main .index-hot .hot li:first-child {
	padding-left: 0
}

.j-index .main .index-hot .hot li:last-child {
	padding-right: 0
}

.j-index .main .index-hot .hot li a {
	position: relative;
	display: block;
	transition: opacity 0.35s
}

.j-index .main .index-hot .hot li a:hover {
	opacity: 0.85
}

.j-index .main .index-hot .hot li a:hover p {
	color: var(--theme)
}

.j-index .main .index-hot .hot li a img {
	width: 100%;
	height: 125px;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: calc(var(--radius-pc) / 2) calc(var(--radius-pc) / 2) 0 0
}

.j-index .main .index-hot .hot li a p {
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	padding: 0 10px;
	line-height: 32px;
	color: var(--minor);
	background: var(--classD);
	border-radius: 0 0 calc(var(--radius-pc) / 2) calc(var(--radius-pc) / 2)
}

.j-index .main .index-hot .hot li a span {
	display: flex;
	align-items: center;
	position: absolute;
	top: 5px;
	right: 5px;
	background: var(--theme);
	color: #fff;
	height: 20px;
	font-size: 12px;
	padding: 0 7px;
	border-radius: calc(var(--radius-pc) / 4);
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.j-index .main .index-banner {
	width: 100%;
	display: flex;
	padding-top: 20px
}

.j-index .main .index-banner .swiper-container {
	width: 0;
	min-width: 0;
	flex: 1;
	height: 340px;
	min-height: 340px;
	max-height: 340px;
	border-radius: calc(var(--radius-pc) / 2);
	overflow: hidden
}

.j-index .main .index-banner .swiper-container .swiper-slide {
	position: relative;
	display: block;
	background-size: cover;
	transition: opacity 0.35s;
	height: 340px;
	min-height: 340px;
	max-height: 340px;
	border-radius: calc(var(--radius-pc) / 2);
	overflow: hidden
}

.j-index .main .index-banner .swiper-container .swiper-slide .lazyload {
	width: 100%;
	height: 100%;
	min-height: 100%;
	max-height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

.j-index .main .index-banner .swiper-container .swiper-slide:hover {
	opacity: 0.85
}

.j-index .main .index-banner .swiper-container .swiper-slide .title {
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 15px;
	text-align: center;
	background: linear-gradient(to bottom, rgba(6,6,6,0), rgba(6,6,6,0.5));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #fff;
	font-size: 15px
}

.j-index .main .index-banner .swiper-container .swiper-slide .icon {
	position: absolute;
	top: 15px;
	left: 15px;
	width: 18px;
	height: 18px;
	fill: var(--background)
}

.j-index .main .index-banner .recommend {
	width: 270px;
	margin-left: 20px;
	display: flex;
	flex-direction: column
}

.j-index .main .index-banner .recommend a {
	position: relative;
	width: 100%;
	height: 160px;
	margin-bottom: 20px;
	border-radius: calc(var(--radius-pc) / 2);
	overflow: hidden;
	transition: opacity 0.35s
}

.j-index .main .index-banner .recommend a:hover {
	opacity: 0.85
}

.j-index .main .index-banner .recommend a:last-child {
	margin-bottom: 0
}

.j-index .main .index-banner .recommend a img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

.j-index .main .index-banner .recommend a .desc {
	display: flex;
	align-items: center;
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 10px;
	background: linear-gradient(to bottom, rgba(6,6,6,0), rgba(6,6,6,0.7));
	color: #fff;
	font-size: 14px;
	line-height: 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%
}

.j-index .main .index-banner .recommend a .desc .type {
	color: #fff;
	font-size: 12px;
	background-image: linear-gradient(to right, #fc712a, #f84c39);
	background-color: #f84c39;
	padding: 0 5px;
	height: 20px;
	line-height: 20px;
	border-radius: calc(var(--radius-pc) / 4);
	margin-right: 5px
}

.j-index .main .index-banner .recommend a .desc p {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.j-index .main .index-banner .recommend.noCarousel {
	width: 100%;
	flex-direction: row;
	margin-left: 0
}

.j-index .main .index-banner .recommend.noCarousel a {
	flex: 1;
	margin-bottom: 0;
	margin-left: 7.5px
}

.j-index .main .index-banner .recommend.noCarousel a:first-child {
	margin-left: 0;
	margin-right: 7.5px
}

.j-index .main .article .empty-result {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding-bottom: 50px;
	padding-top: 50px;
	font-size: 16px;
	color: var(--routine);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	height: 500px;
}

.j-index .main .article .empty-result svg {
	width: 100px;
	height: 100px;
	fill: var(--routine);
	margin-bottom: 20px
}

.j-index .main .article .article-list {
	position: relative;
	width: 100%;
	display: flex;
	padding: 20px 0;
	border-bottom: 1px solid var(--classC)
}

.j-index .main .article .article-list:last-child {
	border-bottom: none
}

.j-index .main .article .article-list .picture-box {
	position: relative;
	width: 210px;
	min-width: 210px;
	height: 140px;
	min-height: 140px;
	margin-right: 15px;
	border-radius: calc(var(--radius-pc) / 2);
	overflow: hidden
}

.j-index .main .article .article-list .picture-box img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

.j-index .main .article .article-list .picture-box span {
	position: absolute;
	top: 5px;
	right: 5px;
	background: var(--theme);
	height: 20px;
	line-height: 20px;
	padding: 0 10px;
	color: #fff;
	font-size: 12px;
	border-radius: 10px;
	transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	transition: transform 0.35s, -webkit-transform 0.35s;
	-webkit-transform: translate3d(120%, 0, 0);
	transform: translate3d(120%, 0, 0)
}

.j-index .main .article .article-list .picture-box svg {
	width: 20px;
	height: 20px;
	position: absolute;
	top: 5px;
	left: 5px;
	fill: var(--background)
}

.j-index .main .article .article-list .picture-box div {
	display: none;
	align-items: center;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 15px;
	font-size: 16px;
	background: linear-gradient(to bottom, rgba(6,6,6,0), rgba(6,6,6,0.7));
	color: rgba(255,255,255,0.85)
}

.j-index .main .article .article-list .picture-box div p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.j-index .main .article .article-list .entry-box {
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 0;
	min-width: 0;
	overflow: hidden;
	height: 140px
}

.j-index .main .article .article-list .entry-box .title {
	display: flex;
	align-items: center;
	margin-bottom: 10px
}

.j-index .main .article .article-list .entry-box .title .badge {
	height: 20px;
	line-height: 20px;
	background-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);
	color: var(--background);
	font-size: 12px;
	font-weight: normal;
	margin-right: 5px;
	border-radius: calc(var(--radius-pc) / 4);
	padding: 0 10px;
	white-space: nowrap;
	vertical-align: top
}

.j-index .main .article .article-list .entry-box .title a {
	color: var(--main);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 18px;
	line-height: 24px
}

.j-index .main .article .article-list .entry-box .title a:hover {
	color: var(--theme)
}

.j-index .main .article .article-list .entry-box .summary {
	display: -webkit-box;
	-webkit-line-clamp: 2;
/*! autoprefixer: off */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--minor);
	transition: opacity 0.35s;
	word-break: break-all;
	line-height: 22px;
	max-height: 46px
}

.j-index .main .article .article-list .entry-box .summary:hover {
	opacity: 0.8
}

.j-index .main .article .article-list .entry-box .meta {
	display: flex;
	margin-top: auto;
	align-items: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.j-index .main .article .article-list .entry-box .meta .item {
	display: flex;
	align-items: center;
	font-size: 13px;
	color: var(--minor);
	line-height: 20px
}

.j-index .main .article .article-list .entry-box .meta .item:nth-child(2) p {
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.j-index .main .article .article-list .entry-box .meta .item svg {
	width: 20px;
	height: 20px;
	fill: var(--minor);
	margin-right: 3px
}

.j-index .main .article .article-list .entry-box .meta .item a {
	color: var(--minor)
}

.j-index .main .article .article-list .entry-box .meta .item a:hover {
	color: var(--theme)
}

.j-index .main .article .article-list .entry-box .meta .item:last-child::after {
	display: none
}

.j-index .main .article .article-list .entry-box .meta .item::after {
	content: '/';
	display: block;
	color: #e1e1e1;
	padding: 0 5px
}

.j-index .main .article .article-list .entry-box .meta-xs {
	display: none;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid var(--classC);
	padding-top: 15px
}

.j-index .main .article .article-list .entry-box .meta-xs .item {
	display: flex;
	align-items: center;
	color: #bbb;
	font-size: 12px
}

.j-index .main .article .article-list .entry-box .meta-xs .item svg {
	width: 15px;
	height: 15px;
	fill: #bbb;
	margin-right: 5px;
	vertical-align: middle
}

.j-index .main .article .article-list::after {
	content: '';
	position: absolute;
	top: 20px;
	left: -20px;
	width: 4px;
	height: 25px;
	border-radius: 2px;
	background: var(--theme);
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	transition: transform 0.35s, -webkit-transform 0.35s
}

.j-index .main .article .article-list:hover .picture-box span {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0)
}

.j-index .main .article .article-list:hover::after {
	-webkit-transform: scaleY(1);
	transform: scaleY(1)
}

.j-index .main.type1 {
	padding: unset;
	background: unset;
	box-shadow: unset;
	border-radius: unset
}

.j-index .main.type1 .index-banner {
	background: var(--background);
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: var(--box-shadow);
	border-radius: var(--radius-pc)
}

.j-index .main.type1 .index-hot {
	background: var(--background);
	padding: 20px;
	box-shadow: var(--box-shadow);
	margin-bottom: 20px;
	border-radius: var(--radius-pc)
}

.j-index .main.type1 .index-ad {
	margin-bottom: 20px;
	box-shadow: var(--box-shadow);
	padding-top: unset;
	border-radius: var(--radius-pc)
}

.j-index .main.type1 .index-title {
	background: var(--background);
	padding: 0 20px;
	margin-bottom: 20px;
	border-radius: 20.5px
}

.j-index .main.type1 .index-title h2 {
	display: none
}

.j-index .main.type1 .index-title .notice {
	margin-left: unset
}

.j-index .main.type1 .search-title {
	background: var(--background);
	margin-bottom: 20px;
	border-bottom: unset;
	padding: 0 20px
}

.j-index .main.type1 .article .article-list {
	background: var(--background);
	padding: 20px;
	margin-bottom: 20px;
	border-bottom: unset;
	border-radius: var(--radius-pc)
}

.j-index .main.type1 .article .article-list:last-child {
	margin-bottom: unset
}

.j-index .main.type1 .article .article-list::after {
	left: 0
}

.j-ad {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 12px;
	background: rgba(0,0,0,0.25);
	padding: 2px 5px;
	border-radius: 2px;
	color: var(--classD)
}

.j-aside {
	transition: width 0.35s;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.j-aside .aside {
	display: block;
	width: 250px;
	margin-bottom: 20px;
	border-radius: var(--radius-pc);
	overflow: hidden;
	box-shadow: 1px 1px 5px var(--main);
	margin-left: 20px
}

.j-aside .aside:last-child {
	position: -webkit-sticky;
	position: sticky;
	margin-bottom: 0
}

.j-aside .aside h3 {
	display: flex;
    align-items: center;
    border-bottom: 1px solid var(--classC);
    font-size: 16px;
    font-weight: 600;
    height: 45px;
    line-height: 45px;
    padding: 0 15px;
    color: var(--main);
}

.j-aside .aside .empty {
	padding: 15px;
	text-align: center;
	font-size: 12px;
	color: var(--minor)
}

.j-aside .aside-ad {
	position: relative;
	height: 190px
}

.j-aside .aside-ad img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

.j-aside .aside-custom {
	padding: 15px;
	background: var(--background)
}

.j-aside .aside-visitor img {
	width: 100%
}

.j-aside .aside-wether {
	background: var(--background)
}

.j-aside .aside-wether .content {
	position: relative;
	padding: 15px;
	min-height: 300px
}

.j-aside .aside-wether .content .loading {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--background);
	z-index: 333;
	transition: opacity 0.35s
}

.j-aside .aside-wether .content .loading svg {
	width: 30px;
	height: 30px
}

.j-aside .aside-wether .content .loading svg path,.j-aside .aside-wether .content .loading svg rect {
	fill: var(--theme)
}

.j-aside .aside-wether .content .loading.active {
	opacity: 0;
	visibility: hidden
}

.j-aside .aside-cloud {
	background: var(--background)
}

.j-aside .aside-cloud .cloud {
	padding: 15px
}

.j-aside .aside-cloud .cloud svg {
	vertical-align: middle
}

.j-aside .aside-cloud #cloudList {
	display: none
}

.j-aside .aside-reply {
	background: var(--background)
}

.j-aside .aside-reply .list {
	padding: 15px
}

.j-aside .aside-reply .list li {
	margin-bottom: 15px;
	border-bottom: 1px dashed var(--classC);
	padding-bottom: 15px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.j-aside .aside-reply .list li:last-child {
	margin-bottom: 0;
	border-bottom-color: transparent;
	padding-bottom: 0
}

.j-aside .aside-reply .list li .user {
	display: flex;
	margin-bottom: 12px
}

.j-aside .aside-reply .list li .user img {
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	margin-right: 12px;
	border-radius: 50%;
	border: 1px solid var(--classA);
	padding: 3px
}

.j-aside .aside-reply .list li .user .info {
	display: flex;
	flex-direction: column;
	justify-content: space-between
}

.j-aside .aside-reply .list li .user .info .name {
	color: var(--main);
	font-weight: 600;
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.j-aside .aside-reply .list li .user .info span {
	font-size: 12px;	
}

.j-aside .aside-reply .list li .reply {
	position: relative;
	background: var(--classD);
	border-radius: 6px;
	padding: 5px 10px
}

.j-aside .aside-reply .list li .reply::before {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-bottom: 6px solid var(--classD);
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	position: absolute;
	left: 15px;
	bottom: 100%
}

.j-aside .aside-reply .list li .reply a {
	display: none;
	color: var(--minor);
	font-size: 13px;
	-webkit-line-clamp: 1;
/*! autoprefixer: off */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 500;
	line-height: 24px
}

.j-aside .aside-reply .list li .reply a .owo {
	height: 22px;
	vertical-align: top
}

.j-aside .aside-reply .list li .reply a:hover {
	color: var(--theme)
}

.j-aside .aside-reply .list li .reply a p {
	display: inline
}

.j-aside .aside-hot {
	background: var(--background)
}

.j-aside .aside-hot ul {
	padding: 15px
}

.j-aside .aside-hot ul li {
	margin-bottom: 15px
}

.j-aside .aside-hot ul li a {
	position: relative;
	display: block;
	border-radius: calc(var(--radius-pc) / 2);
	overflow: hidden
}

.j-aside .aside-hot ul li a:hover img {
	-webkit-transform: scale(1.2);
	transform: scale(1.2)
}

.j-aside .aside-hot ul li a img {
	width: 100%;
	height: 130px;
	-o-object-fit: cover;
	object-fit: cover;
	transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	transition: transform 0.35s, -webkit-transform 0.35s
}

.j-aside .aside-hot ul li a .info {
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 10px;
	background: linear-gradient(to bottom, rgba(6,6,6,0), rgba(6,6,6,0.7));
	font-size: 12px
}

.j-aside .aside-hot ul li a .info p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--background);
	line-height: 24px;
	font-size: 14px
}

.j-aside .aside-hot ul li a .info span {
	color: var(--seat)
}

.j-aside .aside-hot ul li a .tip {
	position: absolute;
	top: 5px;
	right: -20px;
	background: #7f7f8c;
	color: var(--background);
	width: 65px;
	text-align: center;
	font-size: 12px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	font-weight: 500
}

.j-aside .aside-hot ul li:nth-child(1) a .tip {
	background: #ff183e
}

.j-aside .aside-hot ul li:nth-child(2) a .tip {
	background: #ff5c38
}

.j-aside .aside-hot ul li:nth-child(3) a .tip {
	background: #ffb821
}

.j-aside .aside-hot ul li:last-child {
	margin-bottom: 0
}

.j-aside .aside-user {
	background: var(--background);
	padding: 45px 15px 15px;
	position: relative
}

.j-aside .aside-user:hover::after {
	display: block
}

.j-aside .aside-user::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 120px;
	background: url(../img/aside-author-bg.jpg) no-repeat;
	background-size: cover
}

.j-aside .aside-user::after {
	display: none;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 268px;
	background: url(../img/snow.gif) no-repeat;
	background-size: cover
}

.j-aside .aside-user .user {
	position: relative;
	z-index: 111;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 20px
}

.j-aside .aside-user .user img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	margin-bottom: 10px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background: var(--background);
	padding: 5px;
	transition: -webkit-transform 0.75s;
	transition: transform 0.75s;
	transition: transform 0.75s, -webkit-transform 0.75s
}

.j-aside .aside-user .user img:hover {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg)
}

.j-aside .aside-user .user a {
	color: var(--main);
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 500
}

.j-aside .aside-user .user a:hover {
	text-decoration: underline
}

.j-aside .aside-user .user .p {
	display: none;
	color: var(--main);
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.j-aside .aside-user .webinfo {
	width: 100%;
	padding-bottom: 20px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--classC)
}

.j-aside .aside-user .webinfo .item {
	width: 0;
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--routine);
	font-size: 12px
}

.j-aside .aside-user .webinfo .item .num {
	max-width: 70px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 500;
	font-size: 22px;
	color: var(--main);
	margin-bottom: 3px;
	text-shadow: var(--text_shadow)
}

.j-aside .aside-user .webinfo .item:first-child {
	border-right: 1px solid var(--classC)
}

.j-aside .aside-user .articles {
	width: 100%;
	overflow: hidden;
	padding-top: 15px
}

.j-aside .aside-user .articles li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	line-height: 32px
}

.j-aside .aside-user .articles li a {
	color: var(--routine);
	max-width: 85%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.j-aside .aside-user .articles li a:hover {
	color: var(--theme);
	text-decoration: underline
}

.j-aside .aside-user .articles li svg {
	width: 16px;
	height: 16px;
	fill: var(--routine)
}

.j-aside .aside-count {
	background: var(--background)
}

.j-aside .aside-count .content {
	padding: 15px
}

.j-aside .aside-count .content .item {
	margin-bottom: 15px
}

.j-aside .aside-count .content .item:last-child {
	margin-bottom: 0
}

.j-aside .aside-count .content .item .title {
	font-size: 12px;
	color: var(--minor);
	margin-bottom: 5px;
	display: flex;
	align-items: center
}

.j-aside .aside-count .content .item .title span {
	color: var(--minor);
	font-weight: 500;
	font-size: 14px;
	margin: 0 5px
}

.j-aside .aside-count .content .item .progress {
	display: flex;
	align-items: center
}

.j-aside .aside-count .content .item .progress .progress-bar {
	height: 10px;
	border-radius: 5px;
	overflow: hidden;
	background: var(--classC);
	width: 0;
	min-width: 0;
	flex: 1;
	margin-right: 5px
}

.j-aside .aside-count .content .item .progress .progress-bar .progress-inner {
	width: 0;
	height: 100%;
	border-radius: 5px;
	transition: width 0.35s;
	-webkit-animation: progress 750ms linear infinite;
	animation: progress 750ms linear infinite
}

.j-aside .aside-count .content .item .progress .progress-bar .progress-inner-1 {
	background: #bde6ff;
	background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
	background-size: 30px 30px
}

.j-aside .aside-count .content .item .progress .progress-bar .progress-inner-2 {
	background: #ffd980;
	background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
	background-size: 30px 30px
}

.j-aside .aside-count .content .item .progress .progress-bar .progress-inner-3 {
	background: #ffa9a9;
	background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
	background-size: 30px 30px
}

.j-aside .aside-count .content .item .progress .progress-bar .progress-inner-4 {
	background: #67c23a;
	background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
	background-size: 30px 30px
}

.j-aside .aside-count .content .item .progress .progress-percentage {
	color: var(--info)
}

.j-aside .aside-ranking {
	background: var(--background)
}

.j-aside .aside-ranking .list {
	padding: 10px 0
}

.j-aside .aside-ranking .list li {
	display: flex;
	align-items: center;
	line-height: 32px;
	padding: 0 15px
}

.j-aside .aside-ranking .list li span {
	color: var(--minor);
	font-weight: 700;
	font-size: 18px;
	width: 18px;
	min-width: 18px;
	max-width: 18px
}

.j-aside .aside-ranking .list li a {
	width: 0;
	min-width: 0;
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--routine)
}

.j-aside .aside-ranking .list li a:hover {
	color: var(--theme);
	text-decoration: underline
}

.j-aside .aside-ranking .list li:nth-child(1) span {
	color: #fe2d46
}

.j-aside .aside-ranking .list li:nth-child(2) span {
	color: #f60
}

.j-aside .aside-ranking .list li:nth-child(3) span {
	color: #faa90e
}

.j-pagination {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-top: 20px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.j-pagination li {
	margin-left: 5px
}

.j-pagination li:first-child {
	margin-left: 0
}

.j-pagination li a {
	display: flex;
	height: 32px;
	align-items: center;
	color: var(--main);
	padding: 0 15px;
	background: var(--background);
	border-radius: 2px;
	transition: background 0.35s, color 0.35s
}

.j-pagination li a:hover {
	background: var(--theme);
	color: var(--background)
}

.j-pagination li a:hover svg {
	fill: var(--background)
}

.j-pagination li a svg {
	width: 12px;
	height: 12px;
	fill: var(--routine);
	transition: fill 0.35s
}

.j-pagination li.next a svg {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg)
}

.j-pagination li.active a {
	background: var(--theme);
	color: #fff;
	font-weight: 500
}

.j-bread {
	padding-top: 20px
}

.j-bread ul {
	display: flex;
	align-items: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.j-bread ul li {
	color: var(--minor);
	white-space: nowrap
}

.j-bread ul li a {
	color: var(--routine)
}

.j-bread ul li a:hover {
	color: var(--theme)
}

.j-bread ul li.home {
	display: flex;
	align-items: center
}

.j-bread ul li.home svg {
	width: 15px;
	height: 15px;
	min-width: 15px;
	min-height: 15px;
	fill: var(--routine);
	margin-right: 2px
}

.j-bread ul li:nth-child(3) {
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 300px
}

.j-bread ul .line {
	color: var(--seat);
	padding: 0 7px
}

.j-post {
	display: flex;
	padding-top: 20px;
	padding-bottom: 20px
}

.j-post .j-floor {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -20px;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%)
}

.j-post .j-floor .contain {
	position: -webkit-sticky;
	position: sticky;
	transition: top 0.5s;
	background: var(--background);
	box-shadow: var(--box_shadow);
	padding: 15px;
	border-radius: var(--radius-pc);
	width: 200px;
	max-height: 444px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch
}

.j-post .j-floor .contain .title {
	font-weight: 700;
	color: var(--main);
	margin-bottom: 15px;
	font-size: 15px;
	line-height: 20px
}

.j-post .j-floor .contain ul li ul {
	padding-left: 2em
}

.j-post .j-floor .contain ul li ul ul {
	padding-left: 0
}

.j-post .j-floor .contain ul li a {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
	padding-left: 5px;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--routine);
	line-height: 32px
}

.j-post .j-floor .contain ul li a:hover {
	color: var(--theme)
}

.j-post .j-floor .contain ul li.visible>a {
	color: var(--theme)
}

.j-post .j-floor .contain .toc-marker {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none
}

.j-post .j-floor .contain .toc-marker path {
	transition: all 0.35s
}

.j-post .j-stretch {
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	padding: 20px 0
}

.j-post .j-stretch .contain {
	position: -webkit-sticky;
	position: sticky;
	transition: top 0.5s;
	-webkit-animation: swingIconSet 2s infinite linear alternate;
	animation: swingIconSet 2s infinite linear alternate;
	z-index: 333
}

.j-post .j-stretch .contain::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 25px;
	border-top: 2px solid var(--minor);
	border-right: 2px solid var(--minor);
	transition: border 0.35s
}

.j-post .j-stretch .contain svg {
	position: absolute;
	top: 25px;
	left: -3px;
	width: 24px;
	height: 24px;
	fill: var(--minor);
	cursor: pointer;
	transition: fill 0.35s
}

.j-post .j-stretch .contain:hover {
	-webkit-animation-play-state: paused;
	animation-play-state: paused
}

.j-post .j-stretch .contain:hover svg {
	fill: var(--theme)
}

.j-post .j-stretch .contain:hover::before {
	border-color: var(--theme)
}

.j-post .j-stretch.active {
	display: block
}

.j-post .video {
	position: relative;
	z-index: 1;
	margin: 20px 0
}

.j-post .video .player-box {
	position: relative;
	background: var(--classD);
	padding-top: 60px;
	margin-bottom: 20px
}

.j-post .video .player-box .title {
	position: absolute;
	top: 15px;
	left: -10px;
	background: var(--theme);
	color: var(--background);
	font-weight: 500;
	box-shadow: 2px 5px 10px rgba(49,58,70,0.15);
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	border-radius: 2px 2px 2px 0;
	max-width: 50%
}

.j-post .video .player-box .title::before {
	content: '';
	border-style: solid;
	border-width: 10px;
	display: block;
	position: absolute;
	bottom: -10px;
	left: 0;
	margin-bottom: -10px;
	z-index: -1;
	border-color: var(--theme) transparent transparent
}

.j-post .video .player-box .title span {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.j-post .video .player-box .player {
	padding: 15px;
	border-top: 1px solid var(--classA)
}

.j-post .video .player-box .player #j-dplayer {
	width: 100%;
	height: 500px;
	background: #000
}

.j-post .video .episodes {
	position: relative;
	background: var(--classD);
	padding-top: 60px
}

.j-post .video .episodes .title {
	position: absolute;
	top: 15px;
	left: -10px;
	background: var(--theme);
	color: var(--background);
	font-weight: 500;
	box-shadow: 2px 5px 10px rgba(49,58,70,0.15);
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	border-radius: 2px 2px 2px 0
}

.j-post .video .episodes .title::before {
	content: '';
	border-style: solid;
	border-width: 10px;
	display: block;
	position: absolute;
	bottom: -10px;
	left: 0;
	margin-bottom: -10px;
	z-index: -1;
	border-color: var(--theme) transparent transparent
}

.j-post .video .episodes ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	grid-auto-rows: 30px;
	gap: 20px;
	padding: 15px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border-top: 1px solid var(--classA)
}

.j-post .video .episodes ul li {
	height: 30px;
	line-height: 30px
}

.j-post .video .episodes ul li.active span {
	color: var(--background);
	background: var(--theme)
}

.j-post .video .episodes ul li span {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	padding: 0 10px;
	cursor: pointer;
	color: var(--minor);
	background: var(--background);
	box-shadow: var(--box-shadow);
	border-radius: 16px;
	transition: background 0.35s, color 0.35s
}

.j-post .video .episodes ul li span:hover {
	color: var(--background);
	background: var(--theme)
}

.j-post .video #j-dplayer-iframe {
	border: none;
	width: 100%;
	height: 500px;
	background: #000
}

.j-post .main {
	padding: 20px;
	background: var(--background);
	box-shadow: 1px 1px 5px var(--main);
	border-radius: var(--radius-pc);
	margin-bottom: 20px
}

.j-post .main .classify {
	display: flex;
	align-items: center
}

.j-post .main .classify .category {
	display: flex;
	align-items: center;
	flex-wrap: wrap
}

.j-post .main .classify .category a {
	color: #fff;
	font-size: 12px;
	background: var(--theme);
	padding: 3px 8px;
	margin-right: 5px;
	border-radius: 2px;
	margin-bottom: 20px;
	white-space: nowrap;
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 2px;
}

.j-post .main .classify .category a:nth-child(1) {
	background: #15a5ed
}

.j-post .main .classify .category a:nth-child(2) {
	background: #f56c6c
}

.j-post .main .classify .category a:nth-child(3) {
	background: #ed157a
}

.j-post .main .classify .category a:nth-child(4) {
	background: #ed7615
}

.j-post .main .classify .category a:nth-child(5) {
	background: #1fc46a
}

.j-post .main .classify .category a:last-child {
	margin-right: 0
}

.j-post .main .classify .category a:hover {
	opacity: 0.85
}

.j-post .main .classify .edit {
	color: var(--minor);
	margin-left: auto;
	margin-bottom: 20px;
	line-height: 22px
}

.j-post .main .classify .edit:hover {
	opacity: 0.85
}

.j-post .main .header {
	margin-bottom: 20px;
	border-bottom: 1px solid var(--classB)
}

.j-post .main .header .title {
	font-size: 24px;
	color: var(--main);
	font-weight: 500;
	display: -webkit-box;
	-webkit-line-clamp: 2;
/*! autoprefixer: off */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	text-shadow: var(--text_shadow);
	text-align: center;
	margin-bottom: 20px;
	opacity: 0
}

.j-post .main .header .conting {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px
}

.j-post .main .header .conting .info {
	display: flex;
	align-items: center;
	height: 42px
}

.j-post .main .header .conting .info img {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	margin-right: 10px;
	border: 1px solid var(--classA);
	padding: 3px
}

.j-post .main .header .conting .info .meta {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 35px;
	color: var(--minor);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-size: 12px
}

.j-post .main .header .conting .info .meta .author a {
	font-weight: 500;
	color: var(--main)
}

.j-post .main .header .conting .info .meta .author a:hover {
	text-decoration: underline
}

.j-post .main .header .conting .info .meta .item {
	display: flex;
	align-items: center
}

.j-post .main .header .conting .info .meta .item .line {
	color: var(--seat);
	margin: 0 7px
}

.j-post .main .header .conting .info .meta .item #baiduIncluded a {
	color: #e6a23c
}

.j-post .main .header .conting .info .meta .item #baiduIncluded a:hover {
	text-decoration: underline
}

.j-post .main .header .conting .info .meta .item #baiduIncluded span {
	color: #e6a23c
}

.j-post .main .header .conting .info .meta .item #baiduIncluded span:hover {
	cursor: pointer;
	opacity: 0.85
}

.j-post .main .header .conting .time {
	font-size: 32px;
	line-height: 42px;
	color: var(--routine);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-shadow: var(--text_shadow);
	font-family: consolas
}

.j-post .main .markdown {
	word-wrap: break-word;
	font-size: 15px
}

.j-post .main .markdown h1,.j-post .main .markdown h2,.j-post .main .markdown h3,.j-post .main .markdown h4,.j-post .main .markdown h5,.j-post .main .markdown h6 {
	color: var(--main);
	margin: 20px 0;
	font-size: 20px
}

.j-post .main .markdown h1 {
	position: relative
}

.j-post .main .markdown h1::before {
	content: '#';
	color: var(--theme);
	margin-right: 7px;
	font-weight: 600
}

.j-post .main .markdown h2 {
	position: relative;
	padding: 0 15px
}

.j-post .main .markdown h2::before {
	content: '';
	position: absolute;
	top: 10%;
	left: 0;
	bottom: 10%;
	width: 4px;
	border-radius: 2px;
	background: var(--theme)
}

.j-post .main .markdown h3 {
	position: relative
}

.j-post .main .markdown h3::before {
	content: '「';
	color: var(--theme);
	margin-right: 5px;
	font-weight: 600
}

.j-post .main .markdown h3::after {
	content: '」';
	color: var(--theme);
	margin-left: 5px;
	font-weight: 600
}

.j-post .main .markdown h4 span {
	padding: 3px 0;
	background: linear-gradient(to bottom, transparent 60%, rgba(189,202,219,0.3) 0) no-repeat;
	line-height: 30px
}

.j-post .main .markdown h5 span {
	position: relative;
	-o-border-image: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) 1 1;
	border-image: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) 1 1;
	border-style: solid;
	border-bottom-width: 3px;
	border-top-width: 0;
	border-left-width: 0;
	border-right-width: 0;
	line-height: 30px;
	padding-bottom: 3px
}

.j-post .main .markdown h6 span {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff3300' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%;
	background-size: 20px auto;
	-webkit-animation: waveMove 1s infinite linear;
	animation: waveMove 1s infinite linear;
	line-height: 30px;
	padding-bottom: 5px
}

.j-post .main .markdown blockquote {
	background: var(--classD);
	padding: 15px 20px;
	border-left: 4px solid var(--seat);
	margin: 20px 0
}

.j-post .main .markdown blockquote p {
	font-weight: 500;
	margin: 0
}

.j-post .main .markdown ol {
	color: var(--routine);
	margin: 20px 0;
	padding: 0 40px
}

.j-post .main .markdown ol li {
	list-style: decimal;
	margin-bottom: 10px;
	line-height: 26px
}

.j-post .main .markdown ol li:last-child {
	margin-bottom: 0
}

.j-post .main .markdown ul {
	color: var(--routine);
	margin: 20px 0;
	padding: 0 40px
}

.j-post .main .markdown ul li {
	list-style: disc;
	margin-bottom: 10px;
	line-height: 26px
}

.j-post .main .markdown ul li::marker {
	color: var(--theme)
}

.j-post .main .markdown ul li:last-child {
	margin-bottom: 0
}

.j-post .main .markdown em {
	font-style: italic
}

.j-post .main .markdown table {
	width: 100%;
	margin: 20px 0;
	box-shadow: 1px 3px 5px rgba(0,0,0,1);
	overflow: auto;
	-webkit-overflow-scrolling: touch
}

.j-post .main .markdown table thead th {
	background: var(--classA);
	color: var(--routine);
	max-width: 250px
}

.j-post .main .markdown table td {
	color: var(--routine)
}

.j-post .main .markdown table tr {
	background: var(--background)
}

.j-post .main .markdown table tr:nth-child(2n) {
	background: var(--classD)
}

.j-post .main .markdown table th,.j-post .main .markdown table td {
	padding: 10px;
	max-width: 300px
}

.j-post .main .markdown iframe {
	border: none;
	max-width: 100%
}

.j-post .main .markdown img:not(.owo) {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 4px;
	-o-object-fit: cover;
	object-fit: cover
}

.j-post .main .markdown .owo {
	width: 24px
}

.j-post .main .markdown a {
	font-weight: 500;
	color: var(--routine)
}

.j-post .main .markdown a:hover {
	text-decoration: underline
}

.j-post .main .markdown hr {
	margin: 20px 0;
	border: none;
	height: 1px;
	background-color: var(--classB)
}

.j-post .main .markdown strong {
	color: var(--main);
	font-weight: 700
}

.j-post .main .markdown p {
	color: var(--routine);
	line-height: 26px;
	margin: 20px 0;
	text-align: justify;
	white-space: pre-wrap;
	word-spacing: 5px;
	letter-spacing: 1px;
	word-break: break-all;
	text-indent: 30px
}

.j-post .main .markdown .hljs {
	max-width: 100%;
	max-height: 550px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	padding: 10px 15px 10px 50px;
	line-height: 1.5;
	border-radius: 0 0 4px 4px;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
}

.j-post .main .markdown .hljs::-webkit-scrollbar-track {
	border-radius: 0;
	background: rgba(50,50,50,0.4)
}

.j-post .main .markdown .hljs ol {
	color: unset;
	margin: unset;
	padding: unset;
	border-left: 1px solid #ccc
}

.j-post .main .markdown .hljs ol li {
	margin-bottom: unset;
	line-height: unset;
	padding-left: 15px
}

.j-post .main .markdown .hljs-pre {
	position: relative;
	padding-top: 30px;
	margin: 20px 0
}

.j-post .main .markdown .hljs-pre::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 30px;
	background: #2b2b2b;
	border-radius: 4px 4px 0 0
}

.j-post .main .markdown .hljs-pre::before {
	content: '';
	position: absolute;
	top: 9px;
	left: 10px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fc625d;
	box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
	z-index: 1
}

.j-post .main .markdown .need-reply {
	border: 1px dashed var(--success);
	text-align: center;
	padding: 10px 20px;
	color: var(--routine);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.j-post .main .markdown .need-reply span {
	color: var(--danger);
	cursor: pointer
}

.j-post .main .markdown .need-reply span:hover {
	text-decoration: underline
}

.j-post .main .markdown .reply-content {
	color: var(--routine);
	line-height: 26px;
	margin: 20px 0;
	text-align: justify;
	white-space: pre-wrap;
	word-spacing: 5px;
	letter-spacing: 1px;
	word-break: break-all
}

.j-post .main .markdown .protected {
	display: flex;
	justify-content: center;
	padding: 30px;
	background: var(--classB)
}

.j-post .main .markdown .protected .form {
	position: relative;
	box-shadow: var(--box-shadow)
}

.j-post .main .markdown .protected .form svg {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	left: 15px
}

.j-post .main .markdown .protected .form input[type='password'] {
	width: 300px;
	height: 44px;
	padding: 0 43px;
	border: none;
	border-radius: 4px;
	color: var(--routine)
}

.j-post .main .markdown .protected .form button[type='submit'] {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	background: none;
	height: 44px;
	width: 44px;
	transition: opacity 0.35s
}

.j-post .main .markdown .protected .form button[type='submit']:hover {
	opacity: 0.85
}

.j-post .main .markdown .iframe-dplayer {
	width: 100%;
	height: 450px;
	border: none;
	margin: 20px 0
}

.j-post .main .markdown .iframe-music {
	display: block;
	margin: 20px auto
}

.j-post .main .tags {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 15px;
	flex-wrap: wrap
}

.j-post .main .tags .list {
	display: flex
}

.j-post .main .tags .list a {
	height: 26px;
	line-height: 26px;
	padding: 0 15px;
	background: var(--classC);
	font-size: 14px;
	margin-right: 10px;
	color: var(--minor);
	border-radius: 13px;
	transition: opacity 0.35s
}

.j-post .main .tags .list a:last-child {
	margin-right: 0
}

.j-post .main .tags .list a:nth-child(n+6) {
	display: none
}

.j-post .main .tags .list a:hover {
	opacity: 0.75
}

.j-post .main .tags .handle {
	display: flex;
	align-items: center
}

.j-post .main .tags .handle .item {
	position: relative;
	cursor: pointer;
	display: flex;
	align-items: center;
	color: #FFF;
	background: var(--theme);
	border: none;
	height: 32px;
	padding: 0 15px;
	border-radius: 3px;
	margin-left: 10px;
	font-size: 12px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition: opacity 0.35s
}

.j-post .main .tags .handle .item:hover {
	opacity: 0.85
}

.j-post .main .tags .handle .item svg {
	width: 15px;
	height: 15px;
	fill: #FFF;
	margin-right: 5px
}

.j-post .main .tags .handle .item:first-child {
	margin-left: 0
}

.j-post .main .tags .handle .share {
	position: relative;
	margin-left: 10px
}

.j-post .main .tags .handle .share .j-dropdown {
	top: 42px;
	width: 120px
}

.j-post .main .tags .handle .share .j-dropdown #j-share-code {
	border-top: 1px solid var(--classD);
	padding-top: 15px
}

.j-post .main .banquan {
	border-top: 1px solid var(--classB);
	padding-top: 20px;
	margin-top: 20px
}

.j-post .main .banquan .content {
	background: var(--classD);
	padding: 15px
}

.j-post .main .banquan .content .item {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: var(--minor);
	line-height: 26px;
	white-space: nowrap
}

.j-post .main .banquan .content .item:last-child {
	margin-bottom: 0
}

.j-post .main .banquan .content .item svg {
	width: 18px;
	height: 18px;
	min-width: 18px;
	min-height: 18px;
	margin-right: 8px
}

.j-post .main .banquan .content .item span {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.j-post .main .banquan .content .item a {
	color: var(--minor)
}

.j-post .main .banquan .content .item a:hover {
	color: var(--theme);
	text-decoration: underline
}

.j-post .main .banquan .content .item p {
	overflow: hidden;
	text-overflow: ellipsis
}

.j-post .main .related {
	padding-top: 20px
}

.j-post .main .related .title {
	border-left: 3px solid var(--theme);
	padding-left: 15px;
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 20px;
	color: var(--main)
}

.j-post .main .related ul {
	display: flex
}

.j-post .main .related ul li {
	width: 25%;
	padding: 0 7.5px;
	overflow: hidden;
	transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s
}

.j-post .main .related ul li:hover {
	opacity: 0.85;
	-webkit-transform: translate3d(0, -5px, 0);
	transform: translate3d(0, -5px, 0)
}

.j-post .main .related ul li a {
	display: block
}

.j-post .main .related ul li a img {
	width: 100%;
	height: 120px;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: calc(var(--radius-pc) / 2) calc(var(--radius-pc) / 2) 0 0
}

.j-post .main .related ul li a span {
	display: block;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
	color: var(--minor);
	background: var(--classD);
	padding: 0 10px;
	line-height: 32px;
	font-size: 12px;
	border-radius: 0 0 calc(var(--radius-pc) / 2) calc(var(--radius-pc) / 2)
}

.j-post .main .links {
	display: flex;
	flex-wrap: wrap
}

.j-post .main .links li {
	width: 33.3333333%;
	padding: 15px
}

.j-post .main .links li .item {
	padding: 20px;
	border-radius: calc(var(--radius-pc) / 2);
	box-shadow: var(--box-shadow)
}

.j-post .main .links li .item .title {
	margin-bottom: 20px
}

.j-post .main .links li .item .title a {
	font-size: 16px;
	font-weight: 500;
	border-bottom: 1px solid var(--background);
	color: var(--background);
	transition: all 0.35s
}

.j-post .main .links li .item .title a:hover {
	color: var(--theme);
	border-color: var(--theme)
}

.j-post .main .links li .item .content {
	display: flex;
	align-items: center;
	justify-content: space-between
}

.j-post .main .links li .item .content .desc {
	color: var(--background);
	margin-right: 10px
}

.j-post .main .links li .item .content img {
	width: 40px;
	height: 40px;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: 50%
}

.j-post .main .links li .item.deepgrey {
	background: rgba(0,0,0,0.5)
}

.j-post .main .links li .item.blue {
	background: #6fa3ef
}

.j-post .main .links li .item.purple {
	background: #bc99c4
}

.j-post .main .links li .item.green {
	background: #46c47c
}

.j-post .main .links li .item.yellow {
	background: #f9bb3c
}

.j-post .main .links li .item.red {
	background: #e8583d
}

.j-post .main .links li .item.orange {
	background: #f68e5f
}

.j-post .main .links li .item.success {
	background: #67c23a
}

.j-post .main .links li .item.warning {
	background: #e6a23c
}

.j-post .main .links li .item.danger {
	background: #f56c6c
}

.j-post .main .links li .item.info {
	background: #909399
}

.j-post .main .leaving {
	position: relative;
	min-height: 550px
}

.j-post .main .leaving li {
	display: none;
	flex-direction: column;
	cursor: move;
	width: 200px;
	position: absolute;
	overflow: hidden;
	border-bottom-left-radius: 20px 500px;
	border-bottom-right-radius: 500px 30px;
	border-top-left-radius: 100px 20px;
	border-top-right-radius: 20px 100px;
	box-shadow: 0 2px 10px 1px rgba(0,0,0,0.2);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-size: 14px;
	color: var(--background)
}

.j-post .main .leaving li .head {
	pointer-events: none;
	height: 42px;
	line-height: 42px;
	padding: 10px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--classD);
	color: var(--background)
}

.j-post .main .leaving li .head img {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	margin-right: 5px
}

.j-post .main .leaving li .head span:nth-child(2) {
	margin-right: 5px;
	flex: 1;
	width: 0;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

.j-post .main .leaving li .head span:last-child {
	margin-left: auto
}

.j-post .main .leaving li .body {
	height: 158px;
	padding: 10px
}

.j-post .main .leaving li .body .content {
	max-height: 100%;
	overflow-y: auto;
	word-wrap: break-word;
	line-height: 24px;
	-webkit-overflow-scrolling: touch
}

.j-post .main .leaving li .body .content .canvas {
	width: 100%
}

.j-post .main .leaving li .body .content .owo {
	height: 22px;
	vertical-align: top
}

.j-post .main .none {
	color: var(--minor);
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.j-post .page {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px
}

.j-post .page li {
	list-style: none
}

.j-post .page li.right {
	margin-left: auto
}

.j-post .page li a {
	display: block;
	height: 32px;
	line-height: 32px;
	padding: 0 15px;
	color: #FFF;
	border-radius: 3px;
	background: var(--theme);
	transition: opacity 0.35s;
	font-size: 12px
}

.j-post .page li a:hover {
	opacity: 0.85
}

.j-post .video-api .video-type,.j-post .video-api .video-list,.j-post .video-api .video-info,.j-post .video-api .video-list-play {
	position: relative;
	background: var(--background);
	border-radius: var(--radius-pc);
	box-shadow: var(--box-shadow);
	padding: 60px 0 0
}

.j-post .video-api .video-type .title,.j-post .video-api .video-list .title,.j-post .video-api .video-info .title,.j-post .video-api .video-list-play .title {
	position: absolute;
	top: 15px;
	left: -10px;
	background: var(--theme);
	color: var(--background);
	font-weight: 500;
	box-shadow: 2px 5px 10px rgba(49,58,70,0.15);
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	border-radius: 2px 2px 2px 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.j-post .video-api .video-type .title::before,.j-post .video-api .video-list .title::before,.j-post .video-api .video-info .title::before,.j-post .video-api .video-list-play .title::before {
	content: '';
	border-style: solid;
	border-width: 10px;
	display: block;
	position: absolute;
	bottom: -10px;
	left: 0;
	margin-bottom: -10px;
	z-index: -1;
	border-color: var(--theme) transparent transparent
}

.j-post .video-api .video-type .search,.j-post .video-api .video-list .search,.j-post .video-api .video-info .search,.j-post .video-api .video-list-play .search {
	position: absolute;
	top: 15px;
	right: 10px;
	display: flex;
	align-items: center
}

.j-post .video-api .video-type .search input,.j-post .video-api .video-list .search input,.j-post .video-api .video-info .search input,.j-post .video-api .video-list-play .search input {
	width: 180px;
	height: 32px;
	border: 1px solid var(--classB);
	border-right: 1px solid transparent;
	padding: 0 10px;
	color: var(--minor);
	font-size: 13px;
	border-radius: 3px 0 0 3px;
	transition: border 0.35s;
	-webkit-appearance: none
}

.j-post .video-api .video-type .search input:focus,.j-post .video-api .video-list .search input:focus,.j-post .video-api .video-info .search input:focus,.j-post .video-api .video-list-play .search input:focus {
	border: 1px solid var(--theme)
}

.j-post .video-api .video-type .search button,.j-post .video-api .video-list .search button,.j-post .video-api .video-info .search button,.j-post .video-api .video-list-play .search button {
	display: flex;
	align-items: center;
	padding: 0 10px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	background: #f5f7fa;
	border: 1px solid var(--classB);
	border-left: none;
	border-radius: 0 3px 3px 0
}

.j-post .video-api .video-type .search button svg,.j-post .video-api .video-list .search button svg,.j-post .video-api .video-info .search button svg,.j-post .video-api .video-list-play .search button svg {
	width: 14px;
	height: 14px;
	fill: var(--routine)
}

.j-post .video-api .video-type .list-item,.j-post .video-api .video-list .list-item,.j-post .video-api .video-info .list-item,.j-post .video-api .video-list-play .list-item {
	padding: 15px;
	border-top: 1px solid var(--classB);
	display: grid;
	grid-template-columns: repeat(auto-fit, 80px);
	gap: 20px
}

.j-post .video-api .video-type .list-item li,.j-post .video-api .video-list .list-item li,.j-post .video-api .video-info .list-item li,.j-post .video-api .video-list-play .list-item li {
	background: var(--classD);
	height: 28px;
	line-height: 28px;
	text-align: center;
	border-radius: 14px;
	cursor: pointer;
	color: var(--routine);
	font-size: 12px;
	transition: box-shadow 0.35s, -webkit-transform 0.35s;
	transition: transform 0.35s, box-shadow 0.35s;
	transition: transform 0.35s, box-shadow 0.35s, -webkit-transform 0.35s;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.j-post .video-api .video-type .list-item li:hover,.j-post .video-api .video-list .list-item li:hover,.j-post .video-api .video-info .list-item li:hover,.j-post .video-api .video-list-play .list-item li:hover {
	-webkit-transform: translate3d(0, -3px, 0);
	transform: translate3d(0, -3px, 0);
	box-shadow: 0 5px 5px rgba(0,0,0,0.1)
}

.j-post .video-api .video-type .list-item li.active,.j-post .video-api .video-list .list-item li.active,.j-post .video-api .video-info .list-item li.active,.j-post .video-api .video-list-play .list-item li.active {
	color: var(--background);
	background: var(--theme);
	box-shadow: 0 5px 5px rgba(0,0,0,0.1)
}

.j-post .video-api .video-type {
	margin-bottom: 20px
}

.j-post .video-api .video-list .list {
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid var(--classB);
	padding: 10px
}

.j-post .video-api .video-list .list li {
	width: 16.6666666666%;
	padding: 10px;
	-webkit-animation: jScaleUp 0.5s;
	animation: jScaleUp 0.5s
}

.j-post .video-api .video-list .list li a {
	background: var(--background);
	position: relative;
	display: block;
	transition: box-shadow 0.35s, -webkit-transform 0.35s;
	transition: box-shadow 0.35s, transform 0.35s;
	transition: box-shadow 0.35s, transform 0.35s, -webkit-transform 0.35s
}

.j-post .video-api .video-list .list li a img {
	width: 100%;
	height: 220px;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: 4px
}

.j-post .video-api .video-list .list li a h2 {
	font-size: 15px;
	color: var(--main);
	font-weight: normal;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	padding: 10px
}

.j-post .video-api .video-list .list li a i {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 12px;
	color: var(--background);
	padding: 2px 5px;
	border-radius: 2px;
	background: var(--theme);
	font-style: normal
}

.j-post .video-api .video-list .list li a:hover {
	box-shadow: 0 15px 30px rgba(0,0,0,0.1);
	-webkit-transform: translateY(-3px);
	transform: translateY(-3px)
}

.j-post .video-api .video-list .list li a:hover img {
	border-radius: 4px 4px 0 0
}

.j-post .video-api .video-info {
	margin-bottom: 20px
}

.j-post .video-api .video-info .info {
	padding: 20px;
	border-top: 1px solid var(--classB);
	display: flex
}

.j-post .video-api .video-info .info .image {
	position: relative;
	margin-right: 20px
}

.j-post .video-api .video-info .info .image img {
	width: 170px;
	height: 240px;
	-o-object-fit: cover;
	object-fit: cover
}

.j-post .video-api .video-info .info .image i {
	position: absolute;
	top: 10px;
	right: 10px;
	font-style: normal;
	font-size: 12px;
	background: var(--theme);
	color: var(--background);
	padding: 3px 7px;
	border-radius: 2px
}

.j-post .video-api .video-info .info dl {
	flex: 1;
	min-width: 0;
	overflow: hidden
}

.j-post .video-api .video-info .info dl dt {
	font-size: 24px;
	color: var(--main);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 15px
}

.j-post .video-api .video-info .info dl dd {
	display: -webkit-box;
	-webkit-line-clamp: 3;
/*! autoprefixer: off */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 24px;
	margin-bottom: 5px
}

.j-post .video-api .video-info .info dl dd span:first-child {
	color: var(--minor)
}

.j-post .video-api .video-info .info dl dd span:last-child {
	color: var(--routine)
}

.j-post .video-api .video-info .info dl dd:last-child {
	margin-bottom: 0
}

.j-post .video-api .video-info .player {
	padding: 20px;
	border-top: 1px solid var(--classB)
}

.j-post .video-api .video-info .player iframe {
	width: 100%;
	height: 480px;
	background: #000
}

.j-post .video-api .video-info .player p {
	text-align: center;
	color: var(--routine);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.j-post .video-api .video-list-play {
	margin-bottom: 20px
}

.j-post .video-api .video-list-play:last-child {
	margin-bottom: 0
}

.j-post .video-api .load {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px 0
}

.j-post .wallpaper-api .wallpaper-type {
	position: relative;
	background: var(--background);
	border-radius: var(--radius-pc);
	box-shadow: var(--box-shadow);
	padding: 60px 0 0;
	margin-bottom: 20px
}

.j-post .wallpaper-api .wallpaper-type .title {
	position: absolute;
	top: 15px;
	left: -10px;
	background: var(--theme);
	color: var(--background);
	font-weight: 500;
	box-shadow: 2px 5px 10px rgba(49,58,70,0.15);
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	border-radius: 2px 2px 2px 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.j-post .wallpaper-api .wallpaper-type .title::before {
	content: '';
	border-style: solid;
	border-width: 10px;
	display: block;
	position: absolute;
	bottom: -10px;
	left: 0;
	margin-bottom: -10px;
	z-index: -1;
	border-color: var(--theme) transparent transparent
}

.j-post .wallpaper-api .wallpaper-type .list {
	padding: 15px;
	border-top: 1px solid var(--classB);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 15px
}

.j-post .wallpaper-api .wallpaper-type .list li {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: var(--classD);
	height: 28px;
	line-height: 28px;
	text-align: center;
	border-radius: 14px;
	padding: 0 15px;
	cursor: pointer;
	color: var(--routine);
	font-size: 12px;
	transition: box-shadow 0.35s, -webkit-transform 0.35s;
	transition: transform 0.35s, box-shadow 0.35s;
	transition: transform 0.35s, box-shadow 0.35s, -webkit-transform 0.35s;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.j-post .wallpaper-api .wallpaper-type .list li:hover {
	-webkit-transform: translate3d(0, -3px, 0);
	transform: translate3d(0, -3px, 0);
	box-shadow: 0 5px 5px rgba(0,0,0,0.1)
}

.j-post .wallpaper-api .wallpaper-type .list li.active {
	color: var(--background);
	background: var(--theme);
	box-shadow: 0 5px 5px rgba(0,0,0,0.1)
}

.j-post .wallpaper-api .wallpaper-list {
	padding: 15px;
	background: var(--background);
	border-radius: var(--radius-pc);
	box-shadow: var(--box-shadow)
}

.j-post .wallpaper-api .wallpaper-list .list {
	display: flex;
	flex-wrap: wrap
}

.j-post .wallpaper-api .wallpaper-list .list .item {
	position: relative;
	width: 25%;
	display: block;
	-webkit-animation: showWallpaper 1s;
	animation: showWallpaper 1s
}

.j-post .wallpaper-api .wallpaper-list .list .item img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

.j-post .wallpaper-api .wallpaper-list .list .item .down {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 50%;
	background: rgba(0,0,0,0.5)
}

.j-post .wallpaper-api .wallpaper-list .list .item .down a {
	display: block
}

.j-post .wallpaper-api .wallpaper-list .wallpaper-load {
	margin: 0 auto;
	width: 120px;
	height: 34px;
	line-height: 34px;
	background: var(--theme);
	color: #fff;
	text-align: center;
	border-radius: 17px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin-top: 20px
}

.j-post .wallpaper-api .load {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px 0
}

code {
	display: inline-block;
	vertical-align: top;
	min-height: 26px;
	line-height: 26px;
	border-radius: 4px;
	font-size: 14px;
	background: var(--classD);
	padding: 0 5px;
	color: var(--danger);
	font-weight: 600;
	margin: 0 3px;
	text-indent: initial;
}

pre code {
	display: unset;
	vertical-align: unset;
	height: unset;
	line-height: unset;
	border-radius: unset;
	font-size: unset;
	background: unset;
	padding: unset;
	color: unset;
	margin: unset
}

.j-fabulous {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px
}

.j-fabulous .button {
	display: flex;
	align-items: center
}

.j-fabulous .button .left,.j-fabulous .button .right {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	white-space: nowrap;
	text-align: center;
	cursor: pointer;
	padding: 0 15px;
	color: var(--background);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition: opacity 0.35s
}

.j-fabulous .button .left svg,.j-fabulous .button .right svg {
	width: 15px;
	height: 15px;
	fill: var(--background);
	margin-right: 5px
}

.j-fabulous .button .left:hover,.j-fabulous .button .right:hover {
	opacity: 0.85
}

.j-fabulous .button .left {
	border-radius: 17px;
	background: #ec7259
}

.j-fabulous .button .right {
	background: #ffab2e;
	border-radius: 0 17px 17px 0
}

.j-fabulous .button.has-admire .left {
	border-radius: 17px 0 0 17px
}

.j-modal-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 888;
	background: rgba(0,0,0,0.75);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s, visibility 0.5s
}

.j-modal-mask.active {
	visibility: visible;
	opacity: 1
}

.j-admire-modal {
	display: flex;
	align-items: center;
	justify-content: center
}

.j-admire-modal .content {
	position: relative;
	width: 460px;
	background: var(--background);
	border-radius: var(--radius-pc);
	padding: 30px 0;
	transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	transition: transform 0.5s, -webkit-transform 0.5s;
	-webkit-transform: translate3d(0, -50%, 0);
	transform: translate3d(0, -50%, 0)
}

.j-admire-modal .content .title {
	color: var(--main);
	margin-bottom: 30px;
	text-align: center;
	font-size: 16px;
	text-shadow: var(--text-shadow)
}

.j-admire-modal .content .code {
	width: 170px;
	height: 170px;
	padding: 10px;
	border: 6px solid var(--theme);
	margin: 0 auto 30px;
	border-radius: 3px
}

.j-admire-modal .content .code img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

.j-admire-modal .content .tips {
	position: relative;
	text-align: center;
	font-size: 12px;
	color: var(--routine);
	margin-bottom: 30px
}

.j-admire-modal .content .tips p {
	margin-bottom: 5px
}

.j-admire-modal .content .tips p:last-child {
	margin-bottom: 0
}

.j-admire-modal .content .tips img {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: -28px
}

.j-admire-modal .content .type {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px
}

.j-admire-modal .content .type .item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--info);
	margin: 0 30px
}

.j-admire-modal .content .type .item svg {
	width: 40px;
	height: 40px;
	margin-bottom: 5px
}

.j-admire-modal .content .info {
	text-align: center;
	color: var(--info)
}

.j-admire-modal .content .close {
	position: absolute;
	top: -15px;
	right: -15px;
	width: 30px;
	height: 30px;
	fill: var(--classA);
	cursor: pointer;
	transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	transition: transform 0.35s, -webkit-transform 0.35s
}

.j-admire-modal .content .close:hover {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg)
}

.j-admire-modal.active .content {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0)
}

.j-copy {
	cursor: pointer
}

.j-comment {
	background: var(--background);
	border-radius: var(--radius-pc);
	box-shadow: 1px 1px 5px var(--main);
	padding: 20px
}

.j-comment .title {
	font-weight: 500;
	text-align: center;
	font-size: 24px;
	color: var(--main);
	text-shadow: var(--text-shadow);
	margin-bottom: 20px;
	border-bottom: 1px solid var(--classB);
	padding-bottom: 20px
}

.j-comment .respond form {
	border-radius: 6px 0 6px 6px;
	background: var(--classD)
}

.j-comment .respond form .head {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--classA)
}

.j-comment .respond form .head .head-item {
	position: relative;
	flex: 1;
	width: 0;
	min-width: 0
}

.j-comment .respond form .head .head-item input {
	width: 100%;
	border: none;
	background: transparent;
	padding: 0 15px;
	height: 45px;
	color: var(--routine);
	font-size: 14px
}

.j-comment .respond form .head .head-item:nth-child(2)::before,.j-comment .respond form .head .head-item:nth-child(2)::after {
	content: '';
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 1px;
	height: 15px;
	background: var(--classA)
}

.j-comment .respond form .head .head-item:nth-child(2)::before {
	left: 0
}

.j-comment .respond form .head .head-item:nth-child(2)::after {
	right: 0
}

.j-comment .respond form .content {
	padding: 15px 15px 0
}

.j-comment .respond form .content textarea {
	background-color: transparent;
	width: 100%;
	height: 180px;
	border: none;
	resize: none;
	vertical-align: middle;
	background: url("../img/comment.png") right bottom no-repeat;
	transition: all 0.45s;
	font-size: 14px;
	color: var(--routine);	
}

.j-comment .respond form .content textarea:focus {
	background-position-y: 180px
}

.j-comment .respond form .content .canvas {
	position: relative;
	width: 100%
}

.j-comment .respond form .content .canvas canvas {
	background: var(--background);
	transition: box-shadow 0.35s;
	border-radius: 4px
}

.j-comment .respond form .content .canvas canvas:hover {
	box-shadow: 0 10px 20px var(--classA)
}

.j-comment .respond form .content .canvas ul {
	display: flex;
	align-items: center;
	position: absolute;
	top: 10px;
	left: 10px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.j-comment .respond form .content .canvas ul li {
	cursor: pointer;
	margin-right: 10px
}

.j-comment .respond form .content .canvas ul li.active {
	color: var(--theme)
}

.j-comment .respond form .content .canvas ol {
	display: flex;
	align-items: center;
	position: absolute;
	top: 10px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%)
}

.j-comment .respond form .content .canvas ol li {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	margin: 0 5px;
	cursor: pointer;
	transition: all 0.35s
}

.j-comment .respond form .content .canvas ol li:nth-child(1) {
	background: var(--main)
}

.j-comment .respond form .content .canvas ol li:nth-child(2) {
	background: var(--success)
}

.j-comment .respond form .content .canvas ol li:nth-child(3) {
	background: var(--warning)
}

.j-comment .respond form .content .canvas ol li:nth-child(4) {
	background: var(--danger)
}

.j-comment .respond form .content .canvas ol li.active {
	box-shadow: 0 4px 10px rgba(0,0,0,0.35)
}

.j-comment .respond form .content .canvas .undo {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 24px;
	height: 24px;
	cursor: pointer;
	fill: var(--minor);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.j-comment .respond form .content .canvas .undo:hover {
	fill: var(--theme)
}

.j-comment .respond form .content .canvas .animate {
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 24px;
	height: 24px;
	cursor: pointer;
	fill: var(--minor);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.j-comment .respond form .content .canvas .animate:hover {
	fill: var(--theme)
}

.j-comment .respond form .foot {
	position: relative;
	padding: 15px
}

.j-comment .respond form .foot .right {
	position: absolute;
	top: 15px;
	right: 15px
}

.j-comment .respond form .foot .right a {
	margin-right: 10px
}

.j-comment .respond form .foot .right a:hover {
	color: var(--theme)
}

.j-comment .respond form .foot .right button {
	border-radius: 3px;
	height: 32px;
	padding: 0 15px;
	border: none;
	background: var(--theme);
	color: #fff;
	font-size: 14px;
	transition: all 0.35s
}

.j-comment .respond form .foot .right button:hover {
	opacity: 0.85
}

.j-comment .respond .change {
	display: flex;
	align-items: center;
	justify-content: flex-end
}

.j-comment .respond .change button {
	background: var(--classD);
	padding: 0 15px;
	height: 32px;
	border: none;
	font-size: 13px;
	transition: all 0.35s;
	color: var(--main)
}

.j-comment .respond .change button.active {
	color: #fff;
	background: var(--theme)
}

.j-comment .respond .change button:first-child {
	border-top-left-radius: 4px
}

.j-comment .respond .change button:last-child {
	border-top-right-radius: 4px
}

.j-comment .comment-all {
	padding-top: 20px
}

.j-comment .comment-all .comment-list .respond {
	-webkit-animation: showComment 0.5s;
	animation: showComment 0.5s;
	margin-left: 63px;
	margin-bottom: 20px
}

.j-comment .comment-all .comment-list li .item {
	display: flex;
	margin-bottom: 20px
}

.j-comment .comment-all .comment-list li .item .left {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	margin-right: 15px;
	padding: 3px;
	border: 1px solid var(--classD)
}

.j-comment .comment-all .comment-list li .item .right {
	width: 0;
	min-width: 0;
	flex: 1;
	border-bottom: 1px solid var(--classC);
	padding-bottom: 15px
}

.j-comment .comment-all .comment-list li .item .right .name {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	line-height: 20px;
	color: var(--main)
}

.j-comment .comment-all .comment-list li .item .right .name i {
	display: none;
	background: var(--theme);
	color: var(--background);
	padding: 0 5px;
	border-radius: 2px;
	font-style: normal
}

.j-comment .comment-all .comment-list li .item .right .name i.comment-by-author {
	display: block
}

.j-comment .comment-all .comment-list li .item .right .name em {
	color: var(--danger);
	font-style: normal
}

.j-comment .comment-all .comment-list li .item .right .name div {
	margin-left: auto;
	font-size: 12px;
	color: var(--minor)
}

.j-comment .comment-all .comment-list li .item .right .content {
	display: none;
	width: 100%;
	background: var(--classD);
	padding: 12px 15px;
	border-radius: 0 4px 4px 10px;
	font-size: 14px;
	color: var(--color-scale-gray-6);
	margin-bottom: 8px;
	word-break: break-all;
	line-height: 24px
}

.j-comment .comment-all .comment-list li .item .right .content .parent {
	color: #388bff;
	margin-bottom: 5px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-weight: 500
}

.j-comment .comment-all .comment-list li .item .right .content .canvas {
	max-width: 100%
}

.j-comment .comment-all .comment-list li .item .right .content .owo {
	height: 22px;
	vertical-align: top
}

.j-comment .comment-all .comment-list li .item .right .content img {
	max-width: 100%
}

.j-comment .comment-all .comment-list li .item .right .meta {
	display: flex;
	align-items: center
}

.j-comment .comment-all .comment-list li .item .right .meta span {
	color: var(--minor);
	margin-right: 10px
}

.j-comment .comment-all .comment-list li .item .right .meta a {
	display: flex;
	align-items: center;
	color: var(--main);
	font-size: 13px
}

.j-comment .comment-all .comment-list li .item .right .meta a svg {
	width: 15px;
	height: 15px;
	margin-right: 5px;
	fill: var(--main)
}

.j-comment .comment-all .comment-list li .item .right .meta a:hover {
	color: var(--theme)
}

.j-comment .comment-all .comment-list li .item .right .meta a:hover svg {
	fill: var(--theme)
}

.j-comment .comment-all .comment-list .comment-children {
	padding-left: 63px
}

.j-comment .comment-all .comment-list .comment-children .comment-children {
	padding-left: 0
}

.j-comment .j-pagination {
	padding-top: 0
}

.j-file .item {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: relative;
	padding: 0 0 20px 30px
}

.j-file .item::before {
	content: '';
	position: absolute;
	top: 13.5px;
	left: 0;
	width: 13px;
	height: 13px;
	background: var(--classA);
	border-radius: 50%;
	z-index: 2
}

.j-file .item::after {
	content: '';
	position: absolute;
	top: 0;
	left: 6px;
	width: 1px;
	height: 100%;
	background: var(--classC);
	border-radius: 50%
}

.j-file .item span {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--routine);
	cursor: pointer;
	background: var(--classD);
	padding: 10px;
	height: 40px;
	border-radius: 4px
}

.j-file .item span::after {
	content: '';
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: -8px;
	width: 0;
	height: 0;
	border-right: 8px solid var(--classD);
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent
}

.j-file .item span svg {
	width: 10px;
	height: 10px;
	fill: var(--minor);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	margin-left: 5px
}

.j-file .item ul {
	display: none;
	padding-left: 20px
}

.j-file .item ul li {
	margin-top: 20px
}

.j-file .item ul li a {
	color: var(--routine)
}

.j-file .item ul li a:hover {
	color: var(--theme)
}

.j-label {
	border-bottom: 1px dotted var(--classD);
	margin-bottom: 20px
}

.j-label ul {
	display: flex;
	flex-wrap: wrap
}

.j-label ul li {
	padding-bottom: 20px
}

.j-label ul li:nth-child(even) a {
	background: var(--classD);
	color: var(--routine)
}

.j-label ul li:nth-child(even) a::after {
	border-left-color: var(--classD)
}

.j-label ul li:nth-child(odd) a {
	color: #fff;
	background: var(--theme)
}

.j-label ul li:nth-child(odd) a::after {
	border-left-color: var(--theme)
}

.j-label ul li a {
	position: relative;
	display: block;
	height: 30px;
	line-height: 30px;
	text-align: center;
	padding: 0 20px 0 30px
}

.j-label ul li a::after {
	content: '';
	position: absolute;
	top: 0;
	right: -15px;
	width: 0;
	height: 0;
	z-index: 1;
	border-left: 15px solid;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent
}

.j-loadmore {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.j-loadmore a {
	cursor: pointer;
	width: 120px;
	text-align: center;
	line-height: 34px;
	height: 34px;
	color: var(--routine);
	background: var(--background);
	box-shadow: 1px 1px 5px var(--theme);
	border-radius: 17px;
	transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	transition: transform 0.35s, -webkit-transform 0.35s
}

.j-loadmore a:active {
	-webkit-transform: scale(0.85);
	transform: scale(0.85)
}

.j-horse {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: url(../img/HorseRaceLamp.gif);
	z-index: 777
}

.j-dynamic .respond {
	background: var(--background);
	margin-bottom: 20px;
	box-shadow: var(--box-shadow);
	border-radius: var(--radius-pc);
	padding: 15px
}

.j-dynamic .respond .title {
	color: var(--routine);
	margin-bottom: 15px
}

.j-dynamic .respond form textarea {
	border-radius: calc(var(--radius-pc) / 2);
	width: 100%;
	vertical-align: middle;
	resize: none;
	padding: 15px;
	border: none;
	background: var(--classD);
	color: var(--routine);
	font-size: 14px
}

.j-dynamic .respond form .form-foot {
	position: relative;
	background: var(--classD);
	padding: 15px
}

.j-dynamic .respond form .form-foot button[type='submit'] {
	position: absolute;
	top: 15px;
	right: 15px;
	color: #fff;
	background: var(--theme);
	border: none;
	height: 32px;
	padding: 0 15px;
	transition: opacity 0.35s;
	border-radius: 3px
}

.j-dynamic .respond form .form-foot button[type='submit']:hover {
	opacity: 0.85
}

.j-dynamic>.comment-list>li {
	background: var(--background);
	margin-bottom: 20px;
	box-shadow: var(--box-shadow);
	border-radius: var(--radius-pc);
	padding: 15px
}

.j-dynamic>.comment-list>li:last-child {
	margin-bottom: 0
}

.j-dynamic>.comment-list>li .comment-parent .title {
	display: flex;
	align-items: center;
	margin-bottom: 15px
}

.j-dynamic>.comment-list>li .comment-parent .title .avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	padding: 3px;
	border: 1px solid var(--classD);
	margin-right: 5px
}

.j-dynamic>.comment-list>li .comment-parent .title .desc .author {
	margin-bottom: 5px;
	color: var(--routine)
}

.j-dynamic>.comment-list>li .comment-parent .title .desc .time {
	font-size: 12px;
	color: var(--minor)
}

.j-dynamic>.comment-list>li .comment-parent .content {
	margin-bottom: 15px;
	background: var(--classD);
	padding: 15px;
	transition: opacity 0.35s;
	border-radius: calc(var(--radius-pc) / 2);
	color: var(--routine);
	line-height: 24px
}

.j-dynamic>.comment-list>li .comment-parent .content iframe {
	width: 100%;
	border: none
}

.j-dynamic>.comment-list>li .comment-parent .content img {
	max-width: 100%
}

.j-dynamic>.comment-list>li .comment-parent .content .owo {
	height: 22px;
	vertical-align: top
}

.j-dynamic>.comment-list>li .comment-parent .content:hover {
	opacity: 0.85
}

.j-dynamic>.comment-list>li .comment-parent .foot {
	display: flex;
	align-items: center;
	justify-content: space-between
}

.j-dynamic>.comment-list>li .comment-parent .foot .count {
	color: var(--minor);
	font-size: 12px;
	line-height: 16px
}

.j-dynamic>.comment-list>li .comment-parent .foot .action {
	display: flex;
	align-items: center;
	cursor: pointer
}

.j-dynamic>.comment-list>li .comment-parent .foot .action .item {
	display: flex;
	align-items: center;
	color: var(--minor);
	transition: color 0.35s;
	font-size: 12px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin-left: 10px
}

.j-dynamic>.comment-list>li .comment-parent .foot .action .item svg {
	width: 20px;
	height: 20px;
	fill: var(--minor);
	transition: fill 0.35s;
	margin-right: 1px
}

.j-dynamic>.comment-list>li .comment-parent .foot .action .item svg.like {
	-webkit-animation: scaleLove 0.8s infinite alternate;
	animation: scaleLove 0.8s infinite alternate
}

.j-dynamic>.comment-list>li .comment-parent .foot .action .item.active {
	color: var(--theme)
}

.j-dynamic>.comment-list>li .comment-parent .foot .action .item.active svg {
	fill: var(--theme)
}

.j-dynamic>.comment-list>li .comment-parent .foot .action .item.active svg.like {
	-webkit-animation: none;
	animation: none
}

.j-dynamic>.comment-list>li .comment-parent .foot .action .item:hover {
	color: var(--theme)
}

.j-dynamic>.comment-list>li .comment-parent .foot .action .item:hover svg {
	fill: var(--theme);
	-webkit-animation-play-state: paused;
	animation-play-state: paused
}

.j-dynamic>.comment-list>li .list {
	padding-top: 10px;
	margin-top: 10px;
	border-top: 1px solid var(--classC)
}

.j-dynamic>.comment-list>li .list .item {
	line-height: 22px;
	font-size: 12px;
	margin-bottom: 3px;
	color: var(--main)
}

.j-dynamic>.comment-list>li .list .item:last-child {
	margin-bottom: 0
}

.j-dynamic>.comment-list>li .list .item .name {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: var(--theme);
	font-weight: 500
}

.j-dynamic>.comment-list>li .list .item .name a {
	font-weight: 500;
	color: var(--theme)
}

.j-dynamic>.comment-list>li .reply {
	display: none;
	margin-top: 10px;
	-webkit-animation: showComment 0.35s;
	animation: showComment 0.35s
}

.j-dynamic>.comment-list>li .reply .head {
	display: flex;
	align-items: center;
	margin-bottom: 10px
}

.j-dynamic>.comment-list>li .reply .head input {
	flex: 1;
	width: auto;
	height: 34px;
	border: 1px solid var(--classB);
	padding: 0 10px;
	transition: border 0.35s;
	border-radius: 2px;
	font-size: 13px;
	color: var(--routine)
}

.j-dynamic>.comment-list>li .reply .head input:nth-child(2) {
	margin: 0 10px
}

.j-dynamic>.comment-list>li .reply .head input:focus {
	border: 1px solid var(--theme)
}

.j-dynamic>.comment-list>li .reply textarea {
	width: 100%;
	height: 80px;
	border: 1px solid var(--classB);
	resize: none;
	padding: 10px;
	margin-bottom: 10px;
	transition: border 0.35s;
	border-radius: 2px;
	font-size: 13px;
	color: var(--routine);
	vertical-align: middle
}

.j-dynamic>.comment-list>li .reply textarea:focus {
	border: 1px solid var(--theme)
}

.j-dynamic>.comment-list>li .reply .foot {
	display: flex;
	justify-content: space-between
}

.j-dynamic>.comment-list>li .reply .foot button {
	background: var(--theme);
	color: #fff;
	border-radius: 2px;
	vertical-align: middle;
	width: 70px;
	height: 30px;
	border: none;
	transition: opacity 0.35s
}

.j-dynamic>.comment-list>li .reply .foot button:hover {
	opacity: 0.85
}

.j-defend {
	box-shadow: var(--box-shadow);
	border-radius: calc(var(--radius-pc) / 2);
	overflow: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.j-defend .title {
	background: var(--warning);
	line-height: 40px;
	height: 40px;
	text-align: center;
	color: var(--background)
}

.j-defend .content {
	background: var(--background);
	padding: 15px;
	line-height: 30px;
	color: var(--routine)
}

.j-defend .content p:nth-child(2) {
	text-indent: 2em
}

.j-defend .content p:nth-child(3) {
	text-align: right
}

.j-search-down-xs {
	display: none;
	position: fixed;
	top: 55px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 333;
	visibility: hidden;
	overflow: hidden;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d
}

.j-search-down-xs.active {
	visibility: visible
}

.j-search-down-xs.active .content {
	visibility: visible;
	opacity: 1;
	-webkit-transform: rotateX(0);
	transform: rotateX(0)
}

.j-search-down-xs.active .mask {
	visibility: visible;
	opacity: 1
}

.j-search-down-xs .content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	background: var(--background);
	padding: 20px 15px 0;
	overflow: hidden;
	-webkit-transform: perspective(500px) rotateX(-90deg);
	transform: perspective(500px) rotateX(-90deg);
	visibility: hidden;
	-webkit-transform-origin: top;
	transform-origin: top;
	transition: visibility 0.5s, -webkit-transform 0.5s;
	transition: transform 0.5s, visibility 0.5s;
	transition: transform 0.5s, visibility 0.5s, -webkit-transform 0.5s;
	border-top: 1px solid var(--classD);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	perspective: 1000;
	-ms-scroll-chaining: none;
	overscroll-behavior: none
}

.j-search-down-xs .content form {
	display: flex;
	align-items: center;
	margin-bottom: 15px
}

.j-search-down-xs .content form input {
	flex: 1;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--classA);
	border-right: none;
	border-radius: 2px 0 0 2px;
	color: var(--routine);
	-webkit-appearance: none
}

.j-search-down-xs .content form button {
	padding: 0 10px;
	height: 36px;
	border: none;
	background: var(--theme);
	color: var(--background);
	border-radius: 0 2px 2px 0
}

.j-search-down-xs .content .title {
	color: var(--routine);
	margin-bottom: 10px;
	font-size: 16px;
	display: flex;
	align-items: center
}

.j-search-down-xs .content .title svg {
	width: 22px;
	height: 22px;
	fill: var(--routine);
	margin-right: 5px
}

.j-search-down-xs .content .cloud {
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 15px
}

.j-search-down-xs .content .cloud li {
	padding: 5px
}

.j-search-down-xs .content .cloud li a {
	display: block;
	padding: 0 10px;
	height: 24px;
	line-height: 24px;
	border-radius: 2px;
	font-size: 12px;
	color: var(--background)
}

.j-search-down-xs .mask {
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.65);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	opacity: 0;
	visibility: hidden;
	transition: visibility 0.5s, opacity 0.5s;
	z-index: 1;
	-webkit-transform: translateZ(-500px);
	transform: translateZ(-500px);
	-ms-scroll-chaining: none;
	overscroll-behavior: none
}

.j-sidebar-xs {
	display: none;
	position: fixed;
	top: 55px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 333;
	visibility: hidden
}

.j-sidebar-xs.active {
	visibility: visible
}

.j-sidebar-xs.active .mask {
	opacity: 1;
	visibility: visible
}

.j-sidebar-xs.active .content {
	visibility: visible;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0)
}

.j-sidebar-xs .content {
	position: absolute;
	top: 0;
	left: 0;
	width: 75%;
	bottom: 0;
	background: var(--classD);
	z-index: 3;
	visibility: hidden;
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
	transition: visibility 0.5s, -webkit-transform 0.5s;
	transition: visibility 0.5s, transform 0.5s;
	transition: visibility 0.5s, transform 0.5s, -webkit-transform 0.5s;
	overflow-y: auto;
	-ms-scroll-chaining: none;
	overscroll-behavior: none;
	-webkit-overflow-scrolling: touch
}

.j-sidebar-xs .content::-webkit-scrollbar {
	display: none
}

.j-sidebar-xs .content .item {
	padding: 20px;
	border-bottom: 1px solid var(--classA)
}

.j-sidebar-xs .content .item:last-child {
	border-bottom: none
}

.j-sidebar-xs .content .item:last-child .card .title {
	background: #46c47c
}

.j-sidebar-xs .content .item:last-child .card .title::after {
	border-color: #46c47c transparent transparent
}

.j-sidebar-xs .content .item .card {
	position: relative;
	background: var(--background);
	border-radius: var(--radius-wap);
	box-shadow: var(--box-shadow);
	padding: 45px 15px 15px
}

.j-sidebar-xs .content .item .card .title {
	position: absolute;
	top: 15px;
	left: -10px;
	background: #6fa3ef;
	color: var(--background);
	font-weight: 500;
	box-shadow: 2px 5px 10px rgba(49,58,70,0.15);
	font-size: 14px;
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	border-radius: 2px 2px 2px 0
}

.j-sidebar-xs .content .item .card .title::after {
	content: '';
	border-style: solid;
	border-width: 10px;
	display: block;
	position: absolute;
	bottom: -10px;
	left: 0;
	margin-bottom: -10px;
	z-index: -1;
	border-color: #6fa3ef transparent transparent
}

.j-sidebar-xs .content .item .card ul li {
	display: flex;
	align-items: center;
	line-height: 40px;
	border-bottom: 1px solid var(--classB)
}

.j-sidebar-xs .content .item .card ul li.active svg {
	fill: var(--theme)
}

.j-sidebar-xs .content .item .card ul li.active a {
	color: var(--theme)
}

.j-sidebar-xs .content .item .card ul li svg {
	width: 13px;
	height: 13px;
	margin-right: 5px;
	fill: var(--routine)
}

.j-sidebar-xs .content .item .card ul li a {
	color: #606266;
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.j-sidebar-xs .content .user {
	text-align: center;
	border-bottom: 1px solid var(--classA)
}

.j-sidebar-xs .content .user img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	padding: 5px;
	border: 1px solid var(--classB);
	box-shadow: 0px 5px 15px rgba(56,94,209,0.2);
	margin-bottom: 15px
}

.j-sidebar-xs .content .user .name {
	font-size: 16px;
	color: var(--main);
	font-weight: 500;
	margin-bottom: 10px
}

.j-sidebar-xs .content .user .desc {
	display: none;
	color: var(--routine)
}

.j-sidebar-xs .mask {
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.65);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	opacity: 0;
	visibility: hidden;
	transition: visibility 0.5s, opacity 0.5s;
	-ms-scroll-chaining: none;
	overscroll-behavior: none
}

.j-tag {
	display: inline-block;
	height: 32px;
	padding: 0 10px;
	line-height: 30px;
	font-size: 12px;
	border-radius: 4px;
	box-sizing: border-box;
	white-space: nowrap
}

.j-tag.default {
	background-color: #ecf5ff;
	border: 1px solid #d9ecff;
	color: #409eff
}

.j-tag.success {
	background-color: #f0f9eb;
	border: 1px solid #e1f3d8;
	color: #67c23a
}

.j-tag.info {
	background-color: #f4f4f5;
	border: 1px solid #e9e9eb;
	color: #909399
}

.j-tag.warning {
	background-color: #fdf6ec;
	border: 1px solid #faecd8;
	color: #e6a23c
}

.j-tag.danger {
	background-color: #fef0f0;
	border: 1px solid #fde2e2;
	color: #f56c6c
}

.j-btn {
	display: inline-block;
	white-space: nowrap;
	text-align: center;
	transition: 0.1s;
	font-weight: 500;
	padding: 10px 20px;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1;
	text-decoration: none
}

.j-btn.default {
	background: #fff;
	border: 1px solid #dcdfe6;
	color: #606266 !important
}

.j-btn.default:hover {
	color: #409eff !important;
	border-color: #c6e2ff;
	background-color: #ecf5ff;
	text-decoration: unset !important
}

.j-btn.primary {
	color: #fff !important;
	background-color: #409eff;
	border-color: #409eff
}

.j-btn.primary:hover {
	background: #66b1ff;
	border-color: #66b1ff;
	text-decoration: unset !important
}

.j-btn.success {
	color: #fff !important;
	background-color: #67c23a;
	border-color: #67c23a
}

.j-btn.success:hover {
	background: #85ce61;
	border-color: #85ce61;
	text-decoration: unset !important
}

.j-btn.info {
	color: #fff !important;
	background-color: #909399;
	border-color: #909399
}

.j-btn.info:hover {
	background: #a6a9ad;
	border-color: #a6a9ad;
	text-decoration: unset !important
}

.j-btn.warning {
	color: #fff !important;
	background-color: #e6a23c;
	border-color: #e6a23c
}

.j-btn.warning:hover {
	background: #ebb563;
	border-color: #ebb563;
	text-decoration: unset !important
}

.j-btn.danger {
	color: #fff !important;
	background-color: #f56c6c;
	border-color: #f56c6c
}

.j-btn.danger:hover {
	background: #f78989;
	border-color: #f78989;
	text-decoration: unset !important
}

.j-alt {
	width: 100%;
	padding: 8px 15px 8px 35px;
	border-radius: 4px;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: opacity 0.2s;
	font-size: 13px;
	margin: 20px 0
}

.j-alt::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 10px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 20px;
	height: 18px;
	vertical-align: top
}

.j-alt.success {
	background-color: #f0f9eb;
	color: #67c23a
}

.j-alt.success::before {
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjA1NzQ4Nzc4NzcyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI0MTUiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTUxMiA4NS4zMzMzMzNjMjM1LjY0OCAwIDQyNi42NjY2NjcgMTkxLjAxODY2NyA0MjYuNjY2NjY3IDQyNi42NjY2NjdzLTE5MS4wMTg2NjcgNDI2LjY2NjY2Ny00MjYuNjY2NjY3IDQyNi42NjY2NjdTODUuMzMzMzMzIDc0Ny42NDggODUuMzMzMzMzIDUxMiAyNzYuMzUyIDg1LjMzMzMzMyA1MTIgODUuMzMzMzMzeiBtLTc0Ljk2NTMzMyA1NTAuNEwzNDYuNDUzMzMzIDU0NS4xNTJhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDEgMC02MC4zMzA2NjYgNjAuMzMwNjY3bDEyMC43MDQgMTIwLjcwNGE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAwIDYwLjMzMDY2NiAwbDMwMS42NTMzMzQtMzAxLjY5NmE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMSAwLTYwLjI4OC02MC4zMzA2NjdsLTI3MS41MzA2NjcgMjcxLjQ4OCAwLjA0MjY2NyAwLjA4NTMzM3oiIGZpbGw9IiM1MkM0MUEiIHAtaWQ9IjI0MTYiPjwvcGF0aD48L3N2Zz4=");
	background-repeat: no-repeat;
	background-position: center center
}

.j-alt.info {
	background-color: #f4f4f5;
	color: #909399
}

.j-alt.info::before {
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjA1NzQ5NDI2MDY2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3ODQiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTUxMiA1MS4yYy0yNTYgMC00NjAuOCAyMDQuOC00NjAuOCA0NjAuOHMyMDQuOCA0NjAuOCA0NjAuOCA0NjAuOCA0NjAuOC0yMDQuOCA0NjAuOC00NjAuOC0yMDQuOC00NjAuOC00NjAuOC00NjAuOHogbTAgNzc4LjI0Yy00MC45NiAwLTcxLjY4LTMwLjcyLTcxLjY4LTcxLjY4czMwLjcyLTcxLjY4IDcxLjY4LTcxLjY4YzQwLjk2IDAgNzEuNjggMzAuNzIgNzEuNjggNzEuNjhzLTMwLjcyIDcxLjY4LTcxLjY4IDcxLjY4eiBtNTEuMi0yNTZjMCA0MC45Ni0yMC40OCA3MS42OC00Ni4wOCA3MS42OGgtMTAuMjRjLTI1LjYgMC00Ni4wOC0zMC43Mi00Ni4wOC03MS42OGwtMzUuODQtMjkxLjg0YzAtNDAuOTYgMjAuNDgtNzEuNjggNDYuMDgtNzEuNjhoNjYuNTZjMjUuNiAwIDQ2LjA4IDMwLjcyIDQ2LjA4IDcxLjY4bC0yMC40OCAyOTEuODR6IiBwLWlkPSI0Nzg1IiBmaWxsPSIjOGE4YThhIj48L3BhdGg+PC9zdmc+");
	background-repeat: no-repeat;
	background-position: center center
}

.j-alt.warning {
	background-color: #fdf6ec;
	color: #e6a23c
}

.j-alt.warning::before {
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjA1NzQ5NTM3NTM2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwNjciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTUxMiA3OC43NjkyMzFDMjczLjcyMzA3NyA3OC43NjkyMzEgNzguNzY5MjMxIDI3My43MjMwNzcgNzguNzY5MjMxIDUxMnMxOTQuOTUzODQ2IDQzMy4yMzA3NjkgNDMzLjIzMDc2OSA0MzMuMjMwNzY5IDQzMy4yMzA3NjktMTk0Ljk1Mzg0NiA0MzMuMjMwNzY5LTQzMy4yMzA3NjlTNzUwLjI3NjkyMyA3OC43NjkyMzEgNTEyIDc4Ljc2OTIzMXogbTYxLjU5NzUzOCAyMDIuNDc2MzA3bC0xMy44NjMzODQgMzA2LjgwNjE1NGMwIDE4Ljc4NjQ2Mi0xNi42MjAzMDggMzIuMjU2LTM1Ljk5NzUzOSAzMi4yNTZoLTguMjcwNzY5Yy0xOS40MTY2MTUgMC0zMy4yOC0xMy40Njk1MzgtMzYuMDM2OTIzLTMyLjI5NTM4NGwtMTMuODYzMzg1LTMwNi43NjY3N2MwLTE4LjgyNTg0NiAxMy44NjMzODUtMzIuMjk1Mzg1IDMwLjQ4MzY5My0zMi4yOTUzODRoNDQuMzA3NjkyYzE5LjM3NzIzMSAwIDM1Ljk5NzUzOCAxMy40Njk1MzggMzMuMjQwNjE1IDMyLjI5NTM4NHogbS0xOC4xOTU2OTIgNDc3LjUzODQ2MmE1MS41NTQ0NjIgNTEuNTU0NDYyIDAgMCAxLTM2Ljk4MjE1NCAxNi4yNjU4NDZjLTE1Ljg3MiAwLTI2LjQyNzA3Ny01LjQzNTA3Ny0zNi45ODIxNTQtMTYuMjY1ODQ2LTEwLjU5NDQ2Mi0xMC44MzA3NjktMTUuODcyLTIxLjY2MTUzOC0xNS44NzItMzcuODg4IDAtMTYuMjY1ODQ2IDUuMjc3NTM4LTI3LjA5NjYxNSAxNS44NzItMzcuOTI3Mzg1IDEwLjU1NTA3Ny0xMC44MzA3NjkgMjEuMTEwMTU0LTE2LjIyNjQ2MiAzNi45ODIxNTQtMTYuMjI2NDYxIDE1LjgzMjYxNSAwIDI5LjA2NTg0NiA1LjM5NTY5MiAzOS42MjA5MjMgMTYuMjI2NDYxIDEwLjU1NTA3NyAxMC44MzA3NjkgMTUuODMyNjE1IDIxLjY2MTUzOCAxNS44MzI2MTYgMzcuOTI3Mzg1LTIuNTk5Mzg1IDE2LjIyNjQ2Mi03Ljg3NjkyMyAyOS43NzQ3NjktMTguNDcxMzg1IDM3Ljg4OHoiIGZpbGw9IiNGRjhGMDAiIHAtaWQ9IjYwNjgiPjwvcGF0aD48L3N2Zz4=");
	background-repeat: no-repeat;
	background-position: center center
}

.j-alt.error {
	background-color: #fef0f0;
	color: #f56c6c
}

.j-alt.error::before {
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjA1NzQ5NjAwMDMxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijc0ODEiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTUxMiA2NGE0NDggNDQ4IDAgMSAwIDQ0OCA0NDhBNDQ4IDQ0OCAwIDAgMCA1MTIgNjR6IG0yMjIuMDggNjA5LjkyYTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAxIDEtNjAuMzczMzMzIDYwLjM3MzMzM0w1MTIgNTcxLjUybC0xNjIuNzczMzMzIDE2Mi43NzMzMzNhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDAgMS02MC4zNzMzMzQtNjAuMzczMzMzTDQ1MC43NzMzMzMgNTEybC0xNjIuNzczMzMzLTE2My42MjY2NjdhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDEgMSA2MC4zNzMzMzMtNjAuMzczMzMzTDUxMiA0NTAuNzczMzMzbDE2Mi43NzMzMzMtMTYyLjc3MzMzM2E0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMSAxIDYwLjM3MzMzNCA2MC4zNzMzMzNMNTcxLjUyIDUxMnoiIGZpbGw9IiNGRjNEMUQiIHAtaWQ9Ijc0ODIiPjwvcGF0aD48L3N2Zz4=");
	background-repeat: no-repeat;
	background-position: center center
}

.j-line {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px 0
}

.j-line span {
	position: relative;
	color: var(--minor);
	line-height: 24px;
	height: 24px;
	padding: 0 15px;
	transition: padding 0.35s
}

.j-line span::before,.j-line span::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 20px;
	height: 1px;
	border-top: 1px solid #f73859
}

.j-line span::before {
	left: -35px
}

.j-line span::after {
	right: -35px
}

.j-line span:hover {
	padding: 0
}

.j-tabs {
	width: 100%;
	overflow: hidden;
	background: var(--background);
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	border: 1px solid var(--classB);
	border-radius: 4px;
	margin: 20px 0
}

.j-tabs .nav {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	width: 100%;
	height: 42px;
	overflow-x: auto;
	overflow-y: hidden;
	-ms-scroll-chaining: none;
	overscroll-behavior: none;
	-webkit-overflow-scrolling: touch;
	display: flex;
	background: #f5f7fa
}

.j-tabs .nav::-webkit-scrollbar {
	display: none
}

.j-tabs .nav span {
	padding: 0 20px;
	line-height: 40px;
	height: 40px;
	color: var(--minor);
	cursor: pointer;
	transition: color 0.5s;
	white-space: nowrap
}

.j-tabs .nav span::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 20px;
	right: 20px;
	height: 2px;
	background: var(--theme);
	-webkit-transform: scale3d(0, 0, 0);
	transform: scale3d(0, 0, 0);
	opacity: 0;
	transition: opacity 0.5s, -webkit-transform 0.5s;
	transition: transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s
}

.j-tabs .nav span.active {
	position: relative;
	color: var(--theme)
}

.j-tabs .nav span.active::after {
	opacity: 1;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1)
}

.j-tabs .content div {
	display: none;
	padding: 15px;
	-webkit-animation: showTabs 0.5s;
	animation: showTabs 0.5s;
	color: var(--routine)
}

.j-tabs .content div.active {
	display: block
}

.j-card-default {
	box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid var(--classC);
	margin: 20px 0
}

.j-card-default .head {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border-bottom: 1px solid var(--classC);
	padding: 0 15px;
	line-height: 40px;
	height: 40px;
	color: var(--main)
}

.j-card-default .content {
	padding: 15px;
	color: var(--routine)
}

.j-collapse {
	margin: 20px 0
}

.j-collapse .collapse-head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--routine);
	cursor: pointer;
	background: var(--classD);
	padding: 10px 20px;
	height: 40px;
	border-radius: 4px
}

.j-collapse .collapse-head svg {
	width: 10px;
	height: 10px;
	fill: var(--minor);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg)
}

.j-collapse .collapse-body {
	display: none;
	padding: 20px;
	color: var(--routine)
}

.j-timeline {
	margin: 20px 0
}

.j-timeline .item {
	position: relative;
	padding: 20px 30px;
	color: var(--routine)
}

.j-timeline .item::before {
	content: '';
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 0;
	width: 13px;
	height: 13px;
	background: var(--classA);
	border-radius: 50%;
	z-index: 2
}

.j-timeline .item::after {
	content: '';
	position: absolute;
	top: 0;
	left: 6px;
	width: 1px;
	height: 100%;
	background: var(--classC);
	border-radius: 50%
}

.j-photos {
	display: flex;
	flex-wrap: wrap;
	margin: 20px 0
}

.j-photos a {
	position: relative;
	display: flex;
	flex: 0 0 25%;
	max-width: 25%;
	padding-right: 20px;
	padding-top: 20px;
	transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	transition: transform 0.35s, -webkit-transform 0.35s;
	flex-shrink: 0;
	min-width: 0
}

.j-photos a:nth-child(4n) {
	padding-right: 0
}

.j-photos a:nth-child(-n+4) {
	padding-top: 0
}

.j-photos a:hover {
	-webkit-transform: translate3d(0, -5px, 0);
	transform: translate3d(0, -5px, 0)
}

.j-photos a img {
	flex: 1 1 auto
}

.j-card-nav {
	display: flex;
	flex-wrap: wrap;
	margin: 20px 0
}

.j-card-nav .item {
	width: 25%;
	padding: 10px
}

.j-card-nav .nav {
	display: flex;
	align-items: center;
	border-radius: 4px;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
	transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	transition: transform 0.35s, -webkit-transform 0.35s;
	padding: 15px 10px
}

.j-card-nav .nav .avatar {
	min-width: 30px;
	min-height: 30px;
	width: 30px;
	height: 30px;
	background-size: cover;
	border-radius: 50%;
	margin-right: 10px
}

.j-card-nav .nav .content {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #fff
}

.j-card-nav .nav svg {
	width: 18px;
	height: 18px;
	min-width: 18px;
	min-height: 18px;
	fill: #fff
}

.j-card-nav .nav:hover {
	text-decoration: none !important;
	-webkit-transform: translate3d(0, -5px, 0);
	transform: translate3d(0, -5px, 0)
}

.j-short-video {
	margin: 20px 0;
	display: flex;
	flex-wrap: wrap
}

.j-short-video .item {
	width: 33.33333%;
	height: 180px;
	padding: 0 10px;
	margin-bottom: 20px
}

.j-short-video .item .inner {
	position: relative;
	cursor: pointer;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	box-shadow: var(--box-shadow);
	border-radius: var(--radius-pc);
	overflow: hidden
}

.j-short-video .item .inner svg {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0) scale(2);
	transform: translate3d(-50%, -50%, 0) scale(2);
	width: 50px;
	height: 50px;
	opacity: 0;
	transition: all 0.25s ease-out;
	fill: #ebebeb;
	z-index: 2
}

.j-short-video .item .inner::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	transition: all 0.3s ease-out;
	opacity: 0;
	z-index: 1
}

.j-short-video .item .inner:hover::after {
	opacity: 1
}

.j-short-video .item .inner:hover svg {
	opacity: 1;
	-webkit-transform: translate3d(-50%, -50%, 0) scale(1);
	transform: translate3d(-50%, -50%, 0) scale(1)
}

.j-video-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto
}

.j-video-preview iframe {
	width: 100%;
	height: 500px;
	-webkit-transform: scale3d(0, 0, 0);
	transform: scale3d(0, 0, 0);
	transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	transition: transform 0.35s, -webkit-transform 0.35s
}

.j-video-preview .close {
	position: absolute;
	top: 30px;
	right: 30px;
	width: 30px;
	height: 30px;
	fill: var(--classA);
	cursor: pointer;
	transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	transition: transform 0.35s, -webkit-transform 0.35s
}

.j-video-preview .close:hover {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg)
}

.j-video-preview.active iframe {
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1)
}

.j-aside .aside-hunter-authors ul {
    list-style: none;
    line-height: 2.5;
    padding: 14px;
}

.j-aside .aside-hunter-authors .item {
    border-bottom: 1px dashed var(--classC);
    margin-bottom: 0px;
    position: relative;
    padding-bottom: 4px;
}

.j-aside .aside-hunter-authors .item .hunter-avatar {
    float: left;
    line-height: 55px;
}

.j-aside .aside-hunter-authors .item .item-main {
    min-height: 60px;
    margin-left: 60px;
    color: color: var(--background);
}

.j-aside .aside-hunter-authors .item .item-main h4 {
    font-size: 12px;
    line-height: 1;
    margin-bottom: 7px;
    font-weight: normal;
    color: #999;
}

j-aside .aside-hunter-authors .item .item-main h4 i {
    font-style: normal;
    color: #999;
    margin: 0 5px;
}
.j-aside .aside-hunter-authors .item .hunter-avatar .vatar {
    position: relative;
}

.j-aside .aside-hunter-authors .item .hunter-avatar .vatar img {
    width: 45px;
    border-radius: 100%;
}
.dengji {
	color: #fff;
	background: var(--theme);
	font-size: 10px;   
	display: inline-block;
	vertical-align: text-bottom;
	font-weight: normal;
	border-radius: 2px;
	line-height: 1.6;
	padding: 0 4px;
	margin-left: 5px;
	letter-spacing: 0px;
}

.j-aside .aside-hunter-authors .item .hunter-avatar .vatar .va_v_honor {
    position: absolute;
    bottom: 3px;
    right: 0px;
    width: 18px;
    height: 18px;
}


/* 暗夜模式 */
:root,[data-color-mode=light] {
    --color-text-primary: #24292e;
    --color-bg-canvas: #fff;
    --color-scale-gray-3: #d1d5da;
    --color-scale-purple-8: #3a1d6e;
    --color-scale-white: #fff;
    --color-scale-purple-9: #29134e;
    --color-scale-gray-8: #2f363d;
    --color-scale-purple-6: #5a32a3;
    --color-scale-yellow-4: #ffdf5d;
    --color-scale-yellow-0: #fffdef;
    --color-auto-gray-3: #d1d5da;
    --color-scale-red-5: #d73a49;
    --color-scale-orange-3: #ffab70;
    --color-scale-purple-5: #6f42c1;
    --color-scale-green-3: #85e89d;
    --color-scale-blue-4: #2188ff;
    --color-scale-gray-6: #586069;
}

[data-color-mode=dark] {
    --color-text-primary: #c9d1d9;
    --color-bg-canvas: #000;
    --color-scale-gray-3: #8b949e;
    --color-scale-purple-8: #3c1e70;
    --color-scale-white: #f0f6fc;
    --color-scale-purple-9: #271052;
    --color-scale-gray-8: #161b22;
    --color-scale-purple-6: #6e40c9;
    --color-scale-yellow-4: #bb8009;
    --color-scale-yellow-0: #f8e3a1;
    --color-auto-gray-3: #30363d;
    --color-scale-red-5: #da3633;
    --color-scale-orange-3: #f0883e;
    --color-scale-purple-5: #8957e5;
    --color-scale-green-3: #3fb950;
    --color-scale-blue-4: #388bfd;
    --color-scale-gray-6: #30363d;
	--background: #333333!important;
    --main: #e6e1e1!important;
	--routine: #e6e1e1;	
	--classD: #444!important;
    --color-scale-gray-6: #dee1e6;
	--minor: #dee1e6!important;
	--classC: #444!important;
}

[data-color-mode] {
    color: var(--color-text-primary);
    background-color: var(--color-bg-canvas)
}

:root,[data-color-mode=light] {
    color-scheme: light
}

[data-color-mode=dark] {
    color-scheme: dark
}

// style end
:root,[data-color-mode=light] {
    --color-profile-color-modes-toggle-track-border:var(--color-scale-gray-3)}



[data-color-mode=dark] {
    --color-profile-color-modes-toggle-track-border:var(--color-scale-purple-8)}

:root,[data-color-mode=light] {
    --color-profile-color-modes-toggle-track-bg:var(--color-scale-white)}


[data-color-mode=dark] {
    --color-profile-color-modes-toggle-track-bg:var(--color-scale-purple-9)}



:root,[data-color-mode=light] {
    --color-profile-color-modes-toggle-thumb-bg:var(--color-scale-gray-8)}



[data-color-mode=dark] {
    --color-profile-color-modes-toggle-thumb-bg:var(--color-scale-purple-6)}


:root,[data-color-mode=light] {
    --color-profile-color-modes-toggle-moon:var(--color-scale-yellow-4)}


[data-color-mode=dark] {
    --color-profile-color-modes-toggle-moon:var(--color-scale-yellow-0)}

.profile-color-modes {
    display: block;
    position: relative;
    padding-right: 32px
}

.profile-color-modes-toggle {
    position: absolute;
    top: 12px;
    right: 0
}

.profile-color-modes-toggle-track {
    width: 42px;
    height: 24px;
    border-radius: 24px;
    border: 3px solid var(--theme);
    background-color: var(--color-profile-color-modes-toggle-track-bg)
}

.profile-color-modes-toggle-thumb {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--color-profile-color-modes-toggle-thumb-bg);
    transition: transform .3s cubic-bezier(.4,.03,0,1);
    cursor: pointer
}

[data-color-mode=dark] .profile-color-modes-toggle-thumb {
    transform: translateX(18px)
}


.profile-color-modes-popover {
    opacity: .01;
    transition: opacity .5s cubic-bezier(.4,.03,0,1)
}

.profile-color-modes-popover.shown {
    opacity: 1
}

.profile-color-modes-illu-group {
    stroke: var(--color-auto-gray-3)
}

.profile-color-modes-illu-frame {
    opacity: 0
}

:root .profile-color-modes-illu-frame:nth-child(8),[data-color-mode=light] .profile-color-modes-illu-frame:nth-child(8) {
    animation: profile-light-color-modes-illu-anim-frame-show 0s forwards,profile-light-color-modes-illu-anim-frame-hide 0s .3s forwards
}

:root .profile-color-modes-illu-frame:nth-child(9),[data-color-mode=light] .profile-color-modes-illu-frame:nth-child(9) {
    animation: profile-light-color-modes-illu-anim-frame-show 0s .3s forwards,profile-light-color-modes-illu-anim-frame-hide 0s .36s forwards
}

:root .profile-color-modes-illu-frame:nth-child(10),[data-color-mode=light] .profile-color-modes-illu-frame:nth-child(10) {
    animation: profile-light-color-modes-illu-anim-frame-show 0s .36s forwards
}

@keyframes profile-light-color-modes-illu-anim-frame-show {
    0% {
        opacity: 0;
        animation-timing-function: ease-out
    }

    to {
        opacity: 1
    }
}

@keyframes profile-light-color-modes-illu-anim-frame-hide {
    0% {
        opacity: 1;
        animation-timing-function: ease-in
    }

    to {
        opacity: 0
    }
}

[data-color-mode=dark] .profile-color-modes-illu-red {
    stroke: var(--color-scale-red-5)
}

[data-color-mode=dark] .profile-color-modes-illu-orange {
    stroke: var(--color-scale-orange-3)
}

[data-color-mode=dark] .profile-color-modes-illu-purple {
    stroke: var(--color-scale-purple-5)
}

[data-color-mode=dark] .profile-color-modes-illu-green {
    stroke: var(--color-scale-green-3)
}

[data-color-mode=dark] .profile-color-modes-illu-blue {
    stroke: var(--color-scale-blue-4)
}

[data-color-mode=dark] .profile-color-modes-illu-group {
    animation: profile-color-modes-illu-anim .2s cubic-bezier(.72,.08,1,.68) backwards
}

@keyframes profile-color-modes-illu-anim {
    0% {
        stroke: var(--color-scale-gray-6)
    }
}

[data-color-mode=dark] .profile-color-modes-illu-frame {
    animation: profile-color-modes-illu-anim-frame-show 0s forwards,profile-color-modes-illu-anim-frame-hide 0s forwards
}

[data-color-mode=dark] .profile-color-modes-illu-frame:first-child {
    opacity: 1;
    animation: profile-color-modes-illu-anim-frame-hide 0s forwards
}

[data-color-mode=dark] .profile-color-modes-illu-frame:nth-child(8) {
    animation: profile-color-modes-illu-anim-frame-show 0s forwards
}

@keyframes profile-color-modes-illu-anim-frame-show {
    0% {
        opacity: 0;
        animation-timing-function: ease-out
    }

    to {
        opacity: 1
    }
}

@keyframes profile-color-modes-illu-anim-frame-hide {
    0% {
        opacity: 1;
        animation-timing-function: ease-in
    }

    to {
        opacity: 0
    }
}

[data-color-mode=dark] .profile-color-modes-illu-red {
    animation-delay: .4s;
    animation-duration: .1s
}

[data-color-mode=dark] .profile-color-modes-illu-orange {
    animation-delay: .5s;
    animation-duration: .1s
}

[data-color-mode=dark] .profile-color-modes-illu-purple {
    animation-delay: .6s;
    animation-duration: .1s
}

[data-color-mode=dark] .profile-color-modes-illu-blue {
    animation-delay: .7s;
    animation-duration: .1s
}

[data-color-mode=dark] .profile-color-modes-illu-green {
    animation-delay: .8s;
    animation-duration: .2s;
    animation-timing-function: cubic-bezier(.47,2.92,.84,-1.5)
}

[data-color-mode=dark] .profile-color-modes-illu-frame:first-child {
    animation-delay: 1.8s
}

[data-color-mode=dark] .profile-color-modes-illu-frame:nth-child(2) {
    animation-delay: 1.8s,2.58s
}

[data-color-mode=dark] .profile-color-modes-illu-frame:nth-child(3) {
    animation-delay: 2.58s,2.66s
}

[data-color-mode=dark] .profile-color-modes-illu-frame:nth-child(4) {
    animation-delay: 2.66s,2.78s
}

[data-color-mode=dark] .profile-color-modes-illu-frame:nth-child(5) {
    animation-delay: 2.78s,2.84s
}

[data-color-mode=dark] .profile-color-modes-illu-frame:nth-child(6) {
    animation-delay: 2.84s,3.44s
}

[data-color-mode=dark] .profile-color-modes-illu-frame:nth-child(7) {
    animation-delay: 3.44s,3.56s
}

[data-color-mode=dark] .profile-color-modes-illu-frame:nth-child(8) {
    animation-delay: 3.56s
}

[data-color-mode=dark] .profile-color-modes-illu-frame:nth-child(9),[data-color-mode=dark] .profile-color-modes-illu-frame:nth-child(10) {
    animation: none
}

/* 暗夜end */
/*侧栏小图标*/
.j-aside .aside h3 .icon {
    fill: var(--main);
    width: 18px;
    height: 18px;
    margin-right: 8px;
}
/*自适应阅读模式*/
@media screen and (max-width: 988px){
.read_book_button {
display: none!important;

}

}
/*阅读模式*/
.read_book {
        background: url(https://laolion.com/img/yuedu.png) var(--background) no-repeat center
    }

    .not_read_book {
        background: url(https://laolion.com/img/yuedu1.png) var(--background) no-repeat center
    }

    .read_book_button {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: none;
    position: fixed;
    margin-top: 15px;    
    outline: none; 
	box-shadow: 0 0 10px rgba(0,0,0,0.1), 0 5px 20px rgba(0,0,0,0.2);	
    }    
	
/*手机端底部菜单*/
@media (min-width: 768px) {
    .nav-shouji {
        display: none !important;
    }
}
.nav-shouji{
            display: flex;
            position: fixed;
            bottom:0;
            z-index:99;
            height: 55px;
            width: 100%;
            background: var(--background);
            flex-shrink: 0;
            font-size: 14px;
        }
        .nav-shouji .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            color: var(--main);
        }       
        .nav-item:nth-child(3) {
            transform: translateY(-20px);
            background: var(--background);
            border-radius: 50%;
            height: 75px;
            width: 75px;
            flex-shrink: 2;
            box-shadow: 0 -3px 4px rgba(0,0,0,.1);
        }
        .nav-shouji .nav-item .img {
            height: 24px;
            overflow: hidden;
        }
        .nav-item:nth-child(3)>.img{
            height: 30px;
            margin-bottom: 5px;			
        }
        .nav-shouji .nav-item img {
            width: 24px;
            height: 24px;
            overflow: hidden;
        }
		
@media (max-width: 1210px) {
    .yunxing {
        display: none !important;
    }
}

/*大红灯笼*/
.deng-box {
    position: fixed;
    top: -30px;
    right: -30px;
    z-index: 999;
	pointer-events:none; 
}
.deng-box1 {
    position: fixed;
    top: -30px;
    right: 20px;
    z-index: 999;
	pointer-events:none;
}
.deng-box2 {
    position: fixed;
    top: -30px;
    left: 30px;
    z-index: 999;
	pointer-events:none;
}
.deng-box3 {
    position: fixed;
    top: -30px;
    left: -20px;
    z-index: 999;
	pointer-events:none;
}
.deng-box3 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng-box1 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 3s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}

.deng-a {
    width: 100px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: 12px 8px 8px 8px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
 
.deng-b {
    width: 45px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: -4px 8px 8px 26px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
 
.xian {
    position: absolute;
    top: -20px;
    left: 60px;
    width: 2px;
    height: 20px;
    background: #dc8f03;
}
 
.shui-a {
    position: relative;
    width: 5px;
    height: 20px;
    margin: -5px 0 0 59px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -45px;
    background: #ffa500;
    border-radius: 0 0 5px 5px;
}
 
.shui-b {
    position: absolute;
    top: 14px;
    left: -2px;
    width: 10px;
    height: 10px;
    background: #dc8f03;
    border-radius: 50%;
}
 
.shui-c {
    position: absolute;
    top: 18px;
    left: -2px;
    width: 10px;
    height: 35px;
    background: #ffa500;
    border-radius: 0 0 0 5px;
}
 
.deng:before {
    position: absolute;
    top: -7px;
    left: 29px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    z-index: 999;
    border-radius: 5px 5px 0 0;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
 
.deng:after {
    position: absolute;
    bottom: -7px;
    left: 10px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    margin-left: 20px;
    border-radius: 0 0 5px 5px;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
 
.deng-t {    
    font-size:3.2rem;
    color: #dc8f03;
    font-weight: bold;
    line-height: 85px;
    text-align: center;
}
 
.night .deng-t, 
.night .deng-box, 
.night .deng-box1 {
    background: transparent !important;
}
 
@-moz-keyframes swing {
    0% {
        -moz-transform: rotate(-10deg)
    }
 
    50% {
        -moz-transform: rotate(10deg)
    }
 
    100% {
        -moz-transform: rotate(-10deg)
    }
}
 
@-webkit-keyframes swing {
    0% {
        -webkit-transform: rotate(-10deg)
    }
 
    50% {
        -webkit-transform: rotate(10deg)
    }
 
    100% {
        -webkit-transform: rotate(-10deg)
    }
}

@media screen and (max-width: 730px) {
.deng-box {
right: 55px;
zoom:0.45
}
.deng-box1 {
right: 190px;
zoom:0.45
}
.deng-box2 {
left: 190px;
zoom:0.45
}
.deng-box3 {
left: 55px;
zoom:0.45
}
} 


/**头像旋转呼吸光环**/
.j-comment .comment-all .comment-list li .item .left:hover{
transform:rotate(360deg);
}
.j-aside .aside-reply .list li .user img:hover{
transform:rotate(360deg);
}
.j-aside .aside-hunter-authors .item .hunter-avatar .vatar img:hover{
transform:rotate(360deg);
}
.j-comment .comment-all .comment-list li .item .left {
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: all 0.5s;
}
.j-aside .aside-reply .list li .user img{
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: all 0.5s;
}
.j-aside .aside-hunter-authors .item .hunter-avatar .vatar img{
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: all 0.5s;
}
@keyframes light {
    0% {
        box-shadow: 0 0 4px
#ff1354;
    }
    25% {
    box-shadow: 0 0 16px #1ebbff;
    }
    50% {
    box-shadow: 0 0 4px #0ed39f;
    }
    75% {
    box-shadow: 0 0 16px #4fe7f4;
    }
    100% {
    box-shadow: 0 0 4px #f35444;
    }
}

/*博主登陆时间*/
.tooltip {
    position: relative;
    display: inline-block;
    margin: 0 0 0 20px;;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 100%;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;

    /* 定位 */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}