/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box }

html, body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	max-width: 100vw;
}

body {
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	background: #fafafa;
}

.o,[scroll] { overflow: hidden }

.h,.step-1 { pointer-events: none }

.step-2 ul,.step-3>ul,.tip { text-align: center }

form,h1,h2,h3,h4,h5,ol,p,ul { margin: 0 }

ol,ul { padding: 0 }

html {
	color: #333;
	font: 1.4em 'HanHei SC','PingFang SC','Helvetica Neue',Helvetica,STHeitiSC-Light,"Microsoft YaHei","微软雅黑",Arial,sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

button,input,option,select,textarea { font: inherit }
h1,h2,h3,h4 { font-weight: 700 }
button:focus,input:focus,textarea:focus { outline: 0 }

::-moz-selection { background: rgba(255,140,0,.15) }
::selection { background: rgba(255,140,0,.15) }

ul { list-style-type: none }
a { text-decoration: none; color: #e8750a; transition: color .2s }
img { border: 0; max-width: 100% }

.o { zoom: 1 }
.l { float: left }
.r,header nav { float: right }

.c:after { content: '.'; display: block; height: 0; clear: both; visibility: hidden }
* html .c { height: 1% }
.h { opacity: 0 }
.none,xmp { display: none }

[scroll] { overflow-y: auto; -webkit-overflow-scrolling: touch }
#stage,.step-1,header { overflow: hidden }

[scroll]::-webkit-scrollbar { width: 4px; height: 6px }
[scroll]::-webkit-scrollbar-thumb { height: 40px; background: rgba(255,140,0,.25); border-radius: 4px }
[scroll]::-webkit-scrollbar-thumb:hover { background: rgba(255,140,0,.45) }

/* ===== Layout ===== */
.layout {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ===== Hamburger ===== */
.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	background: #fff;
	border: 2px solid rgba(255,140,0,.2);
	border-radius: 10px;
	cursor: pointer;
	padding: 0;
	z-index: 1001;
	transition: background .3s, border-color .3s;
	flex-shrink: 0;
}
.menu-toggle:hover { background: #fff5eb; border-color: #e8750a }
.menu-toggle span {
	display: block;
	width: 20px;
	height: 2.5px;
	background: #e8750a;
	border-radius: 2px;
	transition: transform .3s, opacity .3s;
}
body.nav-open .menu-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg) }
body.nav-open .menu-toggle span:nth-child(2) { opacity: 0 }
body.nav-open .menu-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg) }

/* ===== Header ===== */
header {
	line-height: 40px;
	padding: 20px 0;
	position: relative;
	z-index: 100;
	background: #fff;
	box-shadow: 0 2px 20px rgba(0,0,0,.04);
}
header .layout {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}
header h1 {
	font-size: 1.8em;
	color: #e8750a;
	font-weight: 800;
	width: auto;
	height: auto;
	line-height: 1.2;
	flex-shrink: 0;
	letter-spacing: 2px;
}
header nav {
	padding: 10px 0;
	display: flex;
	align-items: center;
	gap: 2px;
	float: none;
	flex-wrap: wrap;
}
header nav a {
	display: inline-block;
	color: #666;
	padding: 8px 14px;
	border-radius: 8px;
	font-size: .92em;
	font-weight: 500;
	transition: background .25s, color .25s, transform .2s;
}
header nav a:hover {
	background: #fff5eb;
	color: #e8750a;
	transform: translateY(-1px);
}
header nav a.login-link {
	margin-left: 6px;
	box-shadow: 0 0 0 2px #e8750a;
	border-radius: 8px;
	font-weight: 700;
	color: #e8750a;
}
header nav a.login-link:hover {
	background: #e8750a;
	color: #fff;
	box-shadow: 0 4px 15px rgba(232,117,10,.3);
}

/* ===== Step 1 - Hero ===== */
.step-1 {
	min-height: 100vh;
	color: #333;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, #fff 0%, #fff8f0 100%);
	overflow: hidden;
	padding: 80px 20px 60px;
}
.step-1::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -20%;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(255,140,0,.06) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}
.step-1::after {
	content: '';
	position: absolute;
	bottom: -30%;
	left: -10%;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(255,200,100,.08) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

.step-1 .step-1-in {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1100px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 60px;
	flex-wrap: wrap;
}

.step-1 #test {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 1;
	min-width: 280px;
}

