:root{
  --max:1200px;
  --text:#222;
  --muted:#777;
  --muted2:#999;
  --line:#ededed;
  --gold:#b88a3a;
  --gold2:#d1b07a;
  --red:#b52023;
  --shadow: 0 16px 44px rgba(0,0,0,.12);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif: "Songti SC","STSong","SimSun",serif;
  --kaiti: "KaiTi","STKaiti","Kaiti SC",serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:var(--font); color:var(--text); background:#fff}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}

.topbar{
  position:sticky;
  top:0;
  z-index:60;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.topbar .row{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:240px;
}
.brand img{width:28px; height:28px}
.brand .title{
  font-weight:800;
  letter-spacing:.6px;
  color:var(--gold);
  font-size:20px;
  line-height:1;
  white-space:nowrap;
}
.nav{
  display:flex;
  gap:32px;
  align-items:center;
  justify-content:center;
  flex:1;
  min-width:0;
}
.nav a{
  font-size:20px;
  color:#333;
  padding:10px 0;
  position:relative;
  white-space:nowrap;
  letter-spacing:.08em;
}
.nav a.active{color:#000}
.nav a.active:after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-8px;
  width:54px;
  height:2px;
  background:var(--gold);
}
.right{
  display:flex;
  align-items:center;
  gap:10px;
}
.menuBtn{
  display:none;
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  padding:8px 12px;
  font-size:13px;
  cursor:pointer;
}

.mobilePanel{
  display:none;
  border-top:1px solid var(--line);
  background:#fff;
}
.mobilePanel.open{display:block}
.mobilePanel .inner{
  padding:12px 18px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mobilePanel a{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 12px;
  font-size:14px;
  color:#333;
}

.hero{
  position:relative;
  height:560px;
  overflow:hidden;
  background:#000;
}
.slides{
  position:absolute;
  inset:0;
}
.slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity .35s ease;
  transform:scale(1.01);
  pointer-events:none;
}
.slide.active{opacity:1}
.slide.s1{
  background-image:url("../images/hero-2.jpg");
}
.slide.s2{
  background-image:url("../images/hero-1.jpg");
}
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 520px at 20% 40%, rgba(0,0,0,.08), rgba(0,0,0,.42));
  pointer-events:none;
}
.heroOverlay{
  position:absolute;
  inset:0;
}
.heroPane{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.heroPane.active{
  opacity:1;
  pointer-events:auto;
}
.heroPane1 .heroContent{
  position:absolute;
  top:50%;
  left:68%;
  transform:translate(-50%,-50%);
  text-align:center;
  color:#fff;
  width:320px;
  z-index:2;
}
.heroPane2 .heroBox{
  position:absolute;
  top:50%;
  left:30%;
  transform:translate(-50%,-50%);
  width:520px;
  height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-image:
    linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34)),
    linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34)),
    linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34)),
    linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34));
  background-repeat:no-repeat;
  background-size:
    calc(100% - 70px) 1px,
    1px calc(100% - 70px),
    calc(100% - 70px) 1px,
    1px calc(100% - 70px);
  background-position:
    35px 0,
    100% 35px,
    35px 100%,
    0 35px;
}
.heroPane2 .heroBox:before{
  content:"";
  position:absolute;
  top:-10px;
  left:22px;
  width:1px;
  height:36px;
  background:rgba(255,255,255,.34);
  box-shadow:
    -22px 22px 0 0 rgba(255,255,255,.34),
    22px 0 0 0 rgba(255,255,255,.34);
}
.heroPane2 .heroBox:after{
  content:"";
  position:absolute;
  right:22px;
  bottom:-10px;
  width:1px;
  height:36px;
  background:rgba(255,255,255,.34);
  box-shadow:
    22px -22px 0 0 rgba(255,255,255,.34),
    -22px 0 0 0 rgba(255,255,255,.34);
}
.heroCircle{
  position:absolute;
  top:50%;
  left:68%;
  transform:translate(-50%,-50%);
  width:340px;
  height:340px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.44);
  z-index:1;
}
.heroCircle:before,
.heroCircle:after{
  content:"";
  position:absolute;
  background:rgba(255,255,255,.55);
}
.heroCircle:before{
  width:2px;
  height:42px;
  top:-24px;
  left:50%;
  transform:translateX(-50%) rotate(20deg);
  box-shadow:
    116px 66px 0 0 rgba(255,255,255,.55),
    -115px 126px 0 0 rgba(255,255,255,.55),
    105px 196px 0 0 rgba(255,255,255,.55);
}
.heroCircle:after{
  width:46px;
  height:1px;
  left:-18px;
  top:128px;
  box-shadow:
    235px -70px 0 0 rgba(255,255,255,.55),
    242px 137px 0 0 rgba(255,255,255,.55);
}
.heroContent{
  position:relative;
  text-align:center;
  color:#fff;
  width:100%;
  padding:0 16px;
}
.heroContent1{padding:0}
.heroContent2{
  padding:0;
  width:420px;
}
.heroTop{
  font-size:13px;
  letter-spacing:.10em;
  opacity:.95;
  margin-top:-4px;
}
.heroSeal{
  width:86px;
  height:86px;
  margin:14px auto 10px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
.heroSeal.large{
  width:148px;
  height:148px;
  margin:14px auto 12px;
}
.heroBottom{
  font-size:12px;
  letter-spacing:.14em;
  opacity:.92;
}
.heroPane2 .heroTop{
  font-size:28px;
  letter-spacing:.18em;
  opacity:.92;
  margin-top:0;
  margin-bottom:16px;
}
.heroPane2 .heroSeal{
  width:260px;
  height:260px;
  margin:0 auto 16px;
}
.heroPane2 .heroBottom{
  font-size:22px;
  letter-spacing:.34em;
  opacity:.90;
}
.heroDots{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  z-index:3;
}
.heroDot{
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.62);
  cursor:pointer;
  transition:transform .16s ease, background .16s ease;
}
.heroDot.active{
  background:#fff;
  transform:scale(1.25);
}

