<style>  
    /* 全局样式 */  
    body {  
        margin: 0;  
        padding: 0;  
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }  
  
    /* 头部样式 */  
    header {  
        text-align: center;  
        padding: 20px;  
    }  
  
    header img {  
        width: 300px;  
        height: auto;  
    }

/* 首页菜单样式 */

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 700px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 700px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* 首页菜单样式 */	

	/* 链接样式 */
	.menu_1 a {
		text-decoration: none;
		font-size: 19px;
		color: black;
		position: relative;
		text-decoration: none; /* 移除默认的下划线 */ 
	}
	.menu_1 a:hover {
		color: #00c800;
	}
	
	.menu_1 a::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -8px; /* 下划线与文字的距离 */
        width: 5px; /* 下划线的宽度 */
        height: 5px; /* 下划线初始高度 */
        background-color: orange; /* 下划线颜色 */
        border-radius: 50%; /* 下划线圆角 */
        transform: translateX(-50%) scale(0); /* 初始缩放为 0 */
        transition: transform 0.3s ease, width 0.6s ease;
    }

    .menu_1 a:hover::after {
        width: calc(100% - 10px); /* 展开后的宽度，减去两边的圆角 */
        transform: translateX(-50%) scale(1); /* 完全展开 */
    }
		
	.content {
		margin: 0 auto;
	}
		
	.content-image {
		float: right; /* 让图片向右浮动 */
		margin-left: 10px; /* 图片与文字的左侧间隔 */
		margin-bottom: 0px; /* 图片与下面段落的间隔 */
		max-width: 100%; /* 确保图片不会超出父容器 */
		width: auto;
	}
		
	.content::after {
		content: "";
		display: table;
		clear: both;
	}
	
	.link_1 a {
		color: blue;
	}
	
	.link_1 a:hover {
		color: #388C46;
		text-decoration: none;
	}
	
	/* 设置段落文字首行缩进 */
	p {
		text-indent: 2em; /* 通常情况下，2em 大约等于两个中文字符的宽度 */
	}

  
    /* 正文样式 */  
    main {  
        background-color: #ffffff; /* 灰色背景 */  
        border-radius: 5px; /* 圆角 */  
        padding: 15px 110px 10px 110px;  
        max-width: 1100px; /* 最大宽度 */  
        margin: 0 auto; /* 水平居中 */  
        box-sizing: border-box; /* 包含padding和border在内 */
		color: #24292e;
		font-size: 16px;
		/* font-weight: bold; */ /* 设置文本为粗体 */
		line-height: 1.6;
		word-wrap: break-word;
    }

	@media screen and (max-width: 700px) {  
		main {  
			padding: 10px 6px 10px 6px;
		}  
	}
	
	.imagestyle1 img {
		width: 100%;
	    	height: 100%;
	    	object-fit: contain;
		border-radius: 5px;
	}
  
    /* 页脚样式 */  
    footer {
		color: #9aa6c2;
        bottom: 0;  
        width: 100%;  
        text-align: center;  
        padding-top: 10px;
    }  
  
    /* 使 main 部分始终在 footer 上方 */  
    body {
		background-color: #f6f8f9;
        display: flex;  
        flex-direction: column;  
        min-height: 100vh;  
        margin-bottom: -50px; /* footer 的高度 */  
        padding-bottom: 50px; /* footer 的高度 */  
        box-sizing: border-box; /* 包含 padding */  
    }  
  
    /* 其他元素可能需要一些额外的样式来防止与页脚重叠 */  
    main::after {  
        content: "";  
        display: block;  
        height: 50px; /* footer 的高度 */  
    }
	

</style> 