@charset "UTF-8";
/* CSS Document */
* {
  box-sizing: border-box;
}

/* 主容器置中與寬度 */
body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
  font-family: "Microsoft JhengHei", sans-serif;
  background: #fff;
}

/* 若你有 container 類別，保持此設定 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

/* 底部間隔 */
.A {
  margin: 0 0 2% 0;
}

/* 文字內容寬度調整 */
.txt p {
  width: 70%;
  height: auto;
  margin-left: 16%;
}

/* ===== Header 修正版：桌機不跑版、手機好用 ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;              /* ⭐固定在視窗左右 */
  right: 0;
  width: 100%;
  background: #fff;
  padding: 12px 15px;   /* ⭐跟 body padding 對齊（不要 40px） */
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
  z-index: 9999;
}

/* Logo 不要太大，避免擠壓 nav */
.logo {
  margin: 0;
  font-size: 18px;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Nav：桌機一排，手機可滑 */
.header nav {
  display: flex;
  align-items: center;
  gap: 14px;            /* ⭐用 gap 取代 margin-left */
  margin-left: auto;    /* ⭐推到右邊 */
  overflow-x: auto;     /* ⭐手機可左右滑 */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
}

.header nav::-webkit-scrollbar {
  display: none;
}

.header a {
  margin-left: 0;       /* ⭐移除你原本的 margin-left:20px */
  text-decoration: none;
  color: #333;
  font-size: 14px;
  padding: 8px 10px;    /* ⭐增加可點擊範圍 */
  border-radius: 8px;
  flex: 0 0 auto;
}

.header a:hover {
  background: #f3f3f3;
}

/* ===== 重要：避免內容被 fixed header 壓住 ===== */
body {
  padding-top: 70px;    /* 依你 header 高度微調 64~90 */
}

/* 桌機可稍微放大字 */
@media (min-width: 1024px) {
  .logo { font-size: 20px; }
  .header a { font-size: 15px; }
}


/* Hero */
.hero {
  height: 390px;
  background-image: url("images/main.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero h2 {
  font-size: 36px;
}

.hero button {
  margin-top: 20px;
  padding: 12px 30px;
  background: #000;
  color: #fff;
  border: none;
  cursor: pointer;
}

/* =========================
   Hero 滿版修正（不改 HTML）
   ========================= */

/* Hero 強制滿版 */
.hero {
  width: 100vw;                     /* 直接吃整個視窗 */
  margin-left: calc(50% - 50vw);    /* 跳脫 body 置中限制 */
  margin-right: calc(50% - 50vw);
}

/* 如果 header / marquee 也要滿版，可一起用 */
.header,
.marquee {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* 跑馬燈 */
.marquee {
  overflow: hidden;
  background: #000;
  color: #fff;
  padding: 10px 0;
  transform: rotate(-1deg);
}

.marquee-content {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* Section */
.section {
  padding: 0.5% 0.5%;
}

.title-img {
  text-align: center;
  max-width: 100%;
}

/* ===== 標題圖片：桌機縮小、手機正常 ===== */
.title-img img {
  width: 100%;
  max-width: 420px;   /* ⭐桌機最佳尺寸（可調 380–460） */
  height: auto;
}


/* 工作經驗 */
.time {
  text-align: center;
}

.time img {
  display: inline-block;
  max-width: 600px;
  height: auto;
}

/* 技能 */
.skill {
  text-align: center;
}

.skill img {
  display: inline-block;
  max-width: 800px;
  height: auto;
}

/* 圖片並排且自適應，避免凸出 */
.image-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap; /* 讓多圖片可換行 */
  justify-content: center;
  padding: 0 10px;
  margin-bottom: 20px;
}

.thumb {
  flex: 1 1 calc(33.333% - 12px);
  max-width: calc(100% - 12px);
  height: auto;
  object-fit: cover;
  cursor: pointer;
  border-radius: 4px;
  transition: transform 0.3s;
}

.thumb:hover {
  transform: scale(1.05);
}

/* 縮圖顯示區 */
.gallery .thumb,
.image-row .thumb {
  width: 100%;
  height: 220px;        /* 👈 控制「只顯示一部分」 */
  object-fit: cover;   /* 👈 裁切而非壓縮 */
  object-position: top;/* 👈 從上方開始裁（活動頁最適合） */
  cursor: pointer;
}

@media (max-width: 768px) {
  .gallery .thumb,
  .image-row .thumb {
    height: 160px;
  }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  transition: opacity .35s ease;
}

.lightbox.show {
  display: flex;
  opacity: 1;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  transition: transform .3s;
  cursor: zoom-in;
  transform: scale(.9);
  transition: transform .35s ease, opacity .35s ease;
  cursor: grab;
}

.lightbox.show img {
  transform: scale(1);
  opacity: 1;
}

.lightbox img:active {
  cursor: grabbing;
}

/* 按鈕 */
.close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}

.nav {
  position: absolute;
  top: 50%;
  font-size: 50px;
  color: #fff;
  cursor: pointer;
  user-select: none;
}

.prev { left: 20px; }
.next { right: 20px; }

/* ===== Tabs 容器 ===== */
.tab-buttons {
  display: flex;
  gap: 12px;
  border-bottom: 2px solid #eee;
  overflow-x: auto;            /* 手機可左右滑 */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tab-buttons::-webkit-scrollbar {
  display: none;
}

/* ===== Tab 按鈕 ===== */
.tab-btn {
  flex-shrink: 0;              /* 不被壓扁 */
  padding: 12px 20px;
  border: none;
  background: none;
  font-size: 16px;
  white-space: nowrap;
  cursor: pointer;
}

.tab-btn.active {
  border-bottom: 3px solid #000;
  font-weight: bold;
}

/* ===== 分頁內容 ===== */
.tab-panel {
  display: none;
  padding: 24px 0;
}

.tab-panel.active {
  display: block;
}

/* 按鈕置中 */
.btn-center {
  display: flex;
  justify-content: center; /* 水平置中 */
}

/* 信箱按鈕大小 */
.mail-btn img {
  width: 500px;
  transition: transform .2s, opacity .2s;
}

.mail-btn:hover img {
  transform: scale(1.05);
  opacity: .9;
}

/* === 手機版調整 === */
@media (max-width: 768px) {

  /* body 滿版且置中 */
  body {
    max-width: 100%;
    padding: 0 15px;
    margin: 0 auto;
  }

  /* header padding 縮小 */
  .header {
    padding: 15px 15px;
  }

  /* hero 背景尺寸調整 */
  .hero { 
    height: 220px;
    background-size: 100%;
  }

  /* 文字寬度與置中 */
  .txt p {
    width: 90%;
    margin: 0 auto;
  }

  /* 調整標題圖片寬度 */
  .title-img img {
    max-width: 80%;
  }

  /* 調整時間與技能圖片寬度 */
  .time img,
  .skill img {
    max-width: 100%;
  }

  /* 圖片列改2欄 */
  .image-row {
    gap: 8px;
    padding: 0 5px;
  }

  .thumb {
    flex: 1 1 calc(50% - 8px);
    max-width: calc(100% - 8px);
    height: auto;
  }

  /* tab 按鈕字體與 padding */
  .tab-btn {
    font-size: 18px;
    padding: 16px 24px;
  }

  /* 信箱按鈕大小調整 */
  .mail-btn img {
    max-width: 340px;
    height: auto;
    display: block;
  }
}

/* ===== 基本：縮圖一律裁切，不顯示完整長圖 ===== */
#tab1 .thumb,
#tab2 .thumb {
  width: 100%;
  object-fit: cover;
  object-position: top; /* 長圖通常從上面裁比較好看 */
}

/* ===== EDM：長圖 → 高度比較高，露出多一點 ===== */
#tab1 .thumb {
  height: 260px; /* 你可調：240~320 */
}

/* ===== Banner：橫幅 → 高度比較矮，像橫幅預覽 ===== */
#tab2 .thumb {
  height: 160px; /* 你可調：120~200 */
  object-position: center; /* Banner 多半中心裁比較合理 */
}

