@charset "utf-8";
/* ==========================================================================
   云南旅游职业学院 · 办学70周年专题
   设计稿：1920 × 9910（内容区 1200 居中）
   实现思路：9 张整版底图（1920 宽）垂直堆叠，相邻底图重叠 1px；
             栏目标题、装饰纹样、时间轴细线、卡片底板、页脚波浪等
             均已烘焙在底图内，前端只叠加动态内容。
   ========================================================================== */

/* ---------------------------------- 基础 ---------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  min-width:1200px;
  font:16px/1.6 "Microsoft YaHei","PingFang SC","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
  color:#333;background:#fff;
  -webkit-font-smoothing:antialiased;
}
ul,ol{list-style:none}
img{display:block;border:0;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;outline:0}
h1,h2,h3,h4{font-size:100%;font-weight:400}
em,i{font-style:normal}

:root{
  --red:#c8261c;          /* 栏目主红 */
  --red2:#cc2b1f;         /* 按钮描边红 */
  --gold:#c8963c;
  --txt:#333;
  --txt2:#4a4a4a;
  --txt3:#666;
  --txt4:#bbb;
}

/* 无障碍隐藏（内容已烘焙进底图，仅供 SEO / 读屏） */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ell2{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}

/* ------------------------------ 区段与内容区 ------------------------------ */
.page{position:relative;width:100%;min-width:1200px;overflow:hidden}

.sec{
  position:relative;
  background-repeat:no-repeat;
  background-position:center top;
  background-color:#fff;
}
/* 设计稿中相邻底图重叠 1px，消除接缝白线 */
.page > .sec{margin-top:-1px}

.wrap{position:relative;width:1200px;height:100%;margin:0 auto}

/* Banner */
.banner{overflow:hidden}
.banner img{width:100%;height:auto;}
.mobShow{display:none}

@media (max-width: 768px) {
   .mobShow{
   display:block;
  }
.pcShow{
display:none;
}
}

/* 各区段底图与高度（严格等于设计稿切片原始尺寸） */
.sec-celebrate{height:872px; background-image:url(../images/pic02.jpg)}
.sec-news     {height:856px; background-image:url(../images/pic03.jpg)}
.sec-history  {height:1549px;background-image:url(../images/pic05.jpg)}
.sec-deep     {height:963px; background-image:url(../images/pic06.jpg)}
.sec-vi       {height:905px; background-image:url(../images/pic09.jpg)}
.sec-photo    {height:1189px;background-image:url(../images/pic12.jpg)}
.sec-wish     {height:1306px;background-image:url(../images/pic13.jpg)}
.sec-alumni   {height:1035px;background-image:url(../images/pic17.jpg)}

