*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif;background:#eef4fb;color:#1a2635}
button,a{-webkit-tap-highlight-color:transparent}
.case-phone{width:100vw;max-width:430px;height:100vh;height:calc(var(--vh,1vh)*100);margin:0 auto;background:#f7fbff;overflow:hidden;position:relative;box-shadow:0 0 0 1px rgba(16,78,132,.08)}
.case-deck{height:100%;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;background:#fff}.case-deck::-webkit-scrollbar{display:none}
.case-page{flex:0 0 100%;height:100%;position:relative;scroll-snap-align:start;overflow:hidden;background:#fff}.case-scroll{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}.case-scroll::-webkit-scrollbar{display:none}
/* cover */
.cover-page{
  background:#dff4ff url('/static/case_h5/psd_html/cover-bg-20260704.png') center top/cover no-repeat;
  overflow:hidden;
}
.cover-inner{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  overflow:hidden;
}
.cover-logo{
  position:absolute;
  left:9.1%;
  top:4.1%;
  width:28.8%;
  display:flex;
  align-items:center;
  gap:4.5%;
}
.cover-logo-icon{
  width:32.8%;
  flex:0 0 auto;
  display:block;
}
.cover-logo-text{
  width:63.5%;
  flex:0 0 auto;
  display:block;
}
.cover-title-img{
  position:absolute;
  left:50%;
  top:12.7%;
  width:79.4%;
  max-width:370px;
  transform:translateX(-50%);
  display:block;
}
.cover-name{
  position:absolute;
  left:50%;
  top:21.85%;
  width:67%;
  height:4.15%;
  min-height:30px;
  max-height:42px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#06a5eb;
  font-size:clamp(15px,4.25vw,22px);
  font-weight:900;
  letter-spacing:.035em;
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
}
.cover-name:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(230,250,255,.28));
  border:1.5px solid #04a5ea;
  clip-path:polygon(5.5% 0,94.5% 0,100% 50%,94.5% 100%,5.5% 100%,0 50%);
}
.cover-name:after{
  content:"";
  position:absolute;
  left:25%;
  right:25%;
  top:-2px;
  height:4px;
  border-radius:0 0 8px 8px;
  background:#05a7e9;
  box-shadow:0 calc(100% + 1px) 0 #05a7e9;
}
.cover-name span{
  position:relative;
  z-index:1;
}
.cover-actions{
  position:absolute;
  left:7.2%;
  right:7.2%;
  bottom:4.2%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8.2%;
}
.cover-action-btn{
  flex:1 1 0;
  height:clamp(38px,5.1vh,48px);
  border:0;
  padding:0 8px 3px;
  margin:0;
  background:url('/static/case_h5/psd_html/cover-btn-20260704.png') center/100% 100% no-repeat;
  color:#fff;
  font-size:clamp(15px,4.05vw,20px);
  font-weight:900;
  line-height:1;
  letter-spacing:.04em;
  text-align:center;
  text-shadow:0 2px 6px rgba(0,54,135,.45);
  cursor:pointer;
}
.cover-action-btn:active{transform:translateY(1px)}
/* common */
.scene-tabs{height:50px;background:#fff;display:flex;align-items:center;gap:20px;padding:0 18px;white-space:nowrap;overflow-x:auto;border-bottom:1px solid rgba(7,127,226,.15);position:sticky;top:0;z-index:10}.scene-tabs::-webkit-scrollbar{display:none}.scene-tab{border:0;background:none;padding:15px 0 10px;font-size:15px;color:#007aeb;line-height:1;font-weight:500;position:relative;white-space:nowrap}.scene-tab.active{font-weight:800}.scene-tab.active:after{content:"";position:absolute;left:0;right:0;bottom:3px;height:3px;border-radius:99px;background:#007aeb}
.psd-footer{display:flex;align-items:center;gap:18px;justify-content:center;padding:30px 16px 28px;color:#69c1ff;font-weight:700;font-size:16px;white-space:nowrap}.psd-footer:before,.psd-footer:after{content:"";height:1px;background:#d6d6d6;flex:1;max-width:90px}.section-brand{display:flex;align-items:center;margin:0 0 14px;color:#43baff;font-size:20px;font-style:italic;font-weight:900}.section-brand:after{content:"";height:1px;flex:1;margin-left:12px;background:linear-gradient(90deg,#64c3ff,rgba(100,195,255,0))}
/* overview/menu page */
.menu-page{background:#fff}.menu-head{background:linear-gradient(180deg,#2aa9f0 0%,#55c5f4 100%);padding:34px 24px 28px;color:#fff;position:relative;overflow:hidden}.menu-head:before,.list-hero:before{content:"";position:absolute;right:-62px;top:-60px;width:180px;height:180px;border:1px solid rgba(255,255,255,.28);transform:rotate(45deg);border-radius:22px}.menu-head:after,.list-hero:after{content:"";position:absolute;left:-40px;bottom:-42px;width:160px;height:160px;background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,0) 62%)}.menu-head h1{position:relative;z-index:1;margin:0;text-align:center;font-size:28px;line-height:1.22;font-weight:900;letter-spacing:.02em}.menu-head .ribbon{position:relative;z-index:1;display:block;margin:10px auto 18px;width:max-content;max-width:90%;padding:7px 30px;text-align:center;background:#fff;color:#007aeb;border:1px solid rgba(5,142,224,.35);font-size:14px;font-weight:700;clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%)}.menu-head .need{position:relative;z-index:1;margin:0 auto;max-width:286px;color:#ecfbff;font-size:13px;line-height:1.95;text-align:justify}.need b{display:inline-block;margin-right:8px;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.28);font-size:13px;color:#fff}
.menu-panel{position:relative;z-index:2;margin-top:-20px;border-radius:22px 22px 0 0;background:#fff;padding:22px 18px 28px}.intro-card{position:relative;color:#007aeb;font-size:17px;line-height:1.8;font-weight:600;text-align:justify;padding:0 8px 2px}.intro-card:before{content:'“';float:left;font-size:54px;line-height:.8;color:#2baeff;margin-right:8px;font-family:Georgia,serif}.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:19px 0 18px}.stat-item{display:flex;gap:7px;align-items:center;justify-content:center;color:#62b7fb}.stat-ico{width:28px;height:28px;border-radius:50%;background:#51baff;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:900}.stat-item small{display:block;font-size:12px;line-height:1;color:#62b7fb}.stat-item strong{display:block;font-size:18px;line-height:1.2;color:#58baff;font-weight:800}.menu-scenes{display:grid;grid-template-columns:1fr;gap:18px}.menu-scene{border:0;padding:0;margin:0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 3px 12px rgba(0,122,235,.18);position:relative;display:block;text-align:left}.menu-scene-img{height:146px;background:#d9efff center/cover no-repeat;display:block}.menu-scene-img:after{content:"";position:absolute;left:0;right:0;bottom:0;height:64%;background:linear-gradient(180deg,rgba(0,122,235,0),rgba(0,122,235,.92))}.menu-scene-title{position:absolute;left:15px;right:15px;bottom:38px;z-index:2;text-align:center;color:#fff;font-size:18px;font-weight:900;text-shadow:0 2px 7px rgba(0,0,0,.2)}.menu-scene-sub{position:absolute;left:15px;right:15px;bottom:15px;z-index:2;text-align:center;color:#fff;font-size:14px;font-weight:500}
/* category list */
.list-page{background:#f4f4f4}.list-hero{position:relative;background:linear-gradient(180deg,#4bb9ed 0%,#78cbed 100%);padding:31px 24px 72px;color:#fff;overflow:hidden}.list-hero h2{position:relative;z-index:1;margin:0;text-align:center;font-size:28px;line-height:1.18;font-weight:900}.list-hero .ribbon{position:relative;z-index:1;display:block;margin:9px auto 16px;width:max-content;max-width:92%;padding:6px 28px;background:#fff;color:#0b78d6;border:1px solid rgba(5,142,224,.35);font-size:13px;font-weight:700;clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%)}.list-hero .desc{position:relative;z-index:1;margin:0 auto;max-width:282px;color:#effcff;font-size:13px;line-height:1.95;text-align:justify}.list-hero .desc b{display:inline-block;margin-right:8px;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.28);font-size:13px;color:#fff}
.case-panel{position:relative;z-index:2;margin-top:-44px;border-radius:22px 22px 0 0;background:#fff;padding:22px 18px 16px}.case-list{display:grid;gap:22px}.case-card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid #aee1ff;border-radius:14px;padding:20px 18px 18px;box-shadow:0 4px 14px rgba(0,122,235,.22);overflow:hidden}.case-thumb{position:relative;height:132px;background:#dceefa center/cover no-repeat;margin:0 0 14px;overflow:hidden}.case-thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 18%,rgba(0,0,0,.22) 55%,rgba(0,0,0,.6) 100%)}.case-title{position:absolute;left:14px;right:14px;bottom:13px;color:#fff;font-size:18px;line-height:1.36;font-weight:900;z-index:2;text-shadow:0 2px 5px rgba(0,0,0,.32)}.case-desc{margin:0 0 9px;color:#6a6a6a;font-size:15px;line-height:1.78;text-align:justify}.case-desc p{position:relative;margin:0 0 7px;padding-left:17px}.case-desc p:before{content:"";position:absolute;left:0;top:.75em;width:6px;height:6px;background:#0d9ae6;transform:rotate(45deg)}.case-more{display:inline-block;margin-left:17px;color:#32b6ff;font-size:15px;font-weight:700}.case-compact{display:grid;grid-template-columns:1fr 92px;gap:12px;align-items:center;padding:14px 16px}.case-compact .case-thumb{height:70px;margin:0;grid-column:2;grid-row:1 / span 3}.case-compact .case-title{position:static;color:#1b2633;text-shadow:none;font-size:15px;line-height:1.5}.case-compact .case-desc{display:none}.case-compact .case-more{margin-left:0}.empty{padding:30px;text-align:center;color:#8ba4bc}.progress{display:none}.progress i{width:5px;height:5px;border-radius:50%;background:rgba(0,122,235,.2)}.progress i.active{height:19px;border-radius:99px;background:#007aeb}
@media(max-width:370px){.cover-logo{width:31%;left:8.7%;top:4.3%}.cover-title-img{width:81.5%;top:12.9%}.cover-name{width:70%;font-size:15px}.cover-actions{left:6.8%;right:6.8%;gap:7.8%;bottom:4.1%}.cover-action-btn{font-size:15px}.menu-head h1,.list-hero h2{font-size:25px}.case-card{padding:16px 14px}.case-thumb{height:124px}.case-title{font-size:17px}.case-desc{font-size:14px}.scene-tabs{gap:18px;padding:0 16px}.scene-tab{font-size:14px}}
@media(min-width:640px){.case-phone{box-shadow:0 0 0 1px rgba(0,0,0,.08),0 16px 45px rgba(0,61,126,.18)}}

/* about image page */
.about-page{background:#fff}
.about-scroll{background:#fff;overflow-y:auto}
.about-image-wrap{position:relative;width:100%;min-height:100%;background:#fff}
.about-image{display:block;width:100%;height:auto;margin:0 auto;border:0}
.about-hot{position:absolute;z-index:3;border:0;background:transparent;padding:0;margin:0;cursor:pointer}
.about-hot-super{left:50%;right:0;top:0;height:32px}
@media (min-width:390px){.about-hot-super{height:40px}}
@media (max-width:360px){.about-hot-super{height:31px}}

/* super case page */
.super-page{background:#fff}
.super-scroll{background:#fff;overflow-y:auto}
.super-tabs{
  height:50px;
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#f1f1f1;
  position:sticky;
  top:0;
  z-index:20;
  overflow:hidden;
}
.super-tab{
  border:0;
  margin:0;
  padding:0;
  background:#efefef;
  color:#1dacf6;
  font-size:17px;
  font-weight:500;
  letter-spacing:.02em;
  cursor:pointer;
  position:relative;
}
.super-tab:first-child{
  border-radius:12px 12px 0 0;
  box-shadow:inset -1px 0 rgba(255,255,255,.65),inset 0 1px rgba(255,255,255,.8);
}
.super-tab.active{
  color:#fff;
  background:#00A3FF;
  border-radius:12px 12px 0 0;
  font-weight:600;
}
.super-hero{
  height:172px;
  padding-top:36px;
  background: linear-gradient(0deg, #61BDF8, #00A3FF);
  position:relative;
  overflow:hidden;
}
.super-hero-title{
  position:relative;
  z-index:1;
  display:block;
  width:73%;
  max-width:330px;
  margin:0 auto 17px;
}
.super-hero-subtitle{
  position:relative;
  z-index:1;
  display:block;
  width:57.5%;
  max-width:250px;
  margin:0 auto;
}
.super-panel{
  position:relative;
  margin-top:-1px;
  padding:38px 22px 34px;
  background:#fff;
  border-radius:18px 18px 0 0;
  min-height:calc(100% - 222px);
}
.super-back{
  position:absolute;
  left:0;
  top:0px;
  width:34px;
  height:42px;
  border:0;
  padding:22px 0 0;
  margin:0;
  background:rgba(255,255,255,.9);
  border-radius:0 8px 8px 0;
  color:#28aef5;
  font-size:10px;
  line-height:1;
  box-shadow:0 1px 8px rgba(0,128,220,.12);
}
.super-back:before{
  content:"";
  position:absolute;
  left:13px;
  top:9px;
  width:10px;
  height:10px;
  border-left:2px solid #28aef5;
  border-bottom:2px solid #28aef5;
  transform:rotate(45deg);
}
.super-intro{
  position:relative;
  color:#007EF1;
  font-size:14px;
  line-height:1.72;
  font-weight:600;
  text-align:justify;
  letter-spacing:.015em;
  font-family: PingFangSC;
  font-weight: 400;
  line-height: 23px;
}
.super-intro .super-intro-icon{
  width: 20px;
  height: 19px;
  margin-right: 12px;
}

.super-stats{
  display: flex;
  justify-content: space-between;
  align-items:center;
  gap:6px;
  margin:26px -1px 32px;
}
.super-stats .super-img1{
  display:block;
  width: 78px;
  height: 28px;
}
.super-stats .super-img2{
  display:block;
  width: 85px;
  height: 29px;
}
.super-stats .super-img3{
  display:block;
  width: 84px;
  height: 30px;
}
.super-card-link{border:0;padding:1px;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none}
.super-card{
  position:relative;
  display:block;
  width:100%;
  height:148px;
  margin:0 0 22px;
  padding:1px;
  border:1px solid rgba(122,211,255,.92);
  border-radius:10px;
  overflow:hidden;
  background:#51b8f2 url('/static/case_h5/psd_html/super-card-bg-20260704.png') center/100% 100% no-repeat;
  box-shadow:0 3px 14px rgba(0,142,242,.16);
}
.super-card img{
  display:block;
  width:100%;
  height:100%;
  border-radius:8px;
  object-fit:cover;
}
.super-card:nth-of-type(5) img{object-position:center center}
.super-card:nth-of-type(6) img{object-position:center center}
.super-card:after{
  content:"";
  position:absolute;
  left:1px;
  right:1px;
  bottom:1px;
  height:61%;
  border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,rgba(0,155,240,0) 0%,rgba(0,153,242,.78) 58%,rgba(0,128,236,.98) 100%);
  pointer-events:none;
}
.super-card-text{
  position:absolute;
  left:10px;
  right:10px;
  bottom:16px;
  z-index:2;
  text-align:center;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,68,130,.33);
}
.super-card-text h3{
  margin:0 0 5px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 20px;
  color: #FFFDFF;
  line-height: 26px;
  text-shadow: 2px 3px 1px rgba(0,34,65,0.34);
  letter-spacing:.02em;
}
.super-card-text p{
  margin:0;
  font-family: PingFangSC;
  font-weight: 400;
  font-size: 15px;
  color: #FFFDFF;
  line-height: 23px;
  text-shadow: 2px 3px 1px rgba(0,34,65,0.34);
}
.super-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding: 16px 0px 6px;
  color:#38bdff;
  font-size:16px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
}
.super-footer span{
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 16px;
  color: #33BFFF;
  line-height: 28px;
}
.super-footer:before,.super-footer:after{
  content:"";
  height:2px;
  flex:1;
  max-width:100px;
  background:#d7d7d7;
}
@media(max-width:370px){
  .super-tab{font-size:16px}
  .super-hero{height:168px;padding-top:34px}
  .super-hero-title{width:74%;margin-bottom:16px}
  .super-hero-subtitle{width:59%}
  .super-panel{padding:35px 17px 32px;border-radius:17px 17px 0 0}
  .super-intro{font-size:15px;line-height:1.68;padding-left:16px}
  .super-stats{gap:4px;margin:25px 0 22px}
  .super-card{height:138px;margin-bottom:20px;border-radius:9px}
  .super-card-text h3{font-size:19px}
  .super-card-text p{font-size:15px}
  .super-footer{font-size:15px;gap:12px}
}
@media(min-width:400px){
  .super-hero{height:182px;padding-top:40px}
  .super-panel{padding-left:24px;padding-right:25px}
  .super-card{height:158px}
}


/* zero-carbon detail page */
.detail-page{background:#fff}
.detail-scroll{background:#fff;overflow-y:auto}
.detail-tabs{position:sticky;top:0;z-index:30;display:flex;gap:16px;align-items:center;height:54px;padding:0 20px;background:#fff;overflow-x:auto;white-space:nowrap;border-bottom:1px solid rgba(0,126,228,.12)}
.detail-tabs::-webkit-scrollbar{display:none}
.detail-tab{border:0;background:none;padding:0 0 9px;margin:0;color:#2586dd;font-size:16px;line-height:1;font-weight:500;position:relative;white-space:nowrap;flex:0 0 auto}
.detail-tab.active{font-weight:800}
.detail-tab.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:99px;background:#1a93e8}
.detail-hero{position:relative;background:linear-gradient(90deg,#1196dc 0%,#54b9f0 55%,#7acef6 100%);padding:18px 16px 28px;overflow:hidden}
.detail-hero:before{content:"";position:absolute;right:-28px;top:-18px;width:160px;height:120px;background:linear-gradient(135deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 50%,rgba(255,255,255,0) 72%);transform:skewY(-18deg)}
.detail-hero:after{content:"";position:absolute;left:-16px;bottom:22px;width:110px;height:110px;background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,0) 72%)}
.detail-hero-inner{position:relative;z-index:1;padding:14px 12px 0;color:#fff}
.detail-hero h1{margin:0 0 12px;text-align:center;color:#fff;font-size:21px;line-height:1.22;font-weight:900;letter-spacing:.02em}
.detail-ribbon{margin:0 auto 14px;max-width:315px;padding:7px 18px;background:#fff;border:1px solid rgba(5,142,224,.35);clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);color:#1b4eb5;text-align:center;font-size:14px;line-height:1.25;font-weight:700}
.detail-summary{margin:0;color:#effbff;font-size:14px;line-height:1.84;text-align:justify}
.detail-summary b{display:inline-block;margin-right:8px;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.28);font-size:13px;color:#fff;font-weight:700}
.detail-back{position:absolute;left:0;top:108px;z-index:2;width:34px;height:42px;border:0;padding:22px 0 0;margin:0;background:rgba(255,255,255,.9);border-radius:0 8px 8px 0;color:#28aef5;font-size:10px;line-height:1;box-shadow:0 1px 8px rgba(0,128,220,.12)}
.detail-back:before{content:"";position:absolute;left:13px;top:9px;width:10px;height:10px;border-left:2px solid #28aef5;border-bottom:2px solid #28aef5;transform:rotate(45deg)}
.detail-panel{position:relative;z-index:2;margin-top:-16px;border-radius:22px 22px 0 0;background:#efefef;padding:16px 18px 28px;box-shadow:0 -1px 0 rgba(255,255,255,.8) inset}
.detail-brand{display:flex;align-items:center;margin:0 0 14px;color:#5ab6ff;font-size:20px;font-style:italic;font-weight:900}
.detail-brand:after{content:"";height:1px;flex:1;margin-left:12px;background:linear-gradient(90deg,#64c3ff,rgba(100,195,255,0))}
.detail-card-list{display:grid;gap:18px}
.detail-card-item{background:#f2f2f2;border:1px solid #a8dcff;border-radius:18px;padding:18px 12px 16px;box-shadow:0px 0px 3px 0px rgb(0 122 235 / 52%)}
.detail-card-thumb{position:relative;height:117px;border-radius:0;overflow:hidden;background:#dbefff;margin:0 2px 14px}
.detail-card-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.detail-card-thumb:after{content:"";position:absolute;left:0;right:0;bottom:0;height:100%;background:linear-gradient(180deg, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .22) 56%, rgb(0 0 0 / 38%) 100%);}
.detail-card-title{position:absolute;left:12px;right:12px;bottom:10px;z-index:2;font-family: SourceHanSansCN;font-weight: 500;font-size: 18px;color: #FFFFFF;line-height: 26px;}
.detail-card-body{padding:0 3px}
.detail-card-body p{position:relative;margin:0 0 8px;padding-left:17px;color:#666666;font-size:14px;line-height: 23px;font-weight: 400;font-family: PingFangSC;text-align:justify}
.detail-card-body p:before{content:"";position:absolute;left:0;top:.82em;width:6px;height:6px;background:#0d9ae6;transform:rotate(45deg)}
.detail-more{display:inline-block;margin-left:17px;margin-top:2px;color:#32b6ff;font-size:14px;/* font-weight:700 */}
.detail-footer{display:flex;align-items:center;justify-content:center;gap:16px;padding:34px 0px 6px;color:#38bdff;font-size:16px;line-height: 28px;font-family: SourceHanSansCN;font-weight: 500;white-space:nowrap}
.detail-footer:before,.detail-footer:after{content:"";height:2px;flex:1;max-width:100px;background:#cfcfcf}
@media(max-width:370px){.detail-tabs{gap:14px;padding:0 16px}.detail-tab{font-size:15px}.detail-hero{padding-left:14px;padding-right:14px}.detail-hero-inner{padding-left:12px}.detail-hero h1{font-size:19px}.detail-ribbon{font-size:13px;padding:6px 16px}.detail-summary{font-size:13px}.detail-panel{padding-left:14px;padding-right:14px}.detail-card-thumb{height:108px;margin-left:6px;margin-right:6px}.detail-card-title{font-size:13px}.detail-card-body p{font-size:13px}.detail-footer{font-size:15px;gap:12px}}
@media(min-width:400px){.detail-hero h1{font-size:23px}.detail-card-thumb{height:133px}}

.detail-ribbon{position:relative}
.detail-ribbon:before{content:"";position:absolute;left:7%;right:7%;top:-8px;height:10px;background:url('/static/case_h5/psd_html/detail-ribbon-line-20260704.png') center/100% 100% no-repeat;pointer-events:none}
.detail-need-label{display:inline-flex;align-items:center;justify-content:center;margin:0 8px 0 0;vertical-align:-4px}
.detail-need-label img{display:block;height:18px;width:auto}
.detail-summary b{display:none}
.detail-panel{background:#fff}
.detail-card-item{background:#fff}
.detail-brand{display:flex;align-items:center;margin:0 0 14px;min-height:34px}
.detail-brand:after{display:none}
.detail-brand-img{display:block;width:104px;height:auto;flex:0 0 auto}
.detail-brand-dot{width:4px;height:4px;margin-left:10px;margin-right:8px;background:url('/static/case_h5/psd_html/detail-brand-dot-20260704.png') center/100% 100% no-repeat;flex:0 0 auto}
.detail-brand-line{height:3px;flex:1;background:url('/static/case_h5/psd_html/detail-brand-line-20260704.png') left center/153px 3px repeat-x}
@media(max-width:370px){.detail-brand-img{width:98px}.detail-need-label img{height:17px}}

.detail-ribbon-top-line{display:block;width:82%;height:8px;object-fit:fill;margin:0 auto -2px;position:relative;z-index:2}

.detail-ribbon:before{display:none}


/* v7 detail asset refinement */
.detail-ribbon-effect{display:block;width:100%;max-width:645px;height:auto;margin:0 auto 14px}
.detail-need-label{display:inline-flex;align-items:center;justify-content:center;margin:0 8px 0 0;vertical-align:-4px}
.detail-need-label img{display:block;height:18px;width:auto}
.detail-brand{display:block;margin:0 0 14px;min-height:0}
.detail-brand-effect{display:block;width:100%;max-width:415px;height:auto}
.detail-brand-img,.detail-brand-dot,.detail-brand-line,.detail-ribbon-top-line{display:none !important}
.detail-ribbon{display:none !important}
.detail-panel{background:#fff}
.detail-card-item{background:#fff}
@media(max-width:370px){.detail-brand-effect{max-width:360px}.detail-need-label img{height:17px}}

/* v8 need label refine */
.detail-need-label img{height:22px;width:auto}
@media(max-width:370px){.detail-need-label img{height:20px}}

/* v9 direct need label asset */
.detail-need-label img{height:24px;width:auto}
@media(max-width:370px){.detail-need-label img{height:22px}}

/* v10 direct need label asset */
.detail-need-label img{height:34px;width:auto}
@media(max-width:370px){.detail-need-label img{height:30px}}

/* v11 need label screenshot on bg */
.detail-need-label img{height:30px;width:auto}
@media(max-width:370px){.detail-need-label img{height:30px}}


/* v19: based on v12, use cropped hero background and keep text inside it */
.detail-scroll{
  background:#efefef !important;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.detail-hero{
  position:relative;
  background:url('/static/case_h5/psd_html/detail-hero-crop-20260705-v12.png') top center/100% auto no-repeat !important;
  min-height:300px;
  padding:18px 0 0;
  overflow:hidden;
}
.detail-hero:before,
.detail-hero:after{
  display:none !important;
}
.detail-hero-inner{
  position:relative;
  z-index:1;
  padding:18px 26px 0;
  color:#fff;
}
.detail-hero h1{
  margin:0 0 12px;
  text-align:center;
  color:#fff;
  font-size:22px;
  line-height:1.18;
  font-weight:900;
  letter-spacing:.01em;
}
.detail-ribbon-effect{
  display:block;
  width:100%;
  max-width:320px;
  height:auto;
  margin:0 auto 14px;
}
.detail-summary{
  margin:0;
  padding:0 18px;
  color:#eefaff;
  font-size:13px;
  line-height:1.72;
}
.detail-summary .detail-need-label{
  margin-right:6px;
  vertical-align:-6px;
}
.detail-need-label img{
  height:30px;
  width:auto;
}
.detail-panel{
  position:relative;
  z-index:2;
  margin-top:0;
  border-radius:0;
  background:#efefef !important;
  padding:12px 16px 28px;
  box-shadow:none !important;
}
.detail-brand{
  display:block;
  margin:0 0 12px;
  min-height:0;
}
.detail-brand-effect{
  display:block;
  width:100%;
  max-width:402px;
  height:auto;
}
@media(max-width:370px){
  .detail-hero{
    min-height:286px;
    padding-top:14px;
  }
  .detail-hero-inner{
    padding:14px 20px 0;
  }
  .detail-hero h1{
    font-size:20px;
    margin-bottom:10px;
  }
  .detail-ribbon-effect{
    max-width:300px;
    margin-bottom:12px;
  }
  .detail-summary{
    padding:0 14px;
    font-size:12px;
    line-height:1.66;
  }
  .detail-need-label img{
    height:28px;
  }
  .detail-panel{
    padding:10px 12px 24px;
  }
  .detail-brand-effect{
    max-width:350px;
  }
}
@media(min-width:400px){
  .detail-hero{
    min-height:314px;
  }
  .detail-hero h1{
    font-size:23px;
  }
  .detail-ribbon-effect{
    max-width:326px;
  }
}


/* v20: compact hero text, keep all summary inside blue background, white page */
.detail-page{
  background:#fff !important;
}
.detail-scroll{
  background:#fff !important;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.detail-tabs{
  background:#fff !important;
}
.detail-hero{
  position:relative;
  background:url('/static/case_h5/psd_html/detail-hero-crop-20260705-v12.png') top center/100% auto no-repeat !important;
  min-height:294px;
  padding:17px 0 0;
  overflow:hidden;
}
.detail-hero:before,
.detail-hero:after{
  display:none !important;
}
.detail-hero-inner{
  position:relative;
  z-index:1;
  padding:17px 22px 0;
  color:#fff;
}
.detail-hero h1{
  margin:0 0 11px;
  text-align:center;
  color:#fff;
  font-size:21px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:0;
}
.detail-ribbon-effect{
  display:block;
  width:100%;
  max-width:308px;
  height:auto;
  margin:0 auto 12px;
}
.detail-summary{
  width:100%;
  max-width:326px;
  margin:0 auto;
  padding:0;
  color:#f5fdff;
  font-size:12px;
  line-height:1.55;
  font-weight:500;
}
.detail-summary .detail-need-label{
  margin:0 5px 0 0;
  vertical-align:-6px;
}
.detail-need-label img{
  display:block;
  height:28px;
  width:auto;
}
.detail-panel{
  position:relative;
  z-index:2;
  margin-top:0;
  border-radius:0;
  background:#fff !important;
  padding:8px 16px 28px;
  box-shadow:none !important;
}
.detail-brand{
  display:block;
  margin:0 0 12px;
  min-height:0;
}
.detail-brand-effect{
  display:block;
  width:100%;
  max-width:402px;
  height:auto;
}
.detail-card-item{
  background:#fff !important;
}
@media(max-width:370px){
  .detail-hero{
    min-height:282px;
    padding-top:14px;
  }
  .detail-hero-inner{
    padding:14px 18px 0;
  }
  .detail-hero h1{
    font-size:19px;
    margin-bottom:9px;
  }
  .detail-ribbon-effect{
    max-width:292px;
    margin-bottom:10px;
  }
  .detail-summary{
    max-width:304px;
    font-size:11.5px;
    line-height:1.48;
  }
  .detail-need-label img{
    height:26px;
  }
  .detail-panel{
    padding:6px 12px 24px;
  }
  .detail-brand-effect{
    max-width:350px;
  }
}
@media(min-width:400px){
  .detail-hero{
    min-height:304px;
  }
  .detail-hero h1{
    font-size:22px;
  }
  .detail-ribbon-effect{
    max-width:318px;
  }
  .detail-summary{
    max-width:338px;
    font-size:12px;
    line-height:1.58;
  }
}


/* v21: move hero content upward and tighten gap below detail-summary */
.detail-hero{
  min-height:258px !important;
  padding:10px 0 0 !important;
}
.detail-hero-inner{
  padding:15px 20px 0 !important;
}
.detail-hero h1{
  margin:0 0 9px !important;
  font-size:20px !important;
  line-height:1.12 !important;
}
.detail-ribbon-effect{
  /* max-width:304px !important; */
  width: 306px;
  height: 29px;
  margin:0 auto 18px !important;
}
.detail-summary{
  width: 265px;
  max-width:332px !important;
  font-size:12px !important;
  font-family: PingFangSC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 21px !important;
}
.detail-need-label img{
  height:23px !important;
}
.detail-panel{
  margin-top:-6px !important;
  padding:4px 16px 28px !important;
  background:#fff !important;
}
.detail-brand{
  margin:42px 0 15px !important;
}
@media(max-width:370px){
  .detail-hero{
    min-height:242px !important;
    padding-top:8px !important;
  }
  .detail-hero-inner{
    padding:8px 16px 0 !important;
  }
  .detail-hero h1{
    font-size:18px !important;
    margin-bottom:7px !important;
  }
  .detail-ribbon-effect{
    max-width:286px !important;
    margin-bottom:7px !important;
  }
  .detail-summary{
    max-width:300px !important;
    font-size:11.5px !important;
    line-height:1.42 !important;
  }
  .detail-need-label img{
    height:25px !important;
  }
  .detail-panel{
    margin-top:-8px !important;
    padding:4px 12px 24px !important;
  }
}
@media(min-width:400px){
  .detail-hero{
    min-height:270px !important;
  }
  .detail-hero h1{
    font-size:28px !important;
    font-family: PingFangSC;
    font-weight: 600;
    color: #E8F3FF;
  }
}


/* v22: requested direct css adjustment */
.detail-hero{
  padding:5px 0 0 !important;
  z-index:999;
}
.detail-panel{
  margin-top:-32px !important;
}


/* v23: requested detail panel offset adjustment */
.detail-panel{
  margin-top:-45px !important;
}


/* ===== v27 fixed-ratio detail hero rebuild ===== */
#detailZeroPage .detail-scroll{
  background:#fff !important;
}
#detailZeroPage .detail-hero{
  position:relative;
  z-index:1 !important;
  padding:0 !important;
  min-height:245px;
  aspect-ratio:1291 / 772;
  background:url('/static/case_h5/psd_html/detail-hero-crop-20260705-v12.png') center top/100% 100% no-repeat !important;
  overflow:visible !important;
}
#detailZeroPage .detail-hero:before,
#detailZeroPage .detail-hero:after{
  display:none !important;
}
#detailZeroPage .detail-hero-inner{
  position:absolute;
  inset:0;
  z-index:2;
  padding:0 !important;
  color:#fff;
}
#detailZeroPage .detail-hero h1{
  position:absolute;
  left:10%;
  right:10%;
  top:11.5%;
  margin:0 !important;
  color:#fff;
  text-align:center;
  font-size:clamp(22px,5vw,27px);
  line-height:1.14;
  font-weight:900;
  letter-spacing:.01em;
  text-shadow:0 1px 1px rgba(0,0,0,.06);
}
#detailZeroPage .detail-ribbon-effect{
  position:absolute;
  left:50%;
  top:31.5%;
  transform:translateX(-50%);
  display:block;
  width:76%;
  max-width:318px;
  height:auto;
  margin:0 !important;
}
#detailZeroPage .detail-summary{
  position:absolute;
  left:7.5%;
  right:7.5%;
  top:46%;
  margin:0 !important;
  padding:0 !important;
  color:#fff;
  font-size:clamp(11px,3.35vw,14px);
  line-height:1.72;
  font-weight:500;
  text-align:left;
  text-shadow:0 1px 1px rgba(0,0,0,.06);
}
#detailZeroPage .detail-need-label{
  display:inline-flex;
  align-items:center;
  margin:0 6px 0 0 !important;
  vertical-align:-0.28em;
}
#detailZeroPage .detail-need-label img{
  display:block;
  width:auto;
  height:clamp(24px,6.4vw,30px);
}
#detailZeroPage .detail-panel{
  position:relative;
  z-index:5 !important;
  margin-top:-26px !important;
  border-radius:22px 22px 0 0;
  background:#efefef !important;
  padding:14px 18px 28px !important;
  box-shadow:none !important;
}
#detailZeroPage .detail-brand{
  margin:0 0 12px !important;
}
#detailZeroPage .detail-brand-effect{
  display:block;
  width:100%;
  max-width:415px;
  height:auto;
}
#detailZeroPage .detail-card-list{
  gap:18px;
}
#detailZeroPage .detail-card-item{
  background:#f2f2f2;
}
#detailZeroPage .detail-footer{
  padding-top:18px;
}

@media (max-width:399px){
  #detailZeroPage .detail-hero{
    min-height:238px;
  }
  #detailZeroPage .detail-hero h1{
    top:12.5%;
    left:9%;
    right:9%;
    font-size:clamp(19px,5.6vw,23px);
  }
  #detailZeroPage .detail-ribbon-effect{
    top:33%;
    width:79%;
  }
  #detailZeroPage .detail-summary{
    left:8.5%;
    right:8.5%;
    top:47.5%;
    font-size:clamp(11px,3.55vw,13px);
    line-height:1.66;
  }
  #detailZeroPage .detail-panel{
    margin-top:-22px !important;
    padding-top:12px !important;
  }
}

@media (max-width:370px){
  #detailZeroPage .detail-hero{
    min-height:228px;
  }
  #detailZeroPage .detail-hero h1{
    top:12%;
    font-size:18px;
    line-height:1.12;
  }
  #detailZeroPage .detail-ribbon-effect{
    top:32%;
    width:80%;
  }
  #detailZeroPage .detail-summary{
    top:46.5%;
    left:8.5%;
    right:8.5%;
    font-size:11px;
    line-height:1.6;
  }
  #detailZeroPage .detail-need-label img{
    height:22px;
  }
  #detailZeroPage .detail-panel{
    margin-top:-20px !important;
    padding:12px 14px 24px !important;
  }
}

@media (min-width:400px){
  #detailZeroPage .detail-hero{
    min-height:268px;
  }
  #detailZeroPage .detail-hero h1{
    font-size:27px;
  }
  #detailZeroPage .detail-ribbon-effect{
    max-width:332px;
  }
  #detailZeroPage .detail-summary{
    font-size:14px;
  }
  #detailZeroPage .detail-panel{
    margin-top:-30px !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }
}


/* ===== v28 requested adjustment ===== */
#detailZeroPage .detail-hero{
  aspect-ratio:auto !important;
}
#detailZeroPage .detail-ribbon-effect{
  top:26% !important;
}
#detailZeroPage .detail-panel,
#detailZeroPage .detail-paneld{
  background:#ffffff !important;
}


/* ===== v29 manufacture detail page ===== */
#detailManufacturePage .detail-scroll{
  background:#ffffff !important;
}
#detailManufacturePage .detail-hero{
  position:relative;
  z-index:1 !important;
  padding:5px 0 0 !important;
  aspect-ratio:auto !important;
  min-height:260px;
  background:url('/static/case_h5/psd_html/detail-manufacture-hero-20260706.png') center top/100% 100% no-repeat !important;
  overflow:visible !important;
}
#detailManufacturePage .detail-hero:before,
#detailManufacturePage .detail-hero:after{
  display:none !important;
}
#detailManufacturePage .detail-hero-inner{
  position:relative;
  z-index:2;
  padding:0 !important;
  color:#fff;
}
#detailManufacturePage .detail-hero h1{
  margin:34px auto 0 !important;
  padding:0 28px;
  color:#fff;
  text-align:center;
  font-size:clamp(22px,5.3vw,27px);
  line-height:1.16;
  font-weight:900;
  letter-spacing:.01em;
  text-shadow:0 1px 1px rgba(0,0,0,.06);
}
#detailManufacturePage .detail-ribbon-effect{
  display:block;
  width:76%;
  max-width:318px;
  height:auto;
  margin:16px auto 0 !important;
}
#detailManufacturePage .detail-summary{
  margin:14px 7.5% 0 !important;
  padding:0 !important;
  color:#fff;
  font-size:clamp(11px,3.35vw,14px);
  line-height:1.72;
  font-weight:500;
  text-align:left;
  text-shadow:0 1px 1px rgba(0,0,0,.06);
}
#detailManufacturePage .detail-need-label{
  display:inline-flex;
  align-items:center;
  margin:0 6px 0 0 !important;
  vertical-align:-0.28em;
}
#detailManufacturePage .detail-need-label img{
  display:block;
  width:auto;
  height:30px !important;
}
#detailManufacturePage .detail-panel{
  position:relative;
  z-index:5 !important;
  margin-top:-38px !important;
  border-radius:22px 22px 0 0;
  background:#ffffff !important;
  padding:14px 18px 28px !important;
  box-shadow:none !important;
}
#detailManufacturePage .detail-brand{
  margin:0 0 12px !important;
}
#detailManufacturePage .detail-brand-effect{
  display:block;
  width:100%;
  max-width:415px;
  height:auto;
}
#detailManufacturePage .detail-card-list{
  gap:18px;
}
#detailManufacturePage .detail-card-item{
  background:#f2f2f2;
}
#detailManufacturePage .detail-footer{
  padding-top:18px;
}
@media (max-width:399px){
  #detailManufacturePage .detail-hero{
    min-height:246px;
  }
  #detailManufacturePage .detail-hero h1{
    margin-top:30px !important;
    padding:0 22px;
    font-size:clamp(19px,5.6vw,23px);
  }
  #detailManufacturePage .detail-ribbon-effect{
    width:79%;
    margin-top:14px !important;
  }
  #detailManufacturePage .detail-summary{
    margin-left:8.5% !important;
    margin-right:8.5% !important;
    margin-top:12px !important;
    font-size:clamp(11px,3.55vw,13px);
    line-height:1.66;
  }
  #detailManufacturePage .detail-panel{
    margin-top:-30px !important;
    padding-top:12px !important;
  }
}
@media (max-width:370px){
  #detailManufacturePage .detail-hero{
    min-height:236px;
  }
  #detailManufacturePage .detail-hero h1{
    margin-top:28px !important;
    padding:0 18px;
    font-size:18px;
    line-height:1.12;
  }
  #detailManufacturePage .detail-ribbon-effect{
    width:80%;
    margin-top:12px !important;
  }
  #detailManufacturePage .detail-summary{
    margin-top:10px !important;
    margin-left:8.5% !important;
    margin-right:8.5% !important;
    font-size:11px;
    line-height:1.6;
  }
  #detailManufacturePage .detail-need-label img{
    height:22px !important;
  }
  #detailManufacturePage .detail-panel{
    margin-top:-26px !important;
    padding:12px 14px 24px !important;
  }
}
@media (min-width:400px){
  #detailManufacturePage .detail-hero{
    min-height:278px;
  }
  #detailManufacturePage .detail-hero h1{
    font-size:27px;
  }
  #detailManufacturePage .detail-ribbon-effect{
    max-width:332px;
  }
  #detailManufacturePage .detail-summary{
    font-size:14px;
  }
  #detailManufacturePage .detail-panel{
    margin-top:-44px !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }
}


