@charset "gb2312";
@import url("https://www.c114.com.cn/topic/css/basic2.css");
/*=====================================================================
  2026 年度 AI+「硬核」榜单征集 —— 页面样式
  对应页面：index.asp
  设计基准：PSD 画布宽 1600，内容区 1300，卡片 1105 / 三栏 1028
  说明：尺寸统一写成 clamp(最小值, 设计值/13 vw, 设计值)，
        视口 >=1300 时与设计稿 1:1，向下等比收缩，760px 起转移动端布局
=====================================================================*/

/* ================= 基础 ================= */
@media screen and (min-width: 768px){
	.container {width: 750px;}
}
@media screen and (min-width: 992px){
	.container {width: 970px;}
}
@media screen and (min-width: 1200px){
	.container{width: 1100px;}
}
@media screen and (min-width: 1220px){
	.container{width: 1100px;}
}
@media (min-width: 1200px){
	.hidden-lg{display: none!important;}
}
@media (max-width: 1199px) and (min-width: 992px){
	.hidden-md{display: none!important;}
}
@media (max-width: 991px) and (min-width: 768px){
	.hidden-sm{display: none!important;}
}
@media (max-width: 767px){
	.hidden-xs{display: none!important;}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:#0a1640;
  color:#fff;
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;border:0}
a{color:inherit;text-decoration:none}
h2,h3,p,ul,ol,time{margin:0}
ul,ol{padding:0;list-style:none}

:root{
  --gold:#f5eab4;
  --gold-line:rgba(246,232,180,.88);
  --card-b:#0122a7;
}

/* ================= 画布 ================= */
.page{
  position:relative;
  max-width:1300px;
  margin:0 auto;
  background:#112772;
  overflow:hidden;
}
.page::after{                          /* 底部光带 */
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:clamp(600px,105.3vw,1300px);
  background:url(../images/bottom.jpg) center bottom/100% 100% no-repeat;
  pointer-events:none;
}
.page > *{position:relative;z-index:1}

/* 内容宽度：设计稿卡片 1105/1300 */
.inner{width:85%;max-width:1105px;margin:0 auto}
.inner--narrow{width:79%;max-width:1028px;margin:0 auto}

/* ================= 主视觉 ================= */
.kv{display:block;width:100%}
.kv img{display:block;width:100%;height:auto}

/* ================= 区块标题 ================= */
.sec-title{text-align:center;line-height:0}
.sec-title img{
  display:block;
  width:900px;
  height:auto;
  margin:0 auto;
}

/* ================= 卡片 ================= */
.card{
  border:1px solid var(--gold-line);
  border-radius:10px;
  background:linear-gradient(120deg,#05289c 0%,var(--card-b) 62%,#0126ad 100%);
  box-shadow:0 12px 34px rgba(0,12,60,.22),inset 0 1px 0 rgba(255,255,255,.05);
}

/* ================= 前言 ================= */
.intro{position:relative;padding-top:clamp(16px,2.3vw,30px)}

.intro-card{
  position:relative;
  padding:clamp(26px,4.08vw,53px) clamp(22px,5.7vw,74px) clamp(30px,6.46vw,84px);
  background:
    radial-gradient(50% 40% at 0% 0%,rgba(126,164,255,.38),rgba(126,164,255,0) 70%),
    radial-gradient(70% 50% at 100% 100%,rgba(158,150,196,.34),rgba(158,150,196,0) 75%),
    linear-gradient(165deg,#0622a0 0%,#04219b 55%,#04208d 100%);
}
.intro-card p{
  font-size:clamp(15px,1.923vw,25px);
  line-height:1.6;
  color:#fff;
  text-align:justify;
  text-justify:inter-ideograph;
}
.intro-card p + p{margin-top:clamp(12px,1.54vw,20px)}

/* ================= 奖项榜单 ================= */
.awards .sec-title{margin-top:clamp(34px,7.31vw,95px);margin-bottom:clamp(-35px,-2.7vw,-14px)}
.awards .card{padding:clamp(18px,2.92vw,38px) clamp(18px,5.4vw,70px) clamp(24px,4.3vw,56px) clamp(18px,5.77vw,75px)}
.pills{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.62vw,21px) clamp(10px,2.15vw,28px);
}
.pills li{
  display:flex;
  align-items:center;
  justify-content:center;
  height:clamp(44px,5.54vw,72px);
  border:1px solid rgba(245,224,164,.85);
  border-radius:999px;
  font-size:clamp(16px,2.38vw,31px);
  font-weight:700;
  color:#fdfcf3;
  letter-spacing:.01em;
  white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0));
  transition:background .25s,border-color .25s,transform .25s;
}
.pills li:hover{
  border-color:#f8e6b0;
  background:linear-gradient(180deg,rgba(255,226,150,.16),rgba(255,226,150,.03));
  transform:translateY(-2px);
}
.awards-note{
  margin-top:clamp(16px,2.6vw,34px);
  font-size:clamp(13px,1.615vw,21px);
  line-height:1.66;
  color:rgba(240,248,255,.9);
  text-align:justify;
  text-justify:inter-ideograph;
}

