/* 通用 ----------------------------------------------------------------- */
/* div img a; span同行 br换行 p换段; 只有这几种基本的 只设置div即可 其他都可以继承 因为外面总是有div */
/* Verdana,"Microsoft YaHei","微软雅黑",Arial,Helvetica,Tahoma,sans-serif,"Segoe UI" */
/* "Times New Roman","Calisto MT",Geogia,Rockwell */
/* #FFF=white; #000=black ------------------------------- */

html,body {font-family:Verdana,"Microsoft YaHei","微软雅黑",Arial,Helvetica,Tahoma,sans-serif,"Segoe UI";}   

table {border-collapse:collapse;}
iframe {border:none; width:100%;}

a {text-decoration:none; text-align:center;}
a,a:visited {color:currentColor;}
a.disabled {pointer-events:none;}	/* 把一个a设置为不能点击 */

/* flex & grid ----------------------------------------------------------------- */

.rowflex {display:flex;}
.colflex {display:flex; flex-direction:column;}
.maincenter {justify-content:center;}		/* 主轴的对齐方式 默认左对齐 */
.mainbetween {justify-content:space-between;} 	/* 两端对齐 */
.mainaround {justify-content:space-around;}	/* 子元素margin */
.mainevenly {justify-content:space-evenly;}	/* 元素间及和边界一致 */
.crosscenter {align-items:center;}		/* 交叉轴的对齐方式 */
.crossstart {align-items:flex-start;}		/* 子元素上/左对齐 */
.crossend {align-items:flex-end;}			/* 子元素下/右对齐 */

.selfend {align-self: flex-end;}		/* 子元素设置跳出限制 align-self: flex-start|flex-end|center|stretch|baseline */
.cellgrid {display: grid; place-items:center;}	/* 上下左右都在中间 */

/* 文本 ----------------------------------------------------------------- */

.bold_sz {font-weight:bold;}
.cntr_sz {text-align:center;}
.vert_sz {writing-mode:vertical-rl;}

.state_08 {font-size:0.8rem;}
.state_09 {font-size:0.9rem;}
.state_10 {font-size:1.0rem;}
.state_11 {font-size:1.1rem;}
.state_12 {font-size:1.2rem;}

.state_14 {font-size:1.4rem;}
.state_15 {font-size:1.5rem;}
.state_16 {font-size:1.6rem;}

.state_18 {font-size:1.8rem;}
.state_20 {font-size:2.0rem;}

/* unicode字符 ----------------------------------------------- */

/* https://symbl.cc/cn/unicode-table/ */
/* uni方式需要字库支持 浏览器兼容并不好 不建议使用 */

.uni,.uni::before {display:inline-block; font-style:normal; font-size:1.1rem;}

.uni_question::before {content: "\2754";}

.uni_triright::before {content: "\23f5";}
.uni_trileft::before {content: "\23f4";}
.uni_tritop::before {content: "\23f6";}
.uni_tribottom::before {content: "\23f7";}
.uni_tricenter::before {content: "\23fa";}

/* 用boder方式画的三角形 <i class="brd_triright"></i> */

.brd_triright,.brd_trileft,.brd_tritop,.brd_tribottom {display:inline-block; height:0px; width:0px; border:0.425em solid transparent;}
.brd_triright {border-left-color:currentColor;}
.brd_trileft {border-right-color:currentColor;}
.brd_tritop {border-bottom-color:currentColor;}
.brd_tribottom {border-top-color:currentColor;}
.brd_tricenter {display:inline-block; height:0.85em; width:0.85em; border:0px solid transparent; background-color:currentColor; clip-path: circle(50%);}
.brd_tricentersmall {display:inline-block; height:0.8em; width:0.8em; border:0px solid transparent; background-color:currentColor; clip-path: circle(35%);}

/* 将一个svg按当前颜色投影 <img class="dropsvg" src="xxx.svg" /> */

.dropsvg {filter: drop-shadow(10000em 0em currentColor); transform: translateX(-10000em);}

/* 个性化颜色 ----------------------------------------------------------------- */

:root {

	/* infra deep dark <- semidark,semilight -> light pale ultra */

	--gold_infradark: #362100;
	--gold_deepdark: #663E01;
	--gold_dark: #865201;
	--gold_semidark: #C27701;
	--gold_semilight: #DAA520;
	--gold_light: #FFD700;
	--gold_palelight: #FFEC00;
	--gold_ultralight: #FFFF00;

	--gray_infradark: black;
	--gray_deepdark: #121212;
	--gray_dark: #232323;
	--gray_semidark: #353535;
	--gray_semilight: #ABABAB;
	--gray_light: #DCDCDC;
	--gray_palelight: #EFEFEF;
	--gray_ultralight: white;

}

/* 过渡色边框 ----------------------------------------------------------------- */

.gradient_border_gold {
	border: 1px solid;
	border-image: linear-gradient(to right bottom, var(--gold_light), var(--gold_infradark)) 1;
}

.gradient_border_gray {
	border: 1px solid;
	border-image: linear-gradient(to right bottom, var(--gray_light), var(--gray_infradark)) 1;
}

/* 适应屏幕布局 ----------------------------------------------------------------- */

.newsection {width:100%;}
.sectionpadding {padding:10px 0px;}

.newframe {width:100%; max-width:var(--frame_max_width); margin:auto;}	/* 注意这里有个变量应该在个性化里定制 */
.framepadding {padding:20px 20px;}

.newline {width:100%;}
.linepadding {padding:10px 10px;}

.newblock {width:100%;} /* block和line逻辑一致 在小屏模式下 block即line */
/*.subblock {} */ 	/* subblock没有full 可以默认lineflex之下小屏自动拉伸 */
.blockfull {width:100%; margin:auto;} /* 用在 subblock 模式 */
.blockmargin {margin:5px 10px;}
.blockpadding {padding:20px 0px;}

.newslide > img {width:100%; vertical-align:bottom;} /* image的尺寸 由slide决定 */
/*.imagekeep > img {} */
.imagenokeep > img {opacity:0;}
.slidefull {background-repeat:no-repeat; background-position:center center; background-size:100% 100%;}
.slidecover {background-repeat:no-repeat; background-position:center center; background-size:cover;}
.slidecontain {background-repeat:no-repeat; background-position:center center; background-size:contain;}

@media screen and (min-width:800px){
	.showmax {}	/* 在大屏幕下显示 在小屏幕下不显示 */
	.showmin {display: none;}	/* 在小屏幕下显示 在大屏幕下不显示 */
	.lineflex {display:flex;}	/* 在大屏幕下横排 没有指定main 高度方向stretch */

}

@media not screen and (min-width:800px){
	.showmax {display: none;}
	.showmin {}
	.lineflex {display:flex; flex-direction:column;}

}

/* -- frame structure --

newsection // 一般个性化padding:10px 0px;
	newframe // 中间对齐 设置最大宽度 一般个性化 padding:20px 20px;
		newline lineflex (rowflex) // 一般个性化maincenter crosscenter 不需要lineflex时用rowflex简化规则
			newblock // 最小独个单元 小屏幕的时候独占一行 默认没有任何的css格式 一般个性化 blockfull
				header
				description
		newline lineflex (rowflex)
			newblock
				subblock
					bunch
			newblock
			...
		newline lineflex (rowflex)
		...

*/

/* end ----------------------------------------------------------------- */