/* ==========================================================================
   游戏官方网站 - 全站样式（纯本地，不引用任何外部字体/图片/CDN）
   主题：深色仙侠风（墨蓝底 + 金色描边）
   ========================================================================== */

* { box-sizing: border-box; }

:root{
  --bg:#080c17;
  --bg2:#0d1424;
  --panel:#121b2e;
  --panel2:#18233b;
  --line:#243354;
  --gold:#e6c477;
  --gold2:#c9922f;
  --text:#c8d3e6;
  --text2:#8b9ab5;
  --ok:#38d39f;
  --err:#ff7b7b;
  --warn:#ffc95c;
  --blue:#5aa9ff;
}

html,body{ margin:0; padding:0; }
body{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(90,169,255,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(230,196,119,.10), transparent 55%),
    linear-gradient(180deg,#070b14 0%, #0a1020 40%, #080c17 100%);
  background-color: var(--bg);
  color: var(--text);
  font-family: "Microsoft YaHei","PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei",Arial,sans-serif;
  font-size: 14px;
  line-height: 1.7;
  min-height: 100vh;
}
a{ color: var(--gold); text-decoration: none; }
a:hover{ color: #fff3cf; }
img{ max-width:100%; }
h1,h2,h3,h4{ margin:0; font-weight: 700; }

/* ------------------------------------------------------------------ 顶部 */
.site-top{
  position: sticky; top:0; z-index: 60;
  background: linear-gradient(180deg, rgba(7,11,20,.96), rgba(8,12,23,.86));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.top-in{
  max-width: 1220px; margin:0 auto; padding: 0 16px;
  height: 68px; display:flex; align-items:center; gap: 18px;
}
.logo{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.logo-mark{ display:inline-flex; filter: drop-shadow(0 0 8px rgba(230,196,119,.35)); }
.logo-txt{ display:flex; flex-direction:column; line-height:1.2; }
.logo-txt b{ color:#fff; font-size:18px; letter-spacing:1px; }
.logo-txt i{ font-style:normal; font-size:11px; color: var(--text2); }
.nav{ margin-left:auto; display:flex; align-items:center; gap:2px; flex-wrap: wrap; }
.nav a{
  color: var(--text); padding: 8px 13px; border-radius: 6px; font-size: 14px; white-space: nowrap;
}
.nav a:hover{ background: rgba(230,196,119,.10); color:#fff; }
.nav a.on{ color:#10182c; background: linear-gradient(135deg,var(--gold),var(--gold2)); font-weight:700; }
.nav a.nav-out{ color: var(--err); }
.nav-toggle{
  display:none; margin-left:auto; background: transparent; border:1px solid var(--line);
  color: var(--text); border-radius:6px; font-size:18px; padding:4px 10px; cursor:pointer;
}

/* ------------------------------------------------------------------ 横幅 */
.banner{
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(700px 220px at 20% 0%, rgba(90,169,255,.16), transparent 65%),
    radial-gradient(600px 200px at 85% 10%, rgba(230,196,119,.14), transparent 60%),
    linear-gradient(180deg,#0d1526,#0a1120);
}
.banner-in{ max-width:1220px; margin:0 auto; padding: 30px 16px 26px; }
.banner h1{ font-size: 26px; color:#fff; letter-spacing: 2px; }
.banner p{ margin:6px 0 0; color: var(--text2); }

/* ------------------------------------------------------------------ 首页主视觉 */
.hero{
  position: relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 380px at 78% 20%, rgba(230,196,119,.20), transparent 62%),
    radial-gradient(800px 420px at 12% 70%, rgba(90,169,255,.18), transparent 65%),
    linear-gradient(180deg,#0b1226 0%, #0a1120 100%);
  background-color:#0a1020;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 46px),
                    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 46px);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 85%);
}
.hero-in{
  position:relative; z-index:1; max-width:1220px; margin:0 auto;
  padding: 66px 16px 62px; display:flex; flex-direction:column; gap:16px; align-items:flex-start;
}
.hero-tag{
  display:inline-block; font-size:12px; letter-spacing:3px; color: var(--gold);
  border:1px solid rgba(230,196,119,.45); border-radius: 999px; padding:3px 14px;
  background: rgba(230,196,119,.07);
}
.hero-title{
  font-size: 46px; line-height:1.15; letter-spacing: 3px;
  background: linear-gradient(120deg,#fff 0%, #ffe9b0 42%, #e0b45c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub{ max-width: 720px; color: var(--text); font-size: 15px; }
.hero-cta{ display:flex; gap:12px; flex-wrap: wrap; margin-top:6px; }
.hero-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.chip{
  font-size:12px; color:var(--text2); border:1px solid var(--line);
  background: rgba(255,255,255,.03); border-radius: 999px; padding: 4px 12px;
}
.chip b{ color: var(--ok); font-weight:400; }

/* ------------------------------------------------------------------ 公告条 */
.notice-bar{
  max-width:1220px; margin: 18px auto 0; padding: 0 16px;
}
.notice-in{
  display:flex; gap:12px; align-items:center;
  background: linear-gradient(90deg, rgba(230,196,119,.12), rgba(230,196,119,.02));
  border:1px solid rgba(230,196,119,.25); border-radius: 8px; padding: 10px 14px;
}
.notice-in b{ color: var(--gold); flex:0 0 auto; font-size:13px; letter-spacing:1px; }
.notice-in span{ color: var(--text); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ------------------------------------------------------------------ 通用容器 */
.wrap{ max-width:1220px; margin: 0 auto; padding: 26px 16px 40px; }
.wrap-narrow{ max-width: 720px; }
.grid{ display:grid; gap: 18px; }
.grid-3{ grid-template-columns: 1.35fr 1fr 1fr; }
.grid-2{ grid-template-columns: 1fr 1fr; }
.grid-4{ grid-template-columns: repeat(4,1fr); }
.grid-auto{ grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); }

.card{
  background: linear-gradient(180deg, var(--panel), var(--bg2));
  border:1px solid var(--line); border-radius: 10px; overflow:hidden;
}
.card-hd{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 12px 16px; border-bottom:1px solid var(--line);
  background: linear-gradient(90deg, rgba(230,196,119,.08), transparent);
}
.card-hd h3{ font-size:16px; color:#fff; letter-spacing:1px; display:flex; align-items:center; gap:8px; }
.card-hd h3::before{ content:""; width:4px; height:16px; border-radius:2px; background: linear-gradient(180deg,var(--gold),var(--gold2)); }
.card-hd .more{ font-size:12px; color: var(--text2); }
.card-bd{ padding: 16px; }

/* ------------------------------------------------------------------ 新闻列表 */
.news-list{ list-style:none; margin:0; padding:0; }
.news-list li{ display:flex; gap:10px; align-items:baseline; padding: 9px 0; border-bottom:1px dashed rgba(255,255,255,.07); }
.news-list li:last-child{ border-bottom:0; }
.news-list a{ flex:1; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.news-list a:hover{ color: var(--gold); }
.news-list .tag{ font-size:11px; padding:1px 7px; border-radius:4px; flex:0 0 auto; }
.tag-1{ background: rgba(255,201,92,.16); color: var(--warn); }
.tag-2{ background: rgba(90,169,255,.16); color: var(--blue); }
.tag-3{ background: rgba(56,211,159,.16); color: var(--ok); }
.news-list .date{ color: var(--text2); font-size:12px; flex:0 0 auto; }

/* 资讯详情 / 列表页 */
.news-item{ padding: 14px 0; border-bottom:1px dashed rgba(255,255,255,.08); }
.news-item:last-child{ border-bottom:0; }
.news-item h4{ font-size:15px; margin-bottom:4px; }
.news-item h4 a{ color:#fff; }
.news-item h4 a:hover{ color: var(--gold); }
.news-item .meta{ color: var(--text2); font-size:12px; }
.news-item p{ margin:6px 0 0; color: var(--text); font-size:13px; }
.article{ line-height: 1.9; color: var(--text); word-break: break-word; }
.article img{ border-radius:8px; }
.article-meta{ color: var(--text2); font-size:12px; margin-bottom: 14px; padding-bottom:12px; border-bottom:1px dashed rgba(255,255,255,.1); }

/* ------------------------------------------------------------------ 快捷入口 / 特色 */
.quick{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.quick a{
  display:flex; flex-direction:column; gap:2px; padding: 12px 14px; border-radius:8px;
  border:1px solid var(--line); background: rgba(255,255,255,.02); color: var(--text);
}
.quick a:hover{ border-color: rgba(230,196,119,.5); background: rgba(230,196,119,.06); }
.quick a b{ color:#fff; font-size:14px; }
.quick a i{ font-style:normal; color: var(--text2); font-size:12px; }
.feature{ padding: 12px 0; border-bottom:1px dashed rgba(255,255,255,.08); }
.feature:last-child{ border-bottom:0; }
.feature b{ color:#fff; display:block; margin-bottom:2px; }
.feature span{ color: var(--text2); font-size:13px; }

/* ------------------------------------------------------------------ 下载 / 套餐卡片 */
.dl-card, .pack-card{
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background: linear-gradient(180deg, var(--panel2), var(--bg2));
  display:flex; flex-direction:column;
}
.dl-card .dl-top, .pack-card .pack-top{
  padding: 14px 16px; border-bottom:1px solid var(--line);
  background: linear-gradient(120deg, rgba(90,169,255,.12), rgba(230,196,119,.08));
}
.dl-card .dl-top b, .pack-card .pack-top b{ color:#fff; font-size:15px; display:block; }
.dl-card .dl-top i, .pack-card .pack-top i{ font-style:normal; color: var(--text2); font-size:12px; }
.dl-card .dl-bd, .pack-card .pack-bd{ padding: 14px 16px; flex:1; }
.pack-price{ font-size: 26px; color: var(--gold); font-weight:700; }
.pack-price small{ font-size:12px; color: var(--text2); font-weight:400; margin-left:4px; }

/* ------------------------------------------------------------------ 按钮 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding: 9px 20px; border-radius:7px; border:1px solid transparent; cursor:pointer;
  font-size:14px; font-family:inherit; line-height:1.6; text-align:center;
  transition: all .15s ease;
}
.btn-primary{ background: linear-gradient(135deg,#3f7ff5,#2b5fd0); color:#fff; border-color:#5590ff; }
.btn-primary:hover{ filter: brightness(1.12); color:#fff; }
.btn-gold{ background: linear-gradient(135deg,var(--gold),var(--gold2)); color:#1a1305; font-weight:700; }
.btn-gold:hover{ filter: brightness(1.08); color:#1a1305; }
.btn-ghost{ background: rgba(255,255,255,.03); color: var(--text); border-color: var(--line); }
.btn-ghost:hover{ border-color: rgba(230,196,119,.5); color:#fff; }
.btn-danger{ background: rgba(255,123,123,.08); color: var(--err); border-color: rgba(255,123,123,.4); }
.btn-danger:hover{ background: rgba(255,123,123,.16); color:#fff; }
.btn-sm{ padding: 4px 12px; font-size:13px; }
.btn-lg{ padding: 12px 30px; font-size:15px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ------------------------------------------------------------------ 表单 */
.form-row{ margin: 0 0 16px; }
.form-label{ display:block; font-size:13px; color: var(--text); margin-bottom:6px; }
.form-label .req{ color: var(--err); font-style:normal; margin-left:2px; }
.form-input{
  width:100%; padding: 10px 12px; font-size:14px; font-family:inherit;
  background: rgba(0,0,0,.32); color:#eaf0fb; border:1px solid var(--line); border-radius:7px;
}
.form-input:focus{ outline:none; border-color: rgba(230,196,119,.6); box-shadow: 0 0 0 3px rgba(230,196,119,.10); }
select.form-input{ appearance:none; background-image: linear-gradient(45deg,transparent 50%, var(--text2) 50%),linear-gradient(135deg, var(--text2) 50%,transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.form-input-wrap{ display:flex; gap:10px; align-items:center; }
.form-input-wrap .form-input{ flex:1; }
.form-tip{ font-size:12px; color: var(--text2); margin:6px 0 0; }
.code-in{ max-width: 180px; flex:0 0 180px !important; }
.vcode-img{ height:42px; width:auto; border-radius:6px; border:1px solid var(--line); cursor:pointer; background:#fff; }
.form-inline{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }

/* 密码强度 */
.strength{ display:flex; align-items:center; gap:6px; margin-top:8px; }
.strength .bar{ flex:1; height:6px; border-radius:3px; background: rgba(255,255,255,.10); }
.strength .bar.s0{ background:#e05a5a; } .strength .bar.s1{ background:#e0a95a; } .strength .bar.s2{ background:#3fbf86; }
.strength span{ font-size:12px; color: var(--text2); min-width:28px; }

/* ------------------------------------------------------------------ 提示 / 状态 */
.alert{ padding: 11px 14px; border-radius:7px; margin-bottom:16px; font-size:13px; border:1px solid transparent; }
.alert-success{ background: rgba(56,211,159,.10); border-color: rgba(56,211,159,.35); color: #7ef0c4; }
.alert-error{ background: rgba(255,123,123,.10); border-color: rgba(255,123,123,.38); color: #ffb3b3; }
.alert-warning{ background: rgba(255,201,92,.10); border-color: rgba(255,201,92,.35); color: #ffdd9a; }
.badge{ display:inline-block; padding:1px 9px; border-radius: 999px; font-size:12px; }
.badge-green{ background: rgba(56,211,159,.16); color: #6fe6bb; }
.badge-blue{ background: rgba(90,169,255,.16); color: #9dcbff; }
.badge-gold{ background: rgba(230,196,119,.16); color: var(--gold); }
.badge-red{ background: rgba(255,123,123,.16); color: #ffb3b3; }
.empty{ color: var(--text2); text-align:center; padding: 22px 0; }
.mono{ font-family: Consolas, "Courier New", monospace; }

/* ------------------------------------------------------------------ 表格 */
.table-wrap{ overflow-x:auto; }
table.table{ width:100%; border-collapse: collapse; font-size:13px; }
table.table th, table.table td{ padding: 10px 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,.07); vertical-align: top; }
table.table th{ color: var(--text2); font-weight:400; background: rgba(255,255,255,.03); white-space:nowrap; }
table.table tr:hover td{ background: rgba(255,255,255,.02); }

/* 统计卡 */
.stats{ display:grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap:14px; margin-bottom:18px; }
.stat-card{ border:1px solid var(--line); border-radius:9px; padding: 14px 16px; background: linear-gradient(180deg,var(--panel),var(--bg2)); }
.stat-num{ font-size: 24px; color:#fff; font-weight:700; }
.stat-num.gold{ color: var(--gold); }
.stat-label{ color: var(--text2); font-size:12px; margin-top:2px; }

/* 分页 */
.pager{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:18px; }
.pager .pbtn{ padding: 5px 11px; border:1px solid var(--line); border-radius:6px; color: var(--text); font-size:13px; }
.pager .pbtn:hover{ border-color: rgba(230,196,119,.5); color:#fff; }
.pager .pbtn.cur{ background: linear-gradient(135deg,var(--gold),var(--gold2)); color:#1a1305; border-color:transparent; font-weight:700; }
.pager .ptotal{ color: var(--text2); font-size:12px; margin-left:6px; }

/* 复制按钮（配合 CSP：不使用 javascript: 链接） */
.copy-btn{ cursor:pointer; color: var(--gold); margin-left:6px; user-select:none; }
.copy-btn:hover{ color:#fff3cf; }

/* 充值：支付方式选择卡片 */
.pay-list{ display:flex; flex-direction:column; gap:8px; }
.pay-item{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px;
           border:1px solid var(--line); border-radius:8px; cursor:pointer; background:rgba(255,255,255,.02); }
.pay-item:hover{ border-color: var(--gold2); }
.pay-item.on{ border-color: var(--gold2); background:rgba(201,146,47,.10); }
.pay-item input{ margin:0; accent-color: var(--gold2); }
.pay-name{ font-weight:600; color:#fff; display:flex; align-items:center; gap:6px; }
.pay-tag{ font-style:normal; font-size:11px; padding:1px 6px; border-radius:10px;
          background:rgba(201,146,47,.18); color: var(--gold); border:1px solid rgba(201,146,47,.4); }
.pay-note{ flex-basis:100%; font-size:12px; color: var(--text2); line-height:1.5; }

/* 面包屑 */
.crumb{ color: var(--text2); font-size:13px; margin-bottom:14px; }
.crumb .sep{ margin: 0 7px; opacity:.5; }
.crumb .cur{ color: var(--text); }

/* ------------------------------------------------------------------ 客服 / 回顶 */
.side-kefu{
  position: fixed; right: 18px; bottom: 96px; width: 176px; z-index: 70;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background: linear-gradient(180deg, rgba(18,27,46,.98), rgba(10,16,32,.98));
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.sk-title{ padding:8px 12px; font-size:13px; color:#1a1305; font-weight:700; background: linear-gradient(135deg,var(--gold),var(--gold2)); }
.sk-body{ padding:8px; }
.sk-item{ display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:6px; color: var(--text); font-size:12px; }
.sk-item:hover{ background: rgba(230,196,119,.10); color:#fff; }
.sk-ico{ width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,#3f7ff5,#2b5fd0); color:#fff; font-size:11px; flex:0 0 auto; }
.sk-toggle{ display:block; width:100%; border:0; border-top:1px solid var(--line); background:transparent; color: var(--text2); font-size:12px; padding:6px; cursor:pointer; }
.side-kefu.min .sk-body{ display:none; }
.back-top{
  position: fixed; right: 18px; bottom: 40px; width:42px; height:42px; z-index:70; display:none;
  align-items:center; justify-content:center; cursor:pointer; border-radius:50%;
  background: linear-gradient(135deg,var(--panel2),var(--bg2)); border:1px solid var(--line); color: var(--gold); font-size:18px;
}
.back-top.show{ display:flex; }

/* ------------------------------------------------------------------ 页脚 */
.site-foot{ border-top:1px solid var(--line); background: linear-gradient(180deg, rgba(8,12,23,.6), rgba(5,8,15,.95)); margin-top: 20px; }
.foot-in{ max-width:1220px; margin:0 auto; padding: 22px 16px 30px; }
.foot-links{ display:flex; gap:16px; flex-wrap:wrap; padding-bottom:12px; border-bottom:1px dashed rgba(255,255,255,.08); }
.foot-links a{ color: var(--text2); font-size:13px; }
.foot-links a:hover{ color: var(--gold); }
.foot-txt{ margin-top:12px; color: var(--text2); font-size:12px; }
.foot-txt p{ margin:4px 0; }

/* ------------------------------------------------------------------ 登录/注册页 */
.auth-wrap{ max-width: 520px; margin: 0 auto; }
.auth-card{ border:1px solid var(--line); border-radius:12px; background: linear-gradient(180deg,var(--panel),var(--bg2)); overflow:hidden; }
.auth-hd{ padding: 20px 24px 4px; }
.auth-hd h2{ font-size:19px; color:#fff; letter-spacing:1px; }
.auth-hd p{ color: var(--text2); font-size:13px; margin:6px 0 0; }
.auth-bd{ padding: 18px 24px 24px; }
.auth-foot{ padding: 12px 24px; border-top:1px solid var(--line); color: var(--text2); font-size:12px; text-align:center; }
.tabs{ display:flex; gap:8px; margin: 14px 24px 0; }
.tabs a{ flex:1; text-align:center; padding:9px; border-radius:7px; border:1px solid var(--line); color: var(--text2); font-size:13px; }
.tabs a.on{ background: rgba(230,196,119,.12); border-color: rgba(230,196,119,.5); color: var(--gold); }

/* 结果页 */
.result{ text-align:center; padding: 26px 20px 30px; }
.result .ok-icon{
  width:62px; height:62px; margin: 0 auto 14px; border-radius:50%; font-size:32px; color:#0d2b20;
  background: linear-gradient(135deg,#63e6b4,#2bb07f); display:flex; align-items:center; justify-content:center;
}
.result h2{ font-size:20px; color:#fff; margin-bottom:8px; }
.result p{ color: var(--text); }
.result .actions{ margin-top:18px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* 导航里的图片 Logo */
.logo-img{ display:block; width:auto; max-width:300px; object-fit:contain; }

/* 客服悬浮窗里的二维码 */
.sk-qr{ text-align:center; padding:6px 4px 2px; font-size:11px; color: var(--text2); }
.sk-qr img{ display:block; width:100%; max-width:140px; margin:0 auto 4px; border-radius:8px; background:#fff; padding:3px; border:1px solid var(--line); }

/* ------------------------------------------------------------------ 首页右侧面板（区服状态 / 玩家交流群） */
.hero-in{ flex-direction: row; gap: 32px; }
.hero-left{ flex: 1 1 520px; min-width:0; display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.hero-side{ flex: 0 0 420px; max-width: 420px; display:flex; flex-direction:column; gap:14px; }
.side-box{
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background: linear-gradient(180deg, rgba(18,27,46,.86), rgba(10,16,32,.86));
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.side-hd{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 10px 14px; border-bottom:1px solid var(--line); }
.side-hd h3{ font-size:14px; color:#fff; }
.side-box .table-wrap{ border:0; }
.table-sm th, .table-sm td{ padding: 7px 10px; font-size: 12.5px; }
.table-nowrap th, .table-nowrap td{ white-space: nowrap; }
.qr-row{ display:flex; gap:16px; padding:14px; justify-content:center; flex-wrap:wrap; }
.qr-item{ text-align:center; font-size:12px; color: var(--text2); }
.qr-item img{ display:block; width:132px; height:132px; object-fit:contain; margin: 0 auto 7px;
  padding:4px; border-radius:9px; background:#fff; border:1px solid var(--line); }

/* 新闻正文内的链接与图片 */
.article a{ color: var(--gold); border-bottom:1px dashed rgba(230,196,119,.5); }
.article a:hover{ color:#fff; }
.article img{ border-radius:8px; margin: 10px 0; border:1px solid var(--line); }

/* ------------------------------------------------------------------ 响应式 */
@media (max-width: 1080px){
  .hero-in{ flex-direction: column; gap: 20px; }
  .hero-side{ flex: 1 1 auto; max-width: 100%; width: 100%; }
}
@media (max-width: 980px){
  .grid-3, .grid-4{ grid-template-columns: 1fr 1fr; }
  .hero-title{ font-size: 34px; }
}
@media (max-width: 720px){
  .top-in{ height:auto; padding: 10px 14px; flex-wrap:wrap; }
  .nav{ display:none; width:100%; margin: 8px 0 0; flex-direction:column; align-items:stretch; }
  .nav.open{ display:flex; }
  .nav-toggle{ display:block; }
  .grid-3, .grid-4, .grid-2, .grid-auto, .quick{ grid-template-columns: 1fr; }
  .hero-in{ padding: 40px 16px; }
  .hero-title{ font-size: 27px; }
  .side-kefu{ right:10px; bottom: 76px; width: 158px; }
  .wrap{ padding: 18px 12px 30px; }
  .form-input-wrap{ flex-wrap: wrap; }
  .code-in{ max-width: 100%; flex: 1 1 100% !important; }
}