/* ============================================================
   2026 绿博会(绿色产业与可持续消费博览会)· H5 二级页样式
   设计稿:wap二级页面-绿博会(1).psd(750×7248)
   布局:1rem = 100 设计 px(html font-size = 100/750 × 100vw,上限 750px)
   头部/抽屉菜单/页脚/悬浮条照搬 h5-2026(全站一致)
   颜色:标题绿 #009600 / 品牌绿 #3DB63D / 介绍绿底 #009F00
        展区灰底 #EBEDEB / 浅灰底 #F2F3F2 / 页脚 #41783C
   ============================================================ */

:root {
  --green: #3DB63D;         /* 品牌绿(卡片标题/边框) */
  --green-deep: #009F00;    /* 展会介绍底 / 页脚底条 */
  --green-title: #009600;   /* 区块标题绿 */
  --ink: #333333;
  --ink-2: #666666;
  --line: #DADDDA;
  --bg-soft: #F2F3F2;
  --bg-tint: #EBEDEB;
  --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;
  --font: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
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; }
  html { scroll-behavior: auto; }
}

/* ===================== 顶部导航(照搬 h5-2026) ===================== */
.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 img { width: .61rem; height: .61rem; }
.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, opacity .25s ease;
}
body.drawer-open .btn-menu span:nth-child(1) { transform: translateY(.115rem) rotate(45deg); }
body.drawer-open .btn-menu span:nth-child(2) { opacity: 0; }
body.drawer-open .btn-menu span:nth-child(3) { transform: translateY(-.115rem) rotate(-45deg); }

/* ===================== 抽屉菜单(照搬 h5-2026,右侧宽 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;
}
.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 { 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; }
.d-sub a:active { color: var(--green); }

/* ===================== 主视觉 KV(PSD:100-652,750×552) ===================== */
.hero { padding-top: var(--header-h); }
.hero-kv { width: 100%; }

