.loader--snake{width: 1.25em;height: 1.25em;border-radius: 50%;transform: translate(-4.125em);box-shadow: 1.375em 0em #debf23, 1.375em 0em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 2.75em 0.29721em #b8b64c, 2.75em -0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 4.125em 0.18368em #92ae75, 4.125em -0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 5.5em -0.18368em #6ca59d, 5.5em 0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 6.875em -0.29721em #469cc6, 6.875em 0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52);animation: snake 2s linear infinite;position: absolute;right: 3em}.login_err_msg{margin-top: 10px;color:#F00;background-color:#000;font-size:1em;position:absolute;bottom:0px;width:100%;text-align:center;padding: 5px 0px 5px 0px}.login_form input{width: 60%;padding: 0.5rem;border-radius: 5px;border: 1px solid #ced4da;font-size: 1rem;box-sizing: border-box}@keyframes snake{ 0%{ box-shadow: 1.375em 0em #debf23, 1.375em 0em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 2.75em 0.29721em #b8b64c, 2.75em -0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 4.125em 0.18368em #92ae75, 4.125em -0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 5.5em -0.18368em #6ca59d, 5.5em 0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 6.875em -0.29721em #469cc6, 6.875em 0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52)} 20%{ box-shadow: 1.375em 0.29721em #b8b64c, 1.375em -0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 2.75em 0.18368em #92ae75, 2.75em -0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 4.125em -0.18368em #6ca59d, 4.125em 0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 5.5em -0.29721em #469cc6, 5.5em 0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 6.875em 0.0em #debf23, 6.875em 0.0em 0.625em -0.3125em rgba(0, 0, 0, 0.52)} 40%{ box-shadow: 1.375em 0.18368em #92ae75, 1.375em -0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 2.75em -0.18368em #6ca59d, 2.75em 0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 4.125em -0.29721em #469cc6, 4.125em 0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 5.5em 0.0em #debf23, 5.5em 0.0em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 6.875em 0.29721em #b8b64c, 6.875em -0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52)} 60%{ box-shadow: 1.375em -0.18368em #6ca59d, 1.375em 0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 2.75em -0.29721em #469cc6, 2.75em 0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 4.125em 0.0em #debf23, 4.125em 0.0em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 5.5em 0.29721em #b8b64c, 5.5em -0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 6.875em 0.18368em #92ae75, 6.875em -0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52)} 80%{ box-shadow: 1.375em -0.29721em #469cc6, 1.375em 0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 2.75em 0.0em #debf23, 2.75em 0.0em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 4.125em 0.29721em #b8b64c, 4.125em -0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 5.5em 0.18368em #92ae75, 5.5em -0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 6.875em -0.18368em #6ca59d, 6.875em 0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52)} 100%{ box-shadow: 1.375em 0.0em #debf23, 1.375em 0.0em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 2.75em 0.29721em #b8b64c, 2.75em -0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 4.125em 0.18368em #92ae75, 4.125em -0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 5.5em -0.18368em #6ca59d, 5.5em 0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 6.875em -0.29721em #469cc6, 6.875em 0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52)}}


	.login_bg
	{--input-gap: 8px;--gap-default: calc( var(--input-gap) * 2 );--form-grid-template-col: auto 1fr;--form-label-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;width: 100%;min-height: 100vh;padding: var(--gap-default);}

	.login_box
	{display: grid;gap: var(--gap-default);width: 100%;max-width: 500px;height: auto;margin: 0;padding: var(--gap-default);box-sizing: border-box;background-color: #f1f3fd;container-type: inline-size;h1{margin: 0} .flex-captcha{max-width: 100%;} @container ( width < 400px ){.login_form{--form-grid-template-col: 1fr;--form-label-m: 0 auto 0 0;--form-input-m: 0 var(--gap-default); &>label{text-align: left;}}.flex-captcha{flex-wrap: wrap;width: 100%;gap: var(--input-gap) 0;span{width: 100%}}} .password-group{width: 100%;}}

	.login_form
	{display: grid;grid-template-columns: var(--form-grid-template-col);gap: calc( var(--input-gap) * 1.5 ) var(--input-gap);width: 90%;padding-inline: var(--input-gap);box-sizing: border-box;br{display: none}&>label{ width: inherit; text-align: right; align-content: var( --form-label-align );margin: var(--form-label-m, var(--input-gap) auto)}&>input{margin-block: var(--form-input-m, 0);width: 100%}}

	.flex-captcha
	{display: flex; width: fit-content;grid-column: 1 / -1;justify-content: center;span{align-self: center;padding-right: var(--input-gap, 0px)}img{height: calc(1lh + var(--input-gap, 0px) * 2)}input{width: calc( 8em + var(--input-gap, 0px) * 2 );flex-grow: 1} &~*{grid-column: 1 / -1;}}

	.login_err_msg
	{position: static;margin: 0 -1rem -1rem; width: calc(100% + 2rem);}
	
	#waitting_login{margin: 0;animation: waitting_login .5s linear;transform-origin: top center;.loader--snake{position: static;margin-inline: auto;margin-bottom: 2rem;}}@keyframes waitting_login{0%{max-height: 0%;scale: 0;}100%{max-height: 100%;scale: 1;}}


	
	#login_btn
	{grid-column: 1 / -1;}

	

    .refresh_sec { cursor: pointer; margin-left: 5px; margin-right: 5px;}
	.sec_img {
		height: 2.5rem;
		margin-right: 0rem;
		border-radius: 5px;
		cursor: pointer;
	}



    :root /* 全站可用css變數 */
    {
        --input-show-password: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 40"><path d="M61.9,19.3C58.2,8.2,45.5.4,31,.4S3.8,8.2.1,19.3c-.1.5-.1.9,0,1.4,3.7,11.1,16.4,18.9,30.9,18.9s27.2-7.8,30.9-18.9c.1-.5.1-.9,0-1.4ZM31,35.1c-12.3,0-23-6.2-26.4-15.1,2.5-6.5,8.9-11.6,16.9-13.8-.3.2-.6.5-.8.8-.7.7-1.3,1.5-1.9,2.3.3,0,.7-.1,1-.1,2.3,0,4.1,1.8,4.1,4.1s-1.8,4.1-4.1,4.1-2.6-.7-3.3-1.7c-.5,4.3.9,8.8,4.2,12,5.7,5.7,15,5.7,20.7,0,5.7-5.7,5.7-15,0-20.7-.3-.3-.6-.5-.8-.8,8.1,2.3,14.5,7.3,16.9,13.8-3.4,8.9-14.1,15.1-26.4,15.1Z"/></svg>');
        --input-show-password-text: '顯示密碼';
        --input-hide-password: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 40"><path d="M61.2329723,6.5900054c-.7523171-.4543947-1.7250975-.2127379-2.1774133.5390479-5.9564992,9.8713955-16.8641869,15.8702377-28.3548276,15.6399516-11.5340199-.2230699-22.1577074-6.6349781-27.7254012-16.7325328-.4228942-.7662459-1.387418-1.047127-2.1547016-.6226898C.0533448,5.8371811-.2254593,6.8017047.1974069,7.5689885c1.641003,2.9759074,3.6923566,5.6487521,6.0452552,7.9882827l-4.3377066,4.3377875c-.6196268.6196005-.6196268,1.6233743,0,2.2429747.3098001.3098008.7156503.4646996,1.121474.4646996.4058504,0,.8117006-.1549009,1.1215006-.4647006l4.4447812-4.4447818c2.6739891,2.2222045,5.6559413,4.0474527,8.8549183,5.4083995l-3.3069576,5.7746265c-.4352756.7600413-.1719421,1.7286914.5880982,2.1645004.2488765.1425182.5194487.2096226.7869095.2096226.5504187,0,1.0848324-.2860481,1.3780968-.7982541l3.4667313-6.0535639c.0344583-.0601542.057119-.123425.0829226-.1858953,2.8781029.9301997,5.8884115,1.4966215,8.9705683,1.6639031v7.3214432c0,.8757157.7099781,1.5862017,1.5862017,1.5862017.87625,0,1.5862017-.710484,1.5862017-1.5862017v-7.2917511c3.1006892-.1110159,6.138961-.6270819,9.0514389-1.5135306.0010402.0019443.0014912.0040206.0025842.0058308l3.466196,6.0535639c.2932888.512206.8277065.7982541,1.3781211.7982541.2669265,0,.5380096-.0671044.7863752-.2096226.7605736-.4358069,1.0239041-1.4044591.5886335-2.1645004l-3.1753614-5.5457523c3.2519698-1.3209239,6.2887504-3.1287571,9.0217996-5.3392178l4.146805,4.1467248c.3098018.3098008.7156504.4646996,1.1214991.4646996.4058243,0,.8116729-.1549009,1.1214787-.4647006.6195954-.6196005.6195954-1.6233743,0-2.2429747l-4.0001627-4.0001068c2.1667108-2.0987795,4.0820167-4.4862161,5.6757008-7.1280645.4528238-.7497354.2116989-1.724591-.5385419-2.1768821l.0000041.0000032Z"/></svg>');
        --input-hide-password-text: '關閉顯示密碼';
    }

    .password-group
    { --show-password: 25px; --input-mb: 0.5rem; position: relative; width: fit-content; input { &:is([type="password"], [type="text"]) { width: 100%; border: 1px solid #ccc; border-radius: 0.25rem; padding-block: var(--input-mb); padding-inline: var(--input-mb) calc( var(--input-mb) * 2 + var(--show-password) ); box-sizing: border-box; &:is(:hover, :focus) { border-color: black;}}}}

    .show-password
    { border: none !important; appearance: none; position: absolute; top: 50%; right: 0; translate: 0 -50%; width: 25px !important; aspect-ratio: 1; margin: 0 var(--input-mb); background: no-repeat center / contain var(--password-status, var(--input-hide-password)); &[value]{ --this-content: attr(value);} &:checked{ --password-status: var(--input-show-password); --this-content: var(--input-hide-password-text);} &:hover { --this-opacity: 1; --this-translate-y: -100%;} &::before, &::after { position: absolute; left: 50%; translate: -50% var(--this-translate-y, 0%); background-color: black; opacity: var(--this-opacity, 0); pointer-events: none; transition: opacity .25s, translate .25s;} &::before{ content: var( --this-content, var(--input-show-password-text)); top: -0.2em; font-size: 12px; text-wrap: nowrap; color: white; padding: 0.25rem 0.5rem; border-radius: 0.25rem;} &::after{ content: ''; top: 0.25em; width: 1em; aspect-ratio: 2/1; clip-path: polygon(0 0, 100% 0, 50% 100%);}}

    .flex-captcha
    {  --input-gap: 0.5rem; display: flex; img{ height: calc( 1lh + 1rem);} input { padding: 0.5rem; border: 1px solid #ccc; &:is(:hover, :focus) { border-color: black;}}}