html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-family: system-ui;
	font-weight: 100;
	overflow: hidden;
	background-color: #CCCCCC;
	position: relative;
}
a {
	text-decoration: none;
	font-size: 14px;
	color: #FFFFFF;
}
hr {
	border: 1px dashed #CCCCCC;
}
select, textarea, input[type="email"], input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	height: 36px;
	outline: none;
	display: block;
	padding: 0.375rem 0.75rem;
	line-height: 24px;
	color: #495057;
	background-color: #FFFFFF;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: 0px;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	font-family: system-ui;
}
button, input[type="submit"], input[type="reset"], input[type="button"] {
	position: relative;
	box-sizing: border-box;
	background-color: #000000;
	color: #FFFFFF;
	margin-left: 0rem;
	display: inline-block;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	user-select: none;
	border: 1px solid transparent;
	padding: 0.375rem 0.75rem;
	line-height: 24px;
	border-radius: 0px;
	margin-right: 2px;
	cursor: pointer;
}
 input:read-only {
 background-color: #F9F9F9;
}
 input[type="submit"]:read-only, input[type="reset"]:read-only, input[type="button"]:read-only {
 background-color: #000000;
}
.about {
    max-width: 800px;
    margin: 0 auto;
    margin-top: 48px;
}
.about-section {
	margin-bottom: 40px;
}
.about-section a {
	color: #000000;
}
.about-section h3 {
	font-size: 16px;
	font-weight: 500;
	margin: 0 0 16px 0;
	padding-bottom: 6px;
	border-bottom: 1px solid #E0DCD6;
	color: #3B3A36;
}
.about-section li {
	line-height: 1.6;
	margin-bottom: 6px;
}
.about-section p {
	line-height: 1.7;
	color: #4A4A4A;
	margin: 0 0 12px 0;
}
.about-section ul {
	margin: 8px 0 12px 20px;
	padding: 0;
	color: #4A4A4A;
}
.article {
	padding: 40px 20px;
	line-height: 24px;
}
.article b {
	font-size: 14px;
	font-weight: 700;
}
.article-category {
	background-color: #F5F3EF;
	padding: 4px 8px;
	font-size: 12px;
	color: #333333;
	display: table;
	margin-left: 8px;
	border: 1px dashed #CCCCCC;
}
.article-category a {
	font-size: 12px;
	color: #333333;
}
.article-content {
	box-sizing: border-box;
	background: #FEF9E6;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease;
	min-height: 100%;
}
.article-header {
	font-size: 16px;
	font-weight: 500;
	padding-bottom: 6px;
	border-bottom: 1px dashed #CCCCCC;
	color: #000000;
}
.article-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	padding: 14px 0;
	border-bottom: 1px dashed #E0E0E0;
	gap: 8px;
	transition: background-color 0.6s ease;
}
.article-item:hover {
	background-color: #FAF9F5;
}
.article-link {
	padding: 8px;
	display: table;
	margin-left: 8px;
}
.article-list {
	padding: 18px;
	margin: 0;
	list-style: none;
	border-bottom: 1px dashed #CCCCCC;
}
.article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 12px;
	color: #666666;
	align-items: center;
	margin-right: 8px;
}
.article-meta-center {
	text-align: center;
	font-size: 12px;
	color: #666;
	margin-bottom: 28px;
}
.article-title {
	font-size: 14px;
	font-weight: 500;
	margin: 0;
	flex: 2 1 200px;
}
.article-title a {
	color: #333333;
	text-decoration: none;
}
.article-title-center {
	text-align: center;
	font-size: 22px;
	margin: 20px 0 12px;
}
.banner-elegant {
	width: 100%;
	margin-bottom: 6px;
	background: #F5F3EF;
	border: 1px dashed #CCCCCC;
	padding: 28px 24px;
	box-sizing: border-box;
	box-shadow: none;
	transition: all 0.2s ease;
	text-align: center;
}
.banner-elegant h2 {
	margin: 0 0 10px 0;
	font-size: 28px;
	font-weight: 400;
	letter-spacing: 2px;
	color: #3B3A36;
	font-family: system-ui;
}
.banner-elegant p {
	margin: 0;
	font-size: 14px;
	color: #7A756E;
	line-height: 1.6;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}