.step-1 h2 {
	position: relative;
	font-size: 3em;
	color: #333;
	margin-bottom: 20px;
	line-height: 1.3;
}
.step-1 h2 .line { display: block }
.step-1 h2 .line-1,
.step-1 h2 .line-2 {
	position: relative;
	width: auto !important;
	height: auto !important;
	background: none !important;
	left: auto !important;
	top: auto !important;
	margin: 0;
}
.step-1 h2 .line-1 .moji-1 {
	position: relative;
	left: auto;
	top: auto;
	display: inline-block;
	width: auto;
	height: auto;
	background: none !important;
	color: #e8750a;
	font-weight: 800;
}

/* Mascot in hero */
.hero-mascot {
	width: 320px;
	max-width: 45vw;
	height: auto;
	filter: drop-shadow(0 10px 30px rgba(232,117,10,.15));
	animation: mascot-float 4s ease-in-out infinite;
	flex-shrink: 0;
	mix-blend-mode: multiply;
}
@keyframes mascot-float {
	0%, 100% { transform: translateY(0) }
	50% { transform: translateY(-12px) }
}

.step-1 .link-reg {
	display: inline-block;
	margin-top: 30px;
	padding: 0 2em;
	font-size: 1.2em;
	line-height: 56px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, #ff8c00 0%, #ff6b00 100%);
	border-radius: 14px;
	box-shadow: 0 8px 30px rgba(232,117,10,.25);
	transition: transform .25s, box-shadow .25s;
	pointer-events: auto;
}
.step-1 .link-reg:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 40px rgba(232,117,10,.35);
}

.step-1 .bg,
.step-1 .shell-box,
.step-1 .light,
.step-1 .hr,
.step-1 .shell,
.step-1 .shell-shadow { display: none }

/* ===== Tip ===== */
.tip {
	position: fixed;
	bottom: 2em;
	left: 50%;
	width: 120px;
	margin-left: -60px;
	color: #e8750a;
	font-size: 20px;
	opacity: 0;
	transition: opacity .3s;
	z-index: 50;
}
html[step="1"] .tip-1,
html[step="2"] .tip-2,
html[step="3"] .tip-3 { opacity: 1; transition: opacity 3s }
@media (max-height: 900px) { .tip { display: none } }

/* ===== Step 2 - Features ===== */
.step-2 {
	background: #fff;
	position: relative;
	padding: 60px 0 80px;
	overflow: hidden;
}
.step-2 .content {
	opacity: 1;
	transform: none;
}
.step-2 .ui-h-1 {
	position: relative;
	top: auto;
	left: auto;
	margin: 0 auto 30px;
	font-size: 2.2em;
	color: #333;
}
.step-2 .ui-h-1::after {
	content: '';
	display: block;
	width: 60px;
	height: 4px;
	background: linear-gradient(90deg, #ff8c00, #ffb347);
	margin: 12px auto 0;
	border-radius: 2px;
}

.step-2 ul {
	max-width: 1100px;
	margin: 0 auto;
	font-size: 0;
	padding: 0 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}
.step-2 ul li {
	font-size: 1em;
	display: inline-block;
	vertical-align: top;
	padding: 24px 20px;
	width: calc(33.333% - 20px);
	min-width: 260px;
	max-width: 340px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 4px 20px rgba(0,0,0,.06);
	transition: transform .3s, box-shadow .3s;
	border: 1px solid rgba(255,140,0,.1);
}
.step-2 ul li:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 40px rgba(232,117,10,.12);
	border-color: rgba(255,140,0,.3);
}
.step-2 ul li .icon { font-size: 36px; line-height: 70px }
.step-2 ul li .icon i {
	display: inline-block;
	vertical-align: top;
	width: 70px;
	height: 70px;
	margin-right: 8px;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}
