body {
    container: body / inline-size;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    font-size: 18px;
    font-family: 'Source Han Sans CN';
    line-height: 1.444;
    letter-spacing: 0px;
    background-color: var(--n1);
    padding: 358px 24px 0 24px;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    --minContent: 1424;
    --hSizing: FILL;
    --vSizing: FILL;
    --pConstraintHorizontal: STRETCH;
    --pConstraintVertical: STRETCH;
}



/* header */

.header {
	container: header / inline-size;
	position: fixed; z-index: 14; top: 0; left: 0; right: 0; 
	display: flex;
	align-items: center;
	gap: 48px;
	background-color: rgba(0, 0, 0, 0.9);
	padding: 16px 24px;
	--minContent: 1019;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.header-row1 {
	container: header-row1 / inline-size;
	display: flex;
	align-items: center;
	gap: 28px;
	flex-grow: 1;
	--minContent: 747;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: CENTER;
}

.header-logo {
	width: 160px; height: 22px;
	flex-shrink: 0;
	--minContent: 160;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}



/* form */

.form {
	width: 100%; height: 37px;
	max-width: 351px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	background-color: var(--n3-10);
	padding: 4px 4px 4px 16px;
	border: 1px solid var(--n3-10);
	border-radius: 50px;
	--minContent: 351;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.form-text {
	flex-grow: 1;
	text-align: left;
	--minContent: 262;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: CENTER;
}

.form-ico {
	width: 56px;
	flex-shrink: 0;
	align-self: stretch;
	border-radius: 8px;
	--minContent: 56;
	--hSizing: FIXED;
	--vSizing: FILL;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: STRETCH;
}
/* end form*/


.header-row2 {
	margin-left: 1px;
	width: 180px;
	display: flex;
	align-items: center;
	gap: 36px;
	flex-shrink: 0;
	padding: 12px 8px;
	--minContent: 181;
	--hSizing: FIXED;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.header-text-nat {
	min-width: 62px;
	flex-grow: 1;
	color: var(--t2);
	text-align: center;
	--minContent: 62;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.header-text-tab {
	min-width: 62px;
	text-align: center;
	--minContent: 64;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.header-row-right {
	display: flex;
	align-items: center;
	gap: 24px;
	--minContent: 176;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.header-row3 {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 4px;
	background: url(../assets/header/header-row.png) center / contain no-repeat;
	padding: 4px 14px;
	--minContent: 128;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.header-graphic {
	margin-top: 1px;
	width: 16px; height: 22px;
	flex-shrink: 0;
	--minContent: 16;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}

.header-text-symbol {
	text-align: center;
	--minContent: 80;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}
/* end header*/


.logo-pc {
	width: 24px; height: 24px;
	flex-shrink: 0;
	--minContent: 24;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.card-text {
	color: var(--t1);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.571;
	text-align: left;
	--minContent: 74;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}

.nat-text-symbol {
	align-self: stretch;
	--minContent: 290;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.col1 {
	position: absolute; top: 0; left: 0; right: 1px; 
	display: flex;
	flex-direction: column;
	padding-bottom: 2262px;
	--minContent: 1247;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.background-pattern {
    /* 背景随页面滚动 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    flex-shrink: 0;
    pointer-events: none;
    z-index: 0;
    --minContent: 1247;
    --hSizing: FILL;
    --vSizing: FIXED;
    --pConstraintHorizontal: STRETCH;
    --pConstraintVertical: MIN;
}

.footer {
    z-index: 1;
    width: 100vw; /* 背景全屏出血 */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: 194px;
    background-color: #000;
    padding: 20px; /* 与官网一致的内边距 */
    margin-top: auto; /* 使页脚贴住页面底部 */
    --minContent: 1248;
    --hSizing: FILL;
    --vSizing: FIXED;
    --pConstraintHorizontal: STRETCH;
    --pConstraintVertical: MAX;
}

.img1 {
    /* 装饰背景，随页面滚动 */
    position: absolute; z-index: 0; top: 80px; left: 0; right: 0; 
    width: 100%;
    pointer-events: none;
    --minContent: 1248;
    --hSizing: FILL;
    --vSizing: FIXED;
    --pConstraintHorizontal: STRETCH;
    --pConstraintVertical: MIN;
}

/* 顶部背景媒体固定高度 950px，无论图片还是视频 */
#hero-media { height: 950px; }
#hero-media .hero-video,
#hero-media .hero-image {
    width: 100%;
    height: 100%;
    max-width: 1690px;
    object-fit: contain;
    display: block;
    position: relative;
    margin: 0 auto;
    z-index: 1;
}
/* 顶部背景遮罩，覆盖在媒体之上且不拦截点击 */
#hero-media::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 1690px;
    transform: translateX(-50%);
    background-image: url('../../assets/card/img_detail_mask.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    pointer-events: none;
    z-index: 2;
}

.col2 {
    container: col2 / inline-size;
    position: relative; z-index: 3;
    width: 100%;
    max-width: 1376px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    flex-grow: 1;
    margin-left: auto;
    margin-right: auto;
    --minContent: 1376;
    --hSizing: FIXED;
    --vSizing: FILL;
    --pConstraintHorizontal: CENTER;
    --pConstraintVertical: STRETCH;
}

/* 背景容器作为固定覆盖层，不参与文档流高度计算 */
.col1 {
    /* 背景容器恢复为绝对定位，随内容滚动 */
    position: absolute; top: 0; left: 0; right: 0;
    z-index: 0;
    pointer-events: none;
    padding: 0;
}



/* pageheader */

.pageheader {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding-top: 17px;
    --minContent: 1376;
    --hSizing: FILL;
    --vSizing: HUG;
    --pConstraintHorizontal: STRETCH;
    --pConstraintVertical: MIN;
}



/* preview-image-a */

.preview-image-a {
	container: preview-image-a / inline-size;
	height: 80px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	--minContent: 1311;
	--hSizing: FILL;
	--vSizing: FIXED;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}



/* circle */

.circle {
    transform-origin: 50% 50%;
    backdrop-filter: blur(5px);
    width: 48px; height: 48px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--n3-10);
    padding: 12px;
    border: 1px solid var(--n4-5);
    border-radius: 50%;
    cursor: pointer;
    touch-action: manipulation;
    --minContent: 48;
    --hSizing: FIXED;
    --vSizing: FIXED;
    --pConstraintHorizontal: MIN;
    --pConstraintVertical: CENTER;
}

.circle-ico {
    margin: 0 auto;
    width: 20px;
    aspect-ratio: 1 / 1;
    pointer-events: none;
    --minContent: 20;
    --hSizing: FIXED;
    --vSizing: FIXED;
    --pConstraintHorizontal: CENTER;
    --pConstraintVertical: MIN;
}
/* end circle*/


.preview-image-plus {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-grow: 1;
	align-self: stretch;
	padding: 0 24px;
	--minContent: 1235;
	--hSizing: FILL;
	--vSizing: FILL;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: STRETCH;
}



/* preview-image-b */

.preview-image-b {
	background: url(../assets/preview-image/prev.png) center / cover no-repeat;
	aspect-ratio: 53 / 30;
	padding: 20px 51px;
	border-radius: 8px;
	--minContent: 141;
	--hSizing: HUG;
	--vSizing: FILL;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: STRETCH;
}

.preview-image-circle {
	position: relative;
	margin: 0 auto;
	width: 40px; height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	border: 1px solid var(--n3-10);
	border-radius: 50%;
	--minContent: 40;
	--hSizing: FIXED;
	--vSizing: FILL;
	--pConstraintHorizontal: CENTER;
	--pConstraintVertical: STRETCH;
}

.preview-image-graphic {
	position: absolute; top: 32%; left: 50%; 
	translate: -50% 0;
	transform-origin: 50% 50%;
	width: 15px; height: 35%;
	aspect-ratio: 9 / 8;
	--minContent: 15;
	--hSizing: FIXED;
	--vSizing: FILL;
	--pConstraintHorizontal: CENTER;
	--pConstraintVertical: SCALE;
}
/* end preview-image-b*/


.preview-image-preview-image {
    width: 141px;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    --minContent: 141;
    --hSizing: FIXED;
    --vSizing: FILL;
    --pConstraintHorizontal: MIN;
    --pConstraintVertical: STRETCH;
}
.preview-image-plus {
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none;    /* Firefox */
}
.preview-image-plus::-webkit-scrollbar { display: none; }
/* 统一视频与图片的缩略尺寸与裁剪 */
.preview-image-plus video.preview-image-preview-image {
    width: 141px;
    aspect-ratio: 53 / 30;
    object-fit: contain;
    background-color: #000;
    border-radius: 8px;
    display: block;
}
/* end preview-image-a*/


.pageheader-col {
    margin: 0; /* 靠容器左侧 */
    align-self: flex-start; /* 在父级flex容器中靠左停靠 */
    height: 423px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    flex-shrink: 0;
    --minContent: 1376;
    --hSizing: FILL;
    --vSizing: FIXED;
    --pConstraintHorizontal: STRETCH;
    --pConstraintVertical: MIN;
}

.pageheader-col-top {
	display: flex;
	flex-direction: column;
	gap: 8px;
	--minContent: 346;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.pageheader-subtitle {
	text-align: left;
	--minContent: 346;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.pageheader-text {
	text-align: left;
	--minContent: 346;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.card1 {
	container: card1 / inline-size;
	backdrop-filter: blur(5px);
	display: flex;
	flex-direction: column;
	gap: 16px;
	background-color: var(--n4-5);
	padding: 19px;
	border: 1px solid var(--n3-10);
	border-radius: 12px;
	overflow: hidden;
	--minContent: 346;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.card-row-top1 {
	display: flex;
	align-items: center;
	gap: 7px;
	align-self: start;
	--minContent: 192;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}

.card-btn-tag {
	min-width: 56px;
	display: flex;
	justify-content: center;
	color: var(--t2);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.667;
	letter-spacing: 0px;
	text-align: center;
	background-color: var(--n4-5);
	padding: 4px 8px 5px 8px;
	border: 1px solid var(--n4-5);
	border-radius: 6px;
	--minContent: 65;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.card-col {
	container: card-col / inline-size;
	display: flex;
	flex-direction: column;
	gap: 8px;
	--minContent: 306;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.card-row-top2 {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding-right: 164px;
	--minContent: 306;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.card-text-symbol1 {
	flex-grow: 1;
	text-align: left;
	--minContent: 56;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.card-row-bottom1 {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	--minContent: 140;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.card-row-bottom2 {
	display: flex;
	align-items: center;
	gap: 24px;
	--minContent: 305;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}



/* column-a */

.column-a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex-grow: 1;
	--minContent: 129;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: CENTER;
}

.column-text1 {
	color: var(--t3);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.571;
	text-align: left;
	--minContent: 129;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.column-subtitle {
	color: var(--t1);
	font-size: 30px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.267;
	text-align: left;
	--minContent: 129;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}
/* end column-a*/


.card-line {
	width: 0; height: 56px;
	flex-shrink: 0;
	border-left: 1px solid var(--n4-5);
	--minContent: 0;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.pageheader-btn-b {
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
	margin-top: 36px;
	justify-content: center;
	text-align: center;
	background-image: linear-gradient(90deg, #ff5c00 0%, #ff9700 100%);
	--minContent: 346;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}
/* end pageheader*/




/* nat */

.nat {
    container: nat / inline-size;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--t1);
    font-weight: 400;
    text-align: right;
    padding: 20px;
    --minContent: 1376;
    --hSizing: FILL;
    --vSizing: HUG;
    --pConstraintHorizontal: STRETCH;
    --pConstraintVertical: MIN;
}

/* 限制页脚内容宽度，与 guangwangayouxishangc.html 一致 */
.footer .nat {
    max-width: 1376px;
    margin: 0 auto;
    gap: 0px; /* 页脚整体内容容器的纵向间距调整为 0px */
    background-color: transparent; /* 背景由 .footer 提供，避免中间盒子过宽 */
}

/* 页脚底部行间距与换行策略（对齐官网样式） */
.footer .nat-row-bottom2 {
    gap: 24px;
    flex-wrap: nowrap;
}

.nat-row {
	container: nat-row / inline-size;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 19px;
	border-bottom: 1px solid var(--n3-10);
	--minContent: 868;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.nat-logo {
	width: 240px;
	flex-shrink: 0;
	aspect-ratio: 93356392 / 13075013;
	--minContent: 240;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.nat-row-right {
	display: flex;
	align-items: flex-start;
	gap: 48px;
	--minContent: 628;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.nat-col-left {
	width: 100%;
	max-width: 290px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16px;
	flex-shrink: 0;
	--minContent: 290;
	--hSizing: FIXED;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}

.nat-row-bottom1 {
	display: flex;
	align-items: center;
	gap: 8px;
	--minContent: 104;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MAX;
	--pConstraintVertical: MIN;
}

.nat-text-symbol2 {
	text-align: center;
	--minContent: 74;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.nat-col-right {
	width: 100%;
	max-width: 290px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16px;
	flex-shrink: 0;
	--minContent: 290;
	--hSizing: FIXED;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}

.nat-col {
	height: 52px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 8px;
	flex-shrink: 0;
	--minContent: 152;
	--hSizing: HUG;
	--vSizing: FIXED;
	--pConstraintHorizontal: MAX;
	--pConstraintVertical: MIN;
}

.nat-link-symbol {
	color: var(--t2);
	text-align: center;
	--minContent: 152;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MAX;
	--pConstraintVertical: MIN;
}

.nat-text-symbol4 {
	--minContent: 152;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MAX;
	--pConstraintVertical: MIN;
}

.nat-row-bottom2 {
	display: flex;
	align-items: center;
	gap: 616px;
	--minContent: 1336;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.nat-text-copyright1 {
	width: 100%;
	flex-grow: 1;
	text-align: left;
	--minContent: 360;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: CENTER;
}

.nat-text-copyright2 {
	width: 100%;
	flex-grow: 1;
	--minContent: 360;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: CENTER;
}
/* end nat*/


.pageheader1 .card-text-symbol2 {
	color: var(--t3);
}

.row1 {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	flex-grow: 1;
	color: #fff;
	font-weight: 700;
	text-align: left;
	--minContent: 1376;
	--hSizing: FILL;
	--vSizing: FILL;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: STRETCH;
}

.col3 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 顶部对齐 */
    gap: 12px;
    flex-grow: 1;
    align-self: stretch;
    padding-top: 0; /* 移除额外上边距 */
    --minContent: 1002;
    --hSizing: FILL;
    --vSizing: FILL;
    --pConstraintHorizontal: STRETCH;
    --pConstraintVertical: STRETCH;
}

.text-this-product {
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	--minContent: 1002;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.text-top {
	margin-top: 6px;
	--minContent: 1002;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.text {
	margin-top: 12px;
}

.img2 {
	flex-shrink: 0;
	border-radius: 12px;
	--minContent: 651;
	--hSizing: FILL;
	--vSizing: FIXED;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.col-right2 {
	width: 100%;
	max-width: 350px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex-shrink: 0;
	--minContent: 350;
	--hSizing: FIXED;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}

.card-top {
	gap: 4px;
	--minContent: 350;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.card-top-text-symbol {
	color: var(--t1);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.571;
	--minContent: 310;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.card-top-text {
	color: var(--t3);
}

.card3 {
	gap: 16px;
	--minContent: 350;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}



/* column-b */

.column-b {
	display: flex;
	flex-direction: column;
	gap: 4px;
	--minContent: 310;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.column-text-a {
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.571;
	--minContent: 310;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}
/* end column-b*/


.card-text-top {
	--minContent: 310;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.col4 .column-text2 {
	color: var(--t3);
}

.col4 .column-text-windows {
	color: var(--t1);
}

.col5 .column-text2 {
	color: var(--t3);
}

.col5 .column-text-windows {
	color: var(--t1);
}

.col6 .column-text2 {
	color: var(--t3);
}

.col6 .column-text-windows {
	color: var(--t1);
}

.col7 .column-text2 {
	color: var(--t3);
}

.col7 .column-text-windows {
	color: var(--t1);
}

.col8 .column-text2 {
	color: var(--t3);
}

.col8 .column-text-windows {
	color: var(--t1);
}

.col9 .column-text2 {
	color: var(--t3);
}

.col9 .column-text-windows {
	color: var(--t1);
}

.card-bottom {
	align-items: flex-start;
	gap: 16px;
	--minContent: 350;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}



/* row */

.row {
	display: flex;
	align-items: center;
	gap: 12px;
	--minContent: 180;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}

.row-text {
	color: var(--t1);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.571;
	--minContent: 144;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}
/* end row*/


.card-bottom-text-top {
	align-self: stretch;
	--minContent: 310;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.row4 .row-ico-yoyo {
	height: unset;
	aspect-ratio: 1 / 1;
}

.nat1 .nat-logo-pc {
	width: 22px; height: unset;
	aspect-ratio: 1 / 1;
}



/** breakpoints (margin / paddings) **/

@media screen and (max-width: 1280px) {
	body {
		padding-inline: var(--margin-sm);
	}
	.header {
		padding-inline: var(--margin-sm);
	}
	.preview-image-plus {
		padding-inline: 0;
	}
	.pageheader-col {
		margin-inline: 0;
	}
	.card-row-top2 {
		padding-inline: 0;
	}
}



/* container queries (flex rows) */

@container body (width < 1017px) {
	.header {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}
	.header > .header-row1 {
		width: 100%;
		justify-content: center;
	}
}

@container header (width < 745px) {
	.header-row1 {
		flex-direction: column;
		align-items: center;
		gap: 13px;
	}
	.header-row1 > * {
		margin-left: unset !important; margin-right: unset !important; margin-top: unset !important;
	}
}

@container header-row1 (width < 350px) {
	.form {
		height: unset;
		flex-direction: column;
		align-items: center;
		gap: 13px;
	}
	.form > * {
		text-align: center;
	}
	.form > .form-text {
		width: 100%;
	}
}

@container preview-image-a (width < 1233px) {
	.preview-image-plus {
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}
	.preview-image-plus > * {
		margin-left: unset !important; margin-right: unset !important;
	}
}

@container card1 (width < 189px) {
	.card-row-top1 {
		flex-direction: column;
		align-items: center;
		gap: 13px;
	}
	.card-row-top1 > * {
		margin-left: unset !important; margin-right: unset !important; margin-top: unset !important;
	}
}

@container card-col (width < 305px) {
	.card-row-top2 {
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
	.card-row-top2 > * {
		text-align: center;
	}
	.card-row-top2 > .card-text-symbol1 {
		width: 100%;
	}
}

@container card-col (width < 139px) {
	.card-row-bottom1 {
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
	.card-row-bottom1 > * {
		text-align: center;
	}
}

@container nat (width < 867px) {
	.nat-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}
}

@container nat-row (width < 627px) {
	.nat-row-right {
		flex-direction: column;
		align-items: flex-end;
		gap: 16px;
	}
}

@container nat (width < 1335px) {
	.nat-row-bottom2 {
		flex-direction: column;
		align-items: center;
		gap: 13px;
	}
	.nat-row-bottom2 > * {
		text-align: center;
	}
	.nat-row-bottom2 > .nat-text-copyright1 {
		width: 100%;
	}
	.nat-row-bottom2 > .nat-text-copyright2 {
		width: 100%;
	}
}

@container col2 (width < 1375px) {
    .row1 {
        flex-direction: column;
        align-items: stretch;
        gap: 100px;
    }
    .row1 > .col-right2 {
        align-self: center;
    }
}

/* ---- Footer bottom row: force single-line layout aligned with官网 ---- */
.footer .nat-row-bottom2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    flex-wrap: nowrap;
}
.footer .nat-text-copyright1 {
    flex: 0 1 auto;
    min-width: 0;
    text-align: left;
    width: auto;
}
.footer .nat-text-copyright2 {
    flex: 0 1 auto;
    min-width: 0;
    text-align: right;
    width: auto;
}

/* ---- Footer right row overflow fix ---- */
.footer .nat-row-right {
    transform: none; /* 取消位移，避免超出页脚内容容器 */
    flex-wrap: nowrap; /* 强制单行，不换行 */
    gap: 24px; /* 收紧列间距以适配内容宽度 */
    justify-content: flex-end; /* 右对齐以匹配现有视觉 */
    min-width: 0; /* 允许容器在窄宽度下收缩 */
}
.footer .nat-row { /* 固定行布局，避免响应式换列导致位置移动 */
    flex-wrap: nowrap;
    flex-direction: row;
}
.footer .nat-col-left,
.footer .nat-col-right {
    min-width: 0; /* 使子元素可压缩而不产生溢出 */
    max-width: none;
}
/* 页脚内长文本采用单行省略，避免撑破布局 */
.footer .nat-link-symbol,
.footer .nat-text-symbol4 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Apply explicit sizing for the right column as requested ---- */
.footer .nat-col-right {
    width: 290px;
    height: 94px;
    gap: 16px;
    opacity: 1;
    transform: rotate(0deg);
    flex: 0 0 290px; /* 固定为290px宽，符合给定要求 */
    max-width: 290px;
}

/* 小屏时进一步收紧间距，仍保持单行 */
@media (max-width: 1335px) {
    .footer .nat-row-right { gap: 16px; }
}