.container {
  max-width: 1200px !important; /* 你可以調整這個數值 */
  width: 100%;
  margin: 0 auto;
}
<style type="text/css">

body {
  --customer-color01: rgb(0, 44, 71);
  --customer-color02: rgb(186, 147, 88);
}
main {
  background: white;
}
.content {
  background: white;
}
.navbar {
  background-color: white;
}
.naviMain ul > li > a::before {
  display: none;
}
.naviMain ul > li > a:hover > span {
  transform: none;
  opacity: 1;
}
.index-banner-slider {
  background-color: #fbfbfb;
}
#search-btn,
.breadcrumb-item > a,
.middle-title,
.read-more,
aside .article-group > ul > li a {
  color: var(--customer-color01);
}
.title::before, .title::after {
  background-color: var(--customer-color02);
}
.news-list a {
  color: var(--customer-color01);
}
@media (min-width: 993px) {
  .navbar {
    position: sticky;
    top: 0;
    padding: 0 calc((100% - var(--max-width)) / 2);
    max-width: unset;
    width: 100%;
    --max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .navbar {
    --max-width: 1140px;
  }
}
@media (min-width: 1501px) {
  .navbar {
    --max-width: 1320px;
  }
}





/* ============================================================
   皮秒雷射頁面專屬 CSS － 直接內嵌於本頁 <style> 中，不放全站樣式表
   ============================================================ */
 
/* ===== H1-H4 字級（依參考版本比例調整，響應式 clamp；顏色維持原規劃；加 !important 避免被佈景主題覆蓋） ===== */
h1 {
  font-size: clamp(28px, 5vw, 34px) !important;
  line-height: 1.35 !important;
  font-weight: 700;
  color: #333333;
  margin: 0 0 16px 0;
}
h2 {
  font-size: clamp(22px, 3.2vw, 26px) !important;
  line-height: 1.4 !important;
  font-weight: 700;
  color: #333333;
  margin: 40px 0 16px 0;
}
h3 {
  font-size: 18px !important;
  line-height: 1.5 !important;
  font-weight: 700;
  color: #333333;
  margin: 24px 0 10px 0;
}
h4 {
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: 700;
  color: #333333;
  margin: 20px 0 8px 0;
}
 
/* ===== 內文文字（統一對齊清單項目的視覺大小，加 !important 避免被佈景主題覆蓋） ===== */
p {
  font-size: 18px !important;
  line-height: 1.9 !important;
  color: #333333;
}
ul li,
ol li {
  font-size: 18px !important;
  line-height: 1.9 !important;
  color: #333333;
}
blockquote p {
  font-size: 18px !important;
  line-height: 1.9 !important;
}
 
/* ===== 表格樣式 ===== */
table.table {
  border-collapse: collapse;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  overflow: hidden;
}
table.table thead td,
table.table thead th {
  background-color: #f5f2ec;
  color: #5a4632;
  font-weight: bold;
  font-size: 18px !important;
  padding: 14px 16px;
  border: 1px solid #e0dacb;
}
table.table tbody td {
  padding: 16px 18px;
  border: 1px solid #e2e8f0;
  font-size: 18px !important;
  line-height: 1.8 !important;
  color: #333333;
  vertical-align: top;
}
table.table tbody td li {
  font-size: 18px !important;
  line-height: 1.8 !important;
}
table.table tbody tr:nth-child(odd) {
  background-color: #f9fbfc;
}
table.table tbody tr:nth-child(even) {
  background-color: #ffffff;
}
table.table tbody tr:hover {
  background-color: #f5f0e6;
}
table.table tbody td:first-child {
  width: 18%;
  font-weight: bold;
  color: #5a4632;
  background-color: #faf8f3;
  white-space: nowrap;
}
table.table strong {
  color: #c0392b;
}
 
/* ===== 段落標題卡片（分隔線，全站統一大標題樣式） ===== */
.highlight-block {
  margin: 32px 0 40px 0;
}
 
.highlight-title {
  color: #8a6a56;
  margin: 0 0 14px 0;
}
 
.highlight-rule {
  border: none;
  border-top: 1px solid #e6dfd6;
  margin: 0 0 18px 0;
}
 
.highlight-desc {
  color: #666666;
  font-size: 18px !important;
  line-height: 1.9 !important;
  margin: 0 0 22px 0;
  text-align: justify;
}
 
/* ===== 雙欄條列式重點（bullet list grid） ===== */
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 32px;
  row-gap: 16px;
}
 
.highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
 
.highlight-item p {
  position: relative;
  margin: 0 0 0 17px;
  color: #555555;
  font-size: 18px !important;
  line-height: 1.8 !important;
  text-align: justify;
}
 
.highlight-item p::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 8px;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #b08968;
}
 
.highlight-item p strong {
  color: #333333;
  font-weight: 700;
}
 
@media (max-width: 640px) {
  .highlight-grid {
    grid-template-columns: 1fr;
  }
}
 
/* ===== FAQ 手風琴收合樣式 ===== */
.faq-list {
  max-width: 900px;
  margin: 0 auto;
}
 
.faq-item {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
 
.faq-item + .faq-item {
  margin-top: 12px;
}
 
.faq-question {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  font-weight: bold;
  color: #333333;
  position: relative;
  display: flex;
  align-items: center;
  transition: background-color 0.2s ease;
}
 
.faq-question::-webkit-details-marker {
  display: none;
}
 
.faq-question h3 {
  margin: 0;
  font-size: 19px !important;
  line-height: 1.4;
  font-weight: bold;
  color: #333333;
  padding-right: 32px;
  flex: 1;
}
 
.faq-question:hover {
  background-color: #faf5f0;
}
 
.faq-question::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: normal;
  color: rgb(231, 76, 60);
  transition: transform 0.25s ease;
}
 