/* v30: click fix for manufacture entry */
.super-card-link{
  position:relative;
  z-index:20;
  cursor:pointer;
  pointer-events:auto;
}
.super-card-link *{
  pointer-events:none;
}
.detail-tab[data-goto]{
  cursor:pointer;
  pointer-events:auto;
}


/* v31: direct link click fix */
a.super-card-link{
  display:block !important;
  text-decoration:none !important;
  color:inherit !important;
  position:relative;
  z-index:9999;
  cursor:pointer;
  pointer-events:auto !important;
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
}
a.super-card-link:visited,
a.super-card-link:hover,
a.super-card-link:active{
  color:inherit !important;
  text-decoration:none !important;
}
a.super-card-link *{
  pointer-events:none !important;
}
.detail-tabs a.detail-tab{
  display:flex;
  align-items:center;
  text-decoration:none !important;
  cursor:pointer;
  pointer-events:auto !important;
  touch-action:manipulation;
}
.detail-tabs a.detail-tab:visited,
.detail-tabs a.detail-tab:hover,
.detail-tabs a.detail-tab:active{
  color:#2586dd;
  text-decoration:none !important;
}


/* v32: force visible button click entries */
button.super-card-link{
  border:0;
  display:block !important;
  width:100%;
  text-align:left;
  text-decoration:none !important;
  color:inherit !important;
  position:relative;
  z-index:9999;
  cursor:pointer;
  pointer-events:auto !important;
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
  height: 193px;
}
button.super-card-link *{
  pointer-events:none !important;
}
.detail-tabs button.detail-tab[data-goto]{
  cursor:pointer;
  pointer-events:auto !important;
  touch-action:manipulation;
}


