@charset "utf-8";
/* =========================================================
   董建华先生纪念 · 献花寄语页
   IE11 兼容版：1rem = 100px（桌面设计基准 1920）
   H5 通过 @media screen and (max-width: 768px) 切换（基准 750）
   ========================================================= */

/* 根字号：桌面默认 100px，随视口等比缩放 */
html {
    font-size: 100px;
}
@media screen and (min-width: 769px) {
    html { font-size: 5.2083333vw; }
}
@media screen and (min-width: 1920px) {
    html { font-size: 100px; }
}
@media screen and (min-width: 751px) and (max-width: 768px) {
    html { font-size: 100px; }
}
@media screen and (max-width: 768px) {
    html { font-size: 13.333333vw; }
}

body {
    margin: 0;
    background: #F7F5F0;
    font-family: "Source Han Serif CN", "Source Han Serif SC", "Noto Serif CJK SC", "Noto Serif SC", "SimSun", serif;
}
img { border: 0; vertical-align: top; }
a { text-decoration: none; }
ul, li, h1, h2, h3, p { margin: 0; padding: 0; list-style: none; font-weight: normal; }
button { border: 0; background: none; padding: 0; font-family: inherit; cursor: pointer; }

/* ---------------- 页面舞台 ---------------- */
.page {
    width: 100%;
    background: #F7F5F0;
    overflow: hidden;
    position: relative;
    /* PC 自适应：内容始终左右居中（IE11 兼容前缀） */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
}
.view {
    display: block;
    width: 19.2rem;
    min-height: 960px;
    min-height: 9.6rem;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background: #F7F5F0 url("../images/bg.png") no-repeat 0 0;
    background-size: 1920px auto;
    background-position: top center;
}

/* ===================== 装饰图层（水墨 / 菊花背景） ===================== */
.deco { position: absolute; z-index: 1; overflow: hidden; }
.deco img { display: block; }

/* 装饰层菊花（默认 PC 布局，移动端媒体查询内重定位） */
/* 右下大菊 */
.deco-chrys-pc {
    width: 5.64rem; height: 5.64rem;
    right: -1.3rem; bottom: -0.15rem;
}
.deco-chrys-pc img { width: 5.64rem; height: 5.64rem; }
/* 左下大菊 */
.deco-chrys-bl {
    width: 4.68rem; height: 4.68rem;
    left: -0.7rem; bottom: -0.4rem;
}
.deco-chrys-bl img {
    width: 4.68rem; height: 4.68rem;
    transform: rotate(180deg);
}

/* 顶部肖像两侧的小菊花（仅 PC 显示） */
.deco-chrys-sm1 {
    width: 2.3764rem; height: 2.3776rem;
    left: 6.87rem; top: 2.5rem;
}
.deco-chrys-sm1 img {
    width: 2.3764rem; height: 2.3776rem;
    transform: rotate(140deg) scaleX(-1);
}
.deco-chrys-sm2 {
    width: 2.3764rem; height: 2.3776rem;
    right: 6.6rem; top: 2.5rem;
}
.deco-chrys-sm2 img {
    width: 2.3764rem; height: 2.3776rem;
    transform: rotate(40deg);
}

/* ===================== 顶部寄语录播（轮播跑马） ===================== */
.marquee-line {
    position: relative;
    z-index: 2;
    padding-top: 0.36rem;
    overflow: hidden;
}
.marquee-track {
    position: relative;
    /* inline-block + nowrap 平铺，兼容 iOS Safari 等 WebKit（避免 flex 布局下只显示首条） */
    white-space: nowrap;
}
.msg-pill {
    display: inline-block;
    vertical-align: top;
    height: 0.42rem;
    line-height: 0.42rem;
    padding: 0 0.2rem;
    margin-right: 0.18rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    border-radius: 0.2rem;
}
.msg-text {
    display: inline;
    vertical-align: middle;
    font-size: 20px;
    font-size: 0.2rem;
    
    line-height: 22px;
    line-height: 0.22rem;
    color: #A1845C;
    white-space: nowrap;
}

/* ===================== 主内容（PC 默认布局） ===================== */
.hero { position: relative; z-index: 2; }
.main { padding-bottom: 0.3rem; }

