/* ==========================================================================
   ns-compat.css · 旧页面兼容层
   旧版页面（帮助/市场/服务/方案等）依赖一批工具类与栅格类，
   原 global.css / index.css 已不再加载，这里补齐等价能力，
   并中和旧页面为"透明悬浮头部"设计的负边距。
   加载顺序：nansai-web.css 之后、页面自身 CSS 之前，页面样式可正常覆盖。

   ⚠️ 权重约定（2026-09-24 重排，改前请读完）：
   1) 第 1 节「容器默认宽度」用 :where(.ns-web) 前缀，权重压到 (0,1,0)。
      这样页面自己的 .auto{width:1280px} / .container{width:1220px}（同为 (0,1,0)，
      但写在后面）能正常生效 —— 之前写成 body.ns-web .auto (0,2,1)，
      会把 about/support/cps 各自设定的容器宽度统统锁死成 1200px。
   2) 第 7 节「响应式兜底」反过来需要压得住页面，用 body.ns-web 前缀 (0,2,1)，
      专门清掉旧页写死的 min-width/width。不要用 !important，
      否则页面自己的 @media(max-width:768px) 重置也会被一并打穿。
   ========================================================================== */

/* ---- 1. 容器（默认值，页面可自行覆盖） ---- */

:where(.ns-web) .auto {
	width: 1200px;
	max-width: 100%;
	margin: 0 auto;
}

:where(.ns-web) .container {
	width: 1200px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 20px;
}

:where(.ns-web) .w1200 {
	width: 1200px;
	max-width: 100%;
	margin: 0 auto;
}

/* 原 index.css 中的供应商容器，活动/市场等页面依赖 */
:where(.ns-web) .por-container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

:where(.ns-web) .por-btn {
	display: inline-block;
	background: transparent;
	border: 1px solid transparent;
	outline: none;
	font-weight: 400;
	cursor: pointer;
}

/* ---- 2. 栅格 ---- */

body.ns-web .row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
}

body.ns-web .row > [class*="col-"] {
	position: relative;
	width: 100%;
	padding: 0 15px;
}

body.ns-web .col-12,
body.ns-web .col-sm-12,
body.ns-web .col-md-12,
body.ns-web .col-lg-12 {
	flex: 0 0 100%;
	max-width: 100%;
}

@media (min-width: 576px) {
	body.ns-web .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
	body.ns-web .col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
	body.ns-web .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
}

@media (min-width: 768px) {
	body.ns-web .col-md-6 { flex: 0 0 50%; max-width: 50%; }
	body.ns-web .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
	body.ns-web .col-md-3 { flex: 0 0 25%; max-width: 25%; }
	body.ns-web .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
}

@media (min-width: 992px) {
	body.ns-web .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
	body.ns-web .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
	body.ns-web .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
	body.ns-web .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
}

/* ---- 3. 常用工具类 ---- */

body.ns-web .cf::after,
body.ns-web .clearfix::after {
	content: "";
	display: table;
	clear: both;
}

body.ns-web .pull-left { float: left; }

body.ns-web .pull-right { float: right; }

body.ns-web .text-center { text-align: center; }

body.ns-web .text-left { text-align: left; }

body.ns-web .text-right { text-align: right; }

body.ns-web .space2x { padding: 40px 0; }

