.webBox { overflow: hidden; }
/* ========================================================
   #product_list 產品列表
======================================================== */#product_list { --product-primary: #0B2D72; --product-primary-dark: #071F50; --product-secondary: #41A67E; --product-secondary-dark: #2F7E61; --product-text: #56636E; --product-line: rgba(11,45,114,0.12); --product-shadow: 0 22px 55px rgba(11,45,114,0.10); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 32px 26px; width: min(100%,1420px); margin: 0 auto; padding: 20px 0 70px; font-size: 0; line-height: normal; white-space: normal; list-style: none; counter-reset: product-counter; }
#product_list,#product_list * { box-sizing: border-box; }
#product_list > li { position: relative; display: flex; flex-direction: column;width: 100%; min-width: 0; margin: 0; padding: 0; float: none; font-size: 16px; white-space: normal; background: #FFFFFF; border: 1px solid var(--product-line); border-radius: 3px 30px 3px 3px; box-shadow: var(--product-shadow); overflow: hidden; counter-increment: product-counter; transform: translateZ(0); transition: border-color 0.4s ease,box-shadow 0.4s ease,transform 0.4s ease; }
#product_list > li::before { content: ""; position: absolute; top: 0; left: 0; z-index: 3; width: 72px; height: 4px; background: var(--product-secondary); transition: width 0.45s ease; }
#product_list > li::after { content: counter(product-counter,decimal-leading-zero); position: absolute; top: 18px; left: 19px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: #FFFFFF; font-family: Arial,sans-serif; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.08em; background: rgba(11,45,114,0.92); border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; box-shadow: 0 10px 24px rgba(7,31,80,0.22); backdrop-filter: blur(8px); pointer-events: none; }
#product_list > li:hover { z-index: 2; border-color: rgba(65,166,126,0.48); box-shadow: 0 32px 70px rgba(11,45,114,0.17); transform: translateY(-9px); }
#product_list > li:hover::before { width: 100%; }
#product_list > li > .bgBox { position: relative; display: block; flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 4/3; margin: 0; padding: 0; background-color: #FFFFFF; background-repeat: no-repeat; background-position: center; background-size: contain; border: 0; transform: scale(1.001); transition: filter 0.55s ease,transform 0.9s cubic-bezier(0.2,0.7,0.2,1); }
#product_list > li:hover > .bgBox { filter: saturate(1.05) contrast(1.025); transform: scale(1.035); }
#product_list .info_box { position: relative !important; right: auto !important; bottom: auto !important; left: auto !important; z-index: 3; display: block; flex: 1; width: auto; min-height: 112px; margin: 0; padding: 0; white-space: normal; background: linear-gradient(135deg,#FFFFFF 0%,#F6FAFB 100%); border: 0; border-top: 1px solid var(--product-line); border-left: 4px solid var(--product-secondary); border-radius: 0 0 2px 2px; box-shadow: none; overflow: hidden; transition: background 0.4s ease,border-color 0.4s ease; }
#product_list .info_box::before { content: "PRODUCT CAPACITY"; position: absolute; top: 20px; left: 23px; color: var(--product-secondary); font-family: Arial,sans-serif; font-size: 9px; font-weight: 700; line-height: 1.4; letter-spacing: 0.17em; }
#product_list .info_box::after { content: "↗"; position: absolute; top: 50%; right: 20px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #FFFFFF; font-family: Arial,sans-serif; font-size: 17px; font-weight: 400; line-height: 1; background: var(--product-primary); border-radius: 50%; transform: translateY(-50%); transition: background 0.35s ease,transform 0.35s ease; }
#product_list > li:hover .info_box { background: #FFFFFF; border-left-color: var(--product-secondary); }
#product_list > li:hover .info_box::after { background: var(--product-secondary); transform: translateY(-50%) rotate(45deg); }
#product_list .left_box { position: relative; display: block; width: 100%; margin: 0; padding: 42px 82px 20px 23px; white-space: normal; }
#product_list .left_box .h3 { display: block; margin: 0; padding: 0; color: var(--product-primary); font-size: clamp(21px,1.7vw,28px); font-weight: 700; line-height: 1.35; letter-spacing: 0.055em; white-space: normal; overflow: visible; transition: color 0.35s ease; }
#product_list > li:hover .left_box .h3 { color: var(--product-secondary-dark); }
#product_list .left_box article { display: -webkit-box; margin: 7px 0 0; padding: 0; color: var(--product-text); font-size: 13px; font-weight: 400; line-height: 1.75; letter-spacing: 0.02em; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
#product_list .left_box article:empty { display: none; }
#product_list .atag_item { position: absolute; inset: 0; z-index: 5; display: block; width: 100%; height: 100%; margin: 0; text-decoration: none; border-radius: inherit; }
#product_list .atag_item:focus { outline: 0; }
#product_list .atag_item:focus-visible { outline: 3px solid rgba(65,166,126,0.7); outline-offset: -5px; }