.stats{
  position:relative;
  background:#fff;
  padding:18px 0 22px;
  overflow:hidden;
}
.stats:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1800' height='240' viewBox='0 0 1800 240'%3E%3Cg fill='none' stroke='%23eeeeee' stroke-width='2'%3E%3Cpath d='M0 70 C 220 10, 420 140, 640 70 S 1040 140, 1260 70 S 1560 140, 1800 70'/%3E%3Cpath d='M0 120 C 240 55, 420 190, 680 120 S 1080 190, 1340 120 S 1580 190, 1800 120'/%3E%3Cpath d='M0 170 C 220 115, 420 230, 640 170 S 1040 230, 1260 170 S 1560 230, 1800 170'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center 55%;
  background-size:1800px 240px;
  opacity:.65;
  pointer-events:none;
}
.stats .container{position:relative}
.statsTitle{
  text-align:center;
  font-family:var(--kaiti);
  color:#c61d27;
  font-size:25px;
  letter-spacing:.18em;
  margin:0 0 14px;
  font-weight:700;
  line-height:1.55;
  text-shadow: 0 1px 0 rgba(198,29,39,.06);
}
.statsGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:36px;
  align-items:center;
  justify-items:center;
  max-width:1080px;
  margin:0 auto;
}
.stat{
  text-align:center;
  padding:2px 0;
  min-width:140px;
}
.stat .num{
  font-size:37px;
  font-weight:300;
  color:#2f3135;
  line-height:1.08;
  font-family: var(--font);
}
.stat .label{
  font-size:17px;
  color:#b1894b;
  margin-top:8px;
  letter-spacing:0;
  font-weight:600;
}

.section{
  background:#fff;
  padding:34px 0;
}
.secHead{
  text-align:center;
  margin-bottom:18px;
}
.secHead h2{
  margin:0;
  font-size:22px;
  color:var(--gold);
  font-family:var(--serif);
  letter-spacing:.08em;
}
.secHead .sub{
  margin-top:6px;
  font-size:12px;
  color:#b9b9b9;
  letter-spacing:.22em;
}