/* v33: keep zero-carbon and manufacturing detail hero aligned */
#detailZeroPage .detail-hero,
#detailManufacturePage .detail-hero{
  position:relative;
  z-index:1 !important;
  padding:5px 0 0 !important;
  aspect-ratio:auto !important;
  min-height:260px !important;
  overflow:visible !important;
  background-position:center top !important;
  background-size:100% 100% !important;
  background-repeat:no-repeat !important;
}

#detailZeroPage .detail-hero-inner,
#detailManufacturePage .detail-hero-inner{
  position:absolute !important;
  inset:0 !important;
  z-index:2;
  padding:0 !important;
  color:#fff;
}

#detailZeroPage .detail-hero h1,
#detailManufacturePage .detail-hero h1{
  position:absolute !important;
  left:8%;
  right:8%;
  top:12%;
  margin:0 !important;
  padding:0 !important;
  color:#fff;
  text-align:center;
  font-size:clamp(20px,5.2vw,26px);
  line-height:1.14;
  font-weight:900;
  letter-spacing:.01em;
}

#detailZeroPage .detail-ribbon-effect,
#detailManufacturePage .detail-ribbon-effect{
  position:absolute !important;
  left:50%;
  top:26% !important;
  transform:translateX(-50%);
  display:block;
  width:76%;
  max-width:318px;
  height:auto;
  margin:0 !important;
}