.step-2 ul li .icon big {
	display: inline-block;
	font-size: 44px;
	font-weight: 700;
	color: #e8750a;
	margin-right: .1em;
}
.step-2 ul li .icon cite {
	display: inline-block;
	font-size: 26px;
	font-style: normal;
	font-weight: 600;
	color: #666;
}
.step-2 ul li h4 {
	font-size: 22px;
	line-height: 34px;
	padding-bottom: 6px;
	font-weight: 700;
	color: #333;
}
.step-2 ul li p {
	font-size: 15px;
	font-weight: 400;
	opacity: .65;
	line-height: 1.6;
	color: #666;
}

.step-2 ul li.feature-1 .icon i { background-image: url(../img/icon/1.svg) }
.step-2 ul li.feature-2 .icon i { background-image: url(../img/icon/2.svg) }
.step-2 ul li.feature-3 .icon i { background-image: url(../img/icon/3.svg) }
.step-2 ul li.feature-4 .icon i { background-image: url(../img/icon/4.svg) }
.step-2 ul li.feature-4 .icon big { margin-right: .2em }
.step-2 ul li.feature-5 .icon i { background-image: url(../img/icon/5.svg) }
.step-2 ul li.feature-6 .icon i { background-image: url(../img/icon/6.svg) }

.step-2 .after { display: none }