/* ===================== 绿博会区块头(彩色砖块图标 + 斜线 + 绿色标题) ===================== */
.exp-sec-head { display: flex; align-items: center; gap: .18rem; padding: .55rem .29rem .45rem; }
.exp-sec-head .sec-ic { width: 1.1rem; height: auto; }
.sec-divider { width: 1px; height: .44rem; background: rgba(0, 0, 0, .14); transform: rotate(18deg); }
.exp-sec-head h2 { font-size: .4rem; font-weight: 700; color: var(--green-title); }
.exp-sec-head.light h2 { color: #fff; }
.exp-sec-head.light .sec-divider { background: rgba(255, 255, 255, .35); }

/* 页脚顶部彩虹条(PSD 高 6px,抵消页脚内边距铺满整宽) */
.rainbow-strip { display: block; height: .06rem; background: var(--rainbow); }
.site-footer .rainbow-strip { margin: -.55rem -.29rem .55rem; }

/* ===================== 展会介绍(PSD:652-1008,绿底 #009F00) ===================== */
.intro { background: var(--green-deep); padding: .54rem .29rem .52rem; }
.intro-title { font-size: .4rem; font-weight: 700; color: #fff; }
.intro-body { margin-top: .34rem; }
.intro-body p { font-size: .26rem; line-height: 1.85; color: #fff; text-align: justify; }
.intro-body p + p { margin-top: .3rem; }

/* ===================== 展区(PSD:1008-2108,灰底 #EBEDEB,单列白卡) ===================== */
.zones { background: var(--bg-tint); padding-bottom: .7rem; }
.zq-list { padding: 0 .29rem; display: grid; gap: .3rem; }
.zq-card { background: #fff; border: 1px solid #D5D9D5; border-radius: .06rem; padding: .4rem .35rem; }
.zq-card:active { background: #FAFCFA; }
.zq-card h3 { display: flex; align-items: center; gap: .13rem; font-size: .32rem; font-weight: 700; color: var(--green); }
.zq-card h3::before { content: ""; width: .07rem; height: .28rem; border-radius: .02rem; background: var(--green); flex: none; }
.zq-desc {
  margin-top: .2rem; font-size: .26rem; line-height: 1.75; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.zq-loc { margin-top: .12rem; font-size: .26rem; color: var(--ink-2); }

/* ===================== 创意玩法(浅灰底,玩法卡竖排;卡面按 PC v2 稿) ===================== */
.creative { background: var(--bg-soft); padding-bottom: .7rem; }
.play-list { padding: 0 .29rem; display: grid; gap: .3rem; }
.play-card {
  background: #fff; border: 1px solid #E5E7E5; border-radius: .06rem; padding: .4rem .35rem .35rem;
  display: flex; flex-direction: column;
}
.play-title { display: flex; align-items: center; gap: .14rem; font-size: .32rem; font-weight: 700; color: var(--accent, var(--green-title)); }
.play-title img { height: .4rem; width: auto; flex: none; }
.play-desc {
  margin: .2rem 0 .3rem; font-size: .26rem; line-height: 1.75; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* 胶囊按钮:默认灰底,按压变该卡主题色 */
.play-btn {
  margin-top: auto; width: 100%; height: .75rem; border-radius: .38rem;
  background: #EDEEED; color: var(--ink-2); font-size: .28rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.play-btn:active { background: var(--accent, var(--green)); color: #fff; transform: scale(.98); }

/* ===================== 场馆地图(PSD:2816-3440,绿色纹理底图 750×624 + 白色地图位) ===================== */
.map-sec {
  position: relative; aspect-ratio: 750 / 624;
  background: url(../img/map-bg.png?v=20261010) center / 100% 100% no-repeat;
}
.map-sec .exp-sec-head { padding: .5rem .29rem 0; }
/* 白色地图位:PSD 实测 x30-720 / y177-565(相对底图),按比例定位 */
.map-box {
  position: absolute; left: 4%; right: 4%; top: 28.4%; bottom: 9.5%;
  background: #fff; display: flex; align-items: center; justify-content: center;
}
.map-box img { width: 100%; height: 100%; object-fit: contain; }
.map-placeholder { font-size: .26rem; color: #B9BDB9; }

/* ===================== 在线展位(PSD:3440-5928,近白底,单列展商卡) ===================== */
.booths { background: #FAFAFA; padding-bottom: .7rem; }
.expo-list { padding: 0 .29rem; display: grid; gap: .35rem; }
.expo-card { background: #fff; border: 1px solid #E2E6E2; border-radius: .06rem; padding: .28rem; }
.expo-media { position: relative; aspect-ratio: 16 / 9; background: #D9D9D9; border-radius: .04rem; overflow: hidden; }
.expo-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .5s ease;
}
.expo-media img.active { opacity: 1; }
/* 分页点(激活为长条,其余为圆点) */
.expo-dots {
  position: absolute; left: 50%; bottom: .14rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: .1rem; z-index: 2;
}
.expo-dot {
  width: .09rem; height: .09rem; border: none; border-radius: .05rem; padding: 0;
  background: rgba(255, 255, 255, .4); transition: all .3s ease;
}
.expo-dot.active { width: .2rem; background: #fff; }
.expo-name { margin-top: .2rem; text-align: center; font-size: .28rem; font-weight: 700; color: var(--ink); }

/* ===================== 页脚(照搬 h5-2026,深绿底) ===================== */
.site-footer {
  background: #41783C url(https://n.sinaimg.cn/finance/esg2026/h5/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; transition: transform .15s ease; }
.social-icon:active { transform: scale(.94); }
.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; }

/* ===================== 右侧悬浮条(照搬 h5-2026: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;
  transition: transform .15s ease;
}
.float-item:active { transform: scale(.94); }
.float-item img { width: 100%; height: 100%; }

/* ===================== 微信公众号弹窗(照搬 h5-2026) ===================== */
.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; }
.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); }