@charset "UTF-8";
/* lookmkt.com 靜態版樣式
   色碼與級數全部取自原站 devtools 實測值，不是目測估的。 */

:root {
  --red: #c7151d;        /* 主紅：active 選單、區塊大標 */
  --red-dark: #be3a43;   /* 深紅：卡片標題、外框線 */
  --rose: #b45e69;       /* 玫瑰：分隔線、服務副標 */
  --ink: #34343c;        /* 主要文字 */
  --gray: #787677;       /* 選單文字 */
  --wine: #875d6d;       /* 酒款規格 */
  --brown: #930;         /* 廣告金句 */
  --bg-form: #f7f8fa;
  --bg-story: #f8f8f8;
  --footer: #383838;
  --line: #ddd;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-top: 72px;            /* 讓開固定頁首 */
  font-family: "Noto Sans TC", Arial, sans-serif;
  font-size: 14px;
  color: #333;
  background: #fff;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; border: 0; }
a { text-decoration: none; }

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 15px;
  display: flow-root;   /* 擋 margin 穿透，讓區塊高度跟原站一致 */
}

/* ---------------------------------------------------------- 頁首 */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 72px;
  background: #fff;
  border-bottom: 2px solid var(--red-dark);
  z-index: 1041;
}

.header-inner {
  max-width: 1400px;
  height: 70px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand img { display: block; width: 202px; height: auto; }

.site-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav li { line-height: 70px; }

.site-nav a {
  display: block;
  padding: 0 15px;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 1px;
  color: var(--gray);
  transition: color .2s;
}

.site-nav a:hover { color: var(--red); }

.site-nav li.is-active { border-bottom: 2px solid var(--red-dark); }
.site-nav li.is-active a { color: var(--red); }

.nav-toggle {
  display: none;
  width: 40px; height: 34px;
  padding: 6px 5px;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  margin: 4px 0;
  background: var(--gray);
}

/* ---------------------------------------------------------- 首頁大圖輪播 */

.hero {
  position: relative;
  height: 700px;
  overflow: hidden;
  background: #fff;
}

.hero-track {
  display: flex;
  height: 100%;
  transition: transform .6s ease;
}

.hero-slide {
  flex: 0 0 var(--sw, 1400px);
  height: 100%;
}

.hero-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 70px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  opacity: .85;
  text-shadow: 0 0 6px rgba(0, 0, 0, .35);
}
.hero-arrow:hover { opacity: 1; }
.hero-prev { left: calc(50% - var(--sw, 1400px) / 2); }
.hero-next { right: calc(50% - var(--sw, 1400px) / 2); }

/* ---------------------------------------------------------- 區塊與排版 */

.sec { position: relative; }
.sec-intro    { padding: 80px 0 40px; }
.sec-title    { padding: 80px 0 60px; }
.sec-feature  { padding: 0 0 60px; }
.sec-cards    { padding: 0 0 60px; }
.sec-story    { padding: 80px 0 120px; background: var(--bg-story); }
.sec-services { padding: 80px 0 60px; }
.sec-wine     { padding: 0 0 60px; }
.sec-roe-top  { padding: 80px 0 60px; }
.sec-roe-body { padding: 0 0 80px; }
.sec-form     { padding: 80px 0; background: var(--bg-form); }

.row-2, .row-3, .row-story {
  display: flex;
  margin: 0 -15px;
  flex-wrap: wrap;
}
.row-2 > .col     { width: 50%; padding: 0 15px; }
.row-3 > .col     { width: 33.3333%; padding: 0 15px; }
/* 服務項目頁的六宮格是兩列，原站每張卡下面留 20px */
.sec-cards .row-3 > .col { margin-bottom: 20px; }
.row-story > .col:first-child { width: 66.6667%; padding: 0 15px; }
.row-story > .col:last-child  { width: 33.3333%; padding: 0 15px; }

/* ---------------------------------------------------------- 標題與內文 */

/* 字距（letter-spacing）全部照原站實測，級數不同字距也不同，別統一 */
.h-page {
  margin: 0 0 15px;
  font-size: 37px;
  font-weight: 600;
  line-height: 51.8px;
  letter-spacing: 5px;
  color: var(--ink);
  text-align: center;
}

