@charset "utf-8";
/* ==========================================================
   floor-content.css
   佑鋼工業 · 工業地板頁面「優化排版」專用樣式
   ----------------------------------------------------------
   僅作用於複製出來的內容區塊 .gejian02.floor-opt，
   沿用官網 gejian02 橘色系設計語彙（#d35400 / #e67e22 / #fba073 / #fff9f6），
   不影響網站其他頁元素。內容文字未做任何修改，僅重排版面。
   ========================================================== */

/* ---- 版心與留白 ---- */
.gejian02.floor-opt {
  background: #fff9f6;
  padding: 28px 30px 40px;
  color: #333;
  line-height: 1.8;
}

/* ---- 麵包屑 ---- */
.gejian02.floor-opt .position {
  font-size: .92em;
  margin: 0 0 22px;
  padding: 11px 16px;
  background: #fff1e6;
  border-left: 4px solid #fba073;
  border-radius: 4px;
  color: #6a4a38;
}
.gejian02.floor-opt .position a { color: #2b7dbc; text-decoration: none; }
.gejian02.floor-opt .position a:hover { text-decoration: underline; }

/* ---- 主標題 Hero ---- */
.gejian02.floor-opt .page-head { text-align: center; margin: 6px 0 8px; }
.gejian02.floor-opt .page-head h1 {
  display: inline-block;
  font-size: 2.15em;
  color: #d35400;
  margin: 0 auto;
  padding: 0 24px 14px;
  border-bottom: 3px solid #fba073;
  letter-spacing: 1px;
}
.gejian02.floor-opt .lead {
  max-width: 900px;
  margin: 22px auto 6px;
  padding: 18px 24px;
  font-size: 16px !important;
  line-height: 1.95;
  color: #4a3527;
  background: #fff;
  border: 1px solid #fdd2b3;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(251,160,115,.10);
  text-align: justify;
}
.gejian02.floor-opt .lead strong { color: #e67e22; }

/* ---- 目錄 / 快速導覽 ---- */
.gejian02.floor-opt .newsn {
  padding: 6px 0 2px;
  margin: 18px 0 8px;
}
.gejian02.floor-opt .newsn ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.gejian02.floor-opt .newsn li { background: none; border: none; padding: 0; height: auto; }
.gejian02.floor-opt .newsn h3 { margin: 0; font-size: 15px; }
.gejian02.floor-opt .newsn a {
  display: block;
  height: auto;
  margin: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  padding: 14px 16px 14px 40px;
  position: relative;
  background: #fff;
  border: 1px solid #fdd2b3;
  border-left: 4px solid #e67e22;
  border-radius: 8px;
  color: #b3541e !important;
  font-weight: 700;
  transition: all .2s ease;
}
.gejian02.floor-opt .newsn a::before {
  content: attr(data-no);
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px; line-height: 20px;
  text-align: center;
  background: #e67e22; color: #fff;
  border-radius: 50%;
  font-size: 12px;
}
.gejian02.floor-opt .newsn a:hover {
  background: #e67e22; color: #fff !important;
  box-shadow: 0 4px 12px rgba(230,126,34,.35);
  transform: translateY(-2px);
}
.gejian02.floor-opt .newsn a:hover::before { background: #fff; color: #e67e22; }

/* ---- 區塊標題 h2 ---- */
.gejian02.floor-opt h2 {
  font-size: 1.55em;
  color: #d35400;
  margin: 40px 0 18px;
  padding: 6px 0 6px 14px;
  border-left: 5px solid #e67e22;
  border-bottom: 1px solid #fdd2b3;
  background: linear-gradient(90deg, #fff3ea, #fff9f6);
  scroll-margin-top: 20px;
}

/* ---- 內文段落 ---- */
.gejian02.floor-opt > p,
.gejian02.floor-opt p {
  margin: 16px 4px;
  padding: 0;
  font-size: 16px;
  line-height: 1.95;
  color: #40301f;
}
.gejian02.floor-opt mark {
  background: #ffe4cc;
  color: #c0521a;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 700;
}
.gejian02.floor-opt p strong { color: #e67e22; }

/* ---- FAQ 連結清單 ---- */
.gejian02.floor-opt .faq-links {
  list-style: none;
  margin: 6px 0 10px;
  padding: 0;
}
.gejian02.floor-opt .faq-links li {
  margin: 0 0 8px;
  padding: 10px 14px 10px 30px;
  position: relative;
  background: #fff;
  border: 1px dashed #f4b98a;
  border-radius: 6px;
  height: auto;
  line-height: 1.5;
}
.gejian02.floor-opt .faq-links li::before {
  content: "Q";
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%);
  color: #e67e22; font-weight: 800;
}
.gejian02.floor-opt .faq-links a { color: #b3541e; text-decoration: none; font-size: 15px; }
.gejian02.floor-opt .faq-links a:hover { color: #d35400; text-decoration: underline; }

/* ---- 輪播實績外框 ---- */
.gejian02.floor-opt .gongydb { margin: 10px 0 6px; }
.gejian02.floor-opt .gongydb h2 { margin-top: 24px; }
.gejian02.floor-opt .carousel { margin: 0 auto; background: #f3e6dc; }

/* ---- 比較表格（材質） ---- */
.gejian02.floor-opt .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 22px 0;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.gejian02.floor-opt table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  background: #fff;
  font-size: 14px;
}
.gejian02.floor-opt table[border="1"] { border: none; }
.gejian02.floor-opt th {
  background: #e67e22;
  color: #fff;
  padding: 13px 12px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #d76f16;
  font-weight: 700;
}
.gejian02.floor-opt thead th:first-child { background: #d35400; }
.gejian02.floor-opt td {
  padding: 12px 14px;
  border: 1px solid #f4d3b6;
  vertical-align: top;
  line-height: 1.7;
  color: #40301f;
}
.gejian02.floor-opt tbody tr:nth-child(even) { background: #fff7f0; }
.gejian02.floor-opt tbody tr:hover { background: #fdeaDc; }
.gejian02.floor-opt tbody tr td:first-child {
  font-weight: 700;
  background: #fff1e6;
  color: #b3541e;
  white-space: nowrap;
}
.gejian02.floor-opt tbody tr[style*="CC3300"] td,
.gejian02.floor-opt tbody tr[style*="cc3300"] td { background: #fff0ec; color: #CC3300 !important; }
.gejian02.floor-opt td b, .gejian02.floor-opt td strong { color: #c0521a; }
.gejian02.floor-opt td a { color: #2b7dbc; text-decoration: none; }
.gejian02.floor-opt td a:hover { text-decoration: underline; }

/* ---- 施工案例圖庫 ---- */
.gejian02.floor-opt .case-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 22px 0 8px;
}
.gejian02.floor-opt .case-item {
  margin: 0;
  background: #fff;
  border: 1px solid #fdd2b3;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gejian02.floor-opt .case-item img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 200px;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
}
.gejian02.floor-opt .case-item figcaption {
  text-align: center;
  padding: 10px 8px;
  font-size: 14px;
  color: #fff;
  background: #e67e22;
  font-weight: 600;
}
.gejian02.floor-opt .case-item:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(230,126,34,.28); }

/* ---- 展開收合（主要類型 FAQ） ---- */
.gejian02.floor-opt details {
  margin: 26px 0;
  border: 1px solid #fdd2b3;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.gejian02.floor-opt summary {
  cursor: pointer;
  padding: 14px 18px;
  background: linear-gradient(90deg, #fff1e6, #fff7f0);
  list-style: none;
}
.gejian02.floor-opt summary::-webkit-details-marker { display: none; }
.gejian02.floor-opt summary h3 {
  display: inline !important;
  margin: 0;
  font-size: 1.25em;
  color: #d35400;
  position: relative;
  padding-left: 26px;
}
.gejian02.floor-opt summary h3::before {
  content: "＋";
  position: absolute; left: 0; top: 0;
  color: #e67e22; font-weight: 800;
}
.gejian02.floor-opt details[open] summary h3::before { content: "－"; }
.gejian02.floor-opt details > p { margin: 0; padding: 8px 14px 16px; }

/* ---- 聯絡資訊 ---- */
.gejian02.floor-opt address {
  font-style: normal;
  margin: 40px 0 20px;
  padding: 24px 28px;
  background: #fff7f2;
  border-left: 5px solid #e67e22;
  border-radius: 10px;
  box-shadow: 0 2px 14px rgba(251,160,115,.14);
}
.gejian02.floor-opt address p {
  margin: 10px 0;
  padding: 0;
  font-size: 16px;
  color: #5a3a2c;
}
.gejian02.floor-opt address p:first-child {
  font-size: 1.15em;
  font-weight: 700;
  color: #d35400;
}

/* ---- 地圖 RWD ---- */
.gejian02.floor-opt .map-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  margin: 18px 0 8px;
}
.gejian02.floor-opt .map-wrap iframe {
  position: absolute; inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* ---- 返回頂部 ---- */
.gejian02.floor-opt .back-top {
  display: inline-block;
  margin: 22px 0 4px;
  padding: 9px 22px;
  background: #e67e22;
  color: #fff !important;
  border-radius: 30px;
  text-decoration: none;
  font-size: 14px;
  transition: background .2s;
}
.gejian02.floor-opt .back-top:hover { background: #d35400; }

/* ---- 副標題（頁首主標下方一句話） ---- */
.gejian02.floor-opt .subtitle {
  text-align: center;
  margin: 6px auto 2px;
  font-size: 1.2em;
  font-weight: 700;
  color: #e67e22;
  letter-spacing: .5px;
}

/* ---- 主視覺圖 ---- */
.gejian02.floor-opt .hero-img {
  text-align: center;
  margin: 20px 0 6px;
}
.gejian02.floor-opt .hero-img img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(251,160,115,.25);
}

/* ---- 表格內小標題（如步驟名稱） ---- */
.gejian02.floor-opt td h3 {
  display: inline;
  margin: 0;
  font-size: 1em;
  color: #b3541e;
}

/* ---- 行動呼籲 CTA 橫幅 ---- */
.gejian02.floor-opt .cta {
  text-align: center;
  margin: 28px auto;
  padding: 16px 20px;
  font-size: 1.1em !important;
  font-weight: 700;
  color: #d35400 !important;
  background: #fff1e6;
  border: 1px dashed #e67e22;
  border-radius: 10px;
}

/* ---- 響應式 ---- */
@media (max-width: 900px) {
  .gejian02.floor-opt .newsn ul { grid-template-columns: 1fr; }
  .gejian02.floor-opt .case-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .gejian02.floor-opt { padding: 20px 16px 32px; }
  .gejian02.floor-opt .page-head h1 { font-size: 1.6em; }
  .gejian02.floor-opt .case-gallery { grid-template-columns: 1fr; }
  .gejian02.floor-opt table { font-size: 13px; }
}