:root {
	--bg:#0b1320;
	--panel:#0f192c;
	--panel-2:#0e172b;
	--text:#d9e1ff;
	--muted:#9aa4c7;
	--accent:#ffd166;
	--accent-2:#69e2ff;
	--ok:#00d68f;
	--chip:#1b2a4d;
	--radius:16px;
	--radius-lg:22px;
	--shadow:0 10px 30px rgba(0,0,0,.35);
}
* {
	box-sizing:border-box
}
html,body {
	height:100%
}
body {
	margin:0;
	color:var(--text);
	background:var(--bg);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
	line-height:1.65;
}
a {
	color:var(--accent-2);
	text-decoration:none
}
.container {
	width:min(1120px,92%);
	margin:0 auto
}
ul,li {
	list-style:none;
	margin:0;
	padding:0;
}
h2, h3, h6 {
	padding:0px;
	margin:0px;
}
.nav {
	position:sticky;
	top:0;
	z-index:90;
	background:rgba(10,16,28,.7);
	backdrop-filter:blur(8px);
	border-bottom:1px solid rgba(255,255,255,.06);
}
.nav__inner {
	display:flex;
	align-items:center;
	height:64px;
	gap:16px
}
.nav__logo {
	font-weight:800;
	letter-spacing:.5px;
	font-size:32px
}
.nav__logo .thr {
	color:var(--accent)
}
.nav__logo a {
	color:#fff;
	position:relative;
}
.nav__search {
	margin-left:auto
}
.nav__search-input {
	width:240px;
	max-width:42vw;
	height:36px;
	padding:0 12px;
	border:1px solid rgba(255,255,255,.12);
	border-radius:10px;
	background:var(--panel);
	color:var(--text);
	outline:none
}
.nav__menu {
	display:flex;
	height:38px;
	gap:6px;
	width:100%;
	overflow-x:scroll;
}
.nav__menu li {
	margin-right:20px;
}
.nav__menu li a {
	padding:0 4px 0 4px;
	display:flex;
	color:#fff;
	white-space:nowrap;
}
.nav__menu li.current a {
	border-bottom:var(--accent) 2px solid;
}
.nav__menu li a:hover {
	color:var(--accent-2);
}
.banner {
	background:linear-gradient(135deg,#18274b,#0e1530);
	border-bottom:1px solid rgba(255,255,255,.06)
}
.banner__inner {
	display:grid;
	gap:20px;
	padding:28px 0;
	align-items:center
}
.banner__content h2 {
	font-weight:800;
	font-size:24px
}
.banner__actions {
	margin-top:14px;
	display:flex;
	gap:12px
}
.btn {
	display:inline-flex;
	height:38px;
	align-items:center;
	padding:0 18px;
	border-radius:999px;
	border:1px solid rgba(255,255,255,.14);
	font-weight:600
}
.btn--primary {
	background:linear-gradient(135deg,#ffd166,#ff9f1c);
	color:#1b1b1b;
	border:none;
	box-shadow:var(--shadow)
}
.btn--success {
	background:linear-gradient(135deg,#00e094,#00b37e);
	color:#0e1220;
	border:none
}
.btn--ghost {
	color:var(--text)
}
.banner__art {
	height:140px;
	background:url(/image/free.png) no-repeat right;
	background-size:contain;
}
.page-title {
	font-size:28px;
	margin:22px 0 16px
}
.hero-grid {
	display:grid;
	grid-template-columns:1.15fr .85fr;
	gap:16px;
	margin-bottom:16px
}
.hero-grid__thumb {
	border-radius:var(--radius-lg);
	min-height:260px;
	border:1px solid rgba(255,255,255,.08);
	box-shadow:var(--shadow);
	overflow:hidden;
	height:260px;
}
.hero-grid__card {
	padding:18px
}
.hero-grid__title {
	font-size:22px;
	margin:.35rem 0 .25rem;
	line-height:1.35
}
.muted {
	color:var(--muted)
}
.link-more {
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin-top:10px
}
.meta-row {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	align-items:center;
	color:var(--muted);
	font-size:12px
}
.dot {
	width:4px;
	height:4px;
	border-radius:50%;
	background:rgba(255,255,255,.35);
	display:inline-block
}
.card {
	background:var(--panel);
	border:1px solid rgba(255,255,255,.08);
	box-shadow:var(--shadow)
}
.grid-3 {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:16px;
	margin-bottom:18px
}
.grid-4 {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:16px
}
.post__thumb {
	aspect-ratio:16/9;
	border-top-left-radius:var(--radius);
	border-top-right-radius:var(--radius);
	border-bottom:1px solid rgba(255,255,255,.06)
}
.post__body {
	padding:12px
}
.post__title {
	font-weight:700;
	margin-top:6px;
	line-height:1.35
}
.panel {
	background:var(--panel-2);
	border:1px solid rgba(255,255,255,.06);
	border-radius:var(--radius-lg);
	padding:14px;
	margin:8px 0 18px
}
.panel__title {
	font-weight:800;
	margin:6px 0 8px
}
.chip-grid {
	display:inline-block;
	gap:12px
}
.chip {
	display:inline-block;
	align-items:center;
	gap:10px;
	background:#142246;
	border:1px solid rgba(255,255,255,.12);
	color:var(--text);
	padding:12px;
	border-radius:12px;
	margin-right:10px;
}
.chip__icon {
	width:26px;
	height:26px;
	border-radius:8px;
	background:linear-gradient(180deg,#69e2ff,#4bb9ff)
}
.section-header {
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin:10px 0 10px
}
.section-title {
	font-weight:800;
	display:flex;
	align-items:center;
	gap:10px
}
.ico-star {
	width:14px;
	height:14px;
	background:radial-gradient(8px 8px at 50% 50%,#ffd166 0%,#ff9f1c 60%,transparent 62%);
	display:inline-block;
	border-radius:50%
}
.viewall {
	font-size:13px;
	color:var(--accent)
}
.promo {
	display:grid;
	grid-template-columns:.9fr 1.1fr;
	gap:16px;
	align-items:center;
	overflow:hidden;
	margin:18px 0
}
.promo__copy {
	padding:14px 16px
}
.promo__kicker {
	font-weight:700;
	color:var(--muted);
	font-size:12px
}
.promo__title {
	font-size:34px;
	font-weight:900;
	letter-spacing:.5px;
	margin:6px 0 8px;
	color:var(--accent)
}
.promo__art {
	height:180px;
	border-radius:16px
}
.breadcrumbs {
	padding:10px 0;
	color:var(--muted);
	font-size:13px
}
.breadcrumbs__items {
	display:flex;
	gap:8px;
	align-items:center
}
.breadcrumbs a {
	color:var(--text);
	opacity:.85
}
.is-muted {
	opacity:.7
}
.card {
	background:var(--panel-2);
	border:1px solid rgba(255,255,255,.06);
	box-shadow:var(--shadow)
}
.row {
	display:grid;
	grid-template-columns:.4fr 1.2fr .4fr;
	gap:10px;
	padding:10px;
	margin-top:20px;
	position:relative;
}
.row__thumb div:nth-child(1) img {
	display:block;
	clear:both;
}
.row__thumb div:nth-child(2) {
	text-align:center;
	color:var(--accent);
	font-weight:400;
	font-size:18px;
	line-height:48px;
	height:32px;
	overflow:hidden;
}
.row__title {
	margin:.25rem 0 .25rem;
	font-size:20px;
	line-height:1.35;
	color:var(--accent-2)
}
.meta-row {
	display:flex;
	gap:8px;
	align-items:center;
	color:var(--muted);
	font-size:12px
}
.dot {
	width:4px;
	height:4px;
	border-radius:50%;
	background:rgba(255,255,255,.35);
	display:inline-block
}
.muted {
	color:var(--muted);
	font-size:14px;
	line-height:16px;
	background:url(/static/svg/green.svg) no-repeat left center;
	text-indent:18px;
}
.row_link {
	padding:10px;
	text-align:center;
}
.row_link span {
	text-align:center;
	background:linear-gradient(135deg,#ffd166,#ff9f1c);
	color:#1b1b1b;
	display:inline-block;
	height:50px;
	line-height:50px;
	width:180px;
	align-items:center;
	font-weight:800;
	font-size:18px;
	clip-path:polygon(0 0,calc(100% - 30px) 0,100% 25px,100% 100%,22px 100%,0 calc(100% - 20px)) !important;
}
.row_rate {
	font-weight:600;
	font-size:28px;
	line-height:54px;
	height:42px;
	overflow:hidden
}
.row_rank {
	position:absolute;
	left:0px;
	top:0px;
	z-index:20;
	width:36px;
	height:36px;
	background-color:var(--chip);
	color:var(--accent);
	font-size:14px;
	font-weight:800;
	text-align:center;
	align-items:center;
	line-height:36px;
}
.help {
	background:linear-gradient(135deg,#18274b,#0e1530);
	border-bottom:1px solid rgba(255,255,255,.06)
}
.help__inner {
	display:grid;
	gap:20px;
	padding:40px 0;
	align-items:center
}
.help__content h2, .content h2 {
	font-weight:800;
	font-size:24px;
	color:var(--accent)
}
.help__content {
	color:var(--muted);
	margin-top:6px
}
.help__content h3 .content h3 {
	color:var(--text);
	line-height:1;
	padding-top:10px;
}
.pagination {
	display:flex;
	justify-content:center;
	gap:5px;
	margin:18px 0 12px
}
.pagination li {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:32px;
	height:32px;
	color:#ffd166;
	font-weight:bold;
	font-size:18px;
}
.li.active {
	background:#ffd166;
	color:#0f1220;
	border-color:#ffd166;
	font-weight:800
}
.pg--nav {
	padding:0 10px
}
.section-header {
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin:12px 0 10px
}
.section-title {
	font-weight:800
}
.grid-4 {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:16px
}
.post__thumb {
	aspect-ratio:16/9;
	border-top-left-radius:16px;
	border-top-right-radius:16px;
	border-bottom:1px solid rgba(255,255,255,.06)
}
.post__body {
	padding:12px
}
.post__title {
	font-weight:700;
	margin-top:6px;
	line-height:1.35
}
.card {
	background:var(--panel-2);
	border:1px solid rgba(255,255,255,.06);
	box-shadow:var(--shadow);
	/* margin-top:18px;
	*/
  /* padding:18px;
	*/
}
.card_detail {
	/* margin-top:18px;
	*/
  padding:18px;
}
.card__header {
	display:grid;
	grid-template-columns:300px 1fr;
	gap:22px;
}
.card__thumb {
	position:relative;
	width:100%;
	border-radius:5px;
	/* background:radial-gradient(200px 100px at 70% 10%,rgba(255,209,102,.5),transparent 60%),radial-gradient(220px 110px at 10% 90%,rgba(105,226,255,.35),transparent 60%),linear-gradient(135deg,#192645,#0f1a32); */
	display:grid;
	place-items:center;
	overflow:hidden;
}
.card__thumb img {
	width:100%;
}
.thumb__badge {
	position:absolute;
	top:10px;
	left:10px;
	background:var(--chip);
	color:var(--text);
	font-size:12px;
	padding:6px 10px;
	border-radius:8px;
	border:1px solid rgba(255,255,255,.1);
}
.thumb__logo {
	font-weight:900;
	font-size:28px;
	letter-spacing:.5px;
}
.card__meta .title {
	font-size:clamp(20px,2.0vw + 14px,30px);
	line-height:1.12;
	margin:6px 0 14px;
	color:#fff;
}
.card__cta-row {
	display:flex;
	gap:14px;
	align-items:center;
	flex-wrap:wrap;
}
.badge {
	display:inline-flex;
	align-items:center;
	gap:8px;
	height:34px;
	padding:0 12px;
	border-radius:3px;
	background:var(--bg);
	/* border:1px solid var(--text);
	*/
  color:var(--accent);
}
.badge a {
	color:var(--accent);
}
.badge a:hover{
	color:var(--accent-2)
}
.card_link {
	text-align:center;
	background:var(--bg);
	color:var(--accent);
	height:40px;
	line-height:40px;
	width:200px;
	align-items:center;
	font-weight:800;
	font-size:18px;
	border:var(--accent) 2px solid;
	border-radius:5px;
	margin-top:20px;
	cursor:pointer;
}
.content {
	margin-top:18px;
}
.tag {
	display:inline-block;
	font-size:12px;
	padding:6px 10px;
	border:1px solid rgba(255,255,255,.12);
	border-radius:8px;
	background:var(--chip);
}
.tag--pop {
	background:#1d2c52;
}
.h2 {
	margin:24px 0 8px;
	font-size:22px;
	border-left:4px solid var(--accent);
	padding-left:10px;
}
.list {
	margin:.5rem 0 1rem 1rem;
}
.list li {
	margin:6px 0;
}
.faq {
	display:grid;
	gap:12px;
	margin-top:10px;
}
.faq__item {
	background:var(--panel);
	border:1px solid rgba(255,255,255,.08);
	border-radius:12px;
	padding:14px;
}
.faq__q {
	font-weight:700;
	margin-bottom:6px;
}
.faq__a {
	color:var(--muted);
}
.chip-row {
	display:flex;
	gap:10px;
	flex-wrap:wrap;
	margin:40px 0;
}
.chip {
	padding:6px 16px;
	background:var(--chip);
	border:1px solid rgba(255,255,255,.12);
	border-radius:5px;
	font-size:14px;
	color:var(--accent-2)
}
.pn {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px;
	margin-top:22px;
}
.pn__item {
	border:1px solid rgba(255,255,255,.08);
	background:var(--panel-2);
	border-radius:var(--radius);
	padding:14px;
}
.pn__item--prev {
	background:linear-gradient(180deg,rgba(105,226,255,.1),transparent),var(--panel-2);
}
.pn__item--next {
	background:linear-gradient(180deg,rgba(255,209,102,.12),transparent),var(--panel-2);
}
.pn__kicker {
	font-size:12px;
	color:var(--muted);
}
.pn__title {
	margin-top:6px;
	font-weight:700;
}
/* 鐩稿叧鏂囩珷 */
.related {
	margin-top:26px;
}
.related__title {
	font-weight:800;
	margin-bottom:12px;
}
.related__grid {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:16px;
}
.ra {
	background:var(--panel);
	border:1px solid rgba(255,255,255,.08);
	border-radius:var(--radius);
	overflow:hidden;
}
.ra__thumb {
	aspect-ratio:16/9;
	background:linear-gradient(135deg,rgba(105,226,255,.25),rgba(255,209,102,.25)),linear-gradient(135deg,#0e1a31,#182749);
	overflow:hidden;
}
.ra__thumb img {
	width:100%;
}
.ra__meta {
	padding:10px 12px;
}
.ra__time {
	color:var(--muted);
	font-size:12px;
}
.ra__title {
	margin-top:4px;
	font-weight:700;
	line-height:1.35;
}
.footer {
	margin-top:26px;
	padding:22px 0 34px;
	background:#0a1326;
	border-top:1px solid rgba(255,255,255,.06)
}
.footer__notice {
	opacity:.8;
	margin-bottom:12px
}
.footer__badges {
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:12px
}
.badgebox {
	background:var(--panel);
	border:1px solid rgba(255,255,255,.08);
	border-radius:12px;
	padding:12px;
	text-align:center
}
.footer__copy {
	color:var(--muted);
	margin-top:12px
}
.ph-img {
	margin:10px;
}
.ph-img img {
	width:100%;
}
.ph-ico {
	background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05)),linear-gradient(135deg,#0f1c36,#1b2c52);
	border:1px solid rgba(255,255,255,.12);
}
@media (max-width:1024px) {
	.hero-grid {
	grid-template-columns:1fr
}
.promo {
	grid-template-columns:1fr
}
}@media (max-width:860px) {
	.grid-4 {
	grid-template-columns:repeat(2,1fr)
}
.footer__badges {
	grid-template-columns:repeat(2,1fr)
}
}@media (max-width:560px) {
	.grid-3 {
	grid-template-columns:1fr
}
.grid-4 {
	grid-template-columns:1fr
}
.chip-grid {
	grid-template-columns:1fr
}
.nav__search-input {
	width:150px
}
.promo__title {
	font-size:28px
}
}@media (max-width:980px) {
	.row {
	grid-template-columns:1fr;
	align-items:start
}
.grid-4 {
	grid-template-columns:repeat(2,1fr)
}
.footer__badges {
	grid-template-columns:repeat(2,1fr)
}
}@media (max-width:560px) {
	.nav__search-input {
	width:150px
}
}@media (max-width:960px) {
	.banner__inner {
	grid-template-columns:1fr;
}
.card__header {
	grid-template-columns:1fr;
}
.related__grid {
	grid-template-columns:repeat(2,1fr);
}
.footer__badges {
	grid-template-columns:repeat(2,1fr);
}
.banner__art {
	background-position:center;
}
}@media (max-width:560px) {
	.related__grid {
	grid-template-columns:1fr;
}
}