:root{color-scheme:dark;--gold:#c7a56a;--pale:#f0d29a;--side-gap:188px;} *{box-sizing:border-box;} html,body{margin:0;width:100%;height:100%;overflow:hidden;} body{color:var(--pale);background:#110104;font-family:Arial,"Noto Sans TC","Microsoft JhengHei",sans-serif;} button,input{font:inherit;} .page{position:relative;display:flex;flex-direction:column;isolation:isolate;width:max(0px,calc(100% - 2 * var(--side-gap)));height:100vh;height:100dvh;margin-inline:auto;overflow:hidden;background:#000;} .background{position:absolute;z-index:-3;inset:0;background:#04130f;transform:none;transform-origin:center;} .background img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;} .shade{position:absolute;z-index:-2;inset:0;background:linear-gradient( 90deg,transparent 33%,rgba(0,18,14,.28) 56%,rgba(0,14,11,.91) 79%,#00100d 100% );} .topbar{position:relative;z-index:1;flex:0 0 50px;border-bottom:1px solid rgba(171,131,65,.15);background:rgba(0,15,13,.83);} .header-entries{position:absolute;top:7px;left:calc(8px + 10mm);display:flex;gap:8px;} .agent,.member{position:relative;display:flex;align-items:center;justify-content:center;width:132px;height:36px;border:1px solid #6d5d36;border-radius:4px;background:linear-gradient(#23352e,#0d201d);box-shadow:inset 0 0 0 2px #192c25,0 1px 8px #000;color:#d4b678;font-size:12px;letter-spacing:2px;cursor:pointer;text-decoration:none;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,color .2s ease,transform .2s ease;} .agent:hover,.member:hover,.agent:focus-visible,.member:focus-visible{border-color:#efd08a;background:linear-gradient(#345042,#17342b);box-shadow:inset 0 0 0 2px rgba(239,208,138,.32),0 0 14px rgba(231,186,96,.55);color:#ffe8b1;transform:translateY(-1px);} .agent:hover::before,.agent:hover::after,.member:hover::before,.member:hover::after,.agent:focus-visible::before,.agent:focus-visible::after,.member:focus-visible::before,.member:focus-visible::after{color:#ffe2a1;} @media (prefers-reduced-motion:reduce){.agent,.member{transition:none;}} .agent::before,.agent::after,.member::before,.member::after{content:"✦";position:absolute;top:9px;color:#b69350;font-size:9px;} .agent::before,.member::before{left:6px;} .agent::after,.member::after{right:6px;} .languages{position:absolute;top:8px;right:calc(8px + 10mm);display:flex;gap:4px;max-width:calc(100% - 296px - 20mm);padding:3px 5px;overflow-x:auto;border:1px solid #586645;border-radius:9px;background:#12221e;box-shadow:0 0 0 2px #07120f;scrollbar-width:none;} .languages::-webkit-scrollbar{display:none;} .languages button{flex:0 0 38px;width:38px;height:26px;padding:0;border:1px solid #a48d5a;border-radius:5px;background:#27352d;display:flex;align-items:center;justify-content:center;cursor:pointer;} .languages picture,.languages img{display:block;width:34px;height:23px;} .languages img{object-fit:contain;border-radius:2px;} .languages button:focus-visible,.languages button.is-active{border-color:#f7dc99;box-shadow:0 0 0 2px rgba(246,210,132,.55);} .language-toggle{display:none;} button:focus-visible{outline:2px solid #ffdf94;outline-offset:3px;} button:active,a:active,button.is-clicked,a.is-clicked{outline:2px solid #e5c47a;outline-offset:2px;} .content{display:flex;flex:1;min-height:0;align-items:center;justify-content:flex-end;width:calc(100% - 44px);margin:0 44px 0 0;padding:clamp(6px,2vh,20px) 0;} .login{position:relative;flex:0 0 auto;transform:scale(var(--panel-scale,1));transform-origin:center;width:min(100%,360px);padding:20px 30px 29px;border:1px solid rgba(159,132,79,.35);background:radial-gradient(ellipse 90% 180px at 50% 0%,rgba(225,185,106,.18),transparent 75%),linear-gradient(145deg,rgba(11,39,30,.98),rgba(1,21,17,.98) 70%);box-shadow:0 20px 45px rgba(0,0,0,.32),inset 0 12px 28px rgba(211,173,96,.09),inset 0 0 50px rgba(48,66,41,.09);} .login::before{content:"";position:absolute;top:-1px;left:16%;width:68%;height:1px;background:linear-gradient(90deg,transparent,#e6c883,transparent);box-shadow:0 2px 14px 2px rgba(222,182,100,.3);pointer-events:none;} .official-label{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 4px;color:#d9b879;font-size:12px;font-weight:600;letter-spacing:3px;text-shadow:0 1px 5px rgba(222,174,95,.28);} .official-label::before,.official-label::after{content:"";width:31px;height:1px;background:linear-gradient(90deg,transparent,#ae874a);} .official-label::after{transform:rotate(180deg);} .brand-image{display:block;width:210px;height:auto;margin:0 auto 16px;} .brand-picture{display:block;} .entry-buttons{display:grid;gap:9px;} .entry-button{display:flex;align-items:center;justify-content:center;width:100%;min-height:45px;border:1px solid #a77c42;background:linear-gradient(100deg,#917044,#e3c17c 48%,#856038);color:#271906;font-size:16px;font-weight:700;letter-spacing:4px;cursor:pointer;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,240,191,.35),0 2px 5px rgba(0,0,0,.28);} .entry-button:hover{filter:brightness(1.1);} .entry-button:focus-visible,.entry-button:active,.entry-button.is-active{border-color:#ffe4a2;box-shadow:0 0 0 2px rgba(255,225,145,.62),0 0 18px rgba(234,190,101,.48),inset 0 1px 0 rgba(255,240,191,.4);} .entry-button.customer-service{margin-top:5px;border:2px solid #e5c77b;border-radius:7px;background:linear-gradient(100deg,#082c25,#175046 50%,#082b24);color:#ffe5a6;box-shadow:inset 0 0 0 2px rgba(239,201,124,.38),0 0 18px rgba(232,190,98,.35);text-shadow:0 0 8px rgba(246,214,150,.5);} .entry-button.customer-service:hover{box-shadow:inset 0 0 0 2px rgba(239,201,124,.55),0 0 25px rgba(232,190,98,.6);} body.modal-open{overflow:hidden;} .modal-backdrop[hidden]{display:none;} .modal-backdrop{position:fixed;z-index:20;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.76);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);} .service-modal{position:relative;width:min(100%,820px);padding:18px 18px 18px;border:1px solid #b79459;background:linear-gradient(145deg,#123228,#031b15 75%);box-shadow:0 24px 70px rgba(0,0,0,.65),inset 0 0 0 3px rgba(207,173,108,.1);} .modal-heading{display:flex;align-items:center;justify-content:center;width:max-content;max-width:calc(100% - 84px);min-height:32px;margin:0 auto 10px;padding:4px 14px;border:1px solid #e4bb62;border-radius:6px;background:linear-gradient(180deg,#f3ce78,#bf7b1d);color:#4a2105;font-size:16px;font-weight:800;letter-spacing:1px;text-align:center;box-shadow:inset 0 1px 0 rgba(255,240,180,.45),0 0 10px rgba(207,155,69,.25);} .modal-close{position:absolute;top:18px;right:18px;z-index:1;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0 0 3px;border:1px solid #cba65f;border-radius:5px;outline:none;background:linear-gradient(145deg,#254133,#091d18);box-shadow:inset 0 0 0 1px rgba(243,209,137,.27),0 0 12px rgba(215,170,76,.56);color:#f3d393;font:27px/1 Georgia,serif;cursor:pointer;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,color .2s ease,transform .2s ease;} .modal-close:hover,.modal-close:focus-visible{border-color:#ffe4a2;outline:none;background:linear-gradient(145deg,#385841,#102b20);box-shadow:inset 0 0 0 1px rgba(255,226,159,.58),0 0 20px rgba(240,192,93,.85);color:#fff0c4;transform:scale(1.07);} .modal-close:active,.modal-close.is-clicked{outline:none;} @media (prefers-reduced-motion:reduce){.modal-close{transition:none;}} .visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} .frame-shell{position:relative;height:min(68vh,680px);height:min(78dvh,680px,calc(100dvh - 120px));min-height:0;background:#071d18;} .frame-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#dbbc7e;font-size:14px;letter-spacing:2px;background:#071d18;} .frame-shell.is-loaded .frame-loading{display:none;} #modal-frame{display:block;width:100%;height:100%;border:0;background:#071d18;visibility:hidden;} .frame-shell.is-loaded #modal-frame{visibility:visible;} footer{flex:0 0 auto;padding:9px 16px 12px;text-align:center;color:#c3ae82;font-size:10px;line-height:1.5;letter-spacing:.2px;background:transparent;text-shadow:0 1px 4px #000;} .footer-certification{margin-top:5px;font-size:.95em;} @media (max-width:1300px){:root{--side-gap:max(0px,50vw - 350px);}} @media (max-width:700px){.modal-backdrop{padding:10px;} .service-modal{padding:12px 10px 10px;} .modal-close{top:12px;right:10px;} .modal-heading{margin-bottom:8px;font-size:16px;} .frame-shell{height:min(82vh,720px);height:min(85dvh,720px,calc(100dvh - 86px));} .topbar{z-index:3;flex-basis:54px;} .header-entries{left:8px;width:calc(100% - 132px);gap:6px;} .agent,.member{width:min(132px,calc((100% - 6px) / 2));} .page{width:100%;} .background{transform:scale(1.12);} .background img{object-position:26% center;} .shade{background:linear-gradient( 180deg,rgba(0,15,12,.30),rgba(0,14,11,.78) );} .language-toggle{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:8px;min-width:108px;height:36px;padding:3px 8px;border:1px solid #aa8951;border-radius:6px;background:#122b23;color:#f0d29a;font-size:13px;cursor:pointer;} .language-toggle img{display:block;width:34px;height:23px;object-fit:contain;} .language-arrow{margin-left:auto;transition:transform .2s ease;} .language-toggle[aria-expanded="true"] .language-arrow{transform:rotate(180deg);} .language-toggle:focus-visible,.language-toggle[aria-expanded="true"]{border-color:#f4d38d;box-shadow:0 0 0 2px rgba(220,177,94,.35);} .languages{top:48px;right:8px;left:auto;display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:min(240px,calc(100vw - 16px));max-width:none;max-height:min(55vh,380px);padding:8px;overflow-y:auto;scrollbar-width:none;border-color:#aa8951;box-shadow:0 12px 28px rgba(0,0,0,.6);} .languages::-webkit-scrollbar{display:none;} .languages.is-open{display:grid;} .languages button{width:100%;height:40px;justify-content:center;padding:5px;} .content{justify-content:center;width:min(100% - 32px,400px);margin-inline:auto;padding:clamp(6px,3vh,24px) 0;} .login{width:min(100%,360px);} footer{padding-inline:8px;padding-bottom:13px;line-height:1.5;font-size:clamp(7px,2.5vw,11px);letter-spacing:0;} footer>div{white-space:nowrap;}} @media (max-width:400px){.login{padding:18px 21px 24px;}} @media (max-height:650px){.login{padding-top:12px;padding-bottom:13px;} .brand-image{width:170px;margin-bottom:8px;} .entry-buttons{gap:5px;} .entry-button{min-height:38px;} footer{padding-top:4px;padding-bottom:5px;} .footer-certification{margin-top:2px;}} @media (max-width:360px){.agent,.member{font-size:11px;letter-spacing:0;} .language-toggle{min-width:102px;padding-inline:4px;gap:4px;}} html:not([lang^="zh"]) .agent,html:not([lang^="zh"]) .member{font-size:10px;letter-spacing:0;text-align:center;} html:not([lang^="zh"]) .entry-button{font-size:clamp(12px,1.5vw,16px);letter-spacing:.3px;text-align:center;padding-inline:5px;} html:not([lang^="zh"]) .language-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} html:not([lang^="zh"]) .modal-heading{overflow-wrap:anywhere;} @media (max-width:700px){html:not([lang^="zh"]) footer>div{white-space:normal;}}