.faq-item[open] .faq-question::after {
  content: "\2212"; /* minus sign */
}
 
.faq-item[open] .faq-question {
  border-bottom: 1px solid #f0e6dc;
}
 
.faq-answer {
  padding: 4px 20px 18px 20px;
}
 
.faq-answer p {
  color: rgb(120, 120, 120);
  font-size: 18px !important;
  line-height: 1.8 !important;
  margin: 8px 0 0 0;
  text-align: justify;
}
 
/* ===== 首圖 + 文字並排區塊（取代誤用 blockquote 的寫法） =====
   色塊本身撐滿導覽列寬度（跳脫文章欄限制），但裡面的文字／圖片
   內容收窄置中對齊 980px 內文閱讀寬度，避免文字被擠壓到圖片上 */
.hero-block-band {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  box-sizing: border-box;
  background-color: #faf8f6;
}
 
@media (max-width: 640px) {
  /* 手機版不再滿版跳脫，改為對齊 .pico-content-wrap 的內距，
     跟其他內文區塊有一致的左右呼吸空間 */
  .hero-block-band {
    position: static;
    left: auto;
    margin-left: 0;
    width: 100%;
  }
}
 
.hero-block-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 58px 22px;
  box-sizing: border-box;
}
 
.hero-block {
  display: flex;
  align-items: center;
  gap: 48px;
}
 
.hero-block-text {
  flex: 1 1 68%;
  min-width: 0;
}
 
.hero-block-text .highlight-title {
  margin-top: 0;
}
 
/* 固定字級（不用 vw）：hero-block-inner 最寬只到 980px，
   用 vw 響應式字級在大螢幕會算出超過欄寬的字級導致還是溢出，
   所以這裡改用固定值，確保在文字欄實際可用寬度內一定能單行顯示。
   white-space 加 !important，避免被外部佈景主題的 white-space
   規則蓋掉導致 nowrap 沒生效（先前就是這個原因還是斷行）。 */
@media (min-width: 769px) {
  .hero-block-text .highlight-title {
    font-size: 19px !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
  }
}
 
.hero-block-lead {
  font-size: 18px !important;
  line-height: 1.9 !important;
  color: #333333;
  margin: 0 0 16px 0;
  text-align: justify;
}
 
.hero-block-sub {
  font-size: 18px !important;
  color: #333333;
  margin: 0 0 10px 0;
}
 
.hero-block-tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
 
.hero-block-tags li {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #8a6a56;
  background-color: #ffffff;
  border: 1px solid #e6dfd6;
  border-radius: 999px;
  padding: 6px 16px;
}
 
.hero-block-image {
  flex: 1 1 32%;
  min-width: 0;
}
 
.hero-block-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}
 
@media (max-width: 768px) {
  .hero-block-inner {
    padding: 44px 24px;
  }
  .hero-block {
    flex-direction: column;
    gap: 24px;
  }
  .hero-block-text,
  .hero-block-image {
    flex: 1 1 100%;
  }
}
 
/* ===== 術前／術後注意事項色塊卡片（取代表格寫法） =====
   對齊 980px 內文閱讀寬度並置中，不跳脫文章欄 */
.care-block {
  max-width: 980px;
  margin: 0 auto;
  box-sizing: border-box;
}
 
.care-block-item {
  background-color: #faf8f6;
  border-radius: 12px;
  padding: 28px 32px;
  margin: 0 0 20px 0;
  box-sizing: border-box;
}
 
.care-block-item:last-child {
  margin-bottom: 0;
}
 
.care-block-title {
  color: #5a4632;
  margin: 0 0 16px 0;
}
 
.care-block-list {
  list-style: disc;
  margin: 0;
  padding-left: 20px;
}
 
.care-block-list li {
  margin-bottom: 10px;
}
 
.care-block-list li:last-child {
  margin-bottom: 0;
}
 
@media (max-width: 640px) {
  .care-block-item {
    padding: 20px;
  }
}
 
/* ===== 首圖文字進場動畫（純淡入） =====
   套用在 .hero-block-text（標題、說明文字、適合族群標籤整塊）
   而不是圖片，圖片本身不再有進場動畫。
*/
@keyframes heroFadeInUp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
 
.hero-block-text {
  animation: heroFadeInUp 0.8s ease-out both;
}
 
/* 尊重使用者「減少動態效果」的系統設定，避免造成不適 */
@media (prefers-reduced-motion: reduce) {
  .hero-block-text {
    animation: none;
  }
}
 
/* ===== 手機版內文呼吸空間 =====
   參考站台手機版內文左右都有明顯留白，這裡統一包一層 wrapper
   在手機寬度時加上左右內距，避免文字整個貼齊螢幕邊緣。
   hero-block-band 本身用 vw 單位跳脫容器撐滿螢幕，不受這層
   內距影響，不需要另外處理。 */
.pico-content-wrap {
  box-sizing: border-box;
}
@media (max-width: 640px) {
  .pico-content-wrap {
    padding: 0 24px;
  }
}
 
/* ===== 表格手機版橫向捲動（避免表格被螢幕寬度硬擠到跑版/截字） ===== */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll table.table {
  min-width: 640px;
}
@media (max-width: 640px) {
  .table-scroll {
    margin: 0 -24px;
    width: calc(100% + 48px);
    padding: 0 24px;
    box-sizing: border-box;
  }
}
</style>