body { line-height: 1.7; } iframe { width: 100% } #about-nav { display: flex; position: fixed; flex-direction: row; background-color: #FFFFFF; justify-content: left; width: 100%; padding: 20px 20px 0px 20px; border-bottom: solid 1px #F4F4F4; } .about-nav-item { position: relative; display: flex; flex-direction: column; padding-bottom: 5px; } .about-nav-header { font-family: Noto Sans SC, sans-serif; font-size: 16px; font-weight: 100; white-space: nowrap; /* 不允许自动换行 */ margin-right: 0; /* 原本 20px 会把宽度撑大，直接归零 */ color: #A9A9A9; } @media only screen and (max-width: 384px){ .about-nav-header{ font-size: 14px; /* 原来是 16px → 14px */ } } .selected-nav-header { font-weight: 800 !important; color: black !important; } @media only screen and (max-width: 384px) { .selected-nav-item { height: 5px; background-color: #FF8E00; bottom: -5%; display: flex; transform: translate(-50%, 0%); position: absolute; border-radius: 5px; } #en-selected-about-us { width: 60px; left: 26%; } #en-selected-buy-sell { width: 60px; left: 30%; } #en-selected-lease-transfer { width: 60px; left: 25%; } #en-selected-contact { width: 60px; left: 36%; } } .about_margin{ height:45px; } @media only screen and (min-width: 384px) { .selected-nav-item { height: 5px; background-color: #FF8E00; bottom: -5%; display: flex; transform: translate(-50%, 0%); position: absolute; border-radius: 5px; } } .about-content { margin-top: 30%; margin-bottom: 20%; margin-left: 20px; margin-right: 20px; overflow-y: scroll; height: 80%; } .bio-text { font-family: "Noto Sans SC", sans-serif; font-size: 14px; } .answer-text { font-family: "Noto Sans SC", sans-serif; font-size: 12px; } .hide { display: none !important; } .dropdown-text{ font-size: 14px; color:#FF8E00; font-weight: 800; } .question-container { display: flex; flex-direction: row; } #about-nav { display:flex; } .about-nav-item { flex:1; text-align:center; } /* 专门为 contact 页面调整上边距 */ #contact-us.about-content { margin-top: 19%; /* 从原来的 35% 减小到 25% */ } /* ========================================================== ① 让导航标签之间有固定间隙 ========================================================== */ #about-nav{ gap: 12px; /* 支持 gap 的现代浏览器 */ } .about-nav-item{ flex: 0 0 auto; /* 不再平均拉伸，按内容宽度排列 */ padding: 0px; /* 每边再留一点缓冲 */ } /* ========================================================== ② 英文页面把字号再缩 1px（中文保持原样） ========================================================== */ body.en .about-nav-header{ /* 你只需在英文页面加 class="en" */ font-size: 15px; /* 16 → 15 */ } @media only screen and (max-width: 384px){ body.en .about-nav-header{ font-size: 13px; /* 14 → 13 */ } } /* ===== Contact-Us 区域的排版统一 ===== */ #contact-us .bio-text{ font-size: 16px; /* 全部正文 16 号 */ font-weight: 400; /* 默认正文 400 */ line-height: 1.7; /* 维持原行高 */ } /* 加粗的小标题（含标签的文字） */ #contact-us .bio-text strong{ font-weight: 700; /* 小标题 700 */ } #about-nav .selected-nav-item{ position: absolute; left: 0 !important; /* 从字的最左开始 */ bottom: -4px; /* 距离文字 4px，可按需调 */ width: 100% !important; /* 跟随文字宽度 */ height: 4px; background: #FF8E00; border-radius: 4px; transform: none !important; /* 取消老的 translate(-50%,0) */ }