/* ===== 手機版：高度再縮小，滑起來更順 ===== */
@media (max-width: 768px) {
  #tab1 .thumb { height: 180px; }
  #tab2 .thumb { height: 120px; }
}
/* ===== 影片剪輯 tab6：接近正方形卡片 ===== */
#tab6 .image-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: stretch;
}

/* 桌機：一排 3 個 */
#tab6 .image-row > a {
  display: block;
  flex: 0 0 calc(33.333% - 16px);
  max-width: calc(33.333% - 16px);
}

/* 影片縮圖 → 接近正方形 */
#tab6 .image-row > a > .thumb {
  width: 100%;
  aspect-ratio: 1 / 1;     /* ⭐ 關鍵：正方形比例 */
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  display: block;
  background: #000;
}

/* hover 微放大 */
#tab6 .image-row > a:hover .thumb {
  transform: scale(1.03);
  transition: transform .2s ease;
}

/* ===== 手機：一排 2 個（正方形） ===== */
@media (max-width: 768px) {
  #tab6 .image-row {
    gap: 12px;
  }

  #tab6 .image-row > a {
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
}

.section {
  position: relative;
}

.section::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: #e0e0e0;
  margin: 60px auto 0;
}

.thumb {
  transition: transform .3s ease, box-shadow .3s ease;
}

