/* ========================================
   宝塔Linux面板免费版 - 专题页样式
   ======================================== */

/* CSS变量 */
:root {
	--primary-color: #4caf50;
	--primary-light: #e8f5e9;
	--primary-dark: #388e3c;
	--text-primary: #333;
	--text-secondary: #666;
	--text-muted: #999;
	--bg-color: #f8fff8;
	--bg-gradient-start: #f0faf0;
	--bg-gradient-end: #ffffff;
	--border-color: #e0e0e0;
	--white: #ffffff;
	--shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	--shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.08);
	--border-radius: 8px;
	--border-radius-lg: 16px;
}

/* 重置样式 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

*,
:before,
:after {
	box-sizing: border-box;
	border-width: 0;
	border-style: solid;
	border-color: #e5e7eb;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family:
		LarkHackSafariFont,
		LarkEmojiFont,
		LarkChineseQuote,
		-apple-system,
		BlinkMacSystemFont,
		Helvetica Neue,
		Tahoma,
		PingFang SC,
		Microsoft Yahei,
		Arial,
		Hiragino Sans GB,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji',
		Segoe UI Symbol,
		'Noto Color Emoji';
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-primary);
	min-height: 100vh;
}

/* 容器 */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* 通用标题样式 */
.section-header {
	text-align: center;
	margin-bottom: 48px;
}

.section-title {
	font-size: 28px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 12px;
}

.section-title .highlight {
	color: var(--primary-color);
}

.section-subtitle {
	font-size: 14px;
	color: var(--text-secondary);
}

/* ========================================
   Hero Section
   ======================================== */
.hero-section {
	padding: 20px 0 80px;
	text-align: center;
	background-color: #fdfbfe;
	position: relative;
}

.hero-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url('https://www.bt.cn/static/astro/images/home/banner-1/banner-bg-1.png');
	background-size: 1440px 600px;
	background-position: top center;
	background-repeat: no-repeat;
	opacity: 0.2;
	z-index: 0;
}

.hero-section > * {
	position: relative;
	z-index: 1;
}

.hero-content {
	max-width: 800px;
	margin: 0 auto 48px;
}

.hero-title {
	font-size: 44px;
	font-weight: 700;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.hero-title .highlight {
	color: var(--primary-color);
}

.tag-free-img {
	display: inline-block;
	width: 40px;
	height: auto;
	vertical-align: middle;
}

.hero-desc {
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.8;
	margin-bottom: 32px;
}

.hero-btns {
	display: flex;
	gap: 16px;
	justify-content: center;
	align-items: center;
}

/* 按钮样式 */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 32px;
	font-size: 14px;
	font-weight: 500;
	border-radius: var(--border-radius);
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
	border: none;
}

.btn-primary {
	background: linear-gradient(135deg, #20b558 0%, #18a548 100%);
	color: var(--white);
	box-shadow: 0 4px 16px rgba(32, 181, 88, 0.35);
	font-size: 16px;
	font-weight: 500;
	padding: 14px 36px;
	border-radius: 6px;
}

.btn-primary:hover {
	background: linear-gradient(135deg, #1ca84e 0%, #159a42 100%);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(32, 181, 88, 0.45);
}

.btn-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.btn-outline {
	background: var(--white);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
}

.btn-outline:hover {
	border-color: var(--primary-color);
	color: var(--primary-color);
}

/* 笔记本Mockup */
.hero-image {
	display: flex;
	justify-content: center;
	padding: 0 20px;
}

.laptop-mockup {
	width: 100%;
	max-width: 900px;
}

.laptop-img {
	width: 100%;
	height: auto;
	display: block;
}

/* ========================================
   Features Section
   ======================================== */
.features-section {
	padding: 20px 0;
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.feature-card {
	background: var(--white);
	border-radius: 2px;
	padding: 32px;
	box-shadow: var(--shadow);
	transition: all 0.3s ease;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.feature-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
}

.feature-content {
	flex: 1;
}

.feature-icon {
	width: 80px;
	height: 80px;
	flex-shrink: 0;
}

.feature-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.feature-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 8px;
}

.feature-desc {
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.6;
}

/* ========================================
   Functions Section
   ======================================== */
.functions-section {
	padding: 20px 0;
}

.functions-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	background: var(--white);
	border-radius: 2px;
	padding: 32px;
	box-shadow: var(--shadow);
}

.function-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
}

