@font-face {
	font-family: "Han Font";
	font-style: normal;
	font-display: swap;
	src: url("../font/HarmonyOS_Sans_SC_Medium.ttf") format("truetype")
}

* {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: "Han Font" !important;
	font-weight: 400;
	color: #101010
}

*::-webkit-scrollbar {
	width: 0;
	height: 5.88px
}

*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb:hover {
	background-color: #bdbdbd
}

*::-webkit-scrollbar-track {
	box-shadow: inset 0 0 0 #fff;
	background-color: transparent
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	text-rendering: optimizelegibility;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	background: url("../images/body.png") no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
	background-color: #ffffff
}

body {
	box-sizing: border-box;
	padding: 18px;
	margin: 0;
	width: 100vw;
	height: max-content;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	user-select: none
}

body>.fixed-section {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 0
}

body>.fixed-section>.vh-cat {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url("../images/cat.webp") no-repeat;
	background-size: 100% auto;
	background-position: bottom left;
	z-index: 1
}

body>.fixed-section>.vh-cat::before {
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(6px)
}

body>.fixed-section>.vh-bg {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1
}

body>.fixed-section>.vh-boy {
	position: fixed;
	width: 1600px;
	height: 300px;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	background: url("../images/boy.svg") no-repeat;
	background-size: cover;
	z-index: 1
}

body>.home {
	position: relative
}

body>.home>header {
	margin: 0 auto;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 1288px;
	height: max-content
}

body>.home>header>h1,
body>.home>header>h2 {
	margin: 18px 0;
	width: 100%;
	color: #fff;
	line-height: 1;
	text-align: left
}

body>.home>header>h1 {
	font-size: 2.22rem
}

body>.home>header>h2 {
	font-size: 1.25rem;
	color: #fff;
	line-height: 1.5
}

body>.home>header>.search-input {
	margin-top: 36px;
	box-sizing: border-box;
	padding: 0 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 38px;
	border: solid 1px #fff
}

body>.home>header>.search-input>input.search-input-val {
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
	background-color: transparent;
	font-size: 14px;
	color: #fff
}

body>.home>header>.search-input>input.search-input-val::placeholder {
	color: rgba(255, 255, 255, 0.68)
}

body>.home>.statistics {
	margin: 0 auto 1rem;
	width: 100%;
	max-width: 1288px;
	height: 16.63rem
}

body>.home>.main {
	width: 100%;
	height: max-content;
	min-height: 800px
}

body>.home>.main>.category {
	box-sizing: border-box;
	margin: 0 auto 28px;
	width: 100%;
	max-width: 1288px
}

body>.home>.main>.category>h3 {
	margin: 0;
	width: max-content;
	padding-bottom: 8px;
	border-bottom: 3px solid #fff;
	color: #fff;
	font-size: 1.31rem
}

body>.home>.main>.article-list {
	box-sizing: border-box;
	margin: 0 auto 28px;
	width: 100%;
	max-width: 1288px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px
}

body>.home>.main>.article-list>.article-list-item {
	position: relative;
	box-sizing: border-box;
	padding: 18px;
	display: flex;
	align-items: flex-start;
	width: 100%;
	height: 118px;
	border-radius: 8px;
	text-decoration: none;
	background-color: rgba(255, 255, 255, 0.08);
	cursor: pointer;
	transition: all .3s;
	overflow: hidden
}

body>.home>.main>.article-list>.article-list-item:hover {
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	transition: .2s all;
	animation: vh-linkitem-hover 1s cubic-bezier(.315, .605, .375, .925) forwards;
	-webkit-animation: vh-linkitem-hover 1s cubic-bezier(.315, .605, .375, .925) forwards
}

body>.home>.main>.article-list>.article-list-item:hover::after {
	height: 100%
}

body>.home>.main>.article-list>.article-list-item::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	bottom: 0;
	height: 3.6px;
	transition: all .2s;
	z-index: 1
}

body>.home>.main>.article-list>.article-list-item:nth-of-type(6n + 1)::after {
	background: linear-gradient(to right, rgba(243, 25, 127, 0.18), rgba(247, 118, 59, 0.18))
}

