@charset "utf-8";

/* ============================================================
   ITOne Modern — 增量样式层
   仅覆盖 style.css 未定义的新增元素：
   hero-badge / hero-meta / m-cta / 导航注册按钮 / habout-cont
   其余区块样式一律由 style.css 负责，切勿重复定义。
   ============================================================ */

/* ---------- Hero 徽章 ---------- */
.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .06em;
	color: #cfe4ff;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .28);
	padding: 7px 16px;
	border-radius: 999px;
	margin: 0 0 22px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.hero-badge i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #2ee6a8;
	box-shadow: 0 0 10px #2ee6a8;
	animation: mPulse 1.8s infinite;
}
@keyframes mPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ---------- Hero 信任标识 ---------- */
.hero-meta {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px 30px;
	margin-top: 40px;
}
.hero-meta span {
	font-size: 13px;
	color: rgba(255, 255, 255, .72);
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.hero-meta span::before {
	content: "";
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat,
		#22b573;
	box-shadow: 0 0 0 3px rgba(34, 181, 115, .22);
	flex-shrink: 0;
}

/* ---------- 导航"立即注册"按钮 ---------- */
#header .main-nav .navigation li:nth-last-child(2) a {
	background: linear-gradient(135deg, #ffa53d 0%, var(--c-accent) 55%, var(--c-accent-dark) 100%);
	color: #fff;
	padding: 9px 20px;
	margin-left: 8px;
	border-radius: 999px;
	box-shadow: 0 6px 16px rgba(255, 138, 0, .32);
}
#header .main-nav .navigation li:nth-last-child(2) a:hover {
	color: #fff;
	background: linear-gradient(135deg, #ffa53d 0%, var(--c-accent) 55%, var(--c-accent-dark) 100%);
	filter: brightness(1.07);
	transform: translateY(-1px);
}

/* ---------- CTA 注册引导横幅 ---------- */
.m-cta-wrap { background: var(--c-bg); }
.m-cta {
	max-width: 1200px;
	margin: 0 auto 84px;
	background:
		radial-gradient(680px 300px at 88% 10%, rgba(29, 111, 224, .35), transparent 60%),
		radial-gradient(560px 280px at 8% 95%, rgba(255, 138, 0, .22), transparent 55%),
		linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-deep) 100%);
	border-radius: 20px;
	padding: 52px 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
	box-shadow: var(--shadow-md);
}
.m-cta h2 { color: #fff; font-size: 26px; margin: 0 0 8px; }
.m-cta p { color: rgba(255, 255, 255, .72); font-size: 15px; margin: 0; }
.m-cta .hero-actions { margin: 0; }
.m-cta .hero-actions .btn { white-space: nowrap; }

/* ---------- 关于区正文（替代 p 嵌套） ---------- */
.habout-cont { line-height: 1.9; color: var(--c-text-sub); font-size: 14.5px; }
.habout-cont p { line-height: 1.9; color: var(--c-text-sub); font-size: 14.5px; margin: 0 0 12px; }

/* ---------- 响应式补充 ---------- */
@media screen and (max-width: 768px) {
	.m-cta { padding: 38px 26px; margin-bottom: 60px; }
	.m-cta h2 { font-size: 21px; }
	.hero-meta { gap: 10px 18px; margin-top: 30px; }
	.hero-badge { font-size: 12px; padding: 6px 13px; }
}

/* ---------- 四大通道卡片图标 ---------- */
.four-menu ul li a .m-ico {
	width: 54px;
	height: 54px;
	border-radius: 14px;
	background: #fff;
	padding: 8px;
	object-fit: contain;
	margin: 0 0 14px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

/* ============================================================
   内页现代化层（列表页 / 文章页 / 搜索页 / 评论）
   ============================================================ */

/* ---------- 内页顶部横幅（面包屑区） ---------- */
#class {
	height: auto;
	padding: 40px 0;
	background:
		radial-gradient(600px 240px at 85% 0%, rgba(29, 111, 224, .35), transparent 60%),
		linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-deep) 100%);
}
#class .warp {
	border-bottom: none;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
