/* ==========================================================================
   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;   /* 中段兜底底色 */

  --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);
}

/* ==========================================================================
   2. 主视觉 HERO   (设计稿：1920 × 835)
   ========================================================================== */
.hero{
  position:relative;
  aspect-ratio:2560 / 1113;
  overflow:hidden;
  background:#0b3a6b;
}
.hero__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.hero__medal{ display:none; }          /* 移动端才使用 */

.hero__inner{
  position:absolute;
  left:0; right:0;
  top:13.9%;
}
/* 文案列：右对齐到内容容器，并内收 46px（设计稿文案右边界 x=1579） */
.hero__col{
  width:min(1329px, 100% - 48px);
  margin:0 auto;
  padding-right:46px;
  text-align:right;
}
.hero__title{
  font-size:clamp(32px, 3.28125vw, 63px);
  line-height:1.35;
  font-weight:800;
  letter-spacing:.01em;
  text-shadow:0 2px 18px rgba(0,40,80,.25);
}
.hero__bar{
  display:block;
  width:clamp(130px, 13.3854vw, 257px);
  height:clamp(5px, .5208vw, 10px);
  background:#fff;
  margin:clamp(5px,.4635vw,9px) 0 0 auto;
}
.hero__sub{
  margin-top:clamp(22px, 2.3958vw, 46px);
  font-size:clamp(15px, 1.40625vw, 27px);
  line-height:1;
  font-weight:500;
  letter-spacing:.02em;
}
.hero__btn{
  display:inline-block;
  margin-top:clamp(16px, 1.875vw, 36px);
  width:clamp(180px, 14.9479vw, 287px);
  height:clamp(40px, 3.2292vw, 62px);
  line-height:clamp(40px, 3.2292vw, 62px);
  font-size:clamp(14px, 1.171875vw, 22.5px);
  font-weight:600;
  letter-spacing:.04em;
  text-align:center;
  color:#fff;
  background:var(--orange);
  border-radius:clamp(4px, .3125vw, 6px);
  transition:background .18s, transform .18s;
}
.hero__btn:hover{ background:#e26a0c; transform:translateY(-1px); }

/* ==========================================================================
   3. 累计数据 STATS   (设计稿：高 480，底色 #0a1a41)
   ========================================================================== */
.stats{
  background:var(--navy);
  border-top:2px solid var(--line);
  padding:76px 0 96px;
}
.stats__row{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px 40px;
}
.stats__row li{ display:flex; flex-direction:column; }
.stats__row strong{
  font-size:clamp(40px, 4.296875vw, 82.5px);
  line-height:1;
  font-weight:800;
  color:var(--cyan);
  letter-spacing:.01em;
}
.stats__row span{
  margin-top:2px;
  font-size:clamp(19px, 1.953125vw, 37.5px);
  line-height:1;
  font-weight:700;
}
.stats__desc{
  margin-top:52px;
  font-size:clamp(14px, .9375vw, 18px);
  line-height:1.45;
  text-align:justify;
  text-justify:inter-ideograph;
}

/* ==========================================================================
   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); }

/* 最新播报卡片 */
.news__card{
  display:flex;
  align-items:flex-end;
  position:relative;
  margin-top:44px;
  aspect-ratio:1772 / 463;
  border-radius:8px;
  overflow:hidden;
  background:#1b6f92 url("../images/news.jpg") center / cover no-repeat;
  box-shadow:0 10px 34px rgba(0,15,45,.28);
  transition:transform .22s, box-shadow .22s;
}
.news__card:hover{ transform:translateY(-3px); box-shadow:0 16px 42px rgba(0,15,45,.38); }
.news__title{
  width:100%;
  padding:0 0 19px 45px;
  font-size:clamp(14px, 1.09375vw, 21px);
  line-height:1.2;
  font-weight:500;
  max-width:calc(907px + 45px);
}

/* 获奖名单 & 创新论坛 */
.awards{ margin-top:88px; }
.awards__row{
  margin-top:43px;
  display:flex;
  justify-content:space-between;
  gap:125px;
  flex-wrap:wrap;
}
.award-card{
  position:relative;
  flex:1 1 0;
  min-width:280px;
  aspect-ratio:802 / 404;
  border-radius:8px;
  overflow:hidden;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow:0 10px 34px rgba(0,15,45,.28);
  transition:transform .22s, box-shadow .22s;
}
.award-card:hover{ transform:translateY(-3px); box-shadow:0 16px 42px rgba(0,15,45,.38); }
.award-card--list { background-image:url("../images/award.jpg"); }
.award-card--forum{ background-image:url("../images/forum.jpg"); }

.award-card h3{
  position:absolute;
  left:0; right:0; top:31%;
  font-size:clamp(20px, 1.953125vw, 37.5px);
  line-height:1;
  font-weight:600;
  text-align:center;
  letter-spacing:.02em;
  text-shadow:0 2px 14px rgba(0,20,50,.25);
}
.award-card__btn{
  position:absolute;
  left:50%; bottom:30%;
  transform:translateX(-50%);
  width:clamp(150px, 9.5vw, 184px);
  height:clamp(38px, 2.5vw, 48px);
  line-height:clamp(38px, 2.5vw, 48px);
  font-size:clamp(15px, 1vw, 19px);
  font-weight:700;
  text-align:center;
  color:#000;
  border-radius:clamp(5px, .35vw, 7px);
  transition:filter .18s;
}
.award-card--list  .award-card__btn{ background:var(--cyan); }
.award-card--forum .award-card__btn{ background:var(--orange-soft); }
.award-card:hover .award-card__btn{ filter:brightness(1.08); }

/* ==========================================================================
   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; }

  /* 主视觉 */
  .hero{
    aspect-ratio:auto;
    height:auto;
    padding:0 0 34px;
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%),
      linear-gradient(170deg, #2aa9cf 0%, #1b7fae 34%, #0f5388 62%, #082f57 100%);
  }
  .hero__bg{ display:none; }
  .hero__medal{
    display:block;
    width:min(62%, 250px);
    height:auto;
    margin:26px auto 0;
    filter:drop-shadow(0 14px 26px rgba(0,20,50,.45));
  }
  .hero__inner{ position:static; }
  .hero__col{ width:calc(100% - 40px); padding-right:0; text-align:center; }
  .hero__title{ font-size:clamp(24px, 7.4vw, 34px); line-height:1.3; }
  .hero__bar{ margin:12px auto 0; width:120px; height:5px; }
  .hero__sub{ margin-top:16px; font-size:14px; }
  .hero__btn{
    margin-top:20px;
    width:min(100%, 300px);
    height:46px; line-height:46px;
    font-size:16px;
  }

  /* 累计数据：2 × 2 */
  .stats{ padding:44px 0 48px; }
  .stats__row{ display:grid; grid-template-columns:1fr 1fr; gap:26px 16px; }
  .stats__row strong{ font-size:38px; }
  .stats__row span{ font-size:16px; }
  .stats__desc{ margin-top:30px; font-size:14px; text-align:left; }

  /* 中段 */
  .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; }
  .news__card{ margin-top:22px; aspect-ratio:auto; min-height:210px; }
  .news__title{ padding:0 20px 18px; max-width:none; font-size:14px; }
  .awards{ margin-top:44px; }
  .awards__row{ margin-top:22px; flex-direction:column; gap:20px; }
  .award-card{ min-width:0; width:100%; flex:none; }
  .award-card h3{ font-size:24px; top:22%; }
  .award-card__btn{ width:140px; height:40px; line-height:40px; font-size:15px; bottom:22%; }

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