@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&family=Inter:wght@400;500;600&family=Public+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;font-family:'Inter',system-ui,sans-serif;color:#1e293b;background:#f8fafc;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;border:0;display:block;}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;}
.ms-fill{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;}

/* ===== Top Bar ===== */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:rgba(255,255,255,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid #f1f5f9;}
.topbar-brand{display:flex;align-items:center;gap:8px;}
.topbar-brand .material-symbols-outlined{font-size:24px;color:#3366cc;}
.topbar-title{font-family:'Noto Serif',serif;font-weight:700;font-size:20px;color:#1e40af;}
.topbar-right{display:flex;align-items:center;gap:8px;}
.topbar-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#475569;background:none;border:none;cursor:pointer;}
.topbar-login{font-size:13px;font-weight:600;padding:7px 18px;border-radius:8px;background:#3366cc;color:#fff;border:none;cursor:pointer;}

/* ===== Main ===== */
.home-main{padding:68px 16px 64px;max-width:640px;margin:0 auto;}
.home-main>*+*{margin-top:20px;}

/* ===== Banner ===== */
.banner-wrap{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:21/9;background:#334155;}
.banner-wrap .slide_01{height:100%;overflow:hidden;}
.banner-wrap .mod_01{float:left;height:100%;}
.banner-wrap .mod_01 a,.banner-wrap .mod_01 img{width:100%;height:100%;display:block;}
.banner-wrap .mod_01 img{object-fit:cover;opacity:0.9;}
.banner-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,0.45),transparent);display:flex;flex-direction:column;justify-content:center;padding:0 28px;pointer-events:none;}
.banner-h{font-family:'Noto Serif',serif;color:#fff;font-size:22px;font-weight:700;line-height:1.35;}
.banner-p{color:rgba(255,255,255,0.8);font-size:12px;margin-top:6px;letter-spacing:0.03em;}
.banner-wrap .dotModule_new{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:1;}
.banner-wrap #slide_01_dot{display:flex;gap:5px;}
.banner-wrap #slide_01_dot span{display:inline-block;width:6px;height:4px;border-radius:2px;background:rgba(255,255,255,0.4);cursor:pointer;transition:all 0.25s;}
.banner-wrap #slide_01_dot .selected{width:18px;background:#fff;}

/* ===== Quick Grid ===== */
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0 8px;}
.quick-item{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;}
.quick-icon{width:48px;height:48px;border-radius:12px;background:#eff6ff;display:flex;align-items:center;justify-content:center;color:#3366cc;transition:transform 0.15s;}
.quick-item:active .quick-icon{transform:scale(0.93);}
.quick-icon .material-symbols-outlined{font-size:24px;}
.quick-label{font-family:'Public Sans',sans-serif;font-size:11px;font-weight:600;color:#64748b;}

/* ===== Announce ===== */
.announce{display:flex;align-items:center;gap:10px;padding:8px 14px;background:rgba(239,246,255,0.6);border-radius:12px;border:1px solid rgba(219,234,254,0.6);overflow:hidden;}
.announce .material-symbols-outlined{font-size:20px;color:#3366cc;flex-shrink:0;}
.announce-text{flex:1;overflow:hidden;}
.announce-text marquee a{font-size:12px;color:#64748b;}

/* ===== Section Header ===== */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px;}
.sec-title{font-family:'Noto Serif',serif;font-size:19px;font-weight:700;border-left:4px solid #3366cc;padding-left:12px;color:#1e293b;}
.sec-more{font-size:13px;font-weight:600;color:#3366cc;display:flex;align-items:center;gap:3px;}
.sec-more .material-symbols-outlined{font-size:14px;}

/* ===== Research Card ===== */
.research-card{background:#fff;border-radius:16px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,0.05);}
.research-card>*+*{margin-top:12px;}
.research-img{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#e2e8f0;}
.research-img img{width:100%;height:100%;object-fit:cover;}
.research-tags{display:flex;gap:6px;}
.research-tag{padding:2px 8px;font-size:10px;font-weight:700;text-transform:uppercase;border-radius:4px;}
.research-tag.t1{background:#e2e8f0;color:#475569;}
.research-tag.t2{background:#f8fafc;color:#94a3b8;font-weight:500;}
.research-h{font-family:'Noto Serif',serif;font-size:17px;font-weight:700;line-height:1.45;color:#1e293b;}
.research-p{font-size:13px;color:#64748b;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* ===== Project Card ===== */
.proj-card{display:block;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 12px -3px rgba(0,0,0,0.07);transition:transform 0.2s;}
.proj-card:active{transform:scale(0.985);}
.proj-card+.proj-card{margin-top:16px;}
.proj-img{height:170px;position:relative;overflow:hidden;background:#e2e8f0;}
.proj-img img{width:100%;height:100%;object-fit:cover;}
.proj-badge{position:absolute;top:10px;left:10px;padding:4px 10px;background:#3366cc;color:#fff;font-family:'Public Sans',sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;border-radius:50px;}
.proj-sold{position:absolute;bottom:10px;right:10px;width:56px;height:56px;}
.proj-sold img{width:100%;height:100%;object-fit:contain;}
.proj-body{padding:18px;display:flex;flex-direction:column;gap:14px;}
.proj-title{font-family:'Noto Serif',serif;font-size:17px;font-weight:700;line-height:1.4;color:#1e293b;}
.proj-meta{font-size:12px;color:#64748b;}
.proj-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.proj-stat-label{font-size:11px;font-weight:500;color:#94a3b8;}
.proj-stat-val{font-family:'Noto Serif',serif;font-size:20px;font-weight:900;color:#3366cc;margin-top:2px;}
.proj-stat-val.dark{color:#1e293b;}
.proj-stat-val .u{font-size:12px;font-weight:600;}
.proj-progress{display:flex;flex-direction:column;gap:6px;}
.proj-progress-row{display:flex;justify-content:space-between;font-size:12px;font-weight:600;}
.proj-progress-row .l{color:#64748b;}
.proj-progress-row .r{color:#3366cc;}
.proj-track{height:5px;background:#e2e8f0;border-radius:50px;overflow:hidden;}
.proj-fill{height:100%;border-radius:50px;background:linear-gradient(to right,#3366cc,#60a5fa);}
.proj-cta{display:block;width:100%;padding:13px;text-align:center;font-size:14px;font-weight:700;color:#fff;border:none;border-radius:12px;background:linear-gradient(135deg,#3366cc,#60a5fa);cursor:pointer;}
.proj-cta.ghost{background:#f1f5f9;color:#3366cc;}

/* ===== News ===== */
.news-list>*+*{border-top:1px solid #f1f5f9;}
.news-item{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:14px 0;cursor:pointer;}
.news-item:first-child{padding-top:0;}
.news-body{flex:1;display:flex;flex-direction:column;gap:4px;}
.news-h{font-size:13px;font-weight:700;color:#1e293b;line-height:1.5;}
.news-date{font-family:'Public Sans',sans-serif;font-size:10px;color:#94a3b8;text-transform:uppercase;letter-spacing:0.06em;}
.news-thumb{width:56px;height:56px;border-radius:8px;background:#f1f5f9;overflow:hidden;flex-shrink:0;}
.news-thumb img{width:100%;height:100%;object-fit:cover;}
.news-more{width:100%;padding:10px;text-align:center;font-size:13px;font-weight:600;color:#94a3b8;background:none;border:none;cursor:pointer;}

/* ===== Video ===== */
.video-wrap{border-radius:16px;overflow:hidden;background:#fff;}
.video-wrap video{width:100%;display:block;}

/* ===== Responsive ===== */
@media(max-width:375px){
  .topbar-title{font-size:18px;}
  .banner-h{font-size:19px;}
  .quick-icon{width:42px;height:42px;}
  .proj-stat-val{font-size:18px;}
}