body>.home>.main>.article-list>.article-list-item:nth-of-type(6n + 2)::after {
	background: linear-gradient(to right, rgba(247, 118, 59, 0.18), rgba(255, 251, 4, 0.18))
}

body>.home>.main>.article-list>.article-list-item:nth-of-type(6n + 3)::after {
	background: linear-gradient(to right, rgba(255, 251, 4, 0.18), rgba(0, 255, 34, 0.18))
}

body>.home>.main>.article-list>.article-list-item:nth-of-type(6n + 4)::after {
	background: linear-gradient(to right, rgba(0, 255, 34, 0.18), rgba(12, 228, 228, 0.18))
}

body>.home>.main>.article-list>.article-list-item:nth-of-type(6n + 5)::after {
	background: linear-gradient(to right, rgba(12, 228, 228, 0.18), rgba(87, 0, 250, 0.18))
}

body>.home>.main>.article-list>.article-list-item:nth-of-type(6n + 6)::after {
	background: linear-gradient(to right, rgba(87, 0, 250, 0.18), rgba(243, 25, 127, 0.18))
}

body>.home>.main>.article-list>.article-list-item>.article-hot {
	box-sizing: border-box;
	padding: 0 8px;
	position: absolute;
	right: 0;
	top: 0;
	width: max-content;
	font-size: .88rem;
	color: #fff;
	line-height: 28px;
	background-color: rgba(0, 24, 238, 0.08)
}

body>.home>.main>.article-list>.article-list-item>.article-hot>i {
	font-style: normal;
	font-size: .75rem;
	color: rgba(255, 255, 255, 0.68)
}

body>.home>.main>.article-list>.article-list-item>.article-title {
	position: relative;
	z-index: 2
}

body>.home>.main>.article-list>.article-list-item>.article-title>h2,
body>.home>.main>.article-list>.article-list-item>.article-title>h3 {
	margin: 0;
	display: block;
	position: relative;
	width: max-content;
	transition: all .3s
}

body>.home>.main>.article-list>.article-list-item>.article-title>h2 {
	color: #fff;
	max-width: 148px;
	font-size: 1rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

body>.home>.main>.article-list>.article-list-item>.article-title>h3 {
	width: 100%;
	padding-top: 10px;
	font-size: .88rem;
	color: #b8b6bf;
	font-weight: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: all .1s
}

body>.home>.main>.article-list>.article-list-item>.article-icon {
	position: absolute;
	left: .94vw;
	top: .94vw;
	width: 1.35vw
}

body>.home>.main>.show-tips {
	position: fixed;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	z-index: 5888;
	overflow: hidden;
	touch-action: none;
	transform: scale(0);
	transition: all .18s
}

body>.home>.main>.show-tips.active {
	transform: scale(1)
}

body>.home>.main>.show-tips>.show-tips-main {
	position: relative;
	box-sizing: border-box;
	padding: 2.25rem 1.75rem;
	width: 588px;
	max-width: 88vw;
	height: max-content;
	background: #1f2224;
	font-size: 1.18rem;
	color: #fff;
	line-height: 1.58;
	border-radius: 2.25rem;
	box-shadow: 0 0 16px .06px rgba(255, 255, 255, 0.06)
}

body>.home>.main>.show-tips>.show-tips-main>.close {
	content: "";
	width: 1.18rem;
	height: 1.18rem;
	position: absolute;
	right: 1.18rem;
	top: 1.18rem;
	background: url("../images/close.webp");
	background-size: contain;
	cursor: pointer
}

body>.home>.main>.show-tips>.show-tips-main>.show-tips-title {
	padding-bottom: 1rem;
	font-size: 1.18rem;
	color: #fff
}

body>.home>.main>.show-tips>.show-tips-main>.show-tips-content>p {
	margin: 0 0 .38rem 0;
	color: #fff;
	font-size: 1rem;
	text-indent: 2rem
}

body>.page {
	position: relative
}

body>.page>header {
	margin: 0 auto;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 1288px;
	height: max-content
}

body>.page>header>a>h1,
body>.page>header>h2 {
	margin: 8px 0;
	width: 100%;
	color: #fff;
	line-height: 1;
	text-align: left
}

body>.page>header>a {
	display: block;
	width: 100%;
	text-align: left
}

body>.page>header>a>h1 {
	font-size: 1.25rem;
	transition: all .2s
}

body>.page>header>a>h1::before {
	padding-right: 5px;
	content: "#"
}

body>.page>header>a>h1:hover {
	transform: translate(1.88px, -1.88px)
}

body>.page>header>h2 {
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.68);
	line-height: 1.5rem
}
body>.page>header>h3 {
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.68);
	line-height: 1.5rem
}
body>.page>header>h2>a {
	text-decoration: none;
	color: #fff
}

