/**ZUI*/
:root{
	--primary-blue: #2563eb;
	--light-blue: #60a5fa;
	--primary-purple: #8b5cf6;
	--light-purple: #a78bfa;
	--gray-100: #f3f4f6;
	--gray-200: #e5e7eb;
	--gray-300: #d1d5db;
	--gray-500: #6b7280;
	--gray-700: #374151;
	--gray-900: #1f2937;
	--white: #ffffff;
	--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
	--shadow-md: 0 4px 12px rgba(37, 99, 235, 0.1);
	--shadow-lg: 0 8px 24px rgba(139, 92, 246, 0.12);
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--transition: all 0.24s ease;
}

.zui{
	--zui-column-gap: 20px;
	--zui-block-padding-top:150px;
	--zui-block-padding-bottom:150px;
	--zui-column-gap: 20px;
	--zui-item-padding: 32px;
	--zui-item-padding-end: 32px; /**非对称时使用75px*/
	--zui-item-h3-lineheight: 1.25;
	--zui-item-h3-fontweight: 600;
	--zui-item-h3-fontsize: 28px;
	
	--zui-item-h3-padding-start: 10px;
	--zui-item-h3-padding-end: 10px;
	
	--zui-item-p-lineheight: 1.7;	
	--zui-item-p-fontweight: 400;
	--zui-item-p-fontsize: 17px;
	--zui-item-p-margin-top: 0.8em;
	
	--zui-item-viewport-items: 87.5vw;
	
	--zui-item-radius: 28px;
	
	/**图标大小*/
	--zui-item-icon-width: 48px;
	--zui-item-icon-height: 48px;
	
	--zui-scroll-padding: calc(50vw - min(1680px, var(--zui-item-viewport-items)) / 2);
	
	--zui-item-width-all: calc((100vw - var(--zui-scroll-padding) * 2 - var(--zui-column-gap) * 0) / 1);
	--zui-item-width-half: calc((100vw - var(--zui-scroll-padding) * 2 - var(--zui-column-gap) * 1) / 2);
	--zui-item-width-col3: calc((100vw - var(--zui-scroll-padding) * 2 - var(--zui-column-gap) * 2) / 3);
	
	/**通栏平分网格*/
	--zui-item-width-col1: calc((100vw - var(--zui-scroll-padding) * 2 - var(--zui-column-gap) * 0) / 1);
	--zui-item-width-col2: calc((100vw - var(--zui-scroll-padding) * 2 - var(--zui-column-gap) * 1) / 2);
	--zui-item-width-col3: calc((100vw - var(--zui-scroll-padding) * 2 - var(--zui-column-gap) * 2) / 3);
	--zui-item-width-col4: calc((100vw - var(--zui-scroll-padding) * 2 - var(--zui-column-gap) * 3) / 4);
	--zui-item-width-col5: calc((100vw - var(--zui-scroll-padding) * 2 - var(--zui-column-gap) * 4) / 5);
	--zui-item-width-col6: calc((100vw - var(--zui-scroll-padding) * 2 - var(--zui-column-gap) * 5) / 6);
	--zui-item-width-col7: calc((100vw - var(--zui-scroll-padding) * 2 - var(--zui-column-gap) * 6) / 7);
	--zui-item-width-col8: calc((100vw - var(--zui-scroll-padding) * 2 - var(--zui-column-gap) * 7) / 8);
	--zui-item-width-col9: calc((100vw - var(--zui-scroll-padding) * 2 - var(--zui-column-gap) * 8) / 9);
	--zui-item-width-col10: calc((100vw - var(--zui-scroll-padding) * 2 - var(--zui-column-gap) * 9) / 10);
	
	
	/**相对于容器节点平分网格，适用于容器宽度已知，子元素平分宽度*/
	--zui-grid-padding: 0px;
	--zui-width-col1: calc((100% - var(--zui-grid-padding) * 2 - var(--zui-column-gap) * 0) / 1);
	--zui-width-col2: calc((100% - var(--zui-grid-padding) * 2 - var(--zui-column-gap) * 1) / 2);
	--zui-width-col3: calc((100% - var(--zui-grid-padding) * 2 - var(--zui-column-gap) * 2) / 3);
	--zui-width-col4: calc((100% - var(--zui-grid-padding) * 2 - var(--zui-column-gap) * 3) / 4);
	--zui-width-col5: calc((100% - var(--zui-grid-padding) * 2 - var(--zui-column-gap) * 4) / 5);
	--zui-width-col6: calc((100% - var(--zui-grid-padding) * 2 - var(--zui-column-gap) * 5) / 6);
	--zui-width-col7: calc((100% - var(--zui-grid-padding) * 2 - var(--zui-column-gap) * 6) / 7);
	--zui-width-col8: calc((100% - var(--zui-grid-padding) * 2 - var(--zui-column-gap) * 7) / 8);
	--zui-width-col9: calc((100% - var(--zui-grid-padding) * 2 - var(--zui-column-gap) * 8) / 9);
	--zui-width-col10: calc((100% - var(--zui-grid-padding) * 2 - var(--zui-column-gap) * 9) / 10);
	
	--zui-item-col2-textwidth: 350px;
	--zui-item-col2-textpadding: 120px;
	
	--zui-item-picture-padding: 64px;
	--zui-text-c-padding: 20px;
	
	/**Text-flow*/
	--zui-text-h3-lineheight: 1.25;
	--zui-text-h3-fontweight: 600;
	--zui-text-h3-fontsize: 28px;
	--zui-text-h3-color: rgba(0, 113, 227, 1);
	--zui-text-p-lineheight: 1.353;	
	--zui-text-p-fontweight: 400;
	--zui-text-p-fontsize: 17px;
	--zui-text-p-margin-top: 0.8em;
	--zui-text-p-color: #252525;
	--zui-text-a-color: rgba(0, 113, 227, 1);
	--zui-text-a-hover: #f00;
	
	--zui-button-background: rgba(0, 113, 227, 1);
	--zui-button-color: #fff;
	
	/**header标题颜色*/
	--zui-head-title-color: #000;
	--zui-head-desc-color: #888;
	--zui-item-title-color: #000;
	--zui-item-text-color: #666;
	--zui-content-color: #666;
	
	--zui-head-padding-bottom: 70px;
	
	/**头部标题字体*/
	--zui-head-h2-fontsize: 56px;
	--zui-head-h2-lineheight: 60px;
	--zui-head-h2-fontweight:600;

	--primary-blue: #2563eb;
	--light-blue: #60a5fa;
	--primary-purple: #8b5cf6;
	--light-purple: #a78bfa;
	--gray-100: #f3f4f6;
	--gray-200: #e5e7eb;
	--gray-300: #d1d5db;
	--gray-500: #6b7280;
	--gray-700: #475569;
	--gray-900: #1f2937;
	--white: #ffffff;
	--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
	--shadow-md: 0 4px 12px rgba(37, 99, 235, 0.1);
	--shadow-lg: 0 8px 24px rgba(139, 92, 246, 0.12);
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--transition: all 0.24s ease;
}
.zui div{box-sizing:border-box;}
.zui a{color:var(--zui-text-a-color);text-decoration: none}
.zui a:hover{color:var(--zui-text-a-hover)}

