@charset "utf-8";

:root{
  --brand:#bb4778;
  --accent:#bb1000;
  --ok:#bb1000;
  --pending:#4f9f00;
}

html{max-width:640px;margin:0 auto}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"Microsoft Yahei",Arial,sans-serif;
  font-size:1.2rem;
  line-height:22px;
  color:#222;
  background-color:#f1f1f1;
  -webkit-text-size-adjust:100%;
}
a{color:#333;text-decoration:none}
img{border:0;display:block;max-width:100%}
li{list-style:none}
b,strong{font-weight:bold}
i,em{font-style:normal}

.page-bg{
  background-color:#f1f1f1;
  background-image:url("../assets/header_band.svg");
  background-position:top center;
  background-size:100%;
  background-repeat:no-repeat;
}

/* ---------- header ---------- */
.hd{padding:4%;margin-bottom:4vw;background-color:var(--brand)}

.hd-card{
  background-color:#fff;padding:4%;
  display:flex;justify-content:space-between;
  border-radius:10px;
}
.hd-side{width:16vw}
.hd-avatar{width:100%;height:16vw;border-radius:50%;overflow:hidden;margin-bottom:1rem}
.hd-avatar img{width:100%;height:100%;object-fit:cover}
.hd-qr{width:100%;overflow:hidden}
.hd-qr img{width:100%;height:16vw;border-radius:.5rem;object-fit:cover;margin-bottom:.2rem}
.hd-qr h3{font-size:.9rem;text-align:center;font-weight:normal}
.hd-main{width:calc(100% - 20vw)}
.hd-main h1{font-size:1.2rem;line-height:1.5;margin-bottom:.5rem}
.hd-main p{font-size:.8rem;line-height:1.6}
.hd-main p .hl{color:var(--accent)}

/* ---------- tabs ---------- */
.tabs{margin-bottom:.5rem;display:flex;justify-content:space-around;flex-wrap:wrap}
.tabs a{
  display:flex;padding:0 2%;align-items:center;gap:.3rem;
  border-radius:.3rem;text-align:center;background-color:#ccc;
  font-size:1rem;line-height:2.6rem;margin-bottom:.5rem;
}
.tabs a i{font-size:.8rem;line-height:.8rem}
.tabs a.on{background-color:var(--accent);color:#fff;font-weight:bold}

/* ---------- card list ---------- */
.list{padding:2vw;padding-bottom:2rem}
.list ul li{
  background-color:#fff;border-radius:8px;
  padding:4vw 3vw 4vw 6vw;margin-bottom:2vw;
  position:relative;min-height:5rem;
}
.list .zhong-red{position:absolute;width:10vw;left:50vw;top:4vw}
.list .count{position:absolute;right:4vw;top:3vw;font-size:2.6vw}
.list .count i{color:red;padding:0 2vw}
.list .nrecord{position:absolute;bottom:3vw;right:4vw}
.list .nrecord span{font-size:2.5vw;line-height:4vw}
.list .nrecord i{
  display:inline-block;margin:0 .5vw;width:4vw;height:4vw;
  border-radius:50%;text-align:center;line-height:4vw;font-size:2vw;color:#fff;
}
.list .nrecord .nyzj{background-color:red}
.list .nrecord .nwzj{background-color:green}
.list li>a{display:flex;justify-content:space-between;align-items:center}
.list .tit{width:60%;display:flex;justify-content:space-between}
.list .tit h2{font-size:.85rem;font-weight:normal;width:92%}
.list .tit h2 p{font-size:.6rem;padding-top:.2rem;font-weight:normal}
.list .tit em{font-size:1rem;padding-right:.5rem;width:8%}
.list .pri{width:23%;color:var(--accent);font-size:.8rem;text-align:right}
.list .pri span{font-size:1.6rem;padding-right:.4rem}

/* ---------- detail ---------- */
.page-bg-plain{background-image:url("../assets/view_bg.svg")}
.dt-title{
  padding-top:2rem;font-size:1.3rem;font-weight:bold;
  margin-bottom:1rem;margin-left:3vw;align-items:center;display:flex;
}
.dt-title span{
  display:inline-block;background-color:var(--accent);
  min-width:2rem;height:3rem;text-align:center;line-height:3rem;
  padding:0 .3rem;font-size:1rem;color:#fff;margin-right:.5rem;
}
.dt-title b{font-weight:bold}
.dt-time{border-top:1px solid #ddd;padding:1rem 0;font-size:.8rem;padding-right:1rem;text-align:right}
.dt-view{margin:2vw;padding:5vw;border-radius:10px}
/* 付费墙（查看码输入框）：详情页与往期记录的每一行共用同一套样式 */
.paywall{margin-bottom:.5rem}
.paywall p{font-size:1rem;line-height:1.6;margin-bottom:.5rem;text-align:center}
.paywall p span{color:#bb1000;font-weight:bold}
.paywall ul li{display:flex;justify-content:space-around}
.paywall input:first-child{
  border:solid 1px #ddd;height:2.5rem;width:50vw;line-height:1.6rem;padding:0 1vw;font-size:1rem;
}
.paywall input:last-child{
  border:none;width:25vw;height:2.5rem;background-color:#bb1000;
  color:#fff;text-align:center;font-size:1rem;
}
.vc-err{color:#bb1000;font-size:.8rem;text-align:center;margin-bottom:.5rem}
.dt-view .qrd{text-align:center;font-size:1rem;margin-bottom:.5rem}
/* 只给宽度、高度走图片自身比例，收款码才不会拍扁 */
.dt-view .qrd img{width:80vw;height:auto;border-radius:10px;margin:0 auto}
.dt-view .service{
  width:80vw;margin:0 auto;font-size:1rem;line-height:1.6;
  display:flex;justify-content:space-between;align-items:center;
  background-color:#fff;border-radius:10px;padding:.5rem;
}
.dt-view .service img{width:30vw}
.dt-view .ntxt{font-size:1rem;line-height:2}
.dt-view .ntxt-zhong{position:relative;min-height:60vw}
.dt-view .ntxt-zhong .zhong-txt{
  font-size:1rem;line-height:2;position:relative;z-index:100;padding-top:20vw;
}
.dt-view .ntxt-zhong .zhong-img{
  position:absolute;top:-10vw;width:100%;height:calc(100% + 10vw);min-height:80vw;
}
.dt-view .ntxt-zhong .zhong-img img{
  position:absolute;top:0;width:30vw;z-index:10;margin-left:calc((100% - 30vw) / 2);
}
.dt-list{padding:6vw 2vw}
/* 往期记录标题：照参照站 .card-title-green 那枚绿底白字药丸（style.css 的「往期记录卡片」段） */
.card-title-green{
  display:inline-block;background-color:#22b559;color:#fff;
  padding:6px 12px;border-radius:6px;margin:0 0 16px 1rem;font-size:.95rem;
}
.dt-list .item{background-color:#fff;border-radius:10px;padding:4vw 6vw;margin-bottom:2vw}
.dt-list .item h2{font-size:1rem}
.dt-list .item h2 em{
  float:right;width:7vw;height:7vw;border-radius:50%;text-align:center;
  line-height:7vw;color:#fff;font-size:.9rem;font-weight:normal;
}
.dt-list .item h2 em.yzj{background-color:#bb1000}
.dt-list .item h2 em.wzj{background-color:#4f9f00}
.dt-list .item span{font-size:.8rem}
.dt-list .item .txt{
  padding-top:.4rem;margin-top:.4rem;font-size:.9rem;
  border-top:solid 1px #ddd;
}

@media (min-width:600px){
  .list ul li{padding:15px 15px 15px 24px;min-height:80px}
  .list .zhong-red{width:80px;left:70%;top:15px}
  .list .count{font-size:14px;top:10px;right:15px}
  .list .count i{padding:0 10px}
  .list .nrecord{bottom:10px;right:15px}
  .list .nrecord span{font-size:14px;line-height:25px}
  .list .nrecord i{width:20px;height:20px;line-height:20px;font-size:12px;margin:0 6px}
  .dt-list{padding:25px 15px}
  .dt-list .item{padding:15px;margin-bottom:15px}
  .dt-list .item h2 em{width:25px;height:25px;line-height:25px}
}

/* 备案号为合规核查项，必须可点至工信部查询页 */
.icp{padding:0 2vw 2.5rem;text-align:center;font-size:.65rem;line-height:1.4}
.icp a{color:#8a8a8a}