/* ================= 评选流程 ================= */
.process .sec-title{margin-top:clamp(26px,5.31vw,69px);margin-bottom:clamp(-3px,-.23vw,-2px)}
.steps{
  --num:clamp(38px,5.31vw,69px);
  width:85%;
  max-width:1102px;
  margin:0 auto;
}
.step{
  position:relative;
  display:grid;
  grid-template-columns:var(--num) 1fr;
  column-gap:clamp(12px,2.23vw,29px);
}
.step + .step{margin-top:clamp(16px,2.54vw,33px)}
.step:not(:last-child)::before{       /* 序号下方的竖向连接线 */
  content:"";
  position:absolute;
  left:calc(var(--num)/2 - 1px);
  top:calc(var(--num) + 12px);
  bottom:0;
  width:2px;
  background:linear-gradient(180deg,rgba(255,228,170,.72) 0%,rgba(255,228,170,.1) 70%,rgba(255,228,170,0) 100%);
}
.step-num{margin-top:6px}
.step-num img{display:block;width:var(--num);height:auto}
.step-card{
  min-height:clamp(140px,17.39vw,226px);
  padding:clamp(14px,1.46vw,19px) clamp(18px,5.23vw,68px) clamp(15px,2.08vw,27px);
}
.step-head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0 clamp(8px,1.08vw,14px);
  margin-bottom:clamp(6px,.92vw,12px);
}
.step-head h3{
  font-size:clamp(20px,2.77vw,36px);
  font-weight:700;
  line-height:1.2;
  color:var(--gold);
  letter-spacing:.01em;
}
.step-head time{
  font-size:clamp(14px,1.77vw,23px);
  font-weight:400;
  color:#f5eab4;
}
.step-card p{
  font-size:clamp(14px,1.923vw,25px);
  line-height:1.6;
  color:#fff;
  text-align:justify;
  text-justify:inter-ideograph;
}