#detailZeroPage .detail-summary,
#detailManufacturePage .detail-summary{
  position:absolute !important;
  left:8%;
  right:8%;
  top:43%;
  margin:0 !important;
  padding:0 !important;
  color:#fff;
  font-size:clamp(11px,3.2vw,13px);
  line-height:1.58;
  font-weight:500;
  text-align:left;
}

#detailZeroPage .detail-need-label,
#detailManufacturePage .detail-need-label{
  display:inline-flex;
  align-items:center;
  margin:0 6px 0 0 !important;
  vertical-align:-0.28em;
}

#detailZeroPage .detail-need-label img,
#detailManufacturePage .detail-need-label img{
  display:block;
  width:auto;
  height:26px !important;
}

#detailZeroPage .detail-panel,
#detailManufacturePage .detail-panel{
  position:relative;
  z-index:5 !important;
  margin-top:-38px !important;
  border-radius:22px 22px 0 0;
  background:#ffffff !important;
  padding:14px 18px 28px !important;
  box-shadow:none !important;
}

#detailZeroPage .detail-brand,
#detailManufacturePage .detail-brand{
  margin:0 0 12px !important;
}

@media(max-width:370px){
  #detailZeroPage .detail-hero,
  #detailManufacturePage .detail-hero{
    min-height:248px !important;
  }

  #detailZeroPage .detail-hero h1,
  #detailManufacturePage .detail-hero h1{
    top:11%;
    font-size:18px;
  }

  #detailZeroPage .detail-ribbon-effect,
  #detailManufacturePage .detail-ribbon-effect{
    top:25% !important;
    width:80%;
  }

  #detailZeroPage .detail-summary,
  #detailManufacturePage .detail-summary{
    top:41.5%;
    left:8.5%;
    right:8.5%;
    font-size:11px;
    line-height:1.5;
  }

  #detailZeroPage .detail-need-label img,
  #detailManufacturePage .detail-need-label img{
    height:23px !important;
  }

  #detailZeroPage .detail-panel,
  #detailManufacturePage .detail-panel{
    margin-top:-34px !important;
    padding:12px 14px 24px !important;
  }
}

