/* 新官網自己加的（2026-10-23，HANDOFF §12.45）。舊站的 all／1160／768-1160／768／superfish 原封不動，這裡只補：
   舊站靠 jQuery 外掛做的東西（輪播、手機選單、看大圖）、原本是縮圖程式裁好的照片、首頁「廚房設備」換成「線上服務」那格 */

/* 舊站 css/varcss.php 每一頁都只吐這一行（左邊選單靠左），併進來 */
#links { float: left; }

/* 左邊選單一行寫死 25px 高：舊站只放短的分類名，新站裝修新知放文章標題，長的換行會疊到下一行（10-23 使用者看到）。
   改成跟著字長高，一行一樣高、行距留一點 */
#links .class2 a { height: auto; line-height: 1.45; padding-top: 6px; padding-bottom: 6px; padding-right: 10px; background-position: 20px 10px; }

/* 照片：舊站是 timthumb.php 裁成固定比例，新站用原圖讓瀏覽器裁 */
img.hx-crop { object-fit: cover; }
#main .blog .my_photo img.hx-crop { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; }
ul.pd li img.hx-crop { width: 100%; aspect-ratio: 4 / 3; height: auto; display: block; }
ul.pd_list li img.hx-crop { width: 100%; aspect-ratio: 1; height: auto; display: block; }
#content .news_content img, #content .blog_content img, #content .content img { max-width: 100%; height: auto; }
#content .news_content iframe, #content .blog_content iframe { max-width: 100%; }

/* 主視覺輪播（舊站 swiper）：疊在一起淡入淡出 */
.hx-slider { position: relative; overflow: hidden; }
.hx-slider img { display: block; width: 100%; height: auto; }
.hx-slider img:not(:first-child) { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.hx-slider img { opacity: 0; transition: opacity 1.2s ease; }
.hx-slider img.on { opacity: 1; }
.hx-slider img:first-child { opacity: 1; }          /* 第一張撐高度、永遠在底下 */
.hx-dots { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; }
.hx-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; margin: 0 4px; padding: 0; background: rgba(255,255,255,.55); cursor: pointer; }
.hx-dots button.on { background: #fff; }
@media (prefers-reduced-motion: reduce) { .hx-slider img { transition: none; } }

/* 首頁「會員福利」（原本是廚房設備，那張標題是圖，改成字；內容是會員福利區有貨的機器，10-23） */
#main .portfolio2.hx-online { background-image: none; }
#main .portfolio2.hx-online .content { padding-top: 14px; }
/* 舊站這格是固定 140 高、字條疊在下面；機器照片是白底去背的，用 contain 整台放進去 */
#main .portfolio2.hx-online .photo { height: 150px; background: #fff; }
#main .portfolio2.hx-online .photo a { position: relative; display: block; height: 150px; background: #fff; }
#main .portfolio2.hx-online img.hx-fit { width: 100%; height: 150px; object-fit: contain; background: #fff; max-width: 100%; }
#main .portfolio2.hx-online .title { bottom: 0; font-size: 14px; padding: 6px 4px; line-height: 1.35; }
.hx-noimg { height: 150px; display: flex; align-items: center; justify-content: center; color: #999; background: #f4f4f4; font-size: 14px; }
.hx-stock { position: absolute; left: 6px; top: 6px; background: #A6604F; color: #fff; font-size: 12px; border-radius: 10px; padding: 1px 8px; }
.hx-member { clear: both; padding: 8px 4px 0; font-size: 14px; color: #666; }
.hx-member a { color: #d25000; }
.hx-none { font-size: 14px; color: #888; padding: 10px 4px; line-height: 1.7; }
.hx-head { font-size: 20px; letter-spacing: 2px; color: #555; padding: 4px 0 0 20px; font-weight: normal; }
.hx-head small { font-size: 15px; letter-spacing: 0; color: #777; margin-left: 6px; }
.hx-head .hx-dia { font-size: 18px; margin-right: 4px; }
#main .portfolio2.hx-online .box { width: 48%; }
#main .portfolio2.hx-online img { width: 100%; aspect-ratio: 1; height: auto; }

/* 選單：外連的兩格（線上選購、門板配色）不另外標，跟舊站一樣 */
#header #menu { word-spacing: normal; }
#menu > li > a { padding: .1em .55em; }

/* 看大圖（舊站 Magnific-Popup） */
.hx-lb { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; }
.hx-lb[hidden] { display: none; }
.hx-lb img { max-width: 92vw; max-height: 88vh; box-shadow: 0 0 30px rgba(0,0,0,.6); }
.hx-lb button { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; font-size: 46px; line-height: 1; padding: 10px 16px; opacity: .8; }
.hx-lb button:hover { opacity: 1; }
.hx-lb-x { top: 6px; right: 8px; }
.hx-lb-p { left: 4px; top: 50%; transform: translateY(-50%); }
.hx-lb-n { right: 4px; top: 50%; transform: translateY(-50%); }

/* 線上諮詢 */
.hx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hx-inq .all_radio label { cursor: pointer; }
.hx-inq input[type=email], .hx-inq input[type=tel] { width: 60%; }
.hx-msg { margin: 10px 0 0; font-size: 15px; min-height: 1.4em; }
.hx-msg.ok { color: #2E7D5B; }
.hx-msg.err { color: #B4453B; }
.hx-empty { color: #999; padding: 20px 0; }

@media (max-width: 767px) {
  #main .portfolio2.hx-online .box { width: 48%; }
  .hx-inq input[type=email], .hx-inq input[type=tel] { width: 95%; }
}