#academics { background-color: #fff; color: #000; border-bottom: 1px solid #000; }
#academics .features-grid { display: grid; grid-template-columns: 1fr; }
#academics .feature-item { position: relative; padding: 2rem; min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; background-color: #fff; border-bottom: 1px solid #000; overflow: hidden; cursor: pointer; transition: color 0.3s ease; }
#academics .feature-item:hover { color: #fff; }
#academics .feature-content { position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
#academics .feature-top { display: flex; justify-content: space-between; align-items: flex-start; }
#academics .feature-num { font-size: 0.75rem; font-family: monospace; border: 1px solid currentColor; padding: 0.25rem 0.5rem; border-radius: 9999px; transition: border-color 0.3s; }
#academics .feature-arrow { width: 1.5rem; height: 1.5rem; opacity: 0; transform: translateX(-1rem); transition: all 0.4s cubic-bezier(0.16,1,0.3,1); }
#academics .feature-item:hover .feature-arrow { opacity: 1; transform: translateX(0); }
#academics .feature-title {font-size: 1.65rem;font-weight: 700;text-transform: uppercase;line-height: 1.1;margin-bottom: 0.5rem;letter-spacing: 0.025em;}
#academics .feature-sub {font-weight: 700;margin-bottom: 1rem;opacity: 0.8;transition: opacity 0.3s;font-size: 1.25rem;}
#academics .feature-item:hover .feature-sub { opacity: 1; }
#academics .feature-desc {font-size: 0.875rem;line-height: 1.6;opacity: 0.6;max-width: 250px;transition: opacity 0.3s;word-break: break-word;}
#academics .feature-item:hover .feature-desc { opacity: 0.9; }
#academics .feature-bg { position: absolute; inset: 0; background-color: #7f1084; z-index: 0; transform: translateY(100%); transform-origin: bottom; transition: transform 0.5s cubic-bezier(0.77,0,0.175,1); }
#academics .feature-item:hover .feature-bg { transform: translateY(0); }
@media (min-width:768px) {
  #academics .features-grid { grid-template-columns: repeat(2,1fr); }
  #academics .feature-item:nth-child(odd) { border-right: 1px solid #000; }
  #academics .feature-item:nth-child(1),#academics .feature-item:nth-child(2) { border-bottom: 1px solid #000; }
  #academics .feature-item:nth-child(3),#academics .feature-item:nth-child(4) { border-bottom: none; }
}
@media (min-width:1024px) {
  #academics .features-grid { grid-template-columns: repeat(4,1fr); }
  #academics .feature-item { border-bottom: none !important; border-right: 1px solid #000; }
  #academics .feature-item:last-child { border-right: none; }
}
#gallery { position: relative; height: 300vh; background-color: #fff; }
#gallery .sticky-container { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; }
#gallery .bg-layer { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr; height: 100%; max-width: 1920px; margin: 0 auto; pointer-events: none; transition: opacity 0.1s; opacity: 1; }
#gallery .bg-col { display: none; height: 100%; background-color: #f9fafb; position: relative; overflow: hidden; border-right: 1px solid #000; }
#gallery .bg-col-center { height: 100%; width: 100%; background-color: #000; }
#gallery .marquee-vert-wrap { height: 100%; overflow: hidden; position: relative; width: 100%; }
#gallery .marquee-vert-inner { display: flex; flex-direction: column; gap: 1rem; position: absolute; width: 100%; top: 0; }
#gallery .animate-marquee-vertical { animation: marquee-vertical 40s linear infinite; }
#gallery .animate-marquee-vertical-reverse {animation: marquee-vertical 40s linear infinite reverse;flex-direction: column-reverse;}
#gallery .gallery-img-item { width: 100%; }
#gallery .gallery-img { width: 100%; height: auto; object-fit: cover; filter: grayscale(100%); }
#gallery .content-layer { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr; height: 100%; max-width: 1920px; margin: 0 auto; pointer-events: none; }
#gallery .content-col-side { display: none; }
#gallery .content-col-center { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 20; }
#gallery .top-img-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2rem; transition: opacity 0.1s; }
#gallery .img-box { width: 75%; height: 75%; opacity: 0.6; filter: grayscale(100%); position: relative; }
#gallery .img-cover { width: 100%; height: 100%; object-fit: cover; }
#gallery .main-img-container {position: relative;z-index: 50;width: 75%;aspect-ratio: 24/9;box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);transform-origin: center;transition: transform 0.05s ease-out;transform: scale(1);display: flex;flex-direction: column;align-items: center;justify-content: center;}
#gallery .main-img-container:before{content:"";position:absolute;width: 103%;height: 105%;background: #ffffff;z-index: -1;border-radius: 6px;}
#gallery .main-img {width: 100%;height: 100%;object-fit: cover;}
#gallery .gallery-text { position: absolute; bottom: 1rem; left: 1rem; z-index: 30; mix-blend-mode: difference; transition: opacity 0.1s; }
#gallery .gallery-tag {display: block;color: #fff;font-size: 0.75rem;font-family: monospace;letter-spacing: 0.1em;margin-bottom: 0.25rem;opacity: 0;}
#gallery .gallery-title {font-size: 2.25rem;font-weight: 900;color: #fff;letter-spacing: 0.02em;line-height: 1;opacity: 0;}
#gallery .bottom-img-wrap { flex: 1; width: 100%; display: flex; align-items: flex-start; justify-content: center; padding-top: 2rem; transition: opacity 0.1s; }
/* 手機版 (640px 以下) 取消 Gallery 的 300vh 滾動與黏性定位 */
@media (max-width:640px) {
  #gallery { height: 100vh; }
  #gallery .sticky-container { position: relative; }
}
@media (min-width:768px) {
  #gallery .bg-layer { grid-template-columns: repeat(3,1fr); border-left: 1px solid #000; border-right: 1px solid #000; }
  #gallery .bg-col { display: block; }
  #gallery .content-layer { grid-template-columns: repeat(3,1fr); }
  #gallery .content-col-side { display: block; }
  #gallery .gallery-title { font-size: 4rem; }
}
/* 隱藏取圖用的隱藏區塊 */
.takeimg_box { display: none; }
#about { background-color: #f3f3f3; color: #000; padding: 4rem 1.5rem; position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; justify-content: center; border-top: 1px solid #000; }
#about .about-container { width: 100%; max-width: 1400px; margin: 0 auto; position: relative; z-index: 10; }
#about .about-detail { position: relative; z-index: 30; background-color: rgba(255,255,255,0.95); backdrop-filter: blur(12px); padding: 3rem; border-radius: 2rem; box-shadow: 0 20px 50px rgba(0,0,0,0.08); text-align: center; border: 1px solid rgba(0,0,0,0.05); max-width: 600px; margin: 0 auto 3rem auto; }
#about .bootitle{display:flex;flex-direction: column;align-items: center;}
#about .about-logo { width: 80px; height: auto; margin: 0 auto 1.5rem auto; display: block; }
#about .about-tag { font-family: monospace; font-size: 0.875rem; letter-spacing: 0.2em; margin-bottom: 0.5rem; color: #7f1084; text-transform: uppercase; }
#about .about-main-title {font-size: 2.5rem;font-weight: 900;line-height: 1.1;margin-bottom: 1.5rem;letter-spacing: 0em;text-align: center;}
#about .about-text {font-size: 1rem;line-height: 1.8;color: #444;margin-bottom: 2rem;font-weight: 500;display: flex;flex-direction: column;align-items: center;gap: 5px;}
#about .about-text P.boctext{font-size: 1rem;}
#about .about-text P{text-align: center;font-size: 0.75rem;word-break: auto-phrase;font-weight: 400;}
#about .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 3rem; background-color: #7f1084; color: #fff; font-weight: 700; border-radius: 9999px; transition: all 0.3s cubic-bezier(0.16,1,0.3,1); box-shadow: 0 10px 20px rgba(127,16,132,0.2); }
#about .btn-primary:hover { background-color: #000; transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0,0,0,0.3); }
#about .text-slider { position: absolute; top: 0; bottom: 0; width: 8rem; overflow: hidden; color: #e5e5e5; font-weight: 900; font-size: 6rem; line-height: 1; white-space: nowrap; user-select: none; z-index: 5; display: none; pointer-events: none; flex-direction: column; }
#about .text-slider.is-left { left: 0; }
#about .text-slider.is-right { right: 0; }
#about .text-slider span {writing-mode: vertical-rl;text-orientation: mixed;padding: 2rem 0;letter-spacing: 0.2em;animation: marquee-vertical 30s linear infinite;font-size: 6rem;}
#about .text-slider.is-right span { animation: marquee-vertical 30s linear infinite reverse; }
#about .cards-nav { position: relative; z-index: 10; width: 100%; }
#about .cards-list { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
#about .card-wrap { perspective: 1500px; width: 100%; height: 360px; position: relative; cursor: pointer; }
#about .card-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.34,1.56,0.64,1); background: #fff; border: 2px solid #000; border-radius: 2rem; transform: rotate(0deg); }
#about .card-wrap:hover .card-inner { box-shadow: 0px 20px 40px rgba(127,16,132,0.2); border-color: #7f1084; z-index: 50; }
#about .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; padding: 3rem; border-radius: 1.8rem; }
#about .card-wrap:nth-child(odd) .card-face { align-items: flex-start; text-align: left; }
#about .card-wrap:nth-child(odd) .card-icon { right: 2rem; bottom: 2rem; }
#about .card-wrap:nth-child(even) .card-face { align-items: flex-end; text-align: right; }
#about .card-wrap:nth-child(even) .card-icon { left: 2rem; bottom: 2rem; }
#about .card-front { background-color: #fff; color: #000; z-index: 2; }
#about .card-back { background-color: #7f1084; color: #fff; transform: rotateY(180deg); z-index: 1; }
#about .card-sub { font-size: 0.9rem; opacity: 0.6; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
#about .card-num { font-size: 3.5rem; font-weight: 900; line-height: 1; color: #7f1084; font-family: 'Inter',sans-serif; margin-bottom: 0.25rem; }
#about .card-label { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
#about .card-icon { position: absolute; width: 2rem; height: 2rem; color: currentColor; }
#about .card-back-text { font-size: 1.75rem; font-weight: 800; margin-bottom: 2rem; line-height: 1.3; max-width: 85%; }
#about .card-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 2rem; background: transparent; color: #fff; font-weight: 700; border-radius: 9999px; transition: all 0.3s; border: 1px solid rgba(255,255,255,0.6); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
#about .card-button:hover { background: #fff; color: #7f1084; border-color: #fff; }
#about .card-button i { transition: transform 0.3s; }
#about .card-button:hover i { transform: translateX(4px); }
@media (max-width:1023px) {
  #about .card-wrap:hover .card-inner { transform: rotateY(180deg); }
}
@media (min-width:1024px) {
  #about { padding: 7rem 3rem; }
  #about .about-container { padding: 0 3rem; }
  #about .about-detail { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0; width: 35%; min-width: 400px; }
  #about .cards-list { grid-template-columns: repeat(2,1fr); gap: 2rem; }
  #about .card-wrap:nth-child(1):hover .card-inner {transform: translate(-9rem,-2rem) rotateY(180deg) rotateZ(4deg) scale(1.05);}
  #about .card-wrap:nth-child(2):hover .card-inner {transform: translate(9rem,-2rem) rotateY(180deg) rotateZ(-4deg) scale(1.05);}
  #about .card-wrap:nth-child(3):hover .card-inner {transform: translate(-9rem,2rem) rotateY(180deg) rotateZ(4deg) scale(1.05);}
  #about .card-wrap:nth-child(4):hover .card-inner {transform: translate(9rem,2rem) rotateY(180deg) rotateZ(-4deg) scale(1.05);}
}
@media (min-width:1280px) {
  #about .text-slider { display: flex; }
}
@media (min-width:1440px) {
  #about .about-container { padding: 0 10rem; }
}
#news { padding: 6rem 1.5rem; background-color: #f3f3f3; border-top: 1px solid #000; }
#news .news-container { max-width: 80rem; margin: 0 auto; }
#news .news-header { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; margin-bottom: 4rem; border-bottom: 1px solid #000; padding-bottom: 1rem; }
#news .news-main-title { font-size: 3.75rem; font-weight: 900; color: #7f1084; letter-spacing: -0.05em; line-height: 1; margin-bottom: 1rem; }
#news .news-view-all {font-weight: 700;text-decoration: underline;text-underline-offset: 4px;text-decoration-thickness: 2px;transition: color 0.3s;padding-bottom: 0.5rem;color: #000000;}
#news .news-view-all:hover { color: #7f1084; }
#news .news-list { display: flex; flex-direction: column; }
#news .news-item {position: relative;display: flex;flex-direction: column;border-bottom: 1px solid #d1d5db;padding: 2rem 0;cursor: pointer;transition: all 0.4s cubic-bezier(0.16,1,0.3,1);}
#news .news-item:hover { background-color: #fff; padding-left: 1.5rem; padding-right: 1.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-color: transparent; border-radius: 0.5rem; transform: translateY(-2px); }
#news .news-meta { width: 100%; display: flex; align-items: baseline; gap: 1rem; margin-bottom: 0.5rem; }
#news .news-date { font-family: monospace; font-size: 0.875rem; color: #6b7280; }
#news .news-tag { font-size: 0.75rem; font-weight: 700; background-color: #000; color: #fff; padding: 0.125rem 0.5rem; }
#news .news-content { width: 100%; }
#news .news-item-title {font-size: 1.25rem;font-weight: 700;margin-bottom: 0.25rem;transition: color 0.3s;overflow: hidden;height: 38px;text-align: left;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;transition: color 0.3s ease, all 0s;}
#news .news-item:hover .news-item-title { color: #7f1084; }
#news .news-desc { color: #6b7280; font-family: sans-serif; font-size: 0.875rem; }
@media (min-width:768px) {
  #news .news-header { flex-direction: row; align-items: flex-end; }
  #news .news-main-title { font-size: 6rem; margin-bottom: 0; }
  #news .news-view-all { padding-bottom: 0; }
  #news .news-item { flex-direction: row; }
  #news .news-meta { width: 25%; margin-bottom: 0; }
  #news .news-content { width: 75%; }
  #news .news-item-title { font-size: 1.5rem; }
}
#action {position: relative;width: 100%;height: 60vh;background-color: #000;overflow: hidden;display: flex;align-items: flex-end;justify-content: center;}
#action .action-bg {position: absolute;inset: -30% 0 0 0;width: 100%;height: 160%;opacity: 0.5;pointer-events: none;}
#action .action-img { width: 100%; height: 100%; object-fit: cover; }
#action .action-content {position: relative;z-index: 10;text-align: center;padding: 0 1.5rem;display: flex;flex-direction: column;align-items: center;gap: 20px;margin-bottom: 10vh;}
#action .action-title {font-size: 3rem;font-weight: 700;color: #fff;letter-spacing: 0.1em;mix-blend-mode: difference;text-transform: uppercase;line-height: 1;}
#action .action-title-stroke { color: transparent; -webkit-text-stroke: 2px #7f1084; }
#action .action-desc {color: rgba(255,255,255,0.8);max-width: 42rem;margin: 0 auto 0rem auto;line-height: 1.25em;text-align: center;font-size: 0.8rem;}
.action-chtext{color: rgba(255,255,255,0.8);text-align: center;}
#action .btn-apply { background-color: #7f1084; color: #fff; padding: 1rem 2rem; font-size: 1.125rem; font-weight: 700; transition: all 0.3s cubic-bezier(0.16,1,0.3,1); border: 2px solid #7f1084; box-shadow: 0 10px 20px rgba(127,16,132,0.3); }
#action .btn-apply:hover { background-color: #fff; color: #7f1084; border-color: #fff; transform: translateY(-3px); box-shadow: 0 15px 30px rgba(255,255,255,0.2); }