/* 原站的分隔線是一個 21px 高的區塊，線在中間，不是單純 1px 的 hr */
.divider {
  position: relative;
  width: 60px;
  height: 21px;
  margin: 0 auto;
}
.divider::before {
  content: "";
  position: absolute;
  top: 10px; left: 0; right: 0;
  height: 1px;
  background: var(--rose);
}
.divider-left { margin-left: 0; }

.lead {
  margin: 0 0 15px;
  font-size: 19px;
  font-weight: 300;
  line-height: 30.4px;
  letter-spacing: 1px;
  color: var(--ink);
  text-align: center;
}

.h-card {
  margin: 10px 0 15px;
  font-size: 23px;
  font-weight: 600;
  line-height: 32.2px;
  letter-spacing: 1.2px;
  color: var(--red-dark);
  text-align: center;
}
.h-left { text-align: left; }

.p-card {
  margin: 0 0 15px;
  font-size: 17px;
  font-weight: 300;
  line-height: 27.2px;
  letter-spacing: 1px;
  color: var(--ink);
  text-align: center;
}
.p-justify { text-align: justify; }

.p-body {
  margin: 0 0 15px;
  font-size: 19px;
  font-weight: 300;
  line-height: 30.4px;
  letter-spacing: 1px;
  color: #000;
}

.feat-icon,
.svc-icon { display: block; margin: 0 auto; }
.feat-icon { width: 128px; height: 128px; }
.svc-icon  { width: 150px; height: 150px; }

.btn-outline {
  display: inline-block;
  padding: 5px 25px;
  font-size: 16px;
  color: var(--red);
  border: 1px solid var(--red-dark);
  transition: background .2s, color .2s;
}
.btn-outline:hover { background: var(--red-dark); color: #fff; }
.svc-btn-wrap { margin: 15px 0 0; text-align: center; }

/* ---------------------------------------------------------- 品牌故事 */

.h-story {
  margin: 0 0 15px;
  font-size: 27px;
  font-weight: 600;
  line-height: 37.8px;
  letter-spacing: 4px;
  color: var(--red);
}

.sec-story .p-body { line-height: 28.5px; }

.slogan { color: var(--brown); }

/* overflow 要下在「不會動」的外層；下在會被 transform 移動的 track 上，
   取景窗會跟著內容一起跑，投影片就滑出欄位蓋到旁邊的文字 */
.vid-carousel { position: relative; overflow: hidden; }
.vid-track { display: flex; transition: transform .5s ease; }
.vid-slide { flex: 0 0 100%; }
.vid-slide iframe {
  display: block;
  width: 100%;
  aspect-ratio: 425 / 318;   /* 原站實測值 */
  border: 0;
}
.vid-cap {
  margin: 0 0 15px;
  font-size: 15px;
  font-weight: 300;
  line-height: 24px;
  color: var(--ink);
}

.vid-dots, .svc-dots {
  margin: 30px 0 0;
  height: 20px;
  text-align: center;
}
.vid-dot, .svc-dot {
  width: 10px; height: 10px;
  margin: 0 4px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--red);
  border-radius: 50%;
  cursor: pointer;
}
.vid-dot.is-on, .svc-dot.is-on { background: var(--red); }

/* ---------------------------------------------------------- 服務內容輪播 */

.svc-carousel { margin-top: 60px; overflow: hidden; }
.svc-track { display: flex; transition: transform .5s ease; }
.svc-slide { flex: 0 0 100%; }
/* 原站三張投影片一律 500 高（輪播固定高度），文字欄上緣多 40px */
.svc-slide .row-2 { min-height: 500px; }
.row-2 > .col.svc-text { padding-top: 40px; }

.h-svc {
  margin: 0 0 15px;
  font-size: 33px;
  font-weight: 600;
  line-height: 33px;
  letter-spacing: 2px;
  color: var(--red);
}
.svc-sub {
  margin: 0 0 15px;
  font-size: 23px;
  font-weight: 300;
  line-height: 23px;
  letter-spacing: 1px;
  color: var(--rose);
}
.svc-slide .p-body { line-height: 30.4px; }
/* 原站圖片欄左邊多 50px 內距，圖才會是 635 寬 */
.row-2 > .col.svc-img { padding-left: 50px; }
.svc-img img { display: block; width: 100%; }

/* ---------------------------------------------------------- 酒類清單 */

/* 原站的酒款列從容器左緣往右退 20%，圖 15%、文字 45%（都算在 1400 上，
   所以縮排要用 margin 不能用 padding——padding 會把百分比的基準縮小） */
