* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { color: #14223b; background: #f4f6f8; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; letter-spacing: 0; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.heade { position: sticky; top: 0; z-index: 20; height: 76px; color: #ffffff; background: #14223b; border-bottom: 4px solid #22a56f; }
.navbox, .heroin, .wraper, .footin { width: calc(100% - 40px); max-width: 1200px; margin: 0 auto; }
.navbox { display: flex; align-items: center; height: 72px; gap: 22px; }
.brand { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.brand img { width: 44px; height: 44px; object-fit: cover; background: #ffffff; border: 2px solid #ffffff; }
.brand span { display: grid; gap: 2px; }
.brand b { font-size: 16px; }
.brand small { color: #7fd4ae; font-size: 9px; }
.navlis { display: flex; flex: 1; justify-content: center; gap: 18px; }
.navlis a { color: #e4e9ef; font-size: 13px; font-weight: 700; white-space: nowrap; }
.navlis a:hover { color: #7fd4ae; }
.getapp { display: inline-flex; align-items: center; justify-content: center; min-height: 43px; padding: 0 17px; gap: 7px; color: #ffffff; background: #d94742; border: 1px solid #ffffff; font-size: 13px; font-weight: 900; white-space: nowrap; }
.menub { display: none; width: 42px; height: 42px; color: #ffffff; background: transparent; border: 1px solid #738098; font-size: 22px; }
.hero { background: #e8edf2; border-bottom: 1px solid #b3bdca; }
.heroin { display: grid; grid-template-columns: 1fr 1fr; min-height: 660px; background: #ffffff; border-right: 1px solid #aeb8c4; border-left: 1px solid #aeb8c4; }
.herotx { display: flex; flex-direction: column; justify-content: center; padding: 65px 60px; border-right: 1px solid #aeb8c4; }
.docnum { display: flex; align-self: flex-start; margin-bottom: 27px; border: 1px solid #8f9aa8; }
.docnum span, .docnum b { padding: 7px 10px; font-size: 9px; }
.docnum span { color: #ffffff; background: #14223b; }
.docnum b { color: #247451; background: #dff4e9; }
.titlex { display: flex; align-items: center; gap: 12px; }
.titlex img { width: 65px; height: 65px; object-fit: cover; border: 3px solid #14223b; }
.titlex p { display: flex; flex-direction: column; font-size: 18px; font-weight: 900; }
.titlex small { margin-top: 4px; color: #247451; font-size: 10px; }
h1 { margin-top: 24px; color: #14223b; font-size: 55px; line-height: 1.15; }
.leadtx { max-width: 530px; margin-top: 22px; color: #5c6879; font-size: 15px; line-height: 1.9; }
.herobt { display: flex; align-items: center; margin-top: 30px; gap: 20px; }
.herobt a { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 24px; gap: 9px; color: #ffffff; background: #d94742; border: 2px solid #14223b; box-shadow: 5px 5px 0 #14223b; font-weight: 900; }
.herobt span { color: #667386; font-size: 10px; }
.herobt span i { color: #22a56f; }
.checks { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 34px; border: 1px solid #9faab7; }
.checks span { padding: 10px 6px; border-right: 1px solid #9faab7; font-size: 11px; font-weight: 800; text-align: center; }
.checks span:last-child { border-right: 0; }
.checks i { color: #22a56f; }
.verify { position: relative; background: #d9e1e8; }
.verhd { display: flex; align-items: center; height: 58px; padding: 0 24px; gap: 15px; color: #ffffff; background: #14223b; }
.verhd span { color: #7fd4ae; font-size: 9px; }
.verhd b { font-size: 14px; }
.verhd em { margin-left: auto; padding: 5px 8px; color: #14223b; background: #7fd4ae; font-size: 9px; font-style: normal; font-weight: 900; }
.screen { position: absolute; right: 50%; bottom: 0; width: 272px; height: 535px; padding: 12px 12px 0; overflow: hidden; background: #ffffff; border: 2px solid #14223b; border-bottom: 0; transform: translateX(50%); box-shadow: 12px 0 0 #a7b4c1; }
.screen img { display: block; width: 100%; height: auto; }
.seal { position: absolute; z-index: 2; top: 135px; right: 22px; display: flex; align-items: center; flex-direction: column; width: 112px; height: 112px; justify-content: center; color: #ffffff; background: #22a56f; border: 5px double #ffffff; border-radius: 50%; transform: rotate(8deg); }
.seal i { font-size: 25px; }
.seal b { margin-top: 3px; font-size: 14px; }
.seal span { margin-top: 2px; font-size: 7px; }
.codes { position: absolute; top: 97px; left: 18px; display: grid; gap: 7px; }
.codes span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 27px; color: #718094; background: #ffffff; border: 1px solid #9ba7b5; font-size: 9px; }
.codes span:first-child { color: #ffffff; background: #d94742; border-color: #d94742; }
.serial { position: absolute; bottom: 24px; left: 17px; color: #6e7b8a; font-size: 8px; writing-mode: vertical-rl; }
.secton { padding: 92px 0; }
.secttl { margin-bottom: 45px; color: #14223b; font-size: 32px; font-weight: 900; text-align: center; }
.secttl::after { display: block; width: 55px; height: 3px; margin: 13px auto 0; background: #22a56f; content: ""; }
.showls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.showls figure { background: #ffffff; border: 1px solid #9ea9b6; }
.showls figure > div { display: flex; align-items: center; justify-content: space-between; height: 45px; padding: 0 12px; color: #ffffff; background: #14223b; }
.showls figure > div span { color: #7fd4ae; font-size: 10px; }
.showls figure > div b { font-size: 12px; }
.showls img { display: block; width: 100%; height: auto; }
.showls figcaption { padding: 14px; color: #657184; border-top: 3px solid #22a56f; font-size: 11px; }
.featbg { background: #e3f1ea; border-top: 1px solid #b2cabd; border-bottom: 1px solid #b2cabd; }
.featls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.featit { position: relative; min-height: 215px; padding: 28px; background: #ffffff; border: 1px solid #a9b8b0; border-left: 5px solid #22a56f; }
.featit > span { position: absolute; top: 21px; right: 22px; color: #bdc8c2; font-size: 27px; font-weight: 900; }
.featit > i { color: #22a56f; font-size: 32px; }
.featit b { display: block; margin-top: 22px; font-size: 17px; }
.featit p { margin-top: 9px; color: #66756e; font-size: 13px; line-height: 1.8; }
.downls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.downit { display: flex; min-height: 150px; padding: 22px; flex-direction: column; background: #ffffff; border: 1px solid #9ea9b6; transition: transform .2s ease, box-shadow .2s ease; }
.downit:hover { box-shadow: 6px 6px 0 #dce3e9; transform: translateY(-3px); }
.downit > div { display: flex; align-items: center; justify-content: space-between; }
.downit > div span { color: #d94742; font-size: 9px; font-weight: 900; }
.downit > div i { color: #22a56f; font-size: 25px; }
.downit > b { margin-top: 16px; font-size: 17px; }
.downit > p { margin-top: 5px; color: #6c7888; font-size: 11px; }
.downit > em { align-self: flex-end; margin-top: auto; color: #14223b; font-size: 10px; font-style: normal; font-weight: 900; }
.stepbg { color: #ffffff; background: #14223b; }
.stepbg .secttl { color: #ffffff; }
.timeln { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.timeln::before { position: absolute; top: 51px; right: 8%; left: 8%; height: 1px; background: #668074; content: ""; }
.timeln article { position: relative; z-index: 1; text-align: center; }
.timeln article > span { color: #7fd4ae; font-size: 10px; }
.timeln article > div { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; margin: 10px auto 0; color: #14223b; background: #ffffff; border: 5px solid #14223b; outline: 1px solid #7fd4ae; font-size: 25px; }
.timeln article > b { display: block; margin-top: 19px; font-size: 16px; }
.timeln article > p { margin-top: 7px; color: #9dabbc; font-size: 12px; }
.faqbg { background: #e8edf2; }
.narrow { max-width: 900px; }
.faqlst { border-top: 1px solid #9ea9b6; }
.faqitm { background: #ffffff; border-right: 1px solid #9ea9b6; border-bottom: 1px solid #9ea9b6; border-left: 1px solid #9ea9b6; }
.faqbtn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 70px; padding: 0 18px; background: transparent; border: 0; cursor: pointer; font-weight: 800; text-align: left; }
.faqbtn i { color: #22a56f; font-size: 21px; }
.faqans { display: none; padding: 0 50px 22px 18px; color: #687586; font-size: 13px; line-height: 1.8; }
.faqitm.active { border-left: 5px solid #d94742; }
.faqitm.active .faqans { display: block; }
.newsbg { background: #ffffff; }
.newsls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.newsit { display: grid; grid-template-columns: 62px 1fr 95px; align-items: center; min-height: 123px; padding: 19px; gap: 16px; border: 1px solid #a3aeb9; }
.newsit > div { display: flex; align-items: center; flex-direction: column; padding: 8px 0; background: #14223b; }
.newsit > div span { color: #7fd4ae; font-size: 8px; }
.newsit > div b { color: #ffffff; font-size: 24px; }
.newsit > p { display: flex; flex-direction: column; }
.newsit > p b { margin-bottom: 7px; font-size: 15px; }
.newsit > p span { color: #657184; font-size: 12px; line-height: 1.7; }
.newsit > time { color: #84909f; font-size: 9px; }
.ratels { columns: 3; column-gap: 16px; }
.rateit { display: inline-block; width: 100%; margin: 0 0 16px; padding: 24px; background: #ffffff; border: 1px solid #9ea9b6; border-top: 4px solid #22a56f; break-inside: avoid; }
.rateit:nth-child(2n) { padding-bottom: 38px; border-top-color: #d94742; }
.ratehd { display: flex; align-items: center; justify-content: space-between; }
.ratehd span { font-size: 12px; font-weight: 900; }
.ratehd span i { color: #22a56f; }
.ratehd em { color: #e4a900; font-size: 11px; font-style: normal; }
.rateit > p { margin: 20px 0; color: #4f5e70; font-size: 14px; line-height: 1.9; }
.rateit time { color: #84909f; font-size: 10px; }
.footer { padding: 50px 0 23px; color: #ffffff; background: #101a2c; border-top: 5px solid #22a56f; }
.footin { display: flex; align-items: center; gap: 24px; }
.footnv { display: flex; flex: 1; justify-content: center; flex-wrap: wrap; gap: 11px 16px; }
.footnv a { color: #a8b2c0; font-size: 11px; }
.copyrt { width: calc(100% - 40px); max-width: 1200px; margin: 32px auto 0; padding-top: 18px; color: #6f7b8d; border-top: 1px solid #354157; font-size: 10px; text-align: center; }
@media (max-width: 767px) {
    .heade { height: 68px; }
    .navbox, .wraper, .footin { width: calc(100% - 28px); }
    .navbox { height: 64px; gap: 10px; }
    .brand span { display: none; }
    .brand img { width: 40px; height: 40px; }
    .menub { display: block; margin-left: auto; }
    .heade .getapp { min-height: 39px; padding: 0 11px; font-size: 11px; }
    .navlis { position: absolute; top: 68px; right: 14px; left: 14px; display: none; padding: 10px; background: #14223b; border: 1px solid #7fd4ae; }
    .navlis.active { display: grid; grid-template-columns: repeat(2, 1fr); }
    .navlis a { padding: 11px 6px; text-align: center; }
    .heroin { display: flex; width: 100%; flex-direction: column; border: 0; }
    .herotx { padding: 52px 20px; border: 0; }
    h1 { font-size: 40px; }
    .leadtx { font-size: 14px; }
    .herobt { align-items: flex-start; flex-direction: column; }
    .herobt a { width: 100%; }
    .checks { grid-template-columns: repeat(2, 1fr); }
    .checks span:nth-child(2) { border-right: 0; }
    .checks span:nth-child(-n+2) { border-bottom: 1px solid #9faab7; }
    .verify { min-height: 590px; }
    .screen { width: 255px; height: 510px; }
    .seal { right: 5px; width: 95px; height: 95px; }
    .codes { left: 7px; }
    .serial { left: 5px; }
    .secton { padding: 68px 0; }
    .secttl { margin-bottom: 35px; font-size: 27px; }
    .showls { display: flex; overflow-x: auto; padding-bottom: 13px; scroll-snap-type: x mandatory; }
    .showls figure { min-width: 76vw; scroll-snap-align: start; }
    .featls, .downls, .newsls { grid-template-columns: 1fr; }
    .featit { min-height: 195px; }
    .timeln { grid-template-columns: 1fr; gap: 28px; }
    .timeln::before { top: 20px; bottom: 20px; left: 35px; width: 1px; height: auto; }
    .timeln article { display: grid; grid-template-columns: 70px 1fr; text-align: left; }
    .timeln article > span { grid-column: 2; margin-left: 17px; }
    .timeln article > div { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
    .timeln article > b, .timeln article > p { grid-column: 2; margin-left: 17px; }
    .timeln article > b { margin-top: 0; }
    .faqbtn { min-height: 66px; padding: 0 10px; }
    .faqans { padding: 0 35px 20px 10px; }
    .newsit { grid-template-columns: 53px 1fr; padding: 15px; gap: 11px; }
    .newsit > time { grid-column: 2; }
    .ratels { columns: 1; }
    .footin { align-items: stretch; flex-direction: column; }
    .footin .brand span { display: grid; }
    .footnv { display: grid; grid-template-columns: repeat(2, 1fr); justify-content: start; }
    .footin .getapp { width: 100%; }
}