@media(min-width:400px){
  #detailZeroPage .detail-hero,
  #detailManufacturePage .detail-hero{
    min-height:278px !important;
  }

  #detailZeroPage .detail-panel,
  #detailManufacturePage .detail-panel{
    margin-top:-42px !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }
}


/* v34: textile detail page and unified five tabs */
.detail-tabs{
  gap:0 !important;
  justify-content:space-between;
  padding:0 14px !important;
  overflow:hidden !important;
}
.detail-tab{
  flex:0 0 auto;
  font-size:14px !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
@media(max-width:370px){
  .detail-tabs{
    padding:0 10px !important;
  }
  .detail-tab{
    font-size:13px !important;
  }
}

#detailTextilePage .detail-scroll{
  background:#ffffff !important;
}
#detailTextilePage .detail-hero{
  position:relative;
  z-index:1 !important;
  padding:5px 0 0 !important;
  aspect-ratio:auto !important;
  min-height:260px !important;
  background:url('/static/case_h5/psd_html/detail-textile-hero-20260706.png') center top/100% 100% no-repeat !important;
  overflow:visible !important;
}
#detailTextilePage .detail-hero:before,
#detailTextilePage .detail-hero:after{
  display:none !important;
}
#detailTextilePage .detail-hero-inner{
  position:absolute !important;
  inset:0 !important;
  z-index:2;
  padding:0 !important;
  color:#fff;
}
#detailTextilePage .detail-hero h1{
  position:absolute !important;
  left:8%;
  right:8%;
  top:12%;
  margin:0 !important;
  padding:0 !important;
  color:#fff;
  text-align:center;
  font-size:clamp(20px,5.2vw,26px);
  line-height:1.14;
  font-weight:900;
  letter-spacing:.01em;
}
#detailTextilePage .detail-ribbon-effect{
  position:absolute !important;
  left:50%;
  top:26% !important;
  transform:translateX(-50%);
  display:block;
  width:76%;
  max-width:318px;
  height:auto;
  margin:0 !important;
}
#detailTextilePage .detail-summary{
  position:absolute !important;
  left:8%;
  right:8%;
  top:43%;
  margin:0 !important;
  padding:0 !important;
  color:#fff;
  font-size:clamp(11px,3.2vw,13px);
  line-height:1.58;
  font-weight:500;
  text-align:left;
}
#detailTextilePage .detail-need-label{
  display:inline-flex;
  align-items:center;
  margin:0 6px 0 0 !important;
  vertical-align:-0.28em;
}
#detailTextilePage .detail-need-label img{
  display:block;
  width:auto;
  height:26px !important;
}
#detailTextilePage .detail-panel{
  position:relative;
  z-index:5 !important;
  margin-top:-38px !important;
  border-radius:22px 22px 0 0;
  background:#ffffff !important;
  padding:14px 18px 28px !important;
  box-shadow:none !important;
}
#detailTextilePage .detail-brand{
  margin:0 0 12px !important;
}
#detailTextilePage .detail-brand-effect{
  display:block;
  width:100%;
  max-width:415px;
  height:auto;
}
#detailTextilePage .detail-card-list{
  gap:18px;
}
#detailTextilePage .detail-card-item{
  background:#f2f2f2;
}
#detailTextilePage .detail-footer{
  padding-top:18px;
}
@media(max-width:370px){
  #detailTextilePage .detail-hero{
    min-height:248px !important;
  }
  #detailTextilePage .detail-hero h1{
    top:11%;
    font-size:18px;
  }
  #detailTextilePage .detail-ribbon-effect{
    top:25% !important;
    width:80%;
  }
  #detailTextilePage .detail-summary{
    top:41.5%;
    left:8.5%;
    right:8.5%;
    font-size:11px;
    line-height:1.5;
  }
  #detailTextilePage .detail-need-label img{
    height:23px !important;
  }
  #detailTextilePage .detail-panel{
    margin-top:-34px !important;
    padding:12px 14px 24px !important;
  }
}
@media(min-width:400px){
  #detailTextilePage .detail-hero{
    min-height:278px !important;
  }
  #detailTextilePage .detail-panel{
    margin-top:-42px !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }
}