.wine-row {
  display: flex;
  margin: 0 -15px;
  padding: 40px 0;      /* 原站外層欄的上下內距 */
  align-items: flex-start;
}
.wine-pic  { width: 15%; margin-left: 20%; padding: 0 15px; }
.wine-info { width: 45%; padding: 0 15px; }
.wine-pic img { display: block; margin: 0 auto; }

.wine-spec {
  margin: 0 0 15px;
  font-size: 17px;
  font-weight: 500;
  line-height: 27.2px;
  letter-spacing: 1px;
  color: var(--wine);
}
.wine-desc {
  margin: 0 0 15px;
  font-size: 18px;
  font-weight: 300;
  line-height: 28.8px;
  letter-spacing: 1px;
  color: #000;
}
.wine-price {
  margin: 0 0 15px;
  font-size: 19px;
  font-weight: 300;
  line-height: 30.4px;
  letter-spacing: 1px;
  color: var(--ink);
}

.alcohol-warning {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 20px 100px;
  background: var(--footer);
  z-index: 900;
}
.alcohol-warning img { display: block; width: 100%; }

/* 有警語列的頁面，頁尾要墊高才不會被蓋住 */
body.has-warning .site-footer { padding-bottom: 97px; }

/* ---------------------------------------------------------- 烏魚子介紹 */

.h-bar {
  margin: 0 0 15px;
  padding-left: 10px;
  font-size: 29px;
  font-weight: 600;
  line-height: 29px;
  letter-spacing: 5px;
  color: var(--ink);
  border-left: 5px solid var(--red);
}

.sec-roe-top .p-body,
.sec-roe-body .p-body,
.sec-roe-body li { line-height: 32.3px; }

/* 烹調法：原站是編號清單，方法名用 #c7151d 粗體 */
.roe-steps {
  margin: 0 0 15px;
  padding-left: 22px;
  font-size: 19px;
  font-weight: 300;
  letter-spacing: 1px;
  color: #000;
  text-align: justify;
}
.roe-steps li { margin-bottom: 5px; }
.method { color: var(--red); font-weight: 700; }

.roe-main img { display: block; width: 100%; }

/* 縮圖列：一次顯示三張，用兩側箭頭翻頁（原站同樣做法） */
.roe-thumbs {
  position: relative;
  overflow: hidden;
  margin-top: 10px;
}
.roe-thumb-track {
  display: flex;
  gap: 10px;
  transition: transform .3s ease;
}
.roe-thumb {
  flex: 0 0 calc((100% - 20px) / 3);
  padding: 0;
  background: #ececec;
  border: 1px solid var(--line);
  cursor: pointer;
  line-height: 0;
}
.roe-thumb.is-on { border-color: var(--red); }
.roe-thumb img { display: block; width: 100%; height: auto; }

.roe-thumb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 44px;
  background: rgba(0, 0, 0, .35);
  border: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.roe-thumb-arrow:hover { background: rgba(0, 0, 0, .55); }
.roe-thumb-prev { left: 0; }
.roe-thumb-next { right: 0; }

.roe-block { margin-bottom: 40px; }
.roe-block:last-child { margin-bottom: 0; }
.tips { color: #f00; font-weight: 700; }

/* ---------------------------------------------------------- 聯絡我們 */

.sec-form .h-left {
  margin: 0 0 8px;
  font-size: 25px;
  font-weight: 600;
  line-height: 35px;
  letter-spacing: 1.2px;
  color: var(--ink);
  text-align: left;
}
.lead-left {
  margin: 0;
  font-size: 19px;
  font-weight: 300;
  line-height: 30.4px;
  letter-spacing: 1px;
  color: var(--ink);
}

.contact-form { margin-top: 20px; }
.f-row { margin-bottom: 12px; }
.f-2 { display: flex; gap: 16px; }
/* 用 flex 均分，不要用 width:50%——輸入框自己的 width:100% 權重較高會把它撐開 */
.f-2 > * { flex: 1 1 0; min-width: 0; }

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 8px;
  font-family: inherit;
  font-size: 14px;
  color: #333;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
}
.contact-form input { height: 39px; }
.contact-form textarea { resize: vertical; }