/* 通用「更多 ››」 */
.more{position:absolute;font-size:15px;line-height:15px;color:#8a8a8a;transition:color .25s}
.more b{font-weight:400;letter-spacing:-1px}
.more:hover{color:var(--red)}
.more-light{color:rgba(255,255,255,.9)}
.more-light:hover{color:#fff}

/* ======================= SEC1 庆祝活动 / 通知公告 =======================
   section top 999 · 白卡（已烘焙）abs 360..1560 / 1170..1800
   ====================================================================== */
.cel-card{position:absolute;left:0;top:171px;width:1200px;height:630px}

/* ---- 左栏：abs 410..1129（w719） ---- */
.cel-main{position:absolute;left:50px;top:0;width:719px;height:100%}
.cel-main .mod-title{position:absolute;left:0;top:38px;font-size:28px;line-height:36px;color:var(--red)}
.cel-main .more{left:656px;top:51px}

/* 焦点轮播：abs 410..1129 / 1282..1482 */
.focus{position:absolute;left:0;top:112px;width:719px;height:200px}
.focus-track{position:relative;width:100%;height:100%}
.focus-item{
  position:absolute;left:0;top:0;width:100%;height:100%;
  opacity:0;visibility:hidden;transition:opacity .5s;
}
.focus-item.is-active{opacity:1;visibility:visible}
.focus-pic{position:absolute;left:0;top:0;width:320px;height:200px;overflow:hidden}
.focus-pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.focus-item:hover .focus-pic img{transform:scale(1.06)}

.focus-txt{position:absolute;left:341px;top:0;width:378px;height:200px}
.focus-txt h3{
  position:absolute;left:0;top:9px;width:378px;
  font-size:20px;line-height:28px;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.focus-item:hover .focus-txt h3{color:var(--red)}
.focus-txt .line{position:absolute;left:-1px;top:44px;width:46px;height:4px;background:var(--red)}
.focus-txt p{
  position:absolute;left:0;top:57px;width:378px;
  font-size:16px;line-height:28px;color:var(--txt3);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.focus-txt time{position:absolute;left:0;top:139px;font-size:16px;line-height:16px;color:var(--txt4)}

.focus-dots{position:absolute;left:654px;top:176px;font-size:0}
.focus-dots i{
  display:inline-block;width:12px;height:12px;margin-right:8px;border-radius:50%;
  background:#d8d8d8;cursor:pointer;vertical-align:top;transition:background .25s;
}
.focus-dots i:last-child{margin-right:0}
.focus-dots i.is-active{background:var(--red)}

/* 双列列表：col1 abs 410、col2 abs 789，宽 340，间距 39，行距 144 */
.cel-list{margin-top:100px;width:719px}
.cel-list li{float:left;width:340px;margin-right:39px}
.cel-list li:nth-child(2n){margin-right:0}
.cel-list p{
  font-size:16px;line-height:28px;color:var(--txt3);margin-top:20px
}

/* ---- 通知公告：pic01.png abs (1153,1210) 367×550 ---- */
.notice{
  position:absolute;left:793px;top:40px;width:367px;height:550px;
  background:url(../images/pic01.png) no-repeat 0 0;
}
.notice .more{left:296px;top:29px}
.notice ul{position:absolute;left:18px;top:72px;width:331px}
.notice li{position:relative;color:#fff;margin:10px 0;padding-bottom:10px;border-bottom:1px dashed rgba(255,255,255,.35);}

.notice li.no-line:after{display:none}
.notice h4{
  position:absolute;left:0;top:0;width:331px;
  font-size:16px;line-height:28px;color:#fff;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.notice li:hover h4{color:#ffe9b0}
.notice time{position:absolute;left:0;top:65px;font-size:16px;line-height:16px;color:rgba(255,255,255,.7)}

/* ============================ SEC2 周年动态 ============================
   section top 1870
   ==================================================================== */
.news-inner{position:absolute;left:0;top:0;width:1200px;height:100%}

/* 左侧大图轮播：abs (360,2178) 570×445 */
.news-slider{position:absolute;left:0;top:308px;width:570px;height:445px;overflow:hidden}
.ns-track{position:relative;width:100%;height:100%}
.ns-item{
  position:absolute;left:0;top:0;width:100%;height:100%;
  opacity:0;visibility:hidden;transition:opacity .5s;
}
.ns-item.is-active{opacity:1;visibility:visible}
.ns-item img{width:100%;height:100%;object-fit:cover}
.ns-cap{
  position:absolute;left:0;bottom:0;width:100%;height:55px;padding:0 130px 0 28px;
  font-size:18px;line-height:55px;color:#fff;
  background:rgba(0,0,0,.55);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ns-dots{position:absolute;right:25px;bottom:18px;font-size:0;z-index:3}
.ns-dots i{
  display:inline-block;width:11px;height:11px;margin-left:11px;border-radius:50%;
  background:rgba(255,255,255,.55);cursor:pointer;vertical-align:top;transition:background .25s;
}
.ns-dots i.is-active{background:#fff}

/* 右侧列表：abs 970..1560 */
.news-list{position:absolute;left:610px;top:305px;width:590px}
.news-list li{position:relative;height:112px}

/* 日期：01 / 八月 */
.news-list .date{position:absolute;left:0;top:0;width:72px;height:72px}
.news-list .date em{
  position:absolute;left:7px;top:25px;
  font-size:18px;line-height:16px;font-weight:700;color:var(--red);
}

.news-list .date i{
  position:absolute;left:24px;top:43px;
  font-size:14px;line-height:14px;color:var(--red);
}
.news-list .txt{position:absolute;left:72px;top:0;width:518px}
.news-list h4{
  font-size:20px;line-height:28px;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.news-list li:hover h4{color:var(--red)}
.news-list p{
  margin-top:12px;font-size:16px;line-height:24px;color:var(--txt3);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}

/* 更多按钮：abs (1222,2619) 96×24 —— 相对 .news-list（abs left 970） */
.news-more{position:absolute;left:252px;top:444px}
.btn-more{
  display:block;width:96px;height:24px;
  border:1px solid var(--red2);border-radius:12px;
  font-size:13px;line-height:22px;letter-spacing:2px;color:var(--red2);
  text-align:center;transition:.25s;
}
.btn-more b{font-weight:400;letter-spacing:-1px}
.btn-more:hover{background:var(--red2);color:#fff}

/* =================== SEC3 回眸旅职（大事记时间轴） ===================
   section top 2725 · 悬挂细线、线端小圆点、红山均已烘焙
   ================================================================== */
.timeline{position:absolute;left:0;top:0;width:1200px;height:100%}

/* 金色台阶圆点 pic04.png 107×107
   位移走 top（--lift），因为 transform 已被 .reveal 入场动画占用 */
.tl-dot{
  position:absolute;
  left:calc(var(--x) - 360px);
  top:calc(var(--y) - 2725px + var(--lift,0px));   /* ← 今日：+ var(--lift) */
  width:107px;height:107px;border-radius:50%;      /* ← 今日：border-radius */
  background:url(../images/pic04.png) no-repeat 0 0;
  cursor:pointer;                                   /* ← 今日：手形光标 */
}
/* 圆点内的单独配图：铺满圆点并同样切圆，
   这样透明的四角不会抢到 hover（命中区与看得见的圆一致） */
.tl-dot img{display:block;width:100%;height:100%;border-radius:50%}   /* ← 今日：整条新增 */

/* 节点文本块：--tx / --ty 为设计稿绝对坐标 */
.tl-node{
  position:absolute;
  left:calc(var(--tx) - 360px);
  top:calc(var(--ty) - 2730px + var(--lift,0px));   /* ← 今日：+ var(--lift) */
  width:var(--tw);
  cursor:pointer;                                   /* ← 今日：原为 cursor:default */
}

/* ← 今日：整块新增
   上移的过渡：文件后面 .reveal 的 transition 是简写、特异性又与单类同级，
   会把这里的 top 整条冲掉，所以加 .timeline 前缀压过它，
   并把入场用的 opacity/transform 一并列出，免得反过来毁掉 .reveal */
.timeline .tl-dot,.timeline .tl-node{
  transition:top .5s cubic-bezier(.25,.1,.25,1),
             opacity .7s ease,
             transform .7s cubic-bezier(.2,.7,.2,1);
}

/* ← 今日：整块新增
   圆点与其悬线所指的文字成对上移（data-k 相同即一组，由 JS 加类）；
   只取 5px：1965 那组文字与底图线端小圆点仅 7px 净空 */
.tl-dot.is-lift,.tl-node.is-lift{--lift:-5px}

/* ← 今日：以下底纹全部新增
   hover 时浮出的底纹：上方节点用 pic21（左实右透、左上圆角），
   下方节点用 pic22（右实左透、右下圆角）；两张都是纯横向 alpha 渐变，
   所以纵向拉伸只影响那一个圆角，渐变不会变形。
   --dx / --dy 由 JS 从配对的圆点上取来，用来把底纹对到圆点上 */
.tl-node:before{
  content:"";position:absolute;
  background-repeat:no-repeat;background-size:100% 100%;
  opacity:0;transition:opacity .5s ease;
  pointer-events:none;
}
/* 底纹向下长到圆点里 23px（取自设计稿 1998 那组） */
.tl-node.up:before{
  left:-35px;width:229px;
  top:-30px;height:calc(var(--dy) - var(--ty) + 53px);
  background-image:url(../images/pic21.png);
}
/* 底纹上端接在圆点下沿（取自设计稿 1965 那组）；
   右缘靠文字右侧 3px，但文字比圆点窄时（如 2026）改靠圆点右侧，
   否则圆点会露在底纹外面 */
.tl-node.down:before{
  right:min(-3px,calc(var(--tx) + var(--tw) - var(--dx) - 110px));width:247px;
  top:calc(var(--dy) + 107px - var(--ty));bottom:-24px;
  background-image:url(../images/pic22.png);
}
.tl-node.is-lift:before{opacity:1}

@media (prefers-reduced-motion:reduce){
  .timeline .tl-dot,.timeline .tl-node,.tl-node:before{transition:none}   /* ← 今日：整条新增 */
}
/* 文字压在底纹之上：:before 是定位元素，默认会盖住普通流里的 b/p */
.tl-node b{
  position:relative;z-index:1;                      /* ← 今日：新增两句 */
  display:block;
  font-size:30px;line-height:34px;font-weight:700;color:var(--red);
  white-space:nowrap;
}
.tl-node p{
  position:relative;z-index:1;                      /* ← 今日：新增两句 */
  margin-top:2px;
  font-size:16px;line-height:22px;color:var(--txt2);
}

/* ============================ SEC4 七秩深耕 ============================
   section top 4273 · 卡片 abs left 360/770/1180，w380，top 4662
   ==================================================================== */
.deep-list{position:absolute;left:0;top:389px;width:1200px;font-size:0}
.deep-list li{float:left;width:570px;margin-right:30px}
.deep-list li:last-child{margin-right:0}
.deep-list a{display:block;background:#fff;box-shadow:0 4px 12px rgba(140,90,50,.06);transition:transform .3s,box-shadow .3s}
.deep-list a:hover{transform:translateY(-6px);box-shadow:0 12px 24px rgba(140,90,50,.14)}
.deep-list .pic{width:570px;overflow:hidden}
.deep-list .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.deep-list a:hover .pic img{transform:scale(1.06)}
.deep-list .bd{height:90px;padding:17px 20px}
.deep-list h4{
  font-size:16px;line-height:28px;color:var(--txt);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.deep-list a:hover h4{color:var(--red)}

/* ============================ SEC5 文创标识 ============================
   section top 5091 · 白卡（已烘焙）abs 490..1430 / 5401..5896

   横向手风琴（效果参考 vid.mov）：竖标签顺序固定，激活标签紧贴白卡左缘，
   白卡在两个档位间做「幕布式」展开／收起，卡内内容位置不动、只被幕布裁切。
   横向尺寸自洽：100(标签) + 30 + 940(白卡) + 30 + 100(标签) = 1200
     · 激活 0：[标签0 0..100] [白卡 130..1070] [标签1 1100..1200]  ← 与设计稿烘焙位置一致
     · 激活 1：[标签0 0..100] [标签1 100..200] [白卡 230..1170]
   ==================================================================== */
.vi-box{
  position:absolute;left:0;top:0;width:1200px;height:100%;
  --vi-dur:.62s;--vi-ease:cubic-bezier(.62,.02,.34,1);
}

/* 白色底板：盖掉烘焙在 pic09.jpg 里固定位置的白卡与其投影，
   使白卡能随手风琴移动。该区域底图为纯白，故 #fff 即可无痕覆盖。 */
.vi-mask{position:absolute;left:100px;top:286px;width:1000px;height:562px;background:#fff;z-index:1}

/* 左右竖标签：pic07=红头、pic08=金头，素材本身已区分主次，故不加任何滤镜
   （加滤镜会使默认态偏离设计稿）。激活态由「紧贴白卡的位置」表达。 */
.vi-tab{
  position:absolute;top:314px;width:100px;height:342px;padding:0;line-height:0;z-index:3;
  transition:left var(--vi-dur) var(--vi-ease),opacity .3s;
}
.vi-tab img{width:100px;height:auto}
.vi-tab[data-tab="0"]{left:0}
.vi-tab[data-tab="1"]{height:329px}
.vi-tab[aria-expanded="false"]:hover{opacity:.86}

/* 内容面板：它的宽度就是「幕布」，白卡在其中被裁切（上下预留给投影） */
.vi-pane{
  position:absolute;top:286px;height:562px;overflow:hidden;z-index:2;
  transition:left var(--vi-dur) var(--vi-ease),width var(--vi-dur) var(--vi-ease);
}
/* 白卡：rel 314..808（设计稿量测值），投影偏下、侧边极淡 */
.vi-card{
  position:absolute;top:28px;width:940px;height:494px;
  background:#fff;box-shadow:0 9px 20px rgba(158,106,24,.21);
}

/* pane0 左缘永远固定于 100，pane1 右缘永远固定于 1200；
   卡片分别锚定到这两个不动的边，因此内容在整个动画过程中保持静止。 */
.vi-pane[data-pane="0"]{left:100px}
.vi-pane[data-pane="0"] .vi-card{left:30px}
.vi-pane[data-pane="1"] .vi-card{right:30px}

.vi-box[data-active="0"] .vi-tab[data-tab="1"]{left:1100px}
.vi-box[data-active="0"] .vi-pane[data-pane="0"]{width:1000px}
.vi-box[data-active="0"] .vi-pane[data-pane="1"]{left:1200px;width:0}

.vi-box[data-active="1"] .vi-tab[data-tab="1"]{left:100px}
.vi-box[data-active="1"] .vi-pane[data-pane="0"]{width:0}
.vi-box[data-active="1"] .vi-pane[data-pane="1"]{left:200px;width:1000px}

@media (prefers-reduced-motion:reduce){
  .vi-tab,.vi-pane{transition:none}
}

/* LOGO：abs (824,5433) 278×292 → rel card (334,28) */
.vi-logo{position:absolute;left:334px;top:28px;width:278px;height:292px}
.vi-logo img{width:100%;height:100%;object-fit:contain}

/* 说明文字：abs box (584,5754.9) w752 */
.vi-desc{
  position:absolute;left:94px;top:350px;width:752px;
  font-size:16px;line-height:28px;color:var(--txt);
  text-indent:2em;text-align:justify;
}

/* ============================ SEC6 光影旅职 ============================
   section top 5995
   ==================================================================== */
.coverflow{position:absolute;left:0;top:292px;width:1200px;height:538px}
.cf-stage{position:relative;width:100%;height:100%}
.cf-item{
  position:absolute;overflow:hidden;
  transition:left .45s,top .45s,width .45s,height .45s,opacity .45s;
}
.cf-item img{width:100%;height:100%;object-fit:cover}
/* 两侧 abs 6347..6767（h420，w734） */
.cf-item.is-prev{left:0;top:60px;width:734px;height:420px;z-index:1;opacity:1}
.cf-item.is-next{left:466px;top:60px;width:734px;height:420px;z-index:1;opacity:1}
/* 中间 abs (490,6287) 940×538 */
.cf-item.is-active{left:130px;top:0;width:940px;height:538px;z-index:3;opacity:1}
.cf-item.is-hide{left:466px;top:60px;width:734px;height:420px;z-index:0;opacity:0}

.cf-cap{
  position:absolute;left:130px;bottom:0;width:940px;height:40px;padding:0 24px;
  font-size:14px;line-height:40px;color:#fff;text-align:center;
  background:rgba(0,0,0,.5);z-index:4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* 箭头 pic11/pic10：abs y 6519（46×77） */
.cf-arrow{position:absolute;top:232px;width:46px;height:77px;padding:0;z-index:6;line-height:0;opacity:.9;transition:opacity .25s}
.cf-arrow:hover{opacity:1}
.cf-prev{left:133px}
.cf-next{left:1021px}

/* 缩略图行：4×285，abs y 6905，gap 20 */
.thumbs{position:absolute;left:0;top:910px;width:1200px;height:190px}
.th-view{position:relative;width:1200px;height:190px;overflow:hidden}
.th-track{position:relative;width:100%;font-size:0;transition:transform .45s}
.th-track li{float:left;width:285px;height:190px;margin-right:20px;overflow:hidden}
.th-track li:last-child{margin-right:0}
.th-track img{width:100%;height:100%;object-fit:cover;transition:transform .6s,opacity .3s;opacity:.92}
.th-track li:hover img{transform:scale(1.06);opacity:1}

.th-arrow{position:absolute;top:57px;width:46px;height:77px;padding:0;line-height:0;opacity:.85;transition:opacity .25s}
.th-arrow:hover{opacity:1}
.th-prev{left:-52px}
.th-next{right:-52px}

/* ============================ SEC7 校友祝福 ============================
   section top 7183
   ==================================================================== */
/* 视频：abs (360,7508) 1200×676 */
.player{position:absolute;left:0;top:325px;width:1200px;height:676px;background:#000;overflow:hidden}
.pl-stage{position:relative;width:100%;height:100%}
.pl-poster{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.player.is-swapping .pl-poster{opacity:0}
/* 接入真实视频时由 JS 注入，覆盖在 poster 之上；此时仿真控件让位给原生控件 */
.pl-video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:2}
.player.has-video .pl-play,.player.has-video .pl-bar{display:none}

.pl-play{
  position:absolute;left:555px;top:293px;width:90px;height:90px;padding:0;
  border-radius:50%;background:rgba(0,0,0,.45);border:2px solid rgba(255,255,255,.85);
  transition:.3s;z-index:4;
}
.pl-play:before{
  content:"";position:absolute;left:34px;top:28px;
  border-style:solid;border-width:16px 0 16px 26px;
  border-color:transparent transparent transparent #fff;
}
.pl-play:hover{background:rgba(200,38,28,.8);transform:scale(1.06)}
.player.is-playing .pl-play{opacity:0;visibility:hidden}
.player.is-playing .pl-icon-play{
  background:
    linear-gradient(#fff,#fff) 0 0/4px 12px no-repeat,
    linear-gradient(#fff,#fff) 100% 0/4px 12px no-repeat;
}
.player.is-playing .pl-icon-play:before{display:none}

/* 控制条 abs 8115..8184（rel player 607..676，h69） */
.pl-bar{
  position:absolute;left:0;bottom:0;width:100%;height:69px;z-index:5;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.35) 20%,rgba(0,0,0,.75) 55%,rgba(0,0,0,.92) 100%);
}
.pl-ctrl{position:absolute;left:0;top:0;width:100%;height:44px}
.pl-btn{position:absolute;top:14px;cursor:pointer;opacity:.92;transition:opacity .2s}
.pl-btn:hover{opacity:1}
/* ▶ abs (377,8131) 12×12 */
.pl-icon-play{left:17px;top:15px;width:12px;height:12px}
.pl-icon-play:before{
  content:"";position:absolute;left:1px;top:0;
  border-style:solid;border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent #fff;
}
/* 时间 abs (406,8130) w73 */
.pl-time{position:absolute;left:46px;top:13px;font-size:14px;line-height:18px;color:#fff;white-space:nowrap}
/* 右侧图标 abs 1431 / 1482 / 1534 */
.pl-icon-volume{
  left:1071px;width:16px;height:13px;
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='//www.w3.org/2000/svg' viewBox='0 0 16 13'%3E%3Cpath fill='%23fff' d='M0 4h3l4-4v13L3 9H0z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.6' d='M10.2 3.1a5.6 5.6 0 0 1 0 6.8'/%3E%3C/svg%3E") no-repeat center/contain;
}
.pl-icon-full{
  left:1122px;width:12px;height:12px;
  background:
    linear-gradient(#fff,#fff) 0 0/5px 2px no-repeat,
    linear-gradient(#fff,#fff) 0 0/2px 5px no-repeat,
    linear-gradient(#fff,#fff) 100% 0/5px 2px no-repeat,
    linear-gradient(#fff,#fff) 100% 0/2px 5px no-repeat,
    linear-gradient(#fff,#fff) 0 100%/5px 2px no-repeat,
    linear-gradient(#fff,#fff) 0 100%/2px 5px no-repeat,
    linear-gradient(#fff,#fff) 100% 100%/5px 2px no-repeat,
    linear-gradient(#fff,#fff) 100% 100%/2px 5px no-repeat;
}
.pl-icon-more{left:1174px;width:3px;height:13px}
.pl-icon-more:before,.pl-icon-more:after{
  content:"";position:absolute;left:0;width:3px;height:3px;border-radius:50%;background:#fff;
}
.pl-icon-more:before{top:0;box-shadow:0 5px 0 #fff}
.pl-icon-more:after{top:10px}

/* 进度条 abs 373..1548 @ y8159（相对 .pl-bar，abs top 8115）
   设计稿为三层：轨道深灰 / 已缓存浅灰 / 已播放纯白 */
.pl-progress{
  position:absolute;left:13px;top:44px;width:1175px;height:4px;
  background:rgba(255,255,255,.26);border-radius:2px;cursor:pointer;
}
.pl-progress b,.pl-progress i{position:absolute;left:0;top:0;height:100%;border-radius:2px}
.pl-progress b{background:rgba(255,255,255,.55)}
.pl-progress i{background:#fff}

/* 缩略图面板 abs 8186..8376（h190），底色米粉 */
.wish-strip{position:absolute;left:0;top:1003px;width:1200px;height:190px;background:#fdeee1;overflow:hidden}
.ws-view{position:absolute;left:16px;top:18px;right:0;height:160px;overflow:hidden}
.ws-track{position:relative;font-size:0;white-space:nowrap;transition:transform .35s;display:flex;justify-content: center;}
.ws-track li{display:inline-block;width:240px;height:160px;margin-right:20px;vertical-align:top}
.ws-track a{position:relative;display:block;width:100%;height:100%;overflow:hidden}
.ws-track img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.ws-track a:hover img{transform:scale(1.06)}
/* 当前正在播放的一项：outline 不占位，故不影响设计稿的 240×160 网格；
   取色与本区块横向滚动条的橙一致 */
.ws-track li.is-current a{outline:3px solid #e8862c;outline-offset:-3px}
.ws-track span{
  position:absolute;left:0;bottom:0;width:100%;height:38px;padding:0 8px;
  font-size:14px;line-height:31px;color:#fff;text-align:center;
  background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.68));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* 自定义横向滚动条 abs (360,8381) 1200×7 */
.ws-scrollbar{
  position:absolute;left:0;top:1198px;width:1200px;height:7px;
  background:#f7e3cd;border-radius:4px;
}
.ws-scrollbar i{
  display:block;width:320px;height:100%;
  background:#e8862c;border-radius:4px;cursor:pointer;
}

/* ============================ SEC8 校友情深 ============================
   section top 8488 · 半透明白卡与金色波浪页脚已烘焙
   ==================================================================== */
.al-card{position:absolute;left:0;top:310px;width:1200px;height:398px}
.al-text{position:absolute;left:49px;top:92px;width:539px}
.al-text p{
  font-size:16px;line-height:26px;color:var(--txt);
  text-indent:2em;text-align:justify;
}
.al-links{position:absolute;left:0;top:0;width:100%;height:100%}
.al-link{position:absolute;display:block;overflow:hidden;transition:transform .3s}
.al-link img{width:100%;height:100%;object-fit:cover}
.al-link:hover{transform:translateY(-4px)}
.al-link-wide{left:620px;top:47px;height:140px}
.al-links .al-link:nth-child(2){left:620px;top:209px;height:140px}
.al-links .al-link:nth-child(3){left:900px;top:209px;width:260px;height:140px}

/* ------------------------------ 回到顶部 ------------------------------ */
.back-top{
  position:fixed;right:30px;bottom:60px;z-index:99;
  width:48px;height:48px;border-radius:50%;
  background:var(--red);box-shadow:0 6px 16px rgba(200,38,28,.35);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s,transform .3s,visibility .3s;
}
.back-top:before{
  content:"";position:absolute;left:17px;top:19px;
  width:12px;height:12px;border-top:2px solid #fff;border-left:2px solid #fff;
  transform:rotate(45deg);
}
.back-top.is-show{opacity:1;visibility:visible;transform:translateY(0)}
.back-top:hover{background:#a91d15}

/* ---------------------------- 滚动入场动画 ---------------------------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:translateY(0)}
.tl-dot.reveal{transform:translateY(18px) scale(.85)}
.tl-dot.reveal.is-in{transform:translateY(0) scale(1)}
.deep-list li.reveal{transform:translateY(36px)}
.deep-list li.reveal.is-in{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ==========================================================================
   响应式：设计稿为固定 1200 内容区的超长页面，
   窄屏采用整体等比缩放（transform: scale），保证内容与底图始终精确对齐。
   页面总高 = 1000+872+856+1549+819+905+1189+1306+1035 - 8(重叠) = 9523px
   注：--s 必须是「无单位数」，CSS 无法用 calc(100vw/1200) 得到（结果仍带长度单位，
   会使 scale() 因 invalid at computed-value time 而整条声明失效），因此由 JS 写入；
   JS 不可用时 --s 保持默认 1，页面降级为横向滚动查看。
   ========================================================================== */
:root{--s:1}
@media screen and (max-width:1199px){
  html{overflow-x:hidden}
  body{min-width:0;overflow-x:hidden}
  .page{
    width:1200px;min-width:0;
    transform:scale(var(--s));
    transform-origin:top left;
    /* 抵消缩放后残留的空白高度（scale 不影响布局尺寸） */
    margin-bottom:calc(9523px * (var(--s) - 1));
  }
  /* 底图按 1200 中心区域裁切显示 */
  .sec{background-position:center top}
  .banner{width:1200px}
  .banner picture,.banner img{width:1200px;height:1000px;object-fit:cover}
  .back-top{right:16px;bottom:24px;width:42px;height:42px}
  .back-top:before{left:14px;top:16px;width:11px;height:11px}
}

/* 打印 */
@media print{
  .back-top,.cf-arrow,.th-arrow,.ws-scrollbar{display:none!important}
  .sec{page-break-inside:avoid}
}
<!--ecms sync check [sync_thread_id="3bcee7cc5a424330844ab778a62d31c1" sync_date="2026-09-20 16:00:30" check_sum="3bcee7cc5a424330844ab778a62d31c1]-->