body>.page>.main {
	margin: 0 auto;
	width: 100%;
	max-width: 1288px
}

body>.page>.main>article>h3 {
	color: #fff;
	font-size: 1.13rem
}

body>.page>.main>article>section {
	position: relative;
	margin: 1.18rem 0 1.61rem;
	height: max-content;
	border-radius: .56rem;
	background-color: rgba(255, 255, 255, 0.08);
	overflow: hidden;
	cursor: pointer
}

body>.page>.main>article>section>p {
	margin: 0;
	box-sizing: border-box;
	padding: 0 18.88px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 3rem;
	font-size: .99rem;
	line-height: 1;
	color: #9895a1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 1
}

body>.page>.main>article>section>p::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: .37rem;
	background-color: rgba(255, 255, 255, 0.18);
	transition: all .3s
}

body>.page>.main>article>section>p:hover::after {
	width: 100%;
	border-top-right-radius: .56rem;
	border-bottom-right-radius: .56rem
}

body>.page>.main>article>section>p>span {
	font-size: .99rem;
	line-height: 1;
	color: #9895a1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

body>.page>.main>article>section>p>span:nth-of-type(1) {
	flex: 1
}

body>.page>.main>article>section>p>span:nth-of-type(2) {
	width: max-content;
	color: #fff
}

body>.page>.main>article>section.pms {
	cursor: auto
}

body>.page>.main>article>section.pms>.r-item {
	box-sizing: border-box;
	padding-left: 18.88px;
	display: grid
}

body>.page>.main>article>section.pms>.r-item>.r-i-item {
	height: 3rem;
	text-align: center;
	color: #fff;
	font-size: .88rem;
	line-height: 3rem;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	user-select: text
}

body>.page>.main>article>section.pms>.r-item>.r-i-item:nth-of-type(1),
body>.page>.main>article>section.pms>.r-item>.r-i-item:nth-last-of-type(1) {
	text-align: left
}

body>.page>.main>article>section.pms.request>.r-item {
	grid-template-columns: 10rem 10rem calc(100% - 7.88rem)
}

body>.page>.main>article>section.pms.respons>.r-item {
	grid-template-columns: 3.63rem calc(100% - 3.63rem)
}

body>.page>.main>article>pre {
	width: 100%;
	height: max-content;
	border-radius: .56rem;
	overflow: hidden
}

body>.page>.main>article>pre>code.hljs {
	background: #252236;
	font-size: 14px;
	font-weight: normal;
	font-family: "San Francisco", Arial !important;
	user-select: text
}

body>footer {
	position: relative;
	box-sizing: border-box;
	padding: 6.13rem 0 11.8rem;
	height: max-content;
	text-align: center
}

body>footer>p.copyright {
	color: #fff;
	margin: 8px 0 36px;
	font-size: 1.25rem;
	letter-spacing: .37rem
}

body>footer>p.dec,
body>footer>p.time,
body>footer>p.icp {
	color: rgba(255, 255, 255, 0.68);
	font-size: 12px;
	letter-spacing: .06rem
}

body>footer>p>em {
	color: #6eeff3
}

body>footer>p>a {
	color: #fffafa;
	text-decoration: none;
	transition: all .3s
}

body>footer>.icon {
	margin: 2.25rem auto 3.5rem;
	width: 266px;
	height: max-content;
	display: flex;
	align-items: center;
	justify-content: space-between
}

body>footer>.icon>a {
	width: 36px;
	height: 36px;
	background: url("../images/footer/shang.png");
	background-size: contain;
	opacity: .68;
	transition: all .3s
}

body>footer>.icon>a:hover {
	opacity: 1
}

body>footer>.icon>a:nth-of-type(2) {
	background-image: url("../images/footer/qq.png")
}

body>footer>.icon>a:nth-of-type(3) {
	background-image: url("../images/footer/github.png")
}

body>footer>.icon>a:nth-of-type(4) {
	background-image: url("../images/footer/blog.png")
}

body>.ξvh-toast {
	pointer-events: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: .99rem 1.18rem;
	height: max-content;
	width: max-content;
	max-width: 318px;
	color: #fff;
	border-radius: .56rem;
	background-color: rgba(0, 0, 0, 0.6);
	font-size: .93rem;
	line-height: 1.18rem;
	z-index: -1;
	transition: all .2s
}

body>.ξvh-toast.active {
	pointer-events: auto;
	transform: translate(-50%, -50%) scale(1);
	z-index: 566
}

.vh-bolang {
	pointer-events: none;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100vw;
	height: 88px;
	opacity: .36;
	z-index: 1
}

.vh-bolang>.vh-bolang-main>use {
	animation: vh-bolang-item-move 12s linear infinite
}

.vh-bolang>.vh-bolang-main>use:nth-child(1) {
	animation-delay: -2s
}

.vh-bolang>.vh-bolang-main>use:nth-child(2) {
	animation-delay: -2s;
	animation-duration: 5s
}

.vh-bolang>.vh-bolang-main>use:nth-child(3) {
	animation-delay: -4s;
	animation-duration: 3s
}

.tc {
    position: fixed;
    display: flex;
    visibility: hidden;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    background: rgba(20, 20, 20, 0.5);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    top: 0; /* 确保从顶部开始 */
    left: 0; /* 确保从左侧开始 */
}

.tc-main {
    z-index: 100000;
    /*width: 80%;*/
    max-width: 1000px;
    min-height: 600px;
    background-color: #ffffff;
    border-radius: 15px;
    display: flex;
    transition: transform 0.2s linear;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform: translateY(30%) scale(0.5);
    margin-bottom: 30%;
}

.tc-img {
    width: 100%;
    height: 100%;
}

.tc.active {
    visibility: visible;
}

.code {
    display: block;
    margin: 10px 0;
    padding: 10px;
    border-left-width: 6px;
    background-color: rgba(255, 255, 255, 0.08);;
    color: #d1bdbd;
    text-align: left; /* 确保文本居左对齐 */
    white-space: pre-wrap; /* 保持换行符，允许长行自动换行 */
}

.tab-title {
    text-align: center !important;
    position: relative;
    left: 0;
    height: 40px;
    white-space: nowrap;
    font-size: 0;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    transition: all .2s;
    -webkit-transition: all .2s;
}

.tab-title li {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    transition: all .2s;
    -webkit-transition: all .2s;
    position: relative;
    line-height: 40px;
    min-width: 65px;
    padding: 0 15px;
    text-align: center;
    cursor: pointer;
    color: #FFF;
}

.tab-title .this {
    color: #009688;
}

@media screen and (max-width:1166px) {
	body>.home>.main>.article-list {
		grid-template-columns: repeat(4, 1fr)
	}
}

@media screen and (max-width:1066px) {
	body>.home>.main>.article-list {
		grid-template-columns: repeat(3, 1fr)
	}
}

@media screen and (max-width:856px) {
	body>.home>.main>.article-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr)
	}
}

@media screen and (max-width:556px) {
	body>.home>.main>.article-list {
		grid-template-columns: repeat(1, 1fr)
	}
}

@keyframes vh-bolang-item-move {
	0% {
		transform: translate(-90px, 0)
	}

	100% {
		transform: translate(85px, 0)
	}
}

@keyframes vh-linkitem-hover {
	0% {
		transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(0)
	}

	16% {
		transform: perspective(1600px) rotateX(10deg) rotateY(5deg) translateZ(32px)
	}

	100% {
		transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(65px)
	}
}