#class .left { float: none; }
#class .left h2 { padding-top: 0; line-height: 1.3; float: none; }
#class .left h2 a { text-decoration: none; }
#class .left strong {
	font-size: 28px;
	font-family: inherit;
	font-weight: 700;
	color: #fff;
	margin-right: 0;
	background: linear-gradient(135deg, #fff 0%, #bcd8ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
#class .left p {
	float: none;
	color: rgba(255, 255, 255, .62);
	margin: 10px 0 0;
	font-size: 14px;
	max-width: 640px;
}
#class .qq { margin-top: 0; float: none; flex-shrink: 0; }
#class .qq a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, #ffa53d 0%, var(--c-accent) 55%, var(--c-accent-dark) 100%);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 22px;
	border-radius: 999px;
	box-shadow: 0 8px 20px rgba(255, 138, 0, .3);
	transition: transform .3s ease, box-shadow .3s ease;
}
#class .qq a:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255, 138, 0, .4); }
#class .qq img { display: none; }
#class .qq a::before {
	content: "";
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
#class .qq a::after { content: "在线咨询"; }

/* ---------- 内页两栏布局 ---------- */
#main { background: var(--c-bg); }
#list, #content {
	width: auto;
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 16px 56px;
	display: flex;
	gap: 32px;
	align-items: flex-start;
}
#list .content_left, #content .content_left {
	float: none;
	width: 272px;
	flex: 0 0 272px;
}
#list .left.fr, #content .view.fr {
	float: none;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

/* ---------- 侧栏卡片 ---------- */
.portlet, .news_more {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: 14px;
	box-shadow: var(--shadow-sm);
	margin: 0 0 20px;
	overflow: hidden;
	transition: box-shadow .3s ease;
}
.portlet:hover, .news_more:hover { box-shadow: var(--shadow-md); }
.portlet .classname, .news_more .more p {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--c-text);
	padding: 16px 18px 14px;
	margin: 0;
	border-bottom: 1px solid var(--c-border);
	position: relative;
	background: none;
	height: auto;
	line-height: 1.4;
}
.portlet .classname::before, .news_more .more p::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18px;
	bottom: 16px;
	width: 3px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--c-accent) 0%, var(--c-accent-dark) 100%);
}
.portlet .class_list, .news_more .more ul { padding: 10px 12px 14px; margin: 0; }
.portlet .class_list li, .news_more .more li { list-style: none; margin: 0; padding: 0; background: none; }
.portlet .class_list li a, .news_more .more li a {
	display: block;
	font-size: 14px;
	color: var(--c-text-sub);
	padding: 9px 10px;
	border-radius: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color .2s ease, background .2s ease, padding-left .2s ease;
	background: none;
	height: auto;
	line-height: 1.5;
}
.portlet .class_list li a:hover, .news_more .more li a:hover {
	color: var(--c-primary);
	background: var(--c-primary-soft);
	padding-left: 16px;
}
.portlet .class_list li a.on, .portlet .class_list li a.cur {
	color: var(--c-primary);
	background: var(--c-primary-soft);
	font-weight: 600;
}

/* ---------- 文章列表项 ---------- */
#list .left.fr .tit { display: none; }
#list .left.fr > ul { margin: 0; padding: 0; }
.news_list {
	width: auto;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: 14px;
	box-shadow: var(--shadow-sm);
	padding: 20px 22px;
	margin: 0 0 16px;
	transition: transform .3s ease, box-shadow .3s ease;
}
.news_list:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.news_list .pic {
	float: left;
	border: none;
	margin: 0 18px 0 0;
	border-radius: 10px;
	overflow: hidden;
	width: 132px;
	height: 86px;
	display: block;
}
.news_list .pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
	transition: transform .4s ease;
}
.news_list:hover .pic img { transform: scale(1.06); }
.news_list p { margin: 0; overflow: hidden; }
.news_list p a {
	font-size: 16.5px;
	font-weight: 600;
	color: var(--c-text);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.news_list p a:hover { color: var(--c-primary); }
.news_list p span {
	float: none;
	display: inline-block;
	font-size: 12px;
	color: var(--c-text-sub);
	background: var(--c-bg);
	border-radius: 999px;
	padding: 2px 10px;
	margin: 0 0 6px;
}
.news_list p.m {
	padding-top: 6px;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--c-text-sub);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- 分页 ---------- */
.pagelist {
	padding: 26px 0 8px;
	margin: 0;
	height: auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 14px;
}
.pagelist a, .pagelist span {
	margin: 0;
	padding: 8px 15px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--c-border);
	color: var(--c-text-sub);
	font-size: 14px;
	line-height: 1.3;
	transition: all .25s ease;
	text-decoration: none;
}
.pagelist a:hover {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
	transform: translateY(-1px);
}
.pagelist span.current, .pagelist .current {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
	font-weight: 600;
}

