資料提交成功！
您的個人建檔資料已順利傳送至 Google 表單後台資料庫，校務人員將盡速為您開通相關權限與帳號。
;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.14;
pointer-events: none;
z-index: 0;
transition: opacity 0.3s ease;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.04));
}
.side-watermark-left { right: calc(50% + 360px); }
.side-watermark-right { left: calc(50% + 360px); }
@media (max-width: 1200px) {
.side-watermark {
width: clamp(150px, 15vw, 220px);
height: clamp(150px, 15vw, 220px);
opacity: 0.10;
}
.side-watermark-left { right: calc(50% + 350px); }
.side-watermark-right { left: calc(50% + 350px); }
}
@media (max-width: 1000px) {
.side-watermark { display: none; }
}
.container {
max-width: 680px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.top-nav-bar {
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.back-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 18px;
font-size: 0.9rem;
font-weight: 600;
color: var(--primary);
background: #ffffff;
border: 1.5px solid var(--primary-border);
border-radius: var(--radius-sm);
text-decoration: none;
box-shadow: var(--shadow-sm);
transition: all 0.2s ease;
}
.back-btn:hover {
background: var(--primary-light);
transform: translateY(-1px);
}
.header-card {
background: var(--bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
box-shadow: var(--shadow-md);
overflow: hidden;
margin-bottom: 24px;
position: relative;
}
.header-card::before {
content: '';
display: block;
height: 9px;
background: linear-gradient(90deg, #00876c, #0d9488, #0284c7);
}
.header-content {
padding: 28px 32px;
}
.school-branding {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 14px;
}
.header-logo {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: contain;
box-shadow: 0 2px 6px rgba(0, 135, 108, 0.2);
border: 2px solid #ffffff;
flex-shrink: 0;
background: #ffffff;
}
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--primary-light);
color: var(--primary);
font-size: 0.85rem;
font-weight: 600;
padding: 4px 12px;
border-radius: 9999px;
border: 1px solid var(--primary-border);
}
.header-content h1 {
font-size: 1.62rem;
font-weight: 700;
color: #0f172a;
letter-spacing: -0.02em;
margin-bottom: 8px;
line-height: 1.35;
}
.header-content p {
color: var(--text-muted);
font-size: 0.95rem;
}
.form-meta {
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.85rem;
color: var(--text-light);
}
.form-meta span.required-hint {
color: var(--error-color);
font-weight: 500;
}
.form-card {
background: var(--bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
box-shadow: var(--shadow-md);
padding: 32px;
margin-bottom: 24px;
}
.field-group {
margin-bottom: 26px;
position: relative;
}
.field-group:last-child {
margin-bottom: 0;
}
.field-label {
display: block;
font-size: 0.98rem;
font-weight: 600;
color: #334155;
margin-bottom: 8px;
}
.field-label .required-star {
color: var(--error-color);
margin-left: 4px;
}
.field-label .field-hint {
display: block;
font-size: 0.84rem;
font-weight: 400;
color: var(--text-muted);
margin-top: 3px;
}
.form-control {
width: 100%;
padding: 11px 15px;
font-size: 0.95rem;
color: var(--text-main);
background-color: #fff;
border: 1.5px solid var(--border-color);
border-radius: var(--radius-sm);
transition: all 0.2s ease-in-out;
outline: none;
font-family: inherit;
}
.form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(0, 135, 108, 0.18);
}
.form-control::placeholder {
color: var(--text-light);
}
textarea.form-control {
min-height: 90px;
resize: vertical;
}
select.form-control {
appearance: none;
background-image: url()
雲林縣褒忠鄉褒忠國民小學
褒忠國小雲端校務系統新進教師建檔資料
歡迎加入褒忠國小團隊！請填寫以下個人基本資料，以利系統為您建立校務帳號。
歡迎加入褒忠國小團隊！請填寫以下個人基本資料，以利系統為您建立校務帳號。
您的個人建檔資料已順利傳送至 Google 表單後台資料庫，校務人員將盡速為您開通相關權限與帳號。