:root{
  --ink:#14202B;
  --white:#ffffff;
  --paper:#F2F9F8;
  --coral:#F4507D;
  --teal:#0FA8A0;
  --deep:#06303B;
  --line:2px solid var(--ink);
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;color:var(--ink);background:var(--white);line-height:1.7;font-size:16px}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{width:1100px;max-width:calc(100% - 40px);margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.btn{display:inline-block;border:var(--line);padding:11px 22px;font-weight:700;font-size:15px;cursor:pointer;text-align:center;background:var(--white);transition:transform .12s ease}
.btn:hover{transform:translate(-2px,-2px)}
.btn-lg{padding:14px 30px;font-size:16px}
.btn-coral{background:var(--coral);color:var(--white)}
.btn-coral:hover{box-shadow:5px 5px 0 var(--ink)}
.btn-teal{background:var(--teal);color:var(--white)}
.btn-teal:hover{box-shadow:4px 4px 0 var(--ink)}
.btn-outlineteal{background:var(--white);color:var(--teal);border-color:var(--teal)}
.btn-outlineteal:hover{background:var(--teal);color:var(--white)}

.bbar{position:sticky;top:0;z-index:60;background:var(--white);border-bottom:3px solid var(--ink)}
.bbar-in{display:flex;align-items:center;gap:22px;height:68px}
.blogo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.blogo img{border:2px solid var(--ink)}
.blogo-t{display:flex;flex-direction:column;line-height:1.25}
.blogo-t strong{font-size:19px;letter-spacing:.5px}
.blogo-t small{font-size:11px;color:#41505c}
.bnav{display:flex;gap:4px;margin-left:auto}
.bnav a{padding:7px 12px;font-size:14.5px;font-weight:700;border:2px solid transparent;white-space:nowrap}
.bnav a:hover,.bnav a.on{border-color:var(--ink);background:var(--paper)}
.bbar-r{display:flex;align-items:center;gap:12px;flex-shrink:0}
.bbar-cta{padding:9px 16px;font-size:14px}
.burger{display:none;width:42px;height:42px;border:var(--line);background:var(--white);cursor:pointer;padding:8px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:3px;background:var(--ink)}

.bhe{background:var(--paper);border-bottom:3px solid var(--ink);padding:64px 0 72px;position:relative;overflow:hidden}
.bhe-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.bkick{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:1.5px;border:var(--line);padding:6px 12px;background:var(--white);margin:0 0 18px}
.bkick i{display:inline-block;width:10px;height:10px;background:var(--teal)}
h1{font-size:60px;line-height:1;margin:0 0 16px;letter-spacing:2px}
.lead{font-size:16px;margin:0 0 26px}
.bhe-acts{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.btags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 20px}
.btags li{font-size:13px;border:var(--line);background:var(--white);padding:4px 11px}
.btags li:nth-child(even){background:var(--teal);color:var(--white)}
.bnote{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.bnote .dot{width:10px;height:10px;background:var(--coral);flex-shrink:0}

.tank{position:relative;border:3px solid var(--ink);background:var(--white);box-shadow:14px 14px 0 var(--coral)}
.tank-h{display:flex;align-items:center;gap:8px;border-bottom:var(--line);padding:9px 13px;background:var(--white);font-size:12px;letter-spacing:1px}
.tank-h img{border:1.5px solid var(--ink)}
.tank-h b{font-size:12px}
.tank-h span{margin-left:auto;background:var(--teal);color:var(--white);padding:2px 8px;font-weight:700}
.tank-water{position:relative;margin:14px;border:var(--line);background:var(--deep);padding:18px 14px 14px;overflow:hidden}
.surf{position:absolute;left:0;right:0;top:0;height:6px;background:repeating-linear-gradient(90deg,var(--teal) 0 14px,transparent 14px 26px);border-bottom:2px solid var(--teal)}
.tank-fish{margin:6px 0 0;display:flex;flex-direction:column;align-items:center;gap:8px}
.tank-fish img{width:200px;max-width:62%;border:2px solid var(--white)}
.tank-fish figcaption{font-size:11px;color:var(--white);letter-spacing:1px;border:1.5px solid var(--white);padding:3px 9px;white-space:nowrap}
.bub{position:absolute;border:2px solid rgba(255,255,255,.75);width:0;height:0}
.bub{width:10px;height:10px}
.bu1{width:14px;height:14px;left:26px;bottom:34px}
.bu2{width:8px;height:8px;left:58px;bottom:78px}
.bu3{width:11px;height:11px;right:34px;bottom:44px}
.bu4{width:7px;height:7px;right:64px;bottom:92px}
.bu5{width:12px;height:12px;left:18px;top:60px}
.coral-deco{position:absolute;width:0;height:0;border:0}
.cd1{left:14px;bottom:0;width:16px;height:26px;background:var(--coral)}
.cd2{right:16px;bottom:0;width:12px;height:18px;background:var(--teal)}
.tank-gauge{display:flex;justify-content:space-between;gap:8px;border-top:var(--line);font-size:11.5px;font-weight:700;letter-spacing:1px}
.tank-gauge span,.tank-gauge b{padding:9px 12px}
.tank-gauge b{background:var(--coral);color:var(--white)}
.tank-tag{position:absolute;background:var(--white);border:var(--line);padding:8px 12px;line-height:1.35;box-shadow:5px 5px 0 var(--teal)}
.tank-tag b{display:block;font-size:13px}
.tank-tag span{font-size:11.5px;color:#41505c}
.tta{right:-14px;top:74px}
.ttb{left:-14px;bottom:58px;box-shadow:-5px 5px 0 var(--coral)}

.bpb{padding:40px 0;background:var(--white)}
.bpb-in{display:grid;grid-template-columns:repeat(4,1fr);border:3px solid var(--ink);background:var(--coral);box-shadow:-12px 12px 0 var(--teal)}
.bp{background:var(--white);padding:24px 16px;text-align:center;border-right:2px solid var(--ink);min-width:0}
.bp:last-child{border-right:0}
.bp b{display:block;font-size:30px;line-height:1.2;color:var(--coral)}
.bp span{font-size:13.5px;font-weight:700}

.sec-h{text-align:center;max-width:720px;margin:0 auto 42px}
.sec-h .bkick{margin-bottom:16px}
.sec-h h2{font-size:30px;margin:0 0 12px;line-height:1.35}
.sec-sub{margin:0;font-size:15px;color:#41505c}

.bft{padding:72px 0;background:var(--white);border-top:3px solid var(--ink)}
.blog{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bc{background:var(--white);border:var(--line);padding:26px 22px;box-shadow:-14px 10px 0 var(--coral)}
.bc:nth-child(even){box-shadow:-14px 10px 0 var(--teal)}
.bc-no{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.bc-no span{background:var(--coral);color:var(--white);font-weight:700;font-size:13px;padding:3px 10px}
.bc-no.teal span{background:var(--teal)}
.bc-no i{flex:1;height:0;border-top:2px dashed var(--ink)}
.bc h3{margin:0 0 10px;font-size:18px}
.bc p{margin:0;font-size:14.5px;color:#2e3b46}

.bga{padding:72px 0;background:var(--paper);border-top:3px solid var(--ink)}
.btunnel{display:flex;justify-content:center;align-items:flex-start;gap:18px}
.bv{position:relative;width:150px;margin:0;border:var(--line);background:var(--white);padding:9px;box-shadow:16px 8px 0 var(--teal)}
.v2,.v5{margin-top:30px}
.v4{margin-top:16px}
.bv img{width:100%;border:1.5px solid var(--ink)}
.bv figcaption{font-size:11px;font-weight:700;text-align:center;padding-top:8px;letter-spacing:.5px}
.rivet{position:absolute;width:8px;height:8px;background:var(--coral);z-index:2}
.bv:nth-child(even) .rivet{background:var(--teal)}
.rtl{top:3px;left:3px}.rtr{top:3px;right:3px}.rbl{bottom:3px;left:3px}.rbr{bottom:3px;right:3px}

.bfl{padding:72px 0;background:var(--white);border-top:3px solid var(--ink)}
.bdepth{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bd{border:var(--line);background:var(--paper);padding:28px 24px;position:relative;box-shadow:10px 16px 0 var(--coral)}
.bd:nth-child(2){box-shadow:10px 16px 0 var(--teal)}
.bd-m{display:inline-block;background:var(--ink);color:var(--white);font-weight:700;font-size:13px;letter-spacing:1px;padding:4px 12px;margin-bottom:16px}
.bd-m.teal{background:var(--teal)}
.bd h3{margin:0 0 10px;font-size:18.5px}
.bd p{margin:0;font-size:14.5px;color:#2e3b46}

.bak{padding:72px 0;background:var(--paper);border-top:3px solid var(--ink)}
.bbook{max-width:880px;margin:0 auto;border:var(--line);background:var(--white);box-shadow:0 14px 0 var(--teal)}
.bq{border-bottom:var(--line)}
.bq:last-child{border-bottom:0}
.bq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 22px}
.bq summary::-webkit-details-marker{display:none}
.bq-n{background:var(--teal);color:var(--white);font-size:12px;font-weight:700;padding:3px 9px;flex-shrink:0}
.bq-t{font-weight:700;font-size:15.5px;flex:1}
.bq-x{width:14px;height:14px;position:relative;flex-shrink:0}
.bq-x::before,.bq-x::after{content:"";position:absolute;background:var(--ink);top:6px;left:0;width:14px;height:2px}
.bq-x::after{transform:rotate(90deg)}
.bq[open] .bq-x::after{display:none}
.bq-a{padding:0 22px 18px 22px}
.bq-a p{margin:0;font-size:14.5px;color:#2e3b46;border-left:4px solid var(--coral);padding:2px 0 2px 14px}

.bvo{padding:72px 0;background:var(--white);border-top:3px solid var(--ink)}
.bbottles{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start}
.bb{border:var(--line);background:var(--paper);padding:0 20px 18px;box-shadow:-16px 8px 0 var(--teal)}
.bb:nth-child(even){box-shadow:-16px 8px 0 var(--coral)}
.bb-cap{display:block;height:24px;margin:0 -20px 16px;border-bottom:var(--line);background:var(--coral);position:relative}
.bb.teal-cap .bb-cap{background:var(--teal)}
.bb-cap::before,.bb-cap::after{content:"";position:absolute;top:6px;width:7px;height:12px;background:var(--white);border:1.5px solid var(--ink)}
.bb-cap::before{left:14px}.bb-cap::after{right:14px}
.bb p{margin:0 0 14px;font-size:14px;color:#2e3b46}
.bb footer{display:flex;flex-direction:column;gap:2px;border-top:2px dashed var(--ink);padding-top:10px}
.bb footer b{font-size:13px}
.bb time{font-size:12px;color:#5a6772}

.bct{padding:76px 0;background:var(--deep);border-top:3px solid var(--ink)}
.bct-box{max-width:760px;margin:0 auto;text-align:center;background:var(--white);border:3px solid var(--ink);padding:46px 36px;box-shadow:12px -14px 0 var(--coral)}
.bct-sign{display:inline-block;margin:0 0 16px}
.bct-sign span{font-size:12px;font-weight:700;letter-spacing:2px;background:var(--teal);color:var(--white);padding:5px 14px}
.bct-box h2{font-size:30px;margin:0 0 14px}
.bct-p{margin:0 0 26px;font-size:15.5px;color:#2e3b46}
.bct-note{margin:18px 0 0;font-size:12.5px;color:#5a6772}

.bfoot{background:var(--ink);color:var(--white);padding:34px 0 30px;text-align:center}
.bfoot-brand{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:15px;margin-bottom:16px}
.bfoot-brand img{border:2px solid var(--white)}
.bfoot-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;margin-bottom:14px}
.bfoot-nav a:hover{color:var(--coral)}
.bfoot-icp{margin:0 0 4px;font-size:13px;color:#cdd6dc}
.bfoot-c{margin:0;font-size:12.5px;color:#93a0aa}

.backtop{position:fixed;right:22px;bottom:40px;width:46px;height:46px;border:var(--line);background:var(--teal);color:var(--white);font-size:20px;font-weight:700;cursor:pointer;z-index:70;opacity:0;pointer-events:none;transition:opacity .2s}
.backtop.show{opacity:1;pointer-events:auto}

.rv{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}

@media (max-width:900px){
  .bnav{position:absolute;top:68px;left:0;right:0;background:var(--white);border-bottom:3px solid var(--ink);flex-direction:column;padding:10px 20px 16px;display:none;gap:2px}
  .bnav.open{display:flex}
  .bnav a{border-bottom:1.5px dashed #c3ccd3}
  .burger{display:flex}
  .bbar-cta{display:none}
  .bhe{padding:42px 0 52px}
  .bhe-in{grid-template-columns:1fr;gap:38px}
  h1{font-size:46px}
  .tank{width:100%;max-width:430px;margin:0 auto;box-shadow:9px 9px 0 var(--coral)}
  .tank-tag{position:static;display:block;margin:0 14px 10px;box-shadow:4px 4px 0 var(--teal)}
  .ttb{box-shadow:-4px 4px 0 var(--coral)}
  .bpb-in{grid-template-columns:repeat(2,1fr);box-shadow:8px 8px 0 var(--teal)}
  .bp{border-bottom:2px solid var(--ink)}
  .bp:nth-child(2){border-right:0}
  .bp:nth-child(3),.bp:nth-child(4){border-bottom:0}
  .bp:nth-child(3){border-right:2px solid var(--ink)}
  .blog{grid-template-columns:1fr;gap:22px}
  .bc{box-shadow:8px 10px 0 var(--coral)!important}
  .btunnel{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:6px 4px 18px;-webkit-overflow-scrolling:touch}
  .bv{flex:0 0 150px;margin-top:0!important;box-shadow:10px 6px 0 var(--coral)}
  .bdepth{grid-template-columns:1fr;gap:22px}
  .bd{box-shadow:8px 10px 0 var(--teal)!important}
  .bbook{box-shadow:0 10px 0 var(--teal)}
  .bbottles{grid-template-columns:1fr;gap:22px}
  .bb{box-shadow:-8px 10px 0 var(--coral)!important}
  .bct-box{box-shadow:8px -10px 0 var(--teal)}
  .sec-h h2{font-size:24px}
  .bct-box h2{font-size:24px}
  .backtop{bottom:142px}
}
@media (max-width:480px){
  .wrap{max-width:calc(100% - 28px)}
  h1{font-size:38px}
  .lead{font-size:15px}
  .btn-lg{width:100%}
  .bhe-acts{flex-direction:column}
  .bp b{font-size:24px}
  .bq summary{padding:15px 16px;gap:10px}
  .bq-a{padding:0 16px 16px}
  .bq-t{font-size:14.5px}
  .bct-box{padding:36px 22px}
}