/* ==========================================================================
   OIT AWARDS · 中国十大光学产业技术年度评选  —  首页静态页
   设计稿基准：1920px 宽（PSD 2560 画布 / 1.3333 倍图）
   本文件中的 px 数值 = 设计稿 @1920 的 1:1 尺寸
   ========================================================================== */

:root{
  --blue:        #2a5ba4;   /* 导航 / 页脚底色 */
  --navy:        #0a1a41;   /* 累计数据 / 页面底色 */
  --deep:        #112143;   /* 友情链接条 */
  --cyan:        #00f6ff;   /* 强调青色（数据数字 / 激活态 / 按钮） */
  --orange:      #fb7711;   /* 主橙色（申报按钮 / 倒计时数字） */
  --orange-soft: #e69f68;   /* 创新论坛按钮 */
  --line:        #0b93ab;   /* 累计数据顶部青线 */
  --line-footer: #31c5e1;   /* 页脚顶部青线 */
  --nav-line:    #3f86b8;   /* 导航底部亮线 */
  --mid-bg:      #234697;   /* 中段兜底底色 */
  --page-1:      #203b81;   /* 关于评选底部渐变1 */
  --page-2:      #1940a3;   /* 关于评选底部渐变2 */

  --font-cn: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",
             "Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--navy);
  color:#fff;
  font-family:var(--font-cn);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; border:0; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,ul,figure{ margin:0; }
ul{ padding:0; list-style:none; }
i{ font-style:normal; }

a:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px; }

.page{ max-width:1920px; margin:0 auto; }

/* 内容容器：设计稿 1329px，两侧留白 296px */
.container{
  width:min(1329px, 100% - 48px);
  margin:0 auto;
}

/* ==========================================================================
   1. 导航 NAV   (设计稿：高 70px)
   ========================================================================== */
.nav{
  height:70px;
  background:var(--blue);
  border-bottom:2px solid var(--nav-line);
}
.nav__inner{
  height:100%;
  display:flex;
  align-items:center;
}
.nav__logo img{ width:108px; height:39px; }

.nav__links{
  display:flex;
  align-items:center;
  gap:37px;
  margin-left:38px;
}
.nav__links a{
  position:relative;
  display:flex;
  align-items:center;
  height:70px;
  font-size:15px;
  white-space:nowrap;
  transition:color .18s;
}
.nav__links a:hover{ color:var(--cyan); }
.nav__links a.is-active{ font-weight:600; }
.nav__links a.is-active::after{
  content:"";
  position:absolute;
  left:-1px; right:-1px; bottom:18px;
  height:3px;
  background:var(--cyan);
}

.nav__count{
  margin-left:auto;
  font-size:15px;
  white-space:nowrap;
  display:flex;
  align-items:baseline;
}
.nav__count b{
  margin:0 7px 0 13px;
  font-size:27px;
  line-height:1;
  font-weight:800;
  color:var(--orange);
}

/* ==========================================================================
   4. 中段（最新播报 + 获奖名单&创新论坛） — 共用蓝色放射底图
   ========================================================================== */
.mid{
  background:var(--mid-bg) url("../images/mid.jpg") center top / cover no-repeat;
  padding:88px 0 95px;
}

.sec-head{ position:relative; }
.sec-title{
  font-size:clamp(22px, 1.953125vw, 37.5px);
  line-height:1;
  font-weight:600;
  text-align:center;
  letter-spacing:.02em;
}
.more{
  position:absolute;
  right:0; bottom:0;
  font-size:clamp(11px, .703125vw, 13.5px);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);
  transition:color .18s;
}
.more:hover{ color:var(--cyan); }
/* ==========================================================================
   5. 页脚 FOOTER   (设计稿：高 226)
   ========================================================================== */
.footer { background: var(--blue); position: relative; }
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, rgba(57,188,220,0), #39BCDC 30%, #39BCDC 70%, rgba(57,188,220,0));
}
.footer-inner {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: clamp(28px, 3.5vw, 42px) 0 clamp(36px, 4.6vw, 56px);
}
.footer-logo { width: clamp(170px, 21vw, 254px); height: auto; }
.footer-contact { margin-top: 18px; font-size: clamp(12px, 1.25vw, 15px); letter-spacing: 1px; color: rgba(255,255,255,.92); }
.footer-qrs { display: flex; gap: clamp(24px, 3.3vw, 40px); }
.qr img { width: clamp(72px, 8.2vw, 99px); height: clamp(72px, 8.2vw, 99px); background: #fff; border-radius: 4px; }
.qr p { margin-top: 10px; text-align: center; font-size: clamp(12px, 1.25vw, 15px); letter-spacing: 1px; }

/* 友情链接条 */
.links-bar { background: var(--deep); padding: 9px 0; font-size: 12px; letter-spacing: 1px; color: rgba(255,255,255,.65); }
.links-bar a { color: rgba(255,255,255,.65); margin: 0 10px 0 4px; transition: color .25s; }
.links-bar a:hover { color: var(--cyan); }
/* ==========================================================================
   6. 响应式
   ========================================================================== */

/* —— 中等桌面：内容容器已收窄，压缩中段留白 —— */
@media (max-width:1424px){
  .stats{ padding:64px 0 72px; }
  .mid{ padding:72px 0 76px; }
}

/* —— 平板 —— */
@media (max-width:1100px){
  .nav__count{ font-size:13px; }
  .nav__count b{ font-size:22px; margin:0 5px 0 9px; }
  .nav__links{ gap:26px; margin-left:26px; }
  .nav__links a{ font-size:14px; }
  .stats{ padding:56px 0 60px; }
  .stats__desc{ margin-top:38px; }
  .mid{ padding:60px 0 64px; }
  .awards{ margin-top:64px; }
  .awards__row{ gap:24px; }
  .news__card{ margin-top:32px; }
  .awards__row{ margin-top:32px; }
}

/* —— 手机：主视觉改为「徽章 + 文案」竖排，各区块单列 —— */
@media (max-width:900px){
  .container{ width:calc(100% - 40px); }

  /* 导航：两行，链接可横向滚动 */
  .nav{ height:auto; border-bottom-width:2px; }
  .nav__inner{ flex-wrap:wrap; padding:10px 0 0; }
  .nav__logo img{ width:88px; height:28px; }
  .nav__links{
    order:3;
    width:100%;
    margin:0;
    gap:22px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    border-top:1px solid rgba(255,255,255,.16);
  }
  .nav__links::-webkit-scrollbar{ display:none; }
  .nav__links a{ height:44px; font-size:14px; }
  .nav__links a.is-active::after{ bottom:4px; height:2px; }
  .nav__count{ margin-left:auto; font-size:12px; }
  .nav__count b{ font-size:20px; margin:0 4px 0 8px; }

  /* 中段 */
  .mid{ padding:44px 0 48px; background-position:center top; }
  .sec-title{ font-size:22px; }
  .more{ position:static; display:inline-block; margin-top:12px; font-size:11px; text-align:left; }
  .sec-head{ text-align:center; }

  /* 页脚 */
    .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 26px; }
  .footer-contact { margin-top: 14px; }
}