/* ================= 参选申请 ================= */
.apply .sec-title{margin-top:clamp(24px,4.7vw,61px);margin-bottom:clamp(-32px,-2.46vw,-12px)}
.apply-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2.23vw,29px);
}
.apply-card{
  min-height:clamp(300px,41.46vw,539px);
  padding:clamp(26px,4.08vw,53px) clamp(18px,4vw,52px) clamp(26px,3.54vw,46px);
  text-align:center;
  border-radius:clamp(16px,2.3vw,30px);
  background:linear-gradient(180deg,#0a2fa8 0%,#0124a2 55%,#0120a0 100%);
}
.apply-card .ico{
  display:block;
  width:auto;
  height:clamp(48px,5.13vw,82px);
  margin:0 auto clamp(14px,1.62vw,21px);
}
.apply-card h3{
  font-size:clamp(19px,2.31vw,30px);
  font-weight:700;
  line-height:1.15;
  color:var(--gold);
  margin-bottom:clamp(12px,1.69vw,22px);
}
.apply-card p{
  font-size:clamp(14px,1.77vw,23px);
  line-height:1.74;
  color:#fff;
}
.apply-card p span{display:block}

/* ================= 提示 / 操作 ================= */
.notice{
  max-width:897px;
  margin:clamp(18px,2.23vw,29px) auto 0;
  font-size:clamp(14px,1.923vw,25px);
  line-height:1.44;
  color:#eef6ff;
  text-align:center;
}
.actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:clamp(24px,4.3vw,56px);
}
.btn-download{
  display:inline-block;
  font-size:clamp(16px,2vw,26px);
  color:#fff;
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:1px;
  transition:color .2s;
}
.btn-download:hover{color:var(--gold)}
.btn-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:clamp(220px,25.23vw,328px);
  height:clamp(50px,5.6vw,73px);
  margin-top:clamp(12px,1.92vw,25px);
  background:url(../images/btn.png) center/100% 100% no-repeat;
  font-size:clamp(20px,2.77vw,36px);
  font-weight:800;
  letter-spacing:.02em;
  color:#032197;
  transition:transform .25s,filter .25s;
  background-color: transparent;
}
.btn-submit:hover{transform:translateY(-2px);filter:brightness(1.04)}
.btn-submit:active{transform:translateY(0)}
.btn-submit iframe{width: 100%; height: 100%; display:block;}
.contact{
  margin-top:clamp(16px,2.15vw,28px);
  text-align:center;
  font-size:clamp(13px,1.615vw,21px);
  line-height:1.3;
  color:rgba(255,255,255,.96);
}
.contact a{text-decoration:underline;text-underline-offset:3px}
.contact a:hover{color:var(--gold)}
/* ---- upload.php 内嵌页（iframe）中的提交按钮 ----
   重要：这份 CSS 会被 iframe 页加载，而 @media 和 vw 都是按 iframe 自身
   宽度计算的。iframe 只有约 220~328px 宽，所以 max-width:768px 的条件
   在 PC 上也永远成立 —— 这不是 bug，是媒体查询的视口就是 iframe 自己。
   因此这里不写 @media，改用 clamp 跟随 iframe 宽度缩放。 */
input{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  margin:0; padding:0;
  outline:none;
  border:none;
  appearance:none;
  -webkit-appearance:none;
  text-align:center;
  background:url(../images/btn.png) center/100% 100% no-repeat;
  color:#032197;
  font-family:inherit;
  font-weight:800;
  letter-spacing:.02em;
  font-size:clamp(20px,9vw,24px);
  line-height:normal;
  cursor:pointer;
}

.page-end{height:clamp(170px,42.7vw,555px)}

/* ================= 响应式 ================= */
@media (max-width:1180px){
  .awards .sec-title{margin-top:76px}
  .awards .card{padding:34px 56px 52px}
  .step-card{padding:22px 44px 34px}
  .apply-card{padding-top:44px}
}
@media (max-width:980px){
  .inner{width:89%}
  .inner--narrow{width:92%}
  .steps{width:89%}
  .awards .card{padding:28px 34px 40px}
  .step-card{padding:20px 30px 28px}
  .apply-card{padding:36px 26px 38px}
}
@media (max-width:760px){
  .pills{grid-template-columns:repeat(2,1fr);gap:10px}
  .pills li{height:46px;font-size:16px}
  .apply-grid{grid-template-columns:1fr;gap:14px}
  .apply-card{
    min-height:0;
    padding:24px 22px 26px;
    text-align:left;
  }
  .apply-card .ico{margin:0 0 12px; margin:0 auto;}
  .apply-card h3{margin-bottom:10px; text-align:center;}
  .apply-card p{text-align:left}
  .apply-card p span{display:inline}
  .apply-card p span + span::before{content:"　"}
  .intro::before{display:none}
  .step-card{min-height:0}
  .step-head time{display:block;width:100%}
  .awards .sec-title,.process .sec-title,.apply .sec-title{margin-top:30px}
}
@media (max-width:420px){
  .pills li{font-size:15px;height:44px}
  .step-card{padding:16px 15px 18px}
  .page-end{height:180px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}