.btn-submit {
  height: 39px;
  font-family: inherit;
  font-size: 14px;
  color: #333;
  background: #efefef;
  border: 1px solid var(--line);
  cursor: pointer;
}
.btn-submit:hover { background: #e4e4e4; }

.map { display: block; width: 100%; height: 450px; border: 0; }

/* ---------------------------------------------------------- 頁尾 */

.site-footer {
  padding: 15px 0 0;
  min-height: 78px;
  background: var(--footer);
}
.site-footer p {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: 1px;
  color: #fff;
  text-align: center;
}

/* ---------------------------------------------------------- 平板 */

@media (max-width: 1199px) {
  .h-page { font-size: 31px; }
  .h-svc  { font-size: 27px; }
  .wine-pic  { width: 22%; margin-left: 5%; }
  .wine-info { width: 63%; }
  .alcohol-warning { padding: 14px 30px; }
}

/* ---------------------------------------------------------- 手機 */

@media (max-width: 767px) {
  body { padding-top: 62px; }

  .site-header { height: 62px; }
  .header-inner { height: 60px; flex-wrap: wrap; }
  .brand img { width: 160px; }
  .nav-toggle { display: block; }

  .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    background: #fff;
    border-top: 1px solid var(--line);
  }
  .site-nav.is-open { display: flex; }
  .site-nav li { line-height: 48px; border-bottom: 1px solid #f0f0f0; }
  .site-nav li.is-active { border-bottom-color: var(--red-dark); }
  .site-nav a { padding: 0 5px; }

  .hero-arrow { width: 34px; font-size: 28px; }
  .hero-prev { left: 0; }
  .hero-next { right: 0; }

  .sec-intro    { padding: 40px 0 20px; }
  .sec-title    { padding: 40px 0 30px; }
  .sec-feature,
  .sec-cards,
  .sec-wine     { padding: 0 0 30px; }
  .sec-story    { padding: 40px 0 50px; }
  .sec-services { padding: 40px 0 30px; }
  .sec-roe-top  { padding: 40px 0 30px; }
  .sec-roe-body { padding: 0 0 40px; }
  .sec-form     { padding: 40px 0; }

  .row-2 > .col,
  .row-3 > .col,
  .row-story > .col:first-child,
  .row-story > .col:last-child { width: 100%; }

  .row-3 > .col { margin-bottom: 30px; }
  .row-3 > .col:last-child { margin-bottom: 0; }
  .row-story > .col:first-child { margin-bottom: 30px; }
  .row-2 > .col:first-child { margin-bottom: 30px; }

  .h-page { font-size: 26px; }
  .lead   { font-size: 17px; }
  .h-card { font-size: 20px; }
  .h-story, .h-svc { font-size: 22px; }
  .svc-sub { font-size: 18px; }
  .h-bar { font-size: 22px; }
  .p-body { font-size: 17px; }

  .svc-carousel { margin-top: 25px; }
  .svc-slide .col:first-child { margin-bottom: 20px; }
  .row-2 > .col.svc-img { padding-left: 15px; }
  .row-2 > .col.svc-text { padding-top: 0; }
  .svc-slide .row-2 { min-height: 0; }

  .wine-row { display: block; padding: 20px 0; }
  .wine-pic, .wine-info { width: 100%; margin-left: 0; }
  .wine-pic { margin-bottom: 20px; }
  .wine-pic img { max-width: 140px; }

  .alcohol-warning { padding: 10px 15px; }
  body.has-warning .site-footer { padding-bottom: 60px; }

  .f-2 { display: block; }
  .f-2 > * { width: 100%; min-width: 0; }
  .f-2 > *:first-child { margin-bottom: 12px; }
  .map { height: 320px; }
}

/* ── 聯絡表單：蜜罐與狀態訊息（2026-08-10 接 mailman 時加）── */
.hp-wrap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-msg{margin:12px 0 0;font-size:15px;line-height:1.6;min-height:1.6em}
.form-msg.is-ok{color:#1a7f3c}
.form-msg.is-err{color:#c0392b}
.contact-form button[disabled]{opacity:.6;cursor:not-allowed}

/* ── 驗證碼（前端算式，2026-08-10 Dennis 選 A）── */
.captcha-box{display:flex;align-items:stretch;gap:8px}
.captcha-q{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  min-width:96px;padding:0 12px;background:#f1f1f1;border:1px solid #ddd;border-radius:4px;
  font-size:17px;font-weight:600;letter-spacing:1px;color:#333;user-select:none;white-space:nowrap}
.captcha-box input{flex:1 1 auto;min-width:0}