/* 遗像：照片铺满容器（PC 262×352 / H5 345×458），无边框 */
.photo {
    position: relative;
    width: 262px;
    width: 2.62rem;
    height: 352px;
    height: 3.52rem;
    margin: 0.18rem auto 0;
}
/* 照片铺满 */
.photo .photo-frame img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* 姓名 / 生卒年月 */
.name-wrap { text-align: center; margin-top: 0.18rem; }
.name {
    font-size: 36px;
    font-size: 0.36rem;
    font-weight: 900;
    line-height: 0.55rem;
    color: #3D3D3D;
}
.date {
    margin-top: 0.1rem;
    font-size: 20px;
    font-size: 0.2rem;
    
    color: #3D3D3D;
}

/* 生平简介 */
.bio {
    width: 999px;
    width: 9.99rem;
    margin: 0.24rem auto 0;
    text-align: left;
    font-size: 18px;
    font-size: 0.18rem;
    
    line-height: 0.3rem;
    color: #3D3D3D;
    font-family: Source Han Serif CN;
}

/* 献花计数 */
.flower-count {
    margin-top: 0.3rem;
    text-align: center;
    font-size: 20px;
    font-size: 0.2rem;
    
    line-height: 0.22rem;
    color: #A1845C;
}
.flower-count b {
    font-weight: 900;
    color: #A1845C;
    padding: 0 0.04rem;
}
/* ===================== 底部导航标签（PC） ===================== */
.tab-nav {
    margin: 0.4rem auto 0;
    width: 700px;
    width: 7rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
}
/* PC 竖排相邻 tab 垂直间距 0.4rem */
.tab + .tab {
    margin-left: 0;
    margin-top: 0.4rem;
}
.tab-label{
  letter-spacing: 0.68em;
  display: inline-block;
  margin-top: -0.05rem;
}
.tab {
    width: 180px;
    width: 1.8rem;
    height: 56px;
    height: 0.56rem;
    border-radius: 56px;
    border-radius: 0.56rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 22px;
    font-size: 0.22rem;
    
    box-sizing: border-box;
    transition: box-shadow 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.tab .tab-ic {
    position: relative;
    width: 24px;
    width: 0.24rem;
    height: 24px;
    height: 0.24rem;
    margin-right: 16px;
    margin-right: 0.16rem;
    text-indent: 0;
}
.tab .tab-ic img {
    position: absolute;
    left: 0; top: 0;
    width: 0.24rem;
    height: 0.24rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.tab .tab-ic img.ic-0 { opacity: 1; }

/* 非激活标签（浅色描边胶囊） */
.tab-ghost {
    background: #FBFAF8;
    border: 1px solid #E0C9AA;
    color: #3D3D3D;
    cursor: pointer;
}
.tab-ghost:hover {
    box-shadow: 0 4px 10px rgba(161, 132, 92, 0.8);
    color: #704913;
}
.tab-ghost:hover .tab-ic img.ic-0 { opacity: 0; }
.tab-ghost:hover .tab-ic img.ic-1 { opacity: 1; }
/* 激活标签（金色实底） */
.tab-active {
    background: #A1845C;
    color: #FFFFFF;
    cursor: pointer;
}
.tab-active:hover{
  box-shadow: 0 4px 10px rgba(161, 132, 92, 0.8);
}
.tab-active .tab-ic img.ic-0 { opacity: 1; }
.tab-active .tab-ic img.ic-1 { opacity: 0; }

/* ===================== H5 布局覆盖（≤768px） ===================== */
@media screen and (max-width: 768px) {
    /* 画布切换为 H5 规格（750 基准） */
    .view {
        width: 7.5rem;
        min-height: 1406px;
        min-height: 14.06rem;
        background-image: url("../images/bg-h5.png");
        background-size: 100%;
    }
    .main { padding-bottom: 0.5rem; }

    /* 顶部寄语轮播（PC/H5 均为左右滚动跑马） */
    .marquee-line { padding-top: 0.29rem; }
    .msg-pill {
        height: 0.42rem;
        padding: 0 0.1rem;
        margin-right: 0.5rem;
    }
    .msg-text {
        font-size: 28px;
        font-size: 0.28rem;
        line-height: 0.22rem;
    }

    /* 菊花装饰：隐藏肖像两侧小菊；右下/左下大菊改按 H5 摆放 */
    .deco-chrys-sm1,
    .deco-chrys-sm2 { display: none; }
    .deco-chrys-pc {
        width: 5.32rem; height: 5.32rem;
        right: 3.43rem; top: 8.6rem;
        bottom: auto;
    }
    .deco-chrys-pc img { width: 5.32rem; height: 5.32rem; }
    .deco-chrys-bl {
        width: 3.07rem; height: 3.07rem;
        left: -0.27rem; top: 10.9rem;
        bottom: auto;
    }
    .deco-chrys-bl img { width: 3.07rem; height: 3.07rem; }

    /* 遗像：H5 相框 345×458，照片铺底 + 框线（其余继承基础规则） */
    .photo {
        width: 345px;
        width: 3.45rem;
        height: 458px;
        height: 4.58rem;
        margin: 0.28rem auto 0;
    }

    /* 姓名 / 生卒年月 */
    .name-wrap { margin-top: 0.26rem; }
    .name {
        font-size: 48px;
        font-size: 0.48rem;
        line-height: 0.69rem;
    }
    .date {
        margin-top: 0.2rem;
        font-size: 30px;
        font-size: 0.3rem;
        line-height: 0.43rem;
    }

    /* 生平简介 */
    .bio {
        width: 6.44rem;
        margin-top: 0.3rem;
        font-size: 32px;
        font-size: 0.32rem;
        line-height: 0.48rem;
    }

    /* 献花计数 */
    .flower-count {
        margin-top: 0.58rem;
        font-size: 30px;
        font-size: 0.3rem;
        line-height: 0.22rem;
    }

    /* 底部导航标签 */
    .tab-nav {
        width: 7.7rem;
        margin-top: 0.57rem;
        padding: 0 0.4rem;
        box-sizing: border-box;
    }
    .tab {
        width: 2.1rem;
        height: 0.64rem;
        font-size: 32px;
        font-size: 0.32rem;
        border-radius: 0.64rem;
        margin:0 0.1rem;
    }
    /* H5 竖排相邻 tab 垂直间距 0.15rem */
    .tab-nav .tab + .tab {
        margin-left: 0;
        margin-top: 0.15rem;
    }
    .tab .tab-ic {
        width: 0.3rem;
        height: 0.3rem;
        margin-right: 0.16rem;
    }
    .tab .tab-ic img {
        width: 0.3rem;
        height: 0.3rem;
    }
}
/* ===================== 寄语弹窗（公共 / PC） ===================== */
.modal-mask {
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.45);
    display: none;
}
.modal-mask.show {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.modal-box {
    position: relative;
    width: 627px;
    width: 6.27rem;
    box-sizing: border-box;
    background: #EEE5D8;
    border: 1px solid #E9D7D7;
    border-radius: 20px;
    border-radius: 0.2rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
/* 标题区 */
.md-top {
    position: relative;
    padding: 0.3rem 0.6rem 0.25rem 0.31rem;
}
.md-title {
    font-size: 22px;
    font-size: 0.22rem;
    
    line-height: 0.22rem;
    color: #3D3D3D;
}
.md-close {
    position: absolute;
    right: 0.33rem;
    top: 0.33rem;
    width: 0.25rem;
    height: 0.25rem;
}
.md-close img {
    width: 0.25rem;
    height: 0.25rem;
    display: block;
}
/* 分隔线 */
.md-line {
    height: 1px;
    margin: 0 0.31rem;
    background: rgba(161, 132, 92, 0.5);
}
/* 寄语选项列表 */
.md-options {
    margin: 0.27rem 0.54rem 0 0.48rem;
}
.md-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-height: 42px;
    min-height: 0.42rem;
    margin-bottom: 30px;
    margin-bottom: 0.3rem;
    cursor: pointer;
}
.md-row:last-child { margin-bottom: 0; }
.md-row .ck {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 20px;
    width: 0.2rem;
    height: 20px;
    height: 0.2rem;
    margin-right: 17px;
    margin-right: 0.17rem;
    border: 1px solid #704913;
    border-radius: 2px;
    border-radius: 0.02rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: transparent;
    box-sizing: border-box;
}
.md-row .ck img {
    width: 10px;
    width: 0.1rem;
    height: 8px;
    height: 0.08rem;
    display: none;
}
.md-row.on .ck {
    background: #704913;
}
.md-row.on .ck img { display: block; }
.md-row .row-text {
    font-size: 18px;
    font-size: 0.18rem;
    
    line-height: 0.22rem;
    color: #3D3D3D;
}
/* 底部按钮 */
.md-btns {
    display: -ms-flexbox;
    display: flex;
    margin: 0.29rem 0 0 1.01rem;
    padding-bottom: 0.5rem;
}
.btn {
    height: 54px;
    height: 0.54rem;
    width: 180px;
    width: 1.8rem;
    border-radius: 27px;
    border-radius: 0.27rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 22px;
    font-size: 0.22rem;
    
    color: #FFFFFF;
}
.btn-cancel {
    background: #C3B9AB;
    margin-right: 0.8rem;
    letter-spacing: 0.25em;
}
.btn-submit {
    background: #A1845C;
    transition: box-shadow 0.25s ease;
}
.btn-submit:hover {
    box-shadow: 0 4px 10px rgba(161, 132, 92, 0.8);
}
/* ===================== 寄语弹窗（H5 ≤768px） ===================== */
@media screen and (max-width: 768px) {
    .modal-mask.show {
        -ms-flex-align: start;
        align-items: flex-start;
        overflow-y: auto;
    }
    .modal-box {
        width: 6.7rem;
        margin: 1.1rem auto 0.6rem;
        flex-shrink: 0;
    }
    .md-top {
        padding: 0.26rem 0.25rem 0.26rem 0.31rem;
    }
    .md-title {
        font-size: 30px;
        font-size: 0.3rem;
        line-height: 0.42rem;
    }
    .md-close {
        width: 0.41rem;
        height: 0.41rem;
        right: 0.26rem;
        top: 0.26rem;
    }
    .md-close img {
        width: 0.41rem;
        height: 0.41rem;
    }
    .md-line {
        margin: 0 0.26rem;
    }
    .md-options {
        margin: 0.24rem 0.34rem 0;
    }
    .md-row {
        min-height: 0.92rem;
        margin-bottom: 0.2rem;
    }
    .md-row .ck {
        width: 0.2rem;
        height: 0.2rem;
        margin-right: 0.17rem;
    }
    .md-row .ck img {
        width: 0.1rem;
        height: 0.08rem;
    }
    .md-row .row-text {
        font-size: 30px;
        font-size: 0.3rem;
        line-height: 0.36rem;
    }
    .md-btns {
        margin: 0.36rem 0 0 0.52rem;
        padding-bottom: 0.53rem;
    }
    .btn {
        height: 0.64rem;
        font-size: 30px;
        font-size: 0.3rem;
    }
    .btn-cancel {
        width: 2.6rem;
        margin-right: 0.46rem;
    }
    .btn-submit {
        width: 2.59rem;
        letter-spacing: 0.1em;
    }
}

/* ===================== 全局轻提示（Toast） ===================== */
.md-tip {
    position: fixed;
    left: 50%;
    top: 18%;
    width: 260px;
    margin-left: -130px;
    padding: 10px 16px;
    text-align: center;
    font-family: "Source Han Serif CN", "Noto Serif SC", "SimSun", serif;
    font-size: 16px;
    
    line-height: 1.5;
    color: #FFFFFF;
    background: rgba(51, 51, 51, 0.92);
    border-radius: 8px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 999;
    pointer-events: none;
}
.md-tip.show {
    opacity: 1;
    visibility: visible;
}

/* ===================== 献花上升菊花动画 ===================== */
/* 花朵宽度与“獻花”按钮一致（PC 按钮 1.8rem / H5 2.1rem），高度按 jh.png 比例等比放大 */
.rise-flower {
    position: fixed;
    z-index: 60;
    width: 180px;
    width: 1.8rem;
    height: 322px;
    height: 3.22rem;
    pointer-events: none;
    opacity: 1;
    overflow: hidden;
}
.rise-flower img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* gif 保持比例并放大，使花朵与 jh.png 视觉大小接近 */
.rise-flower .rise-gif {
    transform: scale(1.25);
}
.rise-flower .rise-png {
    opacity: 0;
}
@media screen and (max-width: 768px) {
    .rise-flower {
        width: 210px;
        width: 2.1rem;
        height: 376px;
        height: 3.76rem;
    }
}