body.ns-web .text-muted { color: #64748b; }

body.ns-web .text-stress { color: var(--ns-primary, #2563eb); font-weight: 600; }

/* ---- 4. 旧页面顶部负边距中和 ----
   旧头部为透明悬浮设计，页面常写 margin-top:-100px 顶到导航后面；
   新头部是固定不透明导航，这些负边距会把内容顶进导航里。
   只针对「带 class 的区块」——旧页面的留白区块都有自己的类名；
   完全无 class 的包裹层（如 <div id="content">）交给页面自己的样式表决定，
   避免把整页的区块间距全部清零。 */

.ns-main > *[class]:not([class^="ns-"]):not([class*=" ns-"]) {
	margin-top: 0 !important;
}

/* ---- 5. 媒体兜底 ---- */

.ns-main img {
	max-width: 100%;
	height: auto;
}

/* 旧页面里常见的表单元素，统一到主题观感 */
.ns-main input[type="text"],
.ns-main input[type="search"],
.ns-main input[type="email"],
.ns-main input[type="password"],
.ns-main select,
.ns-main textarea {
	font: inherit;
	color: var(--ns-ink, #0f172a);
}

/* ==========================================================================
   6. 响应式（容器宽度放开）
   ========================================================================== */

@media (max-width: 1240px) {
	:where(.ns-web) .auto,
	:where(.ns-web) .container,
	:where(.ns-web) .w1200 {
		width: 100%;
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ==========================================================================
   7. 响应式兜底 —— 中和旧页面写死的宽度
   背景：大量旧页 CSS 写死 min-width:1200~1380px，而断点只做到 768px，
   再叠加 body{overflow-x:hidden}，结果是 769–1380px 区间
   右侧内容被裁掉且无法横向滚动。这里统一放开。
   清单来源：python _preview/scan_css.py 的 wide / fixedWidth 输出。
   ========================================================================== */

@media (max-width: 1400px) {
	/* body 级别：newuser 1366 / solution 1280 / solution-mod 1200 */
	body.ns-web { min-width: 0; }

	body.ns-web .auto,
	body.ns-web .autoWidth,                       /* ecs.css 1380 */
	body.ns-web .width,                           /* server.css 1280 */
	body.ns-web .jf_img,
	body.ns-web .jf_img ul,                       /* server.css 1280 */
	body.ns-web .container,                       /* support 1220 / cps 1280 / management 1270 */
	body.ns-web .cy-container,                    /* bt.css 1220 */
	body.ns-web .cy-install,                      /* bt.css 1220 */
	body.ns-web .wide1190,                        /* bt.css 1200 */
	body.ns-web .wrap,                            /* cloud.css 1200 */
	body.ns-web .package-box,                     /* cloud.css 1280 */
	body.ns-web .idc-trait,                       /* cloud.css 1280 */
	body.ns-web .about-head,                      /* about.css 以下均为 1220 */
	body.ns-web .about-part1,
	body.ns-web .about-part2,
	body.ns-web .about-part3,
	body.ns-web .about-part4,
	body.ns-web .about-part5,
	body.ns-web .about-cloumn,
	body.ns-web .contact-part1,
	body.ns-web .contact-part2,
	body.ns-web .contact-part3,
	body.ns-web .job-part1,
	body.ns-web .job-part2,
	body.ns-web .job-part3,
	body.ns-web .page-course,
	body.ns-web .page-environment,
	body.ns-web .page-honor,
	body.ns-web .honor-list,
	body.ns-web .security-cloumn,                 /* support.css 以下均为 1220 */
	body.ns-web .security-cloumn ul,
	body.ns-web .security-beian,
	body.ns-web .security-compensation,
	body.ns-web .security-refund,
	body.ns-web .security-support,
	body.ns-web .security-vip,
	body.ns-web .zdy-banner,                      /* cps.css 以下均为 1280 */
	body.ns-web .zdy-cloumn,
	body.ns-web .zdy-cloumn ul,
	body.ns-web .zdy-agent,
	body.ns-web .zdy-spread,
	body.ns-web .zdy-way,
	body.ns-web .zdy-advantage,
	body.ns-web .zdy-rules,
	body.ns-web .act-content,                     /* newuser/index.css 1200 */
	body.ns-web .act-zero .act-content-main,
	body.ns-web .act-brand-c,
	body.ns-web .section,                         /* solution-mod.css 1200 */
	body.ns-web .c-nav,
	body.ns-web .c-nav-inner,
	body.ns-web .qc-footer,
	body.ns-web .qc-navigation,
	body.ns-web .tc-footer,
	body.ns-web .newuser-banner .content,         /* newuser/xk.css 1200（.content 类被多个区块复用） */
	body.ns-web .new-user .content,
	body.ns-web .newuser-product-nine .content,   /* newuser/xk.css 1200（同一 .content 类用在多个区块） */
	body.ns-web .btlayout,                        /* bt.css 1040 */
	body.ns-web .rno-shading-2-left,              /* solution.css 1274 */
	body.ns-web .rno-contact-panel-bg,            /* solution.css 5000（装饰底） */
	body.ns-web .rno-client-case-slide {          /* solution.css 1560 */
		min-width: 0;
		max-width: 100%;
	}
}

/* ≤1240px：连写死的 width 一起放开，让内容跟着视口收缩 */
@media (max-width: 1240px) {
	body.ns-web .auto,
	body.ns-web .autoWidth,
	body.ns-web .width,
	body.ns-web .jf_img,
	body.ns-web .jf_img ul,
	body.ns-web .container,
	body.ns-web .cy-container,
	body.ns-web .cy-install,
	body.ns-web .wide1190,
	body.ns-web .wrap,
	body.ns-web .package-box,
	body.ns-web .about-head,
	body.ns-web .about-cloumn,
	body.ns-web .honor-list,
	body.ns-web .security-cloumn ul,
	body.ns-web .zdy-cloumn ul,
	body.ns-web .act-content,
	body.ns-web .act-zero .act-content-main,
	body.ns-web .act-brand-c,
	body.ns-web .newuser-banner .content,
	body.ns-web .newuser-product-nine .content,
	body.ns-web .btlayout,
	body.ns-web .rno-shading-2-left,
	body.ns-web .rno-contact-panel-bg,
	body.ns-web .rno-client-case-slide,
	body.ns-web .page-environment .bigImg img {
		width: auto;
		max-width: 100%;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* 图片本身按容器缩放 */
	body.ns-web .page-environment .bigImg img {
		padding: 0;
		height: auto;
	}
}

/* ≤768px：栅格负边距不再横向出界（body overflow-x:hidden 会把它裁掉且不可滚） */
@media (max-width: 768px) {
	body.ns-web .row {
		margin: 0;
	}
}