/* ===== Step 3 - Pricing ===== */
.step-3 {
	background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
	padding: 60px 0 80px;
	opacity: 1;
	transform: none;
}
.step-3 .ui-h {
	text-align: center;
	font-size: 2.2em;
	line-height: 1.3;
	font-weight: 700;
	color: #333;
	min-width: auto;
	margin-bottom: 10px;
}
.step-3 .ui-h::after {
	content: '';
	display: block;
	width: 60px;
	height: 4px;
	background: linear-gradient(90deg, #ff8c00, #ffb347);
	margin: 12px auto 0;
	border-radius: 2px;
}
.step-3 .ui-h-2 { color: #333 }

.step-3>ul {
	padding: 20px 20px 40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}
.step-3>ul>li {
	display: inline-block;
	vertical-align: top;
	background: #fff;
	pointer-events: auto;
	width: 240px;
	box-shadow: 0 8px 30px rgba(0,0,0,.06);
	border-radius: 18px;
	margin: 0;
	transition: transform .3s, box-shadow .3s;
	overflow: hidden;
	border: 1px solid rgba(255,140,0,.1);
}
.step-3>ul>li:hover,
.step-3>ul>li:nth-child(2) {
	transform: translateY(-8px);
	box-shadow: 0 16px 50px rgba(232,117,10,.12);
	border-color: rgba(255,140,0,.3);
}
.step-3>ul:hover>li { transform: none }
.step-3>ul:hover>li:hover { transform: translateY(-8px) }

.step-3>ul>li .head {
	padding: 20px 16px 16px;
	background: #fff;
	text-align: center;
	border-bottom: 2px solid rgba(255,140,0,.1);
}
.step-3>ul>li .head h4 big {
	display: block;
	line-height: 1.6;
	color: #e8750a;
	font-size: 1.3em;
	font-weight: 800;
}
.step-3>ul>li .head h4 small {
	display: block;
	font-size: 14px;
	font-weight: 500;
	opacity: .6;
	color: #666;
}

.step-3>ul>li>ul {
	display: block;
	background: #fff;
	padding: 16px;
	text-align: left;
	font-size: 15px;
}
.step-3>ul>li>ul>li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	line-height: 1.4;
	border-bottom: 1px solid rgba(0,0,0,.05);
}
.step-3>ul>li>ul>li:last-child { border-bottom: none }
.step-3>ul>li>ul>li i {
	display: inline-block;
	font-weight: 500;
	font-style: normal;
	font-size: 14px;
	color: #666;
	opacity: .7;
}
.step-3>ul>li>ul>li b {
	font-size: 15px;
	font-weight: 700;
	color: #333;
}

.step-3>ul>li .button {
	display: block;
	background: linear-gradient(135deg, #ff8c00 0%, #ff6b00 100%);
	color: #fff;
	margin: 0 16px 16px;
	width: calc(100% - 32px);
	border: 0;
	line-height: 48px;
	border-radius: 12px;
	cursor: pointer;
	font-weight: 700;
	font-size: 16px;
	text-align: center;
	transition: transform .2s, box-shadow .2s;
	box-shadow: 0 4px 15px rgba(255,107,0,.25);
}
.step-3>ul>li .button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(255,107,0,.35);
}

.step-3 .note {
	color: #666;
	margin-bottom: 0;
	text-align: center;
	font-size: 14px;
	opacity: .7;
	padding: 0 20px 20px;
}

/* ===== Step 4 - DDoS ===== */
.step-4 {
	background: #fff;
	padding: 60px 20px 80px;
	text-align: center;
	position: relative;
	overflow: hidden;
	border-top: 1px solid rgba(255,140,0,.1);
}
.step-4::before {
	content: '';
	position: absolute;
	top: -100px;
	right: -100px;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(255,140,0,.04) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

.step-4 #step4 { position: relative; z-index: 2 }
.step-4 .shell-2 { display: none }

.step-4 .content {
	opacity: 1;
	transform: none;
	margin-bottom: 0;
}
.step-4 .content i {
	display: inline-block;
	width: 120px;
	height: 120px;
	background: url(../img/icon/7.svg) 50% 50% no-repeat;
	background-size: contain;
	margin-bottom: 20px;
}
.step-4 .content h3 {
	font-size: 2em;
	color: #333;
	margin-bottom: 20px;
}
.step-4 .content .note {
	padding: 20px 0;
	color: #666;
	font-size: 16px;
	line-height: 1.8;
	max-width: 600px;
	margin: 0 auto;
}
.step-4 .content .note p { padding: 6px 0 }
.step-4 .content .button {
	display: inline-block;
	color: #fff;
	font-weight: 800;
	font-size: 24px;
	line-height: 52px;
	padding: 0 2em;
	border-radius: 14px;
	background: linear-gradient(135deg, #ff8c00 0%, #ff6b00 100%);
	border: 0;
	cursor: pointer;
	transition: transform .25s, box-shadow .25s;
	box-shadow: 0 6px 25px rgba(232,117,10,.3);
	margin-top: 10px;
}
.step-4 .content .button:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 35px rgba(232,117,10,.4);
}
.step-4 .content .button small { font-size: 16px; font-weight: 500; opacity: .8 }
.step-4 .content .op5 { opacity: .6; color: #999 }

/* ===== Footer ===== */
footer {
	background: #fff;
	color: #666;
	padding: 50px 20px 30px;
	border-top: 1px solid rgba(255,140,0,.1);
}
footer .htko {
	font-size: 1.6em;
	line-height: 80px;
	text-align: center;
	color: #e8750a;
	font-weight: 300;
}
footer .layout {
	padding: 30px 0 0;
	font-size: 13px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
footer .layout a {
	display: inline-block;
	color: #666;
	padding: 4px 8px;
	opacity: .7;
	transition: opacity .3s, color .3s;
}
footer .layout a:hover { opacity: 1; color: #e8750a }

/* ===== UI Headings ===== */
.ui-h {
	text-align: center;
	font-size: 2.2em;
	line-height: 1.3;
	font-weight: 700;
	min-width: auto;
}

.note {
	box-sizing: border-box;
	padding: 0 2em;
	font-size: 16px;
	line-height: 28px;
}

/* ===== Switch / Tabs ===== */
.switch input {
	top: 0; right: 0; bottom: 0; left: 0;
	opacity: 0;
	z-index: 100;
	position: absolute;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.switch {
	width: 100%;
	max-width: 680px;
	height: auto;
	position: relative;
	margin: 20px auto 0;
	cursor: pointer;
	font-size: 1em;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 20px;
}
.span-1,.span-2,.span-3 {
	display: inline-block;
	vertical-align: middle;
	color: #666;
	padding: 8px 18px;
	border-radius: 10px;
	transition: background .3s, transform .2s, color .3s;
	font-size: .95em;
	border: 1px solid rgba(255,140,0,.15);
}
.span-1:hover { background: #fff5eb; color: #e8750a; transform: translateY(-1px) }
.index-nav .active {
	border: 2px solid #e8750a;
	border-radius: 10px;
	font-size: 1em;
	background: #fff5eb;
	color: #e8750a;
	font-weight: 600;
}

/* ===== Help / About Page ===== */
html[app=help] body {
	background: #fafafa;
}
html[app=help] header {
	background: #fff;
	padding: 16px 0;
}
html[app=help] header h1 {
	background: none;
	color: #e8750a;
	font-size: 1.6em;
	width: auto;
	height: auto;
	line-height: 1.2;
}
html[app=help] header nav a { color: #666 }
html[app=help] header nav a:hover { background: #fff5eb; color: #e8750a }
html[app=help] header nav a.login-link {
	box-shadow: 0 0 0 2px #e8750a;
	color: #e8750a;
}
html[app=help] header nav a.login-link:hover {
	background: #e8750a;
	color: #fff;
}

html[app=help] #标题 {
	line-height: 100px;
	text-align: center;
	color: #e8750a;
	font-size: 1.8em;
}
html[app=help] .nav-box {
	text-align: center;
	padding: 10px 20px 20px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}
html[app=help] .nav-box a {
	display: inline-block;
	padding: 10px 20px;
	color: #666;
	opacity: .7;
	border-radius: 10px;
	transition: opacity .3s, background .3s, color .3s;
	font-size: .95em;
	border: 1px solid rgba(255,140,0,.15);
}
html[app=help] .nav-box a:hover { opacity: 1; background: #fff5eb; color: #e8750a }
html[app=help] .nav-box a.active {
	font-weight: 700;
	opacity: 1;
	background: #fff5eb;
	color: #e8750a;
	border-color: #e8750a;
}
html[app=help] .nav-box a.active:after { display: none }

html[app=help] .main-box {
	background: #fff;
	margin: 0;
	min-height: 500px;
	border-radius: 24px 24px 0 0;
	box-shadow: 0 -4px 30px rgba(0,0,0,.04);
}
html[app=help] .text-banner {
	text-align: center;
	font-size: 1em;
	line-height: 1.2;
	padding: 80px 0;
	color: #bbb;
}
html[app=help] .md-content {
	padding: 30px 20px;
	box-sizing: border-box;
	font-size: 16px;
	line-height: 1.9;
	max-width: 860px;
	margin: 0 auto;
}
html[app=help] .md-content p { padding: .8em 0 }
html[app=help] .md-content h1,
html[app=help] .md-content h2 {
	padding-top: 1.5em;
	margin: 0;
	color: #e8750a;
}
html[app=help] .md-content h1 { font-size: 1.5em }
html[app=help] .md-content h2 { font-size: 1.2em }

html[app=help] footer {
	border-radius: 0;
}

/* ============================================ */
/* ===== Tablet (<=1024px) ==================== */
/* ============================================ */
@media (max-width: 1024px) {
	html { font-size: 1.3em }

	.step-1 { padding: 60px 20px 40px }
	.step-1 h2 { font-size: 2.4em }
	.hero-mascot { width: 260px }

	.step-2 ul li { width: calc(50% - 20px) }
}

/* ============================================ */
/* ===== Mobile (<=768px) ===================== */
/* ============================================ */
@media (max-width: 768px) {
	html { font-size: 1.1em }

	.layout { padding: 0 16px }

	/* Header */
	header { padding: 12px 0 }
	header .layout { flex-wrap: nowrap }
	header h1 {
		font-size: 1.4em;
	}

	/* Hamburger visible */
	.menu-toggle { display: flex }

	/* Mobile nav drawer */
	header nav {
		position: fixed;
		top: 0;
		right: 0;
		width: 280px;
		height: 100vh;
		height: 100dvh;
		background: #fff;
		flex-direction: column;
		align-items: stretch;
		padding: 80px 20px 20px;
		gap: 0;
		box-shadow: -5px 0 30px rgba(0,0,0,.1);
		transform: translateX(100%);
		transition: transform .3s ease;
		z-index: 1000;
		overflow-y: auto;
		border-left: 1px solid rgba(255,140,0,.1);
	}
	body.nav-open header nav { transform: translateX(0) }

	header nav a {
		padding: 14px 16px;
		font-size: 1.05em;
		border-radius: 10px;
		margin: 2px 0;
		color: #333;
	}
	header nav a:hover { background: #fff5eb; color: #e8750a }
	header nav a.login-link {
		margin-left: 0;
		margin-top: 12px;
		text-align: center;
		box-shadow: 0 0 0 2px #e8750a;
		color: #e8750a;
	}
	header nav a.login-link:hover {
		background: #e8750a;
		color: #fff;
	}

	/* Hero */
	.step-1 {
		min-height: auto;
		padding: 100px 20px 50px;
		flex-direction: column;
	}
	.step-1 .step-1-in {
		flex-direction: column;
		gap: 20px;
	}
	.step-1 h2 { font-size: 2em }
	.hero-mascot {
		width: 200px;
		max-width: 60vw;
	}
	.step-1 .link-reg {
		font-size: 1em;
		line-height: 50px;
		padding: 0 1.5em;
		margin-top: 20px;
	}

	/* Features */
	.step-2 { padding: 40px 0 50px }
	.step-2 .ui-h-1 { font-size: 1.8em; margin-bottom: 20px }
	.step-2 ul { padding: 0 16px; gap: 14px }
	.step-2 ul li {
		width: 100%;
		max-width: none;
		min-width: auto;
		padding: 18px 16px;
	}
	.step-2 ul li h4 { font-size: 20px }
	.step-2 ul li p { font-size: 14px }
	.step-2 ul li .icon { font-size: 28px; line-height: 56px }
	.step-2 ul li .icon i { width: 56px; height: 56px }
	.step-2 ul li .icon big { font-size: 34px }
	.step-2 ul li .icon cite { font-size: 20px }

	/* Pricing */
	.step-3 { padding: 40px 0 60px }
	.step-3 .ui-h { font-size: 1.8em }
	.step-3>ul { padding: 20px 16px 40px; gap: 16px }
	.step-3>ul>li {
		width: 100%;
		max-width: 360px;
	}
	.step-3>ul>li:hover,
	.step-3>ul>li:nth-child(2) {
		transform: translateY(-4px);
	}

	/* DDoS */
	.step-4 { padding: 40px 16px 60px }
	.step-4 .content i { width: 90px; height: 90px; background-size: contain }
	.step-4 .content h3 { font-size: 1.6em }
	.step-4 .content .button { font-size: 20px; line-height: 46px }

	/* Footer */
	footer { padding: 30px 16px 20px }
	footer .htko { font-size: 1.2em; line-height: 60px }
	footer .layout {
		flex-direction: column;
		text-align: center;
		padding: 20px 0 0;
		font-size: 12px;
	}
	footer .layout .l,
	footer .layout .r { float: none; text-align: center }

	/* Help page */
	html[app=help] #标题 { line-height: 70px; font-size: 1.4em }
	html[app=help] .nav-box { gap: 6px; padding: 10px 16px 16px }
	html[app=help] .nav-box a { padding: 8px 14px; font-size: .88em }
	html[app=help] .md-content { padding: 20px 16px; font-size: 15px }

	/* Switch */
	.switch { height: auto; padding: 10px 16px }
	.span-1 { font-size: .88em; padding: 6px 14px }

	/* Tip */
	.tip { display: none }

	/* Note */
	.note { font-size: 14px; line-height: 24px; padding: 0 1em }
}

/* ============================================ */
/* ===== Small Mobile (<=480px) =============== */
/* ============================================ */
@media (max-width: 480px) {
	html { font-size: 1em }

	header h1 { font-size: 1.2em }

	.step-1 { padding: 80px 16px 40px }
	.step-1 h2 { font-size: 1.7em }
	.hero-mascot { width: 160px }
	.step-1 .link-reg { font-size: .95em; line-height: 46px }

	.step-2 ul li h4 { font-size: 18px; line-height: 28px }
	.step-2 ul li .icon big { font-size: 28px }
	.step-2 ul li .icon cite { font-size: 18px }

	.step-3 .ui-h { font-size: 1.5em }
	.step-3>ul>li .head h4 big { font-size: 1.1em }
	.step-3>ul>li .button { line-height: 44px; font-size: 15px }

	.step-4 .content .button { font-size: 18px; line-height: 42px; padding: 0 1.5em }

	footer .htko { font-size: 1em }
}