@charset "utf-8";
/* ===========================================================
   武汉襄五学校 · 招生网
   设计系统 —— 参考清华大学本科招生网 rem 流式适配方案
   基准：html{font-size:100px}  容器：.wal{width:14rem} = 1400px
   =========================================================== */

/* ============================================================
   「墨金学府风」设计语言
   · 墨黑为骨 #17161A —— 深色区 / 页脚 / 导航，营造庄重学府感
   · 襄五红为魂 #B20202 —— 主色，只用于强调与行动点
   · 香槟金点睛 #C9A063 —— 细线 / 数字 / 英文小字，不做大面积铺陈
   · 近白暖底 #FCFAF7 —— 大留白，衬托内容
   · 字体：中文无衬线粗体（现代）+ 数字英文衬线体（优雅）
   ============================================================ */
:root {
    --pri: #B20202;          /* 主色：襄五红 */
    --pri-d: #8C0101;        /* 深调 */
    --pri-dd: #6E0000;       /* 更深（红色区渐变起点） */
    --pri-l: #D02626;        /* 浅调 */

    --dark: #17161A;         /* 墨黑（深色区 / 页脚） */
    --dark-2: #232228;       /* 墨黑浅调 */
    --dark-3: #2E2C33;

    --gold: #C9A063;         /* 点缀金 */
    --gold-l: #E8D2A6;       /* 金浅调 */

    --cream: #FCFAF7;        /* 纸白暖底 */
    --cream-l: #FFFDFB;
    --cream-2: #F6F0E8;      /* 浅米（区块交替） */

    --ink: #1C1B1F;          /* 标题 */
    --ink-2: #4A474E;        /* 正文 */
    --ink-3: #7C7880;        /* 辅助文字 */
    --line: #EAE3DA;

    --shadow: 0 .04rem .2rem rgba(30, 24, 20, .06);
    --shadow-h: 0 .14rem .36rem rgba(30, 24, 20, .12);
    --serif: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    font-size: 100px;
    -webkit-text-size-adjust: none;
}

body {
    font-family: "PingFang SC", "Microsoft YaHei", "微软雅黑", "Hiragino Sans GB", Arial, sans-serif;
    font-size: .16rem;
    line-height: 1.85;
    color: var(--ink-2);
    background: var(--cream-l);
}

a { color: inherit; text-decoration: none; transition: color .25s; }
img { max-width: 100%; display: block; border: 0; }
li { list-style: none; }
button, input, textarea, select { font-family: inherit; font-size: inherit; }
input, textarea { outline: none; }

.wal { width: 14rem; margin: 0 auto; }

/* ---------- 通用标题 ---------- */
.sec { padding: 1.05rem 0; }
.sec.gray { background: var(--cream-2); }
.sec.dark {
    background: var(--dark);
    background-image: radial-gradient(circle at 16% 10%, rgba(178, 2, 2, .32), transparent 48%),
                      radial-gradient(circle at 86% 90%, rgba(201, 160, 99, .13), transparent 46%);
}

.sec-hd { text-align: center; margin-bottom: .55rem; }
.sec-hd .en {
    font-size: .12rem; letter-spacing: .1rem; text-transform: uppercase;
    color: var(--gold); font-weight: 700; margin-bottom: .1rem;
    text-indent: .1rem;                /* 补偿字距造成的右侧空隙，保持视觉居中 */
}
.sec-hd h2 {
    font-size: .44rem; font-weight: 700; color: var(--ink);
    letter-spacing: -.004rem; line-height: 1.28;
}
.sec-hd h2 em { font-style: normal; color: var(--pri); }
.sec-hd .sub { margin-top: .16rem; color: var(--ink-3); font-size: .16rem; }
.sec-hd .bar {
    width: .6rem; height: .04rem; background: var(--gold);
    margin: .22rem auto 0; border-radius: .02rem;
}
.sec.dark .sec-hd h2 { color: #fff; }
.sec.dark .sec-hd h2 em { color: var(--gold-l); }
.sec.dark .sec-hd .sub { color: rgba(255, 255, 255, .72); }
.sec.dark .sec-hd .bar { background: var(--gold-l); }

.sec-hd.left { text-align: left; }
.sec-hd.left .bar { margin-left: 0; }

/* ---------- 顶部信息条 ---------- */
.topbar {
    background: var(--pri-dd); color: rgba(255, 255, 255, .78);
    font-size: .13rem; line-height: .38rem;
}
.topbar .wal { display: flex; justify-content: space-between; align-items: center; }
.topbar .tl span { margin-right: .28rem; }
.topbar a:hover { color: var(--gold-l); }
.topbar .tr { display: flex; align-items: center; gap: .2rem; }
.topbar .hot { color: var(--gold-l); font-weight: 700; letter-spacing: .01rem; }

/* ---------- 头部 / 导航 ---------- */
.head {
    background: #fff; position: sticky; top: 0; z-index: 60;
    box-shadow: 0 .02rem .12rem rgba(46, 65, 74, .06);
}
.head .wal { display: flex; align-items: center; height: 1.02rem; }

.logo { display: flex; align-items: center; gap: .16rem; flex-shrink: 0; }
.logo .mark {
    width: .58rem; height: .58rem; border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, var(--pri-l), var(--pri-dd));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: .26rem; font-weight: 700; font-family: Georgia, serif;
    box-shadow: 0 0 0 .03rem rgba(201, 160, 99, .45);
}
.logo .txt b {
    display: block; font-size: .26rem; color: var(--pri-d);
    letter-spacing: .02rem; line-height: 1.25; font-weight: 700;
}
.logo .txt i {
    display: block; font-style: normal; font-size: .1rem; letter-spacing: .035rem;
    color: var(--gold); text-transform: uppercase; font-weight: 600;
}

.nav { margin-left: auto; display: flex; align-items: center; }
.nav > li { position: relative; }
.nav > li > a {
    display: block; padding: 0 .165rem; line-height: 1.02rem;
    font-size: .165rem; color: var(--ink); font-weight: 500; position: relative;
    white-space: nowrap;
}
.nav > li > a::after {
    content: ''; position: absolute; left: 50%; bottom: .22rem;
    width: 0; height: .03rem; background: var(--pri);
    transform: translateX(-50%); transition: width .28s;
}
.nav > li:hover > a, .nav > li.on > a { color: var(--pri); }
.nav > li:hover > a::after, .nav > li.on > a::after { width: .3rem; }