/*productdetail */
#productdetail { --detail-primary: #0B2D72; --detail-primary-dark: #071F50; --detail-secondary: #41A67E; --detail-secondary-dark: #2F7E61; --detail-text: #56636E; --detail-dark: #172333; --detail-light: #F4F8FB; --detail-paper: #FFFFFF; --detail-line: rgba(11,45,114,0.12); --detail-shadow: 0 25px 65px rgba(11,45,114,0.11); --detail-desktop-height: clamp(570px,43vw,650px); position: relative; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(420px,0.92fr); align-items: stretch; gap: 70px; width: min(100%,1420px); margin: 0 auto !important; padding: 60px 0 110px; color: var(--detail-dark); line-height: 1.8; }
#productdetail,#productdetail * { box-sizing: border-box; }
#productdetail .poooimgbox { position: relative !important; display: grid !important; grid-template-columns: 82px minmax(0,1fr); grid-template-areas: "thumb main"; align-items: stretch; gap: 18px; width: 100%; height: var(--detail-desktop-height); min-width: 0; margin: 0 !important; padding: 24px 0 0 24px; transform: none !important; }
#productdetail .poooimgbox::before { content: ""; position: absolute; top: 0; left: 0; z-index: 0; width: 58%; height: 58%; border-top: 2px solid var(--detail-secondary); border-left: 2px solid var(--detail-secondary); pointer-events: none; }
#productdetail .poooimgbox::after { content: "PRODUCT"; position: absolute; right: 0; bottom: -20px; z-index: 0; color: transparent; font-family: Arial,sans-serif; font-size: clamp(60px,7vw,105px); font-weight: 800; line-height: 1; letter-spacing: 0.04em; white-space: nowrap; -webkit-text-stroke: 1px rgba(11,45,114,0.055); pointer-events: none; }


#productdetail .sub-pro-img { position: relative !important; z-index: 2; grid-area: main; width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0 !important; background: var(--detail-paper); border: 1px solid var(--detail-line); box-shadow: var(--detail-shadow); overflow: hidden; clip-path: polygon(0 0,calc(100% - 48px) 0,100% 48px,100% 100%,48px 100%,0 calc(100% - 48px)); }
#productdetail .sub-pro-img > .slick-slider,#productdetail .sub-pro-img > div { width: 100%; height: 100%; }
#productdetail .sub-pro-img .slick-list { width: 100%; height: 100% !important; overflow: hidden; }
#productdetail .sub-pro-img .slick-track { height: 100% !important; }
#productdetail .sub-pro-img .slick-slide { height: 100% !important; outline: 0; }
#productdetail .sub-pro-img .slick-slide > div { height: 100%; }
#productdetail .sub-pro-img p { position: relative; width: 100%; height: 100%; min-height: 0; margin: 0; background-color: #FFFFFF; background-repeat: no-repeat; background-position: center; background-size: contain; overflow: hidden; }
#productdetail .sub-pro-img p::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 50% 45%,rgba(65,166,126,0.055),transparent 52%); pointer-events: none; }
#productdetail .sub-pro-img p::after { content: "點擊放大"; position: absolute; right: 20px; bottom: 20px; z-index: 3; display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 17px; color: #FFFFFF; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.1em; background: rgba(11,45,114,0.90); border-left: 3px solid var(--detail-secondary); box-shadow: 0 10px 25px rgba(7,31,80,0.18); backdrop-filter: blur(8px); pointer-events: none; }
#productdetail .sub-pro-img p a { position: relative; z-index: 2; display: block; width: 100%; height: 100%; }
#productdetail .sub-pro-img p img { display: block; width: 100%; height: 100%; opacity: 0; }
#productdetail .sub-pro-img a[data-fancybox] { cursor: zoom-in; }