/* v35: textile tab click and image order fix */
#detailManufacturePage .detail-tab[data-goto="5"]{
  cursor:pointer;
  pointer-events:auto !important;
}
#detailTextilePage .detail-hero{
  background-image:url('/static/case_h5/psd_html/detail-textile-hero-20260706.png') !important;
}


/* v36: public building page + stable tab switching */
.case-deck{
  scroll-behavior:auto !important;
}
.detail-tabs{
  height:52px !important;
  min-height:52px !important;
  gap:0 !important;
  justify-content:space-between;
  padding:0 12px !important;
  overflow:hidden !important;
}
.detail-tab{
  flex:0 0 auto;
  font-size:14px !important;
  line-height:52px !important;
  height:52px !important;
  padding:0 0 8px !important;
  margin:0 !important;
  white-space:nowrap;
}
@media(max-width:370px){
  .detail-tabs{
    padding:0 8px !important;
  }
  .detail-tab{
    font-size:12.5px !important;
  }
}

#detailZeroPage .detail-hero,
#detailManufacturePage .detail-hero,
#detailTextilePage .detail-hero,
#detailBuildingPage .detail-hero{
  position:relative;
  z-index:1 !important;
  padding:5px 0 0 !important;
  aspect-ratio:auto !important;
  min-height:260px !important;
  overflow:visible !important;
  background-position:center top !important;
  background-size:100% 100% !important;
  background-repeat:no-repeat !important;
}
#detailBuildingPage .detail-hero{
  background-image:url('/static/case_h5/psd_html/detail-building-hero-20260706.png') !important;
}
#detailZeroPage .detail-hero-inner,
#detailManufacturePage .detail-hero-inner,
#detailTextilePage .detail-hero-inner,
#detailBuildingPage .detail-hero-inner{
  position:absolute !important;
  inset:0 !important;
  z-index:2;
  padding:0 !important;
  color:#fff;
}
#detailZeroPage .detail-hero h1,
#detailManufacturePage .detail-hero h1,
#detailTextilePage .detail-hero h1,
#detailBuildingPage .detail-hero h1{
  position:absolute !important;
  left:8%;
  right:8%;
  top:12%;
  margin:0 !important;
  padding:0 !important;
  color:#fff;
  text-align:center;
  font-size:clamp(20px,5.2vw,26px);
  line-height:1.14;
  font-weight:900;
  letter-spacing:.01em;
}
#detailZeroPage .detail-ribbon-effect,
#detailManufacturePage .detail-ribbon-effect,
#detailTextilePage .detail-ribbon-effect,
#detailBuildingPage .detail-ribbon-effect{
  position:absolute !important;
  left:50%;
  top:26% !important;
  transform:translateX(-50%);
  display:block;
  width:76%;
  max-width:318px;
  height:auto;
  margin:0 !important;
}
#detailZeroPage .detail-summary,
#detailManufacturePage .detail-summary,
#detailTextilePage .detail-summary,
#detailBuildingPage .detail-summary{
  position:absolute !important;
  left:8%;
  right:8%;
  top:43%;
  margin:0 !important;
  padding:0 !important;
  color:#fff;
  font-size:clamp(11px,3.2vw,13px);
  line-height:1.58;
  font-weight:500;
  text-align:left;
}
#detailZeroPage .detail-need-label,
#detailManufacturePage .detail-need-label,
#detailTextilePage .detail-need-label,
#detailBuildingPage .detail-need-label{
  display:inline-flex;
  align-items:center;
  margin:0 6px 0 0 !important;
  vertical-align:-0.28em;
}
#detailZeroPage .detail-need-label img,
#detailManufacturePage .detail-need-label img,
#detailTextilePage .detail-need-label img,
#detailBuildingPage .detail-need-label img{
  display:block;
  width:auto;
  height:26px !important;
}
#detailZeroPage .detail-panel,
#detailManufacturePage .detail-panel,
#detailTextilePage .detail-panel,
#detailBuildingPage .detail-panel{
  position:relative;
  z-index:5 !important;
  margin-top:-38px !important;
  border-radius:22px 22px 0 0;
  background:#ffffff !important;
  padding:14px 18px 28px !important;
  box-shadow:none !important;
}
#detailBuildingPage .detail-brand{
  margin:0 0 12px !important;
}
#detailBuildingPage .detail-brand-effect{
  display:block;
  width:100%;
  max-width:415px;
  height:auto;
}
#detailBuildingPage .detail-card-list{
  gap:18px;
}
#detailBuildingPage .detail-card-item{
  background:#f2f2f2;
}
.detail-card-mini{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 12px !important;
}
.detail-card-mini-text{
  flex:1;
  min-width:0;
}
.detail-card-mini h3{
  margin:0 0 8px;
  color:#333;
  font-size:14px;
  line-height:1.48;
  font-weight:800;
}
.detail-card-mini img{
  display:block;
  width:92px;
  height:64px;
  object-fit:cover;
  border-radius:0;
}
.detail-card-mini .detail-more{
  margin-left:0;
  margin-top:0;
}
@media(max-width:370px){
  #detailZeroPage .detail-hero,
  #detailManufacturePage .detail-hero,
  #detailTextilePage .detail-hero,
  #detailBuildingPage .detail-hero{
    min-height:248px !important;
  }
  #detailZeroPage .detail-hero h1,
  #detailManufacturePage .detail-hero h1,
  #detailTextilePage .detail-hero h1,
  #detailBuildingPage .detail-hero h1{
    top:11%;
    font-size:18px;
  }
  #detailZeroPage .detail-ribbon-effect,
  #detailManufacturePage .detail-ribbon-effect,
  #detailTextilePage .detail-ribbon-effect,
  #detailBuildingPage .detail-ribbon-effect{
    top:25% !important;
    width:80%;
  }
  #detailZeroPage .detail-summary,
  #detailManufacturePage .detail-summary,
  #detailTextilePage .detail-summary,
  #detailBuildingPage .detail-summary{
    top:41.5%;
    left:8.5%;
    right:8.5%;
    font-size:11px;
    line-height:1.5;
  }
  #detailZeroPage .detail-need-label img,
  #detailManufacturePage .detail-need-label img,
  #detailTextilePage .detail-need-label img,
  #detailBuildingPage .detail-need-label img{
    height:23px !important;
  }
  #detailZeroPage .detail-panel,
  #detailManufacturePage .detail-panel,
  #detailTextilePage .detail-panel,
  #detailBuildingPage .detail-panel{
    margin-top:-34px !important;
    padding:12px 14px 24px !important;
  }
  .detail-card-mini img{
    width:82px;
    height:58px;
  }
  .detail-card-mini h3{
    font-size:13px;
  }
}
@media(min-width:400px){
  #detailZeroPage .detail-hero,
  #detailManufacturePage .detail-hero,
  #detailTextilePage .detail-hero,
  #detailBuildingPage .detail-hero{
    min-height:278px !important;
  }
  #detailZeroPage .detail-panel,
  #detailManufacturePage .detail-panel,
  #detailTextilePage .detail-panel,
  #detailBuildingPage .detail-panel{
    margin-top:-42px !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }
}


