* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	background-color: var(--color-bg-main);
	color: var(--color-text-primary);
	transition: background-color 0.3s, color 0.3s;
	/* font-family: "Arial", "Helvetica Neue", Helvetica, sans-serif; */
	/* font-family: "Times New Roman", Times, serif; */
}

main {
	display: flex;
	margin-top: 20px;
}

#app {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.page {
	flex: 1;
	max-width: 2000px;
	padding: 0px 70px;
	animation: fadeIn 0.3s ease;
	margin: auto;
	width: 100%;
}

footer {
	margin: 10px 10vw 0px 10vw;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	color: var(--color-text-secondary);
	border-top: 1px solid var(--color-border);
}

footer a {
	color: var(--color-text-secondary);
	text-decoration: none;
	white-space: nowrap;
}

.beian {
    vertical-align: top; 
    width: 20px; 
    height: 20px;
    display: inline-block;
    margin-right: 5px;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.page p{
	overflow-wrap: break-word
}

@media (max-width: 768px) {
	.page {
		padding: 0px 30px;
	}
}


/* Webkit核心浏览器样式 */
::-webkit-scrollbar {
	width: 9px;
}

/* ::-webkit-scrollbar-track {
	margin-top: 0px;
} */

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

::-webkit-scrollbar-thumb:hover {
	background: var(--color-accent);
}

::-webkit-scrollbar-thumb:active {
	background: var(--color-accent);
}