.aboutGrid{
  display:grid;
  grid-template-columns: 1.05fr 1.25fr;
  gap:22px;
  align-items:start;
}
.aboutPic{
  position:relative;
  border:1px solid var(--line);
  background:#fff;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.aboutPic img{width:100%; height:100%; object-fit:cover}
.aboutPic .cornerLogo{
  position:absolute;
  left:10px;
  top:10px;
  width:40px;
  height:40px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
}
.aboutPic .cornerLogo img{width:28px; height:28px}

.aboutText h3{
  margin:0;
  font-size:22px;
  color:#a06e18;
  font-weight:800;
  letter-spacing:.08em;
}
.aboutText .divider{
  width:54px;
  height:2px;
  background:var(--gold2);
  margin:10px 0 12px;
}
.aboutText p{
  margin:0;
  font-size:17px;
  line-height:2.05;
  color:#444;
}
.aboutText p + p{margin-top:10px}
.aboutBullets{
  margin-top:90px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.aboutBullets .b{
  padding-left:12px;
  border-left:2px solid #d72a2e;
  color:#d72a2e;
  font-size:16px;
  line-height:1.6;
  letter-spacing:.04em;
  font-weight:650;
}

.team{
  background:
    radial-gradient(900px 360px at 50% 10%, rgba(184,138,58,.12), transparent 62%),
    linear-gradient(180deg, #fbfbfb, #ffffff 50%, #fbfbfb);
  position:relative;
  overflow:hidden;
}
.team .container{
  max-width:1320px;
}
.team .secHead h2{
  font-size:25px;
}
.team .secHead .sub{
  font-size:15px;
}
.team:before{
  content:"";
  position:absolute;
  inset:-80px -40px auto -40px;
  height:260px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='300' viewBox='0 0 1600 300'%3E%3Cg fill='none' stroke='%23ededed' stroke-width='2'%3E%3Cpath d='M0 210 C 200 250, 300 160, 520 210 S 860 160, 1100 210 S 1400 160, 1600 210'/%3E%3Cpath d='M0 245 C 220 285, 360 190, 600 245 S 980 190, 1220 245 S 1420 190, 1600 245'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:1600px 300px;
  opacity:.9;
  pointer-events:none;
}
.team .container{position:relative}
.teamGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:78px;
  align-items:start;
  margin-top:10px;
}
.member{
  text-align:center;
  padding:18px 18px 0;
}
.portrait{
  width:200px;
  height:200px;
  margin:0 auto 30px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.portrait:before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:50%;
  border:2px solid rgba(184,138,58,.35);
  box-shadow: 0 0 0 10px rgba(184,138,58,.06);
}
.portrait:after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.05);
}
.portrait img{
  width:176px;
  height:176px;
  border-radius:50%;
  object-fit:cover;
  background:#fff;
}
.member .name{
  color:var(--gold);
  font-weight:850;
  letter-spacing:.12em;
  margin-top:18px;
  font-size:17px;
}
.member .desc{
  margin-top:30px;
  font-size:15px;
  color:#444;
  line-height:1.9;
  text-align:left;
}

.gallery .container,
.certs .container{
  max-width:1320px;
}

