* {
	margin:0;
	padding:0;
	box-sizing:border-box
}
:root {
	--primary-color:#2D5F7E;
	--primary-dark:#1A3A4F;
	--primary-light:#4A89B3;
	--secondary-color:#D4874E;
	--secondary-light:#E8A96F;
	--accent-color:#8B5A3C;
	--text-dark:#1A1A1A;
	--text-gray:#4A4A4A;
	--text-light:#6B6B6B;
	--bg-light:#F8F6F3;
	--bg-white:#FFFFFF;
	--border-color:#E0DDD8;
	--shadow-sm:0 2px 8px rgba(0,0,0,.08);
	--shadow-md:0 4px 16px rgba(0,0,0,.12);
	--shadow-lg:0 8px 32px rgba(0,0,0,.16);
	--font-sans:"Noto Sans TC",sans-serif;
	--font-serif:"Noto Serif TC",serif
}
html {
	scroll-behavior:smooth
}
body {
	font-family:var(--font-sans);
	color:var(--text-dark);
	line-height:1.7;
	background-color:var(--bg-white);
	overflow-x:hidden
}
.container {
	max-width:1200px;
	margin:0 auto;
	padding:0 24px
}
.navbar {
	position:fixed;
	top:0;
	left:0;
	right:0;
	background:#fffffff2;
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
	border-bottom:1px solid var(--border-color);
	z-index:1000;
	transition:all .3s ease
}
.navbar .container {
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:20px 24px
}
.nav-brand {
	display:flex;
	align-items:center;
	gap:12px;
	font-family:var(--font-serif);
	font-size:1.25rem;
	font-weight:700;
	color:var(--primary-color)
}
.nav-brand i {
	font-size:1.5rem;
	color:var(--secondary-color)
}
.nav-links {
	display:flex;
	gap:32px
}
.nav-links a {
	text-decoration:none;
	color:var(--text-gray);
	font-weight:500;
	font-size:.95rem;
	transition:color .3s ease;
	position:relative
}
.nav-links a:after {
	content:"";
	position:absolute;
	bottom:-4px;
	left:0;
	width:0;
	height:2px;
	background:var(--secondary-color);
	transition:width .3s ease
}
.nav-links a:hover {
	color:var(--primary-color)
}
.nav-links a:hover:after {
	width:100%
}
.hero {
	position:relative;
	min-height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	padding-top:80px;
	overflow:hidden
}
.hero-bg {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:url(../imgs/bgc.jpg);
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	z-index:-1
}
.hero-pattern {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image:radial-gradient(circle at 20% 50%,rgba(212,135,78,.1) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(74,137,179,.1) 0%,transparent 50%),repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.03) 2px,rgba(255,255,255,.03) 4px)
}
.hero-content {
	text-align:center;
	color:#fff;
	z-index:1;
	animation:fadeInUp 1s ease
}
.hero-badge {
	display:inline-flex;
	align-items:center;
	gap:8px;
	background:#ffffff26;
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
	padding:8px 20px;
	border-radius:50px;
	font-size:.9rem;
	font-weight:500;
	margin-bottom:32px;
	border:1px solid rgba(255,255,255,.2)
}
.hero-badge i {
	color:var(--secondary-light)
}
.hero-title {
	font-family:var(--font-serif);
	font-size:4.5rem;
	font-weight:900;
	line-height:1.2;
	margin-bottom:24px;
	letter-spacing:-.02em
}
.hero-title .title-line {
	display:block
}
.hero-title .highlight {
	background:linear-gradient(135deg,#e8a96f,#d4874e);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	background-clip:text
}
.hero-subtitle {
	font-size:1.25rem;
	line-height:1.8;
	color:#ffffffe6;
	max-width:600px;
	margin:0 auto 48px;
	font-weight:300
}
.hero-stats {
	display:flex;
	justify-content:center;
	gap:64px;
	margin-bottom:48px
}
.stat-item {
	text-align:center
}
.stat-number {
	font-family:var(--font-serif);
	font-size:2.5rem;
	font-weight:700;
	color:var(--secondary-light);
	margin-bottom:8px
}
.stat-label {
	font-size:.95rem;
	color:#fffc;
	font-weight:400
}
.hero-cta {
	display:inline-flex;
	align-items:center;
	gap:12px;
	background:linear-gradient(135deg,var(--secondary-color) 0%,var(--accent-color) 100%);
	color:#fff;
	padding:18px 40px;
	border:none;
	border-radius:50px;
	font-size:1.1rem;
	font-weight:600;
	cursor:pointer;
	transition:all .3s ease;
	box-shadow:0 8px 24px #d4874e66
}
.hero-cta:hover {
	transform:translateY(-2px);
	box-shadow:0 12px 32px #d4874e80
}
.hero-cta i {
	transition:transform .3s ease
}
.hero-cta:hover i {
	transform:translate(4px)
}
.hero-scroll {
	position:absolute;
	bottom:40px;
	left:50%;
	transform:translate(-50%);
	color:#fff9;
	font-size:1.5rem;
	animation:bounce 2s infinite
}
@keyframes fadeInUp {
	0% {
	opacity:0;
	transform:translateY(30px)
}
to {
	opacity:1;
	transform:translateY(0)
}
}@keyframes bounce {
	0%,20%,50%,80%,to {
	transform:translate(-50%) translateY(0)
}
40% {
	transform:translate(-50%) translateY(-10px)
}
60% {
	transform:translate(-50%) translateY(-5px)
}
}section {
	padding:120px 0
}
.section-header {
	text-align:center;
	margin-bottom:64px
}
.section-tag {
	display:inline-block;
	background:var(--bg-light);
	color:var(--secondary-color);
	padding:8px 24px;
	border-radius:50px;
	font-size:.9rem;
	font-weight:600;
	margin-bottom:16px;
	border:1px solid var(--border-color)
}
.section-tag.light {
	background:#fff3;
	color:#fff;
	border-color:#ffffff4d
}
.section-title {
	font-family:var(--font-serif);
	font-size:2.75rem;
	font-weight:800;
	color:var(--text-dark);
	line-height:1.3
}
.section-title.light {
	color:#fff
}
.about-section {
	background:var(--bg-light)
}
.lead-text {
	font-size:1.35rem;
	line-height:1.8;
	color:var(--text-gray);
	text-align:center;
	max-width:800px;
	margin:0 auto 64px;
	font-weight:400
}
.mission-list {
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:32px;
	max-width:1000px;
	margin:0 auto
}
.mission-item {
	display:flex;
	gap:24px;
	background:#fff;
	padding:32px;
	border-radius:16px;
	box-shadow:var(--shadow-sm);
	transition:all .3s ease
}
.mission-item:hover {
	transform:translateY(-4px);
	box-shadow:var(--shadow-md)
}
.mission-icon {
	flex-shrink:0;
	width:56px;
	height:56px;
	background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-light) 100%);
	border-radius:12px;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	font-size:1.5rem
}
.mission-text h3 {
	font-family:var(--font-serif);
	font-size:1.25rem;
	font-weight:700;
	color:var(--text-dark);
	margin-bottom:8px
}
.mission-text p {
	color:var(--text-light);
	line-height:1.7;
	font-size:.95rem
}
.books-section {
	background:#fff
}
.book-category {
	margin-bottom:80px
}
.book-category:last-child {
	margin-bottom:0
}
.book-content {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:64px;
	align-items:center
}
.book-category.reverse .book-content {
	direction:rtl
}
.book-category.reverse .book-content>* {
	direction:ltr
}
.book-image {
	position:relative
}
.book-placeholder {
	aspect-ratio:1;
	border-radius:24px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:8rem;
	color:#fff;
	box-shadow:var(--shadow-lg);
	position:relative;
	overflow:hidden
}
.book-placeholder:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 100%)
}
.ai-book {
	background:linear-gradient(135deg,#667eea,#764ba2)
}
.humanities-book {
	background:linear-gradient(135deg,#f093fb,#f5576c)
}
.book-info {
	padding:24px 0
}
.category-badge {
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:10px 20px;
	border-radius:50px;
	font-size:.9rem;
	font-weight:600;
	margin-bottom:24px
}
.category-badge.ai {
	background:#667eea1a;
	color:#667eea
}
.category-badge.humanities {
	background:#f5576c1a;
	color:#f5576c
}
.book-title {
	font-family:var(--font-serif);
	font-size:2rem;
	font-weight:700;
	color:var(--text-dark);
	margin-bottom:16px;
	line-height:1.4
}
.book-description {
	font-size:1.05rem;
	line-height:1.8;
	color:var(--text-gray);
	margin-bottom:24px
}
.book-features {
	list-style:none;
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:12px
}
.book-features li {
	display:flex;
	align-items:center;
	gap:12px;
	font-size:.95rem;
	color:var(--text-gray)
}
.book-features li i {
	color:var(--secondary-color);
	font-size:1rem
}
.reviews-section {
	background:var(--bg-light)
}
.reviews-grid {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:32px
}
.review-card {
	background:#fff;
	padding:32px;
	border-radius:16px;
	box-shadow:var(--shadow-sm);
	transition:all .3s ease
}
.review-card:hover {
	transform:translateY(-4px);
	box-shadow:var(--shadow-md)
}
.review-header {
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	margin-bottom:20px
}
.reviewer-info {
	display:flex;
	gap:16px
}
.reviewer-avatar {
	width:48px;
	height:48px;
	border-radius:50%;
	background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-light) 100%);
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	font-family:var(--font-serif);
	font-weight:700;
	font-size:1.2rem;
	flex-shrink:0
}
.reviewer-details h4 {
	font-size:1.05rem;
	font-weight:700;
	color:var(--text-dark);
	margin-bottom:4px
}
.reviewer-details p {
	font-size:.85rem;
	color:var(--text-light)
}
.review-stars {
	display:flex;
	gap:4px;
	color:#ffb800;
	font-size:.9rem
}
.review-text {
	font-size:.95rem;
	line-height:1.7;
	color:var(--text-gray);
	margin-bottom:16px
}
.review-date {
	font-size:.85rem;
	color:var(--text-light)
}
.mission-section {
	background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%);
	color:#fff
}
.mission-content {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:80px;
	align-items:center
}
.mission-description {
	font-size:1.15rem;
	line-height:1.9;
	color:#ffffffe6;
	margin-bottom:40px
}
.mission-values {
	display:flex;
	gap:32px
}
.value-item {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:12px;
	text-align:center
}
.value-item i {
	font-size:2rem;
	color:var(--secondary-light)
}
.value-item span {
	font-size:.95rem;
	font-weight:500
}
.mission-stats-card {
	background:#ffffff1a;
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
	border:1px solid rgba(255,255,255,.2);
	border-radius:24px;
	padding:48px;
	display:flex;
	flex-direction:column;
	gap:40px
}
.stat-card-item {
	text-align:center
}
.stat-card-item i {
	font-size:2.5rem;
	color:var(--secondary-light);
	margin-bottom:16px
}
.stat-card-number {
	font-family:var(--font-serif);
	font-size:2.25rem;
	font-weight:700;
	margin-bottom:8px
}
.stat-card-label {
	font-size:1rem;
	color:#fffc
}
.final-cta-section {
	background:#fff;
	padding:100px 0
}
.final-cta-content {
	text-align:center;
	max-width:700px;
	margin:0 auto
}
.final-cta-content h2 {
	font-family:var(--font-serif);
	font-size:2.5rem;
	font-weight:800;
	color:var(--text-dark);
	margin-bottom:16px
}
.final-cta-content p {
	font-size:1.15rem;
	color:var(--text-gray);
	margin-bottom:40px
}
.cta-button-large {
	display:inline-flex;
	align-items:center;
	gap:12px;
	background:linear-gradient(135deg,var(--secondary-color) 0%,var(--accent-color) 100%);
	color:#fff;
	padding:20px 48px;
	border:none;
	border-radius:50px;
	font-size:1.15rem;
	font-weight:600;
	cursor:pointer;
	transition:all .3s ease;
	box-shadow:var(--shadow-md)
}
.cta-button-large:hover {
	transform:translateY(-2px);
	box-shadow:var(--shadow-lg)
}
.footer {
	background:var(--text-dark);
	color:#fffc;
	padding:64px 0 32px
}
.footer-content {
	display:grid;
	grid-template-columns:2fr 1fr 1fr;
	gap:64px;
	margin-bottom:48px
}
.footer-section h3 {
	font-family:var(--font-serif);
	font-size:1.25rem;
	margin-bottom:16px;
	color:#fff
}
.footer-section h3 i {
	color:var(--secondary-light)
}
.footer-section h4 {
	font-size:1.05rem;
	margin-bottom:16px;
	color:#fff;
	font-weight:600
}
.footer-section p {
	font-size:.95rem;
	line-height:1.7
}
.footer-section ul {
	list-style:none
}
.footer-section ul li {
	margin-bottom:12px;
	font-size:.95rem
}
.footer-section ul li a {
	color:#fffc;
	text-decoration:none;
	transition:color .3s ease
}
.footer-section ul li a:hover {
	color:var(--secondary-light)
}
.footer-section ul li i {
	margin-right:8px;
	color:var(--secondary-light)
}
.footer-bottom {
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding-top:32px;
	border-top:1px solid rgba(255,255,255,.1)
}
.footer-bottom p {
	font-size:.9rem
}
.footer-links {
	display:flex;
	gap:24px
}
.footer-links a {
	color:#fffc;
	text-decoration:none;
	font-size:.9rem;
	transition:color .3s ease
}
.footer-links a:hover {
	color:var(--secondary-light)
}
.fixed-cta-button {
	position:fixed;
	bottom:24px;
	left:50%;
	transform:translate(-50%);
	background:linear-gradient(135deg,var(--secondary-color) 0%,var(--accent-color) 100%);
	color:#fff;
	padding:16px 32px;
	border-radius:50px;
	display:flex;
	align-items:center;
	gap:12px;
	font-weight:600;
	font-size:1rem;
	cursor:pointer;
	box-shadow:0 8px 32px #d4874e66;
	z-index:999;
	transition:all .3s ease
}
.fixed-cta-button:hover {
	transform:translate(-50%) translateY(-2px);
	box-shadow:0 12px 40px #d4874e80
}
.fixed-cta-button i {
	font-size:1.2rem
}
.modal {
	display:none;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:#000000b3;
	-webkit-backdrop-filter:blur(4px);
	backdrop-filter:blur(4px);
	z-index:10000;
	align-items:center;
	justify-content:center;
	padding:24px
}
.modal-content {
	background:#fff;
	border-radius:24px;
	max-width:500px;
	width:100%;
	max-height:90vh;
	overflow-y:auto;
	position:relative;
	animation:modalSlideIn .3s ease
}
@keyframes modalSlideIn {
	0% {
	opacity:0;
	transform:translateY(30px)
}
to {
	opacity:1;
	transform:translateY(0)
}
}.modal-close {
	position:absolute;
	top:20px;
	right:20px;
	width:40px;
	height:40px;
	border-radius:50%;
	background:var(--bg-light);
	border:none;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition:all .3s ease;
	color:var(--text-gray);
	font-size:1.25rem
}
.modal-close:hover {
	background:var(--border-color);
	color:var(--text-dark)
}
.modal-header {
	text-align:center;
	padding:48px 48px 32px;
	background:var(--bg-light);
	border-radius:24px 24px 0 0
}
.modal-header i {
	font-size:3rem;
	color:var(--secondary-color);
	margin-bottom:16px
}
.modal-header h2 {
	font-family:var(--font-serif);
	font-size:1.75rem;
	font-weight:700;
	color:var(--text-dark);
	margin-bottom:8px
}
.modal-header p {
	font-size:.95rem;
	color:var(--text-light)
}
.modal-form {
	padding:32px 48px 48px
}
.form-group {
	margin-bottom:24px
}
.form-group label {
	display:block;
	font-weight:600;
	color:var(--text-dark);
	margin-bottom:8px;
	font-size:.95rem
}
.form-group input,.form-group select,.form-group textarea {
	width:100%;
	padding:12px 16px;
	border:2px solid var(--border-color);
	border-radius:12px;
	font-size:.95rem;
	font-family:var(--font-sans);
	transition:all .3s ease
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus {
	outline:none;
	border-color:var(--primary-color);
	box-shadow:0 0 0 3px #2d5f7e1a
}
.form-group textarea {
	resize:vertical;
	min-height:80px
}
.submit-button {
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%);
	color:#fff;
	padding:16px 32px;
	border:none;
	border-radius:12px;
	font-size:1.05rem;
	font-weight:600;
	cursor:pointer;
	transition:all .3s ease
}
.submit-button:hover {
	transform:translateY(-2px);
	box-shadow:var(--shadow-md)
}
@media (max-width:1024px) {
	.hero-title {
	font-size:3.5rem
}
.section-title {
	font-size:2.25rem
}
.book-content,.mission-content {
	gap:48px
}
}@media (max-width:768px) {
	.nav-links {
	display:none
}
.navbar .container {
	padding:16px 24px
}
.hero {
	min-height:90vh;
	padding-top:60px
}
.hero-title {
	font-size:2.5rem
}
.hero-subtitle {
	font-size:1.05rem
}
.hero-stats {
	flex-direction:column;
	gap:24px
}
.stat-number {
	font-size:2rem
}
section {
	padding:80px 0
}
.section-title {
	font-size:1.85rem
}
.section-header {
	margin-bottom:48px
}
.mission-list {
	grid-template-columns:1fr;
	gap:24px
}
.mission-item {
	padding:24px
}
.book-content {
	grid-template-columns:1fr;
	gap:32px
}
.book-category.reverse .book-content {
	direction:ltr
}
.book-placeholder {
	font-size:6rem
}
.book-features {
	grid-template-columns:1fr
}
.reviews-grid {
	grid-template-columns:1fr;
	gap:24px
}
.mission-content {
	grid-template-columns:1fr;
	gap:48px
}
.mission-values {
	flex-direction:column;
	gap:24px
}
.mission-stats-card {
	padding:32px;
	gap:32px
}
.footer-content {
	grid-template-columns:1fr;
	gap:40px
}
.footer-bottom {
	flex-direction:column;
	gap:16px;
	text-align:center
}
.fixed-cta-button {
	width:calc(100% - 48px);
	max-width:400px;
	justify-content:center
}
.modal-header {
	padding:32px 24px 24px
}
.modal-form {
	padding:24px
}
.final-cta-content h2 {
	font-size:2rem
}
}@media (max-width:480px) {
	.hero-title {
	font-size:2rem
}
.hero-cta {
	padding:16px 32px;
	font-size:1rem
}
.section-title {
	font-size:1.65rem
}
.fixed-cta-button {
	padding:14px 24px;
	font-size:.9rem
}
}