:root{--yellow:#ffcb05;--dark:#303236;--panel:#55585d;--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Microsoft JhengHei","Noto Sans TC",Arial,sans-serif}
#header{height:300px;background:linear-gradient(120deg,#1d2024 0%,#393d42 55%,#202327 100%);overflow:hidden}
.native-hero{position:relative;width:100%;height:300px;display:flex;align-items:center;padding:0 66px;text-align:left;color:#fff;isolation:isolate}
.native-hero:before,.native-hero:after{content:"";position:absolute;top:0;width:23%;height:100%;background:linear-gradient(90deg,#16181b,#4c5055);z-index:-1;animation:door-open 1.4s ease-out both}
.native-hero:before{left:27%;transform-origin:left}.native-hero:after{right:27%;transform-origin:right;background:linear-gradient(270deg,#16181b,#4c5055)}
.native-hero__eyebrow{display:block;color:var(--yellow);font-size:13px;letter-spacing:.32em;margin-bottom:12px}
.native-hero strong{display:block;font-size:48px;letter-spacing:.08em;line-height:1.12}
.native-hero p{font-size:17px;letter-spacing:.12em;color:#d9d9d9;margin:14px 0 0}
.native-hero__mark{position:absolute;right:62px;bottom:42px;color:rgba(255,203,5,.18);font:700 86px/1 Arial}
.native-hero--home{justify-content:space-between;gap:38px}
.native-hero__copy{flex:1 1 48%}
.native-hero--home .native-hero__copy strong{font-size:34px;letter-spacing:.045em;white-space:nowrap}
.native-hero__logo-card{flex:0 1 390px;padding:16px 18px;border:0;background:transparent;box-shadow:none}
.native-hero__logo-card img{display:block;width:100%;height:auto;max-height:145px;object-fit:contain}
@keyframes door-open{from{transform:translateX(0)}to{transform:translateX(var(--door-shift,0))}}
.native-hero:before{--door-shift:-115%}.native-hero:after{--door-shift:115%}
.legacy-menu{width:240px;margin:0;padding:26px 22px 34px;list-style:none;text-align:left;background:var(--yellow);min-height:430px}
.legacy-menu a{display:block;padding:14px 13px;border-bottom:1px solid rgba(31,31,31,.24);color:#242424!important;text-decoration:none!important;font-size:15px;font-weight:700;letter-spacing:.08em;transition:background .2s,color .2s,padding .2s}
.legacy-menu a:hover,.legacy-menu a:focus{background:#242424;color:var(--yellow)!important;padding-left:19px;outline:none}
.native-product{max-width:400px;max-height:380px;object-fit:contain}
.product-gallery{width:100%;max-width:500px;margin:20px 0 34px}
.product-gallery__thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.product-gallery__thumbs button{width:58px;height:58px;padding:3px;border:2px solid transparent;border-radius:5px;background:#eee;cursor:pointer;transition:border-color .2s,transform .2s}
.product-gallery__thumbs button:hover,.product-gallery__thumbs button:focus,.product-gallery__thumbs button.is-active{border-color:#ffcc00;transform:translateY(-2px);outline:none}
.product-gallery__thumbs img{display:block;width:100%;height:100%;object-fit:cover}
.product-gallery__stage{display:flex;align-items:center;justify-content:center;width:100%;height:440px;padding:10px;border:1px solid #777;background:rgba(0,0,0,.18)}
.product-gallery__stage img{display:block;max-width:100%;max-height:418px;object-fit:contain}
.intro-projects{display:flex;align-items:flex-start;justify-content:center;gap:16px;margin:20px 30px 28px}
.intro-projects figure{width:220px;margin:0;padding:8px;background:#fff;box-shadow:0 5px 16px rgba(0,0,0,.22)}
.intro-projects img{display:block;width:100%;height:260px;object-fit:cover;object-position:center}
.line-contact{display:flex;align-items:center;gap:20px;margin:24px 30px 34px;padding:18px;background:#fff;border-left:5px solid #06c755;color:#292929;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.line-contact img{display:block;width:180px;height:180px;object-fit:contain}
.line-contact strong{display:block;color:#06a94a;font-size:20px;margin-bottom:8px}
.line-contact span{display:block;color:#555;font-size:14px;line-height:1.7}
.line-contact--contact{margin:26px 0}.line-contact--contact img{width:220px;height:220px}
@media(max-width:920px){body,html{background:#3f3f3f}#warp,#footer{width:100%;border:0}#header,.native-hero{height:240px}.native-hero{padding:0 28px}.native-hero strong{font-size:34px}.native-hero__mark{font-size:54px;right:24px}#content{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:start}#menu,#main{float:none;width:auto!important;display:block}.legacy-menu{width:100%;min-height:430px;padding:18px 12px;display:block}.legacy-menu a{text-align:left;padding:12px 9px;border-bottom:1px solid rgba(31,31,31,.24)}#info{margin:24px;overflow-x:auto}#mylink{margin:12px 24px;width:auto}#fleft{display:none}#fright{width:100%}}
@media(max-width:600px){#content{grid-template-columns:150px minmax(0,1fr)}.legacy-menu{padding:12px 7px}.legacy-menu a{font-size:13px;letter-spacing:.02em;padding:11px 7px}#info{margin:14px 10px}#mylink{margin:10px}}
@media(max-width:700px){#header,.native-hero{height:300px}.native-hero--home{flex-direction:column;justify-content:center;gap:18px;text-align:center}.native-hero--home .native-hero__copy{flex:none;width:100%}.native-hero__logo-card{flex:none;width:min(390px,92%);padding:10px 14px}.native-hero__logo-card img{max-height:92px}.native-hero--home .native-hero__copy strong{font-size:26px;letter-spacing:.025em}.native-hero--home .native-hero__eyebrow{font-size:10px}}
@media(max-width:560px){.line-contact{flex-direction:column;text-align:center;margin:22px 0}.line-contact--contact img,.line-contact img{width:200px;height:200px}}
@media(max-width:560px){.intro-projects{flex-direction:column;align-items:center;margin:20px 0}.intro-projects figure{width:min(280px,100%)}.intro-projects img{height:auto;max-height:360px;object-fit:contain}}
@media(max-width:560px){.product-gallery__thumbs button{width:54px;height:54px}.product-gallery__stage{height:380px}.product-gallery__stage img{max-height:358px}}
@media(max-width:700px){table{max-width:100%}img{max-width:100%;height:auto}#info table{display:block;overflow-x:auto}.gotop{max-width:100%}}
@media(max-width:620px){body>table{display:block;width:max-content;min-width:100%}body>#warp{width:100%!important;overflow-x:auto}body>#warp>div{max-width:100%}}
@media(prefers-reduced-motion:reduce){.native-hero:before,.native-hero:after{animation:none;opacity:0}}

/* Global navigation: buttons stay above the page content on every screen. */
#content{display:block!important}
#menu{float:none!important;width:100%!important}
.legacy-menu{display:flex!important;flex-wrap:wrap;justify-content:center;width:100%!important;min-height:0!important;padding:8px 12px!important}
.legacy-menu li{flex:1 1 150px;max-width:180px}
.legacy-menu a{text-align:center!important;padding:12px 8px!important;border-bottom:0!important;border-right:1px solid rgba(31,31,31,.2)}
#main{display:block!important;float:none!important;width:100%!important}
#info{max-width:760px;margin-left:auto!important;margin-right:auto!important;padding-left:24px;padding-right:24px}
#fleft{display:none}
#fright{float:none;width:100%}
@media(max-width:560px){.legacy-menu{padding:6px!important}.legacy-menu li{flex:1 1 46%;max-width:none}.legacy-menu a{font-size:13px!important;padding:10px 5px!important}#info{padding-left:10px;padding-right:10px}}