/* v37: city safety page + unified detail tabs */
.case-deck{
  scroll-behavior:auto !important;
}
.detail-tabs{
  height:52px !important;
  min-height:52px !important;
  gap:0 !important;
  justify-content:space-between;
  padding:0 12px !important;
  overflow:hidden !important;
}
.detail-tab{
  flex:0 0 auto;
  font-size:14px !important;
  line-height:52px !important;
  height:52px !important;
  padding:0 0 8px !important;
  margin:0 !important;
  white-space:nowrap;
}
@media(max-width:370px){
  .detail-tabs{
    padding:0 8px !important;
  }
  .detail-tab{
    font-size:12.5px !important;
  }
}

#detailZeroPage .detail-hero,
#detailManufacturePage .detail-hero,
#detailTextilePage .detail-hero,
#detailBuildingPage .detail-hero,
#detailCityPage .detail-hero{
  position:relative;
  z-index:1 !important;
  padding:5px 0 0 !important;
  aspect-ratio:auto !important;
  min-height:260px !important;
  overflow:visible !important;
  background-position:center top !important;
  background-size:100% 100% !important;
  background-repeat:no-repeat !important;
}
#detailCityPage .detail-hero{
  background-image:url('/static/case_h5/psd_html/detail-city-hero-20260706.png') !important;
}
#detailZeroPage .detail-hero-inner,
#detailManufacturePage .detail-hero-inner,
#detailTextilePage .detail-hero-inner,
#detailBuildingPage .detail-hero-inner,
#detailCityPage .detail-hero-inner{
  position:absolute !important;
  inset:0 !important;
  z-index:2;
  padding:0 !important;
  color:#fff;
}
#detailZeroPage .detail-hero h1,
#detailManufacturePage .detail-hero h1,
#detailTextilePage .detail-hero h1,
#detailBuildingPage .detail-hero h1,
#detailCityPage .detail-hero h1{
  position:absolute !important;
  left:8%;
  right:8%;
  top:12%;
  margin:0 !important;
  padding:0 !important;
  color:#fff;
  text-align:center;
  font-size:clamp(20px,5.2vw,26px);
  line-height:1.14;
  font-weight:900;
  letter-spacing:.01em;
}
#detailZeroPage .detail-ribbon-effect,
#detailManufacturePage .detail-ribbon-effect,
#detailTextilePage .detail-ribbon-effect,
#detailBuildingPage .detail-ribbon-effect,
#detailCityPage .detail-ribbon-effect{
  position:absolute !important;
  left:50%;
  top:26% !important;
  transform:translateX(-50%);
  display:block;
  width:76%;
  max-width:318px;
  height:auto;
  margin:0 !important;
}
#detailZeroPage .detail-summary,
#detailManufacturePage .detail-summary,
#detailTextilePage .detail-summary,
#detailBuildingPage .detail-summary,
#detailCityPage .detail-summary{
  position:absolute !important;
  left:8%;
  right:8%;
  top:43%;
  margin:0 !important;
  padding:0 !important;
  color:#fff;
  font-size:clamp(11px,3.2vw,13px);
  line-height:1.58;
  font-weight:500;
  text-align:left;
}
#detailZeroPage .detail-need-label,
#detailManufacturePage .detail-need-label,
#detailTextilePage .detail-need-label,
#detailBuildingPage .detail-need-label,
#detailCityPage .detail-need-label{
  display:inline-flex;
  align-items:center;
  margin:0 6px 0 0 !important;
  vertical-align:-0.28em;
}
#detailZeroPage .detail-need-label img,
#detailManufacturePage .detail-need-label img,
#detailTextilePage .detail-need-label img,
#detailBuildingPage .detail-need-label img,
#detailCityPage .detail-need-label img{
  display:block;
  width:auto;
  height:26px !important;
}
#detailZeroPage .detail-panel,
#detailManufacturePage .detail-panel,
#detailTextilePage .detail-panel,
#detailBuildingPage .detail-panel,
#detailCityPage .detail-panel{
  position:relative;
  z-index:5 !important;
  margin-top:-38px !important;
  border-radius:22px 22px 0 0;
  background:#ffffff !important;
  padding:14px 18px 28px !important;
  box-shadow:none !important;
}
#detailCityPage .detail-brand{
  margin:0 0 12px !important;
}
#detailCityPage .detail-brand-effect{
  display:block;
  width:100%;
  max-width:415px;
  height:auto;
}
#detailCityPage .detail-card-list{
  gap:18px;
}
#detailCityPage .detail-card-item{
  background:#f2f2f2;
}
@media(max-width:370px){
  #detailZeroPage .detail-hero,
  #detailManufacturePage .detail-hero,
  #detailTextilePage .detail-hero,
  #detailBuildingPage .detail-hero,
  #detailCityPage .detail-hero{
    min-height:248px !important;
  }
  #detailZeroPage .detail-hero h1,
  #detailManufacturePage .detail-hero h1,
  #detailTextilePage .detail-hero h1,
  #detailBuildingPage .detail-hero h1,
  #detailCityPage .detail-hero h1{
    top:11%;
    font-size:18px;
  }
  #detailZeroPage .detail-ribbon-effect,
  #detailManufacturePage .detail-ribbon-effect,
  #detailTextilePage .detail-ribbon-effect,
  #detailBuildingPage .detail-ribbon-effect,
  #detailCityPage .detail-ribbon-effect{
    top:25% !important;
    width:80%;
  }
  #detailZeroPage .detail-summary,
  #detailManufacturePage .detail-summary,
  #detailTextilePage .detail-summary,
  #detailBuildingPage .detail-summary,
  #detailCityPage .detail-summary{
    top:41.5%;
    left:8.5%;
    right:8.5%;
    font-size:11px;
    line-height:1.5;
  }
  #detailZeroPage .detail-need-label img,
  #detailManufacturePage .detail-need-label img,
  #detailTextilePage .detail-need-label img,
  #detailBuildingPage .detail-need-label img,
  #detailCityPage .detail-need-label img{
    height:23px !important;
  }
  #detailZeroPage .detail-panel,
  #detailManufacturePage .detail-panel,
  #detailTextilePage .detail-panel,
  #detailBuildingPage .detail-panel,
  #detailCityPage .detail-panel{
    margin-top:-34px !important;
    padding:12px 14px 24px !important;
  }
}
@media(min-width:400px){
  #detailZeroPage .detail-hero,
  #detailManufacturePage .detail-hero,
  #detailTextilePage .detail-hero,
  #detailBuildingPage .detail-hero,
  #detailCityPage .detail-hero{
    min-height:278px !important;
  }
  #detailZeroPage .detail-panel,
  #detailManufacturePage .detail-panel,
  #detailTextilePage .detail-panel,
  #detailBuildingPage .detail-panel,
  #detailCityPage .detail-panel{
    margin-top:-42px !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }
}


/* v38: stable tab switching + wider detail-summary margins */
.case-deck{
  overflow:hidden !important;
  overflow-x:hidden !important;
  scroll-snap-type:none !important;
  scroll-behavior:auto !important;
  -webkit-overflow-scrolling:auto !important;
  transition:none !important;
  will-change:transform;
}
.case-page{
  scroll-snap-align:none !important;
}

/* 客户之需后面的文字左右间距加大一点 */
#detailZeroPage .detail-summary,
#detailManufacturePage .detail-summary,
#detailTextilePage .detail-summary,
#detailBuildingPage .detail-summary,
#detailCityPage .detail-summary{
  left:10.5% !important;
  right:10.5% !important;
}

@media(max-width:370px){
  #detailZeroPage .detail-summary,
  #detailManufacturePage .detail-summary,
  #detailTextilePage .detail-summary,
  #detailBuildingPage .detail-summary,
  #detailCityPage .detail-summary{
    left:10% !important;
    right:10% !important;
  }
}


/* v39: about image update + fixed left-center back button on super page */
.super-panel{
  padding-left:26px !important;
}

.super-back{
  position:fixed !important;
  left:max(0px, calc((100vw - 430px) / 2)) !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:24px !important;
  height:56px !important;
  padding:0 !important;
  margin:0 !important;
  z-index:120 !important;
  border:0 !important;
  border-radius:0 10px 10px 0 !important;
  background:rgba(255,255,255,.92) !important;
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  box-shadow:0 2px 10px rgba(0,128,220,.16) !important;
  pointer-events:auto !important;
  touch-action:manipulation;
}

.super-back:before{
  content:"" !important;
  position:absolute !important;
  left:8px !important;
  top:23px !important;
  width:8px !important;
  height:8px !important;
  border-left:2px solid #28aef5 !important;
  border-bottom:2px solid #28aef5 !important;
  transform:rotate(45deg) !important;
}

@media (max-width:370px){
  .super-panel{
    padding-left:24px !important;
  }
  .super-back{
    width:22px !important;
    height:52px !important;
  }
  .super-back:before{
    left:7px !important;
    top:21px !important;
  }
}


/* v40: super back button moved outside transformed deck, fixed visible left-center */
.super-back{
  display:none !important;
}

