* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { color: #17201d; background: #f4f7f5; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; letter-spacing: 0; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.topbar { position: sticky; top: 0; z-index: 20; height: 76px; color: #ffffff; background: #101615; border-bottom: 1px solid #41524e; }
.navbox, .heroin, .wraper, .footin { width: calc(100% - 40px); max-width: 1200px; margin: 0 auto; }
.navbox { display: flex; align-items: center; height: 76px; gap: 22px; }
.brand { display: flex; flex: 0 0 auto; align-items: center; gap: 11px; }
.brand > span:last-child { display: grid; gap: 2px; }
.brand b { font-size: 16px; }
.brand small { color: #51e8c1; font-size: 9px; }
.logbox { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 3px; background: #b9ff35; border: 1px solid #ffffff; clip-path: polygon(12% 0, 100% 0, 100% 88%, 88% 100%, 0 100%, 0 12%); }
.logbox img { width: 100%; height: 100%; object-fit: cover; }
.navlis { display: flex; flex: 1; justify-content: center; gap: 18px; }
.navlis a { color: #dbe5e2; font-size: 13px; font-weight: 700; white-space: nowrap; }
.navlis a:hover { color: #b9ff35; }
.getapp { display: inline-flex; align-items: center; justify-content: center; min-height: 43px; padding: 0 17px; gap: 7px; color: #101615; background: #b9ff35; border: 1px solid #ffffff; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); font-size: 13px; font-weight: 900; white-space: nowrap; }
.menub { display: none; width: 42px; height: 42px; color: #b9ff35; background: transparent; border: 1px solid #63736f; font-size: 22px; }
.hero { position: relative; overflow: hidden; color: #ffffff; background: #101615; border-bottom: 5px solid #b9ff35; }
.gridbg { position: absolute; inset: 0; overflow: hidden; opacity: .22; background: #16201d; }
.gridbg::before { position: absolute; top: 0; bottom: 0; left: 33%; width: 1px; background: #4b635d; box-shadow: 240px 0 0 #4b635d, 480px 0 0 #4b635d, 720px 0 0 #4b635d; content: ""; }
.gridbg::after { position: absolute; top: 180px; right: 0; left: 0; height: 1px; background: #4b635d; box-shadow: 0 180px 0 #4b635d, 0 360px 0 #4b635d; content: ""; }
.heroin { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; min-height: 670px; }
.herotx { display: flex; flex-direction: column; justify-content: center; padding: 58px 70px 58px 0; }
.status { display: flex; align-items: center; align-self: flex-start; margin-bottom: 24px; padding: 8px 10px; gap: 8px; color: #8fa09c; border: 1px solid #435450; font-size: 9px; font-weight: 900; }
.status i { width: 8px; height: 8px; background: #b9ff35; border-radius: 50%; box-shadow: 0 0 12px #b9ff35; }
.status b { margin-left: 10px; color: #b9ff35; }
.titlex { display: flex; align-items: center; gap: 12px; }
.titlex img { width: 64px; height: 64px; object-fit: cover; border: 2px solid #51e8c1; }
.titlex p { display: flex; flex-direction: column; font-size: 17px; font-weight: 900; }
.titlex small { margin-top: 4px; color: #51e8c1; font-size: 10px; }
h1 { margin-top: 24px; font-size: 57px; line-height: 1.12; }
h1 span { color: #b9ff35; }
.leadtx { max-width: 560px; margin-top: 22px; color: #a9b8b4; font-size: 15px; line-height: 1.9; }
.herobt { display: flex; align-items: center; margin-top: 30px; gap: 21px; }
.herobt a { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 24px; gap: 9px; color: #101615; background: #b9ff35; border: 2px solid #ffffff; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); font-weight: 900; }
.herobt span { color: #81928e; font-size: 11px; }
.herobt span i { color: #51e8c1; }
.chips { display: flex; margin-top: 27px; gap: 8px; }
.chips span { padding: 6px 10px; color: #51e8c1; border: 1px solid #3e5b54; font-size: 10px; }
.arcade { position: relative; align-self: end; height: 625px; margin-top: 45px; background: #1c2926; border: 3px solid #51e8c1; border-bottom: 0; clip-path: polygon(42px 0, calc(100% - 42px) 0, 100% 42px, 100% 100%, 0 100%, 0 42px); }
.arctop { display: flex; align-items: center; justify-content: space-between; height: 61px; padding: 0 28px; color: #51e8c1; border-bottom: 2px solid #51e8c1; font-size: 10px; }
.arctop b { color: #b9ff35; font-size: 20px; }
.arctop i { width: 11px; height: 11px; background: #ff5d57; border-radius: 50%; box-shadow: 0 0 14px #ff5d57; }
.screen { position: absolute; top: 86px; right: 50%; width: 262px; height: 435px; overflow: hidden; background: #ffffff; border: 5px solid #090c0b; transform: translateX(50%); box-shadow: 0 0 0 2px #51e8c1; }
.screen img { display: block; width: 100%; height: auto; }
.arcbtn { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; height: 80px; padding: 0 28px; gap: 20px; background: #0c1110; border-top: 2px solid #51e8c1; }
.arcbtn > span { display: flex; align-items: center; gap: 7px; color: #b9ff35; font-size: 10px; }
.arcbtn > span i { width: 8px; height: 8px; background: #b9ff35; border-radius: 50%; }
.arcbtn button { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: #ffffff; background: #ff5d57; border: 3px solid #101615; outline: 1px solid #ffffff; border-radius: 50%; font-size: 24px; }
.arcbtn em { margin-left: auto; color: #76908a; font-size: 9px; font-style: normal; line-height: 1.5; text-align: right; }
.badge { position: absolute; z-index: 3; top: 152px; right: -24px; display: flex; flex-direction: column; padding: 12px 15px; color: #101615; background: #ff5d57; border: 2px solid #ffffff; transform: rotate(4deg); }
.badge b { font-size: 18px; }
.badge span { font-size: 10px; font-weight: 900; }
.secton { padding: 92px 0; }
.secttl { display: flex; align-items: center; justify-content: center; margin-bottom: 45px; gap: 12px; font-size: 32px; font-weight: 900; text-align: center; }
.secttl > span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 24px; color: #101615; background: #b9ff35; border: 1px solid #101615; font-size: 10px; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.showls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.showls figure { overflow: hidden; background: #101615; border: 2px solid #101615; }
.showls figure > div { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 13px; color: #ffffff; }
.showls figure > div span { color: #51e8c1; font-size: 9px; font-weight: 900; }
.showls figure > div b { font-size: 12px; }
.showls img { display: block; width: 100%; height: auto; }
.featbg { color: #ffffff; background: #17211f; border-top: 1px solid #4a5a56; border-bottom: 1px solid #4a5a56; }
.featbg .secttl > span { border-color: #ffffff; }
.featls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.featit { min-height: 218px; padding: 27px; background: #101615; border: 1px solid #40524d; transition: border-color .2s ease, transform .2s ease; }
.featit:hover { border-color: #51e8c1; transform: translateY(-3px); }
.featit > div { display: flex; align-items: center; justify-content: space-between; }
.featit > div i { color: #b9ff35; font-size: 30px; }
.featit > div span { color: #63736f; font-size: 23px; font-weight: 900; }
.featit b { display: block; margin-top: 24px; font-size: 17px; }
.featit p { margin-top: 10px; color: #94a39f; font-size: 13px; line-height: 1.8; }
.downbg { background: #dff5ef; }
.downls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.downit { display: grid; grid-template-columns: 54px 1fr 24px; align-items: center; min-height: 120px; padding: 20px; gap: 14px; background: #ffffff; border: 2px solid #17201d; box-shadow: 5px 5px 0 #51e8c1; transition: transform .2s ease; }
.downit:hover { transform: translateY(-4px); }
.downic { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; color: #101615; background: #b9ff35; border: 2px solid #17201d; font-size: 25px; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.downit > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.downit small { color: #ff5d57; font-size: 9px; font-weight: 900; }
.downit b { margin: 5px 0; font-size: 16px; }
.downit em { overflow: hidden; color: #6d7b77; font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.downit > i { color: #17201d; font-size: 21px; }
.timeln { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.timeln::before { position: absolute; top: 58px; right: 10%; left: 10%; height: 2px; background: #51e8c1; content: ""; }
.timeln article { position: relative; z-index: 1; text-align: center; }
.timeln article > div { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 82px; height: 82px; color: #ffffff; background: #101615; border: 3px solid #51e8c1; border-radius: 50%; font-size: 26px; }
.timeln article > div span { position: absolute; top: -12px; right: -11px; display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; color: #101615; background: #b9ff35; border: 2px solid #101615; border-radius: 50%; font-size: 9px; font-weight: 900; }
.timeln article > b { display: block; margin-top: 20px; font-size: 16px; }
.timeln article > p { margin-top: 8px; color: #6c7b77; font-size: 12px; }
.faqbg { color: #ffffff; background: #101615; }
.faqbg .secttl > span { border-color: #ffffff; }
.narrow { max-width: 900px; }
.faqlst { border-top: 1px solid #465650; }
.faqitm { border-bottom: 1px solid #465650; }
.faqbtn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 72px; padding: 0 18px; background: transparent; border: 0; cursor: pointer; font-weight: 800; text-align: left; }
.faqbtn i { color: #b9ff35; font-size: 22px; }
.faqans { display: none; padding: 0 55px 23px 18px; color: #9aaba6; font-size: 13px; line-height: 1.8; }
.faqitm.active { background: #1b2925; border-left: 4px solid #51e8c1; }
.faqitm.active .faqans { display: block; }
.newsbg { background: #b9ff35; }
.newsbg .secttl > span { color: #ffffff; background: #ff5d57; }
.newsls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.newsit { display: grid; grid-template-columns: 62px 1fr 25px; align-items: center; min-height: 126px; padding: 20px; gap: 17px; background: #f7fff0; border: 2px solid #101615; }
.newsit > div { display: flex; align-items: center; flex-direction: column; padding-right: 14px; border-right: 1px solid #9cba67; }
.newsit > div b { color: #ff5d57; font-size: 24px; }
.newsit > div time { margin-top: 4px; font-size: 9px; white-space: nowrap; }
.newsit > p { display: flex; flex-direction: column; }
.newsit > p b { margin-bottom: 7px; font-size: 15px; }
.newsit > p span { color: #61705e; font-size: 12px; line-height: 1.7; }
.newsit > i { font-size: 20px; }
.ratebg { background: #f4f7f5; }
.ratels { columns: 3; column-gap: 15px; }
.rateit { display: inline-block; width: 100%; margin: 0 0 15px; padding: 24px; color: #ffffff; background: #17211f; border: 1px solid #43544f; border-top: 4px solid #51e8c1; break-inside: avoid; }
.rateit:nth-child(2n) { padding-bottom: 38px; border-top-color: #ff5d57; }
.ratehd { display: flex; align-items: center; justify-content: space-between; }
.ratehd span { color: #b9ff35; font-size: 12px; font-weight: 900; }
.ratehd em { color: #ffcf3a; font-size: 11px; font-style: normal; }
.rateit > p { margin: 20px 0; color: #d0d9d6; font-size: 14px; line-height: 1.9; }
.rateit time { color: #71827e; font-size: 10px; }
.footer { padding: 50px 0 24px; color: #ffffff; background: #0a0e0d; border-top: 5px solid #51e8c1; }
.footin { display: flex; align-items: center; gap: 25px; }
.footnv { display: flex; flex: 1; justify-content: center; flex-wrap: wrap; gap: 11px 17px; }
.footnv a { color: #9aaba6; font-size: 11px; }
.copyrt { width: calc(100% - 40px); max-width: 1200px; margin: 33px auto 0; padding-top: 19px; color: #5f706c; border-top: 1px solid #28332f; font-size: 10px; text-align: center; }
@media (max-width: 767px) {
    .topbar { height: 68px; }
    .navbox, .wraper, .footin { width: calc(100% - 28px); }
    .navbox { height: 68px; gap: 10px; }
    .brand > span:last-child { display: none; }
    .logbox { width: 40px; height: 40px; }
    .menub { display: block; margin-left: auto; }
    .topbar .getapp { min-height: 40px; padding: 0 11px; font-size: 11px; }
    .navlis { position: absolute; top: 68px; right: 14px; left: 14px; display: none; padding: 10px; background: #101615; border: 1px solid #51e8c1; }
    .navlis.active { display: grid; grid-template-columns: repeat(2, 1fr); }
    .navlis a { padding: 11px 6px; text-align: center; }
    .heroin { display: flex; width: calc(100% - 28px); flex-direction: column; }
    .herotx { padding: 52px 0; }
    h1 { font-size: 41px; }
    .leadtx { font-size: 14px; }
    .herobt { align-items: flex-start; flex-direction: column; }
    .herobt a { width: 100%; }
    .arcade { width: 100%; height: 590px; margin-top: 0; }
    .screen { width: 246px; height: 420px; }
    .badge { right: -8px; }
    .secton { padding: 68px 0; }
    .secttl { margin-bottom: 35px; font-size: 27px; }
    .showls { display: flex; overflow-x: auto; padding-bottom: 14px; 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; }
    .downit { grid-template-columns: 48px 1fr 22px; padding: 17px; gap: 11px; }
    .downic { width: 48px; height: 48px; }
    .timeln { grid-template-columns: 1fr; gap: 29px; }
    .timeln::before { top: 30px; bottom: 30px; left: 40px; width: 2px; height: auto; }
    .timeln article { display: grid; grid-template-columns: 82px 1fr; text-align: left; }
    .timeln article > div { grid-row: 1 / span 2; }
    .timeln article > b, .timeln article > p { grid-column: 2; margin-left: 18px; }
    .timeln article > b { align-self: end; margin-top: 0; }
    .faqbtn { min-height: 66px; padding: 0 10px; }
    .faqans { padding: 0 34px 20px 10px; }
    .newsit { grid-template-columns: 53px 1fr 20px; padding: 15px; gap: 11px; }
    .ratels { columns: 1; }
    .footin { align-items: stretch; flex-direction: column; }
    .footin .brand > span:last-child { display: grid; }
    .footnv { display: grid; grid-template-columns: repeat(2, 1fr); justify-content: start; }
    .footin .getapp { width: 100%; }
}