.drop {
    position: absolute; left: 50%; top: 100%; transform: translateX(-50%) translateY(.08rem);
    background: #fff; min-width: 2.1rem; padding: .12rem 0;
    box-shadow: 0 .1rem .3rem rgba(46, 65, 74, .12);
    border-top: .03rem solid var(--pri);
    opacity: 0; visibility: hidden; transition: all .26s;
    border-radius: 0 0 .04rem .04rem;
}
.nav > li:hover .drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.drop a {
    display: block; padding: .1rem .26rem; font-size: .15rem;
    color: var(--ink-2); white-space: nowrap;
}
.drop a:hover { background: var(--cream); color: var(--pri-d); padding-left: .34rem; }

.head .tel {
    margin-left: .3rem; padding-left: .3rem; border-left: .01rem solid var(--line);
    flex-shrink: 0;
}
.head .tel i { display: block; font-style: normal; font-size: .12rem; color: var(--ink-3); }
.head .tel b { font-size: .2rem; color: var(--pri); letter-spacing: .01rem; }

.burger { display: none; width: .44rem; height: .44rem; margin-left: auto; cursor: pointer; }
.burger span {
    display: block; height: .03rem; background: var(--pri-d);
    margin: .09rem 0; border-radius: .02rem; transition: .3s;
}

/* ---------- 轮播 ---------- */
.banner { position: relative; overflow: hidden; background: var(--pri-dd); }
.banner .slides { position: relative; height: 6.1rem; }
.banner .slide {
    position: absolute; inset: 0; opacity: 0; transition: opacity .8s;
    background-size: cover; background-position: center;
}
.banner .slide.on { opacity: 1; }
.banner .slide::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(36, 12, 64, .82) 0%, rgba(36, 12, 64, .5) 46%, rgba(36, 12, 64, .14) 100%);
}
.banner .cap {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    z-index: 3; width: 100%;
}
.banner .cap .wal { max-width: 14rem; }
.banner .cap .tag {
    display: inline-block; font-size: .13rem; letter-spacing: .05rem;
    color: var(--gold-l); border: .01rem solid rgba(232, 210, 166, .6);
    padding: .05rem .18rem; border-radius: .3rem; margin-bottom: .22rem;
}
.banner .cap h1 {
    font-size: .66rem; color: #fff; font-weight: 700; line-height: 1.24;
    letter-spacing: -.006rem; text-shadow: 0 .06rem .3rem rgba(0, 0, 0, .38);
}
.banner .cap h1 em { font-style: normal; color: var(--gold-l); }
.banner .cap p {
    color: rgba(255, 255, 255, .86); font-size: .18rem;
    margin-top: .2rem; max-width: 7.4rem;
}
.banner .cap .btns { margin-top: .38rem; display: flex; gap: .18rem; }

.btn {
    display: inline-block; padding: .14rem .42rem; border-radius: .4rem;
    font-size: .17rem; font-weight: 600; cursor: pointer; border: 0;
    transition: all .28s; white-space: nowrap;
}
.btn.p {
    background: linear-gradient(135deg, var(--pri-l), var(--pri-d));
    color: #fff; box-shadow: 0 .06rem .2rem rgba(115, 48, 183, .26);
}
.btn.p:hover { transform: translateY(-.02rem); box-shadow: 0 .1rem .28rem rgba(115, 48, 183, .42); }
.btn.o { background: transparent; color: #fff; border: .02rem solid rgba(255, 255, 255, .7); }
.btn.o:hover { background: rgba(255, 255, 255, .16); }
.btn.r { background: var(--pri); color: #fff; }
.btn.r:hover { background: var(--pri-d); transform: translateY(-.02rem); }

.banner .dots {
    position: absolute; left: 50%; bottom: .4rem; transform: translateX(-50%);
    display: flex; gap: .12rem; z-index: 4;
}
.banner .dots i {
    width: .34rem; height: .04rem; background: rgba(255, 255, 255, .4);
    border-radius: .02rem; cursor: pointer; transition: .3s;
}
.banner .dots i.on { background: var(--gold-l); width: .58rem; }

.banner .arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: .5rem; height: .5rem; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .14); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .26rem; transition: .3s; user-select: none;
}
.banner .arrow:hover { background: rgba(255, 255, 255, .3); }
.banner .arrow.l { left: .4rem; }
.banner .arrow.r { right: .4rem; }