.function-icon {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: linear-gradient(135deg, #c2c63e 0%, #29a73a 100%);
}

.function-icon img {
	width: 24px;
	height: 24px;
	filter: brightness(0) invert(1);
}

.function-content {
	flex: 1;
}

.function-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 4px;
}

.function-desc {
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.5;
}

/* ========================================
   Operation Section
   ======================================== */
.operation-section {
	padding: 20px 0;
}

.operation-content {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 0;
	background: var(--white);
	overflow: hidden;
}

.operation-tabs {
	display: flex;
	flex-direction: column;
	background: #fafafa;
}

.tab-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 20px;
	cursor: pointer;
	transition: all 0.3s ease;
	min-height: 133px;
}

.tab-item:not(.active):hover {
	background: rgba(76, 175, 80, 0.05);
}

.tab-item.active {
	background: url('../img/tabs-active.png');
	color: var(--white);
	position: relative;
	align-items: center;
	padding: 0 20px 0 10px;
}

.tab-number {
	font-size: 30px;
	font-weight: 500;
	color: #a1a7b3;
	line-height: 1.5;
}

.tab-item.active .tab-number {
	display: none;
}

.tab-arrow {
	display: none;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
}

.tab-arrow img {
	width: 100%;
	height: 100%;
}

.tab-item.active .tab-arrow {
	display: block;
}

.tab-info {
	flex: 1;
}

.tab-title {
	font-size: 20px;
	font-weight: 400;
	color: var(--text-primary);
	transition: all 0.3s ease;
}

.tab-item.active .tab-title {
	color: var(--white);
	font-weight: 600;
	font-size: 18px;
}

.tab-desc {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.6;
	display: none;
}

.tab-item.active .tab-desc {
	margin-top: 8px;
	display: block;
}

.operation-preview {
	padding: 0;
	display: flex;
	align-items: stretch;
	justify-content: center;
}

.preview-image-wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.preview-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transform: scale(0.95);
	transition:
		opacity 0.4s ease,
		transform 0.4s ease;
	pointer-events: none;
}

