* {box-sizing: border-box; font-family: sans-serif; margin: 0; padding: 0;} html, body {height: 100%; margin: 0;} .navbar__top {position: fixed; background: #142467; display: flex; top: 0; left: 0; width: 100%; padding: 10px 20px; justify-content: space-between; align-items: center; flex-wrap: nowrap; z-index: 99;} .page-wrapper {min-height: 100vh; display: flex; flex-direction: column; padding-top: 60px;} .main-content {flex: 1;} .navbar__account {display: none; width: 40px; height: 40px; font-size: 28px; align-items: center; justify-content: center; background-color: transparent; border: 0; color: #fff; cursor: pointer;} .navbar__brand {text-decoration: none; white-space: nowrap; position: relative; display: flex; height: 40px; font-size: 32px; line-height: 40px; font-weight: bold; color: #fff;} .navbar__burger {display: none; width: 40px; height: 40px; font-size: 28px; align-items: center; justify-content: center; background-color: transparent; border: 0; color: #fff; cursor: pointer; margin: 0; padding: 0; box-sizing: border-box;} .navbar__menu ul {margin: 0; padding: 0; display: flex;} .navbar__menu.open {position: fixed; display: block; width: 100%; height: 100%; background-color: #142467; top: 60px; left: 0; text-align: center;} .navbar__menu.open ul {display: block;} .navbar__menu.open ul li {display: block;} .navbar__menu.open ul li a {font-size: 20px; padding: 20px 0;} .navbar__menu li {list-style: none; display: inline-block; line-height: 40px;} .navbar__menu li a {text-decoration: none; color: #fff; padding: 10px 20px; display: block; font-size: 16px; line-height: 16px; border-radius: 3px;} .navbar__menu li a i {margin-right: 8px;} .navbar__menu li a:hover {background: rgb(130, 130, 229);} .navbar__btn {display: flex; height: 40px;} .navbar__btn a {position: relative; display: flex; outline: 0; font-size: 16px; font-weight: 500; line-height: 40px; padding: 0 30px; margin-right: 10px; height: 100%; text-decoration: none; color: #fff; cursor: pointer; justify-content: center; align-content: center;} .navbar__btn.open {position: fixed; display: block; background-color: #142467; top: 60px; left: 0; padding: 20px; width: 100%; height: 100%; text-align: center; justify-content: center;} .navbar__btn.open a {position: relative; display: block; font-size: 20px; height: 60px; padding: 0 20px; line-height: 60px; margin-top: 10px;} .btn-login {background-color: #4c549e; border: 1px solid #6161c6;} .btn-login:hover {background: #434b8c;} .btn-danger {background-color: #ff6d4b; border: 1px solid transparent;} .btn-danger:hover {background-color: #ff592f;} .container {width: 100%; padding-right: 0.75rem; padding-left: 0.75rem; margin-right: auto; margin-left: auto;} @media (min-width: 576px) {.container {max-width: 540px; } } @media (min-width: 768px) {.container {max-width: 720px; } } @media (min-width: 992px) {.container {max-width: 960px; } } @media (min-width: 1280px) {.container {max-width: 1200px; } } @media (max-width: 900px) {.navbar__top {width: 100vw; } .navbar__btn {display: none; } .navbar__account {display: flex; } } @media (max-width: 720px) {.navbar__top {width: 100vw; } .navbar__btn, .navbar__menu {display: none; } .navbar__account, .navbar__burger {display: flex; } } .page-wrapper .main-content {display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 0;} .section-primary {position: relative; justify-content: center; align-items: center; top: 0; left: 0; padding: 50px 0; background-color: #142467; text-align: center;} .section-primary .title {font-size: 40px; color: #fff; margin: 0;} .section-register {background-color: #142467; padding-bottom: 20px; color: #fff; font-size: 20px; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center;} .section-second {padding: 20px 0; background-color: #c9f4ff;} .section-second .container {width: 100%; display: flex; justify-content: center;} .section-support {background-color: #fff; padding: 20px 0; min-height: 300px; display: flex; justify-content: center; align-items: center;} .section-support .container {display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%; max-width: 800px;} .section-register input.email {background-color: #fff; color: #525666; margin-right: 10px; margin-bottom: 5px; padding: 0 24px; height: 60px; min-width: 270px; max-width: 370px; border: 0; border-radius: 3px; font-size: 19px; outline: none;} .section-register button.btn {align-items: center; justify-content: center; background-color: #007bfc; color: #fff; font-size: 19px; margin-bottom: 5px; padding: 0 32px; height: 60px; max-width: 270px; border: 0; border-radius: 3px; outline: none; line-height: 28px; cursor: pointer;} .section-register button.btn:hover {background-color: #0073ee;} .section-second .left {display: inline-block; max-width: 400px;} .section-second .right {display: inline-block; min-width: 360px; min-height: 180px; background-image: url(/static/images/world-map.png); background-repeat: no-repeat; background-position: center center; background-size: 100%;} .section-second ul.content-group {display: block; width: 100%;} .section-second ul.content-group li {font-size: 18px; color: #242424; margin-bottom: 10px;} .country-group {position: relative; list-style: none; display: block; width: 100%;} .country-group li {position: relative; list-style-type: none; color: #7f8597; display: inline-block; line-height: 40px; width: 180px;} .country-group li span {position: relative; font-size: 16px; font-weight: 400; bottom: 10px;} i.icon-flag {display: inline-block; width: 30px; height: 30px; background-repeat: no-repeat; background-position: center center; background-size: 30px 30px; margin-right: 5px;} .flag-us {background-image: url(/static/images/icon/flag-us.png);} .flag-uk {background-image: url(/static/images/icon/flag-uk.png);} .flag-jp {background-image: url(/static/images/icon/flag-jp.png);} .flag-de {background-image: url(/static/images/icon/flag-de.png);} .flag-sk {background-image: url(/static/images/icon/flag-sk.png);} .flag-sg {background-image: url(/static/images/icon/flag-sg.png);} .flag-de {background-image: url(/static/images/icon/flag-de.png);} .flag-fr {background-image: url(/static/images/icon/flag-fr.png);} .flag-se {background-image: url(/static/images/icon/flag-se.png);} .section-support h2.title {width: 100%; display: inline-block; font-size: 20px; color: #000;} .section-support ul {width: 100%; display: inline-block; list-style: none; margin: 20px 0;} .section-support ul li {position: relative; display: inline-flex; margin-right: 2px; margin-bottom: 5px; padding: 6px; border-radius: 6px; color: #fff; text-align: center; justify-content: center; cursor: pointer; vertical-align: bottom;} .section-support ul li span.tooltip {position: absolute; top: -50px; z-index: 99; padding: 10px 18px; border-radius: 25px; background-color: inherit; color: #fff; opacity: 0; pointer-events: none;} .section-support ul li span.tooltip:before {position: absolute; content: ""; height: 15px; width: 15px; background-color: inherit; bottom: -8px; left: 50%; transform: translateX(-50%) rotate(45deg);} .section-support ul li:hover span.tooltip {opacity: 1; pointer-events: auto;} .section-support ul li a {text-decoration: none; color: #fff; display: block;} .section-support ul li i {display: block; width: 50px; height: 50px; font-size: 40px; line-height: 50px; text-align: center;} i.bg {display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: 100%;} .bg-netflix {background-image: url(/static/images/social/netflix.png);} .bg-bbc {background-image: url(/static/images/social/bbc.png);} .bg-chatgpt {background-image: url(/static/images/social/chatgpt.png);} .bg-gemini {background-image: url(/static/images/social/gemini.png);} .bg-copilot {background-image: url(/static/images/social/copilot.png);} .bg-claude {background-image: url(/static/images/social/claude.png);} .bg-grok {background-image: url(/static/images/social/grok.png);} .bg-huggingface {background-image: url(/static/images/social/huggingface.png);} .bg-midjourney {background-image: url(/static/images/social/midjourney.png);} .bg-tiktok {background-image: url(/static/images/social/tiktok.png);} .bg-discord {background-image: url(/static/images/social/discord.png);} .bg-teams {background-image: url(/static/images/social/teams.png);} .google {background-color: #ea4335;} .youtube {background-color: #ff0000;} .facebook {background-color: #1877f2;} .twitter {background-color: #1da1f2;} .linkedin {background-color: #0a66c2;} .instagram {background-color: #c32aa3;} .whatsapp {background-color: #25d366;} .telegram {background-color: #0088cc;} .behance {background-color: #0057ff;} .pinterest {background-color: #bd081c;} .github {background-color: #24292f;} .medium {background-color: #000;} .tiktok {background-color: #000;} .chatgpt {background-color: #000;} .gemini {background-color: #000;} .claude {background-color: #000;} .copilot {background-color: #000;} .grok {background-color: #000;} .huggingface {background-color: #000;} .midjourney {background-color: #000;} .snapchat {background-color: #fffc00;} .flickr {background-color: #ff0084;} .tumblr {background-color: #32506d;} .netflix {background-color: #000;} .steam {background-color: #171a21;} .discord {background-color: #404eed;} .bbc {background-color: #000;} .twitch {background-color: #5c16c5;} .teams {background-color: #171a21;} .envelope {background-color: #018cea;} .footer {padding: 50px 0px; background-color: #070d25; color: #9aa0ac; display: flex; flex-direction: column;} .footer-copyright {display: flex; flex-direction: row; border-top: 1px solid #0f2033; margin-top: 30px; padding-top: 40px;} .copyright-text {font-size: 14px; margin-bottom: 4px;} /* Footer整体容器 */.footer-menu {padding: 40px 20px; /* 上下内边距40，左右20 */ font-size: 14px; letter-spacing: 0.02em; margin: 40px auto 0 auto; /* 顶部40间距，水平居中 */ display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; box-sizing: border-box;} .footer-menu-group {display: flex; flex-direction: column; min-width: 260px;} .footer-menu-title {font-size: 16px; color: #fff; margin-bottom: 20px;} .footer-menu-text {font-size: 15px; margin-bottom: 18px;} .footer-menu-text a {display: inline-flex; align-items: center; white-space: nowrap; color: #6e7687; text-decoration: none; cursor: pointer; transition: all 0.3s;} .footer-menu-text a:focus, .footer-menu-text a:hover {text-decoration: none; outline: none; color: #007bfc;} .footer-menu-text a i {margin-right: 8px; min-width: 16px;} .teams-icon {display: inline-block; width: 16px; height: 16px; background-image: url(/static/images/social/teams.png); background-size: contain; background-repeat: no-repeat; margin-right: 8px;} .telegram-icon {color: #a3c1da;} @media (max-width: 660px) {.footer-menu {flex-wrap: wrap; } .footer-menu-group {margin: 10px 0; } }