.global-super-back{
  display:none;
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:56px;
  padding:0;
  margin:0;
  z-index:9999;
  border:0;
  border-radius:0 10px 10px 0;
  background:rgba(255,255,255,.96);
  color:transparent;
  font-size:0;
  line-height:0;
  box-shadow:0 2px 12px rgba(0,128,220,.20);
  pointer-events:auto;
  touch-action:manipulation;
}

.case-phone.show-super-back .global-super-back{
  display:block;
}

.global-super-back:before{
  content:"";
  position:absolute;
  left:8px;
  top:23px;
  width:8px;
  height:8px;
  border-left:2px solid #28aef5;
  border-bottom:2px solid #28aef5;
  transform:rotate(45deg);
}

@media(max-width:370px){
  .global-super-back{
    width:22px;
    height:52px;
  }
  .global-super-back:before{
    left:7px;
    top:21px;
  }
}


/* v41: force show left-center global back button */
.global-super-back{
  display:block !important;
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:24px !important;
  height:56px !important;
  padding:0 !important;
  margin:0 !important;
  z-index:2147483647 !important;
  border:0 !important;
  border-radius:0 10px 10px 0 !important;
  background:rgba(255,255,255,.96) !important;
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  box-shadow:0 2px 12px rgba(0,128,220,.20) !important;
  pointer-events:auto !important;
  touch-action:manipulation;
}

.global-super-back:before{
  content:"" !important;
  position:absolute !important;
  left:8px !important;
  top:23px !important;
  width:8px !important;
  height:8px !important;
  border-left:2px solid #28aef5 !important;
  border-bottom:2px solid #28aef5 !important;
  transform:rotate(45deg) !important;
}

@media(max-width:370px){
  .global-super-back{
    width:22px !important;
    height:52px !important;
  }
  .global-super-back:before{
    left:7px !important;
    top:21px !important;
  }
}


/* v42: show global back button only on super case page */
.global-super-back{
  display:none !important;
}

.case-phone.show-super-back .global-super-back{
  display:block !important;
}


/* v43: inline-controlled back button, only page 2 visible */
.global-super-back{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.case-phone.show-super-back .global-super-back,
.case-phone[data-current-page="2"] .global-super-back{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}


/* v44: back button belongs to super-page itself, visible only on super case page */
.global-super-back,
.super-back{
  display:none !important;
}

.super-page{
  position:relative !important;
}

.super-page-back{
  display:block !important;
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:22px !important;
  height:54px !important;
  padding:0 !important;
  margin:0 !important;
  z-index:9999 !important;
  border:0 !important;
  border-radius:0 10px 10px 0 !important;
  background:rgba(255,255,255,.96) !important;
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  box-shadow:0 2px 12px rgba(0,128,220,.20) !important;
  pointer-events:auto !important;
  touch-action:manipulation;
}

.super-page-back:before{
  content:"" !important;
  position:absolute !important;
  left:7px !important;
  top:22px !important;
  width:8px !important;
  height:8px !important;
  border-left:2px solid #28aef5 !important;
  border-bottom:2px solid #28aef5 !important;
  transform:rotate(45deg) !important;
}

.super-panel{
  padding-left:25px !important;
  border-radius: 18px;
  margin-top: -16px
}

@media(max-width:370px){
  .super-page-back{
    width:20px !important;
    height:50px !important;
  }
  .super-page-back:before{
    left:6px !important;
    top:20px !important;
  }
  .super-panel{
    padding-left:28px !important;
  }
}


/* v45: left-center back button on every page except home */
.about-page,
.super-page,
.detail-page{
  position:relative !important;
}

.page-left-back,
.super-page-back{
  display:block !important;
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:22px !important;
  height:54px !important;
  padding:0 !important;
  margin:0 !important;
  z-index:9999 !important;
  border:0 !important;
  border-radius:0 10px 10px 0 !important;
  background:rgba(255,255,255,.96) !important;
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  box-shadow:0 2px 12px rgba(0,128,220,.20) !important;
  pointer-events:auto !important;
  touch-action:manipulation;
}

.page-left-back:before,
.super-page-back:before{
  content:"" !important;
  position:absolute !important;
  left:7px !important;
  top:22px !important;
  width:8px !important;
  height:8px !important;
  border-left:2px solid #28aef5 !important;
  border-bottom:2px solid #28aef5 !important;
  transform:rotate(45deg) !important;
}

.about-page .about-image-wrap{
  padding-left:22px !important;
  box-sizing:border-box;
}

.detail-page .detail-panel{
  padding-left:24px !important;
}

@media(max-width:370px){
  .page-left-back,
  .super-page-back{
    width:20px !important;
    height:50px !important;
  }
  .page-left-back:before,
  .super-page-back:before{
    left:6px !important;
    top:20px !important;
  }
  .about-page .about-image-wrap{
    padding-left:20px !important;
  }
  .detail-page .detail-panel{
    padding-left:22px !important;
  }
}


/* v46: left button returns previous page, style unchanged */
.page-left-back,
.super-page-back{
  pointer-events:auto !important;
}


/* v47: previous-page back function fix, style unchanged */
.page-left-back,
.super-page-back{
  pointer-events:auto !important;
}


/* v48: about page back button overlays, does not push image */
.about-page .about-image-wrap{
  padding-left:0 !important;
  margin-left:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
}

.about-page .about-image{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
}

.about-page .page-left-back{
  left:0 !important;
  z-index:10000 !important;
}

/* v49: article detail spacing handled in /static/case_h5/css/article-detail-tight.css */

/* v50: article body line-height restored in /static/case_h5/css/article-detail-tight.css */


/* v51: dynamic category tabs and article cards */
.case-deck{
  overflow:hidden!important;
  overflow-x:hidden!important;
  scroll-snap-type:none!important;
  scroll-behavior:auto!important;
  -webkit-overflow-scrolling:auto!important;
  transition:none!important;
  will-change:transform;
}

.case-page{
  scroll-snap-align:none!important;
}

.case-dynamic-page .detail-hero{
  background-image:var(--detail-hero-bg)!important;
  background-position:center top!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
}

.detail-card-link{
  display:block;
  color:inherit!important;
  text-decoration:none!important;
}

.detail-card-link:visited,
.detail-card-link:hover,
.detail-card-link:active{
  color:inherit!important;
  text-decoration:none!important;
}

.detail-card-link .detail-more{
  color:#32b6ff!important;
}

.detail-card-mini.detail-card-link{
  display:flex;
}

.detail-card-body p:before{
  content:""!important;
}

/* 后台分类动态读取后，顶部 tab 固定一行显示 */
.detail-tabs{
  height:52px!important;
  min-height:52px!important;
  gap:0!important;
  justify-content:space-between!important;
  padding:0 12px!important;
  overflow:hidden!important;
}
.detail-tab{
  flex:0 0 auto!important;
  font-size:15px!important;
  /* line-height:52px!important; */
  height:40px!important;
  padding:0 0 8px!important;
  margin-bottom:17px !important;
  white-space:nowrap!important;
}

@media(max-width:370px){
  .detail-tabs{
    padding:0 8px!important;
  }
  .detail-tab{
    font-size:12.5px!important;
  }
}


/* v54: clean scrollLeft navigation, remove transform blank risk */
.case-deck{
  display:flex!important;
  transform:none!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:none!important;
  scroll-behavior:auto!important;
  -webkit-overflow-scrolling:touch!important;
}

.case-page{
  flex:0 0 100%!important;
  min-width:100%!important;
  width:100%!important;
  scroll-snap-align:none!important;
}


/* v55: disable user horizontal swipe, keep button/tab navigation */
.case-deck{
  overflow-x:hidden!important;
  overflow-y:hidden!important;
  touch-action:pan-y!important;
  overscroll-behavior-x:none!important;
  -webkit-overflow-scrolling:auto!important;
}

.case-page{
  touch-action:pan-y!important;
}

/* v56: article detail back button handled in /static/case_h5/css/article-detail-tight.css */

/* v57: article detail back restores source tab through return_page */

/* v58: article return_page generated after pageIndex is known */

/* v59: tab article cards follow backend article sort asc, id desc */


/* 2026-07-10：案例摘要支持最多两段，每段继续显示蓝色菱形 */
.detail-card-body p{
  position:relative;
  margin:0 0 8px;
  padding-left:17px;
}

.detail-card-body p:before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  top:.82em!important;
  width:6px!important;
  height:6px!important;
  background:#0d9ae6!important;
  transform:rotate(45deg)!important;
}

.detail-card-body p:last-of-type{
  margin-bottom:8px;
}


/* 2026-07-10 v2：摘要段落强制独立显示 */
.detail-card-body > p{
  display:block!important;
  width:100%!important;
  white-space:normal!important;
}


/* 2026-07-10 v3：两段摘要之间不额外增加段间距 */
.detail-card-body > p:not(:last-of-type){
  margin-bottom:0!important;
}

/* 2026-07-13: tab/page switching only renders the current section */
.case-deck{
  display:block!important;
  overflow:hidden!important;
  overflow-x:hidden!important;
  overflow-y:hidden!important;
}
.case-deck > .case-page{
  display:none!important;
  width:100%!important;
  min-width:100%!important;
  height:100%!important;
  flex:none!important;
}
.case-deck > .case-page.case-page-active{
  display:block!important;
}


/* 2026-07-13: city summary avoids a single orphan character on the last line */
.detail-page[data-category="城市安全"] .detail-summary{
  right:7% !important;
  letter-spacing:-0.04em;
}
@media(max-width:370px){
  .detail-page[data-category="城市安全"] .detail-summary{
    right:6.5% !important;
  }
}