/* ============================================================
   2026 可持续全球领导者大会 · H5 页面样式
   设计稿:ESG专题首页-移动端(1).psd(750×12687)
   布局:1rem = 100 设计 px(html font-size = 100/750 × 100vw)
   颜色与 PC 版(pc-2026)一致:
     品牌绿 #3DB63D / 简介绿 #009F00 / 嘉宾绿 #10AC2C / 页脚 #41783C
     亮点手风琴:金 #DDA63A 青 #1EAED1 红 #E94732 绿 #009F00 蓝 #135F96
   ============================================================ */

:root {
  --green: #3DB63D;         /* 品牌绿(视频场次/议程填充/tab 选中) */
  --green-deep: #009F00;    /* 深绿(简介渐变/嘉宾姓名) */
  --green-dim: #269C26;     /* 视频场次斑马纹深色行 */
  --ink: #333333;           /* 标题深灰 */
  --ink-2: #666666;         /* 正文灰 */
  --ink-3: #6C726C;         /* 查看更多按钮灰 */
  --line: #DADDDA;          /* 分割线 */
  --bg-soft: #F2F3F2;       /* 议程/新闻/合作伙伴底 */
  --bg-tint: #EBEDEB;       /* 视频/亮点底 */
  --card: #ECEEEC;          /* 议程卡片底 */
  --gold: #DDA63A;          /* 亮点展开头 */
  --rainbow: linear-gradient(90deg,
    #DCA63A 0 14.25%, #27BDE2 14.25% 28.5%, #FF3A20 28.5% 42.75%, #009F01 42.75% 57%,
    #E5233B 57% 71.25%, #1A486A 71.25% 85.5%, #DD1367 85.5% 100%);
  --header-h: 1rem;         /* PSD 实测 100px */
  --font: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body { font-family: var(--font); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; border: none; background: none; color: inherit; -webkit-tap-highlight-color: transparent; }
ul { list-style: none; }

/* 入场动效 */
body.anim .reveal { opacity: 0; transform: translateY(.3rem); transition: opacity .7s ease, transform .7s ease; }
body.anim .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.anim .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===================== 顶部导航(PSD:-1-101,黑底) ===================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  height: var(--header-h); background: #202020;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 .3rem 0 .39rem;   /* logo x39,右侧元素 x587/680 */
}
.logo img { width: .61rem; height: .61rem; }   /* PSD:39,22-100,83 */
.header-right { display: flex; align-items: center; gap: .27rem; }
.btn-lang {
  width: .73rem; height: .37rem; border: 1px solid rgba(255, 255, 255, .85); border-radius: .04rem;
  color: #fff; font-size: .2rem; display: flex; align-items: center; justify-content: center;
}
.btn-menu { width: .35rem; height: .29rem; display: flex; flex-direction: column; justify-content: space-between; padding: .02rem 0; }
.btn-menu span {
  display: block; height: 2px; width: 100%; border-radius: 2px; background: #fff;
  transition: transform .25s ease;
  transform-origin: center;
}
body.drawer-open .btn-menu span:nth-child(1) { transform: translateY(.115rem) rotate(45deg); }
body.drawer-open .btn-menu span:nth-child(2) { visibility: hidden; }
body.drawer-open .btn-menu span:nth-child(3) { transform: translateY(-.115rem) rotate(-45deg); }

/* ===================== 抽屉菜单(PSD「菜单」组:右侧面板宽 550px) ===================== */
.drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.drawer.open { visibility: visible; }
.drawer-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .3s ease; }
.drawer.open .drawer-mask { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 5.5rem;
  background: #202020; transform: translateX(100%); transition: transform .3s ease;
  padding: calc(var(--header-h) + .5rem) .47rem .3rem; overflow-y: auto;
}
.drawer.open .drawer-panel { transform: none; }
.d-link {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font-size: .3rem; color: #fff; padding: .28rem 0; text-align: left;
}
.d-item { border-bottom: 1px solid rgba(255, 255, 255, .15); }
.drawer-nav > li { border-bottom: 1px solid rgba(255, 255, 255, .15); }
.chev {
  flex: none; width: .16rem; height: .16rem; margin-left: .2rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .25s ease;
}
.d-item.open .chev, .vgroup.open .chev, .hl-item.open .chev { transform: rotate(-135deg); }
.d-sub { display: none; padding: 0 0 .2rem .27rem; }
.d-item.open .d-sub { display: block; }
.d-sub a { display: block; font-size: .26rem; color: rgba(255, 255, 255, .75); padding: .18rem 0; }