.webBox .indexh1 .pageh1 { position: relative; top: auto; color: white; font-size: 1.75rem; }


#footer-section { background-color: #7f1084; color: #fff; padding: 5rem 1.5rem 2.5rem 1.5rem; }
#footer-section .footer-container { max-width: 80rem; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 3rem; margin-bottom: 5rem; }
#footer-section .footer-brand { grid-column: span 1; }
#footer-section .footer-title { font-size: 3.75rem; font-weight: 900; letter-spacing: -0.05em; margin-bottom: 1.5rem; }
#footer-section .footer-desc { max-width: 28rem; opacity: 0.8; line-height: 1.6; }
#footer-section .footer-address { margin-top: 1rem; opacity: 0.8; font-family: monospace; font-size: 0.875rem; line-height: 1.6; }
#footer-section .footer-col-title { font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 1rem; margin-bottom: 1rem; letter-spacing: 0.05em; }
#footer-section .footer-list { display: flex; flex-direction: column; gap: 0.5rem; opacity: 0.8; font-size: 0.875rem; }
#footer-section .footer-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
#footer-section .footer-bottom { max-width: 80rem; margin: 0 auto; display: flex; flex-direction: column; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 2rem; opacity: 0.6; font-size: 0.875rem; gap: 1rem; text-align: center; }
@media (min-width:768px) {
  #action {height: 80vh;}
  #action .action-title {font-size: 8rem;}
  #footer-section .footer-container { grid-template-columns: repeat(4,1fr); gap: 3rem; }
  #footer-section .footer-brand { grid-column: span 2; }
  #footer-section .footer-bottom { flex-direction: row; text-align: left; gap: 0; }
}
@media (max-width:640px) {
  #news .news-item { padding: 0.8rem 0.2rem; }
  #news .news-item:hover { padding: 1.5rem; }
  #action { height: 50vh; }
  #action .action-bg { transform: unset!important; inset: 0% 0 0 0; height: 100%; }
  #action .btn-apply { font-size: 0.75rem; padding: 0.7rem 1.5rem; }
  .action-chtext { display: none; }
  #news .news-item-title { -webkit-line-clamp: unset; height: auto; letter-spacing: 0; }
}

@media (max-width:480px) {
  #about .card-wrap { height: 280px; }
  #about .card-back-text { max-width: 95%; }
  #about .card-face { padding: 2rem 2rem; }
}