* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-red: #e57373; /* 更柔和的紅色 */
--primary-black: #212121;
--primary-white: #ffffff;
--accent-beige: #f5f5dc;
--light-red: #fce4ec; /* 更溫和的淺粉色 */
--extra-light-red: #fdf2f3; /* 極淺的背景色 */
--dark-red: #d32f2f; /* 原本的主紅色變為深紅色 */
--medium-red: #ef5350; /* 新增中間色調 */
--gray-light: #f8f9fa;
--gray-medium: #e0e0e0;
--gray-dark: #6c757d;
/* 統一的字體系統 */
/* 字體族 */
--font-family-base: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
--font-family-serif: 'Noto Serif TC', serif;
/* 字體大小階層（基於 16px = 1rem）*/
--font-size-xs: 0.75rem; /* 12px - 小標籤、註解 */
--font-size-sm: 0.875rem; /* 14px - 次要文字 */
--font-size-base: 1rem; /* 16px - 基礎內文 */
--font-size-md: 1.125rem; /* 18px - 強調內文 */
--font-size-lg: 1.25rem; /* 20px - 小標題 */
--font-size-xl: 1.5rem; /* 24px - 中標題 */
--font-size-2xl: 1.875rem; /* 30px - 大標題 */
--font-size-3xl: 2.25rem; /* 36px - 超大標題 */
--font-size-4xl: 3rem; /* 48px - Hero 標題 */
--font-size-5xl: 3.75rem; /* 60px - 超大 Hero 標題 */
/* 行高系統 */
--line-height-tight: 1.2; /* 標題用 */
--line-height-normal: 1.5; /* 一般內文 */
--line-height-relaxed: 1.75; /* 舒適閱讀 */
--line-height-loose: 2; /* 寬鬆間距（特殊情況） */
/* 字重系統 */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* 字距系統 */
--letter-spacing-tight: -0.02em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.05em;
--letter-spacing-wider: 0.1em;
/* 統一的動畫系統 */
--transition-fast: 0.2s ease;
--transition-medium: 0.3s ease;
--transition-slow: 0.5s ease;
--transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
/* 統一的陰影系統 */
--shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
--shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
--shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.2);
--shadow-red: 0 4px 20px rgba(229, 115, 115, 0.25); /* 柔和紅色陰影 */
--shadow-medium-red: 0 4px 16px rgba(239, 83, 80, 0.2); /* 中等紅色陰影 */
/* 統一的變換系統 */
--transform-hover: translateY(-3px);
--transform-scale: scale(1.05);
--transform-scale-small: scale(1.02);
}
body {
font-family: var(--font-family-base);
line-height: var(--line-height-normal);
color: var(--primary-black);
background-color: var(--primary-white);
font-size: var(--font-size-base); /* 基礎字體大小 16px */
}
/* 響應式字體大小和行距 */
p {
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
margin-bottom: 1.2rem;
}
span, div, li, td, th, label, input, textarea, select {
font-size: 1em; /* 基礎字體大小 */
}
li {
line-height: 1.7;
margin-bottom: 0.5rem;
}
ul, ol {
margin-bottom: 1.5rem;
padding-left: 1.5rem;
}
ul li, ol li {
margin-bottom: 0.6rem;
}
/* 手機版字體優化 */
@media (max-width: 768px) {
p {
font-size: 0.95em;
line-height: 1.7;
margin-bottom: 1rem;
}
span, div, li, td, th, label, input, textarea, select {
font-size: 0.95em; /* 手機版稍微縮小 */
}
li {
line-height: 1.7;
margin-bottom: 0.5rem;
}
ul, ol {
margin-bottom: 1.2rem;
padding-left: 1.2rem;
}
ul li, ol li {
margin-bottom: 0.5rem;
}
}
@media (max-width: 480px) {
p {
font-size: 0.9em;
line-height: 1.7;
margin-bottom: 0.9rem;
}
span, div, li, td, th, label, input, textarea, select {
font-size: 0.9em; /* 小螢幕進一步縮小 */
}
li {
line-height: 1.7;
margin-bottom: 0.4rem;
}
ul, ol {
margin-bottom: 1rem;
padding-left: 1rem;
}
ul li, ol li {
margin-bottom: 0.4rem;
}
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* Header */
header {
background: linear-gradient(135deg, var(--primary-red) 0%, var(--medium-red) 50%, var(--dark-red) 100%);
color: var(--primary-white);
padding: 1rem 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: var(--shadow-red);
transition: all var(--transition-medium);
}
/* 手機版header調整 */
@media (max-width: 768px) {
header {
z-index: 1001; /* 確保header在Hero Section之上 */
}
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 15px;
}
.logo-link {
display: flex;
align-items: center;
gap: 15px;
text-decoration: none;
color: inherit;
transition: all var(--transition-medium);
}
.logo-link:hover {
transform: var(--transform-scale-small);
text-decoration: none;
color: inherit;
}
.logo-image {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.logo-image img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 0;
transition: transform var(--transition-medium);
max-width: 100%;
max-height: 100%;
}
.logo-link:hover .logo-image img {
transform: var(--transform-scale);
}
.logo-text h1 {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
font-family: var(--font-family-serif);
color: var(--primary-white);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.logo-text .subtitle {
font-size: 0.8rem;
color: var(--primary-white);
margin-top: 0.2rem;
font-weight: 500;
}
nav ul {
display: flex;
list-style: none;
gap: 2rem;
padding: 0;
margin: 0;
}
nav li {
list-style: none;
}
nav li::before,
nav li::after {
display: none !important;
content: none !important;
}
nav a {
color: var(--primary-white);
text-decoration: none;
font-weight: 500;
transition: all var(--transition-medium);
position: relative;
padding: 0.5rem 0;
line-height: 2;
}
nav a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--primary-white);
transition: width var(--transition-medium);
}
nav a:hover::after {
width: 100%;
}
/* 桌面版隱藏漢堡選單按鈕 */
@media (min-width: 769px) {
.mobile-menu-toggle {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
}
/* Hero Section */
.hero {
height: 100vh;
display: flex;
align-items: center;
text-align: center;
color: var(--primary-white);
margin-top: 80px;
position: relative;
overflow: hidden;
/* 確保背景完全填滿，消除任何邊框或間隙 */
margin: 0;
padding: 0;
border: none;
outline: none;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
/* 確保背景完全填滿，消除任何間隙 */
margin: 0;
padding: 0;
border: none;
outline: none;
/* 優化裁切容器 */
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hero-bg-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
filter: brightness(0.9) contrast(1.2);
/* 確保圖片完全填滿，消除任何邊框或間隙 */
margin: 0;
padding: 0;
border: none;
outline: none;
position: absolute;
top: 0;
left: 0;
/* 優化裁切效果 */
object-fit: cover;
object-position: center center;
min-width: 100%;
min-height: 100%;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(212, 47, 47, 0.1), rgba(183, 28, 28, 0.1));
z-index: 2;
}
.hero-content {
position: relative;
z-index: 3;
}
.hero-content h2 {
font-size: var(--font-size-5xl);
margin-bottom: 1.8rem;
font-weight: var(--font-weight-bold);
font-family: var(--font-family-serif);
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-wider);
}
.hero-content p {
font-size: var(--font-size-xl);
margin-bottom: 2.8rem;
opacity: 0.95;
max-width: 50em;
margin-left: auto;
margin-right: auto;
line-height: var(--line-height-relaxed);
font-weight: var(--font-weight-normal);
letter-spacing: var(--letter-spacing-normal);
}
.cta-button {
display: inline-block;
background: var(--primary-white);
color: var(--primary-red);
padding: 1.2rem 2.5rem;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
font-size: 1.1rem;
transition: all var(--transition-medium);
box-shadow: var(--shadow-light);
border: 2px solid var(--primary-white);
}
.cta-button:hover {
background: var(--medium-red);
color: var(--primary-white);
transform: var(--transform-hover);
box-shadow: var(--shadow-medium-red);
border-color: var(--medium-red);
}
/* Sections */
section {
padding: 6rem 0;
margin: 0;
}
/* 確保區塊內容有合適的間距 */
section .container {
padding-top: 2rem;
padding-bottom: 2rem;
}
/* 統一的動畫樣式 - 簡化版本 */
.section-title,
.section-subtitle {
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.events-grid,
.services-grid,
.contact-content {
opacity: 1;
transform: translateY(0);
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* 統一的按鈕動畫 */
.btn, .cta-button, .event-register, .about-link {
transition: all var(--transition-medium);
}
.btn:hover, .cta-button:hover, .event-register:hover, .about-link:hover {
transform: var(--transform-hover);
}
/* 分頁按鈕特殊處理 */
.tab-button {
transition: all var(--transition-medium);
}
.tab-button:hover {
transform: var(--transform-hover);
}
/* 統一的卡片動畫 */
.card, .service-card, .event-card, .leader-card {
transition: all var(--transition-medium);
}
.card:hover, .service-card:hover, .event-card:hover, .leader-card:hover {
transform: var(--transform-hover);
box-shadow: var(--shadow-medium);
}
/* 滾動指示器動畫 */
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateX(-50%) translateY(0);
}
40% {
transform: translateX(-50%) translateY(-10px);
}
60% {
transform: translateX(-50%) translateY(-5px);
}
}
.scroll-indicator {
transition: opacity var(--transition-medium);
}
.scroll-arrow {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 12px solid white;
margin: 0 auto 0.5rem;
}
.scroll-text {
font-size: 0.9rem;
opacity: 0.9;
font-weight: 500;
}
.section-title {
text-align: center;
font-size: var(--font-size-4xl);
margin-bottom: 2rem;
margin-top: 1rem;
color: var(--primary-red);
position: relative;
font-family: var(--font-family-serif);
line-height: var(--line-height-tight);
font-weight: var(--font-weight-bold);
letter-spacing: var(--letter-spacing-wide);
}
.section-subtitle {
text-align: center;
font-size: var(--font-size-lg);
margin-bottom: 3rem;
color: var(--primary-black);
font-weight: var(--font-weight-medium);
opacity: 0.8;
line-height: var(--line-height-normal);
margin-top: 1rem;
}
.section-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: var(--primary-red);
border-radius: 2px;
}
.section-title::before {
content: '';
position: absolute;
bottom: -25px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: var(--primary-black);
border-radius: 1px;
}
/* About Section */
.about {
background: var(--gray-light);
position: relative;
}
/* About Tabs */
.about-tabs {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 1.5rem;
margin-top: 0;
flex-wrap: wrap;
}
/* About Page Specific Styles */
.about-page {
background: var(--gray-light);
padding: 6rem 0;
min-height: 80vh;
}
.mission-list {
display: grid;
gap: 1.2rem;
margin-top: 1rem;
}
.mission-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.2rem;
background: linear-gradient(135deg, #ffffff 0%, #fef5f5 100%);
border-radius: 12px;
box-shadow: 0 2px 16px rgba(211, 47, 47, 0.08);
transition: all 0.3s ease;
border: none;
}
.mission-item:hover {
transform: translateY(-3px);
box-shadow: 0 4px 20px rgba(211, 47, 47, 0.12);
background: linear-gradient(135deg, #ffffff 0%, #fef5f5 100%);
}
.mission-icon {
font-size: 1.15rem;
color: var(--primary-red);
background: var(--light-red);
padding: 0.6rem 1.2rem;
border-radius: 20px;
min-width: 70px;
text-align: center;
line-height: 1;
font-weight: 600;
display: inline-block;
}
.mission-content h4 {
color: var(--primary-red);
margin-bottom: 1rem;
font-family: var(--font-family-serif);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
letter-spacing: var(--letter-spacing-wide);
line-height: var(--line-height-tight);
}
.mission-content p {
color: var(--primary-black);
margin: 0;
line-height: var(--line-height-relaxed);
font-size: var(--font-size-xl);
letter-spacing: var(--letter-spacing-normal);
}
.org-description {
margin-top: 3rem;
padding: 2rem;
background: var(--primary-white);
border-radius: 16px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.org-description h4 {
color: var(--primary-red);
margin-bottom: 1.2rem;
font-family: 'Noto Serif TC', serif;
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0.2px;
line-height: 1.3;
}
.org-description p {
color: var(--primary-black);
line-height: 1.7;
font-size: 1.2rem; /* 從1.05rem增加到1.2rem */
letter-spacing: 0.1px;
}
.tab-button {
background: var(--primary-white);
color: var(--primary-black);
border: 2px solid var(--gray-medium);
padding: 1rem 2rem;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Noto Serif TC', serif;
line-height: 2;
}
.tab-button:hover {
border-color: var(--medium-red);
color: var(--medium-red);
transform: translateY(-2px);
box-shadow: var(--shadow-medium-red);
}
.tab-button.active {
background: var(--primary-red);
color: var(--primary-white);
border-color: var(--primary-red);
box-shadow: 0 4px 15px rgba(211, 47, 47, 0.3);
}
/* Tab Content */
.tab-content {
display: none;
animation: fadeIn 0.5s ease-in-out;
}
.tab-content.active {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.about::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(135deg, var(--primary-red) 0%, var(--medium-red) 50%, var(--dark-red) 100%);
/* 移除斜切效果，保持與其他頁面一致 */
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
margin-top: 1rem;
}
.about-link {
display: inline-block;
margin-top: 1.5rem;
padding: 0.8rem 1.5rem;
background: var(--primary-red);
color: var(--primary-white);
text-decoration: none;
border-radius: 25px;
font-weight: 600;
transition: all 0.3s ease;
font-family: 'Noto Serif TC', serif;
}
.about-link:hover {
background: var(--dark-red);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(211, 47, 47, 0.3);
}
.about-text {
text-align: left;
}
.about-text h3 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
margin-top: 0.5rem;
color: var(--primary-red);
font-family: 'Noto Serif TC', serif;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1.2;
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 0 2rem;
text-align: left;
}
.about-text p {
margin-bottom: 1.4rem;
font-size: 1.15rem;
line-height: 1.8;
letter-spacing: 0.1px;
color: var(--primary-black);
text-align: left;
}
.about-image {
background: linear-gradient(135deg, var(--primary-red) 0%, var(--medium-red) 50%, var(--dark-red) 100%);
height: 400px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-white);
font-size: 1.8rem;
text-align: center;
position: relative;
overflow: hidden;
}
.about-image::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
}
.about-logo {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100%;
}
.about-logo-image {
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0,0,0,0.2);
transition: transform var(--transition-medium);
width: 100%;
max-width: 300px;
height: auto;
object-fit: contain;
object-position: center;
display: block;
margin: 0 auto;
}
.about-logo-image:hover {
transform: scale(1.05);
}
.about-logo-title {
font-family: 'Noto Serif TC', serif;
margin-top: 1.5rem;
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-white);
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
line-height: 1.2;
letter-spacing: 0.2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.about-logo-subtitle {
font-size: 1.3rem;
margin-top: 0.8rem;
color: var(--primary-white);
font-weight: 500;
opacity: 0.95;
line-height: 1.3;
letter-spacing: 0.3px;
}
.about-logo-description {
font-size: 1rem;
margin-top: 0.6rem;
color: var(--primary-white);
font-weight: 400;
opacity: 0.9;
line-height: 1.4;
letter-spacing: 0.2px;
}
/* Leadership Section */
.leadership-section {
margin-top: 1rem;
padding-top: 1rem;
border-top: 2px solid var(--gray-medium);
}
.leadership-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 1.5rem;
margin-top: 1rem;
color: var(--primary-red);
font-family: 'Noto Serif TC', serif;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1.2;
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 0 2rem;
position: relative;
}
.leadership-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: var(--primary-red);
border-radius: 2px;
}
.leadership-title::before {
content: '';
position: absolute;
bottom: -25px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: var(--primary-black);
border-radius: 1px;
}
/* 共用介紹文字樣式 - 協會宗旨、歷屆理事長和組織架構 */
.mission-text,
.leadership-intro,
.organization-intro,
p.leadership-intro,
p.organization-intro,
.leadership-section p.leadership-intro,
.organization-section p.organization-intro {
text-align: left !important;
font-size: 1.25rem !important;
line-height: 1.9 !important;
color: #555 !important;
margin-bottom: 0.8rem !important;
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 0 2rem;
}
.leadership-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
/* 舊的 leader-card 樣式已移除，使用新的左右排版樣式 */
.leader-avatar {
width: 300px;
height: 375px;
min-width: 300px;
max-width: 300px;
flex-shrink: 0;
margin: 0;
border-radius: 16px;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 4px solid #8B1A1A;
box-shadow: 0 4px 12px rgba(139, 26, 26, 0.25),
0 0 0 1px rgba(139, 26, 26, 0.1);
transition: all 0.3s ease;
padding: 0;
position: relative;
}
.leader-avatar:hover {
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(139, 26, 26, 0.35),
0 0 0 1px rgba(139, 26, 26, 0.15);
border-color: #6B1414;
}
.leader-photo {
width: calc(100% + 2px);
height: calc(100% + 2px);
object-fit: cover;
object-position: center center;
display: block;
transition: transform 0.3s ease;
border-radius: 16px;
position: absolute;
top: -1px;
left: -1px;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
}
.leader-avatar:hover .leader-photo {
transform: scale(1.02);
}
.leader-card.featured .leader-avatar:hover .leader-photo {
transform: scale(1.02);
}
.avatar-placeholder {
color: var(--primary-white);
font-weight: 600;
font-size: 1rem;
}
/* 理事長照片標籤樣式 */
.leader-badge {
position: absolute;
top: 12px;
right: 12px;
z-index: 10;
background: rgba(139, 26, 26, 0.95);
color: #ffffff;
padding: 6px 14px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
0 0 0 2px rgba(255, 255, 255, 0.3);
backdrop-filter: blur(4px);
transition: all 0.3s ease;
pointer-events: none; /* 不阻擋點擊事件 */
}
.leader-badge.current-badge {
background: linear-gradient(135deg, #d32f2f, #b71c1c);
box-shadow: 0 3px 10px rgba(211, 47, 47, 0.4),
0 0 0 2px rgba(255, 255, 255, 0.4);
}
.leader-badge.past-badge {
background: rgba(139, 26, 26, 0.9);
}
.leader-badge .badge-text {
display: block;
text-align: center;
letter-spacing: 0.5px;
}
.leader-avatar:hover .leader-badge {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4),
0 0 0 2px rgba(255, 255, 255, 0.5);
}
.leader-avatar:hover .leader-badge.current-badge {
box-shadow: 0 4px 14px rgba(211, 47, 47, 0.5),
0 0 0 2px rgba(255, 255, 255, 0.5);
}
.leader-card h4 {
color: var(--primary-red);
font-size: 1.2rem;
margin-bottom: 0.5rem;
font-family: 'Noto Serif TC', serif;
}
.leader-name {
font-size: 1.1rem;
font-weight: 600;
color: var(--primary-black);
margin-bottom: 0.5rem;
}
.leader-subtitle {
color: var(--gray-dark);
margin-bottom: 0.5rem;
font-style: italic;
font-size: 1rem;
}
.leader-title {
font-size: 1.1rem;
color: var(--primary-red);
margin-bottom: 1rem;
font-weight: 500;
}
.leader-desc {
color: var(--primary-black);
line-height: 1.7;
font-size: 1.1rem;
}
/* 理事長特色卡片樣式 - 現任理事長 */
.leader-card.featured {
border: 2px solid rgba(211, 47, 47, 0.3);
box-shadow: 0 4px 20px rgba(211, 47, 47, 0.15);
transform: none;
}
.leader-card.featured:hover {
box-shadow: 0 6px 24px rgba(211, 47, 47, 0.2);
border-color: rgba(211, 47, 47, 0.4);
}
.leader-card.featured .leader-avatar {
width: 320px;
height: 400px;
min-width: 320px;
max-width: 320px;
border: 5px solid #8B1A1A;
box-shadow: 0 6px 16px rgba(139, 26, 26, 0.3),
0 0 0 1px rgba(139, 26, 26, 0.15);
border-radius: 18px;
}
.leader-card.featured .leader-badge {
top: 14px;
right: 14px;
padding: 7px 16px;
font-size: 0.9rem;
}
.leader-card.featured .leader-avatar:hover {
transform: translateY(-4px);
box-shadow: 0 8px 22px rgba(139, 26, 26, 0.4),
0 0 0 1px rgba(139, 26, 26, 0.2);
border-color: #6B1414;
}
.leader-card.featured .leader-photo {
border-radius: 18px;
}
/* 時間軸平滑出現動畫 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 歷屆理事長時間軸樣式 */
.leadership-timeline {
position: relative;
padding: 0.5rem 0;
max-width: 1100px;
margin: 0 auto;
}
.leadership-timeline::before {
display: none;
}
/* 時間軸走過效果 - 已過去的連接線（細線淡色） */
.timeline-item:not(.current)::after {
display: none;
}
/* 時間軸走過效果 - 當前位置及之後的連接線（粗線深色） */
.timeline-item.current::after {
display: none;
}
.timeline-item.current ~ .timeline-item::after {
display: none;
}
/* 當前項目之前的連接線（從上一個項目到當前標記） */
.timeline-item.current::before {
display: none;
}
.timeline-item {
position: relative;
margin-bottom: 1.2rem;
display: flex;
flex-direction: row;
align-items: stretch;
padding-left: 0;
min-height: 320px;
opacity: 0;
animation: fadeInUp 0.6s ease-out forwards;
}
.timeline-item:nth-child(1) {
animation-delay: 0.3s;
}
.timeline-item:nth-child(2) {
animation-delay: 0.5s;
}
.timeline-item:nth-child(3) {
animation-delay: 0.7s;
}
.timeline-item:nth-child(4) {
animation-delay: 0.9s;
}
.timeline-item:nth-child(5) {
animation-delay: 1.1s;
}
.timeline-item:nth-child(n+6) {
animation-delay: 1.3s;
}
.timeline-marker {
display: none;
}
.timeline-item:nth-child(1) .timeline-marker {
animation-delay: 0.4s;
}
.timeline-item:nth-child(2) .timeline-marker {
animation-delay: 0.6s;
}
.timeline-item:nth-child(3) .timeline-marker {
animation-delay: 0.8s;
}
.timeline-item:nth-child(4) .timeline-marker {
animation-delay: 1s;
}
.timeline-item:nth-child(5) .timeline-marker {
animation-delay: 1.2s;
}
.timeline-item:nth-child(n+6) .timeline-marker {
animation-delay: 1.4s;
}
.timeline-marker:hover {
transform: translateX(-50%) scale(1.08);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.2),
0 3px 12px rgba(211, 47, 47, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.timeline-marker.current {
background: linear-gradient(135deg, var(--primary-red), var(--dark-red));
border-color: var(--dark-red);
border-width: 6px;
transform: translateX(-50%) scale(1.12);
box-shadow:
0 0 20px rgba(211, 47, 47, 0.6),
0 4px 20px rgba(211, 47, 47, 0.4),
0 8px 32px rgba(211, 47, 47, 0.3),
inset 0 2px 4px rgba(255, 255, 255, 0.2),
inset 0 -2px 4px rgba(0, 0, 0, 0.1);
}
/* 已過去的標記樣式 */
.timeline-item:not(.current) .timeline-marker {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95),
rgba(248, 248, 248, 0.95));
border-color: rgba(211, 47, 47, 0.35);
border-width: 3px;
box-shadow:
0 2px 10px rgba(0, 0, 0, 0.12),
0 1px 4px rgba(211, 47, 47, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.timeline-item:not(.current) .timeline-marker .marker-icon {
color: rgba(211, 47, 47, 0.5);
}
.timeline-marker.current:hover {
transform: translateX(-50%) scale(1.18);
box-shadow:
0 0 25px rgba(211, 47, 47, 0.7),
0 6px 24px rgba(211, 47, 47, 0.5),
0 12px 40px rgba(211, 47, 47, 0.4),
inset 0 2px 4px rgba(255, 255, 255, 0.3),
inset 0 -2px 4px rgba(0, 0, 0, 0.15);
}
.timeline-marker.founder {
background: var(--dark-red);
border-color: var(--primary-red);
}
.marker-icon {
font-size: 1.2rem;
color: var(--primary-red);
font-weight: 600;
line-height: 1;
text-align: center;
}
.timeline-marker.current .marker-icon,
.timeline-marker.founder .marker-icon {
color: var(--primary-white);
}
.timeline-content {
flex: 1;
margin-left: 0;
max-width: 100%;
text-align: left;
opacity: 0;
animation: fadeInUp 0.6s ease-out forwards;
width: 100%;
}
.timeline-item:nth-child(1) .timeline-content {
animation-delay: 0.5s;
}
.timeline-item:nth-child(2) .timeline-content {
animation-delay: 0.7s;
}
.timeline-item:nth-child(3) .timeline-content {
animation-delay: 0.9s;
}
.timeline-item:nth-child(4) .timeline-content {
animation-delay: 1.1s;
}
.timeline-item:nth-child(5) .timeline-content {
animation-delay: 1.3s;
}
.timeline-item:nth-child(n+6) .timeline-content {
animation-delay: 1.5s;
}
/* 歷屆理事長卡片樣式 - 左右排版 */
.leader-card {
background: var(--primary-white);
padding: 0;
border-radius: 12px;
box-shadow: 0 2px 16px rgba(211, 47, 47, 0.12);
transition: all var(--transition-fast);
border: 1px solid rgba(211, 47, 47, 0.15);
position: relative;
display: flex;
flex-direction: row;
align-items: stretch;
overflow: hidden;
min-height: 320px;
}
.leader-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 24px rgba(211, 47, 47, 0.2);
border-color: rgba(211, 47, 47, 0.3);
}
.leader-card.founder {
background: var(--primary-white);
}
.leader-info {
text-align: left;
flex: 1;
padding: 1.8rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.leader-info h4 {
color: var(--primary-red);
margin-bottom: 0.6rem;
margin-top: 0;
font-family: 'Noto Serif TC', serif;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.5px;
text-align: left;
}
.leader-name {
color: var(--primary-black);
margin-bottom: 0.4rem;
margin-top: 0;
font-weight: 700;
font-size: 1.7rem;
letter-spacing: 0.5px;
text-align: left;
}
.leader-title {
color: #666;
margin-bottom: 0.4rem;
margin-top: 0;
font-weight: 500;
font-size: 1.6rem;
line-height: 1.6;
text-align: left;
}
.leader-period {
color: var(--primary-red);
margin-bottom: 0.8rem;
margin-top: 0;
font-weight: 600;
font-size: 1.55rem;
background: rgba(255, 245, 245, 0.8);
padding: 0.5rem 1.2rem;
border-radius: 20px;
display: inline-block;
box-shadow: 0 2px 8px rgba(211, 47, 47, 0.1);
text-align: left;
}
.leader-desc {
color: var(--primary-black);
line-height: 1.8;
margin-bottom: 0.8rem;
font-size: 1.55rem;
text-align: left;
}
.leader-achievements,
.leader-education,
.leader-specialization,
.leader-experience,
.leader-teaching,
.leader-positions {
background: linear-gradient(135deg, rgba(255, 245, 245, 0.5) 0%, rgba(255, 255, 255, 0.8) 100%);
padding: 0.9rem;
border-radius: 8px;
border: none;
margin-bottom: 0.6rem;
text-align: left;
box-shadow: 0 1px 12px rgba(211, 47, 47, 0.08);
position: relative;
}
.leader-achievements::before,
.leader-education::before,
.leader-specialization::before,
.leader-experience::before,
.leader-teaching::before,
.leader-positions::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--primary-red), var(--medium-red));
border-radius: 8px 0 0 8px;
opacity: 0.6;
}
.leader-achievements h5,
.leader-education h5,
.leader-specialization h5,
.leader-experience h5,
.leader-teaching h5,
.leader-positions h5 {
color: var(--primary-red);
margin-bottom: 0.6rem;
margin-top: 0;
font-size: 1.5rem;
font-weight: 700;
text-align: left;
font-family: 'Noto Serif TC', serif;
padding-bottom: 0.4rem;
border-bottom: 2px solid rgba(211, 47, 47, 0.2);
}
.leader-achievements ul,
.leader-education ul,
.leader-specialization ul,
.leader-experience ul,
.leader-teaching ul {
font-size: 1.6rem;
line-height: 1.5;
color: #444;
text-align: left;
list-style-position: outside;
}
.leader-achievements li,
.leader-education li,
.leader-specialization li,
.leader-experience li,
.leader-teaching li {
margin-bottom: 0.2rem;
}
/* 曾任職務卡片樣式 */
.leader-positions {
background: linear-gradient(135deg, rgba(255, 245, 245, 0.5) 0%, rgba(255, 255, 255, 0.8) 100%);
padding: 0.9rem;
border-radius: 8px;
border: none;
margin-bottom: 0.6rem;
box-shadow: 0 1px 12px rgba(211, 47, 47, 0.08);
position: relative;
}
.leader-positions::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--primary-red), var(--medium-red));
border-radius: 8px 0 0 8px;
opacity: 0.6;
}
.leader-current h5,
.leader-positions h5 {
color: var(--primary-red);
margin-bottom: 0.6rem;
font-size: 1.5rem;
font-weight: 700;
font-family: 'Noto Serif TC', serif;
text-align: left;
padding-bottom: 0.4rem;
border-bottom: 2px solid rgba(211, 47, 47, 0.2);
}
.leader-positions ul {
font-size: 1.6rem;
line-height: 1.5;
color: #444;
text-align: left;
list-style-position: outside;
}
.leader-positions li {
margin-bottom: 0.2rem;
color: #444;
}
.leader-achievements ul,
.leader-education ul,
.leader-specialization ul,
.leader-experience ul,
.leader-teaching ul,
.leader-current ul,
.leader-positions ul {
list-style: none;
padding: 0;
margin: 0 0 0.5rem 0;
}
.leader-achievements li,
.leader-education li,
.leader-specialization li,
.leader-experience li,
.leader-teaching li,
.leader-current li,
.leader-positions li {
color: var(--primary-black);
line-height: 1.4;
margin-bottom: 0.2rem;
padding-left: 1.3rem;
position: relative;
font-size: 1.6rem;
text-align: left;
}
.leader-achievements li::before,
.leader-education li::before,
.leader-specialization li::before,
.leader-experience li::before,
.leader-teaching li::before,
.leader-current li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--primary-red);
font-weight: bold;
}
.leader-positions li::before {
content: '•';
position: absolute;
left: 0;
color: var(--primary-red);
font-weight: bold;
font-size: 1.2rem;
}
/* 現任職務樣式 */
.positions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.position-item {
background: var(--primary-white);
padding: 2rem;
border-radius: 15px;
border: 2px solid var(--gray-medium);
transition: all var(--transition-fast);
position: relative;
}
.position-item:hover {
border-color: var(--primary-red);
transform: translateY(-5px);
box-shadow: var(--shadow-light);
}
.position-item.primary {
border-color: var(--primary-red);
background: linear-gradient(135deg, var(--light-red), var(--primary-white));
box-shadow: var(--shadow-red);
}
.position-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
text-align: center;
}
.position-content h5 {
color: var(--primary-red);
margin-bottom: 0.8rem;
font-family: 'Noto Serif TC', serif;
font-size: 1.1rem;
line-height: 1.4;
}
.position-title {
color: var(--dark-red);
margin-bottom: 0.8rem;
font-weight: 600;
font-size: 1.1rem;
}
.position-desc {
color: var(--primary-black);
line-height: 1.6;
font-size: 1.1rem;
}
/* 理事長詳細資訊樣式 */
.leader-details {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 2px solid var(--gray-medium);
}
.detail-section {
margin-bottom: 1.5rem;
text-align: left;
}
.detail-section h5 {
color: var(--primary-red);
font-size: 1.1rem;
margin-bottom: 0.8rem;
font-family: 'Noto Serif TC', serif;
display: flex;
align-items: center;
gap: 0.5rem;
}
.detail-section p {
color: var(--primary-black);
line-height: 1.6;
margin-bottom: 0.5rem;
font-size: 1.1rem;
}
.detail-section ul {
list-style: none;
padding: 0;
margin: 0;
}
.detail-section li {
color: var(--primary-black);
line-height: 1.6;
margin-bottom: 0.5rem;
font-size: 1.1rem;
padding-left: 1.5rem;
position: relative;
}
.detail-section li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--primary-red);
font-weight: bold;
}
/* 聯絡理事長按鈕樣式 */
.leader-cta {
text-align: center;
margin-top: 1rem;
}
.contact-leader-btn {
display: inline-block;
background: var(--primary-red);
color: var(--primary-white);
padding: 0.8rem 1.5rem;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
font-family: 'Noto Serif TC', serif;
box-shadow: 0 4px 15px rgba(211, 47, 47, 0.3);
}
.contact-leader-btn:hover {
background: var(--dark-red);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(211, 47, 47, 0.4);
}
/* 現任理事長專頁樣式 */
.chairman-page {
background: var(--primary-white);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
margin: 1rem 0;
position: relative;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
border: none;
width: 100%;
}
.chairman-page::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-red), var(--dark-red), var(--primary-red));
}
.chairman-header {
background: linear-gradient(135deg, var(--primary-red) 0%, var(--medium-red) 50%, var(--dark-red) 100%);
color: var(--primary-white);
padding: 2rem 1.5rem;
text-align: left;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
gap: 2.5rem;
min-height: 520px;
justify-content: flex-start;
}
.chairman-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.chairman-avatar-large {
width: 380px;
height: 480px;
min-width: 380px;
min-height: 480px;
max-width: 380px;
max-height: 480px;
background: transparent;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
border: none;
position: relative;
z-index: 1;
overflow: hidden;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
transition: all var(--transition-medium);
flex-shrink: 0;
padding: 0;
}
.chairman-avatar-large::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: var(--chairman-photo-bg, none);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
filter: blur(20px) brightness(0.85);
opacity: 0.8;
z-index: 0;
border-radius: 20px;
transform: scale(1.1);
}
.chairman-photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
border-radius: 0;
transition: all var(--transition-medium);
position: relative;
z-index: 1;
display: block;
}
.chairman-avatar-large:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.chairman-avatar-large:hover .chairman-photo {
transform: scale(1.02);
}
/* 現任理事長專頁響應式設計 */
@media (max-width: 768px) {
.chairman-header {
flex-direction: column;
text-align: center;
gap: 1.5rem;
align-items: center;
padding: 1.5rem 1rem;
min-height: auto;
}
.chairman-avatar-large {
width: 100%;
max-width: 280px;
height: auto;
aspect-ratio: 3 / 4;
min-width: auto;
min-height: auto;
max-height: none;
margin: 0 auto;
border-width: 3px;
padding: 0;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
.chairman-photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
border-radius: 0;
}
.chairman-info-header {
text-align: center;
align-items: center;
width: 100%;
}
.chairman-info-inline {
width: 100%;
}
.chairman-info-inline h4 {
text-align: center;
}
.chairman-info-inline h4::after {
left: 50%;
transform: translateX(-50%);
}
}
@media (max-width: 480px) {
.chairman-header {
flex-direction: column;
text-align: center;
gap: 1.2rem;
padding: 1.2rem 0.8rem;
align-items: center;
min-height: auto;
}
.chairman-avatar-large {
width: 100%;
max-width: 240px;
height: auto;
aspect-ratio: 3 / 4;
min-width: auto;
min-height: auto;
max-height: none;
margin: 0 auto;
border-width: 3px;
padding: 0;
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
}
.chairman-photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
border-radius: 0;
}
.chairman-info-header {
text-align: center;
align-items: center;
width: 100%;
}
.chairman-info-inline {
width: 100%;
}
.chairman-info-inline h4 {
text-align: center;
font-size: 1.3rem;
}
.chairman-info-inline h4::after {
left: 50%;
transform: translateX(-50%);
}
}
.avatar-placeholder-large {
color: var(--primary-white);
font-size: 3rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
}
.chairman-photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
border-radius: 0;
transition: all var(--transition-medium);
background: var(--gray-light);
display: block;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
}
.chairman-photo:hover {
transform: scale(1.02);
}
.chairman-info-header {
position: relative;
z-index: 1;
flex: 1;
text-align: left;
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
align-items: flex-start;
}
.chairman-info-header h3 {
font-size: 3.2rem;
margin-bottom: 0.6rem;
margin-top: 0;
font-family: 'Noto Serif TC', serif;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
font-weight: 700;
line-height: 1.2;
letter-spacing: 1px;
}
.chairman-title-large {
font-size: 1.65rem;
margin-bottom: 0.4rem;
margin-top: 0;
opacity: 0.95;
line-height: 1.4;
font-weight: 700;
letter-spacing: 0.3px;
}
.chairman-subtitle {
font-size: 1.6rem;
opacity: 0.9;
font-weight: 700;
line-height: 1.3;
margin-bottom: 0;
margin-top: 0;
letter-spacing: 0.5px;
}
.chairman-info-inline {
margin-top: 1rem;
}
.chairman-info-inline h4 {
color: var(--primary-white);
font-size: 1.5rem;
margin-bottom: 1rem;
font-family: 'Noto Serif TC', serif;
text-align: left;
position: relative;
font-weight: 700;
letter-spacing: 0.5px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.chairman-info-inline h4::after {
content: '';
position: absolute;
bottom: -6px;
left: 0;
width: 60px;
height: 2px;
background: var(--primary-white);
border-radius: 1px;
opacity: 0.8;
}
.chairman-header .chairman-info-simple {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: 0;
}
.chairman-header .info-label {
color: rgba(255, 255, 255, 0.95);
font-weight: 600;
font-size: 1.55rem;
}
.chairman-header .info-value {
color: rgba(255, 255, 255, 0.9);
font-size: 1.55rem;
line-height: 1.8;
}
.chairman-header .info-row::after {
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}
.chairman-content {
padding: 2rem 2rem;
}
.chairman-section {
margin-bottom: 1rem;
}
.chairman-section h4 {
color: #333;
font-size: 1.5rem;
margin-bottom: 0.8rem;
font-family: 'Noto Serif TC', serif;
text-align: left;
position: relative;
font-weight: 700;
letter-spacing: 0.5px;
}
.chairman-section h4::after {
display: none;
}
/* 學歷背景樣式 */
.education-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.education-item {
background: var(--gray-light);
padding: 2rem;
border-radius: 15px;
text-align: center;
transition: all 0.3s ease;
}
.education-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-light);
}
.education-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.education-details h5 {
color: var(--primary-red);
margin-bottom: 0.5rem;
font-family: 'Noto Serif TC', serif;
}
.education-details p {
color: var(--primary-black);
margin-bottom: 0.5rem;
font-weight: 600;
}
.education-year {
color: var(--gray-dark);
font-size: 0.9rem;
font-style: italic;
}
/* 專業領域樣式 */
.expertise-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.expertise-item {
background: var(--primary-white);
padding: 2rem;
border-radius: 15px;
text-align: center;
border: 2px solid var(--gray-medium);
transition: all 0.3s ease;
}
.expertise-item:hover {
border-color: var(--primary-red);
transform: translateY(-5px);
box-shadow: var(--shadow-light);
}
.expertise-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.expertise-item h5 {
color: var(--primary-red);
margin-bottom: 1rem;
font-family: 'Noto Serif TC', serif;
}
.expertise-item p {
color: var(--primary-black);
line-height: 1.6;
}
/* 主要成就樣式 */
.achievements-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.achievement-item {
background: var(--primary-white);
padding: 2rem;
border-radius: 15px;
border-left: 4px solid var(--primary-red);
transition: all 0.3s ease;
}
.achievement-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-light);
}
.achievement-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.achievement-content h5 {
color: var(--primary-red);
margin-bottom: 0.8rem;
font-family: 'Noto Serif TC', serif;
}
.achievement-content p {
color: var(--primary-black);
line-height: 1.6;
}
/* 願景使命樣式 */
.vision-content {
text-align: center;
}
.vision-text {
font-size: 1.2rem;
color: var(--primary-black);
line-height: 1.8;
margin-bottom: 2rem;
font-style: italic;
}
/* 簡化版資訊區塊樣式 */
.chairman-info-simple {
background: linear-gradient(135deg, #ffffff 0%, #fef5f5 100%);
padding: 1.8rem;
border-radius: 12px;
border: 1px solid rgba(156, 39, 176, 0.3);
margin-bottom: 1rem;
box-shadow: 0 2px 16px rgba(211, 47, 47, 0.08);
}
.info-row {
display: flex;
align-items: flex-start;
margin-bottom: 0.9rem;
padding-bottom: 0.9rem;
border-bottom: none;
gap: 1.2rem;
position: relative;
}
.info-row:not(:last-child)::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(211, 47, 47, 0.15), transparent);
}
.info-row:last-child {
border-bottom: none;
margin-bottom: 0;
}
.info-label {
min-width: 90px;
font-weight: 600;
color: var(--primary-red);
font-size: 1.55rem;
flex-shrink: 0;
}
.info-value {
flex: 1;
color: var(--primary-black);
line-height: 1.8;
font-size: 1.55rem;
word-wrap: break-word;
}
/* 現任職務區塊樣式 - 簡潔明瞭版 */
.positions-simple {
background: linear-gradient(135deg, #ffffff 0%, #fef5f5 100%);
padding: 1.8rem;
border-radius: 12px;
border: none;
margin-bottom: 1rem;
box-shadow: 0 2px 16px rgba(211, 47, 47, 0.08);
position: relative;
}
.positions-simple::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary-red), var(--medium-red));
border-radius: 12px 12px 0 0;
opacity: 0.6;
}
.position-main {
background: var(--primary-red);
color: var(--primary-white);
padding: 1.3rem 1.6rem;
border-radius: 8px;
margin-bottom: 1.2rem;
text-align: center;
box-shadow: 0 4px 12px rgba(211, 47, 47, 0.2);
}
.position-org {
display: block;
font-size: 1.65rem;
font-weight: 500;
margin-bottom: 0.3rem;
opacity: 0.9;
}
.position-title {
display: block;
font-size: 1.6rem;
font-weight: 700;
line-height: 1.2;
}
.positions-list {
display: flex;
flex-direction: column;
gap: 0;
}
.position-line {
padding: 0.6rem 0;
color: var(--primary-black);
font-size: 1.45rem;
line-height: 1.7;
border-bottom: none;
position: relative;
transition: all 0.2s ease;
display: flex;
align-items: flex-start;
}
.position-line:not(:last-child)::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent);
}
.position-line:last-child {
border-bottom: none;
}
.position-line::before {
content: '●';
color: var(--primary-red);
font-size: 0.9rem;
margin-right: 0.8rem;
margin-top: 0.15rem;
flex-shrink: 0;
}
.position-line:hover {
background: #fafafa;
padding-left: 0.5rem;
border-radius: 4px;
}
.position-line:hover::before {
color: var(--dark-red);
}
/* 簡化版聯絡樣式 */
.contact-simple {
background: var(--primary-white);
padding: 2rem;
border-radius: 15px;
border: 2px solid var(--gray-medium);
margin-bottom: 1.5rem;
}
.contact-line {
padding: 0.8rem 1rem;
margin-bottom: 0.8rem;
background: var(--gray-light);
border-radius: 8px;
color: var(--primary-black);
font-size: 1rem;
line-height: 1.5;
}
.contact-line:last-child {
margin-bottom: 0;
}
.vision-goals {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.goal-item {
background: var(--gray-light);
padding: 2rem;
border-radius: 15px;
text-align: center;
position: relative;
}
.goal-number {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: var(--primary-red);
color: var(--primary-white);
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.9rem;
}
.goal-item h5 {
color: var(--primary-red);
margin: 1rem 0 1rem 0;
font-family: 'Noto Serif TC', serif;
}
.goal-item p {
color: var(--primary-black);
line-height: 1.6;
}
/* 聯絡方式樣式 */
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.contact-item {
background: var(--primary-white);
padding: 2rem;
border-radius: 15px;
text-align: center;
border: 2px solid var(--gray-medium);
transition: all 0.3s ease;
}
.contact-item:hover {
border-color: var(--primary-red);
transform: translateY(-5px);
box-shadow: var(--shadow-light);
}
.contact-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.contact-details h5 {
color: var(--primary-red);
margin-bottom: 0.8rem;
font-family: 'Noto Serif TC', serif;
}
.contact-details p {
color: var(--primary-black);
font-weight: 600;
}
/* 理事長操作按鈕樣式 */
.chairman-actions {
text-align: center;
margin-top: 3rem;
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
}
.contact-chairman-btn,
.schedule-meeting-btn {
display: inline-block;
padding: 1rem 2rem;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
font-family: 'Noto Serif TC', serif;
}
.contact-chairman-btn {
background: var(--primary-red);
color: var(--primary-white);
box-shadow: var(--shadow-red);
}
.contact-chairman-btn:hover {
background: var(--dark-red);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(211, 47, 47, 0.4);
}
.schedule-meeting-btn {
background: var(--primary-white);
color: var(--primary-red);
border: 2px solid var(--primary-red);
}
.schedule-meeting-btn:hover {
background: var(--primary-red);
color: var(--primary-white);
transform: translateY(-2px);
box-shadow: var(--shadow-red);
}
/* 查看詳細資訊按鈕樣式 */
.view-chairman-btn {
display: inline-block;
background: var(--primary-red);
color: var(--primary-white);
padding: 0.6rem 1.2rem;
border-radius: 20px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.view-chairman-btn:hover {
background: var(--dark-red);
transform: translateY(-2px);
box-shadow: var(--shadow-red);
}
/* Organization Section */
.organization-section {
margin-top: 1rem;
padding-top: 1rem;
border-top: 2px solid var(--gray-medium);
}
.organization-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 1.5rem;
margin-top: 0.5rem;
color: var(--primary-red);
font-family: 'Noto Serif TC', serif;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1.2;
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 0 2rem;
position: relative;
}
.organization-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: var(--primary-red);
border-radius: 2px;
}
.organization-title::before {
content: '';
position: absolute;
bottom: -25px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: var(--primary-black);
border-radius: 1px;
}
/* 協會LOGO樣式 */
.org-logo {
text-align: center;
margin-bottom: 3rem;
}
.logo-circle {
width: 80px;
height: 80px;
background: var(--primary-red);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
border: 3px solid var(--dark-red);
}
.logo-symbol {
color: var(--primary-white);
font-size: 1.5rem;
font-weight: 700;
font-family: 'Noto Serif TC', serif;
}
.logo-text {
color: var(--primary-red);
font-size: 1.2rem;
font-weight: 600;
font-family: 'Noto Serif TC', serif;
}
/* 新組織架構樣式 */
.org-chart-new {
max-width: 1100px;
margin: 0 auto 1.8rem;
position: relative;
}
.org-level-1 {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
.org-level-2 {
display: flex;
justify-content: center;
gap: 1.3rem;
margin-bottom: 1rem;
}
.org-level-3 {
display: flex;
justify-content: center;
gap: 0.85rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.org-level-4 {
display: flex;
justify-content: center;
gap: 0.7rem;
margin-bottom: 1rem;
flex-wrap: nowrap;
overflow-x: auto;
}
.org-connector-1,
.org-connector-2,
.org-connector-3 {
width: 2px;
height: 24px;
background: var(--primary-red);
margin: 0 auto 1rem;
position: relative;
}
.org-connector-2::before,
.org-connector-2::after {
content: '';
position: absolute;
width: 70px;
height: 2px;
background: var(--primary-red);
top: 50%;
transform: translateY(-50%);
}
.org-connector-2::before {
left: -70px;
}
.org-connector-2::after {
right: -70px;
}
.org-connector-3::before,
.org-connector-3::after {
content: '';
position: absolute;
width: 85px;
height: 2px;
background: var(--primary-red);
top: 50%;
transform: translateY(-50%);
}
.org-connector-3::before {
left: -85px;
}
.org-connector-3::after {
right: -85px;
}
.org-item {
background: var(--primary-white);
padding: 1.5rem 1.3rem;
border-radius: 13px;
border: 2.5px solid var(--primary-red);
text-align: center;
font-weight: 600;
font-size: 1.35rem;
color: var(--primary-red);
min-width: 115px;
transition: all 0.3s ease;
box-shadow: 0 3px 12px rgba(211, 47, 47, 0.1);
letter-spacing: 0.2px;
line-height: 1.4;
}
.org-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(211, 47, 47, 0.2);
background: var(--primary-red);
color: var(--primary-white);
}
.org-item.chairman {
background: var(--primary-red);
color: var(--primary-white);
border-color: var(--dark-red);
box-shadow: 0 5px 18px rgba(211, 47, 47, 0.2);
font-size: 1.7rem;
padding: 1.9rem 2.2rem;
font-weight: 700;
}
.org-item.executive {
background: linear-gradient(135deg, var(--primary-red), var(--dark-red));
color: var(--primary-white);
border-color: var(--dark-red);
box-shadow: 0 6px 20px rgba(211, 47, 47, 0.2);
}
.org-item.branch {
background: var(--gray-light);
color: var(--primary-black);
border-color: var(--gray-medium);
}
.org-item.committee {
background: var(--primary-white);
color: var(--primary-black);
border-color: var(--gray-medium);
font-size: 1.15rem;
padding: 1rem 1.3rem;
min-width: 105px;
flex-shrink: 0;
white-space: nowrap;
}
/* 備註樣式 */
.organization-notes {
max-width: 800px;
margin: 0 auto 2rem;
background: linear-gradient(135deg, rgba(255, 245, 245, 0.5) 0%, rgba(255, 255, 255, 0.8) 100%);
padding: 1.5rem;
border-radius: 15px;
border: none;
box-shadow: 0 1px 12px rgba(211, 47, 47, 0.08);
position: relative;
}
.organization-notes::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--primary-red), var(--medium-red));
border-radius: 15px 0 0 15px;
opacity: 0.6;
}
.organization-notes h4 {
color: var(--primary-red);
font-size: 1.6rem;
margin-bottom: 1.5rem;
font-family: 'Noto Serif TC', serif;
font-weight: 700;
letter-spacing: 0.5px;
}
.note-item {
display: flex;
align-items: flex-start;
margin-bottom: 1rem;
padding: 0.8rem;
background: var(--primary-white);
border-radius: 8px;
}
.note-item:last-child {
margin-bottom: 0;
}
.note-number {
background: var(--primary-red);
color: var(--primary-white);
width: 25px;
height: 25px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.9rem;
margin-right: 1rem;
flex-shrink: 0;
}
.note-text {
color: var(--primary-black);
line-height: 1.8;
font-size: 1.1rem;
}
/* 組織說明樣式 */
.organization-description {
max-width: 800px;
margin: 0 auto;
text-align: center;
background: linear-gradient(135deg, rgba(255, 245, 245, 0.5) 0%, rgba(255, 255, 255, 0.8) 100%);
padding: 1.5rem;
border-radius: 15px;
border: none;
box-shadow: 0 1px 12px rgba(211, 47, 47, 0.08);
}
.organization-description h4 {
color: var(--primary-red);
font-size: 1.6rem;
margin-bottom: 1.2rem;
font-family: 'Noto Serif TC', serif;
font-weight: 700;
letter-spacing: 0.5px;
}
.organization-description p {
color: var(--primary-black);
line-height: 1.85;
font-size: 1.15rem;
}
/* Responsive Design for Leadership and Organization */
@media (max-width: 768px) {
.about-tabs {
gap: 0.5rem;
margin-bottom: 1.5rem;
margin-top: 0;
}
/* 關於我們頁面標題與分頁按鈕之間的間距 */
.about .section-title {
margin-bottom: 1.5rem;
}
.tab-button {
padding: 0.8rem 1.5rem;
font-size: 0.9rem;
line-height: 2;
}
.leadership-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.org-level-2 {
gap: 1.7rem;
}
.org-level-3,
.org-level-4 {
gap: 0.85rem;
}
.org-item {
min-width: 90px;
padding: 0.7rem 1rem;
font-size: 1.15rem;
}
.org-item.chairman {
padding: 1.3rem 1.8rem;
font-size: 1.45rem;
}
.logo-circle {
width: 60px;
height: 60px;
}
.logo-symbol {
font-size: 1.2rem;
}
.logo-text {
font-size: 1rem;
}
/* 現任理事長專頁響應式設計 */
.chairman-header {
padding: 2rem 1rem;
flex-direction: column;
text-align: center;
gap: 2rem;
}
.chairman-info-header {
text-align: center;
}
/* 歷屆理事長時間軸響應式設計 */
.leadership-timeline {
padding: 1rem 0.5rem;
max-width: 100%;
}
.leadership-timeline::before {
left: 35px;
width: 2.5px;
animation: fadeIn 0.8s ease-out 0.2s forwards;
}
.timeline-item {
flex-direction: row !important;
align-items: flex-start;
margin-left: 0;
margin-bottom: 2.5rem;
padding-right: 0.5rem;
animation: fadeInUp 0.6s ease-out forwards;
}
/* 響應式：已過去的連接線 */
.timeline-item:not(.current)::after {
left: 35px;
top: 60px;
width: 2px;
}
/* 響應式：當前位置及之後的連接線 */
.timeline-item.current::after,
.timeline-item.current ~ .timeline-item::after {
left: 35px;
top: 60px;
width: 4px;
box-shadow:
0 0 10px rgba(211, 47, 47, 0.4),
0 0 5px rgba(211, 47, 47, 0.2);
}
/* 響應式：當前項目之前的連接線 */
.timeline-item.current::before {
left: 35px;
width: 2px;
height: 60px;
}
.timeline-marker {
width: 60px;
height: 60px;
left: 35px;
transform: translateX(-50%);
position: absolute;
animation: fadeIn 0.5s ease-out forwards;
border-width: 3px;
}
.timeline-marker:hover {
transform: translateX(-50%) scale(1.05);
}
.timeline-marker.current {
transform: translateX(-50%) scale(1.08);
border-width: 4px;
}
.timeline-marker.current:hover {
transform: translateX(-50%) scale(1.12);
}
.marker-icon {
font-size: 0.85rem;
}
.timeline-content {
margin-left: 0;
max-width: 100%;
text-align: left;
animation: fadeInUp 0.6s ease-out forwards;
}
.timeline-item {
flex-direction: column;
min-height: auto;
}
.leader-card {
flex-direction: column;
min-height: auto;
border-radius: 12px;
}
.leader-avatar {
width: 100%;
height: 280px;
min-width: 100%;
max-width: 100%;
border: 3px solid #8B1A1A; /* 統一深紅色邊框 */
border-radius: 12px 12px 0 0; /* 上方圓角 */
box-shadow: 0 2px 8px rgba(139, 26, 26, 0.2);
background: transparent; /* 透明背景 */
}
.leader-badge {
top: 10px;
right: 10px;
padding: 5px 12px;
font-size: 0.8rem;
}
.leader-card.featured .leader-badge {
top: 12px;
right: 12px;
padding: 6px 14px;
font-size: 0.85rem;
}
.leader-info {
padding: 1.5rem;
text-align: center;
}
.leader-info h4,
.leader-name,
.leader-title,
.leader-desc {
text-align: center;
}
.leader-achievements,
.leader-education,
.leader-specialization,
.leader-experience,
.leader-teaching,
.leader-positions {
text-align: left;
}
.chairman-info-header h3 {
font-size: 2.4rem;
}
.chairman-title-large {
font-size: 1.3rem;
}
.chairman-subtitle {
font-size: 1.15rem;
}
.chairman-content {
padding: 2rem 1rem;
}
.section-subtitle {
font-size: 1.1rem;
margin-bottom: 2rem;
}
.education-grid,
.expertise-grid,
.achievements-grid,
.vision-goals,
.contact-grid,
.positions-grid,
.info-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
/* 歷屆理事長簡介響應式字體調整 */
.leadership-title {
font-size: 1.8rem;
margin-bottom: 2rem;
margin-top: 1rem;
padding: 0 0.5rem;
line-height: 1.3;
}
.leadership-title::after {
bottom: -10px;
width: 70px;
height: 3px;
}
.leadership-title::before {
bottom: -18px;
width: 45px;
height: 2px;
}
/* 共用介紹文字響應式樣式 */
.mission-text,
.leadership-intro,
.organization-intro,
p.leadership-intro,
p.organization-intro,
.leadership-section p.leadership-intro,
.organization-section p.organization-intro {
font-size: 1.15rem !important;
line-height: 1.9 !important;
}
.leader-info h4 {
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
.leader-name {
font-size: 1.15rem;
margin-bottom: 0.5rem;
}
.leader-title {
font-size: 1.1rem;
margin-bottom: 0.6rem;
line-height: 1.5;
}
.leader-period {
font-size: 1.1rem;
padding: 0.35rem 0.9rem;
margin-bottom: 0.8rem;
}
.leader-desc {
font-size: 1.1rem;
line-height: 1.75;
margin-bottom: 1rem;
padding: 0 0.5rem;
}
.leader-achievements h5,
.leader-education h5,
.leader-specialization h5,
.leader-experience h5,
.leader-teaching h5,
.leader-current h5,
.leader-positions h5 {
font-size: 1.15rem;
margin-bottom: 0.5rem;
}
.leader-achievements ul,
.leader-education ul,
.leader-specialization ul,
.leader-experience ul,
.leader-teaching ul,
.leader-positions ul {
font-size: 1.1rem;
line-height: 1.5;
}
.leader-card {
flex-direction: column;
min-height: auto;
}
.leader-avatar {
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
min-width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
border: 3px solid #8B1A1A;
border-radius: 12px 12px 0 0;
box-shadow: 0 2px 8px rgba(139, 26, 26, 0.2);
position: relative;
overflow: hidden;
}
.leader-card.featured .leader-avatar {
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
padding: 0;
border: 4px solid #8B1A1A;
border-radius: 14px 14px 0 0;
box-shadow: 0 3px 10px rgba(139, 26, 26, 0.25);
}
.leader-photo {
width: calc(100% + 2px);
height: calc(100% + 2px);
object-fit: cover;
object-position: center center;
border-radius: 12px 12px 0 0;
display: block;
position: absolute;
top: -1px;
left: -1px;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
}
.leader-card.featured .leader-photo {
border-radius: 14px 14px 0 0;
}
.leader-card.featured .leader-avatar {
background: transparent; /* 透明背景 */
}
.leader-avatar {
background: transparent; /* 透明背景 */
}
.leader-info {
padding: 1.5rem;
text-align: center;
}
.leader-info h4,
.leader-name,
.leader-title,
.leader-desc {
text-align: center;
}
.leader-card:hover {
transform: translateY(-3px);
}
.leader-achievements li,
.leader-education li,
.leader-specialization li,
.leader-experience li,
.leader-teaching li,
.leader-current li,
.leader-positions li {
font-size: 1.1rem;
line-height: 1.4;
margin-bottom: 0.2rem;
padding-left: 1.2rem;
}
.leader-achievements,
.leader-education,
.leader-specialization,
.leader-experience,
.leader-teaching {
padding: 0.8rem;
margin-bottom: 0.6rem;
border-radius: 8px;
border-left-width: 3px;
}
.leader-positions {
padding: 0.8rem;
margin-bottom: 0.6rem;
border-radius: 8px;
}
/* 協會宗旨頁面響應式字體調整 */
.about-text {
text-align: left;
}
.about-text h3 {
font-size: 2rem;
margin-bottom: 3rem;
margin-top: 1.5rem;
padding: 0 1rem;
text-align: left;
line-height: 1.2;
}
.about-text p {
font-size: 1.05rem;
line-height: 1.75;
text-align: left;
}
.mission-content h4 {
font-size: 1.6rem;
}
.mission-content p {
font-size: 1.5rem;
line-height: 1.8;
}
.mission-icon {
font-size: 1rem;
padding: 0.5rem 1rem;
}
/* 現任理事長頁面響應式字體調整 */
.chairman-info-header h3 {
font-size: 2.5rem;
margin-bottom: 0.8rem;
}
.chairman-title-large {
font-size: 1.4rem;
margin-bottom: 0.6rem;
}
.chairman-subtitle {
font-size: 1.2rem;
}
.chairman-section h4 {
font-size: 1.4rem;
margin-bottom: 1.2rem;
}
.info-label {
font-size: 1.2rem;
}
.info-value {
font-size: 1.15rem;
line-height: 1.8;
}
/* 組織架構頁面響應式字體調整 */
.organization-title {
font-size: 2rem;
margin-bottom: 3rem;
margin-top: 1.5rem;
padding: 0 1rem;
line-height: 1.2;
}
.organization-title::after {
bottom: -12px;
width: 80px;
height: 3px;
}
.organization-title::before {
bottom: -20px;
width: 50px;
height: 2px;
}
.org-item {
font-size: 1.15rem;
padding: 1.3rem 1rem;
}
.org-item.chairman {
font-size: 1.45rem;
padding: 1.6rem 1.8rem;
}
.org-item.committee {
font-size: 1.05rem;
padding: 1rem 0.9rem;
}
.organization-notes h4,
.organization-description h4 {
font-size: 1.4rem;
margin-bottom: 1.2rem;
}
.note-text {
font-size: 1.1rem;
line-height: 1.8;
}
.organization-description p {
font-size: 1.1rem;
line-height: 1.85;
}
.info-row {
flex-direction: column;
align-items: flex-start;
}
.info-label {
min-width: auto;
margin-bottom: 0.5rem;
}
.chairman-actions {
flex-direction: column;
align-items: center;
}
.contact-chairman-btn,
.schedule-meeting-btn {
width: 100%;
max-width: 300px;
}
}
/* Services Section */
#services {
background: var(--gray-light);
position: relative;
padding: 6rem 0;
}
#services .container {
position: relative;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2.5rem;
margin-top: 4rem;
}
.service-card {
background: var(--primary-white);
padding: 2.5rem 2rem;
border-radius: 20px;
box-shadow: var(--shadow-light);
text-align: center;
transition: all var(--transition-slow);
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-red), var(--dark-red));
transform: scaleX(0);
transition: transform var(--transition-medium);
}
.service-card:hover {
transform: var(--transform-hover);
border-color: var(--primary-red);
box-shadow: var(--shadow-heavy);
}
.service-card:hover::before {
transform: scaleX(1);
}
.service-icon {
width: 90px;
height: 90px;
background: linear-gradient(135deg, var(--primary-red), var(--dark-red));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 2rem;
color: var(--primary-white);
font-size: 2.5rem;
box-shadow: 0 8px 25px rgba(211, 47, 47, 0.3);
}
.service-card h4 {
font-size: 1.5rem;
margin-bottom: 1.3rem;
color: var(--primary-red);
font-family: 'Noto Serif TC', serif;
font-weight: 600;
letter-spacing: 0.2px;
}
.service-card p {
color: var(--primary-black);
line-height: 1.7;
font-size: 1rem;
letter-spacing: 0.1px;
margin-bottom: 0;
}
/* Contact Section */
.contact {
background-image: url('img/background4.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
color: var(--primary-black);
position: relative;
padding: 6rem 0;
overflow: hidden;
min-height: 100vh;
}
.contact::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.02);
pointer-events: none;
z-index: 1;
}
.contact .container {
position: relative;
z-index: 2;
}
.contact::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(135deg, var(--primary-red) 0%, var(--medium-red) 50%, var(--dark-red) 100%);
opacity: 0.1;
}
.contact .section-title {
color: var(--primary-red);
font-size: 3rem;
font-weight: 700;
text-align: center;
margin-bottom: 2.5rem;
position: relative;
font-family: 'Noto Serif TC', serif;
line-height: 2;
letter-spacing: 0.3px;
}
.contact .section-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: var(--primary-red);
border-radius: 2px;
}
.contact .section-title::before {
content: '';
position: absolute;
bottom: -25px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: var(--primary-black);
border-radius: 1px;
}
.contact .section-subtitle {
text-align: center;
font-size: 1.3rem;
color: var(--primary-black);
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
font-weight: 500;
line-height: 1.6;
}
.contact-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2.5rem;
margin-top: 3.5rem;
align-items: stretch;
animation: fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.contact-card {
background: rgba(255, 255, 255, 0.9);
border-radius: 22px;
border: 2px solid rgba(211, 47, 47, 0.4);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
backdrop-filter: blur(6px);
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.contact-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, var(--primary-red), var(--medium-red), var(--dark-red));
}
.contact-card:hover {
transform: translateY(-12px);
box-shadow: 0 24px 50px rgba(211, 47, 47, 0.25);
}
.contact-card-title {
font-size: 2rem;
font-family: 'Noto Serif TC', serif;
color: var(--primary-red);
margin: 1.6rem 2.8rem 0.5rem;
}
.contact-card-description {
margin: 0 2.8rem 1.8rem;
color: #666;
font-size: 1.05rem;
line-height: 1.7;
}
.contact-card-line .contact-card-title {
color: #009944;
}
.contact-card-line .contact-card-description {
color: #2c6f2c;
}
.contact-card-body {
padding: 0 2.8rem 2.4rem;
display: flex;
flex-direction: column;
gap: 1.8rem;
}
.contact-item {
display: flex;
gap: 1.4rem;
align-items: center;
padding: 1rem 1.4rem;
border-radius: 14px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(211, 47, 47, 0.15);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-item:hover {
transform: translateY(-6px);
box-shadow: 0 14px 30px rgba(211, 47, 47, 0.2);
}
.contact-icon {
width: 58px;
height: 58px;
border-radius: 16px;
background: linear-gradient(135deg, var(--primary-red), var(--medium-red));
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.4rem;
box-shadow: inset 0 4px 12px rgba(255, 255, 255, 0.3), 0 10px 18px rgba(211, 47, 47, 0.35);
}
.contact-card-icon {
width: 96px;
height: 96px;
border-radius: 28px;
background: linear-gradient(135deg, rgba(211, 47, 47, 0.15), rgba(211, 47, 47, 0.35));
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-red);
font-size: 2.4rem;
margin: 2.2rem 0 0 2.8rem;
box-shadow: inset 0 6px 12px rgba(255, 255, 255, 0.4), 0 15px 25px rgba(211, 47, 47, 0.2);
}
.contact-card-icon.line {
background: linear-gradient(145deg, #00c300, #00a800);
color: #ffffff;
box-shadow: 0 18px 35px rgba(0, 195, 0, 0.35);
}
.contact-list {
list-style: none;
padding: 0 2.8rem 0;
margin: 0 0 2rem;
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.contact-list li {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.1rem 1.4rem;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(211, 47, 47, 0.18);
border-radius: 14px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-list li:hover {
transform: translateY(-5px);
box-shadow: 0 16px 30px rgba(211, 47, 47, 0.18);
}
.contact-list.line li {
border-color: rgba(0, 195, 0, 0.25);
}
.contact-list.line li:hover {
box-shadow: 0 16px 30px rgba(0, 195, 0, 0.2);
}
.contact-list-icon {
width: 46px;
height: 46px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(211, 47, 47, 0.12), rgba(211, 47, 47, 0.25));
color: var(--primary-red);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
.contact-card-line .contact-list-icon {
background: linear-gradient(135deg, rgba(0, 195, 0, 0.15), rgba(0, 195, 0, 0.28));
color: #009c00;
}
.contact-list-content .label {
display: block;
font-size: 0.95rem;
font-weight: 700;
color: var(--primary-red);
margin-bottom: 0.25rem;
}
.contact-card-line .contact-list-content .label {
color: #009c00;
}
.contact-list-content a,
.contact-list-content p {
margin: 0;
color: #424242;
font-size: 1rem;
line-height: 1.7;
}
.contact-details h4 {
font-size: 1.2rem;
color: var(--primary-red);
margin-bottom: 0.2rem;
font-family: 'Noto Serif TC', serif;
}
.contact-details p {
margin: 0;
color: #4f4f4f;
font-size: 1.05rem;
line-height: 1.4;
}
.contact-details a,
.contact-card-button {
color: var(--primary-red);
font-weight: 700;
text-decoration: none;
transition: color 0.3s ease;
}
.contact-details a:hover {
color: var(--dark-red);
text-decoration: underline;
}
.contact-card-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin: auto 2.8rem 2.6rem;
padding: 1rem 2rem;
border-radius: 999px;
border: 2px solid var(--primary-red);
background: linear-gradient(135deg, rgba(211, 47, 47, 0.08), rgba(211, 47, 47, 0.18));
color: var(--primary-red);
font-size: 1.05rem;
box-shadow: 0 12px 25px rgba(211, 47, 47, 0.18);
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.contact-card-button:hover {
transform: translateY(-6px);
box-shadow: 0 18px 35px rgba(211, 47, 47, 0.28);
background: linear-gradient(135deg, rgba(211, 47, 47, 0.2), rgba(211, 47, 47, 0.25));
}
.contact-card-line {
background: #ffffff;
border: 2px solid #00a847;
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.12);
backdrop-filter: none;
}
.contact-card-line::before {
background: linear-gradient(90deg, #00c300, #00b000, #009700);
}
.line-body {
align-items: center;
text-align: center;
gap: 1.6rem;
}
.line-logo {
width: 90px;
height: 90px;
border-radius: 20px;
background: linear-gradient(135deg, #00c300, #00b300);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 3rem;
box-shadow: 0 18px 35px rgba(0, 195, 0, 0.35);
margin-bottom: 0.4rem;
}
.line-description {
font-size: 1.1rem;
color: #3a3a3a;
line-height: 1.7;
}
.line-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 1.1rem 2.2rem;
border-radius: 999px;
background: linear-gradient(135deg, #00c300, #00a800);
color: white;
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
box-shadow: 0 18px 35px rgba(0, 195, 0, 0.35);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.line-cta-button:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 22px 40px rgba(0, 195, 0, 0.45);
}
.contact-card-button.line {
border-color: #00a400;
background: linear-gradient(135deg, rgba(0, 195, 0, 0.12), rgba(0, 195, 0, 0.22));
color: #007f00;
box-shadow: 0 14px 28px rgba(0, 195, 0, 0.25);
}
.contact-card-button.line:hover {
box-shadow: 0 20px 40px rgba(0, 195, 0, 0.35);
background: linear-gradient(135deg, rgba(0, 195, 0, 0.25), rgba(0, 195, 0, 0.3));
color: #005f00;
}
.line-note {
font-size: 0.95rem;
color: #5f5f5f;
line-height: 1.6;
opacity: 0.9;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-status {
margin-top: 1rem;
padding: 1rem;
border-radius: 8px;
text-align: center;
font-weight: 500;
transition: all 0.3s ease;
}
.form-status.success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.form-status.error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.submit-btn {
background: linear-gradient(135deg, var(--primary-red) 0%, #dc2626 100%);
color: var(--primary-white);
border: none;
padding: 1.2rem 2.5rem;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-medium);
font-family: 'Noto Sans TC', sans-serif;
width: 100%;
margin-top: auto;
box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
position: relative;
overflow: hidden;
}
.submit-btn:hover {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
}
.submit-btn:active {
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}
.contact-info h4 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
font-family: 'Noto Serif TC', serif;
}
.contact-info p {
margin-bottom: 1rem;
opacity: 0.95;
font-size: 1.2rem; /* 從1.1rem增加到1.2rem */
}
.contact-form {
background: rgba(255, 255, 255, 0.95);
padding: 3rem;
border-radius: 25px;
border: 2px solid var(--primary-red);
height: 100%;
max-width: 600px;
width: 100%;
display: flex;
flex-direction: column;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
}
.contact-form::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-red) 0%, var(--medium-red) 50%, var(--dark-red) 100%);
}
.contact-form h4 {
font-size: 2rem;
margin-bottom: 2.5rem;
font-family: 'Noto Serif TC', serif;
color: var(--primary-red);
font-weight: 700;
letter-spacing: 0.5px;
text-align: center;
position: relative;
}
.contact-form h4::after {
content: '';
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary-red) 0%, var(--medium-red) 50%, var(--dark-red) 100%);
border-radius: 2px;
}
.contact-form form {
flex: 1;
display: flex;
flex-direction: column;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 1.4rem 1.8rem;
margin-bottom: 1.5rem;
border: 2px solid var(--gray-medium);
border-radius: 15px;
font-size: 1.15rem;
background: var(--primary-white);
color: var(--primary-black);
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
font-family: 'Noto Sans TC', sans-serif;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: #999;
font-style: italic;
}
.contact-form input:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--primary-red);
background: var(--primary-white);
box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.15), 0 8px 25px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
border-width: 3px;
}
.contact-form button {
background: linear-gradient(135deg, var(--primary-red) 0%, var(--medium-red) 50%, var(--dark-red) 100%);
color: var(--primary-white);
padding: 1.4rem 3rem;
border: none;
border-radius: 15px;
font-size: 1.2rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
font-family: 'Noto Serif TC', serif;
letter-spacing: 0.5px;
box-shadow: 0 8px 25px rgba(211, 47, 47, 0.3);
position: relative;
overflow: hidden;
}
.contact-form button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.contact-form button:hover::before {
left: 100%;
}
.contact-form button:hover {
background: linear-gradient(135deg, var(--dark-red) 0%, var(--primary-red) 50%, var(--medium-red) 100%);
transform: translateY(-3px) scale(1.02);
box-shadow: 0 12px 35px rgba(211, 47, 47, 0.4);
}
.contact-form button:active {
transform: translateY(-1px) scale(0.98);
}
.form-status {
margin-top: 1.5rem;
padding: 1.2rem 1.5rem;
border-radius: 12px;
text-align: center;
font-weight: 600;
display: none;
font-size: 1.1rem;
position: relative;
overflow: hidden;
}
.form-status::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: currentColor;
opacity: 0.3;
}
.form-status.success {
display: block;
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
color: #155724;
border: 2px solid #c3e6cb;
box-shadow: 0 4px 15px rgba(21, 87, 36, 0.1);
}
.form-status.error {
display: block;
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
color: #721c24;
border: 2px solid #f5c6cb;
box-shadow: 0 4px 15px rgba(114, 28, 36, 0.1);
}
.form-status.loading {
display: block;
background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
color: #0c5460;
border: 2px solid #bee5eb;
box-shadow: 0 4px 15px rgba(12, 84, 96, 0.1);
}
.form-status.loading::after {
content: '';
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
width: 20px;
height: 20px;
border: 2px solid currentColor;
border-top: 2px solid transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: translateY(-50%) rotate(0deg); }
100% { transform: translateY(-50%) rotate(360deg); }
}
/* 表單驗證錯誤樣式 */
.contact-form input.error,
.contact-form textarea.error {
border-color: #f44336;
background-color: #ffebee;
box-shadow: 0 0 0 4px rgba(244, 67, 54, 0.15), 0 4px 15px rgba(244, 67, 54, 0.1);
animation: shake 0.5s ease-in-out;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.field-error {
color: #f44336;
font-size: 0.9rem;
margin-top: 0.5rem;
display: block;
font-weight: 600;
background: rgba(244, 67, 54, 0.1);
padding: 0.5rem 0.8rem;
border-radius: 6px;
border-left: 3px solid #f44336;
animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 表單驗證成功樣式 */
.contact-form input.valid,
.contact-form textarea.valid {
border-color: #4caf50;
background-color: #f1f8e9;
box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.15), 0 4px 15px rgba(76, 175, 80, 0.1);
}
.contact-form input.valid::after,
.contact-form textarea.valid::after {
content: '✓';
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #4caf50;
font-weight: bold;
font-size: 1.2rem;
}
/* Footer */
footer {
background: var(--primary-black);
color: var(--primary-white);
padding: 3rem 0 2rem;
margin-top: auto;
}
.footer-content {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 3rem;
align-items: start;
}
.footer-logo {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.footer-logo img {
border-radius: 0;
transition: transform var(--transition-medium);
width: 60px;
height: 60px;
object-fit: contain;
}
.footer-logo img:hover {
transform: var(--transform-scale);
}
.copyright p {
margin: 0.25rem 0;
font-size: 0.9rem;
line-height: 1.4;
color: var(--primary-white);
opacity: 0.9;
}
.copyright p:first-child {
font-weight: 600;
font-size: 1rem;
}
.footer-links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.footer-section h4 {
color: var(--primary-white);
font-size: 1.1rem;
margin-bottom: 1rem;
font-family: 'Noto Serif TC', serif;
font-weight: 600;
}
.footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-section li {
margin-bottom: 0.5rem;
}
.footer-section a {
color: var(--primary-white);
text-decoration: none;
opacity: 0.8;
transition: all var(--transition-medium);
position: relative;
display: inline-block;
padding: 0.25rem 0;
}
.footer-section a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: var(--primary-red);
transition: width 0.3s ease;
}
.footer-section a:hover {
opacity: 1;
color: var(--primary-red);
}
.footer-section a:hover::after {
width: 100%;
}
.footer-section i {
margin-right: 0.5rem;
width: 16px;
text-align: center;
}
.footer-social {
text-align: center;
}
.footer-social h4 {
color: var(--primary-white);
font-size: 1.1rem;
margin-bottom: 1rem;
font-family: 'Noto Serif TC', serif;
}
.social-links {
display: flex;
justify-content: center;
gap: 1.5rem;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50%;
text-decoration: none;
font-weight: 500;
transition: all var(--transition-medium);
border: 2px solid transparent;
}
.social-link.line {
background: #00C300;
color: var(--primary-white);
}
.social-link.line:hover {
background: #00A300;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 195, 0, 0.3);
}
.social-link.facebook {
background: #1877F2;
color: var(--primary-white);
}
.social-link.facebook:hover {
background: #166FE5;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
}
.social-link i {
font-size: 1.3rem;
}
/* 圖片響應式優化 */
img {
max-width: 100%;
height: auto;
display: block;
}
/* 響應式容器優化 */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 響應式文字優化 */
h1, h2, h3, h4, h5, h6 {
word-wrap: break-word;
hyphens: auto;
}
p, span, div {
word-wrap: break-word;
overflow-wrap: break-word;
}
/* 響應式按鈕優化 */
button, .btn, .cta-button, .submit-btn {
min-height: 44px;
min-width: 44px;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
border-radius: 8px;
font-size: 1rem;
font-weight: 500;
transition: all 0.2s ease;
}
/* 手機版按鈕優化 */
@media (max-width: 768px) {
button, .btn, .cta-button, .submit-btn {
min-height: 48px;
min-width: 48px;
padding: 12px 20px;
font-size: 1rem;
}
}
/* 響應式連結優化 */
a {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* 響應式表單優化 */
input, textarea, select {
min-height: 44px;
touch-action: manipulation;
-webkit-appearance: none;
appearance: none;
border-radius: 4px;
}
/* 響應式卡片優化 */
.card, .service-card, .event-card {
word-wrap: break-word;
overflow-wrap: break-word;
}
.hero-bg-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.about-logo-image {
width: 100%;
height: auto;
max-width: 300px;
margin: 0 auto;
}
.logo-image img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Responsive Design */
@media (max-width: 1024px) {
.container {
padding: 0 30px;
}
.hero-content h2 {
font-size: 3.2rem;
letter-spacing: 0.3px;
}
/* 平板版優化 */
.about-content {
flex-direction: column;
text-align: center;
}
.about-text {
margin-bottom: 2rem;
text-align: left;
}
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
#services {
padding: 4rem 0;
}
/* 優化標題和文字大小 */
.section-title {
font-size: 2.2rem;
}
.section-subtitle {
font-size: 1.1rem;
}
/* 平板版圖片優化 */
.about-logo-image {
max-width: 250px;
}
.hero-bg-image {
object-position: center 25%;
}
}
@media (max-width: 768px) {
.hero {
position: relative;
height: 100vh;
height: 100dvh; /* 動態視窗高度，支援現代瀏覽器 */
margin-top: 0; /* 移除頂部間距 */
z-index: 1; /* 確保在header下方 */
}
/* 添加漸層遮罩以提升文字可讀性 */
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.25) 0%,
rgba(0, 0, 0, 0.05) 50%,
rgba(0, 0, 0, 0.35) 100%
);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
padding: 100px 1.5rem 2rem 1.5rem; /* 為header留出空間，增加左右間距 */
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.hero-bg-image {
object-position: center 20%;
height: 100vh;
height: 100dvh; /* 動態視窗高度 */
min-height: 100vh;
min-height: 100dvh;
filter: brightness(0.8) contrast(1.1); /* 增強對比度和亮度 */
/* 優化手機版裁切效果 */
object-fit: cover;
min-width: 100%;
min-height: 100%;
width: 100%;
}
.header-content {
flex-direction: row;
justify-content: space-between;
align-items: center;
position: relative;
}
.logo {
flex-direction: row;
text-align: left;
gap: 10px;
}
.logo-text h1 {
font-size: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 600;
line-height: 1.2;
}
.logo-text .subtitle {
font-size: 0.75rem;
font-weight: 500;
opacity: 0.9;
}
/* 手機版漢堡選單 */
.mobile-menu-toggle {
display: block;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
color: var(--primary-white);
font-size: 1.5rem;
cursor: pointer;
padding: 12px;
z-index: 1001;
position: relative;
transition: all var(--transition-medium);
backdrop-filter: blur(10px);
min-height: 48px;
min-width: 48px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:active {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
transform: scale(1.05);
}
.mobile-menu-toggle:active {
transform: scale(0.95);
background: rgba(255, 255, 255, 0.3);
}
nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--primary-red);
box-shadow: var(--shadow-medium);
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: all var(--transition-medium);
z-index: 1000;
}
nav.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
nav ul {
flex-direction: column;
gap: 0;
padding: 1rem 0;
}
nav li {
width: 100%;
text-align: center;
}
nav a {
display: block;
padding: 1rem 2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: background-color var(--transition-medium);
line-height: 2;
}
nav a:hover {
background: rgba(255, 255, 255, 0.1);
}
/* 漢堡選單按鈕樣式 - 只在手機版顯示 */
.hamburger-line {
display: block;
width: 25px;
height: 3px;
background: var(--primary-white);
margin: 4px 0;
transition: all 0.3s ease;
border-radius: 2px;
transform-origin: center;
}
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
.hero-content h2 {
font-size: 3.2rem;
letter-spacing: 0.3px;
line-height: 1.1;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); /* 增強文字陰影 */
margin-bottom: 1.5rem;
}
.hero-content p {
font-size: 1.15rem;
line-height: 1.8;
letter-spacing: 0.2px;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
max-width: 92%;
margin: 0 auto 2.2rem auto;
padding: 0 1rem;
word-spacing: 0.05em;
}
.about-content {
grid-template-columns: 1fr;
gap: 3.5rem;
padding: 2rem 0;
}
.about-text {
text-align: left;
}
.about-text h3 {
font-size: 1.9rem;
letter-spacing: 0.2px;
text-align: left;
}
.about-text p {
font-size: 1.05rem;
letter-spacing: 0.05px;
text-align: left;
}
/* 手機版圖片優化 */
.about-logo-image {
max-width: 200px;
width: 100%;
height: auto;
}
.hero-bg-image {
object-position: center 20%;
height: 60vh;
min-height: 400px;
}
.logo-image img {
width: 65px;
height: 65px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
transition: all var(--transition-medium);
}
.logo-image img:hover {
transform: scale(1.05);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.about-logo-title {
font-size: 1.1rem;
margin-top: 1rem;
letter-spacing: 0.05px;
line-height: 1.2;
white-space: normal;
overflow: visible;
text-overflow: unset;
}
.about-logo-subtitle {
font-size: 1rem;
margin-top: 0.5rem;
letter-spacing: 0.1px;
line-height: 1.3;
}
.about-logo-description {
font-size: 0.9rem;
margin-top: 0.4rem;
letter-spacing: 0.05px;
line-height: 1.4;
}
.about-logo-title {
font-size: 1.1rem;
margin-top: 1rem;
letter-spacing: 0.05px;
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.about-logo-subtitle {
font-size: 1.1rem;
margin-top: 0.5rem;
letter-spacing: 0.1px;
line-height: 1.2;
}
.about-logo-description {
font-size: 0.9rem;
margin-top: 0.4rem;
letter-spacing: 0.05px;
line-height: 1.3;
}
}
/* 超小螢幕優化 (320px以下) */
@media (max-width: 320px) {
.container {
padding: 0 10px;
}
.hero-content h2 {
font-size: 2.2rem;
line-height: 1.1;
}
.hero-content p {
font-size: 0.9rem;
line-height: 1.7;
letter-spacing: 0.1px;
padding: 0 0.5rem;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
word-spacing: 0.03em;
max-width: 95%;
}
.logo-text h1 {
font-size: 0.9rem;
}
.logo-text .subtitle {
font-size: 0.7rem;
}
.section-title {
font-size: 2.2rem;
}
.service-card {
padding: 1.5rem 1rem;
margin-bottom: 1.5rem;
}
.service-card h4 {
font-size: 1.1rem;
}
.service-card p {
font-size: 0.9rem;
}
.about-text {
text-align: left;
}
.about-text h3 {
font-size: 1.7rem;
letter-spacing: 0.1px;
text-align: left;
}
.about-text p {
font-size: 1rem;
letter-spacing: 0.02px;
text-align: left;
}
.mission-content h4 {
font-size: 1.4rem;
}
.mission-content p {
font-size: 1.35rem;
}
.org-description h4 {
font-size: 1.3rem;
}
.org-description p {
font-size: 1rem;
}
.contact-content {
grid-template-columns: 1fr;
gap: 3rem;
align-items: stretch;
}
.services-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
#services {
padding: 3rem 0;
}
/* 平板版頁尾優化 */
.footer-content {
grid-template-columns: 1fr 1.5fr 1fr;
gap: 2.5rem;
}
.footer-links {
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.footer-section h4 {
font-size: 1rem;
}
.footer-section a {
font-size: 0.9rem;
}
.footer-social h4 {
font-size: 1rem;
}
}
@media (max-width: 768px) {
.footer-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.footer-logo {
align-items: center;
text-align: center;
}
.footer-links {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.footer-section {
text-align: center;
}
.footer-section ul {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.footer-section li {
margin-bottom: 0;
}
.footer-social {
text-align: center;
}
.social-links {
flex-direction: row;
justify-content: center;
gap: 1rem;
}
.social-link {
justify-content: center;
}
}
@media (max-width: 480px) {
.container {
padding: 0 15px;
}
/* 小螢幕主視覺區域優化 - 動態滿版效果 */
.hero {
height: 100vh;
height: 100dvh; /* 動態視窗高度，支援現代瀏覽器 */
position: relative;
}
/* 添加漸層遮罩以提升文字可讀性 */
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.3) 0%,
rgba(0, 0, 0, 0.1) 50%,
rgba(0, 0, 0, 0.4) 100%
);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-bg-image {
height: 100vh;
height: 100dvh; /* 動態視窗高度 */
min-height: 100vh;
min-height: 100dvh;
object-position: center 25%;
object-fit: cover;
filter: brightness(0.75) contrast(1.15) saturate(1.1); /* 優化圖片效果 */
/* 優化小螢幕裁切效果 */
min-width: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.hero-content {
padding: 2rem 1.2rem;
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hero-content h2 {
font-size: 2.6rem;
line-height: 1.2;
letter-spacing: 0.2px;
margin-bottom: 1.2rem;
text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.7); /* 更強的文字陰影 */
font-weight: 700;
}
.hero-content p {
font-size: 1.1rem;
line-height: 1.75;
letter-spacing: 0.15px;
margin-bottom: 2.2rem;
max-width: 94%;
margin-left: auto;
margin-right: auto;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
font-weight: 400;
padding: 0 0.8rem;
word-spacing: 0.05em;
}
.cta-button {
padding: 1.2rem 2rem;
font-size: 1.1rem;
min-height: 52px;
min-width: 160px;
border-radius: 12px;
font-weight: 600;
box-shadow: 0 6px 20px rgba(229, 115, 115, 0.4);
transition: all var(--transition-medium);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(229, 115, 115, 0.5);
}
/* 小螢幕標題優化 */
.section-title {
font-size: 2.6rem;
line-height: 1.2;
letter-spacing: 0.3px;
margin-bottom: 1.2rem;
font-weight: 700;
color: var(--primary-red);
text-align: center;
}
/* 關於我們頁面標題與分頁按鈕之間的間距 */
.about .section-title {
margin-bottom: 4rem;
}
.section-subtitle {
font-size: 1rem;
line-height: 1.5;
margin-bottom: 2rem;
color: var(--gray-dark);
text-align: center;
font-weight: 400;
}
/* 小螢幕服務卡片優化 */
.service-card {
padding: 2rem 1.5rem;
margin-bottom: 1.5rem;
border-radius: 18px;
text-align: center;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
transition: all var(--transition-medium);
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}
.service-card h4 {
font-size: 1.2rem;
line-height: 1.3;
margin-bottom: 1rem;
font-weight: 600;
color: var(--primary-red);
}
.service-card p {
font-size: 0.95rem;
line-height: 1.7;
color: var(--primary-black);
}
/* 小螢幕關於我們優化 */
.about-text h3 {
font-size: 1.5rem;
line-height: 1.3;
margin-bottom: 0.8rem;
}
.about-text p {
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 0.8rem;
}
/* 小螢幕圖片優化 */
.about-logo-image {
max-width: 150px;
width: 100%;
height: auto;
}
.hero-bg-image {
object-position: center 15%;
height: 50vh;
min-height: 350px;
}
.logo-image img {
width: 50px;
height: 50px;
}
.about-logo-title {
font-size: 1rem;
line-height: 1.2;
margin-top: 0.8rem;
white-space: normal;
overflow: visible;
text-overflow: unset;
}
.about-logo-subtitle {
font-size: 0.85rem;
margin-top: 0.4rem;
line-height: 1.3;
}
.about-logo-description {
font-size: 0.8rem;
margin-top: 0.3rem;
line-height: 1.4;
}
/* 小螢幕其他圖片優化 */
.footer-logo img {
width: 50px;
height: 50px;
}
.leader-photo {
width: calc(100% + 2px); /* 稍微放大以覆蓋角落 */
height: calc(100% + 2px); /* 稍微放大以覆蓋角落 */
object-fit: cover;
object-position: center center;
border-radius: 12px; /* 與外框相同的圓角 */
position: absolute;
top: -1px;
left: -1px;
}
.leader-avatar {
width: 180px;
height: 225px;
border-width: 3px;
border: 3px solid #8B1A1A;
border-radius: 12px;
padding: 0;
box-shadow: 0 3px 10px rgba(139, 26, 26, 0.25);
background: transparent; /* 透明背景 */
}
.leader-badge {
top: 8px;
right: 8px;
padding: 4px 10px;
font-size: 0.75rem;
}
.leader-card.featured .leader-badge {
top: 10px;
right: 10px;
padding: 5px 12px;
font-size: 0.8rem;
}
.leader-card.featured .leader-avatar {
width: 200px;
height: 250px;
border-width: 4px;
border: 4px solid #8B1A1A;
border-radius: 14px;
padding: 0;
box-shadow: 0 4px 12px rgba(139, 26, 26, 0.3);
background: transparent; /* 透明背景 */
}
.leader-card.featured .leader-photo {
border-radius: 14px; /* 與外框相同的圓角 */
}
/* 小螢幕聯絡區域優化 */
.contact-simple p {
font-size: 0.9rem;
line-height: 1.4;
margin-bottom: 0.8rem;
}
.contact-simple strong {
display: inline-block;
min-width: 50px;
margin-right: 0.3rem;
}
.form-group input,
.form-group textarea {
font-size: 16px; /* 防止iOS縮放 */
padding: 12px 16px;
min-height: 48px;
border-radius: 8px;
border: 2px solid #e0e0e0;
width: 100%;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
}
.form-group input:focus,
.form-group textarea:focus {
border-color: var(--primary-red);
outline: none;
box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
}
.submit-btn {
padding: 0.8rem 1.5rem;
font-size: 1rem;
min-height: 44px;
width: 100%;
}
/* 小螢幕頁尾優化 */
footer {
padding: 2rem 0 1.5rem;
}
.footer-content {
gap: 1.5rem;
}
.footer-logo img {
width: 50px;
height: 50px;
}
.copyright p {
font-size: 0.8rem;
}
.copyright p:first-child {
font-size: 0.9rem;
}
.footer-section h4 {
font-size: 1rem;
margin-bottom: 0.75rem;
}
.footer-section a {
font-size: 0.85rem;
padding: 0.3rem 0;
}
.footer-section i {
width: 14px;
font-size: 0.8rem;
}
.footer-social h4 {
font-size: 0.9rem;
margin-bottom: 0.75rem;
}
.social-link {
width: 40px;
height: 40px;
}
.social-link i {
font-size: 1.1rem;
}
/* 觸控優化 */
a, button, input, textarea, select {
min-height: 44px;
min-width: 44px;
}
/* 手機版導航優化 */
.mobile-menu-toggle {
padding: 12px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
min-height: 44px;
min-width: 44px;
transition: all 0.3s ease;
}
.mobile-menu-toggle:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.05);
}
.hamburger-line {
width: 22px;
height: 2px;
margin: 3px 0;
}
nav a {
padding: 1rem 1.5rem;
font-size: 1.3rem;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
/* 小螢幕活動網格優化 */
.events-grid {
grid-template-columns: 1fr;
gap: 1rem;
margin-top: 1.5rem;
}
.event-content {
padding: 1.2rem;
}
.event-card {
margin-bottom: 1.5rem;
border-radius: 16px;
}
.event-content h3 {
font-size: 1.1rem;
}
.event-description {
font-size: 0.8rem;
}
}
/* 超小螢幕優化 (320px以下) - 動態滿版效果 */
@media (max-width: 320px) {
.container {
padding: 0 10px;
}
/* 超小螢幕主視覺區域優化 */
.hero {
height: 100vh;
height: 100dvh; /* 動態視窗高度 */
}
.hero-bg-image {
height: 100vh;
height: 100dvh; /* 動態視窗高度 */
min-height: 100vh;
min-height: 100dvh;
object-position: center 25%;
object-fit: cover;
}
.hero-content {
padding: 1.5rem 1rem;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.hero-content h2 {
font-size: 1.8rem;
line-height: 1.1;
margin-bottom: 0.8rem;
}
.hero-content p {
font-size: 0.95rem;
line-height: 1.7;
letter-spacing: 0.1px;
margin-bottom: 1.5rem;
max-width: 96%;
padding: 0 0.5rem;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
word-spacing: 0.03em;
}
.section-title {
font-size: 2rem;
line-height: 1.1;
}
/* 關於我們頁面標題與分頁按鈕之間的間距 */
.about .section-title {
margin-bottom: 4rem;
}
.about-logo-image {
max-width: 120px;
}
.logo-image img {
width: 40px;
height: 40px;
}
.service-card {
padding: 1.2rem 1rem;
margin-bottom: 1.2rem;
border-radius: 12px;
}
.service-card h4 {
font-size: 1rem;
}
.service-card p {
font-size: 0.85rem;
}
.contact-simple p {
font-size: 0.85rem;
}
.form-group input,
.form-group textarea {
font-size: 0.9rem;
padding: 0.7rem;
}
}
/* 橫向手機優化 - 動態滿版效果 */
@media (max-height: 500px) and (orientation: landscape) {
.hero {
height: 100vh;
height: 100dvh; /* 動態視窗高度 */
}
.hero-bg-image {
height: 100vh;
height: 100dvh; /* 動態視窗高度 */
min-height: 100vh;
min-height: 100dvh;
object-position: center 30%;
object-fit: cover;
}
.hero-content {
padding: 1rem 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hero-content h2 {
font-size: 2rem;
margin-bottom: 0.8rem;
}
.hero-content p {
font-size: 1rem;
margin-bottom: 1rem;
}
}
/* 中等手機尺寸優化 (375px以下) */
@media (max-width: 375px) {
.hero {
height: 100vh;
height: 100dvh;
}
.hero-bg-image {
height: 100vh;
height: 100dvh;
min-height: 100vh;
min-height: 100dvh;
object-position: center 22%;
object-fit: cover;
}
.hero-content {
padding: 1.8rem 1rem;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hero-content h2 {
font-size: 2rem;
line-height: 1.15;
margin-bottom: 0.9rem;
}
.hero-content p {
font-size: 0.9rem;
line-height: 1.7;
letter-spacing: 0.1px;
margin-bottom: 1.5rem;
max-width: 95%;
padding: 0 0.5rem;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
word-spacing: 0.03em;
}
}
/* 高解析度螢幕優化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.hero-bg-image,
.about-logo-image,
.logo-image img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
}
/* 背景圖片裁切優化 */
.hero-bg-image {
/* 確保在任何螢幕比例下都能完美填滿 */
object-fit: cover;
object-position: center center;
/* 防止圖片變形 */
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
/* 優化裁切算法 */
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
/* 橫向螢幕優化 */
@media (orientation: landscape) and (max-width: 768px) {
.hero-bg-image {
object-position: center 30%;
}
}
/* 直向螢幕優化 */
@media (orientation: portrait) and (max-width: 768px) {
.hero-bg-image {
object-position: center 20%;
}
}
/* 超寬螢幕優化 */
@media (min-width: 1920px) {
.hero-bg-image {
object-position: center 15%;
}
}
/* 極小螢幕優化 */
@media (max-width: 320px) {
.hero-bg-image {
object-position: center 30%;
/* 確保在極小螢幕上也能完美填滿 */
min-width: 100vw;
min-height: 100vh;
}
}
/* 背景圖片載入優化 */
.hero-bg-image {
/* 防止載入時的閃爍 */
opacity: 0;
transition: opacity 0.5s ease;
/* 圖片載入優化 */
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
.hero-bg-image.loaded {
opacity: 1;
}
.hero-bg-image[src=""] {
opacity: 0;
}
/* 打印樣式優化 */
@media print {
.mobile-menu-toggle,
.hamburger-line,
nav {
display: none !important;
}
.container {
max-width: none;
padding: 0;
}
.hero-bg-image {
height: auto;
min-height: 200px;
}
.about-logo-image {
max-width: 100px;
}
}
/* 手機版服務圖標優化 */
.service-icon {
width: 70px; /* 手機版縮小圖標 */
height: 70px;
margin-bottom: 1rem;
}
/* 手機版額外優化 */
@media (max-width: 768px) {
.service-card h4 {
font-size: 1.3rem; /* 調整標題大小 */
margin-bottom: 1rem;
}
.service-card p {
font-size: 0.95rem; /* 調整內容文字大小 */
line-height: 1.6;
}
/* 改善觸控體驗 */
.cta-button, .event-register, .submit-btn {
min-height: 48px;
min-width: 48px;
touch-action: manipulation;
}
/* 優化滾動體驗 */
html {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
/* 改善文字選擇 */
::selection {
background: var(--primary-red);
color: var(--primary-white);
}
/* 優化按鈕和連結的觸控反饋 */
button, a, .clickable {
-webkit-tap-highlight-color: rgba(229, 115, 115, 0.3);
}
.contact {
background-attachment: scroll;
padding: 3rem 0;
}
.contact-form {
padding: 2rem 1.5rem;
margin: 1rem 0; /* 增加外邊距 */
}
.contact-form input,
.contact-form textarea {
font-size: 16px; /* 防止 iOS 縮放 */
padding: 12px 15px;
border-radius: 8px; /* 圓角優化 */
border: 2px solid #e2e8f0; /* 明確邊框 */
width: 100%;
box-sizing: border-box;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: var(--primary-red);
outline: none;
box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
}
.btn, .cta-button, .event-register, .about-link {
padding: 12px 24px;
font-size: 1rem;
min-height: 44px; /* 符合觸控標準 */
}
.event-card {
margin-bottom: 2rem;
}
.event-image {
height: 200px;
}
.logo-image {
width: 60px;
height: 60px;
}
.logo-text h1 {
font-size: 0.85rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.logo-text .subtitle {
font-size: 0.65rem;
}
/* 觸控優化 */
a, button, input, textarea, select {
min-height: 44px;
min-width: 44px;
}
/* 手機版導航優化 */
.mobile-menu-toggle {
padding: 12px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.mobile-menu-toggle:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.05);
}
/* 改善可讀性 */
p, li {
line-height: 1.6;
}
/* 表單優化 */
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--gray-light);
}
::-webkit-scrollbar-thumb {
background: var(--primary-red);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--dark-red);
}
/* 活動模態框樣式 */
.event-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
animation: fadeIn 0.3s ease;
}
.event-modal-content {
background-color: var(--primary-white);
margin: 2% auto;
padding: 0;
border-radius: 20px;
width: 90%;
max-width: 800px;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideIn 0.3s ease;
}
.event-modal-close {
position: absolute;
top: 20px;
right: 25px;
color: var(--primary-white);
font-size: 2rem;
font-weight: bold;
cursor: pointer;
z-index: 1001;
background: rgba(0, 0, 0, 0.5);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.event-modal-close:hover {
background: rgba(0, 0, 0, 0.8);
transform: scale(1.1);
}
.event-modal-header {
position: relative;
height: 300px;
overflow: hidden;
border-radius: 20px 20px 0 0;
}
.event-modal-badge {
position: absolute;
top: 20px;
right: 20px;
background: var(--primary-red);
color: var(--primary-white);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
z-index: 10;
}
.event-modal-image {
width: 100%;
height: 100%;
overflow: hidden;
}
.event-modal-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.event-modal-image:hover img {
transform: scale(1.05);
}
.event-modal-body {
padding: 2rem;
}
.event-modal-body h2 {
color: var(--primary-red);
font-size: 1.8rem;
margin-bottom: 1.5rem;
font-family: 'Noto Serif TC', serif;
font-weight: 600;
line-height: 1.3;
}
.event-modal-details {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-bottom: 2rem;
padding: 1.5rem;
background: var(--gray-light);
border-radius: 15px;
}
.event-modal-detail {
display: flex;
align-items: center;
gap: 0.8rem;
font-size: 1rem;
color: var(--primary-black);
}
.detail-icon {
font-size: 1.2rem;
width: 24px;
text-align: center;
}
.event-modal-description {
margin-bottom: 2rem;
}
.event-modal-description h3 {
color: var(--primary-red);
font-size: 1.3rem;
margin-bottom: 1rem;
font-family: 'Noto Serif TC', serif;
}
.event-modal-description p {
color: var(--primary-black);
line-height: 1.8;
font-size: 1rem;
text-align: justify;
}
.event-modal-tags {
margin-bottom: 2rem;
}
.event-modal-tags .tag {
background: rgba(211, 47, 47, 0.1);
color: var(--primary-red);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
}
.event-modal-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.event-modal-register,
.event-modal-contact {
display: inline-block;
padding: 1rem 2rem;
border-radius: 25px;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
transition: all 0.3s ease;
text-align: center;
min-width: 150px;
}
.event-modal-register {
background: var(--primary-red);
color: var(--primary-white);
}
.event-modal-register:hover {
background: var(--dark-red);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(211, 47, 47, 0.3);
}
.event-modal-contact {
background: var(--gray-light);
color: var(--primary-black);
border: 2px solid var(--primary-red);
}
.event-modal-contact:hover {
background: var(--primary-red);
color: var(--primary-white);
transform: translateY(-2px);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-50px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* 圖片瀏覽模態框樣式 */
.image-modal {
display: none;
position: fixed;
z-index: 2000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.95);
backdrop-filter: blur(10px);
animation: fadeIn 0.3s ease;
}
.image-modal-content {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
box-sizing: border-box;
}
.image-modal-close {
position: absolute;
top: 20px;
right: 30px;
color: var(--primary-white);
font-size: 3rem;
font-weight: bold;
cursor: pointer;
z-index: 2001;
background: rgba(0, 0, 0, 0.5);
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.image-modal-close:hover {
background: rgba(0, 0, 0, 0.8);
transform: scale(1.1);
}
.image-container {
position: relative;
max-width: 70%;
max-height: 70%;
display: flex;
align-items: center;
justify-content: center;
}
.image-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 10px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
transition: transform 0.3s ease;
cursor: grab;
}
.image-container img:active {
cursor: grabbing;
}
.image-controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
background: rgba(0, 0, 0, 0.7);
padding: 10px 20px;
border-radius: 25px;
backdrop-filter: blur(10px);
}
.image-btn {
background: var(--primary-red);
color: var(--primary-white);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
font-size: 1.2rem;
font-weight: bold;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.image-btn:hover {
background: var(--dark-red);
transform: scale(1.1);
}
.image-btn:active {
transform: scale(0.95);
}
/* 活動模態框圖片懸停效果 */
.event-modal-image {
position: relative;
cursor: pointer;
overflow: hidden;
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
color: var(--primary-white);
font-size: 1.2rem;
font-weight: 600;
}
.event-modal-image:hover .image-overlay {
opacity: 1;
}
.zoom-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.zoom-text {
font-size: 1rem;
}
/* 響應式設計 */
@media (max-width: 768px) {
.event-modal-content {
width: 95%;
margin: 5% auto;
max-height: 85vh;
}
.event-modal-header {
height: 200px;
}
.event-modal-body {
padding: 1.5rem;
}
.event-modal-body h2 {
font-size: 1.5rem;
}
.event-modal-details {
padding: 1rem;
}
.event-modal-actions {
flex-direction: column;
align-items: center;
}
.event-modal-register,
.event-modal-contact {
width: 100%;
max-width: 300px;
}
.image-modal-content {
padding: 1rem;
}
.image-modal-close {
top: 10px;
right: 15px;
width: 50px;
height: 50px;
font-size: 2rem;
}
.image-controls {
bottom: 10px;
padding: 8px 16px;
}
.image-btn {
width: 35px;
height: 35px;
font-size: 1rem;
}
}
/* Events Preview Section */
.events-preview {
background-image: url('img/background2.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 6rem 0;
position: relative;
overflow: hidden;
}
.events-preview::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
z-index: 1;
}
.events-preview .container {
position: relative;
z-index: 2;
}
.events-preview-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.event-preview-card {
background: var(--primary-white);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border: 1px solid rgba(211, 47, 47, 0.1);
display: flex;
flex-direction: column;
height: 100%;
cursor: pointer;
}
.event-preview-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(211, 47, 47, 0.15);
border-color: var(--primary-red);
}
.event-preview-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: linear-gradient(135deg, #d32f2f 0%, #f44336 100%);
color: var(--primary-white);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
z-index: 3;
box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);
}
.event-preview-image {
position: relative;
height: 350px;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.event-preview-image img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
transition: transform 0.4s ease;
}
.event-preview-card:hover .event-preview-image img {
transform: scale(1.02);
}
.event-preview-content {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex: 1;
}
.event-preview-content h3 {
color: var(--primary-red);
font-size: 1.2rem;
margin-bottom: 0.8rem;
font-family: 'Noto Serif TC', serif;
font-weight: 600;
line-height: 1.3;
}
.event-preview-date,
.event-preview-time,
.event-preview-location {
color: #666;
margin-bottom: 0.4rem;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.event-preview-description {
color: #555;
line-height: 1.5;
margin: 1rem 0;
font-size: 0.9rem;
position: relative;
}
.event-preview-description .description-text {
margin: 0;
transition: max-height 0.3s ease;
overflow: hidden;
}
.event-preview-description .description-text.expanded {
max-height: none !important;
}
.event-preview-description .description-toggle {
background: none;
border: none;
color: var(--primary-red);
cursor: pointer;
font-size: 0.8rem;
padding: 0.25rem 0;
margin-top: 0.5rem;
display: flex;
align-items: center;
gap: 0.25rem;
transition: all 0.2s ease;
font-weight: 500;
}
.event-preview-description .description-toggle:hover {
color: var(--primary-red-dark);
text-decoration: underline;
}
.event-preview-description .description-toggle .toggle-icon {
font-size: 0.7rem;
transition: transform 0.2s ease;
display: inline-block;
}
.event-preview-bottom {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.event-preview-tags {
display: flex;
gap: 0.5rem;
margin: 0;
flex-wrap: wrap;
}
.event-preview-tags .tag {
background: rgba(211, 47, 47, 0.1);
color: var(--primary-red);
padding: 0.3rem 0.8rem;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 500;
}
.event-preview-register {
display: inline-block;
background: var(--primary-red);
color: var(--primary-white);
padding: 0.8rem 1.5rem;
text-decoration: none;
border-radius: 25px;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
text-align: center;
width: 100%;
box-sizing: border-box;
margin-top: 0;
}
.event-preview-register:hover {
background: var(--dark-red);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(211, 47, 47, 0.3);
}
.events-preview-cta {
text-align: center;
margin-top: 3rem;
padding: 2rem;
background: rgba(255, 255, 255, 0.8);
border-radius: 20px;
backdrop-filter: blur(10px);
}
.events-preview-link {
display: inline-block;
background: var(--primary-white);
color: var(--primary-red);
border: 2px solid var(--primary-red);
padding: 1rem 2.5rem;
text-decoration: none;
border-radius: 30px;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.events-preview-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.5s;
}
.events-preview-link:hover::before {
left: 100%;
}
.events-preview-link:hover {
background: var(--primary-red);
color: var(--primary-white);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(211, 47, 47, 0.3);
}
/* 響應式設計 */
@media (max-width: 768px) {
.events-preview {
background-attachment: scroll;
padding: 4rem 0;
}
.events-preview-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 2rem;
}
.event-preview-content {
padding: 1.2rem;
}
.event-preview-content h3 {
font-size: 1.1rem;
}
.event-preview-description {
font-size: 0.85rem;
}
.events-preview-cta {
padding: 1.5rem;
}
.events-preview-link {
padding: 0.8rem 2rem;
font-size: 1rem;
}
}
/* Events Section */
.events {
background: var(--primary-white);
padding: 6rem 0;
}
@media (max-width: 768px) {
.events-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.event-card {
background: var(--primary-white);
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-light);
transition: all var(--transition-slow);
border: 2px solid transparent;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
cursor: pointer;
}
.event-card:hover {
transform: var(--transform-hover);
box-shadow: var(--shadow-medium);
border-color: var(--primary-red);
}
.event-card.featured {
border-color: var(--primary-red);
box-shadow: var(--shadow-medium);
}
.event-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--primary-red);
color: var(--primary-white);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
z-index: 2;
}
.event-image {
position: relative;
height: 500px;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.event-image img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
transition: transform var(--transition-medium);
}
.event-card:hover .event-image img {
transform: scale(1.02);
}
.event-content {
padding: 2rem;
display: flex;
flex-direction: column;
flex: 1;
}
.event-content h3 {
color: var(--primary-red);
font-size: 1.5rem;
margin-bottom: 1.2rem;
font-family: 'Noto Serif TC', serif;
font-weight: 600;
letter-spacing: 0.2px;
line-height: 1.3;
}
.event-date, .event-time, .event-location {
color: var(--primary-black);
margin-bottom: 0.6rem;
font-size: 1rem;
letter-spacing: 0.1px;
line-height: 1.4;
}
.event-description {
color: var(--primary-black);
line-height: 1.7;
margin: 1rem 0;
position: relative;
}
.event-description .description-text {
margin: 0;
transition: max-height 0.3s ease;
overflow: hidden;
}
.event-description .description-text.expanded {
max-height: none !important;
}
.event-description .description-toggle {
background: none;
border: none;
color: var(--primary-red);
cursor: pointer;
font-size: 0.8rem;
padding: 0.25rem 0;
margin-top: 0.5rem;
display: flex;
align-items: center;
gap: 0.25rem;
transition: all 0.2s ease;
font-weight: 500;
}
.event-description .description-toggle:hover {
color: var(--primary-red-dark);
text-decoration: underline;
}
.event-description .description-toggle .toggle-icon {
font-size: 0.7rem;
transition: transform 0.2s ease;
display: inline-block;
}
.event-bottom {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.event-tags {
display: flex;
gap: 0.5rem;
margin: 0;
flex-wrap: wrap;
}
.tag {
background: var(--gray-light);
color: var(--primary-black);
padding: 0.3rem 0.8rem;
border-radius: 15px;
font-size: 0.85rem;
font-weight: 500;
}
.event-register {
display: inline-block;
background: var(--primary-red);
color: var(--primary-white);
padding: 0.8rem 1.5rem;
text-decoration: none;
border-radius: 25px;
font-weight: 600;
transition: all 0.3s ease;
margin-top: 0;
text-align: center;
width: 100%;
box-sizing: border-box;
}
.event-register:hover {
background: var(--dark-red);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(211, 47, 47, 0.3);
}
.events-cta {
text-align: center;
margin-top: 3rem;
padding: 2rem;
background: var(--gray-light);
border-radius: 20px;
}
.events-cta p {
color: var(--primary-black);
font-size: 1.2rem; /* 從1.1rem增加到1.2rem */
margin-bottom: 1rem;
}
.events-link {
display: inline-block;
color: var(--primary-red);
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
}
.events-link:hover {
color: var(--dark-red);
transform: translateX(5px);
}
@media (max-width: 768px) {
.events-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.event-card {
margin: 0 1rem;
}
}
/* Events Filter Styles */
.events-filter {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.filter-btn {
background: var(--primary-white);
color: var(--primary-black);
border: 2px solid var(--gray-medium);
padding: 0.8rem 1.5rem;
border-radius: 25px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Noto Serif TC', serif;
}
.filter-btn:hover {
border-color: var(--primary-red);
color: var(--primary-red);
transform: translateY(-2px);
}
.filter-btn.active {
background: var(--primary-red);
color: var(--primary-white);
border-color: var(--primary-red);
box-shadow: 0 4px 15px rgba(211, 47, 47, 0.3);
}
@media (max-width: 768px) {
.events-filter {
gap: 0.5rem;
margin-bottom: 2rem;
}
.filter-btn {
padding: 0.6rem 1.2rem;
font-size: 0.9rem;
}
/* 理事長照片響應式樣式 */
.chairman-avatar-large {
width: 240px;
height: 300px;
min-width: 240px;
min-height: 300px;
max-width: 240px;
max-height: 300px;
margin-bottom: 1.5rem;
}
.chairman-photo {
width: 100%;
height: 100%;
}
.chairman-header {
padding: 2rem 1rem;
min-height: 350px;
flex-direction: column;
text-align: center;
gap: 1.5rem;
}
.chairman-info-header {
text-align: center;
}
.chairman-info-header h3 {
font-size: 2rem;
line-height: 1.2;
}
.chairman-title-large {
font-size: 1.2rem;
line-height: 1.4;
}
.chairman-subtitle {
font-size: 1.05rem;
line-height: 1.3;
}
.chairman-content {
padding: 2rem 1rem;
}
.chairman-info-simple {
padding: 1.5rem;
}
.info-row {
flex-direction: column;
gap: 0.5rem;
}
.info-label {
min-width: auto;
margin-bottom: 0.5rem;
}
.positions-simple {
padding: 1.2rem;
margin-bottom: 1.5rem;
}
.position-main {
padding: 1rem 1.2rem;
margin-bottom: 1.2rem;
}
.position-org {
font-size: 1.2rem;
}
.position-title {
font-size: 1.5rem;
}
.positions-list {
gap: 0;
}
.position-line {
padding: 0.8rem 0;
font-size: 1rem;
line-height: 1.55;
}
.position-line::before {
font-size: 0.85rem;
margin-right: 0.6rem;
margin-top: 0.15rem;
}
.position-line:hover {
padding-left: 0.4rem;
}
}
/* 新活動卡片樣式 - 參考圖片設計 */
.event-card {
background: var(--primary-white);
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all var(--transition-medium);
position: relative;
overflow: hidden;
cursor: pointer;
}
.event-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.event-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--primary-red);
color: var(--primary-white);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
z-index: 2;
}
.event-content {
padding: 2rem;
text-align: center;
}
.event-icon {
font-size: 1.2rem;
color: var(--primary-red);
background: var(--light-red);
padding: 0.5rem 1rem;
border-radius: 20px;
margin-bottom: 1rem;
font-weight: 500;
display: inline-block;
}
.event-datetime {
color: #666;
font-size: 0.875rem;
margin-bottom: 1rem;
font-weight: 400;
}
.event-content h3 {
color: #333;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
line-height: 1.4;
}
.event-description {
color: #666;
font-size: 1rem; /* 從0.875rem增加到1rem */
line-height: 1.7;
margin-bottom: 1.5rem;
text-align: left;
}
.event-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.event-category {
background: var(--primary-red);
color: var(--primary-white);
padding: 0.25rem 0.75rem;
border-radius: 15px;
font-size: 0.75rem;
font-weight: 500;
}
.event-location {
color: #666;
font-size: 0.75rem;
display: flex;
align-items: center;
gap: 0.25rem;
}
.events-cta {
text-align: center;
margin-top: 3rem;
}
.events-link {
display: inline-block;
background: var(--primary-white);
color: var(--primary-red);
border: 2px solid var(--primary-red);
padding: 0.75rem 2rem;
border-radius: 25px;
text-decoration: none;
font-weight: 500;
transition: all var(--transition-medium);
}
.events-link:hover {
background: var(--primary-red);
color: var(--primary-white);
transform: translateY(-2px);
}
/* 活動報名模態框樣式 */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
animation: fadeIn 0.3s ease-in-out;
}
.modal-content {
background-color: white;
margin: 5% auto;
padding: 0;
border-radius: 12px;
width: 90%;
max-width: 500px;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
animation: slideIn 0.3s ease-in-out;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 25px;
border-bottom: 1px solid #e0e0e0;
background: linear-gradient(135deg, #d32f2f 0%, #f44336 100%);
color: white;
border-radius: 12px 12px 0 0;
}
.modal-header h3 {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
}
.close {
color: white;
font-size: 28px;
font-weight: bold;
cursor: pointer;
transition: opacity 0.3s;
}
.close:hover {
opacity: 0.7;
}
.modal form {
padding: 25px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #333;
font-size: 0.9rem;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s, box-shadow 0.3s;
box-sizing: border-box;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: #d32f2f;
box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
}
.form-actions {
display: flex;
gap: 15px;
justify-content: flex-end;
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #e0e0e0;
}
.btn {
padding: 12px 24px;
border: none;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
font-size: 1rem;
min-width: 100px;
}
.btn-primary {
background: #d32f2f;
color: white;
}
.btn-primary:hover {
background: #b71c1c;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);
}
.btn-outline {
background: transparent;
color: #d32f2f;
border: 2px solid #d32f2f;
}
.btn-outline:hover {
background: #d32f2f;
color: white;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 響應式設計 */
/* 桌面版：三欄並排 (預設) */
.events-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 3rem;
}
/* 平板版：兩欄並排 */
@media (max-width: 1024px) and (min-width: 769px) {
.events-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
/* 手機版：單欄垂直排列 */
@media (max-width: 768px) {
.events-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 2rem;
}
.event-content {
padding: 1.5rem;
}
.event-footer {
flex-direction: column;
gap: 0.75rem;
align-items: flex-start;
}
/* 模態框響應式設計 */
.modal-content {
width: 95%;
margin: 2% auto;
max-height: 90vh;
}
.modal-header {
padding: 15px 20px;
}
.modal-header h3 {
font-size: 1.1rem;
}
.modal form {
padding: 20px;
}
.form-actions {
flex-direction: column;
gap: 10px;
}
.btn {
width: 100%;
padding: 14px 20px;
font-size: 1rem;
}
.event-register {
width: 100%;
padding: 12px 20px;
font-size: 1rem;
margin-top: 1rem;
}
}
/* 會員專區樣式 */
.members {
padding: 6rem 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
min-height: 100vh;
}
/* 密碼強度指示器 */
.password-strength-indicator {
font-size: 12px;
margin-top: 5px;
padding: 2px 8px;
border-radius: 4px;
display: inline-block;
}
.password-strength-indicator.weak {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.password-strength-indicator.medium {
background-color: #fff3cd;
color: #856404;
border: 1px solid #ffeaa7;
}
.password-strength-indicator.strong {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
/* 表單幫助文字 */
.form-help {
font-size: 12px;
color: #6c757d;
margin-top: 5px;
display: block;
}
/* 會員類型選擇器樣式 */
select[name="type"] {
padding: 12px 15px;
border: 2px solid #e9ecef;
border-radius: 8px;
font-size: 14px;
background-color: #fff;
transition: all 0.3s ease;
}
select[name="type"]:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
outline: none;
}
select[name="type"] option {
padding: 10px;
}
.member-auth-section {
max-width: 800px;
margin: 0 auto 3rem;
background: var(--primary-white);
border-radius: 20px;
box-shadow: var(--shadow-medium);
overflow: hidden;
}
.auth-tabs {
display: flex;
background: var(--gray-light);
}
.auth-tab-button {
flex: 1;
padding: 1.5rem;
background: transparent;
border: none;
font-size: 1.1rem;
font-weight: 600;
color: var(--gray-dark);
cursor: pointer;
transition: all var(--transition-medium);
border-bottom: 3px solid transparent;
}
.auth-tab-button.active {
background: var(--primary-white);
color: var(--primary-red);
border-bottom-color: var(--primary-red);
}
.auth-tab-button:hover {
background: var(--primary-white);
color: var(--primary-red);
}
.auth-content {
display: none;
padding: 3rem;
}
.auth-content.active {
display: block;
}
.auth-form-container h3 {
text-align: center;
color: var(--primary-red);
margin-bottom: 2rem;
font-size: 1.8rem;
font-family: 'Noto Serif TC', serif;
}
.auth-form {
max-width: 500px;
margin: 0 auto;
}
.auth-form .form-group {
margin-bottom: 1.5rem;
}
.auth-form label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--primary-black);
}
.auth-form input {
width: 100%;
padding: 1rem;
border: 2px solid var(--gray-medium);
border-radius: 10px;
font-size: 1rem;
transition: all var(--transition-medium);
}
.auth-form input:focus {
outline: none;
border-color: var(--primary-red);
box-shadow: 0 0 0 3px rgba(229, 115, 115, 0.1);
}
.auth-button {
width: 100%;
padding: 1.2rem;
background: var(--primary-red);
color: var(--primary-white);
border: none;
border-radius: 10px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-medium);
}
.auth-button:hover {
background: var(--dark-red);
transform: translateY(-2px);
box-shadow: var(--shadow-red);
}
.auth-message {
margin-top: 1rem;
text-align: center;
}
.success-message {
color: #28a745;
background: #d4edda;
padding: 0.8rem;
border-radius: 8px;
border: 1px solid #c3e6cb;
}
.error-message {
color: #dc3545;
background: #f8d7da;
padding: 0.8rem;
border-radius: 8px;
border: 1px solid #f5c6cb;
}
.member-content {
background: var(--primary-white);
border-radius: 20px;
box-shadow: var(--shadow-medium);
overflow: hidden;
}
.member-welcome {
background: linear-gradient(135deg, var(--primary-red) 0%, var(--medium-red) 50%, var(--dark-red) 100%);
color: var(--primary-white);
padding: 2rem;
text-align: center;
}
.member-welcome h3 {
font-size: 2rem;
margin-bottom: 0.5rem;
font-family: 'Noto Serif TC', serif;
}
.member-tabs {
display: flex;
background: var(--gray-light);
border-bottom: 1px solid var(--gray-medium);
}
.member-tab-button {
flex: 1;
padding: 1.2rem 1rem;
background: transparent;
border: none;
font-size: 1rem;
font-weight: 600;
color: var(--gray-dark);
cursor: pointer;
transition: all var(--transition-medium);
border-bottom: 3px solid transparent;
}
.member-tab-button.active {
background: var(--primary-white);
color: var(--primary-red);
border-bottom-color: var(--primary-red);
}
.member-tab-button:hover {
background: var(--primary-white);
color: var(--primary-red);
}
.member-tab-content {
display: none;
padding: 2rem;
min-height: 500px;
}
.member-tab-content.active {
display: block;
}
.benefits-section h3 {
color: var(--primary-red);
margin-bottom: 2rem;
font-size: 1.8rem;
font-family: 'Noto Serif TC', serif;
text-align: center;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.benefit-card {
background: var(--gray-light);
padding: 2rem;
border-radius: 15px;
text-align: center;
transition: all var(--transition-medium);
border: 2px solid transparent;
}
.benefit-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
border-color: var(--primary-red);
}
.benefit-icon {
font-size: 3rem;
color: var(--primary-red);
margin-bottom: 1rem;
}
.benefit-card h4 {
color: var(--primary-black);
margin-bottom: 1rem;
font-size: 1.3rem;
font-family: 'Noto Serif TC', serif;
}
.benefit-card ul {
list-style: none;
padding: 0;
text-align: left;
}
.benefit-card li {
padding: 0.5rem 0;
color: var(--gray-dark);
border-bottom: 1px solid var(--gray-medium);
}
.benefit-card li:last-child {
border-bottom: none;
}
.member-events-section h3 {
color: var(--primary-red);
margin-bottom: 2rem;
font-size: 1.8rem;
font-family: 'Noto Serif TC', serif;
text-align: center;
}
.member-event-card {
background: var(--gray-light);
border-radius: 15px;
overflow: hidden;
transition: all var(--transition-medium);
border: 2px solid transparent;
}
.member-event-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
border-color: var(--primary-red);
}
.profile-section h3 {
color: var(--primary-red);
margin-bottom: 2rem;
font-size: 1.8rem;
font-family: 'Noto Serif TC', serif;
text-align: center;
}
.profile-info {
background: var(--gray-light);
padding: 2rem;
border-radius: 15px;
margin-bottom: 2rem;
}
.profile-item {
display: flex;
padding: 1rem 0;
border-bottom: 1px solid var(--gray-medium);
}
.profile-item:last-child {
border-bottom: none;
}
.profile-item label {
font-weight: 600;
color: var(--primary-black);
min-width: 120px;
}
.profile-item span {
color: var(--gray-dark);
}
.profile-actions {
display: flex;
gap: 1rem;
justify-content: center;
}
.btn {
padding: 0.8rem 2rem;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-medium);
}
.btn-primary {
background: var(--primary-red);
color: var(--primary-white);
}
.btn-primary:hover {
background: var(--dark-red);
transform: translateY(-2px);
}
.btn-secondary {
background: var(--gray-dark);
color: var(--primary-white);
}
.btn-secondary:hover {
background: var(--primary-black);
transform: translateY(-2px);
}
/* 響應式設計 */
@media (max-width: 768px) {
.auth-tabs {
flex-direction: column;
}
.auth-tab-button {
border-bottom: none;
border-right: 3px solid transparent;
}
.auth-tab-button.active {
border-bottom: none;
border-right-color: var(--primary-red);
}
.member-tabs {
flex-direction: column;
}
.member-tab-button {
border-bottom: none;
border-right: 3px solid transparent;
}
.member-tab-button.active {
border-bottom: none;
border-right-color: var(--primary-red);
}
.benefits-grid {
grid-template-columns: 1fr;
}
.profile-item {
flex-direction: column;
}
.profile-item label {
min-width: auto;
margin-bottom: 0.5rem;
}
.profile-actions {
flex-direction: column;
}
}
.members-section {
background: var(--primary-white);
padding: 6rem 0;
margin-top: 80px;
}
.member-login-area {
background: linear-gradient(135deg, var(--light-red), var(--primary-white));
border-radius: 20px;
padding: 3rem;
margin: 3rem 0;
box-shadow: var(--shadow-light);
}
.login-container {
max-width: 400px;
margin: 0 auto;
text-align: center;
}
.login-header h3 {
color: var(--primary-red);
font-size: 2rem;
margin-bottom: 0.5rem;
font-family: 'Noto Serif TC', serif;
}
.login-header p {
color: #666;
margin-bottom: 2rem;
}
.login-form {
text-align: left;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
color: var(--primary-red);
font-weight: 500;
margin-bottom: 0.5rem;
}
.form-group input {
width: 100%;
padding: 0.75rem;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
transition: all var(--transition-medium);
}
.form-group input:focus {
border-color: var(--primary-red);
outline: none;
box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
}
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.remember-me {
display: flex;
align-items: center;
gap: 0.5rem;
color: #666;
font-size: 0.9rem;
}
.forgot-password {
color: var(--primary-red);
text-decoration: none;
font-size: 0.9rem;
}
.forgot-password:hover {
text-decoration: underline;
}
.login-btn {
width: 100%;
background: var(--primary-red);
color: var(--primary-white);
border: none;
padding: 0.75rem;
border-radius: 8px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-medium);
}
.login-btn:hover {
background: var(--dark-red);
transform: translateY(-2px);
}
.login-footer {
margin-top: 1.5rem;
color: #666;
}
.register-link {
color: var(--primary-red);
text-decoration: none;
font-weight: 500;
}
.register-link:hover {
text-decoration: underline;
}
.member-services {
margin: 4rem 0;
}
.member-services h3 {
color: var(--primary-red);
font-size: 2rem;
text-align: center;
margin-bottom: 3rem;
font-family: 'Noto Serif TC', serif;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.service-card {
background: var(--primary-white);
border-radius: 15px;
padding: 2rem;
text-align: center;
box-shadow: var(--shadow-light);
transition: all var(--transition-medium);
border: 2px solid transparent;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
border-color: var(--primary-red);
}
.service-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-red), var(--dark-red));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}
.service-icon i {
color: var(--primary-white);
font-size: 1.5rem;
}
.service-card h4 {
color: var(--primary-red);
font-size: 1.25rem;
margin-bottom: 1rem;
font-family: 'Noto Serif TC', serif;
}
.service-card p {
color: #666;
line-height: 1.6;
}
.member-levels {
margin: 4rem 0;
}
.member-levels h3 {
color: var(--primary-red);
font-size: 2rem;
text-align: center;
margin-bottom: 3rem;
font-family: 'Noto Serif TC', serif;
}
.levels-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.level-card {
background: var(--primary-white);
border-radius: 15px;
padding: 2rem;
text-align: center;
box-shadow: var(--shadow-light);
transition: all var(--transition-medium);
border: 2px solid transparent;
position: relative;
}
.level-card.featured {
border-color: var(--primary-red);
transform: scale(1.05);
}
.level-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
}
.level-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
padding: 0.5rem 1.5rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
color: var(--primary-white);
}
.level-badge.basic {
background: #666;
}
.level-badge.premium {
background: var(--primary-red);
}
.level-badge.vip {
background: linear-gradient(135deg, #ffd700, #ff8c00);
}
.level-card h4 {
color: var(--primary-red);
font-size: 1.5rem;
margin: 1rem 0 1.5rem;
font-family: 'Noto Serif TC', serif;
}
.level-features {
list-style: none;
padding: 0;
margin: 1.5rem 0;
}
.level-features li {
padding: 0.5rem 0;
color: #666;
border-bottom: 1px solid #f0f0f0;
}
.level-features li:last-child {
border-bottom: none;
}
.level-features li:before {
content: "✓";
color: var(--primary-red);
font-weight: bold;
margin-right: 0.5rem;
}
.level-price {
color: var(--primary-red);
font-size: 1.25rem;
font-weight: 600;
margin-top: 1.5rem;
}
.member-contact {
background: linear-gradient(135deg, var(--light-red), var(--primary-white));
border-radius: 20px;
padding: 3rem;
margin: 4rem 0;
text-align: center;
}
.member-contact h3 {
color: var(--primary-red);
font-size: 2rem;
margin-bottom: 2rem;
font-family: 'Noto Serif TC', serif;
}
.contact-info {
display: flex;
justify-content: center;
gap: 3rem;
flex-wrap: wrap;
}
.contact-item {
display: flex;
align-items: center;
gap: 0.5rem;
color: #666;
font-size: 1rem;
}
.contact-item i {
color: var(--primary-red);
font-size: 1.2rem;
}
/* 響應式設計 */
@media (max-width: 768px) {
.member-login-area {
padding: 2rem 1rem;
margin: 2rem 0;
}
.services-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.levels-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.level-card.featured {
transform: none;
}
.contact-info {
flex-direction: column;
gap: 1rem;
}
.member-contact {
padding: 2rem 1rem;
}
/* 聯絡我們區段響應式設計 */
.contact-content {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.contact-form {
padding: 2.5rem 2rem;
}
.contact-info {
padding: 2.5rem 2rem;
}
.contact .section-title {
font-size: 2rem;
}
.contact .section-subtitle {
font-size: 1.1rem;
margin-bottom: 2rem;
}
.contact-simple {
padding: 2rem 1.5rem;
}
.contact-simple p {
font-size: 1.1rem;
flex-direction: column;
align-items: flex-start;
gap: 0.3rem;
}
.contact-simple strong {
min-width: auto;
margin-bottom: 0.3rem;
}
.contact-social {
margin: 1.5rem -2rem -2.5rem -2rem;
padding: 1.5rem 2rem;
}
.social-link {
width: 45px;
height: 45px;
}
.social-link i {
font-size: 1.3rem;
}
.contact-form input,
.contact-form textarea {
padding: 1.2rem 1.5rem;
font-size: 1.1rem;
}
.contact-form button {
padding: 1.2rem 2rem;
font-size: 1.1rem;
}
}
/* 協會章程樣式 */
.constitution-section {
max-width: 1000px;
margin: 0 auto;
padding: 2rem 0;
}
.constitution-title {
color: var(--primary-red);
font-size: 2.5rem;
text-align: center;
margin-bottom: 1rem;
font-family: 'Noto Serif TC', serif;
}
.constitution-intro {
text-align: center;
color: #666;
font-size: 1.1rem;
margin-bottom: 2rem;
line-height: 1.6;
}
.constitution-header {
background: linear-gradient(135deg, var(--light-red), var(--primary-white));
border-radius: 15px;
padding: 2rem;
margin-bottom: 3rem;
text-align: center;
box-shadow: var(--shadow-light);
}
.approval-info h4 {
color: var(--primary-red);
font-size: 1.3rem;
margin-bottom: 1rem;
font-family: 'Noto Serif TC', serif;
}
.approval-info p {
color: #555;
font-size: 1rem;
margin-bottom: 0.5rem;
font-weight: 500;
}
.constitution-content {
background: var(--primary-white);
border-radius: 15px;
padding: 3rem;
box-shadow: var(--shadow-light);
margin-bottom: 2rem;
}
.chapter {
margin-bottom: 3rem;
border-bottom: 2px solid #f0f0f0;
padding-bottom: 2rem;
}
.chapter:last-child {
border-bottom: none;
margin-bottom: 0;
}
.chapter-title {
color: var(--primary-red);
font-size: 1.8rem;
margin-bottom: 2rem;
font-family: 'Noto Serif TC', serif;
border-left: 4px solid var(--primary-red);
padding-left: 1rem;
}
.article {
margin-bottom: 2rem;
background: #fafafa;
border-radius: 10px;
padding: 1.5rem;
border-left: 3px solid var(--light-red);
}
.article:last-child {
margin-bottom: 0;
}
.article-title {
color: var(--primary-red);
font-size: 1.2rem;
margin-bottom: 1rem;
font-weight: 600;
font-family: 'Noto Serif TC', serif;
}
.article-content {
color: #333;
line-height: 1.8;
margin-bottom: 1rem;
}
.article-list {
margin: 1rem 0;
padding-left: 1.5rem;
}
.article-list li {
color: #555;
line-height: 1.8;
margin-bottom: 0.5rem;
position: relative;
}
.article-list li:before {
display: none; /* 移除紅色點點 */
}
.article-numbered-list {
margin: 1rem 0;
padding-left: 1.5rem;
}
.article-numbered-list li {
color: #555;
line-height: 1.8;
margin-bottom: 0.5rem;
}
.member-types {
margin: 1.5rem 0;
}
.member-type {
background: #f8f9fa;
border-radius: 10px;
padding: 1.5rem;
margin-bottom: 1.5rem;
border-left: 4px solid var(--primary-red);
}
.member-type:last-child {
margin-bottom: 0;
}
.member-type h6 {
color: var(--primary-red);
font-size: 1.1rem;
margin-bottom: 1rem;
font-weight: 600;
font-family: 'Noto Serif TC', serif;
}
.member-type p {
color: #555;
line-height: 1.6;
margin-bottom: 1rem;
}
.fee-structure {
margin: 1.5rem 0;
}
.fee-category {
background: #f8f9fa;
border-radius: 10px;
padding: 1.5rem;
margin-bottom: 1.5rem;
border-left: 4px solid var(--primary-red);
}
.fee-category:last-child {
margin-bottom: 0;
}
.fee-category h6 {
color: var(--primary-red);
font-size: 1.1rem;
margin-bottom: 1rem;
font-weight: 600;
font-family: 'Noto Serif TC', serif;
}
.constitution-footer {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-top: 3rem;
}
.constitution-notes,
.constitution-contact {
background: var(--primary-white);
border-radius: 15px;
padding: 2rem;
box-shadow: var(--shadow-light);
}
.constitution-notes h4,
.constitution-contact h4 {
color: var(--primary-red);
font-size: 1.3rem;
margin-bottom: 1rem;
font-family: 'Noto Serif TC', serif;
}
.constitution-notes p,
.constitution-contact p {
color: #666;
line-height: 1.6;
margin-bottom: 1rem;
}
.constitution-contact .contact-info {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.constitution-contact .contact-item {
display: flex;
align-items: center;
gap: 0.5rem;
color: #666;
font-size: 1rem;
}
.constitution-contact .contact-item i {
color: var(--primary-red);
font-size: 1.1rem;
width: 20px;
}
/* 響應式設計 - 協會章程 */
@media (max-width: 768px) {
.constitution-content {
padding: 2rem 1.5rem;
}
.constitution-title {
font-size: 2rem;
}
.chapter-title {
font-size: 1.5rem;
}
.article {
padding: 1rem;
}
.constitution-footer {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.constitution-notes,
.constitution-contact {
padding: 1.5rem;
}
}
@media (max-width: 480px) {
.constitution-content {
padding: 1.5rem 1rem;
}
.constitution-title {
font-size: 1.8rem;
}
.chapter-title {
font-size: 1.3rem;
}
.article-title {
font-size: 1.1rem;
}
}
/* 會員專區樣式 */
.member-auth-section {
background: var(--extra-light-red);
border-radius: 15px;
padding: 30px;
margin-bottom: 40px;
box-shadow: var(--shadow-light);
}
.auth-tabs {
display: flex;
margin-bottom: 30px;
border-bottom: 2px solid var(--gray-medium);
}
.auth-tab-button {
background: none;
border: none;
padding: 15px 30px;
font-size: 1.1em;
font-weight: 500;
color: var(--gray-dark);
cursor: pointer;
border-bottom: 3px solid transparent;
transition: var(--transition-medium);
}
.auth-tab-button.active {
color: var(--dark-red);
border-bottom-color: var(--dark-red);
}
.auth-tab-button:hover {
color: var(--dark-red);
background-color: var(--light-red);
}
.auth-content {
display: none;
}
.auth-content.active {
display: block;
}
.auth-form-container {
max-width: 500px;
margin: 0 auto;
}
.auth-form-container h3 {
text-align: center;
color: var(--dark-red);
margin-bottom: 25px;
font-size: 1.5em;
}
.auth-form .form-group {
margin-bottom: 20px;
}
.auth-form label {
display: block;
margin-bottom: 8px;
color: var(--primary-black);
font-weight: 500;
}
.auth-form input {
width: 100%;
padding: 12px 15px;
border: 2px solid var(--gray-medium);
border-radius: 8px;
font-size: 1em;
transition: var(--transition-fast);
}
.auth-form input:focus {
outline: none;
border-color: var(--dark-red);
box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
}
.auth-button {
width: 100%;
background: linear-gradient(135deg, var(--dark-red) 0%, var(--medium-red) 100%);
color: white;
border: none;
padding: 15px;
border-radius: 8px;
font-size: 1.1em;
font-weight: 500;
cursor: pointer;
transition: var(--transition-medium);
}
.auth-button:hover {
transform: var(--transform-hover);
box-shadow: var(--shadow-red);
}
.auth-message {
margin-top: 15px;
text-align: center;
}
.success-message {
color: #2e7d32;
background: #e8f5e8;
padding: 10px;
border-radius: 5px;
border-left: 4px solid #4caf50;
}
.error-message {
color: #c62828;
background: #ffebee;
padding: 10px;
border-radius: 5px;
border-left: 4px solid #f44336;
}
.member-content {
background: white;
border-radius: 15px;
padding: 30px;
box-shadow: var(--shadow-light);
}
.member-welcome {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background: var(--light-red);
border-radius: 10px;
}
.member-welcome h3 {
color: var(--dark-red);
font-size: 1.8em;
margin-bottom: 10px;
}
.member-tabs {
display: flex;
margin-bottom: 30px;
border-bottom: 2px solid var(--gray-medium);
flex-wrap: wrap;
}
.member-tab-button {
background: none;
border: none;
padding: 15px 25px;
font-size: 1em;
font-weight: 500;
color: var(--gray-dark);
cursor: pointer;
border-bottom: 3px solid transparent;
transition: var(--transition-medium);
}
.member-tab-button.active {
color: var(--dark-red);
border-bottom-color: var(--dark-red);
}
.member-tab-button:hover {
color: var(--dark-red);
background-color: var(--light-red);
}
.member-tab-content {
display: none;
}
.member-tab-content.active {
display: block;
}
/* 會員權益樣式 */
.benefits-intro {
margin-bottom: 30px;
text-align: center;
color: var(--gray-dark);
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin-bottom: 30px;
}
.benefit-card {
background: white;
border-radius: 15px;
padding: 25px;
box-shadow: var(--shadow-light);
border: 2px solid var(--gray-medium);
transition: var(--transition-medium);
}
.benefit-card:hover {
transform: var(--transform-hover);
box-shadow: var(--shadow-medium);
}
.benefit-card.premium {
border-color: #ffd700;
background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
}
.benefit-card.student {
border-color: #4caf50;
background: linear-gradient(135deg, #e8f5e8 0%, #ffffff 100%);
}
.benefit-icon {
text-align: center;
margin-bottom: 20px;
}
.benefit-icon i {
font-size: 3em;
color: var(--dark-red);
}
.benefit-card.premium .benefit-icon i {
color: #ffd700;
}
.benefit-card.student .benefit-icon i {
color: #4caf50;
}
.benefit-card h4 {
text-align: center;
color: var(--dark-red);
margin-bottom: 15px;
font-size: 1.3em;
}
.benefit-fee {
text-align: center;
margin-bottom: 20px;
padding: 10px;
background: var(--gray-light);
border-radius: 8px;
}
.fee-label {
font-weight: 500;
color: var(--gray-dark);
}
.fee-amount {
font-weight: 600;
color: var(--dark-red);
margin-left: 5px;
}
.benefit-card ul {
list-style: none;
padding: 0;
}
.benefit-card li {
padding: 8px 0;
border-bottom: 1px solid var(--gray-light);
position: relative;
padding-left: 25px;
}
.benefit-card li:before {
content: "✓";
position: absolute;
left: 0;
color: var(--dark-red);
font-weight: bold;
}
.benefit-card.premium li:before {
color: #ffd700;
}
.benefit-card.student li:before {
color: #4caf50;
}
.benefits-notes {
background: var(--light-red);
padding: 20px;
border-radius: 10px;
margin-top: 30px;
}
.benefits-notes h4 {
color: var(--dark-red);
margin-bottom: 15px;
}
.benefits-notes ul {
list-style: none;
padding: 0;
}
.benefits-notes li {
padding: 5px 0;
position: relative;
padding-left: 20px;
}
.benefits-notes li:before {
content: "•";
position: absolute;
left: 0;
color: var(--dark-red);
font-weight: bold;
}
/* 個人資料樣式 */
.profile-info {
background: var(--gray-light);
padding: 25px;
border-radius: 10px;
margin-bottom: 20px;
}
.profile-item {
display: flex;
margin-bottom: 15px;
padding: 10px 0;
border-bottom: 1px solid var(--gray-medium);
}
.profile-item:last-child {
border-bottom: none;
}
.profile-item label {
font-weight: 600;
color: var(--dark-red);
min-width: 120px;
margin-right: 15px;
}
.profile-item span {
color: var(--primary-black);
flex: 1;
}
.member-type-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.9em;
font-weight: 500;
color: white;
background: var(--dark-red);
}
.member-type-badge.榮譽會員 {
background: #ffd700;
color: #333;
}
.member-type-badge.學生會員 {
background: #4caf50;
}
.profile-actions {
display: flex;
gap: 15px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
font-size: 1em;
font-weight: 500;
cursor: pointer;
transition: var(--transition-medium);
text-decoration: none;
display: inline-block;
text-align: center;
}
.btn-primary {
background: var(--dark-red);
color: white;
}
.btn-primary:hover {
background: var(--medium-red);
transform: var(--transform-hover);
}
.btn-secondary {
background: var(--gray-dark);
color: white;
}
.btn-secondary:hover {
background: #5a6268;
transform: var(--transform-hover);
}
.btn-warning {
background: #ff9800;
color: white;
}
.btn-warning:hover {
background: #f57c00;
transform: var(--transform-hover);
}
.profile-edit-form {
background: var(--light-red);
padding: 25px;
border-radius: 10px;
margin-bottom: 20px;
}
.profile-edit-form h4 {
color: var(--dark-red);
margin-bottom: 20px;
text-align: center;
}
.form-actions {
display: flex;
gap: 15px;
justify-content: center;
margin-top: 25px;
}
.form-help {
display: block;
color: var(--gray-dark);
font-size: 0.9em;
margin-top: 5px;
}
/* 會員專屬活動樣式 */
.member-event-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow-light);
transition: var(--transition-medium);
}
.member-event-card:hover {
transform: var(--transform-hover);
box-shadow: var(--shadow-medium);
}
/* 狀態頁面樣式（成功／錯誤訊息） */
.status-page {
padding: 120px 0 80px;
background: var(--gray-light);
}
.status-card {
background: var(--primary-white);
border-radius: 20px;
box-shadow: var(--shadow-medium);
padding: 3rem;
max-width: 840px;
margin: 0 auto;
position: relative;
}
.status-card + .status-card {
margin-top: 40px;
}
.status-card.success-card {
border-top: 6px solid var(--dark-red);
}
.status-card.error-card {
border-top: 6px solid #f44336;
}
.status-header {
text-align: center;
margin-bottom: 2.5rem;
}
.status-body {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.status-icon {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
margin: 0 auto 1.5rem;
box-shadow: var(--shadow-light);
}
.status-icon.success {
background: var(--light-red);
color: var(--dark-red);
}
.status-icon.error {
background: #ffebee;
color: #d32f2f;
}
.status-title {
font-size: 2.2rem;
font-weight: 700;
color: var(--dark-red);
margin-bottom: 0.5rem;
}
.status-subtitle {
color: var(--gray-dark);
font-size: 1rem;
}
.status-message {
text-align: center;
margin-bottom: 2rem;
}
.status-message h2 {
font-size: 1.6rem;
color: var(--primary-black);
margin-bottom: 0.75rem;
}
.status-message p {
color: var(--gray-dark);
font-size: 1rem;
line-height: 1.7;
}
.status-section {
background: var(--gray-light);
border-radius: 16px;
padding: 2rem;
margin-bottom: 1.5rem;
}
.status-section h3 {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.2rem;
color: var(--dark-red);
margin-bottom: 1.2rem;
}
.status-section h3 i {
font-size: 1rem;
}
.status-detail-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.status-detail-row {
display: flex;
gap: 1rem;
align-items: flex-start;
flex-wrap: wrap;
}
.status-detail-label {
min-width: 96px;
font-weight: 600;
color: var(--primary-black);
}
.status-detail-value {
flex: 1;
color: var(--gray-dark);
word-break: break-word;
}
.status-detail-box {
background: var(--primary-white);
border-radius: 10px;
border: 1px solid var(--gray-medium);
padding: 1rem;
line-height: 1.7;
white-space: pre-wrap;
}
.status-steps ul {
margin: 0;
padding-left: 1.2rem;
color: var(--gray-dark);
line-height: 1.7;
}
.status-steps li + li {
margin-top: 0.35rem;
}
.status-contact .status-detail-row {
align-items: center;
}
.status-contact .status-detail-value i {
color: var(--dark-red);
margin-right: 8px;
}
.status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
}
.status-grid-item {
background: var(--primary-white);
border-radius: 12px;
padding: 1.5rem;
box-shadow: var(--shadow-light);
display: flex;
gap: 1rem;
}
.status-grid-icon {
font-size: 1.6rem;
color: var(--dark-red);
}
.status-grid-item h4 {
margin: 0 0 0.5rem;
font-size: 1.05rem;
color: var(--primary-black);
}
.status-grid-item p {
margin: 0;
color: var(--gray-dark);
line-height: 1.6;
font-size: 0.95rem;
}
.status-note {
background: #e7f3ff;
border-radius: 12px;
padding: 1.5rem;
margin-top: 1.5rem;
}
.status-note h4 {
margin: 0 0 0.75rem;
color: #0056b3;
}
.status-note ul {
margin: 0;
padding-left: 1.2rem;
color: var(--gray-dark);
line-height: 1.6;
}
.status-note li + li {
margin-top: 0.35rem;
}
.status-actions {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
}
.status-actions .btn {
min-width: 180px;
}
.status-actions .btn + .btn {
margin-left: 0;
}
.status-actions .btn-outline {
border: 2px solid var(--dark-red);
color: var(--dark-red);
background: transparent;
}
.status-actions .btn-outline:hover {
background: var(--dark-red);
color: white;
}
.status-actions .btn-secondary {
background: var(--gray-dark);
}
.status-actions .btn-secondary:hover {
background: #5a6268;
}
.status-divider {
margin: 2rem 0;
height: 1px;
background: var(--gray-medium);
}
@media (max-width: 992px) {
.status-card {
padding: 2.5rem 2rem;
}
}
@media (max-width: 768px) {
.status-page {
padding: 100px 0 60px;
}
.status-card {
padding: 2rem 1.5rem;
}
.status-title {
font-size: 1.8rem;
}
.status-section {
padding: 1.5rem;
}
.status-detail-row {
flex-direction: column;
gap: 0.5rem;
}
.status-detail-label {
min-width: auto;
}
.status-actions {
flex-direction: column;
}
.status-actions .btn {
width: 100%;
}
}
/* 會員專區響應式設計 */
@media (max-width: 768px) {
.member-auth-section {
padding: 20px;
}
.auth-tabs {
flex-direction: column;
}
.auth-tab-button {
text-align: center;
}
.member-tabs {
flex-direction: column;
}
.member-tab-button {
text-align: center;
}
.benefits-grid {
grid-template-columns: 1fr;
}
.profile-actions {
flex-direction: column;
}
.form-actions {
flex-direction: column;
}
.profile-item {
flex-direction: column;
}
.profile-item label {
min-width: auto;
margin-bottom: 5px;
}
}