/* ---------- 数据条 ---------- */
.stats {
    background: var(--dark);
    background-image: radial-gradient(circle at 10% 50%, rgba(178, 2, 2, .34), transparent 54%);
    padding: .58rem 0; position: relative; z-index: 5;
    border-bottom: .01rem solid rgba(201, 160, 99, .2);
}
.stats .wal { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats .it { text-align: center; color: #fff; position: relative; }
.stats .it + .it::before {
    content: ''; position: absolute; left: 0; top: 20%; height: 60%;
    width: .01rem; background: rgba(255, 255, 255, .2);
}
.stats .n { font-size: .48rem; font-weight: 700; line-height: 1.2; color: var(--gold-l); }
.stats .n small { font-size: .2rem; margin-left: .04rem; }
.stats .l { font-size: .15rem; color: rgba(255, 255, 255, .82); margin-top: .04rem; }

/* ---------- 卡片网格 ---------- */
.grid { display: grid; gap: .26rem; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.card {
    background: #fff; border-radius: .1rem; padding: .42rem .38rem;
    border: .01rem solid var(--line); transition: all .3s; position: relative;
    overflow: hidden;
}
.card:hover { transform: translateY(-.06rem); box-shadow: var(--shadow-h); border-color: var(--gold); }
.card .ico {
    width: .66rem; height: .66rem; border-radius: .16rem; margin-bottom: .24rem;
    background: var(--cream); color: var(--pri-d);
    display: flex; align-items: center; justify-content: center;
    font-size: .3rem; font-weight: 700;
}
.card h3 { font-size: .22rem; color: var(--ink); margin-bottom: .14rem; font-weight: 700; }
.card p { font-size: .155rem; color: var(--ink-3); line-height: 1.9; }
.card .num {
    position: absolute; right: .28rem; top: .18rem;
    font-size: .72rem; font-weight: 700; color: var(--cream);
    font-family: Georgia, serif; line-height: 1;
}

/* ---------- 图文左右 ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; align-items: center; }
.split .pic { border-radius: .1rem; overflow: hidden; box-shadow: var(--shadow); }
.split .pic img { width: 100%; }
.split h2 { font-size: .38rem; color: var(--ink); line-height: 1.42; margin-bottom: .22rem; font-weight: 700; }
.split h2 em { font-style: normal; color: var(--pri); }
.split p { font-size: .16rem; color: var(--ink-2); margin-bottom: .16rem; }
.split ul.dot { margin-top: .24rem; }
.split ul.dot li {
    position: relative; padding-left: .26rem; margin-bottom: .12rem;
    font-size: .155rem; color: var(--ink-2);
}
.split ul.dot li::before {
    content: ''; position: absolute; left: 0; top: .11rem;
    width: .08rem; height: .08rem; border-radius: 50%; background: var(--gold);
}

/* ---------- 十大同步 ---------- */
.sync { display: grid; grid-template-columns: repeat(5, 1fr); gap: .16rem; }
.sync .it {
    background: rgba(255, 255, 255, .08); border: .01rem solid rgba(255, 255, 255, .22);
    border-radius: .1rem; padding: .3rem .16rem; text-align: center;
    transition: .3s; backdrop-filter: blur(4px);
}
.sync .it:hover { background: rgba(255, 255, 255, .14); transform: translateY(-.04rem); }
.sync .it b {
    display: block; font-size: .34rem; color: var(--gold-l);
    font-family: Georgia, serif; line-height: 1.2; margin-bottom: .06rem;
}
.sync .it h4 { font-size: .18rem; color: #fff; margin-bottom: .08rem; font-weight: 600; }
.sync .it p { font-size: .13rem; color: rgba(255, 255, 255, .66); line-height: 1.7; }

/* ---------- 表格 ---------- */
.tbl { width: 100%; border-collapse: collapse; background: #fff; font-size: .155rem; }
.tbl th, .tbl td { padding: .18rem .2rem; border: .01rem solid var(--line); text-align: left; }
.tbl thead th {
    background: linear-gradient(135deg, var(--pri-dd), var(--pri));
    color: #fff; font-weight: 600; font-size: .17rem; white-space: nowrap;
}
.tbl tbody tr:nth-child(even) { background: var(--cream-l); }
.tbl tbody tr:hover { background: var(--cream); }
.tbl td.c, .tbl th.c { text-align: center; }
.tbl .hl { color: var(--pri); font-weight: 700; }
.tbl-wrap { border-radius: .1rem; overflow: hidden; box-shadow: var(--shadow); }

/* ---------- 师资 ---------- */
.teacher {
    background: #fff; border-radius: .1rem; padding: .34rem; text-align: center;
    border: .01rem solid var(--line); transition: .3s;
}
.teacher:hover { border-color: var(--pri); box-shadow: var(--shadow-h); transform: translateY(-.05rem); }
.teacher .av {
    width: 1.1rem; height: 1.1rem; border-radius: 50%; margin: 0 auto .2rem;
    background: linear-gradient(135deg, #EDE6F8, #DCD0F0);
    color: var(--pri-d); display: flex; align-items: center; justify-content: center;
    font-size: .38rem; font-weight: 700;
    box-shadow: 0 0 0 .03rem #fff, 0 0 0 .05rem var(--gold-l);
}
.teacher h3 { font-size: .22rem; color: var(--ink); margin-bottom: .06rem; }
.teacher .pos {
    display: inline-block; font-size: .13rem; color: var(--pri-d);
    background: var(--cream); padding: .02rem .14rem; border-radius: .2rem; margin-bottom: .14rem;
}
.teacher p { font-size: .145rem; color: var(--ink-3); text-align: left; line-height: 1.85; }

/* ---------- 班型卡 ---------- */
.plan {
    background: #fff; border-radius: .12rem; overflow: hidden;
    border: .01rem solid var(--line); display: flex; flex-direction: column;
    transition: .3s;
}
.plan:hover { box-shadow: var(--shadow-h); transform: translateY(-.06rem); }
.plan .hd {
    padding: .28rem .34rem; color: #fff;
    background: linear-gradient(135deg, var(--pri-dd), var(--pri)); position: relative;
}
.plan.gold .hd { background: linear-gradient(135deg, #252586, #3B3BB0); }
.plan .hd h3 { font-size: .26rem; font-weight: 700; }
.plan .hd span { font-size: .14rem; opacity: .8; }
.plan .bd { padding: .3rem .34rem; flex: 1; display: flex; flex-direction: column; }
.plan .price {
    font-size: .4rem; font-weight: 700; color: var(--pri); font-family: Georgia, serif;
    line-height: 1.2; margin-bottom: .04rem;
}
.plan .price small { font-size: .15rem; color: var(--ink-3); font-family: inherit; font-weight: 400; }
.plan .goal {
    display: inline-block; font-size: .14rem; color: var(--pri-d);
    background: var(--cream); padding: .04rem .16rem; border-radius: .2rem;
    margin-bottom: .2rem; align-self: flex-start;
}
.plan ul li {
    position: relative; padding-left: .24rem; font-size: .15rem;
    color: var(--ink-2); margin-bottom: .1rem;
}
.plan ul li::before {
    content: ''; position: absolute; left: 0; top: .1rem;
    width: .1rem; height: .1rem; border-radius: 50%;
    border: .02rem solid var(--gold);
}

/* ---------- 成绩榜 ---------- */
.rank { background: #fff; border-radius: .1rem; overflow: hidden; border: .01rem solid var(--line); }
.rank .hd {
    display: flex; justify-content: space-between; align-items: center;
    padding: .22rem .3rem; background: var(--cream); border-bottom: .01rem solid var(--line);
}
.rank .hd h3 { font-size: .2rem; color: var(--pri-d); }
.rank .hd span { font-size: .14rem; color: var(--ink-3); }
.rank table { width: 100%; border-collapse: collapse; font-size: .15rem; }
.rank th {
    padding: .13rem .2rem; text-align: left; font-weight: 600;
    color: var(--ink-3); font-size: .14rem; background: var(--cream-l);
}
.rank td { padding: .13rem .2rem; border-top: .01rem solid var(--line); }
.rank td.up { color: var(--pri); font-weight: 700; }
.rank .sc { font-family: Georgia, serif; }
.rank .max { color: var(--pri-d); font-weight: 700; }

.tabs { display: flex; gap: .1rem; margin-bottom: .28rem; justify-content: center; }
.tabs button {
    padding: .1rem .34rem; border-radius: .3rem; border: .01rem solid var(--line);
    background: #fff; color: var(--ink-2); cursor: pointer; transition: .25s; font-size: .16rem;
}
.tabs button.on { background: var(--pri); color: #fff; border-color: var(--pri); }
.tabs button:hover:not(.on) { border-color: var(--pri); color: var(--pri); }

/* ---------- 常见问答 ---------- */
.faq { max-width: 11rem; margin: 0 auto; }
.faq details {
    background: #fff; border: .01rem solid var(--line); border-radius: .1rem;
    margin-bottom: .14rem; overflow: hidden; transition: .3s;
}
.faq details[open] { border-color: var(--gold); box-shadow: var(--shadow); }
.faq summary {
    padding: .24rem .32rem .24rem .8rem; cursor: pointer; position: relative;
    font-size: .18rem; color: var(--ink); font-weight: 600; list-style: none;
    transition: .25s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
    content: 'Q'; position: absolute; left: .3rem; top: 50%; transform: translateY(-50%);
    width: .32rem; height: .32rem; border-radius: 50%; background: var(--cream);
    color: var(--pri); font-size: .16rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.faq summary::after {
    content: '+'; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
    font-size: .28rem; color: var(--gold); transition: .3s; line-height: 1;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details[open] summary { color: var(--pri); background: var(--cream-l); }
.faq .ans { padding: .04rem .32rem .28rem .8rem; font-size: .155rem; color: var(--ink-2); }
.faq .ans .tag {
    display: inline-block; font-size: .12rem; color: var(--gold);
    border: .01rem solid var(--gold-l); padding: 0 .1rem; border-radius: .1rem; margin-right: .08rem;
}

/* ---------- 步骤 ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: .2rem; position: relative; }
.steps .it { text-align: center; padding: 0 .1rem; }
.steps .it .n {
    width: .78rem; height: .78rem; border-radius: 50%; margin: 0 auto .2rem;
    background: linear-gradient(135deg, var(--pri-dd), var(--pri));
    color: #fff; font-size: .32rem; font-weight: 700; font-family: Georgia, serif;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 .06rem .2rem rgba(178, 2, 2, .28); position: relative; z-index: 2;
}
.steps .it h3 { font-size: .2rem; color: var(--ink); margin-bottom: .08rem; }
.steps .it p { font-size: .15rem; color: var(--ink-3); }
.steps .it:not(:last-child)::after {
    content: ''; position: absolute; top: .39rem; width: 25%; height: .01rem;
    border-top: .02rem dashed var(--gold-l); z-index: 1;
}

/* ---------- 联系 ---------- */
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: .5rem; }
.form-box { background: #fff; border-radius: .12rem; padding: .5rem; box-shadow: var(--shadow); }
.form-row { margin-bottom: .22rem; }
.form-row label { display: block; font-size: .15rem; color: var(--ink); margin-bottom: .08rem; font-weight: 600; }
.form-row label i { color: var(--pri); font-style: normal; }
.form-row input, .form-row select, .form-row textarea {
    width: 100%; padding: .14rem .18rem; border: .01rem solid var(--line);
    border-radius: .06rem; background: var(--cream-l); transition: .25s; font-size: .155rem;
    color: var(--ink);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
    border-color: var(--pri); background: #fff; box-shadow: 0 0 0 .03rem rgba(178, 2, 2, .08);
}
.form-row textarea { height: 1.5rem; resize: vertical; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .18rem; }

.info-box { display: flex; flex-direction: column; gap: .2rem; }
.info-box .it {
    background: #fff; border-radius: .1rem; padding: .3rem .34rem;
    border-left: .04rem solid var(--pri); box-shadow: var(--shadow);
}
.info-box .it h3 { font-size: .18rem; color: var(--pri-d); margin-bottom: .1rem; }
.info-box .it p { font-size: .155rem; color: var(--ink-2); }
.info-box .it .tel { font-size: .26rem; color: var(--pri); font-weight: 700; letter-spacing: .01rem; }

.campus-list { display: grid; gap: .14rem; }
.campus-list .it {
    display: flex; gap: .16rem; align-items: flex-start;
    padding: .2rem .24rem; background: var(--cream-l); border-radius: .08rem;
    border: .01rem solid var(--line);
}
.campus-list .it b {
    flex-shrink: 0; font-size: .14rem; color: #fff; background: var(--pri);
    padding: .02rem .12rem; border-radius: .1rem; margin-top: .04rem;
}
.campus-list .it span { font-size: .15rem; color: var(--ink-2); }

/* ---------- 面包屑 / 内页头 ---------- */
.crumb { background: var(--cream-2); padding: .28rem 0; border-bottom: .01rem solid var(--line); }
.crumb .wal { display: flex; justify-content: space-between; align-items: center; }
.crumb .p1 { font-size: .3rem; color: var(--ink); font-weight: 700; }
.crumb .p2 { font-size: .14rem; color: var(--ink-3); }
.crumb .p2 a:hover { color: var(--pri); }

/* ---------- 文章正文 ---------- */
.article { background: #fff; border-radius: .1rem; padding: .6rem .7rem; box-shadow: var(--shadow); }
.article h2 {
    font-size: .28rem; color: var(--ink); margin: .5rem 0 .22rem;
    padding-left: .18rem; border-left: .05rem solid var(--pri); line-height: 1.4;
}
.article h2:first-child { margin-top: 0; }
.article h3 { font-size: .2rem; color: var(--pri-d); margin: .32rem 0 .14rem; }
.article p { font-size: .16rem; color: var(--ink-2); margin-bottom: .18rem; }
.article ul { margin: .12rem 0 .22rem; }
.article ul li {
    position: relative; padding-left: .3rem; margin-bottom: .12rem;
    font-size: .158rem; color: var(--ink-2);
}
.article ul li::before {
    content: ''; position: absolute; left: .06rem; top: .12rem;
    width: .08rem; height: .08rem; background: var(--gold); border-radius: 50%;
}
.article strong { color: var(--pri-d); }
.article .note {
    background: var(--cream); border-left: .04rem solid var(--gold);
    padding: .22rem .28rem; border-radius: .06rem; font-size: .15rem;
    color: var(--ink-2); margin: .22rem 0;
}

.poster { border-radius: .1rem; overflow: hidden; box-shadow: var(--shadow); background: #fff; }
.poster img { width: 100%; }
.poster.long { max-height: 9rem; overflow-y: auto; }

/* ---------- 页脚 ---------- */
.foot {
    background: linear-gradient(rgba(17, 16, 20, .95), rgba(17, 16, 20, .98)),
                url(../img/campus-aerial.jpg) center / cover no-repeat;
    color: rgba(255, 255, 255, .6); padding: .85rem 0 0; font-size: .145rem;
    border-top: .03rem solid var(--gold);
}
.foot .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: .5rem; }
.foot h4 {
    color: #fff; font-size: .18rem; margin-bottom: .22rem;
    padding-bottom: .12rem; border-bottom: .01rem solid rgba(255, 255, 255, .12);
}
.foot .logo2 { display: flex; align-items: center; gap: .14rem; margin-bottom: .2rem; }
.foot .logo2 .mark {
    width: .52rem; height: .52rem; border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, var(--pri-l), var(--pri-dd));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: .24rem; font-weight: 700; font-family: Georgia, serif;
}
.foot .logo2 b { color: #fff; font-size: .24rem; display: block; line-height: 1.3; }
.foot .logo2 i { font-style: normal; font-size: .1rem; letter-spacing: .03rem; color: var(--gold); }
.foot ul li { margin-bottom: .12rem; }
.foot ul li a:hover { color: var(--gold-l); }
.foot .telh { font-size: .28rem; color: var(--gold-l); font-weight: 700; margin-bottom: .06rem; }
.foot .copy {
    margin-top: .55rem; border-top: .01rem solid rgba(255, 255, 255, .1);
    padding: .24rem 0; font-size: .13rem; color: rgba(255, 255, 255, .42);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: .1rem;
}
.foot .copy a:hover { color: var(--gold-l); }

/* ---------- 浮动咨询 ---------- */
.float {
    position: fixed; right: .3rem; bottom: .6rem; z-index: 80;
    display: flex; flex-direction: column; gap: .12rem;
}
.float a {
    width: .96rem; height: .96rem; border-radius: .14rem; background: #fff;
    box-shadow: 0 .06rem .24rem rgba(46, 65, 74, .18);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: .13rem; color: var(--ink-2); gap: .02rem; transition: .28s;
}
.float a b { font-size: .22rem; color: var(--pri); line-height: 1; }
.float a:hover { background: var(--pri); color: #fff; transform: translateX(-.04rem); }
.float a:hover b { color: #fff; }
.float a.top b { font-size: .26rem; }

/* ---------- 表单分组（详细报名表） ---------- */
.form-sec { margin-bottom: .34rem; padding-bottom: .34rem; border-bottom: .01rem dashed var(--line); }
.form-sec:last-of-type { border-bottom: 0; padding-bottom: 0; }
.form-sec > h4 {
    font-size: .18rem; color: var(--pri-d); margin-bottom: .2rem;
    padding-left: .16rem; border-left: .04rem solid var(--pri); line-height: 1.4;
}
.form-sec > h4 small { font-size: .13rem; color: var(--ink-3); font-weight: 400; margin-left: .1rem; }
.form-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .18rem; }
.form-row .req { color: var(--pri); font-style: normal; }
.form-row .hint { font-size: .12rem; color: var(--ink-3); margin-top: .05rem; }

.radio-group { display: flex; flex-wrap: wrap; gap: .1rem; }
.radio-group label {
    display: inline-flex; align-items: center; gap: .06rem;
    padding: .09rem .2rem; border: .01rem solid var(--line); border-radius: .3rem;
    background: var(--cream-l); cursor: pointer; font-size: .15rem;
    font-weight: 400; color: var(--ink-2); margin: 0; transition: .22s;
}
.radio-group label:hover { border-color: var(--pri); color: var(--pri-d); }
.radio-group label.on { background: var(--cream); border-color: var(--pri); color: var(--pri-d); font-weight: 600; }
.radio-group input[type=radio] { width: auto; padding: 0; margin: 0 .02rem 0 0; accent-color: var(--pri); }

.check-line {
    display: flex; align-items: flex-start; gap: .08rem;
    font-size: .145rem; color: var(--ink-2); font-weight: 400; margin: 0; cursor: pointer;
}
.check-line input[type=checkbox] { width: auto; margin-top: .05rem; accent-color: var(--pri); flex-shrink: 0; }

.form-steps { display: flex; gap: .06rem; margin-bottom: .3rem; }
.form-steps .st {
    flex: 1; text-align: center; font-size: .13rem; color: var(--ink-3);
    padding: .1rem 0; background: var(--cream-l); border-radius: .06rem;
    border-bottom: .03rem solid var(--line); transition: .25s;
}
.form-steps .st.on { color: var(--pri-d); font-weight: 600; background: var(--cream); border-bottom-color: var(--pri); }

/* ---------- VR 全景 ---------- */
.vr-stage {
    position: relative; height: 6.4rem; background: #0d0d0d;
    border-radius: .12rem; overflow: hidden; cursor: grab;
    user-select: none; -webkit-user-select: none; touch-action: pan-y;
    box-shadow: 0 .12rem .4rem rgba(0, 0, 0, .3);
}
.vr-stage.grabbing { cursor: grabbing; }
.vr-strip { position: absolute; top: 0; left: 0; height: 100%; display: flex; will-change: transform; }
.vr-strip img { height: 100%; width: auto; flex-shrink: 0; pointer-events: none; display: block; }
.vr-stage.busy .vr-strip { transition: transform .5s cubic-bezier(.22, .68, .35, 1); }

.vr-hud {
    position: absolute; left: .3rem; top: .3rem; z-index: 5;
    color: #fff; font-size: .14rem; background: rgba(0, 0, 0, .42);
    padding: .09rem .2rem; border-radius: .3rem; backdrop-filter: blur(8px);
    display: flex; align-items: center; gap: .14rem; pointer-events: none;
}
.vr-hud .deg { font-family: Georgia, serif; color: var(--gold-l); min-width: .72rem; }
.vr-hud .nm { font-weight: 600; }
.vr-hud .nm em { font-style: normal; color: rgba(255, 255, 255, .6); font-weight: 400; margin-left: .08rem; font-size: .12rem; }

.vr-tools { position: absolute; right: .3rem; top: .3rem; z-index: 5; display: flex; gap: .1rem; }
.vr-tools button {
    background: rgba(0, 0, 0, .42); color: #fff; border: .01rem solid rgba(255, 255, 255, .25);
    border-radius: .3rem; padding: .09rem .18rem; font-size: .14rem;
    cursor: pointer; backdrop-filter: blur(8px); transition: .25s;
}
.vr-tools button:hover { background: var(--pri); border-color: var(--pri); }
.vr-tools button.on { background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 600; }

.vr-hot {
    position: absolute; width: .4rem; height: .4rem; margin: -.2rem 0 0 -.2rem;
    border-radius: 50%; background: rgba(255, 255, 255, .92);
    border: .03rem solid var(--gold); cursor: pointer; z-index: 4;
    display: flex; align-items: center; justify-content: center;
    font-size: .15rem; color: var(--pri-d); font-weight: 700;
    animation: vrpulse 2.2s infinite;
}
.vr-hot:hover { background: var(--gold); color: #fff; animation: none; }
@keyframes vrpulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
    70% { box-shadow: 0 0 0 .24rem rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.vr-hint {
    position: absolute; left: 50%; bottom: .3rem; transform: translateX(-50%);
    color: #fff; font-size: .14rem; background: rgba(0, 0, 0, .45);
    padding: .08rem .24rem; border-radius: .3rem; z-index: 5;
    backdrop-filter: blur(8px); white-space: nowrap; pointer-events: none;
    transition: opacity .5s;
}
.vr-hint.hide { opacity: 0; }

.vr-scenes { display: grid; grid-template-columns: repeat(6, 1fr); gap: .14rem; margin-top: .24rem; }
.vr-scenes .it {
    border-radius: .08rem; overflow: hidden; cursor: pointer; position: relative;
    border: .02rem solid transparent; transition: .26s; background: #222;
}
.vr-scenes .it:hover { transform: translateY(-.04rem); }
.vr-scenes .it.on { border-color: var(--pri); box-shadow: 0 .06rem .2rem rgba(178, 2, 2, .25); }
.vr-scenes .it img { width: 100%; height: .92rem; object-fit: cover; display: block; opacity: .82; transition: .26s; }
.vr-scenes .it.on img, .vr-scenes .it:hover img { opacity: 1; }
.vr-scenes .it span {
    position: absolute; left: 0; bottom: 0; width: 100%; text-align: center;
    color: #fff; font-size: .13rem; padding: .16rem 0 .06rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, .72));
}
.vr-scenes .it.on span { background: linear-gradient(transparent, rgba(140, 1, 1, .9)); font-weight: 600; }

.vr-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: .2rem; margin-top: .4rem; }
.vr-meta .it { text-align: center; padding: .24rem .1rem; background: #fff; border-radius: .1rem; border: .01rem solid var(--line); }
.vr-meta .it b { display: block; font-size: .3rem; color: var(--pri); font-family: Georgia, serif; line-height: 1.2; }
.vr-meta .it span { font-size: .14rem; color: var(--ink-3); }

.vr-note {
    background: #fff; border-radius: .1rem; padding: .34rem .4rem;
    border-left: .04rem solid var(--gold); box-shadow: var(--shadow); margin-top: .4rem;
}
.vr-note h3 { font-size: .2rem; color: var(--pri-d); margin-bottom: .14rem; }
.vr-note p { font-size: .155rem; color: var(--ink-2); margin-bottom: .1rem; }
.vr-note code {
    background: var(--cream); padding: .02rem .1rem; border-radius: .04rem;
    font-family: Consolas, Monaco, monospace; font-size: .14rem; color: var(--pri-d);
}

/* ---------- 入场动画 ---------- */
.reveal { opacity: 0; transform: translateY(.4rem); transition: opacity .7s, transform .7s; }
.reveal.in { opacity: 1; transform: none; }

/* ===========================================================
   移动端（<=800px）：切换为固定字号 + 流式容器
   =========================================================== */
@media (max-width: 800px) {
    html { font-size: min(13.33vw, 65px); }   /* ≈ 视口宽 / 7.5 */
    body { font-size: 15px; line-height: 1.8; overflow-x: hidden; }
    .wal { width: auto; padding: 0 14px; }

    /* 防溢出：栅格与表格容器允许收缩 */
    .grid > *, .split > *, .contact-grid > *, .foot .cols > * { min-width: 0; }
    .tbl-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .faq { max-width: 100%; }
    .modal { width: calc(100% - 28px); max-width: 420px; }
    .modal .m-hd { padding: 20px 20px 16px; }
    .modal .m-bd { padding: 22px 20px 16px; }
    .modal .m-ft { padding: 0 20px 18px; }
    .modal .m-bd h4 { font-size: 22px; }
    .modal .kv { grid-template-columns: 88px 1fr; font-size: 14px; }
    .form-row input, .form-row select, .form-row textarea { padding: 11px 14px; font-size: 15px; }
    .form-row textarea { height: 96px; }
    .rank { overflow-x: auto; }
    .tabs button { white-space: nowrap; }
    .steps .it::after { display: none; }
    .article h2 { margin: .34rem 0 .16rem; }

    .topbar { font-size: 12px; line-height: 34px; }
    .topbar .tl span:not(:first-child) { display: none; }

    .head .wal { height: 62px; }
    .logo .mark { width: 40px; height: 40px; font-size: 18px; }
    .logo .txt b { font-size: 19px; }
    .logo .txt i { font-size: 7px; letter-spacing: .02rem; }
    .head .tel { display: none; }

    .burger { display: block; }
    .nav {
        position: fixed; left: 0; top: 62px; width: 100%; height: calc(100% - 62px);
        background: #fff; flex-direction: column; align-items: stretch;
        padding: 10px 0 40px; overflow-y: auto;
        transform: translateX(-100%); transition: transform .32s; z-index: 70;
    }
    .nav.open { transform: none; }
    .nav > li > a { line-height: 50px; padding: 0 20px; font-size: 16px; border-bottom: 1px solid var(--line); }
    .nav > li > a::after { display: none; }
    .drop {
        position: static; transform: none; opacity: 1; visibility: visible;
        box-shadow: none; border: 0; min-width: 0; padding: 0;
        background: var(--cream-l); display: none;
    }
    .nav > li.open .drop { display: block; }
    .drop a { padding: 10px 34px; font-size: 14px; }

    .banner .slides { height: 440px; }
    .banner .cap h1 { font-size: 30px; }
    .banner .cap p { font-size: 14px; max-width: none; }
    .banner .cap .tag { font-size: 11px; padding: .05rem .18rem; }
    .banner .arrow { display: none; }
    .banner .cap .btns { flex-wrap: wrap; }
    .btn { padding: .14rem .34rem; font-size: 15px; }

    .stats { padding: .3rem 0; }
    .stats .wal { grid-template-columns: repeat(2, 1fr); gap: .3rem 0; }
    .stats .it:nth-child(odd)::before { display: none; }
    .stats .n { font-size: 30px; }
    .stats .n small { font-size: 15px; }
    .stats .l { font-size: 12px; }

    .sec { padding: .5rem 0; }
    .sec-hd { margin-bottom: .34rem; }
    .sec-hd h2 { font-size: 24px; }
    .sec-hd .en { font-size: 11px; }
    .sec-hd .sub { font-size: 13px; margin-top: .1rem; }

    .grid { gap: .16rem; }
    .g2, .g3, .g4 { grid-template-columns: 1fr; }
    .card { padding: .28rem .26rem; }
    .card h3 { font-size: 18px; }
    .card p { font-size: 14px; }
    .card .ico { width: 46px; height: 46px; font-size: 22px; margin-bottom: .16rem; }
    .card .num { font-size: 46px; }

    .split { grid-template-columns: 1fr; gap: .3rem; }
    .split h2 { font-size: 22px; }
    .split p, .split ul.dot li { font-size: 14px; }

    .sync { grid-template-columns: repeat(2, 1fr); }
    .sync .it { padding: .2rem .12rem; }
    .sync .it b { font-size: 24px; }
    .sync .it h4 { font-size: 15px; }
    .sync .it p { font-size: 11px; }

    .tbl-wrap { overflow-x: auto; }
    .tbl { font-size: 13px; min-width: 560px; }
    .tbl th, .tbl td { padding: .12rem .14rem; }
    .tbl thead th { font-size: 14px; }

    .teacher { padding: .26rem .22rem; }
    .teacher h3 { font-size: 18px; }
    .teacher p { font-size: 13px; }

    .plan .hd h3 { font-size: 20px; }
    .plan .price { font-size: 30px; }

    .rank table { font-size: 13px; }
    .rank th, .rank td { padding: .1rem .12rem; }
    .tabs { flex-wrap: wrap; }
    .tabs button { padding: .08rem .24rem; font-size: 14px; }

    .faq summary { padding: .18rem .22rem .18rem .66rem; font-size: 15px; }
    .faq summary::before { left: .2rem; width: .28rem; height: .28rem; font-size: 14px; }
    .faq summary::after { right: .2rem; font-size: 22px; }
    .faq .ans { padding: .02rem .22rem .22rem .66rem; font-size: 14px; }

    .steps { grid-template-columns: repeat(2, 1fr); gap: .3rem .1rem; }
    .steps .it .n { width: 56px; height: 56px; font-size: 24px; margin-bottom: .14rem; }
    .steps .it h3 { font-size: 16px; }
    .steps .it p { font-size: 13px; }
    .steps .it::after { display: none; }

    .contact-grid { grid-template-columns: 1fr; gap: .3rem; }
    .form-box { padding: .3rem .26rem; }
    .form-2 { grid-template-columns: 1fr; gap: 0; }
    .info-box .it .tel { font-size: 22px; }

    .crumb .wal { flex-direction: column; align-items: flex-start; gap: 4px; }
    .crumb .p1 { font-size: 22px; }
    .crumb .p2 { font-size: 12px; }

    .article { padding: .3rem .24rem; }
    .article h2 { font-size: 20px; }
    .article h3 { font-size: 17px; }
    .article p, .article ul li { font-size: 14px; }
    .article .note { padding: .16rem .18rem; font-size: 13px; }

    .foot { padding: .5rem 0 0; font-size: 13px; }
    .foot .cols { grid-template-columns: 1fr; gap: .3rem; }
    .foot .logo2 b { font-size: 19px; }
    .foot .telh { font-size: 22px; }
    .foot .copy { margin-top: .34rem; flex-direction: column; font-size: 11px; }

    .float { right: 12px; bottom: 20px; gap: 8px; }
    .float a { width: 68px; height: 68px; font-size: 11px; border-radius: 10px; }
    .float a b { font-size: 17px; }

    /* 详细表单 */
    .form-sec { margin-bottom: 22px; padding-bottom: 22px; }
    .form-sec > h4 { font-size: 16px; margin-bottom: 14px; }
    .form-sec > h4 small { display: block; margin: 3px 0 0; font-size: 12px; }
    .form-3 { grid-template-columns: 1fr; gap: 0; }
    .radio-group { gap: 8px; }
    .radio-group label { padding: .08rem .16rem; font-size: 14px; }
    .form-steps { flex-wrap: wrap; }
    .form-steps .st { flex: 1 1 45%; font-size: 12px; }

    /* VR 全景 */
    .vr-stage { height: 300px; border-radius: 10px; }
    .vr-hud { left: 10px; top: 10px; font-size: 12px; padding: 6px 12px; gap: 8px; }
    .vr-hud .deg { min-width: 48px; }
    .vr-hud .nm em { display: none; }
    .vr-tools { right: 10px; top: 10px; gap: 6px; }
    .vr-tools button { font-size: 12px; padding: 6px 12px; }
    .vr-hot { width: 34px; height: 34px; margin: -17px 0 0 -17px; font-size: 13px; border-width: 2px; }
    .vr-hint { font-size: 12px; padding: 6px 16px; bottom: 14px; }
    .vr-scenes { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .vr-scenes .it img { height: 62px; }
    .vr-scenes .it span { font-size: 11px; padding: .1rem 0 .03rem; }
    .vr-meta { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .vr-meta .it b { font-size: 22px; }
    .vr-note { padding: 20px 18px; }
}

@media (max-width: 1280px) and (min-width: 801px) {
    .head .apply { display: none; }
}

@media (max-width: 1100px) and (min-width: 801px) {
    .wal { width: 94%; }
    .g4 { grid-template-columns: repeat(2, 1fr); }
    .sync { grid-template-columns: repeat(5, 1fr); }
    .foot .cols { grid-template-columns: repeat(2, 1fr); gap: .4rem; }
}

/* 中等屏：导航项较多，收起电话与副标题 */
@media (min-width: 801px) and (max-width: 1500px) {
    html { font-size: 6.667vw; }             /* ≈ 视口宽 / 15 */
}

@media (max-width: 1600px) and (min-width: 801px) {
    .head .tel { display: none; }
}

@media (max-width: 1420px) and (min-width: 1101px) {
    .nav > li > a { padding: 0 .14rem; font-size: .155rem; }
    .logo .txt i { display: none; }
}


/* ---------- 墨金学府风 · 收尾要素 ---------- */
/* 数字与英文使用衬线体，提升质感 */
.stats .n, .card .num, .sync .it b, .plan .price, .steps .it .n,
.sec-hd .en, .logo .txt i, .foot .logo2 i, .rank .sc, .modal .m-hd p,
.vr-meta .it b, .vr-hud .deg {
    font-family: var(--serif);
    font-variant-numeric: lining-nums tabular-nums;
}

/* 墨黑次要按钮 */
.btn.d { background: var(--dark); color: #fff; }
.btn.d:hover { background: var(--dark-3); transform: translateY(-.02rem); }

/* 金色细描边按钮 */
.btn.g {
    background: transparent; color: var(--pri-d);
    border: .015rem solid var(--gold); border-radius: .4rem;
}
.btn.g:hover { background: var(--gold); color: #fff; }

/* 顶部信息条：墨黑 + 金线 */
.topbar {
    background: var(--dark); color: rgba(255, 255, 255, .66);
    font-size: .13rem; line-height: .42rem;
    border-bottom: .01rem solid rgba(201, 160, 99, .2);
}

/* 卡片圆角收紧，更利落 */
.card, .teacher, .plan, .rank, .form-box, .article, .poster, .info-box .it,
.tbl-wrap, .vr-stage, .vr-note { border-radius: .07rem; }
.plan .hd { border-radius: 0; }

/* 卡片悬停：细金边 + 轻抬升 */
.card:hover, .teacher:hover, .plan:hover { border-color: var(--gold); }

/* 导航当前项：金色下划线 */
.nav > li.on > a::after { background: var(--gold); }
.nav > li > a::after { background: var(--gold); }

/* 头部报名按钮（置于电话左侧） */
.head .apply {
    margin-left: .26rem; padding: .12rem .32rem; border-radius: .4rem;
    background: linear-gradient(135deg, var(--pri-l), var(--pri-d));
    color: #fff; font-size: .15rem; font-weight: 600; flex-shrink: 0;
    box-shadow: 0 .05rem .18rem rgba(178, 2, 2, .3); transition: .28s;
    white-space: nowrap;
}
.head .apply:hover { transform: translateY(-.02rem); box-shadow: 0 .09rem .24rem rgba(178, 2, 2, .42); }
.head .apply i { font-style: normal; opacity: .72; font-size: .11rem; margin-left: .06rem; letter-spacing: .04rem; }

/* 首页公告弹窗 */
.modal-mask {
    position: fixed; inset: 0; background: rgba(16, 15, 19, .58); z-index: 200;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: .35s; backdrop-filter: blur(4px);
}
.modal-mask.show { opacity: 1; visibility: visible; }
.modal {
    width: 6.8rem; background: #fff; border-radius: .08rem; overflow: hidden;
    box-shadow: 0 .34rem .9rem rgba(0, 0, 0, .38);
    transform: translateY(.36rem) scale(.97); transition: .38s cubic-bezier(.22,.68,.35,1);
}
.modal-mask.show .modal { transform: none; }
.modal .m-hd {
    background: var(--dark); color: #fff; padding: .34rem .44rem .3rem;
    position: relative; border-bottom: .03rem solid var(--gold);
    background-image: radial-gradient(circle at 88% 10%, rgba(178, 2, 2, .42), transparent 56%);
}
.modal .m-hd h3 { font-size: .28rem; font-weight: 700; letter-spacing: -.002rem; }
.modal .m-hd p { font-size: .12rem; opacity: .62; margin-top: .06rem; letter-spacing: .16rem; text-transform: uppercase; }
.modal .m-bd { padding: .4rem .44rem .3rem; }
.modal .m-bd .bd-tag {
    display: inline-block; font-size: .13rem; color: var(--pri-d);
    background: var(--cream); padding: .03rem .16rem; border-radius: .2rem; margin-bottom: .18rem;
}
.modal .m-bd h4 { font-size: .3rem; color: var(--ink); line-height: 1.4; margin-bottom: .14rem; }
.modal .m-bd p { font-size: .155rem; color: var(--ink-2); }
.modal .kv { display: grid; grid-template-columns: 1.5rem 1fr; gap: .12rem .2rem; margin-top: .24rem; font-size: .155rem; }
.modal .kv dt { color: var(--ink-3); }
.modal .kv dt::before { content: ''; display: inline-block; width: .05rem; height: .05rem; background: var(--gold); border-radius: 50%; margin-right: .1rem; vertical-align: middle; }
.modal .kv dd { color: var(--ink); font-weight: 600; }
.modal .m-ft { display: flex; gap: .14rem; padding: 0 .44rem .3rem; }
.modal .m-ft .btn { flex: 1; text-align: center; }
.modal .m-close {
    position: absolute; right: .26rem; top: .26rem; width: .36rem; height: .36rem;
    border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff;
    border: 0; cursor: pointer; font-size: .2rem; line-height: 1; transition: .25s;
}
.modal .m-close:hover { background: rgba(255, 255, 255, .3); }
.modal .m-no { text-align: center; padding: 0 0 .3rem; font-size: .13rem; color: var(--ink-3); }
.modal .m-no label { display: inline-flex; align-items: center; gap: .06rem; cursor: pointer; font-weight: 400; margin: 0; }
.modal .m-no input { width: auto; margin: 0; accent-color: var(--pri); }