.preview-image.active {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

/* ========================================
   Install Section
   ======================================== */
.install-section {
	padding: 20px 0 80px;
}

.install-content {
	max-width: 900px;
	margin: 0 auto;
}

/* 安装卡片容器 */
.install-cards-wrapper {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

/* 安装卡片样式 */
.install-card {
	padding: 24px 0;
	border-bottom: 1px dashed #e5e7eb;
}

.install-card:last-child {
	border-bottom: none;
}

.install-card-sub {
	padding: 20px 0;
}

.install-card-header {
	margin-bottom: 20px;
}

/* 推荐标签 */
.recommend-tag {
	display: inline-block;
	background: #ff8c00;
	color: var(--white);
	font-size: 12px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 4px;
	margin-bottom: 12px;
}

/* 版本信息 */
.version-info {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.version-info-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.version-title {
	font-size: 22px;
	font-weight: 600;
	color: var(--text-primary);
}

.version-promo {
	font-size: 13px;
	color: #ff6b6b;
}

.version-desc {
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.6;
}

.version-desc .doc-link {
	color: var(--primary-color);
	text-decoration: none;
	margin: 0 4px;
}

.version-desc .doc-link:hover {
	text-decoration: underline;
}

.card-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 12px;
}

.card-title .highlight-link {
	color: #20a53a;
	text-decoration: none;
}

.card-title .highlight-link:hover {
	text-decoration: underline;
}

/* 标签导航新样式 */
.install-tabs-nav {
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
	margin-top: 26px;
}

.install-tabs-nav .install-tab {
	padding: 10px 20px;
	border: 1px dashed #e0e0e0;
	border-radius: 2px;
	background: #fff;
	font-size: 14px;
	color: #666;
	cursor: pointer;
	transition: all 0.2s;
	text-align: center;
	white-space: nowrap;
}

.install-tabs-nav .install-tab:hover {
	border-color: var(--primary-color);
	color: var(--primary-color);
}

.install-tabs-nav .install-tab.active {
	background: #e8f5e9;
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
}

/* 下拉选择框 - 默认隐藏 */
.install-tabs-select {
	display: none;
	margin-bottom: 20px;
	margin-top: 20px;
}

.install-tabs-select select {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	background: #fff;
	font-size: 14px;
	color: #333;
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 32px;
}

.install-tabs-select select:focus {
	outline: none;
	border-color: var(--primary-color);
}

/* 代码块容器 */
.code-block-wrapper {
	display: flex;
	gap: 12px;
	align-items: stretch;
}

.code-block {
	flex: 1;
	background: #1e1e2e;
	border-radius: 2px;
	padding: 0 16px;
	overflow: hidden;
	display: flex;
	align-items: center;
	height: 56px;
	min-height: 56px;
}

.code-block pre {
	margin: 0;
	font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace;
	font-size: 13px;
	line-height: 16px;
	color: #d4d4d4;
	white-space: pre-wrap;
	word-break: break-all;
	width: 100%;
}

/* 复制按钮新样式 */
.copy-btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 20px;
	background: #20a53a;
	color: var(--white);
	border: none;
	border-radius: 2px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	white-space: nowrap;
	min-width: 100px;
}

.copy-btn:hover {
	background: #1a8a30;
}

.copy-icon {
	width: 20px;
	height: 20px;
}

/* 系统选择器 */
.os-selector {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.select-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.select-group label {
	font-size: 13px;
	color: var(--text-secondary);
	font-weight: 500;
}

.form-select {
	padding: 8px 12px;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	font-size: 13px;
	background: var(--white);
	color: var(--text-primary);
	min-width: 200px;
	cursor: pointer;
}

.form-select:focus {
	outline: none;
	border-color: var(--primary-color);
}

/* 系统要求 */
.system-requirements {
	background: var(--white);
	border-radius: var(--border-radius);
	padding: 0;
}

.system-requirements p {
	font-size: 13px;
	color: #333;
	margin-bottom: 12px;
	line-height: 1.6;
}

.system-requirements p:last-child {
	margin-bottom: 0;
}

.doc-link {
	color: var(--primary-color);
	text-decoration: none;
}

.doc-link:hover {
	text-decoration: underline;
}

/* 旧样式兼容 */
.install-step {
	margin-bottom: 32px;
}

.step-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 16px;
}

.step-desc {
	font-size: 13px;
	color: var(--text-secondary);
	margin-bottom: 0;
	line-height: 1.6;
}

.install-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.install-tabs .install-tab {
	padding: 8px 16px;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	background: var(--white);
	font-size: 13px;
	color: var(--text-secondary);
	cursor: pointer;
	transition: all 0.2s;
}

.install-tabs .install-tab:hover {
	border-color: var(--primary-color);
	color: var(--primary-color);
}

.install-tabs .install-tab.active {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white);
}

/* ========================================
   响应式设计
   ======================================== */