#productdetail .super-show { position: relative !important; z-index: 2; grid-area: thumb; width: 82px; height: 100%; min-width: 0; min-height: 0; margin: 0 !important; padding: 0; overflow: hidden; }
#productdetail .super-show .navbox { position: relative !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0; }
#productdetail .super-show .slick-list { width: 100% !important; height: 100% !important; padding: 0 !important; overflow: hidden !important; }
#productdetail .super-show .slick-track { height: auto !important; margin: 0; }
#productdetail .super-show .slick-slide { width: 82px !important; height: auto !important; margin: 0 0 10px; float: none; outline: 0; cursor: pointer; }
#productdetail .super-show .slick-slide:last-child { margin-bottom: 0; }
#productdetail .super-show .littleimg { position: relative; display: block; width: 82px; height: 82px; margin: 0; background-color: #FFFFFF; background-repeat: no-repeat; background-position: center; background-size: contain; border: 1px solid var(--detail-line); cursor: pointer; overflow: hidden; transition: border-color 0.35s ease,box-shadow 0.35s ease,transform 0.35s ease; }
#productdetail .super-show .littleimg::after { content: ""; position: absolute; inset: 0; border: 3px solid transparent; pointer-events: none; transition: border-color 0.35s ease; }
#productdetail .super-show .slick-slide:hover .littleimg { border-color: rgba(65,166,126,0.55); box-shadow: 0 10px 24px rgba(11,45,114,0.12); transform: translateY(-2px); }
#productdetail .super-show .slick-current .littleimg { border-color: var(--detail-secondary); box-shadow: inset 0 0 0 2px var(--detail-secondary); }
#productdetail .super-show .slick-current .littleimg::after { border-color: var(--detail-secondary); }
#productdetail .super-show .littleimg img { display: block; width: 100%; height: 100%; opacity: 0; }
#productdetail .super-show .slick-arrow { position: absolute; right: 0; left: 0; z-index: 10; display: flex !important; align-items: center; justify-content: center; width: 100%; height: 28px; margin: 0; padding: 0; color: transparent; font-size: 0; background: rgba(11,45,114,0.90); border: 0; cursor: pointer; opacity: 0; transition: opacity 0.3s ease,background 0.3s ease; }
#productdetail .super-show:hover .slick-arrow { opacity: 1; }
#productdetail .super-show .slick-arrow:hover { background: var(--detail-secondary); }
#productdetail .super-show .slick-prev { top: 0; }
#productdetail .super-show .slick-next { top: auto; bottom: 0; }
#productdetail .super-show .slick-prev::before,#productdetail .super-show .slick-next::before { content: ""; width: 8px; height: 8px; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; }
#productdetail .super-show .slick-prev::before { transform: rotate(45deg); }
#productdetail .super-show .slick-next::before { transform: rotate(225deg); }
#productdetail .super-show .slick-disabled { display: none !important; }


#productdetail .super-show.is-single-image { display: none; }
#productdetail .poooimgbox.is-single-image { grid-template-columns: 1fr; grid-template-areas: "main"; }