/* ---------- 文章页主体 ---------- */
#content .view {
	width: auto;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: 16px;
	box-shadow: var(--shadow-sm);
	padding: 42px 48px;
}
#content .view .tit {
	border-bottom: 1px solid var(--c-border);
	padding-bottom: 20px;
	margin-bottom: 26px;
}
#content .view .tit h1 {
	font-size: 26px;
	line-height: 1.45;
	color: var(--c-text);
	font-weight: 700;
	margin: 0 0 12px;
}
#content .view .tit .info { height: auto; line-height: 1.6; margin-top: 0; }
#content .view .tit .info ul { display: flex; gap: 20px; flex-wrap: wrap; }
#content .view .tit .info ul li { float: none; margin-right: 0; font-size: 13px; color: var(--c-text-sub); }
#content .view .tit .info span { background: none !important; padding-left: 0 !important; color: var(--c-text-sub); }

/* ---------- 正文排版 ---------- */
#MyContent { line-height: 1.9; font-size: 16px; color: #33415c; }
#MyContent p { padding-bottom: 14px; margin: 0; }
#MyContent h2, #MyContent h3, #MyContent h4 {
	color: var(--c-text);
	font-weight: 700;
	line-height: 1.4;
	margin: 30px 0 14px;
}
#MyContent h2 { font-size: 21px; padding-left: 12px; border-left: 4px solid var(--c-accent); }
#MyContent h3 { font-size: 18px; }
#MyContent h4 { font-size: 16px; }
#MyContent a { color: var(--c-primary); text-decoration: none; }
#MyContent a:hover { text-decoration: underline; }
#MyContent img {
	max-width: 100% !important;
	height: auto;
	border-radius: 10px;
	box-shadow: var(--shadow-sm);
	margin: 8px auto;
	display: block;
}
#MyContent ul, #MyContent ol { padding-left: 24px; margin: 0 0 14px; }
#MyContent li { line-height: 1.9; }
#MyContent blockquote {
	margin: 16px 0;
	padding: 14px 18px;
	background: var(--c-primary-soft);
	border-left: 4px solid var(--c-primary);
	border-radius: 0 10px 10px 0;
	color: var(--c-text-sub);
}
#MyContent table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0;
	font-size: 14.5px;
}
#MyContent table th, #MyContent table td {
	border: 1px solid var(--c-border);
	padding: 10px 14px;
	text-align: left;
}
#MyContent table th { background: var(--c-bg); font-weight: 600; }
#MyContent code {
	background: #eef2f9;
	color: #d63384;
	padding: 2px 7px;
	border-radius: 6px;
	font-size: 14px;
}
#MyContent pre {
	background: #0d1b3e;
	color: #d6e4ff;
	padding: 16px 18px;
	border-radius: 12px;
	overflow-x: auto;
	font-size: 13.5px;
	line-height: 1.7;
}
#MyContent pre code { background: none; color: inherit; padding: 0; }
#MyContent hr { border: none; border-top: 1px solid var(--c-border); margin: 24px 0; }