/* ===================== 页脚(PSD:11366-12688,深绿底) ===================== */
.site-footer {
  background: #41783C url(../img/footer-bg.png) no-repeat top / 100% 100%;
  padding: .55rem .29rem 0;
}
.f-social h4, .f-contact h4 { font-size: .3rem; font-weight: 700; color: #fff; }
.social-icons { display: flex; gap: .15rem; margin-top: .3rem; }
.social-icon { width: .82rem; height: .82rem; flex: none; }
.social-icon img { width: 100%; height: 100%; }
.f-contact { margin-top: .7rem; }
.f-contact h4 { margin-bottom: .3rem; }
.contact-card {
  border: 1px solid rgba(255, 255, 255, .55); border-radius: .06rem;
  padding: .28rem .3rem; color: #fff;
}
.contact-card h5 { font-size: .26rem; font-weight: 700; margin-bottom: .2rem; }
.contact-card p { font-size: .2rem; line-height: 1.9; display: flex; align-items: center; gap: .12rem; word-break: break-all; }
.contact-card.span2 { margin-bottom: .35rem; }
.cc-cols { display: flex; gap: .4rem; }
.cc-role { color: rgba(255, 255, 255, .85); margin-bottom: .06rem; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .18rem; padding-bottom: .65rem; }
/* 联系小图标(人/电话/信封,内联 SVG) */
.ci { width: .2rem; height: .2rem; flex: none; background: currentColor; }
.ci-user { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ci-tel { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ci-mail { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.footer-bottom {
  margin: 0 -.29rem; background: var(--green-deep);
  padding: .45rem .29rem .5rem; text-align: center;
}
.footer-bottom p { font-size: .22rem; color: #fff; line-height: 1.9; }

/* ===================== 右侧悬浮条(PSD:663,5881;83×83 绿底白图标) ===================== */
.float-bar {
  position: fixed; right: .04rem; bottom: 1.7rem; z-index: 80;
  display: flex; flex-direction: column; gap: .07rem;
}
.float-item {
  width: .83rem; height: .83rem; background: var(--green); border-radius: .04rem;
  display: flex; align-items: center; justify-content: center;
}
.float-item img { width: 100%; height: 100%; }

/* ===================== 微信公众号弹窗(PSD「公众号弹窗」组) ===================== */
.wx-modal {
  position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  visibility: hidden;
}
.wx-modal.open { visibility: visible; }
.wx-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .25s ease; }
.wx-modal.open .wx-mask { opacity: 1; }
.wx-card {
  position: relative; width: 5.66rem; border-radius: .1rem; text-align: center;
  background: linear-gradient(180deg, rgba(133, 209, 146, .55) 0%, rgba(160, 218, 170, .25) 30%, #fff 55%);
  background-color: #fff;
  padding: .79rem 0 .78rem;
  transform: scale(.92); opacity: 0; transition: transform .25s ease, opacity .25s ease;
}
.wx-modal.open .wx-card { transform: none; opacity: 1; }
.wx-title { font-size: .31rem; font-weight: 700; color: #4B524B; }
.wx-qr { width: 3.76rem; height: 3.76rem; margin: .38rem auto 0; background: #fff; }
.wx-label { font-size: .31rem; font-weight: 700; color: var(--green); margin-top: .38rem; }
/* 关闭:绿圆白 X,压卡片右上角(PSD:圆 615,11498-691,11573) */
.wx-close {
  position: absolute; top: -.3rem; right: -.33rem; width: .76rem; height: .76rem;
  background: #009600; border-radius: 50%;
}
.wx-close::before, .wx-close::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: .32rem; height: 3px;
  background: #fff; border-radius: 2px;
}
.wx-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.wx-close::after { transform: translate(-50%, -50%) rotate(-45deg); }