@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+TC:wght@100..900&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Montserrat","Noto Sans TC",sans-serif; -webkit-font-smoothing: antialiased; }
body { background-color: #050505; color: #ffffff; overflow-x: hidden; line-height: 1.6; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.text-orange { color: #f47920; }
.text-gray { color: #888888; }
.text-gold { color: #d4af37; }
.wrapper{overflow:hidden;}
/* 光流動動畫定義 */
@keyframes gridLightFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes lineFlow {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
#header-nav { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; z-index: 201; background: rgba(5,5,5,0.8); backdrop-filter: blur(10px); }
#header-nav::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: rgba(255,255,255,0.1); }
#header-nav::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg,transparent 0%,rgba(244,121,32,0.8) 50%,transparent 100%); animation: lineFlow 5s linear infinite; }
#header-nav .logo { font-size: 1.25rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
#header-nav #cis{position:absolute;z-index: 5;top: 0;padding: 20px;background: linear-gradient(to right, #f47920, #f4792003);}
#header-nav #cis img{width: 140px;}

/* 桌面版選單樣式 */
#header-nav .desktop-menu { display: flex; gap: 1.5vw; align-items: center; }
#header-nav .desktop-menu a { font-size: 0.85rem; color: #ccc; letter-spacing: 1px; transition: color 0.3s ease; }
#header-nav .desktop-menu a:hover { color: #f47920; }
.header-right { display: flex; align-items: center; gap: 20px; }
#header-nav .btn-nav { padding: 8px 20px; border: 1px solid rgba(255,255,255,0.3); border-radius: 30px; font-size: 0.8rem; letter-spacing: 1px; transition: all 0.3s ease; cursor: pointer; }
#header-nav .btn-nav:hover { background: #fff; color: #000; }
/* 手機版漢堡按鈕 */
.menu-toggle { display: none; flex-direction: column; gap: 6px; cursor: pointer; width: 30px; height: 24px; justify-content: center; z-index: 202; }
.menu-toggle span { display: block; width: 100%; height: 2px; background: #fff; transition: all 0.4s cubic-bezier(0.165,0.84,0.44,1); }
.menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* 手機版全螢幕選單遮罩 */
.mobile-menu-overlay { position: fixed; inset: 0; background: rgba(5,5,5,0.95); z-index: 200; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; backdrop-filter: blur(10px); }
.mobile-menu-overlay.active { opacity: 1; pointer-events: auto; }
.mobile-menu-links { display: flex; flex-direction: column; text-align: center; gap: 20px; }
.mobile-menu-links a { font-size: 1.3rem; font-weight: 300; letter-spacing: 4px; color: #aaa; transition: all 0.4s ease; transform: translateY(20px); opacity: 0; }
.mobile-menu-overlay.active .mobile-menu-links a { transform: translateY(0); opacity: 1; }
.mobile-menu-links a:hover { color: #f47920; }
/* 手機版選單階梯式浮現動畫 */
.mobile-menu-overlay.active .mobile-menu-links a:nth-child(1) { transition-delay: 0.10s; }
.mobile-menu-overlay.active .mobile-menu-links a:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu-overlay.active .mobile-menu-links a:nth-child(3) { transition-delay: 0.20s; }
.mobile-menu-overlay.active .mobile-menu-links a:nth-child(4) { transition-delay: 0.25s; }
.mobile-menu-overlay.active .mobile-menu-links a:nth-child(5) { transition-delay: 0.30s; }
.mobile-menu-overlay.active .mobile-menu-links a:nth-child(6) { transition-delay: 0.35s; }
.mobile-menu-overlay.active .mobile-menu-links a:nth-child(7) { transition-delay: 0.40s; }
.mobile-menu-overlay.active .mobile-menu-links a:nth-child(8) { transition-delay: 0.45s; }
/* 網格系統與發光線條背景 */
.bento-wrapper { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: linear-gradient(45deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 45%,rgba(244,121,32,0.8) 50%,rgba(255,255,255,0.1) 55%,rgba(255,255,255,0.1) 100%); background-size: 400% 400%; animation: gridLightFlow 12s ease-in-out infinite; margin-top: 70px; padding-bottom: 1px; }
.bento-item { background: #050505; padding: 40px; position: relative; overflow: hidden; display: flex; flex-direction: column; }


.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }
.hero-group {position: relative;grid-column: span 4;display: grid;grid-template-columns: 3fr 1fr;gap: 1px;height: 560px;}
.hero-group:before{content:"";position:absolute;background: linear-gradient(to right, #f4792000, #f47920);width: 10vw;aspect-ratio: 1/1;right: 25%;z-index: 5;bottom: 0;}
.section-label { font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; color: #888; margin-bottom: 20px; }
.mega-title { font-size: 3.5rem; font-weight: 500; line-height: 1.1; letter-spacing: -1px; text-transform: uppercase; }
.desc-text { font-size: 1.25rem; color: #aaa; font-weight: 300; line-height: 1.6; }
/* Mega Title 逐字滑入特效 */
.mega-title.fade-in { opacity: 1; transform: none; transition: none; }
.mega-title .char { display: inline-block; opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); }
.mega-title.visible .char { opacity: 1; transform: translateY(0); }

.btn-circle-arrow { width: 40px; height: 40px; border-radius: 50%; background: #111; border: 1px solid rgba(255,255,255,0.1); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer; transition: all 0.3s ease; color: #fff; }
.btn-circle-arrow:hover { background: #f47920; border-color: #f47920; color: #fff; transform: scale(1.05); }
.btn-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 25px; border-radius: 30px; border: 1px solid rgba(255,255,255,0.2); font-size: 0.85rem; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; }
.btn-pill:hover { background: #fff; color: #000; }
.btn-pill-gold { border-color: #d4af37; color: #d4af37; }
.btn-pill-gold:hover { background: #d4af37; color: #000; }
.shape-circle-dashed { width: 100%; aspect-ratio: 1/1; border-radius: 50%; border: 1px dashed rgba(255,255,255,0.2); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; position: relative; }
.shape-pill-img {width: 100%;height: 100%;border-radius: 0;overflow: hidden;position: relative;}

.indexh1 h1{margin-top: 100px;font-size: 2rem;}
/* Service Slider 樣式 */
.p-box { width: 100%; display: block; }
.teacher-box { padding: 0 15px; outline: none; cursor: pointer; }
.teacher-box .pic {width: 100%;height: 430px;border-radius: 200px 200px 0 0;overflow: hidden;position: relative;}
.teacher-box .pic img {width: 100%;height: 100%;object-fit: cover;filter: grayscale(10%) brightness(0.8);transition: all 0.8s ease;}
.teacher-box:hover .pic img { filter: grayscale(0%) brightness(0.9); transform: scale(1.05); }
.teacher-info { padding: 25px 0 10px; text-align: center; }
.teacher-info span {font-size: 0.75rem;color: #f47920;letter-spacing: 2px;text-transform: uppercase;font-weight: 600;border: rgb(243 121 32 / 57%) 1px solid;padding: 4px 16px;border-radius: 66px;}
.teacher-info .h2 { font-size: 1.5rem; font-weight: 500; margin: 10px 0; }
.teacher-info .h2 a {color: #fff;transition: color 0.3s;text-decoration: none;font-size: 1.5rem;}
.teacher-info .h2 a:hover { color: #f47920; }
.teacher-info p { font-size: 0.9rem; color: #aaa; line-height: 1.6; }
/* 最新消息 News List 樣式 */
.newsWrap { width: 100%; display: block; margin-top: 20px; }
.newsWrap .picList { list-style: none; padding: 0; margin: 0; }
.newsWrap .picList li { border-bottom: 1px solid rgba(255,255,255,0.1); padding: 35px 0; transition: all 0.4s ease; cursor: pointer; position: relative; overflow: hidden; }
.newsWrap .picList li::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg,transparent,rgba(244,121,32,0.5),transparent); transform: translateX(-100%); transition: transform 0.6s ease; }
.newsWrap .picList li:hover::after { transform: translateX(100%); transition: transform 0.6s ease; }
.newsWrap .picList li:first-child { padding-top: 0; }
.newsWrap .picList li:last-child { border-bottom: none; padding-bottom: 0; }
.newsWrap .picList li:hover { padding-left: 15px; }
.newsWrap .info { display: flex; gap: 40px; align-items: flex-start; }
.newsWrap .date { flex-shrink: 0; width: 80px; text-align: left; }
.newsWrap .date .year { display: block; font-size: 0.85rem; color: #f47920; font-weight: 600; letter-spacing: 2px; margin-bottom: 5px; }
.newsWrap .date span:last-child {font-size: 1.6rem;font-weight: 500;line-height: 1;color: #fff;}
.newsWrap .txt { flex-grow: 1; }
.newsWrap .txt .h3 { font-size: 1.25rem; font-weight: 500; margin-bottom: 12px; }
.newsWrap .txt .h3 a {color: #fff;text-decoration: none;transition: color 0.3s ease;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;height: 31px;font-size: 1.25rem;}
.newsWrap .picList li:hover .txt .h3 a { color: #f47920; }
.newsWrap .txt p {font-size: 0.95rem;color: #aaa;line-height: 1.6;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;height: 25px;}
.block-news-title:before{content:"";position:absolute;background: linear-gradient(to right, rgb(244 121 32 / 50%), rgb(244 121 32 / 0%));width: 10.6vw;aspect-ratio: 1/1;left: 0%;z-index: 0;top: 0;}


/* 自訂 Slick Dots 樣式 */
.slick-dots { display: flex; justify-content: center; gap: 10px; margin-top: 30px; list-style: none; }
.slick-dots li button { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.2); border: none; font-size: 0; cursor: pointer; transition: background 0.3s; padding: 0; }
.slick-dots li.slick-active button { background: #f47920; box-shadow: 0 0 10px rgba(244,121,32,0.5); }
.img-cover {width: 100%;height: 100%;object-fit: cover;filter: grayscale(0%) brightness(0.8);transition: all 0.8s ease;}
.img-contain { width: 100%; height: 100%; object-fit: contain; }
.bento-item:hover .img-cover { filter: grayscale(0%) brightness(0.9); transform: scale(1.05); }
/* Specific Component Styles replacing inline styles */
.flex-center { align-items: center; justify-content: center; }
.flex-end { justify-content: flex-end; }
.flex-space-between { justify-content: space-between; }
.flex-justify-center { justify-content: center; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.align-self-start { align-self: flex-start; }
.align-self-end { align-self: flex-end; }
.margin-top-auto {margin-top: auto;}
.margin-bottom-sm { margin-bottom: 5px; }
.margin-bottom-md { margin-bottom: 15px; }
.margin-bottom-lg { margin-bottom: 20px; }
.margin-bottom-xl { margin-bottom: 30px; }
.margin-top-lg { margin-top: 20px; }
.padding-bottom-none { padding-bottom: 0; }
.padding-top-none { padding-top: 0; }
.padding-none { padding: 0; }
.border-none { border: none; }
.font-light-lg { font-size: 1.5rem; font-weight: 300; }
.font-size-md { font-size: 1.25rem; }
.font-size-sm { font-size: 1.1rem; }
.font-size-xs { font-size: 0.85rem; }
.font-size-xxs { font-size: 0.7rem; }
.font-weight-medium { font-weight: 500; }
.text-underline-light { border-bottom: 1px solid #fff; padding-bottom: 2px; }
.text-underline { text-decoration: underline; }
.btn-pill-small { font-size: 0.7rem; padding: 5px 15px; }
.btn-circle-small {width: 30px;height: 30px;font-size: 0.8rem;margin-left: 10px;}
.pos-absolute-tl { position: absolute; top: 20px; left: 20px; }
.pos-absolute-br { position: absolute; bottom: 20px; right: 20px; }
.pos-absolute-tl-lg { position: absolute; top: 30px; left: 30px; z-index: 2; }
.pos-absolute-inset { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; font-size: 1.5rem; letter-spacing: 2px; }
.filter-grayscale-full { filter: grayscale(100%); }
.block-watch-promo { justify-content: center; padding: 0; transition: transform 0.3s ease; }
.morebox { display: flex; align-items: center; position: relative; padding-right: 50px; justify-content: flex-end; }
.morebox .btn-circle-arrow { position: absolute; right: 0; }
.morebox:hover .btn-circle-small { background: #ff6600; }

/* YouTube Background Styles */
.yt-bg-wrapper { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.yt-bg-iframe {position: absolute;top: 0;left: 0;width: 110%;height: 110%;transform: translate(-5%,-5%);pointer-events: none;object-fit: cover;}

#hero-section { position: relative; overflow: hidden; }
/* Slick Slider 樣式覆蓋 */
#hero-section .hero-slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
#hero-slider .slick-list,#hero-slider .slick-track,#hero-slider .slick-slide { height: 100%; }
#hero-slider .slick-slide > div { height: 100%; }
#hero-section .hero-slide {width: 100%;height: 100%;object-fit: cover;outline: none;cursor: grab;object-position: 50%;}
#hero-section .hero-slide:active { cursor: grabbing; }
#hero-section .large-circle { position: absolute; top: -20%; right: -10%; width: 600px; height: 600px; border-radius: 50%; border: 1px dashed rgba(255,255,255,0.15); pointer-events: none; z-index: 1; }
/* 數字動畫區塊樣式更新 */
.block-stat { flex-direction: row; align-items: center; justify-content: flex-start; gap: 20px; }
.stat-value { line-height: 1; display: flex; align-items: flex-end; gap: 5px; margin-bottom: 0; flex-shrink: 0; min-width: 85px; }
.stat-value .counter { font-size: 3.5rem; font-weight: 700; color: #f47920; font-family: "Helvetica Neue",Arial,sans-serif; letter-spacing: -2px; }
.stat-value .unit { font-size: 1rem; color: #aaa; font-weight: 500; margin-bottom: 6px; }
.stat-desc {font-size: 1rem;color: #888;letter-spacing: 1px;text-align: left;line-height: 1.4;}
/* HOW IT WORKS 區塊樣式：水平對齊與按鈕群組 */
.block-services-title { flex-direction: row; justify-content: space-between; align-items: center; }
.block-services-title .mega-title { margin-bottom: 0; }
.slider-nav-group { display: flex; gap: 10px; align-items: center; }
.slider-nav-group .align-self-end{margin-left: 40px;}
/* 全新 Footer 樣式設計與發光邊界 */
#main-footer { background: #000; padding: 80px 40px 40px; position: relative; }
#main-footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: rgba(255,255,255,0.15); }
#main-footer::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg,transparent 0%,rgba(244,121,32,0.8) 50%,transparent 100%); animation: lineFlow 8s linear infinite 3s; }
#main-footer .container { max-width: 1400px; margin: 0 auto; }
#main-footer .footer-layout { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 60px; padding-bottom: 60px; position: relative; }
#main-footer .footer-layout::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: rgba(255,255,255,0.1); }
#main-footer .footer-layout::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg,transparent 0%,rgba(244,121,32,0.8) 50%,transparent 100%); animation: lineFlow 7s linear infinite 1s; }
#main-footer .footer-brand .f-desc { color: #888; line-height: 1.8; margin-top: 15px; font-size: 0.95rem; }
#main-footer .footer-brand img {max-height: 110px;filter: brightness(0) invert(1);}
/* 若原Logo為黑字，將其轉白 */
#main-footer .f-col-title {color: #fff;font-size: 1.1rem;font-weight: 500;margin-bottom: 15px;letter-spacing: 2px;}
#main-footer .contact-list {display: flex;flex-direction: column;gap: 15px;}
#main-footer .contact-list .c-item{display:flex;}
#main-footer .c-item a {display: flex;gap: 5px;transition: all 0.3s ease;align-items: center;}
#main-footer .c-item a:hover .c-value { color: #f47920; }
#main-footer .c-label {font-size: 1.05rem;color: #f47920;letter-spacing: 2px;text-transform: uppercase;font-weight: 600;}
#main-footer .c-value { color: #bbb; font-size: 0.95rem; transition: color 0.3s; }
#main-footer #footer-other { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; flex-wrap: wrap; gap: 30px; }
#main-footer nav { display: flex; gap: 25px; flex-wrap: wrap; }
#main-footer nav a { color: #888; transition: color 0.3s; font-size: 0.9rem; letter-spacing: 1px; }
#main-footer nav a:hover { color: #f47920; }
#main-footer .qr_box { display: flex; gap: 15px; }
#main-footer .qrcode img {width: 100px;height: 100px;object-fit: cover;border-radius: 8px;border: 1px solid rgba(255,255,255,0.2);transition: border-color 0.3s;}
#main-footer .qrcode a:hover img { border-color: #f47920; }
#main-footer .footer-copyright { text-align: center; color: #555; font-size: 0.85rem; letter-spacing: 1px; }
#main-footer .footer-copyright a { color: #888; transition: color 0.3s; }
#main-footer .footer-copyright a:hover { color: #f47920; }
#main-footer .maq { margin-top: 30px; font-size: 0.75rem; color: #333; overflow: hidden; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 20px; }
#main-footer .copy {display: flex;justify-content: flex-end;flex-wrap: wrap;}
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out,transform 0.8s ease-out; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
/* Block High Altitude 互動設計 */
.text-decoration-none { text-decoration: none; color: inherit; }
.block-high-altitude { cursor: pointer; transition: background 0.4s ease; display: flex; }
.block-high-altitude:hover {background: rgb(0 0 0);}
.shape-circle-interactive { width: 100%; aspect-ratio: 1/1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; position: relative; }
.spinning-ring { position: absolute; inset: 0; border: 1px dashed rgba(255,255,255,0.2); border-radius: 50%; animation: spin 15s linear infinite; pointer-events: none; }
.orange-dot { position: absolute; top: -6px; left: calc(50% - 6px); width: 12px; height: 12px; background-color: #f47920; border-radius: 50%; box-shadow: 0 0 12px #f47920; }
.text-contact-wrap { position: relative; z-index: 2; pointer-events: none; }
.text-contact-title {font-size: 2.25rem;font-weight: 600;line-height: 1.4;margin-bottom: 10px;letter-spacing: 2px;}
.text-contact-action {font-size: 0.9rem;color: #ffffff;font-weight: 500;letter-spacing: 4px;border: #ffffff63 1px solid;border-radius: 666px;padding: 7px 0;background-color: #f47920;}
.btn-circle-arrow-large {position: absolute;bottom: 5%;right: 9%;width: 30px;height: 30px;border-radius: 50%;background: rgba(255,255,255,0.05);border: 1px solid rgba(255,255,255,0.2);backdrop-filter: blur(5px);display: inline-flex;align-items: center;justify-content: center;font-size: 1.25rem;cursor: pointer;transition: all 0.5s cubic-bezier(0.165,0.84,0.44,1);color: #fff;z-index: 3;padding: 38px;}
.block-high-altitude:hover .btn-circle-arrow-large {background: #f47920;border-color: #f47920;transform: scale(1.15) rotate(-88deg);box-shadow: 0 10px 25px rgba(244,121,32,0.4);}
@keyframes spin {
  100% { transform: rotate(360deg); }
}

/* 懸浮按鈕群組 (Floating Action Buttons) */
.fab-container { position: fixed; right: 30px; bottom: 30px; display: flex; flex-direction: column; gap: 15px; z-index: 9999; transform: translateY(65px); transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.fab-container.is-active { transform: translateY(0); }
.fab-btn {width: 50px;height: 50px;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #fff;box-shadow: 0 10px 20px rgba(0,0,0,0.15);transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);text-decoration: none;border: 2px solid #3e5ca9;outline: none;background: #38549d;}
.fab-btn svg{fill: white;width: 20px;height: 20px;}
.fab-btn:hover { transform: scale(1.1) translateY(-3px); box-shadow: 0 15px 25px rgba(0,0,0,0.25); color: #fff; }
.fab-phone {background-color: #e05900;border-color: #ff6600;}
.fab-line {background-color: #0cb14f;border-color: #06C755;}
.fab-top { background-color: #1a1a1a; border-color: rgba(255,255,255,0.2); opacity: 0; pointer-events: none; transition: opacity 0.4s ease, transform 0.3s ease; }
.fab-top:hover { background-color: #ff6600; border-color: #ff6600; }
.fab-container.is-active .fab-top { opacity: 1; pointer-events: auto; }
.fab-top svg{fill:unset;}

@media (max-width:1470px) {
  .bento-wrapper { margin-top: 78px; }
  .bento-item { padding: 30px; }
  .hero-group { height: 370px; }
  .text-contact-title { font-size: 2rem; }
  .mega-title { font-size: 3rem; }
  .block-watch-promo,.padding-none { padding: 0px; }
  .btn-circle-arrow-large { bottom: 7px; right: 7px; padding: 25px; }
  .desc-text { font-size: 1.05rem; }
  .teacher-box .pic { height: 380px; }
  #main-footer .footer-layout { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .stat-desc { font-size: 0.8rem; }
  .block-stat { gap: 10px; }
  #main-footer .qrcode img { width: 80px; height: 80px; }
}
@media (max-width:1200px) {
  #header-nav .desktop-menu { display: none; }
  .menu-toggle { display: flex; }
  .mega-title { font-size: 2.5rem; }
  .shape-arch-img { height: 300px; }
  .hero-group { height: 360px; }
  #main-footer .footer-layout { grid-template-columns: 1fr 1fr; }
}
@media (max-width:1024px) {
  .btn-circle-arrow-large { display: none; }
}
@media (max-width:900px) {
  #header-nav { padding: 15px 20px; }
  .bento-wrapper { grid-template-columns: repeat(2,1fr); margin-top: 60px; }
  .span-3,.span-4 { grid-column: span 2; }
  .row-span-3 { grid-row: auto; }
  .hero-group { grid-template-columns: 1fr; height: auto; }
  #hero-section { min-height: 400px; }
  .block-high-altitude { display: none; }
  .block-who-we-are,.block-news-title,.block-stat.lastchat { grid-column: 1/-1; }
  .block-news-title:before { background: linear-gradient(to bottom,rgb(244 121 32/50%),rgb(244 121 32/0%)); left: auto; right: 0%; width: 20vw; }
}
@media (max-width:768px) {
  #hero-section { min-height: 335px; }
  .hero-group:before { right: 0; width: 16vw; }
  #main-footer { padding: 60px 20px 30px; }
  #main-footer .footer-layout { grid-template-columns: 1fr; gap: 40px; margin-bottom: 40px; padding-bottom: 40px; }
  #main-footer #footer-other { flex-direction: column; align-items: flex-start; }
  #main-footer nav { gap: 15px; }
  .fab-container { right: 20px; bottom: 20px; transform: translateY(55px); gap: 10px; }
  .fab-container.is-active { transform: translateY(0); }
}
@media (max-width:600px) {
  .bento-wrapper { grid-template-columns: 1fr; overflow: hidden; }
  .span-2,.span-3,.span-4 { grid-column: span 1; }
  .bento-item { padding: 30px; }
  .shape-pill-img { border-radius: 30px; height: 200px; }
  .shape-arch-img { border-radius: 30px; height: 250px; }
  .stat-value .counter { font-size: 3rem; }
  .newsWrap .picList li { padding: 5px 0; }
  .newsWrap .info { flex-direction: column; gap: 15px; }
  .newsWrap .date { width: auto; display: flex; gap: 15px; align-items: baseline; }
  .newsWrap .date .year { margin-bottom: 0; }
  .newsWrap .picList li:hover { padding-left: 0; }
  .block-services-title { display: flex; flex-wrap: wrap; gap: 20px; }
}
@media (max-width:480px) {
  #header-nav #cis img { width: 80px; }
  #hero-section { min-height: 230px; padding: 0; }
  .block-who-we-are { display: none }
  .teacher-box .pic { height: 280px }
  .block-news-title:before { width: 27vw; }
  #main-footer .copy { display: flex; justify-content: flex-start; }
}