﻿@charset "utf-8";
/* ============================================================
   梅花山庄幼儿园（mhszyey）旧版风格 —— PowerEasy CMS 元素适配样式
   说明：原版 css.css 为线上旧站原样保留，本文件负责把动易 CMS
   渲染出来的通用元素（面包屑、分页、内容页、组件列表等）融入旧版视觉。
   ============================================================ */

/* ---------- 首页引导页（入口页）：打开首页先显示欢迎页，点“点击进入”后露出首页 ---------- */
body.GuidePage { background: #F2E4D9; }
/* 只隐藏可见性、保留布局，避免首页轮播在 display:none 状态下初始化出错 */
body.GuidePage .main { visibility: hidden; }
body.GuidePage.hiden .main { visibility: visible; }
body.GuidePage.hiden { background: #F2E4D9 url(../images/bg_03.jpg); }
#Guide { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9999; display: none;
    flex-direction: column; align-items: center; justify-content: center; background: #F2E4D9; }
body.GuidePage #Guide { display: flex; }
body.GuidePage.hiden #Guide { display: none; }
#Guide .enterindex { display: inline-block; line-height: 0; }

/* 入口插画：还原旧版 index.html 里那段 Flash（flash/index.swf，778×400）。
   原 SWF 是剪纸风格画面逐层淡入（约 7 秒）后定格，Flash 已停止支持，
   这里用从原 SWF 实际渲染出的 4 张关键画面做交叉淡入，画面即原版画面。 */
.guide-flash { position: relative; width: 778px; height: 400px; margin-bottom: 22px; }
.guide-flash .gf { position: absolute; left: 0; top: 0; width: 778px; height: 400px;
    background-repeat: no-repeat; opacity: 0; }
.guide-flash .gf-1 { background-image: url(../guide/entry-1.png); animation: mhsz-guide-1 6.4s linear both; }
.guide-flash .gf-2 { background-image: url(../guide/entry-2.png); animation: mhsz-guide-2 6.4s linear both; }
.guide-flash .gf-3 { background-image: url(../guide/entry-3.png); animation: mhsz-guide-3 6.4s linear both; }
.guide-flash .gf-4 { background-image: url(../guide/entry-4.png); animation: mhsz-guide-4 6.4s linear both; }
/* 四层依次递进淡入，最后一层停住不再变化（原 SWF 演完即定格） */
@keyframes mhsz-guide-1 { 0% { opacity: 1; } 23.44% { opacity: 1; } 35.94% { opacity: 0; } 100% { opacity: 0; } }
@keyframes mhsz-guide-2 { 0% { opacity: 0; } 23.44% { opacity: 0; } 35.94% { opacity: 1; } 46.88% { opacity: 1; } 59.38% { opacity: 0; } 100% { opacity: 0; } }
@keyframes mhsz-guide-3 { 0% { opacity: 0; } 46.88% { opacity: 0; } 59.38% { opacity: 1; } 70.31% { opacity: 1; } 82.81% { opacity: 0; } 100% { opacity: 0; } }
@keyframes mhsz-guide-4 { 0% { opacity: 0; } 70.31% { opacity: 0; } 82.81% { opacity: 1; } 100% { opacity: 1; } }
/* 系统开启“减少动态效果”时直接显示最终画面 */
@media (prefers-reduced-motion: reduce) {
    .guide-flash .gf { animation: none; opacity: 0; }
    .guide-flash .gf-4 { opacity: 1; }
}

/* ---------- 顶部导航：首页之后的四个栏目云朵按钮 ---------- */
.nav li.navpic { background-repeat: no-repeat; background-position: center; }
/* 按钮图片里已带栏目名称，隐藏链接文字（仍保留在 DOM 中，供无障碍朗读与搜索引擎收录） */
.nav li.navpic > a { text-indent: -9999px; overflow: hidden; }
/* 悬停反馈：沿用旧版按钮的上浮效果 */
.nav li.navpic:hover { position: relative; top: -4px; }
.nav li.navpic-1 { background-image: url(../images/nav1_05.jpg); }
.nav li.navpic-2 { background-image: url(../images/nav1_07.jpg); }
.nav li.navpic-3 { background-image: url(../images/nav1_09.jpg); }
.nav li.navpic-4 { background-image: url(../images/nav1_11.jpg); }

/* ---------- 面包屑（位置导航） ---------- */
.weizhi em { font-style: normal; color: #666; }
.weizhi a { font-size: 13px; color: #666; margin: 0 3px; text-decoration: none; }
.weizhi a:hover { color: #ee5d00; }
.weizhi .split, .weizhi > span { color: #666; }

/* ---------- 栏目菜单（左侧） ---------- */
.sidenav li.on a { color: #fff; }
.sidenav ul { padding: 0; margin: 15px 0 0; }

/* ---------- 列表：暂无资料 ---------- */
.newslist li.noData,
.linklist li.noData { height: 60px; line-height: 60px; text-align: center; color: #999; border-bottom: none; background: none; padding-left: 0; }

/* ---------- 通用分页（输出在 .pages 容器中） ---------- */
.pages a { display: inline-block; padding: 2px 10px; margin: 0 4px; border: 1px solid #d9cfc4; background: #fff; color: #666; text-decoration: none; border-radius: 3px; }
.pages a:hover { border-color: #ee5d00; color: #ee5d00; }
.pages a.current { background: #ee5d00; border-color: #ee5d00; color: #fff; }
.pages a.disabled { color: #bbb; background: #f5f0ea; }
.pages span.total, .pages span.select { color: #848383; margin: 0 8px; }
.pages .select select, .pages .select input { width: 45px; border: 1px solid #d9cfc4; }

/* ---------- 首页 banner：还原线上旧版 Flash 动画 ----------
   线上旧版首页顶部是一段 Flash（flash/banner.swf，1100×190、24fps、515 帧 ≈ 21.458s 循环）。
   Flash 已停止支持，这里按原 SWF 的逐帧参数用 CSS 动画还原：画布尺寸、各元素位置、
   透明度曲线与时间轴均取自 banner.swf；两张素材（校标、梅花枝）也是从 banner.swf
   的位图里解出来的（见 old/flash/banner-logo.png、banner-plum.png）。
   注释中的百分比 = 原帧号 ÷ 515（帧序从 1 开始），例如帧 38 → 1.542s → 7.19%。 */
.banner-flash { position: relative; width: 1100px; height: 190px; overflow: hidden; background: #ee5d00; }
.banner-flash .bf { position: absolute; }
/* 校标：帧 1~38 由 3% 淡入到 100%，同时从 x95 平移到 x106 后停住；帧 481~512 整体淡出 */
.banner-flash .bf-logo { left: 4px; top: 22.5px; width: 204px; height: 147px;
    background: url(../flash/banner-logo.png) no-repeat;
    animation: mhsz-banner-logo 21.458s linear infinite; }
/* 梅花枝：帧 1~65 由 3% 淡入到 100%，位置固定；原图 365px 宽，右侧超出 banner 的部分
   （x>297px）在原版里就被画面裁掉，这里按可视区域裁好存放，显示效果一致 */
.banner-flash .bf-plum { left: 803.8px; top: -0.15px; width: 297px; height: 173px;
    background: url(../flash/banner-plum.png) no-repeat;
    animation: mhsz-banner-plum 21.458s linear infinite; }
/* 三行标语：白色楷体，字号按原 SWF 的字形推进值取（前两行 30px、第三行 27px，正好等于
   原帧每字 600/540 twips 的步进），依次淡入淡出，相邻两行有约 0.5 秒的交叠过渡。
   原 SWF 内嵌的是 Adobe Kaiti Std R 子集，网页里无法复用，改用系统楷体（Windows 楷体 /
   macOS STKaiti）替代，字形风格一致、字宽同为 1em，因此版面宽度与原版相同 */
.banner-flash .bf-text { opacity: 0; margin: 0; white-space: nowrap; color: #fff; font-size: 30px; line-height: 30px;
    font-family: "Adobe Kaiti Std R", KaiTi, STKaiti, "Kaiti SC", "楷体", serif; }
.banner-flash .bf-t1 { left: 433.25px; top: 85.6px; animation: mhsz-banner-t1 21.458s linear infinite; }
.banner-flash .bf-t2 { left: 389.55px; top: 85px; animation: mhsz-banner-t2 21.458s linear infinite; }
.banner-flash .bf-t3 { left: 244.55px; top: 87.5px; font-size: 27px; line-height: 27px; animation: mhsz-banner-t3 21.458s linear infinite; }

/* 原 SWF 的透明度关键帧：帧 1 = 3.13%，帧 38/65 到 100%，帧 481 起线性降到帧 512 = 0 */
@keyframes mhsz-banner-logo {
    0%      { opacity: .031; transform: translateX(-11px); }
    7.19%   { opacity: 1;    transform: translateX(0); }
    93.21%  { opacity: 1; }
    99.22%  { opacity: 0; }
    100%    { opacity: 0; }
}
@keyframes mhsz-banner-plum {
    0%      { opacity: .031; }
    12.43%  { opacity: 1; }
    93.21%  { opacity: 1; }
    99.22%  { opacity: 0; }
    100%    { opacity: 0; }
}
/* 三行标语：帧 15~61 / 137~195 / 295~331 淡入，帧 130~159 / 265~295 / 401~431 淡出 */
@keyframes mhsz-banner-t1 {
    0%      { opacity: 0; }
    2.72%   { opacity: 0; }
    11.65%  { opacity: 1; }
    24.84%  { opacity: 1; }
    30.69%  { opacity: 0; }
    100%    { opacity: 0; }
}
@keyframes mhsz-banner-t2 {
    0%      { opacity: 0; }
    26.41%  { opacity: 0; }
    37.67%  { opacity: 1; }
    51.27%  { opacity: 1; }
    57.27%  { opacity: 0; }
    100%    { opacity: 0; }
}
@keyframes mhsz-banner-t3 {
    0%      { opacity: 0; }
    57.09%  { opacity: 0; }
    64.08%  { opacity: 1; }
    77.68%  { opacity: 1; }
    83.51%  { opacity: 0; }
    100%    { opacity: 0; }
}
/* 系统开启“减少动态效果”时停在静止画面（校标 + 梅花枝，不跑字幕） */
@media (prefers-reduced-motion: reduce) {
    .banner-flash .bf { animation: none; opacity: 1; }
    .banner-flash .bf-text { opacity: 0; }
    .banner-flash .bf-logo { transform: none; }
}

/* ---------- 首页：滚动公告（liMarquee） ---------- */
.jq22 { width: 900px; font-size: 14px; position: relative; top: 18px; margin-left: 180px; }
.jq22 a { margin: 0 15px; height: 30px; color: #333; text-decoration: none; }
.jq22 a:hover { text-decoration: underline; }
.rollnews .jq22 ul { list-style: none; padding: 0; margin: 0; white-space: nowrap; }
.rollnews .jq22 ul li { display: inline-block; margin: 0 18px; line-height: 30px; }
.rollnews .jq22 a { color: #333; text-decoration: none; }
.rollnews .jq22 a:hover { color: #ee5d00; text-decoration: underline; }

/* ---------- 首页：右侧轮播（图片列表组件适配） ---------- */
.wrap .slidebox li { overflow: hidden; }
.wrap .slidebox li .title,
.wrap .slidebox li .titleBg { display: none; }
.wrap .slidebox li .pic { line-height: 0; }
.wrap .slidebox li .pic a { display: block; }
.wrap .slidebox li .pic a img { display: block; border: 0; }

/* ---------- 内容页 / 单页（detailcontent） ---------- */
.detailcontent .conTxt p { text-indent: 2em; margin-bottom: 10px; line-height: 1.9; color: #333; }
.detailcontent .conTxt img { max-width: 800px; }
.detailcontent .property { text-align: center; font-size: 13px; color: #666; margin-bottom: 15px; }
.detailcontent .property span { margin: 0 12px; }
.detailcontent .size a { color: #666; padding: 0 3px; }
.detailcontent .size a:hover { color: #ee5d00; }
.detailcontent .tit h2 a { font-size: 13px; color: #666; }
.userControl { text-align: center; padding: 18px 0 10px; margin-top: 20px; border-top: 1px dashed #c9bdb0; }
.userControl a { color: #666; margin: 0 12px; text-decoration: none; }
.userControl a:hover { color: #ee5d00; }
.articleCon .title { font-size: 20px; text-align: center; color: #333; padding: 15px 0; }
.articleCon .subheading { font-size: 14px; color: #999; font-weight: normal; margin-top: 8px; }

/* ---------- 图片列表（piclist） ---------- */
.piclist li .pic a img { border: 1px solid #e6dccf; padding: 3px; background: #fff; }
.piclist li .title { line-height: 26px; text-align: center; }
.piclist li .title a { color: #000; }
.piclist li .title a:hover { color: #ee5d00; }
.piclist li p { line-height: 26px; }

/* ---------- 父列表-一列式：子栏目块 ---------- */
.maincontet .report.loop { height: auto; background: none; border-bottom: 1px dashed #c9bdb0; padding-bottom: 10px; }
.maincontet .report.loop .tit { padding-left: 20px; overflow: hidden; }
.maincontet .report.loop .tit h1.loopTit { float: left; font-size: 16px; color: #ee5d00; line-height: 40px; margin: 0; }
.maincontet .report.loop .tit h1.loopTit a { color: #ee5d00; }
.maincontet .report.loop .tit a { position: static; float: right; top: auto; right: auto; font-size: 13px; color: #666; line-height: 40px; }
.maincontet .report.loop .tit a:hover { color: #ee5d00; }
.maincontet .report.loop ul { list-style: none; padding: 0 20px 5px; }
.maincontet .report.loop li { height: 35px; line-height: 35px; background: url(../images/id_27.jpg) no-repeat left; background-position-x: 7px; padding-left: 25px; padding-right: 10px; }
.maincontet .report.loop li a { font-size: 15px; color: #0b0b0b; }
.maincontet .report.loop li:hover { background-image: url(../images/id_28.jpg); }
.maincontet .report.loop li:hover a { color: #ee5d00; }
.maincontet .report.loop li span { float: right; font-size: 13px; color: #666; }

/* ---------- 友情链接（linklist） ---------- */
.linklist ul { list-style: none; padding: 0; }
.linklist li { width: 200px; float: left; height: 30px; line-height: 30px; padding-left: 25px;
    border-bottom: 1px dashed #666; background: url(../images/id_28.jpg) no-repeat left;
    background-position-x: 7px; margin-right: 35px; margin-bottom: 20px; overflow: hidden; }
.linklist a { color: #000; }
.linklist a:hover { color: #ee5d00; }

/* ---------- 搜索页 ---------- */
.maincontet .searchtip { padding: 15px; color: #666; }

/* ---------- CMS 通用按钮/输入框（旧版风格） ---------- */
.newslist .page { text-align: center; margin: 20px auto 30px; }