@media (max-width: 992px) {
	.features-grid {
		grid-template-columns: 1fr;
	}

	.functions-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.operation-content {
		grid-template-columns: 1fr;
	}

	.operation-tabs {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.panel-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.hero-section::before {
		background-size: 100% auto;
	}

	.hero-title {
		font-size: 22px;
		flex-direction: row;
		gap: 4px;
		flex-wrap: nowrap;
	}

	.tag-free-img {
		width: 32px;
	}

	.hero-desc {
		font-size: 13px;
		padding: 0 10px;
	}

	.hero-btns {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}

	.btn {
		width: 220px;
		padding: 12px 24px;
		font-size: 14px;
	}

	.functions-grid {
		grid-template-columns: 1fr;
		padding: 20px;
	}

	.function-item {
		padding: 12px;
	}

	.operation-tabs {
		flex-direction: column;
		gap: 8px;
	}

	.tab-item {
		min-height: auto;
		padding: 16px;
	}

	.tab-item.active {
		background: var(--primary-color);
		border-radius: 8px;
		padding: 16px;
	}

	.tab-item.active .tab-desc {
		display: none;
	}

	.tab-arrow {
		display: none !important;
	}

	.tab-number {
		display: none;
	}

	.tab-title {
		font-size: 16px;
	}

	.os-selector {
		flex-direction: column;
	}

	.install-tabs {
		flex-direction: column;
	}

	.install-tab {
		text-align: center;
	}

	.install-tabs-nav {
		display: none;
	}

	.install-tabs-select {
		display: block;
	}

	.code-block-wrapper {
		flex-direction: column;
		gap: 10px;
	}

	.code-block {
		padding: 0 14px;
		height: 104px;
		min-height: 104px;
	}

	.code-block pre {
		font-size: 12px;
		line-height: 16px;
		color: #fff;
	}

	.copy-btn {
		padding: 12px 24px;
		justify-content: center;
		width: 200px;
		min-height: 44px;
		margin: 0 auto;
	}

	.card-title {
		font-size: 13px;
		line-height: 1.6;
	}

	.step-title {
		font-size: 13px;
	}

	.step-desc {
		font-size: 12px;
	}

	.system-requirements p {
		font-size: 12px;
	}

	.version-info-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.version-title {
		font-size: 18px;
	}

	.laptop-mockup {
		padding: 8px 8px 16px;
	}

	.panel-sidebar {
		width: 70px;
		padding: 8px 4px;
	}

	.sidebar-logo {
		font-size: 10px;
		padding: 4px;
	}

	.menu-item {
		font-size: 9px;
		padding: 4px;
	}

	.section-header {
		margin-bottom: 32px;
		padding: 0 10px;
	}

	.section-title {
		font-size: 22px;
	}

	.section-subtitle {
		font-size: 13px;
	}

	.hero-section {
		padding: 40px 0 60px;
	}

	.feature-card {
		padding: 20px;
		flex-direction: column;
		text-align: center;
		gap: 16px;
	}

	.feature-icon {
		width: 60px;
		height: 60px;
	}

	.feature-title {
		font-size: 15px;
	}

	.feature-desc {
		font-size: 12px;
	}
}

@media (max-width: 480px) {
	.container {
		padding: 0 12px;
	}

	.section-title {
		font-size: 20px;
	}

	.section-subtitle {
		font-size: 12px;
	}

	.hero-title {
		font-size: 18px;
		flex-direction: row;
		gap: 4px;
		flex-wrap: nowrap;
	}

	.tag-free-img {
		width: 32px;
	}

	.hero-desc {
		font-size: 12px;
		margin-bottom: 24px;
	}

	.btn {
		width: auto;
		padding: 12px 24px;
		font-size: 14px;
		white-space: nowrap;
	}

	.feature-card {
		padding: 16px;
	}

	.function-icon {
		width: 36px;
		height: 36px;
	}

	.function-icon img {
		width: 20px;
		height: 20px;
	}

	.function-name {
		font-size: 13px;
	}

	.function-desc {
		font-size: 11px;
	}

	.install-tabs-nav .install-tab {
		flex: 1 1 100%;
		font-size: 12px;
		padding: 10px 6px;
	}

	.code-block {
		padding: 0 12px;
		height: 40px;
		min-height: 40px;
	}

	.code-block pre {
		font-size: 11px;
		line-height: 16px;
	}

	.copy-btn {
		font-size: 12px;
		padding: 10px;
	}

	.card-title,
	.step-title {
		font-size: 12px;
	}

	.system-requirements p {
		font-size: 11px;
	}

	.tab-title {
		font-size: 14px;
	}

	.tab-desc {
		display: none;
	}

	.hero-section {
		background-size: 100% auto;
	}

	/* 运维标签横向滚动 */
	.operation-content {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.operation-tabs {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 8px;
		padding-bottom: 8px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.operation-tabs::-webkit-scrollbar {
		display: none;
	}

	.tab-item {
		flex: 0 0 auto;
		min-width: 90px;
		padding: 10px 14px;
		background: #f5f5f5;
		border-radius: 8px;
	}

	.tab-item.active {
		background: var(--primary-color);
		padding: 10px 14px;
		border-radius: 8px;
	}

	.tab-info {
		text-align: center;
	}

	.tab-title {
		font-size: 12px;
		white-space: nowrap;
	}

	.tab-item.active .tab-title {
		font-size: 12px;
	}

	.operation-preview {
		width: 100%;
		height: 240px;
	}
}

@media (max-width: 375px) {
	.hero-title {
		font-size: 16px;
		flex-direction: row;
		gap: 4px;
		flex-wrap: nowrap;
	}

	.tag-free-img {
		width: 28px;
	}

	.btn {
		width: auto;
		padding: 12px 20px;
		font-size: 13px;
		white-space: nowrap;
	}

	.tab-item {
		min-width: 80px;
		padding: 8px 12px;
		border-radius: 8px;
	}

	.tab-item.active {
		border-radius: 8px;
	}

	.tab-title {
		font-size: 12px;
	}

	.tab-item.active .tab-title {
		font-size: 12px;
	}

	.section-title {
		font-size: 18px;
	}

	.feature-title {
		font-size: 14px;
	}

	.function-name {
		font-size: 12px;
	}

	.code-block {
		padding: 0 10px;
		height: 36px;
		min-height: 36px;
	}

	.code-block pre {
		font-size: 10px;
		line-height: 16px;
	}
}

.bg-gradient-download.btn {
	background: linear-gradient(135deg, #f4d03f, #20a53a, #fbc8d4);
	background-size: 200% 200%;
	animation: gradientMove 3s ease-in-out infinite;
	border-width: 2px;
	border-style: solid;
	border-color: #ffffff4d !important;
	color: #fff !important;
	box-shadow:
		0 4px 15px #00c6fb4d,
		inset 0 1px #fff3;
	justify-content: center;
}
.btn.btn-round {
	border-radius: 9999px;
}

.font-bold {
	font-weight: 700;
}

.gap-2 {
	gap: 8px;
}

.items-center {
	align-items: center;
}

.inline-flex {
	display: inline-flex;
}

.transition-all {
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 0.15s;
}

.text-bt {
	color: #20a53a;
}

.leading-28 {
	line-height: 28px;
}

.pb-\[5px\] {
	padding-bottom: 5px;
}

.border-b {
	border-bottom-width: 1px;
}

.text-\[16px\] {
	font-size: 16px;
}

@keyframes gradientMove {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	to {
		background-position: 0% 50%;
	}
}

/* 复制安装命令界面 */
.layui-layer {
	border-radius: 8px !important;
}

.copy-tips-main .customerService {
	color: #20a53a;
}

@media screen and (max-width: 490px) {
	.copy-tips-main .copy-tips-icon {
		height: 24px;
		width: 24px;
		margin-right: 8px;
	}

	.copy-tips-main .copy-tips-title {
		font-size: 20px;
		height: 110px;
	}

	.copy-tips-main .copy-content {
		padding: 28px 18px;
	}

	.copy-tips-main .copy-tips-title {
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.copy-tips-main .copy-content-text {
		font-size: 15px;
	}
}

.copy-tips-main {
	border-radius: 8px;
	background: #fff;
	position: relative;
}

.copy-tips-icon {
	color: #fff;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAAAs1JREFUeJztW1GW2yAMlHOx0pOVPRnek6kfhS6LJRBGyJB23svLro3RzEjCduIcYABE9MWmH/Hdxfcz2/eZth3HkW+fgmPWxJnoX4NTnQDwAQBgYcgQENEjYsB5CIjontZ5QRRuiTWMUBAecKxinjOiU7yPL1cjnPbHV48xdkZEcmLRSvGC0BA3rrBORpJ1/5bxBcHnBF6BSyOgbjA5p9Y6ocNrRfFm/FYXnzCFJ9ZXe6eqQAGqfHcTn1Dj3TtRUC0nQyDfDl46AeeibIIFMGQCk/0wn7YuOBNaB3HZdza0ddFdBUz2+QMWR1cVcNk35qwOcRW8W/YTmCoI5SAq+8stfFGMu3FcvbJ3MKCo0C5uTBV4AIBXHEN9cvsxyFkNUbDLNjnV9myWyINA/qrUdc5Da1y5/Cviu/lxbfCC76WV8Hj5E2WfcB7H8VMrzqs9xB6TxJ/Uxhd8fU+3BKwy/y2g1gKIN8/TNS6aaxI5r5YBOHCeJo5XFx9jkAYMB8TBM4mFeC6O1iLoqG0SAWjd8xSB0hWteVpZtMp8Fu8C7UVQLMhafIx5jYX0FZIbCNIU9oT4GPcST/1CKPbtSez6+y0vPNDzXFI5A8jBUtRMYOa2WfCu+Jx2KVwxoYSVeOqW/wSAubfDlX6f3vMtHvlO9hOTWcGNxbMXaiZ3g0Q7WPd8+1nFmW2QxdD9KEsel6pAJxlkTlYbtfIvB/Z/l7YBRNnPBlPwpowVwWSfT+q7VQGTfd866G2q4FYyuSrY0QRCi7t74M4mOLzz2C5jgNzF3YGbPimmikorbNkOt/DfBGiaEP6JlmiYYFoNBRezuBITphKqxJ8WkyJROzskBFRqDfw6jz9ieo1UEBiRG+LSSzC3F4jOUZ1zGm4YQRkzcjziCmciBSP2FF7CwIiwpPASeO/HjzX4WVyn/Xo8B/5ZpFz8N38kx2V/n/Hd9OfzvwGWOScvbMaWxQAAAABJRU5ErkJggg==');
	background-size: contain;
	height: 32px;
	width: 32px;
	margin-right: 12px;
}

.copy-tips-title {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 24px;
	height: 124px;
	color: #fff;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeoAAAB8CAYAAACmJfPQAAAABHNCSVQICAgIfAhkiAAADPBJREFUeJzt3ctuPEcVx/FT1bcZ+79FhGUegA0CCcESCRQpUXZBSlY8BM/Am7ABRSiLkBdAeQsU1rCMZ6YvVcWi3Z6xPZ7x3Lpu388qcSK5/3+P+3RV1/kdJS988u2ffvLfzf9+09nhC+eGn4pTv3v5/yAtrWmls73vywCAXG2UqD9bkX//56t/ffvyP6rdf/nVPz79bNP3fxfn6vmuDz4ZZ2Q1rH1fBgBg1Ilyn//w5fffTV/Q0z/84utPv9p03TcU6by0pvN9CQCArVqc+ufHf/3tF9MXlMjjSrrrvvF3XfCht71sTOv7MgAA+yj3yQ9ffv+dEhH5+d/+0LKSzosTJw/9Spw435cCANivG9buZ/qXX3/2OUU6P63pKNIAELa6WOpf68EMH/u+EszLuEF6TnkDQPCUyB+1EfMX3xeCeXGADABi4T7S4mTh+zIwn852Ypz1fRkAgPf5vT7+/yAVViyraQCIDIU6IxRpAIgPhToTgxtksIPvywAAnIhCnQlW0wAQJwp1BlrTiuUAGQBEiUKdOOMMk7EAIGIU6sR1bHkDQNQo1AnrbS+DM74vAwBwAQp1opw4DpABQAIo1Ili6AYApIFCnSDjDEM3ACSjVIU0Rb5DHkvfF4Dra03r+xIA4GqaohatCilVKa3tsgtvYkWdGIZuAEhJXVSiVSEiIlppWRYLWRYL0Sqf8pXPnzQDDN0AkBKttDS6efX1UpdyXy6l1pWHq5ofhToh9EwDSMnh99JKmqKRu3Ip5eOKO1UU6kQMbpA+s/c2ANJV6lJKdfwYVaEKWZZLWRSNKFEzXNn8KNSJYMsbQEpOPeVd6UqW5eJGV+MXhToBre0YugEgGU1Riz6jPKW6YKFQR846w7tpAMkolJZan94zPXa8pBmZTKGOXGsp0gDScU6wiUu844VCHbHe9jLYNJ8gAeTpnByIlIu0iIheDSsZHKeFY8PQDQApak0nDyfUpRw6XrRxVtbDRjamZYhDRBi6ASBV9qkubcTJ4RV2DguWp63v3vby0K8Y5hABhm4AyEFvB/mxX0n3xlmcXDpenr2jduJkY1pZDetkT8+lIIcnSACYtKZ7VZess9l0vOw9TGackdWwfpzCxPZqSFJuQQCAt0x1aXpN29p8pgQezGfrbC+9G6TRtVSZhJ+HLPUWBAA4Zux2GbI6o3O0Pcu5cTt8bTZZvAsIGUUaACSrIi1yQh/1YAd5GFYEbHiSQwsCAOC1kwNPuhN73HAdrKYBIE9nJZOd0uOGy+XSggAAeO2iCNFjPW64HEM3ACBvV8n6HnvcVrQN3QBnAgAgb1cbymGcfdbjhssxdAMAcPXpWUSRXsfY0M9qGgByd5Mxl0SRXq4znTjHzgQA5O6m86iJIj2PcUY6diQAAHIkQvRaOtvL4AapdSOVnuVbRo2eaQDA5KYr6l3WOdmYDVGkR3S253UBEBCllNyXSylV4ftSkKnZCvVkiiKl9/q1cehGPhNhgBg0uhatClmWS1kUjShRvi8JmZm9UE9aokhfYcsbCEupy2eTAytdyX11JzXTBDEjb4VahCjSXQzdAMLT6PrV15QoaYpG7sqlFGyHYwZeC/WEKFJW00BomqIWrd6+RRaqkLtyKU1RsxmOmwqiUE/GKNL8eq87hm4AQdFKS71nNb1PrWu5r+7oaMHNBFWoRba917lEkVpnWU0DgWmK9xXpiRIti2Ihy3JxcBUOnCPYT1QuUaTEhAJhqXQppTpvdVyqUu7Lu5MLPXBIsIVaZBtFuk50O3wcusEBMiAUSk5fTe9T61ruyzsp2Q7HFQRdqCdDklGkDN0AQlMXjagr3Ra10rIsFrIsFqIVx81wvqge98YoUiONrqN/Um0ZugEEpVDFTfqjS11KqQtpTUeGP84SxYp6l3VW1lMUaaS91wzdAMJz2/fK295rokhxqugK9WSwgzxE2nvNKW8gLLWuZgkvKYgixRmiLdST2KJIGboBhEUpNfsp7SmKtCKKFO8QfaEWiSeK1ImVjtU0EJQxJnT+1a0SJQuiSPEOSRTqSW8HeejXwb7/bU2XRYgLEItSF95XtbtRpAhPqUvvQTZJFWqRsfe6NW1wUaQM3QDC0+jG9yU8qXUtH4giDU6j66cgm9rTw1RyhXpidnqvQ1jFcoAMCEt9ZOiGD0SRhuXlYJbmKchm3lcVyX8SOtvLw+A3ipShG0BYtNJ7R1iGgihS/94azDIG2Tye3J8pyCb5Qi0i4txjFKlZi515O5yhG0B4YimARJH6c+wzUulKPpR3NwnJeSmLQj0ZrJGHYT1rdCcxoUBYLhm64cMURbooGqJIZ/L+z8g2yOaWJ/ezKtSTbqbea4ZuAOGJZTX9UqWr8UATvdc3dc5glkIVUhe3+7lkWahFtr3Xt4sidVGmpgEpa4r6akM3/JhnBZezcwez3DIjI+ZP7FXcKoq0NZ1Yhm4AwRiHbsS5mn5p6r0mivS6zh3M0tlOzA0PDGdfqCet6WR1pe1whm4A4Yl1y/sQokiv65zPiJXbHximUO8wT1Gkl/Vec8obCMtcQzd82EaRLqSg9/oine1PfhU6x/2en+oeve3loT+v97pn6AYQFCXKW6LUnApVyh291xc59VXoYIdZDgxTqN/gZOy9PiWKdIwvZTUNhGQ8QJbPe9xa14/b4fG0oIXmfa9C3WzttxTqI3ajSOXIdngocaUARiEM3fBBE0V6MXNkKuN4YHiexEl+gu/U2V5+PBBFytANIDwhx4TOwfcwiRRMUxl37/1zHximUJ9gG0W6efUkxZxpICzj0I00D5CdahwmsZx9mEQqXr4Knft+T6E+w2AHeRhWT+8nbt1DB+A0oQ/d8EGrYvZhEqmZXoUOMx8Y5rTBBTrTyWAHJmMBgeHk89sqXUmlS2lNR95DJFhRX4giDYQltqEbfhBFGhMKNYCkcHDq/YgijQOFGkAymqIWzW3tZGMU6ZLe60DxiQaQhELpZIZu+KB2eq+JIg0LPw0ASWiKxvclJKEkijQ4FGoA0asSHrrhyxRFWrId7h2FGkDUlChWfzeiRcuSKFLv+JsHELXchm748BRFmmFueggo1ACiVao8h2740hTNGEXKa4ZZUaiRBCVK7kvep+WGnun5aVXIkt7rWVGokYSmqEWr8X0aWcZ5qDlA5tXYe812+Bwo1Ijey+3PSlfygfdpSdNK044VAEUU6Swo1Ije/u1PbiAp45R3WKYo0vFgH66NQo2oHdv+JMs4PSVDN4I19V4TRXpdFGpEa9z+fN/Kanqfxgnh+LGaDttuFCm919fB3yKi1eha5IRVshIli6KRO7KMo8XQjXhMvdc8WF2OTzyiVOry7FasgizjKDF0I061rmmdvBCFGlG6RpElyzguPFjFa2qdXBYL0bROnoxCjehcc/uTLOM4jEM3eKCKXamJIj0HdyZE5Vbbn09ZxqzagsPQjdRsWyeJIn0fCjWicutC2uh6zDLW3EBCwdCNNBVEkb4bhRrRqHQ1S/+sVoUsiyVRpAEoGLqRPFonj6NQIwo+tj8rXfGk7xlb3nnYtk6SJLgPhRpR8LH92dlOrLOzfk9sMXQjP7tRpNiiUCN4PrY/rbPSmm7W74mtU1LnkJ5a1/KBKNInFGoEz8cNu7UUaZ9OTZ1Deogi3cr7T4/g+dj+7G0vgx1m/Z7YuiR1DukhipRCjYBp5aN/1rGa9iznGzLeNkWR5nhugUKNYNW6kbm3P1vTiXNu1u+JLYZu4BArVowzvi9jdvxGIEilLmc/SGKckc72s35PbDF0A8fkesCTQo0gOedmf3LO9SYQCuJbcUibcbskhRpBMs7IalhLa1oRuf1WdGf7LLfUQjFX6hziZJ2RLuMHaX4zELTO9tK7QRpd36yX2onN+ibgG0M3cEzuBzxZUSN4zjnZmFbWZn2Tra/WdOJmWLVjP4Zu4JCxXTLv3a6gC3WpS5rd8WSwRh6G1VWfrgc3SE/PtDcM3cAhjnZJEQl867vRtWilpSxLaW3H9iRERKQznQx2kKaoL36vyQEyv9jyxiEd7ZIiEvCKuinqZytp5gRjl3VW1sNGNmYjVs7bDmfohl8M3cAhtEtuBVmo9Rv9lMwJxku9HeShX0l34vYYQzf88pM6h5jw+7kVZKE+9gtc6Uo+lHdS824Lj1rTyWpYiXHve9/Mey+/aoZu4IDOdrRL7giuUFe6fOd7RyUNg8axwzgrq2EjG9MePMXN0A2/xtQ5HrKxnxN2u14KqlCf0085DRpfFA0tHhCRsRA/9Cvp977fcidvk+O6GmJCcQBF+rWgCvXYT3neJVW6knsGjeORk7H3ejWsn22htaYTyylSb14eEgV20S65XzC/Mdfop1SingaNF9wMIM+jSDlF6tdbh0SBCavp/YJZfl7zBGipSinLUjrb8YOHiDxGkfKk7hWnvHEI7ZJv+z8XhNZUlY2OBwAAAABJRU5ErkJggg==');
	background-size: contain;
}

.copy-content {
	padding: 40px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.copy-content-text {
	color: #666;
	font-size: 16px;
	text-align: center;
}

.copy-content-text a {
	color: #20a53a;
}

.copy-btn-group {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}

.copy-btn-group a.active {
	border-color: #20a53a;
	color: #20a53a;
}

.copy-btn-group .mr15 {
	margin-right: 15px;
}

.copy-btn-group a {
	cursor: pointer;
	/* border: 1px solid #999999; */
	width: 142px;
	height: 42px;
	line-height: 42px;
	text-align: center;
	color: #999999;
	font-size: 16px;
	border-radius: 4px;
	transition: all 300ms;
}

/* .copy-btn-group a.active:hover,.copy-btn-group a:hover{
		background: #20a53a;
		color: #fff;
		border-color: #20a53a;
	} */

.copy-countdown-close {
	width: 140px;
	background-color: rgba(254, 254, 254, 0.2);
	font-size: 12px;
	color: #e1e1e1;
	position: absolute;
	top: 0;
	right: 0;
	padding: 0 5px;
	border-radius: 1px;
}

.justify-center {
	justify-content: center;
}

.flex {
	display: flex;
}