.thumb:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
}

.tab-buttons {
  position: relative;
}

.tab-buttons::after {
  content: "← 左右滑動查看更多";
  position: absolute;
  right: 0;
  bottom: -24px;
  font-size: 12px;
  color: #aaa;
}

@media (min-width: 769px) {
  .tab-buttons::after {
    display: none;
  }
}


/* =========================
   Minimal Decoration Pack
   貼在 style.css 最下面
   ========================= */

/* 1) 全站淡淡背景紋理（很輕） */
body {
  background:
    radial-gradient(circle at 20% 10%, rgba(0,0,0,.04), transparent 35%),
    radial-gradient(circle at 80% 30%, rgba(0,0,0,.03), transparent 40%),
    #fff;
}

/* 2) Section 變成柔和卡片感（有呼吸） */

.section > .txt,
.section > .tabs,
.section > .time,
.section > .image-row,
.section > .tab-content {
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 22px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* 3) 標題下方加細線（很乾淨） */
.title-img {
  position: relative;
  margin: 18px 0 18px;
}

.title-img::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  background: rgba(0,0,0,.18);
  margin: 18px auto 0;
  border-radius: 99px;
}

/* 標題圖在手機稍微大一點 */
@media (max-width: 768px) {
  .title-img img { max-width: 85%; }
}

/* 4) 文字區塊更好讀 */
.txt p {
  line-height: 1.9;
  letter-spacing: .2px;
}

/* 5) Tabs 區塊更像 UI */
.tab-buttons {
  padding: 6px 6px 10px;
  border-bottom: 0; /* 你原本的底線先拿掉 */
}

.tab-btn {
  border-radius: 999px;
  background: rgba(0,0,0,.04);
}

.tab-btn.active {
  background: rgba(189 253 152);
  color: #000;
  border-bottom: none; /* 取消你原本 active 底線 */
  font-weight: 600;
}

/* 6) 圖片 hover 微浮起＋柔光（作品集常見） */
.thumb {
  border-radius: 12px;
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.thumb:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
  opacity: .98;
}

/* 7) 分隔：每個 section 最後加一條淡分隔線（節奏） */
.section::after {
  content: "";
  display: block;
  width: 70px;
  height: 2px;
  background: rgba(0,0,0,.08);
  margin: 40px auto 0;
  border-radius: 99px;
}

/* 8) 跑馬燈更俐落一點（保留你的 rotate） */
.marquee {
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
}