.certs{
  background:#fff;
  padding:34px 0 38px;
}
.certs .secHead{
  text-align:left;
  margin-bottom:20px;
}
.certs .secHead h2,
.certs .secHead .sub{
  text-align:left;
}
.certStrip{
  position:relative;
  overflow:hidden;
  padding:6px 0;
}
.certStrip:before,
.certStrip:after{
  content:"";
  position:absolute;
  top:0;
  width:120px;
  height:100%;
  pointer-events:none;
  z-index:2;
}
.certStrip:before{
  left:0;
  background:linear-gradient(90deg, #fff, rgba(255,255,255,0));
}
.certStrip:after{
  right:0;
  background:linear-gradient(270deg, #fff, rgba(255,255,255,0));
}
.certTrack{
  display:flex;
  gap:26px;
  align-items:flex-start;
  width:max-content;
  animation: certScroll 26s linear infinite;
}
.certStrip:hover .certTrack{animation-play-state: paused}
@keyframes certScroll{
  0%{transform:translateX(-54px)}
  100%{transform:translateX(calc(-50% - 54px))}
}
.cert{
  width:150px;
  flex:0 0 auto;
  text-align:center;
}
.cert img{
  width:150px;
  height:100px;
  object-fit:contain;
  background:#fff;
  border:1px solid var(--line);
}
.cert figcaption{
  margin-top:8px;
  font-size:11px;
  color:#666;
  line-height:1.45;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.gallery{
  padding:36px 0 54px;
}
.galleryGrid{
  display:grid;
  grid-template-columns: 1fr 1.25fr;
  gap:14px;
  align-items:stretch;
}
.galleryGrid .leftImg{
  border:1px solid var(--line);
  background:#fff;
  overflow:hidden;
  position:relative;
}
.galleryGrid .leftImg img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.galleryGrid .leftImg .divider{
  position:absolute;
  top:0;
  bottom:0;
  right:-8px;
  width:1px;
  background:var(--line);
  pointer-events:none;
}
.galleryRight{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap:14px;
}
.gItem{
  border:1px solid var(--line);
  background:#fff;
  overflow:hidden;
}
.gItem img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.page{
  padding:26px 0 56px;
}
.pageHead{
  border-bottom:1px solid var(--line);
  padding:16px 0;
  margin-bottom:18px;
}
.pageHead .title{
  font-family:var(--serif);
  color:var(--gold);
  font-size:20px;
  letter-spacing:.08em;
  margin:0;
}
.pageHead .sub{
  color:var(--muted2);
  font-size:12px;
  letter-spacing:.22em;
  margin-top:6px;
}

.chronicIntro{
  position:relative;
  padding:16px 0 26px;
  background:#fff;
  overflow:hidden;
}
.chronicIntro:before{
  content:"";
  position:absolute;
  left:50%;
  top:-18px;
  transform:translateX(-50%);
  width:1800px;
  height:220px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1800' height='220' viewBox='0 0 1800 220'%3E%3Cg fill='none' stroke='%23ededed' stroke-width='2'%3E%3Cpath d='M0 80 C 230 20, 430 150, 660 80 S 1080 150, 1310 80 S 1570 150, 1800 80'/%3E%3Cpath d='M0 130 C 250 70, 430 200, 700 130 S 1120 200, 1390 130 S 1600 200, 1800 130'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:1800px 220px;
  opacity:.85;
  pointer-events:none;
}
.chronicHero{
  height:220px;
  border:1px solid var(--line);
  background-image:url("../images/chronic-banner.png"), url("../images/about.jpg");
  background-size:cover;
  background-position:center;
  margin-bottom:18px;
}
.chronicTop{
  position:relative;
  z-index:1;
  text-align:left;
  padding:2px 0 10px;
}
.chronicTopLabel{
  font-size:14px;
  color:#b1894b;
  letter-spacing:.12em;
  font-weight:700;
}
.chronicGrid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
}
.chronicCard{
  border:1px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.86);
  padding:18px 16px;
  text-align:center;
}
.chronicNum{
  font-size:34px;
  color:#333;
  font-weight:500;
  font-family: var(--font);
}
.chronicName{
  margin-top:10px;
  font-size:16px;
  font-weight:800;
  color:#a06e18;
  letter-spacing:.06em;
}
.chronicSub{
  margin-top:6px;
  font-size:12px;
  color:#8a8a8a;
  letter-spacing:.12em;
}
.chronicBottom{
  position:relative;
  z-index:1;
  text-align:center;
  padding:22px 0 0;
}
.chronicBottomTitle{
  font-size:15px;
  color:#b1894b;
  letter-spacing:.14em;
  font-weight:800;
}
.chronicBottomSub{
  margin-top:6px;
  font-size:12px;
  color:var(--muted2);
  letter-spacing:.22em;
}
.chronicBlock{
  padding:18px 0 8px;
}
.chronicH{
  margin:0;
  font-size:18px;
  color:#333;
  font-weight:800;
  letter-spacing:.04em;
}
.chronicLine{
  width:66px;
  height:2px;
  background:var(--gold2);
  margin:12px 0 14px;
}
.chronicP{
  margin:0;
  font-size:15px;
  line-height:2.0;
  color:#444;
}

.footer{
  background:linear-gradient(90deg, #3b1f0b, #5b2f11);
  color:#fff;
}
.footerInner{
  position:relative;
  padding:18px 18px 46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.footerLeft{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
}
.footerLogo{
  width:70px;
  height:70px;
  flex:0 0 auto;
}
.footerText{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.footerLine{
  font-size:18px;
  line-height:1.45;
  font-weight:500;
  opacity:.98;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.footerLine .label{
  color:rgba(255,255,255,.92);
  margin-right:6px;
}
.footerLine a{color:#fff; text-decoration:none}
.footerText .footerLine:last-child{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  font-size:13px;
  color:rgba(255,255,255,.78);
  font-weight:400;
  white-space:nowrap;
  text-align:center;
}
.footerText .footerLine:last-child .label{display:none}
.footerRight{
  display:flex;
  align-items:center;
  gap:0;
  flex:0 0 auto;
}
.qr{
  width:80px;
  height:80px;
  background:#fff;
  padding:6px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.qrLabel{
  display:none;
}
.toTop{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12);
  color:#fff;
  border-radius:8px;
  cursor:pointer;
  display:none;
}
.toTop.show{display:inline-flex; align-items:center; justify-content:center}

@media (max-width: 1020px){
  .nav{display:none}
  .menuBtn{display:inline-flex}
  .hero{height:420px}
  .heroPane1 .heroContent{left:62%; width:260px}
  .heroCircle{left:62%; width:280px; height:280px}
  .heroPane2 .heroBox{left:34%; width:420px; height:420px}
  .heroContent2{width:340px}
  .heroPane2 .heroTop{font-size:22px; margin-bottom:12px}
  .heroPane2 .heroSeal{width:200px; height:200px; margin:0 auto 12px}
  .heroPane2 .heroBottom{font-size:18px}
  .statsGrid{grid-template-columns: repeat(2, 1fr)}
  .stat{min-width:0}
  .aboutGrid{grid-template-columns: 1fr}
  .teamGrid{grid-template-columns: 1fr}
  .portrait{width:180px; height:180px}
  .portrait img{width:158px; height:158px}
  .certStrip:before,.certStrip:after{width:70px}
  .galleryGrid{grid-template-columns: 1fr}
  .galleryRight{grid-template-columns: 1fr 1fr}
  .footerInner{flex-direction:column; align-items:flex-start; padding-bottom:52px}
  .footerLogo{width:56px; height:56px}
  .footerLine{font-size:15px; white-space:normal}
  .footerText .footerLine:last-child{
    left:18px;
    right:18px;
    bottom:12px;
    transform:none;
    text-align:left;
  }
  .footerRight{align-self:flex-end}
  .qr{width:68px; height:68px}
  .toTop{top:12px; transform:none}
}
@media (max-width: 520px){
  .hero{height:360px}
  .heroPane1 .heroContent{left:62%; width:220px}
  .heroCircle{left:62%; width:230px; height:230px}
  .heroPane2 .heroBox{left:50%; width:280px; height:280px}
  .heroContent2{width:230px}
  .heroPane2 .heroTop{font-size:16px; margin-bottom:10px}
  .heroPane2 .heroSeal{width:140px; height:140px; margin:0 auto 10px}
  .heroPane2 .heroBottom{font-size:14px; letter-spacing:.22em}
  .heroTop{font-size:12px}
  .heroBottom{font-size:11px}
  .heroSeal.large{width:112px; height:112px; margin:10px auto}
  .stats{padding:20px 0 24px}
  .statsTitle{font-size:18px; letter-spacing:.08em; margin-bottom:12px}
  .statsGrid{gap:18px}
  .stat .num{font-size:28px}
  .stat .label{font-size:12px}
  .footerInner{padding-top:16px}
  .footerLeft{align-items:flex-start}
  .footerLogo{width:50px; height:50px}
  .footerLine{font-size:14px}
  .galleryRight{grid-template-columns: 1fr}
  .galleryRight{grid-template-rows: auto}
  .chronicGrid{grid-template-columns: 1fr 1fr}
  .chronicHero{height:150px}
}