:root { color-scheme: light; }
* { box-sizing: border-box; }
body.community-admin-login-page { min-width:320px; min-height:100vh; margin:0; overflow-x:hidden; color:#173f79; font-family:"Microsoft JhengHei","Noto Sans TC",sans-serif; background:#d9f6ff url('/images/community/admin-login-v1/03_background/page_background.jpg') center/cover fixed no-repeat; }
body.community-admin-login-page *, body.community-admin-login-page *::before, body.community-admin-login-page *::after { box-sizing:border-box; }
.community-admin-login { position:relative; display:grid; grid-template-columns:minmax(0,1fr); width:100%; min-height:100vh; place-items:center; padding:34px 24px; }
.community-admin-login__brand { position:absolute; top:24px; left:clamp(24px,5vw,86px); display:block; width:clamp(190px,15vw,260px); }
.community-admin-login__brand img { display:block; width:100%; height:auto; }
.community-admin-login__card { position:relative; display:grid; grid-template-columns:minmax(330px,470px) minmax(250px,340px); align-items:end; width:min(860px,calc(100vw - 48px)); min-width:0; min-height:570px; padding:64px 62px 54px; background:url('/images/community/admin-login-v1/04_login_card/login_card_background.png') center/100% 100% no-repeat; filter:drop-shadow(0 20px 36px rgba(19,77,157,.2)); }
.community-admin-login__form-wrap { position:relative; z-index:2; min-width:0; align-self:center; }
.community-admin-login__title { display:block; width:min(100%,340px); height:auto; margin-bottom:7px; }
.community-admin-login__form-wrap > p { margin:0 0 18px; color:#5a7ea7; font-size:.9rem; font-weight:700; }
.community-admin-login__guide { align-self:end; justify-self:end; width:100%; max-height:460px; object-fit:contain; object-position:right bottom; }
.community-admin-login__mascots { position:absolute; z-index:1; right:28px; bottom:22px; width:138px; height:auto; }
.community-admin-login__form { display:grid; min-width:0; gap:13px; }
.community-admin-login__form label { display:grid; gap:5px; color:#184b8c; font-size:.88rem; font-weight:900; }
.community-admin-login__form input { width:100%; min-width:0; min-height:47px; padding:10px 16px; border:1px solid transparent; border-radius:14px; outline:0; color:#214d83; background:#fff url('/images/community/admin-login-v1/05_form_fields/input_normal.png') center/100% 100% no-repeat; font:inherit; font-weight:700; }
.community-admin-login__form input:focus { background-image:url('/images/community/admin-login-v1/05_form_fields/input_focus.png'); box-shadow:0 0 0 3px rgba(75,176,255,.22); }
.community-admin-login__form input.input-validation-error { background-image:url('/images/community/admin-login-v1/05_form_fields/input_error.png'); }
.community-admin-login__form label > span[data-valmsg-for] { min-height:14px; color:#d83f66; font-size:.75rem; }
.field-validation-error { display:block; margin-top:.4rem; color:#c6284f; font-weight:700; }
.community-admin-login__form input.input-validation-error { border-color:#ef4775 !important; box-shadow:0 0 0 3px rgba(239,71,117,.14); }
.community-admin-login__captcha-row { display:grid; grid-template-columns:122px 38px minmax(0,1fr); gap:7px; align-items:center; }
.community-admin-login__captcha-row > img { display:block; width:122px; height:42px; border-radius:12px; background:url('/images/community/admin-login-v1/05_form_fields/captcha_display_background.png') center/100% 100% no-repeat; }
.community-admin-login__captcha-row button { display:grid; width:38px; height:38px; place-items:center; padding:0; border:0; border-radius:10px; background:transparent; cursor:pointer; }
.community-admin-login__captcha-row button img { display:block; width:100%; height:100%; object-fit:contain; }
.community-admin-login__captcha-row input { min-height:42px; padding-inline:11px; background-image:url('/images/community/admin-login-v1/05_form_fields/captcha_input_normal.png'); }
.community-admin-login__captcha-row input:focus { background-image:url('/images/community/admin-login-v1/05_form_fields/captcha_input_focus.png'); }
.community-admin-login__captcha-row input.input-validation-error { background-image:url('/images/community/admin-login-v1/05_form_fields/captcha_input_error.png'); }
.community-admin-login__error:empty { display:none; }
.community-admin-login__error { margin:0; padding:10px 14px; border-radius:12px; color:#a7254e; background:url('/images/community/admin-login-v1/04_login_card/error_message_background.png') center/100% 100% no-repeat; font-weight:900; }
.community-admin-login__submit,.community-admin-login__back { display:block; width:100%; min-height:54px; border:0; color:transparent; background:center/100% 100% no-repeat; cursor:pointer; text-decoration:none; }
.community-admin-login__submit { background-image:url('/images/community/admin-login-v1/06_buttons/button_login.png'); }
.community-admin-login__submit:hover,.community-admin-login__submit:focus-visible { background-image:url('/images/community/admin-login-v1/06_buttons/button_login_hover.png'); outline:0; }
.community-admin-login__submit:disabled { background-image:url('/images/community/admin-login-v1/06_buttons/button_login_disabled.png'); cursor:not-allowed; }
.community-admin-login__back { min-height:48px; background-image:url('/images/community/admin-login-v1/06_buttons/button_back_home.png'); }
.community-admin-login__back:hover,.community-admin-login__back:focus-visible { background-image:url('/images/community/admin-login-v1/06_buttons/button_back_home_hover.png'); outline:0; }
.community-admin-login__submit span,.community-admin-login__back span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.community-admin-login__security { margin:14px 0 0; padding:9px 13px; border-radius:12px; color:#456b98; background:url('/images/community/admin-login-v1/04_login_card/security_note_background.png') center/100% 100% no-repeat; font-size:.73rem; font-weight:700; }
@media (max-width:720px) { body.community-admin-login-page { background-image:url('/images/community/admin-login-v1/03_background/page_background_mobile.jpg'); background-attachment:scroll; }.community-admin-login { align-items:start; padding:106px 14px 28px; }.community-admin-login__brand { top:18px; left:50%; width:194px; transform:translateX(-50%); }.community-admin-login__card { grid-template-columns:minmax(0,1fr); width:calc(100vw - 28px); min-height:0; padding:48px 30px 35px; background-size:100% 100%; }.community-admin-login__guide { display:none; }.community-admin-login__mascots { right:18px; bottom:18px; width:94px; opacity:.45; }.community-admin-login__form-wrap { padding-right:0; }.community-admin-login__title { width:290px; max-width:100%; }.community-admin-login__captcha-row { grid-template-columns:104px 36px minmax(0,1fr); }.community-admin-login__captcha-row > img { width:104px; } }