/* ---------- 文章内搜索框 ---------- */
.ITOne_search { margin: 30px 0 0; }
.ITOne_search .searchform {
	display: flex;
	gap: 10px;
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: 999px;
	padding: 6px 6px 6px 20px;
}
.ITOne_search .searchinput {
	flex: 1;
	border: none;
	background: transparent;
	font-size: 14px;
	outline: none;
	color: var(--c-text);
	height: 38px;
}
.ITOne_search .searchsubmit {
	border: none;
	background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-light) 100%);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	padding: 0 26px;
	height: 38px;
	border-radius: 999px;
	cursor: pointer;
	transition: filter .25s ease, transform .25s ease;
}
.ITOne_search .searchsubmit:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ---------- 上一篇 / 下一篇 ---------- */
#content .view #article_pn {
	border: none;
	background: var(--c-bg);
	border-radius: 12px;
	margin-top: 30px;
	padding: 6px 8px;
}
#content .view #article_pn ul { display: flex; gap: 8px; flex-wrap: wrap; }
#content .view #article_pn li {
	flex: 1 1 46%;
	font-size: 14px;
	color: var(--c-text-sub);
	padding: 12px 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: none;
}
#content .view #article_pn a {
	color: var(--c-text);
	text-decoration: none;
	font-weight: 500;
}
#content .view #article_pn a:hover { color: var(--c-primary); }

/* ---------- 相关文章 ---------- */
.related-title, .comment-title {
	font-size: 19px;
	font-weight: 700;
	color: var(--c-text);
	margin: 36px 0 16px;
	padding-left: 12px;
	border-left: 4px solid var(--c-accent);
	line-height: 1.4;
}
.entry-related {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin: 0;
	padding: 0;
}
.entry-related li {
	list-style: none;
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: 10px;
	padding: 11px 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: all .25s ease;
}
.entry-related li:hover { background: var(--c-primary-soft); border-color: #bcd3f5; }
.entry-related li i { display: none; }
.entry-related li a {
	font-size: 14px;
	color: var(--c-text-sub);
	text-decoration: none;
}
.entry-related li:hover a { color: var(--c-primary); }

/* ---------- 评论区 ---------- */
.ITOne-comments .bgb.pd20 {
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: 12px;
	padding: 18px;
	margin-bottom: 14px;
}
#divCommentPost { margin-top: 8px; }
.ITOne-comment-box input.text, .ITOne-comment-box textarea {
	border: 1px solid var(--c-border);
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 14px;
	outline: none;
	transition: border-color .25s ease, box-shadow .25s ease;
	background: #fff;
	box-sizing: border-box;
}
.ITOne-comment-box input.text:focus, .ITOne-comment-box textarea:focus {
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px rgba(29, 111, 224, .12);
}
#divCommentPost .button, .ITOne-comment-box .button {
	background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-light) 100%);
	border: none;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 30px;
	border-radius: 999px;
	cursor: pointer;
	transition: filter .25s ease, transform .25s ease;
}
#divCommentPost .button:hover, .ITOne-comment-box .button:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ---------- 内页响应式 ---------- */
@media screen and (max-width: 992px) {
	#list, #content { flex-direction: column; padding: 28px 14px 40px; gap: 24px; }
	#list .content_left, #content .content_left { width: 100%; flex: none; order: 2; }
	#list .left.fr, #content .view.fr { width: 100%; order: 1; }
	#content .view { padding: 26px 20px; }
	#content .view .tit h1 { font-size: 21px; }
	#MyContent { font-size: 15px; }
	#class { padding: 30px 0; }
	#class .left strong { font-size: 22px; }
	#class .qq { display: none; }
	.entry-related { grid-template-columns: 1fr; }
	.news_list .pic { width: 108px; height: 72px; margin-right: 14px; }
	.news_list { padding: 16px; }
	.news_list p a { font-size: 15px; }
}
@media screen and (max-width: 480px) {
	#MyContent h2 { font-size: 18px; }
	#content .view { padding: 20px 16px; border-radius: 12px; }
	#content .view #article_pn ul { flex-direction: column; gap: 0; }
	.news_list p.m { -webkit-line-clamp: 2; }
}