#productdetail #productTabs { position: sticky; top: 110px; display: flex; flex-direction: column; width: 100%; height: var(--detail-desktop-height); min-width: 0; margin: 0; padding: 0; background: var(--detail-paper); border: 1px solid var(--detail-line); box-shadow: var(--detail-shadow); overflow: hidden; }
#productdetail #productTabs::before { content: "PRODUCT SPECIFICATION"; position: absolute; top: 28px; right: 27px; z-index: 2; color: rgba(255,255,255,0.24); font-family: Arial,sans-serif; font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: 0.17em; pointer-events: none; }
#productdetail #productTabs .tabs { position: relative; z-index: 1; display: flex; flex: 0 0 auto; width: 100%; margin: 0; padding: 0; white-space: normal; background: linear-gradient(135deg,#071F50 0%,#0B2D72 100%); list-style: none; overflow: hidden; }
#productdetail #productTabs .tabs::after { content: ""; position: absolute; right: -45px; bottom: -70px; width: 170px; height: 170px; border: 1px solid rgba(255,255,255,0.09); border-radius: 50%; box-shadow: 0 0 0 25px rgba(255,255,255,0.025),0 0 0 50px rgba(255,255,255,0.015); pointer-events: none; }
#productdetail #productTabs .tabs li { position: relative; z-index: 2; display: block; margin: 0; padding: 0; }
#productdetail #productTabs .tabs li a {position: relative;display: flex;align-items: center;min-height: 68px;padding: 10px 32px;color: rgba(255,255,255,0.68);font-size: 17px;font-weight: 700;line-height: 1.4;letter-spacing: 0.08em;text-decoration: none;transition: color 0.35s ease,background 0.35s ease;}
#productdetail #productTabs .tabs li a::before { content: ""; position: absolute; right: 32px; bottom: 0; left: 32px; height: 4px; background: var(--detail-secondary); transform: scaleX(0); transform-origin: left center; transition: transform 0.35s ease; }
#productdetail #productTabs .tabs li.active a,#productdetail #productTabs .tabs li a:hover { color: #FFFFFF; background: rgba(255,255,255,0.055); }
#productdetail #productTabs .tabs li.active a::before { transform: scaleX(1); }
#productdetail #tabs_container { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; padding: 34px 32px 18px; background: linear-gradient(180deg,#FFFFFF 0%,#F8FBFC 100%); overflow: auto; }
#productdetail .tab_content { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 12px; width: 100%; }
#productdetail .tab_content > p { position: relative; display: flex; align-items: center; min-height: 88px; margin: 0; padding: 17px 18px 17px 44px; color: var(--detail-primary); font-size: 14px; font-weight: 600; line-height: 1.75; letter-spacing: 0.02em; word-break: break-word; overflow-wrap: break-word; background: #FFFFFF; border: 1px solid var(--detail-line); overflow: hidden; transition: border-color 0.35s ease,box-shadow 0.35s ease,transform 0.35s ease; }
#productdetail .tab_content > p::before { content: ""; position: absolute; top: 50%; left: 19px; width: 9px; height: 9px; background: var(--detail-secondary); border-radius: 50%; box-shadow: 0 0 0 5px rgba(65,166,126,0.10); transform: translateY(-50%); }
#productdetail .tab_content > p::after { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--detail-secondary); transform: scaleY(0); transform-origin: bottom center; transition: transform 0.35s ease; }
#productdetail .tab_content > p:hover { border-color: rgba(65,166,126,0.35); box-shadow: 0 13px 30px rgba(11,45,114,0.08); transform: translateY(-3px); }
#productdetail .tab_content > p:hover::after { transform: scaleY(1); }
#productdetail .tab_content > p span {display: block;width: 100%;font-size: 15px;}
#productdetail .tab_content > p:empty { display: none; }
#productdetail .tapoubox { flex: 0 0 auto; margin-top: auto; padding: 20px 32px 34px; background: linear-gradient(180deg,#F8FBFC 0%,#FFFFFF 100%); }
#productdetail .tapoubox .btns { margin: 0; padding: 0; }
#productdetail .tapoubox .ask { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 66px; padding: 17px 72px 17px 27px; color: #FFFFFF; font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: 0.12em; text-decoration: none; background: linear-gradient(135deg,var(--detail-secondary) 0%,var(--detail-secondary-dark) 100%); border: 1px solid var(--detail-secondary); border-radius: 3px 30px 3px 3px; box-shadow: 0 16px 35px rgba(65,166,126,0.24); overflow: hidden; transition: background 0.4s ease,border-color 0.4s ease,box-shadow 0.4s ease,transform 0.4s ease; }
#productdetail .tapoubox .ask::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent); transition: left 0.6s ease; }
#productdetail .tapoubox .ask::after { content: "→"; position: absolute; top: 50%; right: 22px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--detail-primary); font-family: Arial,sans-serif; font-size: 19px; font-weight: 400; line-height: 1; background: #FFFFFF; border-radius: 50%; transform: translateY(-50%); transition: color 0.35s ease,transform 0.35s ease; }
#productdetail .tapoubox .ask:hover { background: linear-gradient(135deg,var(--detail-primary) 0%,var(--detail-primary-dark) 100%); border-color: var(--detail-primary); box-shadow: 0 21px 45px rgba(11,45,114,0.24); transform: translateY(-4px); }
#productdetail .tapoubox .ask:hover::before { left: 100%; }
#productdetail .tapoubox .ask:hover::after { color: var(--detail-secondary); transform: translateY(-50%) translateX(5px); }
#productdetail .tapoubox .ask:focus-visible { outline: 3px solid rgba(65,166,126,0.45); outline-offset: 4px; }