.banner-inner {
	max-width: 100%;
}
.banner-sub {
	font-size: 14px;
	color: #7C7C7C;
	border-top: 1px solid #DCD7CF;
	display: inline-block;
	padding-top: 8px;
	margin-top: 6px;
	letter-spacing: 1px;
}
.banner-title {
	font-size: 28px;
	font-weight: 300;
	letter-spacing: 4px;
	color: #4A4A4A;
	margin: 0 0 8px 0;
	padding: 0;
	line-height: 1.2;
}
.book {
	width: 100%;
	display: flex;
	background: #F5F3EF;
	border: 1px dashed #CCCCCC;
}
.bookbg {
	padding: 32px 0px 0px 32px;
	box-sizing: border-box;
	display: flex;
	height: 100%;
	text-decoration: underline;
	text-underline-offset: 8px;
	text-decoration-style: dashed;
	text-decoration-color: #CCCCCC;
	text-decoration-thickness: from-font;
	cursor: default;
}
.bookimg {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	display: flex;
	list-style: none;
	background-color: #006699;
	font-size: 72px;
	font-weight: 500;
	writing-mode: tb-rl;
	padding: 20px;
	border-right: 4px solid #999999;
}
.bookimg a {
	width: 100%;
	height: 100%;
	color: #333333;
}
.bookimg b {
	font-size: 32px;
	font-weight: 500;
	color: #FFFFFF;
	cursor: default;
}
.bookimg hr {
	border: 1px solid #000000;
}
.bookimg i {
	font-size: 18px;
	font-weight: 400;
	color: #FFFFFF;
	font-style: normal;
}
.bookimg u {
	text-decoration: none;
	font-size: 18px;
	font-weight: 100;
	color: #CCCCCC;
}
.books {
	box-sizing: border-box;
	width: 300px;
	height: 400px;
	padding: 20px;
	position: relative;
}
.books i {
	float: right;
	margin-top: -28px;
	margin-right: 18px;
	font-style: normal;
	font-size: 14px;
	font-weight: 500;
	color: lightslategray;
}
.box-taiji {
	left: 56px;
	bottom: 36px;
	width: 0;
	height: 80px;
	transform: rotate(135deg);
	position: absolute;
	margin: 20px auto;
	border-left: 40px solid #000;
	border-right: 40px solid #fff;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
	border-radius: 80px;
}
.box-taiji:after {
	width: 40px;
	height: 40px;
	position: absolute;
	content: '';
	display: block;
	top: 0;
	left: -20px;
	z-index: 1;
	background-color: #000000;
	border-radius: 50%;
	box-shadow: 0 40px 0 #FFFFFF;
}
.box-taiji:before {
	content: '';
	position: absolute;
	display: block;
	width: 14px;
	height: 14px;
	top: 12px;
	left: -8px;
	z-index: 2;
	background-color: #FFFFFF;
	border-radius: 50%;
	box-shadow: 0 40px 0 #000000;
}
.breadcrumb {
	font-size: 12px;
	color: #7A756E;
	margin-bottom: 16px;
	padding: 6px 0;
	border-bottom: 1px dashed #e0e0e0;
}
.breadcrumb a {
	color: #666;
	font-size: 12px;
}
.calendar-container {
	background-color: #FFFFFF;
	border: 1px solid #EEEEEE;
	padding: 8px;
}
.calendar-day {
	text-align: center;
	padding: 6px 2px;
	font-size: 14px;
	border-radius: 2px;
	cursor: default;
	background-color: #FFFFFF;
	color: #333;
}
a.calendar-day {
	text-decoration: none;
	color: #333;
	display: block;
	cursor: pointer;
}
a.calendar-day:hover {
	background-color: #FAF9F5;
}
.calendar-day.has-content {
	background-color: #F5F3EF;
	font-weight: 500;
	color: burlywood;
}
.calendar-day.other-month {
	color: #BBBBBB;
}
.calendar-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}
.calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}
.calendar-header button {
	background: #FFFFFF;
	padding: 0px 6px;
	margin: 12px 0px;
	cursor: pointer;
}
.calendar-header span {
	font-weight: 500;
	font-size: 14px;
}
.calendar-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	font-size: 12px;
	color: #888;
	margin-bottom: 6px;
}
.prev-month {
	border-width: 6px 12px 6px 0px;
	border-color: transparent #CCCCCC transparent transparent;
}
.prev-month:hover {
	border-color: transparent burlywood transparent transparent;
}
.next-month {
	border-width: 6px 0 6px 12px;
	border-color: transparent transparent transparent #CCCCCC;
}
.next-month:hover {
	border-color: transparent transparent transparent burlywood;
}
.clear {
	clear: both;
}
.color-grid {
	display: none;
	position: absolute;
	top: 32px;
	left: 0;
	background: white;
	border: 1px solid #ccc;
	padding: 8px;
	z-index: 100;
	width: 176px;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	background: #fff;
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
}
.color-grid.active {
	display: grid;
}
.color-option {
	width: 32px;
	height: 28px;
	border: 1px solid #ccc;
	cursor: pointer;
}
.color-picker-wrapper {
	position: relative;
	display: inline-block;
}
.column h4 {
	font-size: 16px;
	font-weight: 500;
	padding: 8px;
	margin: 0px;
	border-bottom: 1px dashed #CCCCCC;
	color: #000000;
	background: #F9F9F9;
}
.column h4 a {
	font-size: 16px;
	color: #000000;
	padding: 0px 4px;
}
.content {
	box-sizing: border-box;
	width: 100%;
	min-height: 100%;
	padding: 20px;
}
.cover {
	width: 400px;
	padding: 8px;
	display: flex;
	justify-content: center;
}
.dark, .dark a {
	color: #FFFFFF;
	background-color: #343a40;
	border-right: 4px solid #999999;
}
.declare {
	box-sizing: border-box;
	width: 600px;
	display: flex;
	list-style: none;
	border: 0px;
	padding: 12px 28px;
}
.declare b {
	font-size: 18px;
}
.feedback-form {
	background-color: #F5F3EF;
	border: 1px dashed #CCCCCC;
	padding: 20px;
	margin-top: 24px;
}
.feedback-form p {
	color: #6B6558;
	font-size: 12px;
	margin-bottom: 20px;
}
.feedback-form p {
	color: #6B6558;
	font-size: 12px;
	margin-bottom: 20px;
}
.folder-closed {
	float: left;
	margin: 6px 6px 0px 0px;
	border-style: solid;
	border-width: 6px 0 6px 12px;
	border-color: transparent transparent transparent #CCCCCC;
}
.folder-closed:hover {
	border-color: transparent transparent transparent burlywood;
}
.folder-name {
	font-size: 12px;
}
.folder-open {
	float: left;
	margin: 6px 6px 0px 0px;
	border-style: solid;
	border-width: 12px 6px 0 6px;
	border-color: #CCCCCC transparent transparent transparent;
}
.folder-open:hover {
	border-color: burlywood transparent transparent transparent;
}
.footer {
	box-sizing: border-box;
	width: 100%;
	text-align: center;
	background-color: #000000;
	font-size: 12px;
	font-weight: 500;
	line-height: 24px;
	color: #FFFFFF;
	padding: 12px 0px;
	border-right: 4px solid #999999;
}
.footer a {
	text-decoration: none;
	font-size: 12px;
	color: #7A7A7A;
}
.footer img {
	width: 26px;
	height: 22px;
	margin-bottom: 4px;
	vertical-align: middle;
}
.form-group {
	margin-bottom: 18px;
}
.form-group input, .form-group textarea {
	width: 100%;
	box-sizing: border-box;
	resize: none;
}
.form-group label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	color: #6B6558;
	font-size: 12px;
}
.form-group textarea {
	min-height: 100px;
}
.header {
	height: 48px;
	padding: 16px 0px;
	position: relative;
	z-index: 2;
	background-color: transparent;
}
.headerleft {
	float: left;
	height: 48px;
	width: 60%;
}
.headerleft img {
	float: left;
	width:36px;
	height:36px;
	border:0px;
	padding: 2px 12px;
	vertical-align: -webkit-baseline-middle;
}
.headerleft a {
	font-size: 12px;
	color: #666666;
}
.headerright {
	float: left;
	height: 48px;
	width: 40%;
}
.headertext {
	float: left;
	color: #000000;
}
.headertext b {
	font-size: 18px;
}
.headertext i {
	font-size: 14px;
	font-style: normal;
	padding: 2px;
}
.index {
	box-sizing: border-box;
	background-color: #FFFFFF;
	width: 100%;
	min-height: 100%;
	padding: 12px;
	border-right: 4px solid #999999;
}
.intro {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	list-style: none;
	border: 0px;
	line-height: 32px;
	text-decoration-color: #999999;
	background-image: url(/images/bg.png);
	background-repeat: repeat;
	background-size: cover;
	background-position: center;
	writing-mode: tb-rl;
	letter-spacing: 12px;
}
.intro a {
	width: 100%;
	color: #333333;
	position: relative;
}
.keyword-items {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.keyword-tag {
	display: inline-block;
	background-color: #F5F3EF;
	border: 1px solid #CCCCCC;
	padding: 4px 12px;
	font-size: 12px;
	color: #333333;
	text-decoration: none;
	transition: all 0.15s ease;
}
.keyword-tag:hover {
	background-color: #FAF9F5;
	border-color: #666666;
	color: #000000;
}
.left-sidebar {
	width: 260px;
	flex-shrink: 0;
	background-color: #F9F9F9;
	border: 1px dashed #CCCCCC;
	padding: 10px;
}
.light, .light a {
	color: #212529;
	background-color: #f8f9fa;
	border-right: 4px solid #999999;
}
.main {
	width: 1000px;
	height: 100%;
	min-height: 100%;
	border: 0px;
	margin: 0 auto;
}
.menu {
	height: 34px;
	position: relative;
	z-index: 2;
}
.menubutton {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	padding: 0.375rem 0.75rem;
	line-height: 24px;
	margin-right: 4px;
}
.left-menu {
	display: flex;
	gap: 12px;
	margin-top: 12px;
}
.page {
	width: 100%;
	height: 100%;
	overflow: auto;
}
.pagelink {
	width: 100%;
	height: 100%;
	margin-top: 24px;
	display: block;
	padding: 4px;
	text-align: center;
}
.pagelink a {
	line-height: 24px;
	margin: 0px 12px;
	color: #666666;
	border: 1px #666666 DASHED;
	padding: 4px 24px;
	background-color: #F9F9F9;
}
.pagination-bar {
	padding: 12px 0;
	text-align: center;
	display: flex;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
	background: #F9F9F9;
}
.pagination-bar a, .pagination-bar span {
	display: inline-block;
	padding: 6px 14px;
	margin: 0 4px;
	border: 1px dashed #BBBBBB;
	background-color: #F9F9F9;
	color: #444;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s;
}
.pagination-bar a:hover {
	background-color: #FAF9F5;
	border-color: #888;
	color: #000;
}
.pagination-bar .active-page {
	background-color: #EEEEEE;
	border: 1px dashed #999999;
	color: #000;
	font-weight: 500;
	cursor: default;
}
.pagination-bar .disabled {
	color: #BBBBBB;
	background-color: #F5F5F5;
	cursor: not-allowed;
	border-color: #E0E0E0;
}
.read-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	background: #F9F9F9;
	padding: 8px 12px;
	border: 1px solid #CCCCCC;
	margin-bottom: 20px;
}
.right-main {
	flex: 1;
	min-width: 0;
	border: 1px dashed #CCCCCC;
}
.searchbox {
	width: 36% !important;
	float: right;
}
.searchbutton {
	float: right;
	background-color: #000000;
	color: #FFFFFF;
	margin-left: 2px;
	display: inline-block;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	user-select: none;
	border: 1px solid transparent;
	padding: 0.375rem 0.75rem;
	line-height: 24px;
	border-radius: 0px;
}
.searchselect {
	width: 80px !important;
	float: right;
	background: #F5F3EF;
}
.send-btn {
	background-color: #000000;
	color: #FFFFFF;
	border: none;
	padding: 6px 16px;
	cursor: pointer;
	font-size: 14px;
}
.send-btn:hover {
	background-color: #666666;
}
.sidebar-block {
	margin-bottom: 28px;
}
.sidebar-block h4 {
	font-size: 16px;
	font-weight: 500;
	margin: 0 0 12px 0;
	padding-bottom: 6px;
	border-bottom: 1px dashed #CCCCCC;
	color: #000000;
}
.statement {
	box-sizing: border-box;
	width: 100%;
	background-color: #F5F3EF;
	border-right: 4px solid #999999;
	font-size: 12px;
	line-height: 24px;
	padding:  20px;
}
.statement a {
	color: #000000;
}
.statement h6 {
	font-size: 16px;
	font-weight: 500;
	margin: 0px;
	padding-bottom: 6px;
	border-bottom: 1px dashed #CCCCCC;
	color: #000000;
}
.tool-btn {
	height: 32px;
	background: #F5F3EF;
	color: #333;
	border: 1px solid #aaa;
	padding: 4px 12px;
	font-size: 13px;
	cursor: pointer;
}
.tool-btn:hover {
	background-color: cornsilk;
}
.tree-category div {
	margin-bottom: 12px;
	background: #FFFFFF;
	padding: 12px;
}
.tree-category dt {
	font-weight: 500;
	color: #000000;
	font-size: 16px;
	border-bottom: 1px dashed #CCCCCC;
	padding: 6px 0px;
}
.tree-menu {
	list-style-type: disc;
	padding-left: 16px;
	margin: 0;
}
.tree-menu a {
	color: #333;
	text-decoration: none;
	transition: all 0.15s ease;
	cursor: pointer;
	display: inline-block;
	padding: 2px 4px;
	border-radius: 2px;
}
.tree-menu a:hover {
	background-color: #FAF9F5;
	color: #000;
}
.tree-menu li {
	margin: 5px 0;
	line-height: 1.5;
}
.tree-menu > li {
	list-style-type: none;
}
.tree-menu li > ul {
	list-style-type: circle;
	padding-left: 24px;
	margin: 4px 0 4px 0;
}
.tree-menu li > ul > li {
	list-style-type: none;
}
.tree-menu li > ul > li > ul {
	list-style-type: square;
	padding-left: 24px;
	margin: 4px 0 4px 0;
}
.tree-menu li > ul > li > ul > li {
	list-style-type: square;
}
.tree-menu span {
	cursor: pointer;
}
.tree-menu .folder-link {
	font-weight: 500;
}
 @keyframes increase-width {
 from {
 width: 0%;
}
to {
	width: 100%;
}
}
 @media screen and (max-width: 992px) {
 .main {
 width: 95%;
 margin: 0 auto;
}
 .left-menu {
 gap: 24px;
}
 .left-sidebar {
 width: 240px;
}
 .image-thumb {
 width: 120px;
 height: 90px;
}
}
 @media screen and (max-width: 768px) {
 .header {
 height: auto;
 padding: 12px 0;
}
 .headerleft,  .headerright {
 float: none;
 width: 100%;
 text-align: center;
 margin-bottom: 8px;
}
 .headerright,  .declare {
 display: none;
}
 .headerleft img {
 float: none;
 display: inline-block;
 margin: 0 auto;
}
 .headertext {
 text-align: center;
 margin-top: 6px;
}
 .menu {
 text-align: left;
 padding: 0px;
 margin: 0px;
}
 .left-menu {
 flex-direction: column;
 gap: 20px;
 margin-top: 20px;
}
 .left-sidebar {
 width: 100%;
 box-sizing: border-box;
 padding: 16px;
}
 .right-main {
 width: 100%;
}
 .banner-elegant {
 padding: 20px 16px;
}
 .banner-elegant h2 {
 font-size: 24px;
}
 .article-item,  .book-item {
 align-items: flex-start;
}
 .image-thumb {
 width: 100%;
 height: auto;
 max-height: 180px;
 object-fit: cover;
}
 .image-item-wrap {
 flex-direction: column;
}
 .book-cover {
 width: 80px;
 height: 110px;
}
 .book-info {
 width: 100%;
}
 .calendar-container {
 max-width: 100%;
 overflow-x: auto;
}
 .pagination-bar a,  .pagination-bar span {
 padding: 4px 10px;
 font-size: 12px;
}
 .tree-menu {
 padding-left: 12px;
}
 .keyword-tag {
 padding: 3px 8px;
 font-size: 11px;
}
 .copyright {
 font-size: 11px;
 padding: 16px;
}
}
 @media screen and (max-width: 480px) {
 .main {
 width: 100%;
 padding: 0 8px;
 box-sizing: border-box;
}
 .headerright,  .declare {
 display: none;
}
 .index {
 padding: 12px;
}
 .banner-elegant {
 padding: 16px 12px;
}
 .banner-elegant h2 {
 font-size: 16px;
}
 .banner-elegant p {
 font-size: 12px;
}
 .article-summary {
 padding: 6px 10px;
 font-size: 12px;
}
 .pagination-bar a,  .pagination-bar span {
 padding: 4px 8px;
 margin: 0 2px;
}
 .book-meta span {
 font-size: 10px;
 padding: 2px 6px;
}
 .book-summary {
 font-size: 12px;
}
 .calendar-day {
 padding: 4px 2px;
 font-size: 11px;
}
}