body {
			background-color: #f2f2f2;
			font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
		}

		.top-banner {
			background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center;
			background-size: cover;
			color: #fff;
			height: 300px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			position: relative;
		}

		.logo {
			font-size: 40px;
			color: #fff;
			font-weight: bold;
			margin-bottom: 15px;
			text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
		}

		.logo span {
			font-size: 42px;
			color: #5FB878;
		}

		.site-description {
			font-size: 18px;
			color: #eee;
			max-width: 600px;
			margin: 0 auto 30px;
			text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
		}

		.blog-container {
			margin: -50px auto 20px;
			max-width: 1200px;
			position: relative;
		}

		.blog-main {
			padding: 15px;
			background-color: #fff;
			border-radius: 4px;
			box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
		}

		.blog-side {
			padding: 15px;
			margin-left: 15px;
			background-color: #fff;
			border-radius: 4px;
			box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
		}

		/* 搜索框样式 */
		.search-container {
			width: 100%;
			max-width: 600px;
			margin: 0 auto;
			position: relative;
		}

		.search-input {
			width: 100%;
			height: 50px;
			padding: 0 20px;
			border: none;
			border-radius: 30px;
			font-size: 16px;
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		}

		.search-btn {
			position: absolute;
			right: -30px;
			top: 5px;
			height: 40px;
			width: 40px;
			border-radius: 50%;
			background-color: #5FB878;
			color: white;
			border: none;
			cursor: pointer;
			transition: all 0.3s;
		}

		.search-btn:hover {
			background-color: #4CAF50;
		}

		/* 导航栏样式 */
		.nav-container {
			background-color: #fff;
			box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .1);
			margin-bottom: 20px;
			border-radius: 4px;
		}

		.nav-menu {
			background: none !important;
			line-height: 60px;
		}

		.nav-menu .layui-nav-item {
			margin: 0 10px;
		}

		.nav-menu .layui-nav-item a {
			color: #666;
			font-size: 15px;
		}

		.nav-menu .layui-nav-item a:hover {
			color: #5FB878;
		}

		.nav-menu .layui-this a {
			color: #5FB878 !important;
		}

		.nav-menu .layui-nav-bar {
			background-color: #5FB878;
		}

		/* 文章卡片样式 */
		.article-card {
			margin-bottom: 20px;
			border-radius: 4px;
			overflow: hidden;
			box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
			transition: all .3s ease;
			background: #fff;
		}

		.article-card:hover {
			box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
			transform: translateY(-3px);
		}

		.article-header {
			padding: 15px 20px 0;
		}

		.article-title {
			font-size: 20px;
			font-weight: 600;
			color: #333;
			margin-bottom: 10px;
			line-height: 1.4;
		}

		.article-title a {
			color: #333;
			transition: color .3s;
		}

		.article-title a:hover {
			color: #5FB878;
			text-decoration: none;
		}

		.article-meta {
			font-size: 13px;
			color: #999;
			margin-bottom: 10px;
			line-height: 1.6;
		}

		.article-meta span {
			margin-right: 15px;
		}

		.article-meta a {
			color: #666;
			transition: color .3s;
		}

		.article-meta a:hover {
			color: #5FB878;
		}

		.article-content {
			padding: 0 20px 15px;
			color: #666;
			line-height: 1.8;
		}

		.article-footer {
			padding: 10px 20px;
			background-color: #f9f9f9;
			border-top: 1px solid #f0f0f0;
		}

		.read-more {
			color: #5FB878;
			font-size: 14px;
		}

		.read-more:hover {
			text-decoration: underline;
		}

		/* 分页样式 */
		.custom-pagination a,
		.custom-pagination span {
			display: inline-block;
			min-width: 26px;
			height: 26px;
			line-height: 26px;
			text-align: center;
			margin: 0 3px;
			padding: 0 10px;
			border-radius: 50%;
			color: #666;
			font-size: 14px;
			transition: all 0.3s;
		}

		.custom-pagination a:hover {
			background-color: #f0f0f0;
			color: #5FB878;
			text-decoration: none;
		}

		.custom-pagination .layui-laypage-curr {
			background-color: #5FB878;
		}

		.custom-pagination .layui-laypage-curr em {
			color: #fff;
		}

		.custom-pagination .layui-laypage-prev,
		.custom-pagination .layui-laypage-next {
			background-color: #f8f8f8;
		}

		.footer {
			text-align: center;
			padding: 30px 0;
			color: #999;
			font-size: 14px;
			background-color: #fff;
			margin-top: 20px;
			border-top: 1px solid #eee;
		}

		@media screen and (max-width: 768px) {
			.blog-side {
				margin-left: 0;
				margin-top: 15px;
			}

			.nav-menu .layui-nav-item {
				margin: 0 5px;
			}

			.top-banner {
				height: 250px;
			}

			.logo {
				font-size: 32px;
			}
		}