@media screen and (max-width:1280px) {
  #product_list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px 22px; }
  #productdetail { --detail-desktop-height: 610px; grid-template-columns: minmax(0,1fr) minmax(390px,0.92fr); gap: 45px; }
  #productdetail .poooimgbox { grid-template-columns: 76px minmax(0,1fr); gap: 15px; padding: 22px 0 0 22px; }
  #productdetail .super-show,#productdetail .super-show .slick-slide,#productdetail .super-show .littleimg { width: 76px !important; }
  #productdetail .super-show .littleimg { height: 76px; }
  #productdetail #tabs_container,#productdetail .tapoubox { padding-right: 25px; padding-left: 25px; }
}
@media screen and (max-width:1024px) {
  #product_list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px 22px; padding-bottom: 60px; }
  #product_list .left_box .h3 { font-size: 25px; }
  #productdetail { grid-template-columns: 1fr; align-items: start; gap: 60px; padding-top: 40px; padding-bottom: 90px; }
  #productdetail .poooimgbox { width: min(100%,850px); height: 610px; }
  #productdetail #productTabs { position: relative; top: auto; height: auto; min-height: 0; }
  #productdetail #tabs_container { overflow: visible; }
}
@media screen and (max-width:768px) {
  #product_list { gap: 20px; padding-top: 10px; padding-bottom: 50px; }
  #product_list .info_box { min-height: 104px; }
  #product_list .info_box::before { top: 18px; left: 19px; }
  #product_list .info_box::after { right: 17px; width: 40px; height: 40px; }
  #product_list .left_box { padding: 39px 72px 17px 19px; }
  #product_list .left_box .h3 { font-size: 22px; }
  #productdetail { gap: 50px; padding-top: 25px; padding-bottom: 75px; }
  #productdetail .poooimgbox { grid-template-columns: 1fr; grid-template-areas: "main" "thumb"; gap: 15px; width: 100%; height: auto; padding: 15px 0 0 15px; }
  #productdetail .sub-pro-img { height: auto; aspect-ratio: 4/3; clip-path: polygon(0 0,calc(100% - 32px) 0,100% 32px,100% 100%,32px 100%,0 calc(100% - 32px)); }
  #productdetail .super-show { width: 100% !important; height: 76px; overflow: hidden; }
  #productdetail .super-show .navbox,#productdetail .super-show .slick-list { width: 100% !important; height: 76px !important; overflow: hidden !important; }
  #productdetail .super-show .slick-track { height: 76px !important; }
  #productdetail .super-show .slick-slide { width: 76px !important; height: 76px !important; margin: 0 10px 0 0; float: left; }
  #productdetail .super-show .littleimg { width: 76px !important; height: 76px; }
  #productdetail .super-show .slick-arrow { display: none !important; }
  #productdetail #productTabs .tabs li a { min-height: 72px; padding: 18px 25px; font-size: 16px; }
  #productdetail #tabs_container { padding: 27px 22px 15px; }
  #productdetail .tapoubox { padding: 18px 22px 28px; }
}
@media screen and (max-width:560px) {
  #product_list { grid-template-columns: 1fr; gap: 22px; padding-bottom: 40px; }
  #product_list > li { border-radius: 3px 24px 3px 3px; }
  #product_list > li::after { top: 15px; left: 15px; width: 44px; height: 44px; }
  #product_list .info_box { min-height: 106px; }
  #product_list .left_box .h3 { font-size: 24px; }
  #productdetail { gap: 40px; padding-top: 15px; padding-bottom: 60px; }
  #productdetail .poooimgbox { padding: 10px 0 0 10px; }
  #productdetail .poooimgbox::after { display: none; }
  #productdetail .sub-pro-img { aspect-ratio: 1/1; }
  #productdetail .sub-pro-img p::after { right: 12px; bottom: 12px; min-height: 36px; padding: 8px 12px; font-size: 10px; }
  #productdetail #productTabs::before { display: none; }
  #productdetail #productTabs .tabs li { flex: 1; }
  #productdetail #productTabs .tabs li a { justify-content: center; min-height: 66px; padding: 16px 18px; font-size: 15px; text-align: center; }
  #productdetail #productTabs .tabs li a::before { right: 18px; left: 18px; }
  #productdetail #tabs_container { padding: 22px 16px 12px; }
  #productdetail .tab_content { grid-template-columns: 1fr; gap: 10px; }
  #productdetail .tab_content > p { min-height: 66px; padding: 15px 15px 15px 40px; font-size: 13px; }
  #productdetail .tab_content > p::before { left: 17px; width: 8px; height: 8px; }
  #productdetail .tapoubox { padding: 16px 16px 22px; }
  #productdetail .tapoubox .ask { min-height: 60px; padding: 15px 65px 15px 22px; font-size: 14px; }
  #productdetail .tapoubox .ask::after { right: 16px; width: 36px; height: 36px; }
}
@media screen and (max-width:390px) {
  #product_list .info_box::after { right: 14px; width: 38px; height: 38px; }
  #product_list .left_box { padding-right: 64px; padding-left: 17px; }
  #productdetail .sub-pro-img p::after { content: "放大"; }
  #productdetail .tab_content > p { font-size: 12px; }
}
@media (prefers-reduced-motion:reduce) {
  #product_list > li,#product_list > li::before,#product_list > li > .bgBox,#product_list .info_box,#product_list .info_box::after,#productdetail .super-show .littleimg,#productdetail .tab_content > p,#productdetail .tapoubox .ask,#productdetail .tapoubox .ask::before,#productdetail .tapoubox .ask::after { transition: none; }
}