/**ZUI*/
:root{
	
}
.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: 75px;
	--zui-item-h3-lineheight: 1.25;
	--zui-item-h3-fontweight: 600;
	--zui-item-h3-fontsize: 28px;
	--zui-item-p-lineheight: 1.353;	
	--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-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 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-title-desc{}

.zui-head header{display: flex;align-items: flex-start; justify-content: space-between;padding-bottom: var(--zui-head-padding-bottom);gap:28px;width:87.5vw;max-width: 1650px;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: 56px; line-height: 1.071;   font-weight: 600;color:var(--zui-head-title-color)}
.zui-head header h3,.zui-head header h3 a,.zui-head header h3 span{font-size: 56px; line-height: 1.071;   font-weight: 600;color:var(--zui-head-title-color)}
.zui-head header h1,.zui-head header h1 a,.zui-head header h1 span{font-size: 56px; line-height: 1.071;   font-weight: 600;color:var(--zui-head-title-color)}
.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-op-buttons{min-height:60px;width:87.5vw;max-width: 1650px;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: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;
	
	
}

/**网格主容器（直接子级为项，默认显示一行）*/
.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;
    margin: 0;
    list-style: none;
	padding:0 var(--zui-scroll-padding);
	
}

.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}

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

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

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

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

/**图片要在最底部时，需要把容器高设置成100%*/
.zui-item .zui-item-c .zui-item-picture{display:block;overflow: hidden;width:100%;text-align: center;position: relative;bottom: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%;}

.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);width:var(--zui-item-col2-textwidth)}
.zui-item .zui-item-c >.zui-item-col2-pic .zui-item-content{padding:var(--zui-item-col2-textpadding);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)}
.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{
	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{width:var(--zui-item-width-all)}

/**固定两列*/
.zui-two-col .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{width:var(--zui-item-width-half)}

/**固定三列*/
.zui-three-col .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{width:var(--zui-item-width-col3)}

/**固定四列*/
.zui-four-col .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{width:var(--zui-item-width-col4)}

/**固定五列*/
.zui-five-col .zui-item-card-items{
	grid-template-columns: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-five-col .zui-item .zui-item-frame{width:var(--zui-item-width-col5)}

/**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-top: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-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{
		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{width:var(--zui-item-width-all)}
	
	.zui-four-col .zui-item-card-items{
		grid-template-columns:1fr 1fr;
	}
	.zui-four-col .zui-item .zui-item-frame{width:var(--zui-item-width-col2)}
	
	.zui-five-col .zui-item-card-items{
		grid-template-columns:1fr 1fr;
	}
	.zui-five-col .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-head header{padding-bottom: 16px}
	.zui-head header h2{font-size:32px;}
	
	.zui-three-col .zui-item-card-items{
		grid-template-columns:1fr;
	}
	.zui-three-col .zui-item .zui-item-frame{width:var(--zui-item-width-col1)}
	
	.zui-four-col .zui-item-card-items{
		grid-template-columns:1fr;
	}
	.zui-four-col .zui-item .zui-item-frame{width:var(--zui-item-width-col1)}
	
	.zui-five-col .zui-item-card-items{
		grid-template-columns:1fr ;
	}

	.zui-five-col .zui-item .zui-item-frame{width:var(--zui-item-width-col1)}
}