.zui-m-style .logo >a:hover{color:var(--main-logo-color, #fff)}

.zui-title-desc{}
/**width:87.5vw;max-width: 1650px;*/
.zui-head header{display: flex;align-items: flex-start; justify-content: space-between;padding-bottom: var(--zui-head-padding-bottom);gap:28px;margin:0 auto;}
.zui-no-head-padding .zui-head header{padding-bottom:0;}
.zui-no-head .zui-head{display:none}

.zui-head header h2,.zui-head header h2 a,.zui-head header h2 span{font-size: var(--zui-head-h2-fontsize, 56px); line-height: var(--zui-head-h2-lineheight, 60px);   font-weight: var(--zui-head-h2-fontweight, 600);color:var(--zui-head-title-color)}
.zui-head header h3,.zui-head header h3 a,.zui-head header h3 span{font-size: var(--zui-head-h2-fontsize, 56px); line-height: var(--zui-head-h2-lineheight, 60px);   font-weight: var(--zui-head-h2-fontweight, 600);color:var(--zui-head-title-color)}
.zui-head header h1,.zui-head header h1 a,.zui-head header h1 span{font-size: var(--zui-head-h2-fontsize, 56px); line-height: var(--zui-head-h2-lineheight, 60px);   font-weight: var(--zui-head-h2-fontweight, 600);color:var(--zui-head-title-color)}
.zui-head header div{line-height: var(--zui-head-h2-lineheight, 60px); }


.zui-head-desc{color:var(--zui-head-desc-color)}
.zui-content{color:var(--zui-content-color)}

.zui-scroll{width: 100%;overflow: scroll;scroll-snap-type:none;scrollbar-width:none;transition: 0.5s all ease;scroll-behavior: smooth;}
.zui-no-scroll{width: 100%;overflow: hidden;scroll-snap-type:none;scrollbar-width:none;transition: 0.5s all ease;scroll-behavior: smooth;}
/**width:87.5vw;max-width: 1650px;*/
.zui-op-buttons{min-height:60px;margin:0 auto;}
.zui-ops{text-align: right;overflow: hidden;margin-top:12px;padding-right:12px;}
.zui-ops .zui-op{display:inline-block;cursor:pointer;width:36px;height:36px;border-radius:50%;background:#aaa;text-align: center;overflow: hidden;line-height: 36px;outline: none;user-select: none;}
.zui-ops .zui-op.zui-op-disabled{color:#efefef;}
/**按钮*/
.zui-btn{background:var(--zui-button-background);color:var(--zui-button-color);border-radius: 960px;font-size: 17px;line-height: 1.17648;font-weight: 400;display:inline-block;vertical-align: middle;padding:10px 20px;cursor:pointer;transition: all 0.3s ease}
.zui-btns{background:var(--zui-button-background);color:var(--zui-button-color);border-radius: 960px;font-size: 12px;line-height: 1.17648;font-weight: 400;display:inline-block;vertical-align: middle;padding:6px 12px;cursor:pointer;transition: all 0.3s ease}
.zui-btnm{background:var(--zui-button-background);color:var(--zui-button-color);border-radius: 960px;font-size: 12px;line-height: 1.17648;font-weight: 400;display:inline-block;vertical-align: middle;padding:8px 15px;cursor:pointer;transition: all 0.3s ease}

.zui-btn.red{background:#fd5957;}
.zui-btn.blue{background:#0d378b;}
.zui-btn.green{background:#36c470;}
.zui-btn.yellow{background:#febc2a;}
.zui-btn.orange{background:#f27620;}
.zui-btn.lblue{background:#4b9efe;}


.zui-btns.red{background:#fd5957;}
.zui-btns.blue{background:#0d378b;}
.zui-btns.green{background:#36c470;}
.zui-btns.yellow{background:#febc2a;}
.zui-btns.orange{background:#f27620;}
.zui-btns.lblue{background:#4b9efe;}


.zui-btnm.red{background:#fd5957;}
.zui-btnm.blue{background:#0d378b;}
.zui-btnm.green{background:#36c470;}
.zui-btnm.yellow{background:#febc2a;}
.zui-btnm.orange{background:#f27620;}
.zui-btnm.lblue{background:#4b9efe;}

.zui-btn:hover{opacity: 0.8}
.zui-btns:hover{opacity: 0.8}
.zui-btnm:hover{opacity: 0.8}
/*块底部的通栏*/
.zui-full-block{width:87.5vw;max-width: 1650px;margin:0 auto;}
.zui-wrap{width:87.5vw;max-width:1650px;margin:0 auto}


/**item card*/
.zui-itemcard{	
	padding-top:var(--zui-block-padding-top);
	padding-bottom:var(--zui-block-padding-bottom);
	
	
}
.zui-item-card-container{
	display:block;
	width: 100%;
	grid-template-rows: 100%;/*repeat(1, auto);*/
    grid-template-columns: max-content;
    grid-auto-flow: column;
    grid-column-gap: var(--zui-column-gap);
    column-gap: var(--zui-column-gap);
    grid-row-gap: 0px;
    row-gap: 0px;
    /*width: -moz-fit-content;
    width: fit-content;
	*/
	
}

/**网格主容器（直接子级为项，默认显示一行）,其中padding可以通过zui-no-padding去掉*/
.zui-item-card-items{    
	display: grid;
    grid-template-rows: repeat(1, auto);
    grid-template-columns: max-content;
    grid-auto-flow: column;
    grid-column-gap: var(--zui-column-gap);
    column-gap: var(--zui-column-gap);
    grid-row-gap: 0px;
    row-gap: 0px;
    /*width: -moz-fit-content;
    width: fit-content;*/
	width: 100%;
    margin: 0;
    list-style: none;
	padding:0 var(--zui-scroll-padding);
	
}
.zui-no-scroll .zui-item-card-items{max-width:100%;width:100%;overflow: hidden}
.zui-no-padding .zui-item-card-items{padding:0;}

.zui-padding-top150{padding-top:150px;}

.zui .block-padding-top,.zui.block-padding-top{padding-top: var(--zui-block-padding-top, 150px)}
.zui .block-padding-bottom,.zui.block-padding-bottom{padding-top: var(--zui-block-padding-bottom, 150px)}


.zui-item-card-items>li,.zui-item-card-items >div,.zui-item-card-items>span{height:100%;}

.zui-item{position:relative;transition: all ease 0.3s;overflow: hidden;min-width: 0;}

.zui-item .zui-item-frame{border-radius:var(--zui-item-radius);background:#fff;height:100%;overflow: hidden;width:100%;/*max-width:100vw*/}

.zui-item .zui-item-frame .zui-item-viewport{height:100%;width:100%;overflow: hidden}
.zui-item .zui-item-frame .zui-item-viewport{height:100%;width:100%;overflow: hidden}

.zui-item:hover{transform:scale3d(1.01,1.01,1.01)}

.zui-item .zui-item-c{height: 100%;width:100%;max-width:100%;overflow: hidden}
.zui-item .zui-item-c .zui-item-content{padding:var(--zui-item-padding);padding-right:var(--zui-item-padding-end);word-break: break-all;max-width: 100%;}

/*width:var(--zui-item-icon-width, 48px);*/
.zui-item-icon img{max-width:100%;height:var(--zui-item-icon-height, 48px);object-fit: contain}

/**图片要在最底部时，需要把容器高设置成100%*/
.zui-item .zui-item-c .zui-item-picture{display:block;overflow: hidden;max-width:100%;width:100%;text-align: center;position: relative;bottom:0;line-height: 0;}
.zui-item-picture >div{padding:var(--zui-item-picture-padding);box-sizing: border-box;overflow: hidden}
.zui-item .zui-item-c .zui-item-picture img{max-width:100%;min-width: 100%;overflow: hidden;display:block;height:auto;}

.zui-item .zui-item-c >.zui-item-col1{display:flex;justify-content: space-between;flex-direction: column;height:100%;width: 100%;box-sizing: border-box;}

.zui-item .zui-item-c >.zui-item-col2{
	display:grid;
	grid-template-columns: calc(var(--zui-item-col2-textwidth) + var(--zui-item-col2-textpadding) * 2) 1fr;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.zui-item .zui-item-c >.zui-item-col2-pic{
	display:grid;
	grid-template-columns: 1fr calc(var(--zui-item-col2-textwidth) + var(--zui-item-col2-textpadding) * 2);
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}
.zui-item .zui-item-c >.zui-item-col2 .zui-item-content{padding:var(--zui-item-col2-textpadding);}
.zui-item .zui-item-c >.zui-item-col2-pic .zui-item-content{padding:var(--zui-item-col2-textpadding);}

.zui-item .zui-item-c >.zui-item-col2 .zui-item-content >.zui-item-text{width:var(--zui-item-col2-textwidth)}
.zui-item .zui-item-c >.zui-item-col2-pic .zui-item-content >.zui-item-text{width:var(--zui-item-col2-textwidth)}

.zui-item .zui-item-c >.zui-item-col-n{
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    justify-content: space-between;
    align-items: stretch;
    overflow: hidden;
}

.zui-item .zui-item-c .zui-item-text h3{line-height:var(--zui-item-h3-lineheight);font-weight:var(--zui-item-h3-fontweight);font-size:var(--zui-item-h3-fontsize);color:var(--zui-item-title-color);padding-top:var(--zui-item-h3-padding-start,0px);padding-bottom:var(--zui-item-h3-padding-end,0px)}
.zui-item .zui-item-c .zui-item-text p{line-height:var(--zui-item-p-lineheight);font-weight:var(--zui-item-p-fontweight);font-size:var(--zui-item-p-fontsize);margin-top:var(--zui-item-p-margin-top,0.8em);color:var(--zui-item-text-color)}

/*文本流*/
.zui-text-c{padding:var(--zui-text-c-padding)}
.zui-text-flow{line-height:var(--zui-text-h3-lineheight);}
.zui-text-flow h3{line-height:var(--zui-text-h3-lineheight);font-weight:var(--zui-text-h3-fontweight);font-size:var(--zui-text-h3-fontsize);color:var(--zui-text-h3-color)}
.zui-text-flow p{line-height:var(--zui-text-p-lineheight);font-weight:var(--zui-text-p-fontweight);font-size:var(--zui-text-p-fontsize);color:var(--zui-text-p-color)}
.zui-text-flow a{color:var(--zui-text-a-color);font-size:var(--zui-text-p-fontsize)}
.zui-text-flow.zui-noli >ul{list-style: none;padding:0;margin:0;}
.zui-text-flow.zui-noli >li>li{list-style: none;padding:0;margin:0;}

.zui-item .zui-item-b{position: absolute;right:20px;bottom:20px;}

/**固定一列*/
.zui-one-col .zui-item-card-items,.zui-numcol-1 .zui-item-card-items{
	grid-template-columns:1fr;grid-template-rows:1fr;grid-auto-flow:row;grid-row-gap: var(--zui-column-gap);
    row-gap: var(--zui-column-gap);
}

.zui-one-col .zui-item .zui-item-frame,.zui-numcol-1 .zui-item .zui-item-frame{width:var(--zui-item-width-all)}

/**固定两列*/
.zui-two-col .zui-item-card-items,.zui-numcol-2 .zui-item-card-items{
	grid-template-columns:1fr 1fr;grid-template-rows:1fr;grid-auto-flow:row;grid-row-gap: var(--zui-column-gap);
    row-gap: var(--zui-column-gap);
}

.zui-two-col .zui-item .zui-item-frame,.zui-numcol-2 .zui-item .zui-item-frame{width:var(--zui-item-width-half)}

/**固定三列*/
.zui-three-col .zui-item-card-items,.zui-numcol-3 .zui-item-card-items{
	grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr;grid-auto-flow:row;grid-row-gap: var(--zui-column-gap);
    row-gap: var(--zui-column-gap);
}

.zui-three-col .zui-item .zui-item-frame,.zui-numcol-3 .zui-item .zui-item-frame{width:var(--zui-item-width-col3)}

/**固定四列*/
.zui-four-col .zui-item-card-items,.zui-numcol-4 .zui-item-card-items{
	grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr;grid-auto-flow:row;grid-row-gap: var(--zui-column-gap);
    row-gap: var(--zui-column-gap);
}
.zui-four-col .zui-item .zui-item-frame,.zui-numcol-4 .zui-item .zui-item-frame{width:var(--zui-item-width-col4)}

/**固定五列*/
.zui-five-col .zui-item-card-items,.zui-numcol-5 .zui-item-card-items{
	grid-template-columns:repeat(auto-fill, minmax( max(320px, calc((100% - (var(--zui-column-gap) * 4)) / 5)), 1fr));/*minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);*/
	grid-template-rows:1fr;grid-auto-flow:row;grid-row-gap: var(--zui-column-gap);
    row-gap: var(--zui-column-gap);
}

.zui-five-col .zui-item .zui-item-frame,.zui-numcol-5 .zui-item .zui-item-frame{width:100%;overflow: hidden}

/**固定六列*/
.zui-six-col .zui-item-card-items,.zui-numcol-6 .zui-item-card-items{
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;grid-template-rows:1fr;grid-auto-flow:row;grid-row-gap: var(--zui-column-gap);
    row-gap: var(--zui-column-gap);
}

.zui-six-col .zui-item .zui-item-frame,.zui-numcol-6 .zui-item .zui-item-frame{width:var(--zui-item-width-col6)}

/**固定列N=任意，最小宽度320*/
.zui-col-w320 .zui-item-card-items,.zui-numcol-w320 .zui-item-card-items{
	grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));/*minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);*/
	grid-template-rows:1fr;grid-auto-flow:row;grid-row-gap: var(--zui-column-gap);
    row-gap: var(--zui-column-gap);
}

.zui-col-w320 .zui-item .zui-item-frame,.zui-numcol-w320 .zui-item .zui-item-frame{width:100%;overflow: hidden}

/**固定列N=任意，最小宽度480*/
.zui-col-w480 .zui-item-card-items,.zui-numcol-w480 .zui-item-card-items{
	grid-template-columns:repeat(auto-fill, minmax(480px, 1fr));/*minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);*/
	grid-template-rows:1fr;grid-auto-flow:row;grid-row-gap: var(--zui-column-gap);
    row-gap: var(--zui-column-gap);
}

.zui-col-w480 .zui-item .zui-item-frame,.zui-numcol-w480 .zui-item .zui-item-frame{width:100%;overflow: hidden}
/**固定列N=任意，最小宽度320*/
.zui-col-w240 .zui-item-card-items,.zui-numcol-w240 .zui-item-card-items{
	grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
	grid-template-rows:1fr;grid-auto-flow:row;grid-row-gap: var(--zui-column-gap);
    row-gap: var(--zui-column-gap);
}

.zui-col-w240 .zui-item .zui-item-frame,.zui-numcol-w240 .zui-item .zui-item-frame{width:100%;overflow: hidden}

/**固定列最多2列，最小宽度320*/
.zui-col-w2-320 .zui-item-card-items,.zui-numcol-w2-320 .zui-item-card-items{
	grid-template-columns:repeat(auto-fill, minmax( max(320px, calc((100% - var(--zui-column-gap)) / 2)), 1fr));
	grid-template-rows:1fr;grid-auto-flow:row;grid-row-gap: var(--zui-column-gap);
    row-gap: var(--zui-column-gap);
}

.zui-col-w2-320 .zui-item .zui-item-frame,.zui-numcol-w2-320 .zui-item .zui-item-frame{width:100%;overflow: hidden}
/**固定列最多2列，最小宽度480*/
.zui-col-w2-480 .zui-item-card-items,.zui-numcol-w2-480 .zui-item-card-items{
	grid-template-columns:repeat(auto-fill, minmax( max(480px, calc((100% - var(--zui-column-gap)) / 2)), 1fr));
	grid-template-rows:1fr;grid-auto-flow:row;grid-row-gap: var(--zui-column-gap);
    row-gap: var(--zui-column-gap);
}

.zui-col-w2-480 .zui-item .zui-item-frame,.zui-numcol-w2-480 .zui-item .zui-item-frame{width:100%;overflow: hidden}


/**固定列最多N列，最小宽度w，N由style中的--zui-COLN:定义，最小宽度由--zui-MINW定义*/
.zui-col-n-w .zui-item-card-items,.zui-numcol-n-w .zui-item-card-items{
	/*--zui-COLN: 2;
	--zui-MINW: 320px;*/
	grid-template-columns:repeat(auto-fill, minmax( max(var(--zui-MINW, 320px), calc((100% - var(--zui-column-gap) * (var(--zui-COLN, 2) - 1)) / var(--zui-COLN, 2))), 1fr));
	grid-template-rows:1fr;grid-auto-flow:row;grid-row-gap: var(--zui-column-gap);
    row-gap: var(--zui-column-gap);
}

.zui-col-n-w .zui-item .zui-item-frame,.zui-numcol-n-w .zui-item .zui-item-frame{width:100%;overflow: hidden}

/**通用平均分配N列，--zui-N指定最大列数，--zui-W: 指定最小宽度（像素）*/
/*--zui-N: 2;
	--zui-W: 320px;
	--zui-gap: 0px;
	--zui-gap-col: 0px;
	--zui-gap-row: 0px*/
.zui-n-col{
	
	--zui-computed-col-gap: var(--zui-gap-col, var(--zui-gap, 0px));
	--zui-computed-row-gap: var(--zui-gap-row, var(--zui-gap, 0px));
	
	
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax( max( min(var(--zui-W, 320px), 100%), calc((100% - var(--zui-computed-col-gap, 0px) * (var(--zui-N, 2) - 1)) / var(--zui-N, 2))), 1fr) );
	grid-template-rows:1fr;
	grid-auto-flow:row dense;
	
	grid-row-gap: var(--zui-computed-row-gap, 0px);
    row-gap: var(--zui-computed-row-gap, 0px);
	
	grid-column-gap: var(--zui-computed-col-gap, 0px);
	column-gap: var(--zui-computed-col-gap, 0px);
}
/**通用平均分配N行，--zui-N指定最大行数，--zui-H: 指定最高度（像素）*/
.zui-n-row{
	/*--zui-N: 2;
	--zui-H: 320px;
	--zui-gap: 0px;
	--zui-gap-col: 0px;
	--zui-gap-row: 0px*/
	--zui-computed-col-gap: var(--zui-gap-col, var(--zui-gap, 0px));
	--zui-computed-row-gap: var(--zui-gap-row, var(--zui-gap, 0px));
	display:grid;
	grid-template-rows:repeat(auto-fill, minmax( max(var(--zui-H, max-content), calc((100% - var(--zui-computed-row-gap, 0px) * (var(--zui-N, 2) - 1)) / var(--zui-N, 2))), 1fr));
	grid-template-columns:1fr;
	grid-auto-flow:column dense;
	
	grid-row-gap: var(--zui-computed-row-gap, 0px);
    row-gap: var(--zui-computed-row-gap, 0px);
	
	grid-column-gap: var(--zui-computed-col-gap, 0px);
	column-gap: var(--zui-computed-col-gap, 0px);
	
	transition: all ease 0.5;
}
/**一个块显示内容*/
.zui-block{
	padding: var(--zui-pt, var(--zui-p, 30px)) var(--zui-pr, var(--zui-p, 30px)) var(--zui-pb, var(--zui-p, 30px))  var(--zui-pl, var(--zui-p, 30px));
	margin:0;
	background: var(--zui-block-bg, #f4f9ff);
	border: var(--zui-block-bd, 1px solid #f4f9ff);
	border-radius: var(--zui-bdr, 20px);
	transition: all ease 0.5s;
}
.zui-block:hover{
	transform: translateY(-4px);
	border: var(--zui-block-hover-bd, 1px solid #fd9cc8);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--zui-block-hover-bdcolor, #fd9cc8) 40%, transparent);
}
.zui-block.zui-bg-white{background:#ffffff}
.zui-block.zui-bg-gray{background:#efefef}
.zui-block.zui-bg-dark{background:#333333}

.zui-block .zui-content{display:flex;flex-direction: column}
.zui-content >h2,.zui-content >h3{
	font-size:var(--zui-title-fs, 24px);
	line-height: var(--zui-title-lh, 1.3);padding:var(--zui-title-p, 24px 0px);
	margin:var(--zui-title-m, 0px);font-weight:500;
	display: flex;justify-items: center;align-items: center;
	gap:16px;
	color:var(--gray-700, #475569)
}
.zui-content >h2>svg,.zui-content >h3>svg,.zui-content >h2>img,.zui-content >h3>img{flex-shrink: 0;}
.zui-content> div{font-size:var(--zui-p-fs, 14px);line-height: var(--zui-p-lh, 1.4);padding:var(--zui-p-p, 0px);margin:var(--zui-p-m, 0px 0px 16px 0px);overflow: hidden}
.zui-content .zui-desc{color:var(--zui-desc-color, #475569)}

.zui-icon img{max-width:100%;height:var(--zui-item-icon-height, 48px);object-fit: contain}

/**是指文章项目的居中情况*/
.zui-head-center .zui-content >h2,.zui-head-center .zui-content >h3,.zui-head-center .zui-content >h4{text-align: center;justify-content: center;}
.zui-head-center .zui-content .zui-icon{text-align: center;}

.zui-head-left .zui-content >h2,.zui-head-left .zui-content >h3,.zui-head-left .zui-content >h4{text-align: left;justify-content: start;}
.zui-head-left .zui-content .zui-icon{text-align: left;}

.zui-block.zui-bg-dark ,.zui-block.zui-bg-dark *{color:var(--zui-dark-color, #ffffff);}

.zui-image img{max-width:100%;object-fit: contain}

.zui-page-title h1{font-size:32px;line-height: 1.4;padding:0px 0px;font-weight: bold;white-space: nowrap}
.zui-pt-0{padding-top:0;}
.zui-pb-0{padding-bottom:0;}

.zui-flow{display:flex;flex-direction: column;gap:var(--zui-flow-gap, 16px)}

.zui-tree{}
.zui-tree-node{position: relative;}
.zui-tree-label{line-height: 1.414;padding-top:var(--zui-tree-mt, 10px);display: flex;position: relative}
.zui-tree-label a,.zui-tree-label span,.zui-tree-label div,.zui-tree-label p{line-height: 1.414;}
.zui-tree-childs{padding-left:var(--zui-tree-left, 20px)}


/**一组显示内容
head
ncols
可定义块尺寸，--zui-pt,--zui-p,--zui-bg等
*/
.zui-group{}
.zui-group-title{display:flex;align-content: center;align-items: stretch;justify-content: space-between}
.zui-group-title h2{font-size:30px;line-height: 1.3;padding: 10px 0px 30px 0px;font-weight:bold;}
.zui-group-title h2, .zui-group-title h2 *{color:#1d1d1f}

.zui-group-head .ops{margin-bottom:36px;}

.zui-group-title-desc{color:#888;text-align: center;max-width: 960px;margin:0 auto;}

.zui-group-title h1{line-height: 1.3;padding: 10px 0px 30px 0px;font-weight:bold;}
.zui-group-title h1, .zui-group-title h1 *{color:#1d1d1f;font-size:48px;}
/**head-title居中*/
.zui-title-center .zui-group-title{justify-content: center;align-items: center;align-content: center;}
.zui-title-center .zui-group-title{justify-content: center;align-items: center;align-content: center;}
.zui-title-center .zui-group-head{padding-bottom:60px;}
.zui-title-center .zui-group-title-desc{color:#888;text-align: center;max-width: 960px;margin:0 auto;}
.zui-title-center .ops{text-align: center;}
/**head-title居左*/
.zui-title-left .zui-group-title{justify-content: start;align-items: start;align-content:start;}
.zui-title-left .zui-group-title{justify-content: start;align-items: start;align-content: start;}
.zui-title-left .zui-group-head{padding-bottom:60px;}
.zui-title-left .zui-group-title-desc{color:#888;text-align: start;max-width: 960px;margin:0 auto;}
.zui-title-left .ops,.zui-title-left .ops.textc{text-align: left;}
/**Tabc*/
.zui-tabc{overflow: hidden;border-radius: var(--zui-tab-box-br, 16px);background: var(--zui-tab-box-bg, #f4f9ff);}
.zui-tabc-head{overflow: hidden;background: var(--zui-tab-hd-bg, #e1f3ff);display: flex;justify-items: center;padding:var(--zui-tab-hd-pd, 6px 16px);}
.zui-tabs{display: flex;justify-items: center;gap:var(--zui-tab-gap, 16px);flex-direction: row;}
.zui-tab-block{display:none;transition: all ease 0.5s;}
.zui-tab{overflow: hidden;border-radius: var(--zui-tab-br, 5px);cursor: pointer;padding:var(--zui-tab-pd, 5px 10px);transition: all ease 0.5s;}
.zui-tab.zui-act{background: var(--zui-tab-act-bg, #fd9cc8);}
.zui-tab-block.zui-act{display:block}

.zui-tablist{padding:var(--zui-tab-content-pd, 16px);}


/**Public define*/

.zui-background-lgray{background:rgba(246,246,248,1)}
.zui-background-lgray .zui-item .zui-item-frame{background:#fff}

.zui-background-white{background:rgba(255,255,255,1)}
.zui-background-white .zui-item .zui-item-frame{background:rgba(246,246,248,1)}

.zui-no-padding,.zui-itemcard.zui-no-padding{padding:0;}
.zui-no-padding-top,.zui-itemcard.zui-no-padding-top{padding-top:0;}
.zui-no-padding-bottom,.zui-itemcard.zui-no-padding-bottom{padding-bottom:0;}
.zui-no-padding-left,.zui-itemcard.zui-no-padding-left{padding-left:0;}
.zui-no-padding-right,.zui-itemcard.zui-no-padding-right{padding-right:0;}


.zui-title-desc{padding-top:var(--zui-block-padding-top);	padding-bottom:var(--zui-block-padding-bottom);}
.zui-full-frame{
	margin:0 auto;width:87.5vw;max-width: 1650px;
	
}


@media only screen and (max-width:960px)
{
	.zui{
		--zui-head-h2-fontsize: 36px;
		--zui-head-h2-lineheight: 40px;
	}
	.zui-item .zui-item-c >.zui-item-col2{grid-template-columns:1fr}
	.zui-item .zui-item-c >.zui-item-col2 .zui-item-picture >div{padding:0;}
	.zui-item .zui-item-c >.zui-item-col2 .zui-item-content{padding:24px;width:auto}
	
	.zui-item .zui-item-c >.zui-item-col2-pic{grid-template-columns:1fr}
	.zui-item .zui-item-c >.zui-item-col2-pic .zui-item-picture >div{padding:0;}
	.zui-item .zui-item-c >.zui-item-col2-pic .zui-item-content{padding:24px;width:auto}
	
	.zui-two-col .zui-item-card-items,.zui-numcol-2 .zui-item-card-items{
		grid-template-columns: 1fr; grid-template-rows:1fr;grid-auto-flow:row;grid-row-gap: var(--zui-column-gap);
    	row-gap: var(--zui-column-gap);
	}
	.zui-two-col .zui-item .zui-item-frame,.zui-numcol-2 .zui-item .zui-item-frame{width:var(--zui-item-width-all)}
	
	.zui-four-col .zui-item-card-items,.zui-numcol-4 .zui-item-card-items{
		grid-template-columns:1fr 1fr;
	}
	.zui-four-col .zui-item .zui-item-frame,.zui-numcol-4 .zui-item .zui-item-frame{width:var(--zui-item-width-col2)}
	
	.zui-five-col .zui-item-card-items,.zui-numcol-5 .zui-item-card-items{
		grid-template-columns:1fr 1fr;
	}
	.zui-five-col .zui-item .zui-item-frame,.zui-numcol-5 .zui-item .zui-item-frame{width:var(--zui-item-width-col2)}
	
	.zui-six-col .zui-item-card-items,.zui-numcol-6 .zui-item-card-items{
		grid-template-columns:1fr 1fr;
	}
	.zui-six-col .zui-item .zui-item-frame,.zui-numcol-6 .zui-item .zui-item-frame{width:var(--zui-item-width-col2)}
	
	
	.zui-item .zui-item-c >.zui-item-col-n{grid-template-columns: auto;}
}

@media only screen and (max-width:640px)
{
	.zui{
		--zui-column-gap: 20px;
		--zui-block-padding-top:64px;
		--zui-block-padding-bottom:64px;
		--zui-column-gap: 20px;
		--zui-item-padding: 24px;
		--zui-item-padding-end: 24px;
		
		--zui-item-h3-fontsize: 20px;
		--zui-item-h3-fontweight:500;
		
		
		--zui-head-h2-fontsize: 32px;
		--zui-head-h2-fontweight: 500;
		
		--zui-item-radius: 0px;
	}
	.zui-head header{padding-bottom: 16px;display:block;}
	/*
	.zui-head header h2,.zui-head header h2 a,.zui-head header h2 span{font-size: 32px; line-height: 1.071;   font-weight: 500;}
	.zui-head header h3,.zui-head header h3 a,.zui-head header h3 span{font-size: 32px; line-height: 1.071;   font-weight: 500;}
	.zui-head header h1,.zui-head header h1 a,.zui-head header h1 span{font-size: 32px; line-height: 1.071;   font-weight: 500;}
	*/
	.zui-three-col .zui-item-card-items,.zui-numcol-3 .zui-item-card-items{
		grid-template-columns:1fr;
	}
	.zui-three-col .zui-item .zui-item-frame,.zui-numcol-3 .zui-item .zui-item-frame{width:var(--zui-item-width-col1)}
	
	.zui-four-col .zui-item-card-items,.zui-numcol-4 .zui-item-card-items{
		grid-template-columns:1fr;
	}
	.zui-four-col .zui-item .zui-item-frame,.zui-numcol-4 .zui-item .zui-item-frame{width:var(--zui-item-width-col1)}
	
	.zui-five-col .zui-item-card-items,.zui-numcol-5 .zui-item-card-items{
		grid-template-columns:1fr ;
	}

	.zui-five-col .zui-item .zui-item-frame,.zui-numcol-5 .zui-item .zui-item-frame{width:var(--zui-item-width-col1)}
	
	.zui-six-col .zui-item-card-items,.zui-numcol-6 .zui-item-card-items{
		grid-template-columns:1fr ;
	}

	.zui-six-col .zui-item .zui-item-frame,.zui-numcol-6 .zui-item .zui-item-frame{width:var(--zui-item-width-col1)}

	.zui-wrap-full{padding-left:16px;padding-right:16px;}
}


/**zui-sq6*/
.zui-sq6-ui-div{
	width:100%;min-height:200px;position: relative;
	overflow: hidden;

	--w:200px;
	--h: calc(var(--w, 200px));

	height: calc(var(--h, 200px) * 4 + 20px);

	--RB: calc(var(--w) * 0.5);
	--RH: calc(var(--w) * 0.866);
	--RH3: calc(var(--w) * 0.866 * 3);
	--RH2: calc(var(--w) * 0.866 * 2);

	--cw: calc(100%);
	--ch: calc(100%);

	--LB: calc(var(--w) * 0.067 * 2 - 2px);

}
.zui-sq6-ui-div >div.zui-sq6-b{
	position: absolute;
	display: block;
	width:calc(var(--w, 200px));
	height:calc(var(--h, 200px));
	background:linear-gradient(to bottom, #435bd4 0%, #ad60f0 100%);
	overflow: hidden;

	--rcx: calc(var(--cw, 800px) / 2);
	--rcy: calc(var(--ch, 800px) / 2);


	--R: 0px;
	--Cos: 1;
	--Sin: 0;

	--cx: calc(var(--rcx) + (var(--R) * var(--Cos)));
	--cy: calc(var(--rcy) + (var(--R) * var(--Sin)));

	left: calc(var(--cx) - (var(--w, 200px) / 2));
	top: calc(var(--cy) - (var(--h, 200px) / 2));	

	clip-path: polygon(25% 6.69872981%, 0% 50%, 25% 93.301270189%, 75% 93.301270189%, 100% 50%, 75% 6.69872981%);
	
	transition: all ease 0.5s;

	cursor: pointer;
	
	box-sizing: border-box;
	
	z-index: 1;
}
/**Content*/
.zui-sq6-ui-div >div.zui-sq6-b >div{
	display:flex;width:100%;height:100%;overflow: hidden;
	text-align: center;color:#fff;
	flex-direction: column;
	justify-content: center;
}
.zui-sq6-ui-div >div.zui-sq6-b >div h2,.zui-sq6-ui-div >div.zui-sq6-b >div h3{margin:0;padding:0;line-height:1.5;font-size:18px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap}
.zui-sq6-ui-div >div.zui-sq6-b >div p{margin:0;padding:0;line-height:1.2;font-size:14px;color:#efefef;}
.zui-sq6-ui-div >div.zui-sq6-b >div .zui-sq6-ui-desc{display:none}

.zui-sq6-ui-div >div.zui-sq6-c >div h2,.zui-sq6-ui-div >div.zui-sq6-c >div h3{font-size:24px;}

@media only screen and (max-width: 1280px) 
{
	.zui-sq6-ui-div{
		--w:150px;
	}
	.zui-sq6-ui-div >div.zui-sq6-b >div h2{font-size:16px;}
	.zui-sq6-ui-div >div.zui-sq6-b.zui-sq6-c >div h2{font-size:18px;}
}
@media only screen and (max-width: 960px) 
{
	.zui-sq6-ui-div{
		--w:120px;
	}
	.zui-sq6-ui-div >div.zui-sq6-b >div h2{font-size:14px;}
	.zui-sq6-ui-div >div.zui-sq6-b >div p{font-size:12px;}
	.zui-sq6-ui-div >div.zui-sq6-b.zui-sq6-c >div h2{font-size:16px;}

}
@media only screen and (max-width: 720px) 
{
	.zui-sq6-ui-div{
		--w:100px;
	}
	.zui-sq6-ui-div >div.zui-sq6-b >div h2{font-size:12px;}
	.zui-sq6-ui-div >div.zui-sq6-b >div p{font-size:10px;}
	.zui-sq6-ui-div >div.zui-sq6-b.zui-sq6-c >div h2{font-size:14px;}

}
@media only screen and (max-width: 640px) 
{
	.zui-sq6-ui-div{
		--w:80px;
	}
	.zui-sq6-ui-div >div.zui-sq6-b >div h2{font-size:12px;}
	.zui-sq6-ui-div >div.zui-sq6-b >div p{font-size:10px;display:none}
	.zui-sq6-ui-div >div.zui-sq6-b.zui-sq6-c >div h2{font-size:12px;}

}
@media only screen and (max-width: 480px) 
{
	.zui-sq6-ui-div{
		--w:64px;
	}
	.zui-sq6-ui-div >div.zui-sq6-b >div h2{font-size:10px;}

}
@media only screen and (max-width: 398px) 
{
	.zui-sq6-ui-div{
		--w:60px;
	}

}
@media only screen and (max-width: 360px) 
{
	.zui-sq6-ui-div{
		--w:50px;
	}

}
/**Backgrounds*/

.zui-sq6-ui-div >div.zui-sq6-bg1{		
	background:linear-gradient(to bottom, #0d378b 0%, #0d378b 100%);
}
.zui-sq6-ui-div >div.zui-sq6-bg2{
	background:linear-gradient(to bottom, #fd5957 0%, #fd5957 100%);
}
.zui-sq6-ui-div >div.zui-sq6-bg3{		
	background:linear-gradient(to bottom, #36c470 0%, #36c470 100%);
}
.zui-sq6-ui-div >div.zui-sq6-bg4{		
	background:linear-gradient(to bottom, #4b9efe 0%, #4b9efe 100%);
}
.zui-sq6-ui-div >div.zui-sq6-bg5{		
	background:linear-gradient(to bottom, #f44848 0%, #f44848 100%);
}
.zui-sq6-ui-div >div.zui-sq6-bg6{		
	background:linear-gradient(to bottom, #f27620 0%, #f27620 100%);
}
.zui-sq6-ui-div >div.zui-sq6-bg7{background:linear-gradient(to bottom, #c749d5 0%, #8664ed 100%);}
/**方向与半径*/
.zui-sq6-ui-div >div.zui-sq6-s1{
	--Cos: 0.866;
	--Sin: 0.5;

	--R: calc((var(--w, 200px) / 2) * 2 - var(--LB));
}
.zui-sq6-ui-div >div.zui-sq6-s2{
	--Cos: 0;
	--Sin: 1;

	--R: calc((var(--w, 200px) / 2) * 2 - var(--LB));
}
.zui-sq6-ui-div >div.zui-sq6-s3{
	--Cos: -0.866;
	--Sin: 0.5;

	--R: calc((var(--w, 200px) / 2) * 2 - var(--LB));
}
.zui-sq6-ui-div >div.zui-sq6-s4{
	--Cos: -0.866;
	--Sin: -0.5;

	--R: calc((var(--w, 200px) / 2) * 2 - var(--LB));
}
.zui-sq6-ui-div >div.zui-sq6-s5{
	--Cos: 0;
	--Sin: -1;

	--R: calc((var(--w, 200px) / 2) * 2 - var(--LB));
}
.zui-sq6-ui-div >div.zui-sq6-s6{
	--Cos: 0.866;
	--Sin: -0.5;

	--R: calc((var(--w, 200px) / 2) * 2 - var(--LB));	
}

/*相对位置*/
.zui-sq6-ui-div >div.zui-sq6-rs1{		
	--rcx: calc(var(--cw, 800px) / 2 + (var(--R) * 0.866));
	--rcy: calc(var(--ch, 800px) / 2 + (var(--R) * 0.5));


}	
.zui-sq6-ui-div >div.zui-sq6-rs2{		
	--rcx: calc(var(--cw, 800px) / 2 + (var(--R) * 0));
	--rcy: calc(var(--ch, 800px) / 2 + (var(--R) * 1));
}
.zui-sq6-ui-div >div.zui-sq6-rs3{		
	--rcx: calc(var(--cw, 800px) / 2 + (var(--R) * (-0.866)));
	--rcy: calc(var(--ch, 800px) / 2 + (var(--R) * 0.5));
}
.zui-sq6-ui-div >div.zui-sq6-rs4{		
	--rcx: calc(var(--cw, 800px) / 2 + (var(--R) * (-0.866)));
	--rcy: calc(var(--ch, 800px) / 2 + (var(--R) * (-0.5)));
}
.zui-sq6-ui-div >div.zui-sq6-rs5{		
	--rcx: calc(var(--cw, 800px) / 2 + (var(--R) * (0)));
	--rcy: calc(var(--ch, 800px) / 2 + (var(--R) * (-1)));
}
.zui-sq6-ui-div >div.zui-sq6-rs6{		
	--rcx: calc(var(--cw, 800px) / 2 + (var(--R) * (0.866)));
	--rcy: calc(var(--ch, 800px) / 2 + (var(--R) * (-0.5)));
}

.zui-sq6-ui-div >div.zui-sq6-rs16{		
	--rcx: calc(var(--cw, 800px) / 2 + (var(--RB) * 3) + (2px * 2));
	--rcy: calc(var(--ch, 800px) / 2 + (var(--RB) * 0) + 0px);
}

.zui-sq6-ui-div >div.zui-sq6-rs34{		
	--rcx: calc(var(--cw, 800px) / 2 - (var(--RB) * 3) - (2px * 2));
	--rcy: calc(var(--ch, 800px) / 2 + (var(--RB) * 0) + 0px);
}


.zui-sq6-ui-div >div.zui-sq6-b:hover{background:linear-gradient(to right, #c99bf2 0%, #4b43d4 100%);transform: scale3d(1.2, 1.2, 1.2);z-index:3;}

.zui-ani-15s{
	animation-duration: 1.5s !important;
	-webkit-animation-duration: 1.5s !important;
	animation-fill-mode: both !important;
	-webkit-animation-fill-mode: both !important;
}
.zui-ani-10s{
	animation-duration: 1.0s !important;
	-webkit-animation-duration: 1.0s !important;
	animation-fill-mode: both !important;
	-webkit-animation-fill-mode: both !important;
}
@keyframes zui-fade-right
{
	from {
		opacity: 0;
		-webkit-transform: translate(200%,0); 
		transform: translate(200%,0); 
	}
	to {
		opacity:1;
		-webkit-transform: translate(0px,0); 
		transform: translate(0px,0); 
	}
}
@keyframes zui-fade-left
{
	from {
		opacity: 0;
		-webkit-transform: translate(-200%,0); 
		transform: translate(-200%,0); 
	}
	to {
		opacity:1;
		-webkit-transform: translate(0px,0); 
		transform: translate(0px,0); 
	}
}
@keyframes zui-fade-up
{
	from {
		opacity: 0;
		-webkit-transform: translate(0,-200%); 
		transform: translate(0,-200%); 
	}
	to {
		opacity:1;
		-webkit-transform: translate(0px,0); 
		transform: translate(0px,0); 
	}
}
@keyframes zui-fade-down
{
	from {
		opacity: 0;
		-webkit-transform: translate(0,200%); 
		transform: translate(0,200%); 
	}
	to {
		opacity:1;
		-webkit-transform: translate(0px,0); 
		transform: translate(0px,0); 
	}
}
@keyframes zui-fade-scale
{
	from {
		opacity: 0;
		transform: scale3d(0,0,0)
	}
	to {
		opacity:1;
		transform: scale3d(1.2,1.2,1.2)
	}
}
.zui-fade-scale {
	animation-name: zui-fade-scale;
	-webkit-animation: zui-fade-scale;
}
.zui-fade-left {
	animation-name: zui-fade-left;
	-webkit-animation: zui-fade-left;
}
.zui-fade-right {
	animation-name: zui-fade-right;
	-webkit-animation: zui-fade-right;
}
.zui-fade-up {
	animation-name: zui-fade-up;
	-webkit-animation: zui-fade-up;
}
.zui-fade-down {
	animation-name: zui-fade-down;
	-webkit-animation: zui-fade-down;
}

.zui-sq6-ui-con{overflow: hidden;position: relative;background: #e3e3fd}

.zui-sq6-ui-con >.zui-sq6-ui-pop{
	position: absolute;
	--w: max(240px, calc(50%));
	--h: max(180px, calc(70%));
	
	--l: calc((100% - var(--w)) / 2);
	--t: calc((100% - var(--h)) / 2);
	
	left: calc(var(--l));
	top: calc(var(--t));
	
	width: calc(var(--w));
	height: calc(var(--h));
	
	background:#fff;
	border:1px solid #ccc;
	border-radius: 20px;
	
	z-index:4;
	overflow: hidden;
	box-sizing: border-box;
	
	display:none;
}
@media only screen and (max-width: 640px) 
{
.zui-sq6-ui-con >.zui-sq6-ui-pop{
	position: absolute;
	--w: max(240px, calc(90%));
	--h: max(180px, calc(90%));
}

}
.zui-sq6-ui-pop >div{padding:16px;max-height: 100%;overflow: hidden;overflow-y: auto;}
.zui-sq6-ui-pop >span{display:block;position: absolute;right: 15px; top:5px;}
.zui-sq6-ui-close{display:inline-block;width:40px;height:40px;border-radius: 50%;line-height: 40px;text-align: center;background:#6960f8;color:#fff;font-weight: bold;cursor: pointer}

.zui-sq6-ui-pop-text img{max-width: 100%;}
/**zui-sq6-end*/


div.zui-ctls div.zui-field{position:relative;margin-bottom:calc(var(--mb, 16px));}

div.zui-field .zui-label{display:block;clear:both;font-weight: bold;line-height:2;white-space: nowrap;font-size:16px;color:#666;position: relative}

div.zui-field >div.zui-ctl{position:relative;box-sizing: border-box;}
div.zui-field >div.zui-ctl p.errortip{display:none;padding:10px 5px;color:#f00;font-weight: bold;background: #F7D8D8}
div.zui-field >div.zui-ctl p.suctip{display:none;padding:10px 5px;color:#080;font-weight: bold}
div.zui-field >div.zui-ctl .opbtns{position:absolute;line-height:35px;top:1px;bottom:1px;right:16px;max-width: 30%; text-overflow: ellipsis; white-space: nowrap;overflow: hidden}
div.zui-field p.desc{color:#aaa;margin-top:10px}

div.zui-field >div.zui-ctlext{margin-top:5px;overflow: hidden;}

div.zui-ctl{position:relative;box-sizing: border-box;}
div.zui-ctl .resuploadfilec{top:0;bottom:0;}
div.zui-ctl input[type="text"],div.zui-ctl input[type="password"],
div.zui-ctl input[type="date"],div.zui-ctl input[type="time"],div.zui-ctl input[type="number"],
div.zui-ctl input[type="tel"],div.zui-ctl input[type="email"],div.zui-ctl input[type="url"],
div.zui-ctl textarea,div.zui-ctl select,div.zui-ctl.zui-select >div
{
	width:100%;display:block;line-height:1.8;padding:6px 10px;margin:0;
	font-size:calc(var(--font-size, 16px));
	border:1px solid #ccc;border-radius: 3px;box-sizing: border-box;background:#fff;
	color:#111;
}

div.zui-ctl input[type="text"]:focus,div.zui-ctl input[type="password"]:focus,
div.zui-ctl input[type="date"]:focus,div.zui-ctl input[type="time"]:focus,div.zui-ctl input[type="number"]:focus,
div.zui-ctl input[type="tel"]:focus,div.zui-ctl input[type="email"]:focus,div.zui-ctl input[type="url"]:focus,
div.zui-ctl textarea:focus{border:1px solid #0e7fe1;box-shadow: 3px 3px 3px rgba(0,0,0,0.1) inset}

div.zui-upline{position:relative;}
div.zui-upline input[type="file"]{position:absolute;left:0;right:0;top:0;bottom:0;opacity: 0;z-index: 2;}
.zui-upbtn{padding:6px 0px;font-size:calc(var(--font-size, 16px));cursor: pointer;}

div.zui-ctl textarea{height:auto;min-height:40px;padding-top:10px;padding-bottom:10px;}
div.zui-ctl select{opacity: 0;position:absolute;top:0;left:0;right:0;bottom:0;border:none;}
div.zui-ctl.zui-select >div{
	line-height:1.8;padding:6px 10px;font-size:calc(var(--font-size, 16px));
	padding-right:30px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	background:url(/verip_private/eappui/styles/select_arrow.png) no-repeat right 10px top 15px;	
}


div.zui-ctl input[readonly],div.zui-ctl input[disabled],div.zui-ctl select[readonly],
div.zui-ctl select[disabled],div.zui-ctl textarea[readonly],div.zui-ctl textarea[disabled],
div.zui-ctl.zui-select div.disabled{background:#ddd;}
div.zui-ctl.zui-select div.disabled{background:#ddd url(/verip_private/eappui/styles/select_arrow.png) no-repeat right 10px top 15px;}

div.zui-ctl .picpreview{position:absolute;left:0;bottom:0;right:0;top:0}

.zui-line-items{display:flex;align-items: center;gap:10px}

.zui-sub-title{font-weight: bold;font-size:20px;margin-bottom: 30px;line-height: 1.2;}
/**Timeline*/
.zui-timeline {
	position: relative;
	padding-left: 42px;
}

.zui-timeline-light,.zui-light{
	--bg-main: #f7f9fc;
	--bg-card: #ffffff;
	--bg-glass: #f0f4f8;
	--text-primary: #1e293b;
	--text-secondary: #64748b;
	--text-muted: #94a3b8;
	--line-gradient: linear-gradient(180deg, #6366f1, #8b5cf6, #ec4899);
	--shadow-soft: 0 8px 30px rgba(15, 23, 42, 0.08);
	--shadow-hover: 0 12px 40px rgba(99, 102, 241, 0.12);
	--radius-lg: 16px;
	--radius-md: 10px;
	--radius-sm: 6px;
	--status-done: #10b981;
	--status-processing: #3b82f6;
	--status-pending: #f59e0b;
	--status-reject: #ef4444;
}

.zui-timeline::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--line-gradient);
	border-radius: 99px;
}

.zui-timeline-item {
	position: relative;
	margin-bottom: 36px;
	animation: fadeSlideUp 0.6s ease-out forwards;
	opacity: 0;
	transform: translateY(20px);
	animation-delay: var(--delay, 0.1s);
}
/*
.zui-timeline-item:nth-child(1) { animation-delay: 0.1s; }
.zui-timeline-item:nth-child(2) { animation-delay: 0.25s; }
.zui-timeline-item:nth-child(3) { animation-delay: 0.4s; }
.zui-timeline-item:nth-child(4) { animation-delay: 0.55s; }
.zui-timeline-item:nth-child(5) { animation-delay: 0.7s; }
*/

@keyframes fadeSlideUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.zui-timeline-dot {
	position: absolute;
	left: -42px;
	top: 16px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #ffffff;
	border: 3px solid #6366f1;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

.zui-timeline-dot::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #6366f1;
}

.zui-timeline-card {
	background: var(--bg-card);
	border: 1px solid rgba(99, 102, 241, 0.08);
	border-radius: var(--radius-lg);
	padding: 24px;
	box-shadow: var(--shadow-soft);
	transition: all 0.3s ease;
}

.zui-timeline-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
	border-color: rgba(99, 102, 241, 0.18);
}

.zui-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 14px;
	flex-wrap: wrap;
	gap: 10px;
}

.zui-event-time {
	font-size: 13px;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}

.zui-event-time svg {
	width: 14px;
	opacity: 0.6;
}
.zui-status-tags {
	display:flex;
	flex-wrap: wrap;
	gap:10px;
}
.zui-status-tag {
	padding: 5px 14px;
	border-radius: 960px;
	font-size: 12px;
	font-weight: 600;
}

.zui-status-done,.zui-status-ok,.zui-status-sure,.zui-status-finish,.zui-status-2,.zui-status-5 {
	background: rgba(16, 185, 129, 0.12);
	color: #059669;
}

.zui-status-processing,.zui-status-0,.zui-status-wait {
	background: rgba(59, 130, 246, 0.12);
	color: #2563eb;
}

.zui-status-pending,.zui-status-1 {
	background: rgba(245, 158, 11, 0.12);
	color: #d97706;
}

.zui-status-reject,.zui-status-3 {
	background: rgba(239, 68, 68, 0.12);
	color: #dc2626;
}
.zui-status-cancel,.zui-status-4 {
	background: rgba(239, 68, 68, 0.12);
	color: #dc2626;
}
.zui-event-title {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 10px;
	color: var(--text-primary);
}

.zui-event-desc {
	font-size: 14px;
	line-height: 1.7;
	color: var(--text-secondary);
	margin-bottom: 20px;
}

.zui-btn-group {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}
.menu_copy_items .zui-btn-group {
	padding: 16px 0px;
}
.dataops .zui-btn-group {
	justify-content: flex-end;
}
.zui-btn {
	line-height: 40px;
	height: 40px;
	padding: 0px 14px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 500;
	border: none;
	cursor: pointer;
	transition: all 0.25s ease;
}
/**Small button*/
.zui-btn-s {
	height: 32px;
	padding: 0 12px;
	font-size: 13px;
	font-weight: 400;
	line-height: 32px;

	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all 0.25s ease;

	vertical-align: middle;
	align-items: center;

	background: linear-gradient(135deg, var(--primary-blue), #3b82f6);
	color: #fff;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}



.zui-btn-blue {
	background: linear-gradient(135deg, var(--primary-blue), #3b82f6);
	color: #fff;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}
.zui-btn-blue:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}
.zui-btn-red1 {
	background: linear-gradient(135deg, #ef4444, #f87171);
	color: white;
}
.zui-btn-purple {
	background: linear-gradient(135deg, var(--primary-purple), var(--light-purple));
	color: white;
}
.zui-btn-gray {
	background: var(--gray-100);
	color: var(--gray-700);
}
.zui-btn-gray:hover {
	background: var(--gray-200);
}
.zui-btn-lgray {
	background: var(--gray-100);
	color: var(--gray-700);
}
.zui-btn-lgray:hover {
	background: var(--gray-200);
}

.zui-btn-primary,.zui-btn-normal {
	background: linear-gradient(90deg, #6366f1, #8b5cf6);
	color: #fff;
}

.zui-btn-primary:hover,.zui-btn-normal:hover {
	opacity: 0.92;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(99, 102, 241, 0.25);
}

.zui-btn-secondary,.zui-btn-gray {
	background: var(--bg-glass);
	color: #475569;
	border: 1px solid rgba(99, 102, 241, 0.12);
}

.zui-btn-secondary:hover,.zui-btn-gray:hover {
	background: #e2e8f0;
}

.zui-btn-danger,.zui-btn-red {
	background: rgba(239, 68, 68, 0.12);
	color: #dc2626;
	border: 1px solid rgba(239, 68, 68, 0.18);
}

.zui-btn-danger:hover , .zui-btn-red:hover {
	background: rgba(239, 68, 68, 0.18);
}
.zui-btn-green {
	background: rgba(68, 239, 145, 0.12);
	color: #14e459;
	border: 1px solid rgba(3, 41, 20, 0.329);
}

.zui-btn-green:hover {
	background: rgba(85, 238, 154, 0.12);
}

/**page*/
.page-header {
	margin-bottom: 28px;
	margin-top: 16px;
}
.page-title,.page-header h1 {
	font-size: 26px;
	font-weight: 600;
	background: linear-gradient(90deg, var(--primary-blue), var(--primary-purple));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	letter-spacing: 0.5px;
	padding:0;margin:0;
}
.page-desc {
	margin-top: 6px;
	color: var(--gray-500);
	font-size: 14px;
}

/**通用带阴影的卡片*/
.zui-card {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	background: #fff;
	margin-bottom: 28px;
}

.zui-pd20{padding:20px}
.zui-card .istat-echart{padding:16px;}
.zui-searchbar,.zui-card.zui-searchbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;

    gap: 20px;
    padding: 20px;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}


.zui-searchbar .search-basic .search-basic-buttons{
	display: flex;
	align-items: center;
}
.zui-search-adv,.search-layout.search-showadv .search-adv.zui-search-adv{
	display:flex;
	gap:10px;
	flex-direction: column;
}

.zui-search-fields{
	display:flex;
	gap:10px;
	flex-wrap: wrap;
	align-items: center;
}
.zui-search-fields  .search-item{
	display:flex;
	flex-direction: column;
	gap: 6px;
}
.search-item >.label,.search-item >span:first-child {
	font-size: 13px;
	text-align: left;
	color: var(--gray-500);
}
.search-item.e40recycle{
	background: none;
}
.search-item >.zui-ctl {
	min-height: 40px;
	padding: 0 0px;
	font-size: 14px;
	transition: var(--transition);
	margin:0;
	margin-bottom: 0px;
	display: flex;
	align-items: center;
	gap:5px;
}
.search-item >input[type=text], .search-item >select,
.search-item .zui-ctl>input[type=text], .search-item .zui-ctl>select ,
.search-item input[type=text],.search-item input[type=number]
{
	width: 160px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--gray-300);
	border-radius: var(--radius-sm);
	font-size: 14px;
	transition: var(--transition);
	background: #fff;
	margin:0;
	margin-bottom: 0px;
}
.search-item input[type=text]:focus, .search-item input[type=number]:focus, .search-item >select:focus,.search-item .ctl>input:focus, .search-item .ctl>select:focus {
	outline: none;
	border-color: var(--primary-blue);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.rowsearch .search-item #q{margin-bottom: 0;}

.zui-search-ctl-btn{display:flex;flex-wrap: wrap;gap:10px;padding-right:50px;align-items: end;}

.zui-mb{margin-bottom: 28px;}
.zui-mb0{margin-bottom: 0px;}

.zui-table,.zui .datagrid{
	border-collapse: collapse;
}
.zui-table thead tr,.zui-table tr.head,.zui .datagrid thead tr,.zui .datagrid tr.head{
	background: linear-gradient(90deg, #f8faff, #faf5ff);
}
.zui-table thead tr td,.zui-table tr.head td,.zui .datagrid thead tr td,.zui .datagrid tr.head td{
	background: none!important;
	background: none;
}
.zui-table tr td,.zui-table.datagrid tr td,.zui .datagrid tr td,.zui .datagrid tr td {
	padding: 18px 14px;
	font-size: 14px;
	line-height: 1.571;
	border-bottom: 1px solid var(--gray-100);
}

.zui-table tr,.zui .datagrid tr {
	transition: var(--transition);
}

.zui-table thead tr th,.zui-table tr.head td,.zui .datagrid thead tr th,.zui .datagrid tr.head td {
	padding: 16px 14px;
	font-weight: 600;
	font-size: 14px;
	color: var(--gray-700);
	border-bottom: 1px solid var(--gray-200);
	border-top: none;
}
.zui .datagrid tr td[align=right]{
	text-align: right;
}

.zui-table tr:hover,.zui .datagrid tr:hover {
	background-color: #f7faff;
}
.zui-table .zui-btn-group,.zui .datagrid .zui-btn-group {
	display: flex;
	gap: 8px;
}

td.dtopcell{width:75px}
/* 复选框美化 */
input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--primary-purple);
	cursor: pointer;
}
.zui .viewmain .viewbody{padding:32px}
.zui .rbutton , .zui .button{color:#fff}
.zui a.rbutton , .zui a.button{color:#fff}

.zui span.tab{
	display:flex;gap:10px;flex-wrap: wrap;background: none;
	visibility: visible!important;
	
}
.zui span.tab >span{
      font-size: 15px;
      cursor: pointer;
      border-bottom: 3px solid transparent;
      color: var(--gray-500)!important;
      transition: var(--transition);
      font-weight: 500;
      flex-shrink: 0;
	  line-height: 26px;
	  border-top:none!important;
	  background: none;
	  width: auto!important;
	  flex-basis: auto!important;
	  border-right:none!important;
	  transition: all ease 0.5s;
}
.zui span.tab >span a{
	padding: 12px 22px!important;
      font-size: 15px;
      cursor: pointer;
      border-bottom: 3px solid transparent;
      color: var(--gray-500)!important;
}
.zui  span.tab > span > a{padding:0;}
.zui .rowtab{border-bottom: 1px solid var(--gray-200);margin-bottom: 28px;padding-bottom:0;padding:0}

.zui span.tab >span:hover{
	color: var(--primary-blue);
    background-color: var(--gray-100)!important;
	border-bottom-color: var(--primary-blue);
}
.zui span.tab >span:hover a{
	color: var(--primary-blue)!important;
}
.zui span.tab > span.act{
	border-bottom-color: var(--primary-purple);
	color: var(--primary-blue)!important;
}
.zui span.tab  > span.act a{color: var(--primary-blue)!important;}

.zui-card.rowsearch,.zui-card.rowsearch.rowtab{
	padding:20px;background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
	border-bottom: none;
}

@media (max-width: 640px) {
	.zui-timeline {
		padding-left: 30px;
	}

	.zui-timeline-dot {
		left: -30px;
		width: 20px;
		height: 20px;
	}

	.zui-timeline-dot::after {
		width: 8px;
		height: 8px;
	}


	.zui-timeline-card {
		padding: 18px;
	}

	.zui-searchbar .rowsearch {
        text-align: left;
    }
	.zui .viewmain .viewbody,.zui .viewmain .viewbody{
		padding:8px;
	}

	.zui span.tab{justify-content: space-between;}

	.zui span.tab >span a{
		padding: 5px 6px!important;
		font-size:14px;
		line-height: 20px;
	}
}

/**zui 前端页面排版, website */
/*前端样式*/
:root {
    --bg-main: #050714;
    --bg-surface: #0a0f22;
    --bg-card: rgba(25, 35, 65, 0.58);
    --bg-card-strong: rgba(30, 45, 80, 0.72);
    --bg-glass: rgba(20, 30, 60, 0.65);
    --border-glass: rgba(80, 145, 255, 0.18);
    --border-active: rgba(0, 190, 255, 0.65);
    --primary: #00c8ff;
    --primary-dark: #0091c2;
    --accent-purple: #a855f7;
    --accent-green: #22d3ee;
    --text-main: #f7f9ff;
    --text-soft: #b8c2d9;
    --text-muted: #7d8fb3;
	--text-link: #f7f9ff;
	--text-link-hover:#b8c2d9;
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;

	--bg-home: radial-gradient(circle at 12% 12%, rgba(0, 200, 255, 0.14), transparent 28%),
        radial-gradient(circle at 88% 8%, rgba(168, 85, 247, 0.12), transparent 32%),
        linear-gradient(180deg, #050714 0%, #080c1a 45%, #050714 100%);
	
	--bg-head:rgba(5, 7, 20, 0.72);

	--text-clogo: linear-gradient(90deg, #ffffff, #00c8ff);
	--text-hightlight: #00e5ff;

	--glass-shadow: 0 0 0 1px rgba(0, 200, 255, 0.02),
        0 10px 35px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02);
	
	--bg-navpop: rgba(30, 45, 80, 1);
	--nav-menulist-color: #fff;

	--bg-hero: linear-gradient(90deg, #ffffff 0%, #00c8ff 45%, #a855f7 100%);
	--bg-btn-primary: linear-gradient(135deg, #00c8ff, #a855f7);
	--bg-clogo:radial-gradient(circle at 35% 25%, rgba(255,255,255,0.32), transparent 35%),
        linear-gradient(135deg, #00c8ff, #a855f7);
	--bg-cliptext: linear-gradient(90deg, #ffffff 0%, #00c8ff 45%, #a855f7 100%);
	--bg-cliptext-hover: linear-gradient(90deg, #ffffff 0%, #ff00ea 45%, #a855f7 100%);
	--bg-badage: rgba(255, 255, 255, 0.045);

    --wrap: 1680px;
	--wrap-hero: 820px;
}
.zui-page.light{
    --bg-main: #f4f7fc;
    --bg-surface: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-card-strong: rgba(240, 245, 255, 0.95);
    --bg-glass: rgba(255, 255, 255, 0.78);
    --border-glass: rgba(60, 100, 180, 0.16);
    --border-active: rgba(0, 150, 220, 0.55);
    --primary: #0091c2;
    --primary-dark: #006b94;
    --accent-purple: #7c3aed;
    --accent-green: #0891b2;
    --text-main: #1a2238;
    --text-soft: #4a5570;
    --text-muted: #8a96b0;
	--text-link: #1a2238;
	--text-link-hover:#4a5570;
    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;

    --bg-home: radial-gradient(circle at 12% 12%, rgba(0, 180, 255, 0.10), transparent 28%),
        radial-gradient(circle at 88% 8%, rgba(124, 58, 237, 0.08), transparent 32%),
        linear-gradient(180deg, #f4f7fc 0%, #eef2fb 45%, #f4f7fc 100%);
	
	--bg-head:rgba(250, 247, 230, 0.72);
	--text-clogo: linear-gradient(90deg, #1a2238, #0091c2);
	--text-hightlight: #0077aa;
	--glass-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5),
        0 10px 35px rgba(30, 60, 120, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.3);
	--bg-navpop: #fff;
	--nav-menulist-color: #1a2238;
}
body.zui-page, .zui-page {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background:var(--bg-home);
    color: var(--text-main);
    min-height: 100vh;
    line-height: 1.75;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
}

.zui-page a{text-decoration: none;color:var(--text-link)}
.zui-page a:hover{color:var(--text-link-hover)}

.zui-page .segment p{margin-bottom:20px;color:var(--text-soft)}
.zui-page header {
    position: sticky;
    top: 0;
    z-index: 999;
    backdrop-filter: blur(18px);
    background: var(--bg-head);
    border-bottom: 1px solid var(--border-glass);
}
.zui-page .nav-container {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 1rem 1.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.zui-page .clogo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.zui-page .clogo-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background:var(--bg-clogo);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 0 18px rgba(0, 200, 255, 0.55);
}
.zui-page .clogo-text {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    background: var(--text-clogo);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.zui-page .btn-primary {
    position: relative;
    background: var(--bg-btn-primary);
    color: #fff !important;
    font-weight: 600;
    border: none;
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: 0.24s ease;
}
.zui-page .btn-primary:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
}
.zui-page .btn-price {
    position: relative;
    background: linear-gradient(135deg, #00c8ff, #a855f7);
    color: #fff !important;
    font-weight: 600;
    padding:14px 22px;
    border-radius: 10px;
    display: inline-block;
    border: none;
    text-decoration: none;
}
.zui-page .btn-prices{text-align: center;padding-top:30px}
.zui-page .btn-primary span {
    position: relative;
    z-index: 1;
}
.zui-page main {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 2.5rem 1.4rem 4rem;
}
.zui-page .hero {
    text-align: center;
    padding: 3.5rem 1rem 2.5rem;
}
.zui-page .hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 1.25;
    margin-bottom: 1.2rem;
    background:
        var(--bg-hero);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.zui-page a.cliptext,.zui-page .cliptext{
    background:var(--bg-cliptext);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: all ease 0.5s;
    text-decoration: none;
}
.zui-page a.cliptext:hover,.zui-page .cliptext:hover{
    background:var(--bg-cliptext-hover);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.zui-page .hero p {
    max-width: var(--wrap-hero);
    margin: 0 auto 1.4rem;
    color: var(--text-soft);
    font-size: 1.15rem;
}
.zui-page .hero-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.8rem;
}
.zui-page .badge {
    border: 1px solid var(--border-glass);
    border-radius: 999px;
    padding: 0.55rem 1rem;
    font-size: 0.88rem;
    color: var(--text-soft);
    background: var(--bg-badage);
}
.zui-page .badge.highlight {
    border-color: rgba(0, 200, 255, 0.35);
    color: var(--text-hightlight);
}
.zui-page .section {
    margin-top: 3.8rem;
}
.zui-page .section-title {
    font-size: 1.8rem;
    margin-bottom: 1.4rem;
    text-align: center;
}
.zui-page .glass-panel {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: 18px;
    padding: 1.8rem;
    backdrop-filter: blur(22px);
    box-shadow:var(--glass-shadow);
}
/* Tab 切换区域 */
.zui-page .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.6rem;
    border-bottom: 1px solid var(--border-glass);
    padding-bottom: 0.2rem;
}
.zui-page .tab {
    padding: 0.75rem 1.25rem;
    border-radius: 10px 10px 0 0;
    color: var(--text-soft);
    cursor: pointer;
    font-weight: 600;
    border: 1px solid transparent;
    transition: 0.22s ease;
    background: transparent;
    font-size: 0.96rem;
}
.zui-page .tab:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.045);
}
.zui-page .tab.active {
    color: var(--text-hightlight);
    border-color: var(--border-glass);
    border-bottom-color: transparent;
    background: var(--bg-surface);
    box-shadow: 0 -8px 18px rgba(0, 200, 255, 0.14);
}
.zui-page .tab-content {
    display: none;
    animation: fadeIn 0.35s ease;
}
.zui-page .tab-content.active {
    display: block;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.zui-page .item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--item-w, 280px), 1fr));
    gap: var(--item-gap, 1.2rem);
}
.zui-page .overhide{overflow: hidden;}
/**.zui-slider div.overhide div.zui-slider-items*/
.zui-page .zui-slider{
	position: relative;
}
.zui-page .zui-slider-items{transition: all ease-in 0.5s;cursor: grab;}
.zui-page .zui-slider-items.is-dragging { cursor: grabbing; transition: none; user-select: none;-webkit-user-select:none}
.zui-page .zui-slider-items img{pointer-events: none;}
.zui-page .zui-slider-btn{
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #333;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    transition: background .2s, color .2s, box-shadow .2s, opacity .2s;
}
.zui-page .zui-slider-btn-prev{
	left: -21px;
}
.zui-page .zui-slider-btn-next{
	right: -21px;
}
.zui-page .zui-slider-btn:hover {
	background: #3b82f6;
	color: #fff;
	box-shadow: 0 4px 14px rgba(59, 130, 246, .45);
}
.zui-page .zui-slider-btn.is-disabled { opacity: .3; cursor: default; pointer-events: none; }
.zui-page .item-oneline-grid {
    display: flex;
    gap: var(--item-gap, 1.2rem);
	will-change: transform;
	touch-action: pan-y;
}
.zui-page .item-oneline-grid >div{
	flex: 0 0 var(--item-w, 320px);
	box-sizing: border-box;
}
.zui-page .item-card {
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: 14px;
    padding: 1.3rem;
    transition: 0.25s ease;
}
.zui-page .item-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-active);
    box-shadow: 0 12px 28px rgba(0, 200, 255, 0.18);
}
.zui-page .image-card {
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: 14px;
    padding: 0;
    transition: 0.25s ease;
	overflow: hidden;
}
.zui-page .image-card .image{margin:0;padding:0;overflow: hidden;}
.zui-page .image-card .image img{min-width: 100%;max-width: 100%;width:100%;margin:0;padding:0;overflow: hidden;display: block;}
.zui-page .image-card .text{
	padding:0.8rem;
    font-size:0.9rem;
    color:var(--text-soft);
}

.zui-page .image-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-active);
    box-shadow: 0 12px 28px rgba(0, 200, 255, 0.18);
}
/**让上下两块两端对齐，一个在最上，一个在最下*/
.zui-page .item-rows-full {
    display:flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
}

.zui-page .text-content h4,.text-content h3 {
    margin-bottom: 0.6rem;
    color: #ffffff;
    font-size: 1.2rem;
    margin-top: 0;
}
.zui-page .text-content p {
    font-size: 1rem;
    color: var(--text-soft);
    margin:0;
}

.zui-page .icon-check {
    color: var(--success);
    margin-right: 0.5rem;
}
.zui-page .list-block {
    list-style: none;
    padding-left: 0;
}
.zui-page .list-block li {
    padding: 0.5rem 0;
    color: var(--text-soft);
}
.zui-page .note {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-top: 1rem;
    line-height: 1.8;
}
.zui-page .timeline-wrap {
    position: relative;
    margin-top:2rem;
}
/* 横向连接线 大屏 */
.zui-page .timeline-wrap::before {
    content: "";
    position: absolute;
    top: 36px;
    left: 60px;
    right:60px;
    height: 2px;
    background: linear-gradient(90deg, #00c8ff, #a855f7);
    opacity:0.35;
    z-index:1;
}
.zui-page .timeline-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap:1.4rem;
    position:relative;
    z-index:2;
}
.zui-page .timeline-item {
    background: var(--bg-card);
    border:1px solid var(--border-glass);
    border-radius:16px;
    padding: 2rem 1.4rem 1.4rem;
    position:relative;
    transition:0.25s ease;
}
.zui-page .timeline-item:hover {
    transform: translateY(-5px);
    border-color: var(--border-active);
    box-shadow: 0 14px 32px rgba(0,200,255,0.16);
}
.zui-page .timeline-number {
    position:absolute;
    top:-14px;
    left:50%;
    transform: translateX(-50%);
    width:44px;
    height:44px;
    border-radius:50%;
    background: linear-gradient(135deg,#00c8ff,#a855f7);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:1.1rem;
    color:#fff;
    box-shadow: 0 0 16px rgba(0,200,255,0.45);
}
.zui-page .timeline-item h4 {
    text-align:center;
    margin-bottom:0.7rem;
    color:#fff;
    font-size:1.1rem;
    margin-top:1rem;
}
.zui-page .timeline-item p {
    font-size:0.94rem;
    color:var(--text-soft);
    text-align:center;
    line-height:1.7;
    margin:0;
}
.zui-page .wiki-links {
    columns: 2 260px;
    gap: 1rem;
}
.zui-page .wiki-links a {
    display: block;
    color: var(--accent-green);
    text-decoration: none;
    padding: 0.3rem 0;
    font-size: 0.92rem;
    border-bottom: 1px solid transparent;
    transition: 0.2s ease;
}
.zui-page .wiki-links a:hover {
    color: #00e5ff;
    border-bottom-color: rgba(0, 229, 255, 0.35);
}
.zui-page footer {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    border-top: 1px solid var(--border-glass);
    margin-top: 3rem;
}

.zui-page .price-value{
    font-size:2rem;
    font-weight:800;
    background:linear-gradient(90deg,#00c8ff,#a855f7);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    margin:0.6rem 0;
}
.zui-page .price-desc{
    color:var(--text-soft);
    font-size:0.95rem;
    margin-bottom:1.2rem;
}

/* 视频播放栏 */
.zui-page .video-wrap{
    width:100%;
    border-radius:14px;
    overflow:hidden;
    background:#000;
    border:1px solid var(--border-glass);
}
.zui-page .video-placeholder{
    width:100%;
    height:420px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-muted);
}
/**item列表，比如文章列表*/
.zui-page .page-header {
    text-align: center;
    margin-bottom: 3rem;
}
.zui-page .page-header h1 {
    font-size: clamp(1.8rem,4vw,2.6rem);
    background: linear-gradient(90deg, #ffffff 0%, #00c8ff 45%, #a855f7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin:0 0 0.8rem;
}
.zui-page .page-header p {
    color: var(--text-soft);
    max-width:700px;
    margin:0 auto;
    font-size:1.05rem;
}
.zui-page .filter-bar {
    display:flex;
    flex-wrap:wrap;
    gap:0.7rem;
    margin-bottom:2rem;
    align-items:center;
}
.zui-page .filter-tag {
    padding:0.5rem 1rem;
    border-radius:999px;
    border:1px solid var(--border-glass);
    background:rgba(255,255,255,0.04);
    color:var(--text-soft);
    cursor:pointer;
    transition:0.22s ease;
    font-size:0.9rem;
}
.zui-page .filter-tag.active {
    border-color:var(--primary);
    color:#00e5ff;
    background:rgba(0,200,255,0.08);
}
.zui-page .filter-tag:hover {
    border-color:var(--primary);
    color:#00e5ff;
}
.zui-page .article-list {
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(340px,1fr));
    gap:1.4rem;
}
.zui-page .article-card {
    background:var(--bg-card);
    border:1px solid var(--border-glass);
    border-radius:16px;
    overflow:hidden;
    transition:0.25s ease;
}
.zui-page .article-card:hover {
    transform: translateY(-5px);
    border-color:var(--border-active);
    box-shadow:0 14px 32px rgba(0,200,255,0.16);
}
.zui-page .glass-card {
    background:var(--bg-card);
    border:1px solid var(--border-glass);
    border-radius:16px;
    overflow:hidden;
    transition:0.25s ease;
}
.zui-page .glass-card:hover {
    transform: translateY(-5px);
    border-color:var(--border-active);
    box-shadow:0 14px 32px rgba(0,200,255,0.16);
}
.zui-page .item-thumb {    
    display:flex;
    align-items:center;
    justify-content:center;
	overflow: hidden;
}
.zui-page .item-thumb img{
	flex:0 0 100%;
	max-width: 100%;
}
.zui-page .item-body {
    padding:1.4rem;
}
.zui-page .item-meta {
    display:flex;
    gap:0.8rem;
    font-size:0.85rem;
    color:var(--text-muted);
    margin-bottom:0.7rem;
}
.zui-page .item-title {
    margin:0 0 0.7rem;
    font-size:1.2rem;
}
.zui-page .item-title a {
    color:var(--text-main);
    text-decoration:none;
    transition:0.22s ease;
}
.zui-page .item-title a:hover {
    color:var(--primary);
}
.zui-page .item-desc {
    color:var(--text-soft);
    font-size:0.95rem;
    margin:0 0 1rem;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.zui-page .item-tags {
    display:flex;
    flex-wrap:wrap;
    gap:0.5rem;
}
.zui-page .item-tag {
    font-size:0.8rem;
    padding:0.25rem 0.6rem;
    border-radius:6px;
    background:rgba(255,255,255,0.05);
    color:var(--text-muted);
    border:1px solid var(--border-glass);
}
.zui-page .pagination {
    display:flex;
    justify-content:center;
    gap:0.6rem;
    margin-top:3rem;
}
.zui-page .page-btn {
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    border:1px solid var(--border-glass);
    background:var(--bg-card);
    color:var(--text-soft);
    cursor:pointer;
    transition:0.22s ease;
}
.zui-page .page-btn:hover {
    border-color:var(--primary);
    color:#00e5ff;
}
.zui-page .page-btn.active {
    background:linear-gradient(135deg,#00c8ff,#a855f7);
    color:#fff;
    border:none;
}

.zui-page .content-wrap {
    max-width: var(--wrap-article, 860px);
    margin: 0 auto;
}
.zui-page .content-glass-panel {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: 18px;
    padding: 2.4rem 2.8rem;
    backdrop-filter: blur(22px);
    box-shadow:
        0 0 0 1px rgba(0, 200, 255, 0.02),
        0 10px 35px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.zui-page .content-header h1 {
    font-size: clamp(1.8rem,4vw,2.4rem);
    line-height:1.35;
    background: linear-gradient(90deg, #ffffff 0%, #00c8ff 45%, #a855f7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin:0 0 1rem;
}
.zui-page .content-meta-row {
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    font-size:0.9rem;
    color:var(--text-muted);
    margin-bottom:1.4rem;
}
.zui-page .content-tag-group {
    display:flex;
    flex-wrap:wrap;
    gap:0.5rem;
    margin-bottom:2rem;
}
.zui-page .content-tag {
    font-size:0.82rem;
    padding:0.3rem 0.7rem;
    border-radius:8px;
    border:1px solid var(--border-glass);
    background:rgba(255,255,255,0.04);
    color:var(--text-soft);
}
.zui-page .content-cover {
    width:100%;
    height:280px;
    border-radius:12px;
    background:linear-gradient(135deg,rgba(0,200,255,0.14),rgba(168,85,247,0.14));
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-muted);
    border:1px solid var(--border-glass);
    margin-bottom:2rem;
}
.zui-page .content-content h2 {
    font-size:1.5rem;
    margin:2.2rem 0 1rem;
    color:#fff;
}
.zui-page .article-content h3, .zui-page .article-content h4 , .zui-page .article-content h5, .zui-page .article-content h6  {
    font-size:1.25rem;
    margin:1.8rem 0 0.8rem;
    color:#e8edf8;
}
.zui-page .article-content p {
    color:var(--text-soft);
    margin-bottom:1.1rem;
    font-size:1.02rem;
}
.zui-page .article-content ul {
    padding-left:1.4rem;
    color:var(--text-soft);
}
.zui-page .article-content li {
    margin-bottom:0.6rem;
}
.zui-page .article-content code {
    background:rgba(0,200,255,0.08);
    padding:0.15rem 0.4rem;
    border-radius:4px;
    color:#4ddbff;
    font-family:Consolas,monospace;
    font-size:0.95em;
}
.zui-page .article-content pre {
    background:#070b18;
    border:1px solid var(--border-glass);
    border-radius:10px;
    padding:1.2rem;
    overflow-x:auto;
    margin:1.2rem 0;
}
.zui-page .article-content pre code {
    background:transparent;
    padding:0;
}
.zui-page .quote-block {
    border-left:3px solid var(--primary);
    padding:0.8rem 1.2rem;
    background:rgba(0,200,255,0.06);
    border-radius:0 8px 8px 0;
    margin:1.4rem 0;
}
.zui-page .quote-block p {
    margin:0;
    color:var(--text-muted);
}
.zui-page .content-footer-bar {
    margin-top:2.6rem;
    padding-top:1.6rem;
    border-top:1px solid var(--border-glass);
}
.zui-page .back-link a {
    color:var(--accent-green);
    text-decoration:none;
}
.zui-page .back-link a:hover {
    color:#00e5ff;
    text-decoration:underline;
}

/**导航条*/
.zui-nav{transition: all ease 0.5s;}
.zui-nav-main{
	max-width: var(--wrap);margin:0 auto;display: flex;justify-content: space-between;align-items: center;position: relative;
	--zui-menu-mh: 80px;height:80px;
}
.zui-nav-quick{flex-grow: 0; flex-shrink: 0;display:flex;gap:16px;align-content: center;align-items: center;}
.zui-nav-quick .zui-nav-shmenus img{width:24px;height:24px;color:var(--nav-menulist-color)}
.zui-nav-quick .zui-nav-shmenus{color:var(--nav-menulist-color)}
.zui-nav-logo{flex-grow: 0; flex-shrink: 0;}


.zui-pr{position:relative}
.zui-pa{position:absolute}

.zui-nav-menus{display: flex;gap:24px;height:100%;margin:0;padding:0;align-items: center;}
.zui-nm{margin:0;padding:0px 0px;}
.zui-nav-menus > .zui-nm> .zui-nmt{height:100%;display: flex;align-items: center;flex-direction: column;justify-content: center;}
.zui-nmc{left:0;margin:0;transition: all ease 0.5s;padding:0;}
.zui-nmc >div{padding: 16px;}
.zui-nav-menus > .zui-nm{height:100%;}
.zui-nav-menus > .zui-nm >.zui-nmc >div{border:1px solid #efefef;padding:16px;background:var(--bg-navpop)}
.zui-nav-menus > .zui-nm.zui-pr >.zui-nmc{height: 0;overflow: hidden;left:-100%;position: absolute;top:calc(100% - 1px)}

.zui-nav-menus > .zui-nm.zui-pr:hover >.zui-nmc{height: auto;overflow: visible;left:0px;}

.zui-nav-menus > .zui-nm.zui-pn >.zui-nmc{height: 0;overflow: hidden;top:calc(100% + 15px);transition: all ease 0.5s;right:0;position: absolute;}
.zui-nav-menus > .zui-nm.zui-pn:hover >.zui-nmc{height: auto;overflow: visible;top:calc(100% - 1px);left:0;}

.zui-nav-shmenus{display:none;}

.zui-nmc.zui-nmpan >div{display:flex;flex-wrap: wrap;gap:20px;}

@media (max-width: 960px) {
	.zui-nav{padding:0 20px;}
	.zui-nav-main{position: static;}
	.zui-nav-menus{
		position:fixed;left:0;top:calc(100%);right:0;flex-direction: column;gap:16px;      
		height:calc(100vh - var(--zui-menu-mh, 60px) - 2px);
		overflow: hidden;overflow-y: auto;
		background: var(--bg-surface);
		border-top:1px solid var(--border-glass);
		align-items: flex-start;
		display: none;
		padding: 0 16px;
	}
	.zui-nm{text-align: left;}
	.zui-nav-menus > .zui-nm> .zui-nmt{display: block;text-align: left;}
	.zui-nav-menus > .zui-nm >.zui-nmc >div{border:none;padding:10px;background:none}

	.zui-nav-menus > .zui-nm{height:auto;}
	.zui-nav-menus .zui-pr{position:static}
	.zui-nav-menus .zui-pa{position:static}
	.zui-nav-menus > .zui-nm.zui-pr >.zui-nmc{height: auto;position:static}
	.zui-nav-menus > .zui-nm.zui-pn >.zui-nmc{height: auto;position: static}

	.zui-nm .zui-nmt{height:auto;justify-content: flex-start;align-items: start;}

	.zui-nav-shmenus{display:block}

	.zui-nmc.zui-nmpan >div{display:block;}

}

@media(max-width:960px){
    .zui-page .timeline-wrap::before {
        top:0;
        bottom:0;
        left:22px;
        width:2px;
        height:auto;
    }
    .zui-page .timeline-list {
        grid-template-columns:1fr;
    }
    .zui-page .timeline-item {
        padding:1.2rem 1.2rem 1.2rem 4rem;
    }
    .zui-page .timeline-number {
        top:1.2rem;
        left:0;
        transform:none;
    }
    .zui-page .timeline-item h4,
    .zui-page .timeline-item p {
        text-align:left;
    }
	.zui-page .timeline-item h4 {
		margin-top:0;
	}
    .zui-page .video-placeholder{height:260px;}
}
@media (max-width: 768px) {
    .zui-page .nav-container {
        flex-direction: column;
        gap: 1rem;
    }
    .zui-page .tabs {
        overflow-x: auto;
        width: 100%;
    }
    .zui-page .wiki-links {
        columns: 1;
    }
	.zui-page .article-list {
        grid-template-columns:1fr;
    }
	.zui-page .item-grid {
		grid-template-columns: 1fr;
	}
	.zui-page .glass-article {
        padding:1.4rem 1.2rem;
    }
    .zui-page .article-cover {
        height:180px;
    }
}