/***************************************************
功能: 基础风格
版本: 0.1
作者: Tony
日期: 20221220
说明: 约定风格模块分为4类,结构类/对象类/风格类/定位类
	  结构类一般用于定义框架的位置大小等,以:div_开头
	  对象类一般用于定义组件对象的大小等,以:obj_开头
	  风格类一般用于定义对象的风格,如红色字,圆形按钮,动画效果,以:eff_开头
	  定位类一般用于对象的定位,如按钮左右排,以:pos_开头
注意: 如果有重叠属性,则写在后面的风格取代前面的风格
***************************************************/


/**************************************************/
/* HACK */
/**************************************************/
*{
	-webkit-tap-highlight-color: transparent;   /*设置为透明,解决safari点击事件闪现黑灰色*/
}

/**************************************************/
/* 全局 */
/**************************************************/

html,body
{
	margin: 0 auto;
	font-size: 16px;	/*基准字体尺寸*/
	font-family: Cambria, Arial, Tahoma, Verdana, Consolas;
	line-height: 180%;
	text-size-adjust: none;	/*禁止调整字体大小*/
	-webkit-text-size-adjust: 100%;	/*禁止safari调整字体大小*/
}

a:link,a:visited 
{
	color: inherit;
	text-decoration: none;
	box-decoration-break: clone; /*使带圆角的背景独立*/
	-webkit-box-decoration-break: clone;
}

a:hover
{
	text-decoration: underline;
}

a:active 
{
	color: #999999;
} 

input,select,textarea
{
	font-size: 1em;
	font-family: inherit;
	border-radius: 5px;	/*圆角半径*/
	box-sizing: border-box; /* 边框占位 */
	border: solid 2px;	/*边框线条*/
	background-color: transparent;
}

input[type="radio"]{
    height: 1em;
    width: 1em;
}

button
{
	font-size: 1em;
	font-family: inherit;
	padding: 5px;
	border: none;
	border-radius: 5px;/*圆角半径*/
}

img
{
	border-radius:5px;	/*圆角半径*/
}

h1,h2,h3,h4
{
	line-height: 120%;
/*	display: inline-block; /*防止影响标签行高*/
}

h4
{
	display: inline;
}

hr
{
	/* 两端渐变 */
	background: linear-gradient(to right,rgba(255,255,255,0), #eeeeee, rgba(255,255,255,0));
    border: 0;
    padding: 1px;
}

draggable
{
	cursor: move;
}

/**************************************************/
/* 基础定位 */
/**************************************************/

/*清除上个div的浮动*/
.clear
{
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* 页面主内容块 */
.div_page_main
{
	position: absolute;	/*必须设置,才会正常覆盖*/
	background-color: #eeeeee;
	width: 100%;
/*	height: 100%;*/
/*	min-width: 800px;*/
}

/*---------------- 页面模块定位 --------------*/

/* 左边栏 */
.div_side_left
{
	float: left;
	width: 70%;
}

/* 右边栏 */
.div_side_right
{
	float: right;
	width: 30%;
}

/* 水平居中 */
.div_middle
{
	margin: 0 auto;
	max-width: 1100px;	/* 控制主体宽度 */
	box-sizing: border-box; /* 边框占位 */
}

/* 居左 */
.div_left
{
	float: left;
	width:50%; 
	text-align:left;
	box-sizing: border-box;
}

/* 居右 */
.div_right
{
	float: right;
	width:50%; 
	text-align:right;
	/*	word-break: keep-all;*/ /* 空格断行 */
	word-break: break-word;	/* 单字断行 */
	box-sizing: border-box;
}

/* 头部块-定位 */
.div_header
{
	width: 100%;
}

/* 导航块-固定 */
.div_nav_fix
{
	position: fixed;
	z-index: 1;
	_position: absolute; /* hack 支持ie显示 */
	top: 0px;
	width: 100%;
	display: none;
	background-color: #ffffff;
}

/* 导航块-定位 */
.div_nav
{
	width: 100%;
}

/* 导航块-主体 */
.div_nav_main
{	
	position: relative;
	padding: 1em;
}

/* 内容块-定位 */
.div_article
{
	width: 100%;
}

/* 列表清单块 */
.div_list
{
	float: left;
	width: 50%;
	overflow:hidden;
}

/* 页脚块-定位 */
.div_footer
{
	width: 100%;
	background-color: white;
}

/* 页脚块-固定 */
.div_footer_fix
{
	position: fixed;
	_position: absolute;/* hack 支持ie显示 */
	width: 100%;
	height: 100%;
	display: block;	
}

/* 页脚块-主体 */
.div_footer_main
{	
	padding: 1em;
}

/* 页脚块-标题 */
.div_footer_title
{
	vertical-align:middle;
	line-height: 120%;
	margin-bottom: 2em;	/* 底部留白 */
}

/* 满宽内居中(最大宽度,默认100%) */
.div_center_max {
	display: grid;
	place-items: center center;
	height: 100%;
	min-height: 1.5em;
}

/* logo */
.div_logo
{
	margin-right: 1em;
}

/*---------------- 分区块 --------------*/

/* 分区块-定位 */
.div_region
{
	width: 100%;
}

/* 分区块-主体内容 */
.div_region_main
{	
	position: relative;
	padding: 5px;
}

/* 分区块-专题块 */
.div_region_special
{
    overflow: hidden;
}

/* 分区块-标准块*/
.div_region_normal
{
    overflow: hidden;
}

/*---------------- 弹窗 --------------*/

/* 弹窗容器 */
.div_pop
 {
	position: absolute;
}

/* 全屏遮罩 */
.div_cover
{
	position: fixed;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0px auto;	
	background-color: #333333aa;
}

/*画布*/
.div_canvas
{
	position: relative;
	padding: 2em;
    box-sizing: border-box;/* 边框占位 */
	border-radius: 5px;	/* 圆角边框 */
	height: inherit;
	background-color: #ffffff;	/*白色背景*/	
	border: 1px solid #ffffff88;	/*亮色边框*/
}

/*画布-顶部*/
/*垂直居中*/
.div_canvas_top
{
	text-align: left;
	display: flex;
	align-items: center;
}

/*画布-底部*/
.div_canvas_bottom
{
	text-align: left;
}

/*画布-左部*/
.div_canvas_left
{
	float: left;
	width: 1em;
}

/*画布-右部*/
.div_canvas_right
{
	float: right;
	width: 1em;
}

/*画布-中部*/
.div_canvas_middle
{
	position: relative;/*20250226测试层级显示*/
/*	max-height: 500px;*/
    overflow-y: auto;
    padding: 5px;
}

/*带背景*/
.div_topic_bg
{
	position: absolute;
	height: 300px;
	width: 100%;
	background-size: cover;
}

/**************************************************/
/* 对象定义 */
/**************************************************/

/* 对象启用 */
.obj_enabled
{
	pointer-events: auto;	/*不可用*/
	color: auto;
}

/* 对象禁用 */
.obj_disabled
{
	pointer-events: none;	/*可用*/
	color: silver;
}

/* logo img */
.obj_avatar_img{
	width: 80%;
}

/* tag img */
.obj_tag_img{
	width: 2em;
}

/* logo img */
.obj_logo_img{
	height: 2em;
}

/* 按钮-默认,失效效果 */
.obj_btn,.eff_btn_inactive
{
	padding: 10px;
	cursor: pointer;	/* 手型图标 */
	user-select: none;	/* 禁止选中文字 */
	white-space: nowrap; /*空格不换行*/
	border-radius:5px;	/* 圆角半径 */
	border: none;
}

/* 按钮-悬停,激活效果 */
.obj_btn:hover,.eff_btn_active
{
	background-image: linear-gradient(to bottom right,red,black);
	background-repeat: repeat-x;
	background-size: 1px 100%;
	background-position: 0 100%;
	box-shadow: 1px 1px 3px silver;
	color: white;
}

/* 按钮-激活 */
.obj_btn:active
{	
	background-image: linear-gradient(to bottom right,black,black);
	background-repeat: repeat-x;
	background-size: 1px 100%;
	background-position: 0 100%;
/*	box-shadow: 1px 1px 3px silver;*/
	color: white;
}

/* 头部标题块 */
.obj_title
{
	position: relative;
/*	display:table-cell; */
/*	vertical-align:middle;*/
/*	font-size: 1em;*/
	line-height: 120%;
}

/* 头部指示图片 */
.obj_title_img
{
	background-image: url("/ebody/resource/style/default/image/common/sun.png");
    position: absolute;
    height: 240px;
    width: 240px;
    top: -100px;
    left: -100px;
    background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* 横向分隔线-红黑 */
.obj_line_h1
{
	position: relative;/*必须设置,块阴影才会正常覆盖*/
	width: 100%;
	height: 10px;
	/*border: none; */
	border-color: silver; 
	background: silver; 
	background-image: linear-gradient(to bottom right,red,black);
	/*box-shadow: 2px 2px 5px silver;*/
}

/* 横向分隔线-透明 */
.obj_line_padding
{
	width: 100%;
	height: 5px;
	background-color: transparent;
}

/* 正文內容 */
.obj_data 
{
/*	vertical-align: top;*/
	empty-cells: show;
	white-space: pre-wrap;/*原样显示换行及空格*/
	word-break: break-word;/*行文字超出换行或空格换行*/
	line-height: 180%;
}

/* 标记內容 */
.obj_tag
{
	font-size: 0.8em;
	line-height: initial;
	color: silver;
	border-radius: 5px;
}

/* 备注标记-失效状态 */
.obj_tag_inactive,.obj_tag_inactive img,.obj_tag img /*后代选择器选择.obj_tag里的img标签对象*/
{
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
/*	border-radius: initial;*/
	border: solid red;
	padding: 2px;
}

/* 备注标记-激活状态 */
.obj_tag_active,.obj_tag_active img,.obj_tag img:hover	/*后代选择器选择.obj_tag里的img标签对象的hover事件*/
{
	filter: none;
	-webkit-filter: none;
}

/* 次要数据格式,一般用于提示 */
.obj_tips
{
/*	white-space: break-spaces;*//*空格换行*/
	word-break: break-word;/*行文字超出换行或空格换行*/
	font-size: 0.8em;
	color: silver;
	line-height: initial;
	border-radius: 5px;
}

/* 验证码 */
.obj_verify
{
	background-repeat: no-repeat;
	background-position: right center; 
	background-size:30% 100%; 
}

/* 按钮处理中的效果 */
.obj_btn_inprocess {
	position: relative;
	z-index: 1;
	color: #fff;	
	overflow: hidden;
/*	border-radius: 5px;*/
	
}

/* 定义对象中的伪元素占位符(后置) */
.obj_btn_inprocess::after {
	position: absolute;
	z-index: -1;
	content: "";
	border-radius: 3px;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	background-color: #000;	
	top: 2px;
	left: 2px;	
}

/* 定义对象中的伪元素占位符(后置) */
.obj_btn_inprocess::before {
	position: absolute;
	z-index: -1;
	content: "";
	width: 100%;
	height: 500%;
	background-color: #8f3;	
	top: 50%;
	left: 50%;	
	animation: eff_inprocess 3s infinite linear; /* 调用并执行关键帧作为动画 */
}

/*搜索输入框组件*/
.obj_input_search{
	position:relative; 
	display: inline-flex;
	box-sizing: border-box; /* 边框占位 */
	border:solid; 
	padding:5px; 
	border-radius: 5px; 
	width:100%;
}

/*输入框*/
.obj_input{
	padding:0.5em;
	width:100%;
}

/*可收展对象*/
.obj_slide
{
/*	max-height: 500px;*/
    overflow-y: auto;
    padding: 5px;
}

/**************************************************/
/* 形态风格 */
/**************************************************/


/*---------------- 背景 --------------*/

/* 背景图固定填充 */
.eff_bg_cover
{
	background-attachment: fixed;	/*背景图固定*/
    background-size: cover;	/*背景图填充窗口*/
	background-color: #eeeeee;
}

/* 无背景颜色 */
.eff_bg_nocolor{
	background-color: transparent;
}

/*窗口激活*/
.eff_pop_active{
	filter: initial;
}

/*窗口失效*/
.eff_pop_inactive{
	filter: contrast(0.5);
	border: solid silver 1px;
}

/*窗口上方*/
.eff_pop_hover{
	border: solid red 1px;
}

/*无边框效果*/
.eff_noborder{
	border:none; 
	outline:none;
}

/*执行中的遮罩*/
.eff_mask_loading{
/*	display: inline-block;*/
/*	opacity: 0.3;	整个对象透明*/
/*	color: transparent;	仅让字体透明*/
	color: #00000030;	/*仅让字体透明*/
	-webkit-text-fill-color: #00000030; /*仅让字体透明,兼容safari*/
    background-image: url("/ebody/resource/style/default/image/loading/01.gif");/*加载中的状态图片*/
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/*---------------- 区块 --------------*/

/*超出隐藏*/
.eff_div_overhide
{
	overflow: hidden;
}

/* 单行超出显示省略号(仅用于内联标签,如span) */
.eff_span_ellipsis
{
/*	font-size:1.1em;*/
/*	font-weight:bold; */
/*	text-align:center;*/
	display:inline-block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/* 多行超出显示省略号(仅用于块标签,如div) */
/* -webkit-是webkit内核的前缀(Chrome) */
.eff_div_ellipsis
{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;/*将对象作为弹性伸缩盒子模型显示*/
	-webkit-line-clamp:1; /*表示超出2行时,在最后显示省略号*/
	-webkit-box-orient:vertical;/*设置盒子的子元素的排列方式*/
}

/*错误提示效果*/
.eff_tips_error
{
    border: solid 1px red;
    color: red;
    background-color: yellow;
	padding: 0.5em;
	display: inline-block;
}

/*成功提示效果*/
.eff_tips_sccuss
{
	border: solid 1px green;
	color: green;
	background-color: lightgreen;
	padding: 0.5em;
	display: inline-block;
}

/*警告提示效果*/
.eff_tips_alert
{
	border: solid 1px gold;
	color: #666666;
	background-color: yellow;
	padding: 0.5em;
	display: inline-block;
}

/*一般提示效果*/
.eff_tips_normal
{
	border: solid 1px #eeeeee;
	color: silver;
	background-color: transparent;
	padding: 0.5em;
	display: inline-block;
}

/*默认无边框提示效果,一般用于提示说明或备注*/
.eff_tips
{
	border: solid 1px transparent;
	color: silver;
	background-color: transparent;
	padding: 0.5em;
}

/*---------------- 按钮 --------------*/

/* 默认按钮效果 */
.eff_btn
{
	background-color: #eeeeee;
	margin: 2px;
}

/* 无色按钮效果 */
.eff_btn_nocolor{
	background-color: transparent;
	margin: 2px;
}

/* 圆形按钮效果 */
.eff_btn_round
{	
	display: inline-block;
/*	overflow: hidden;*/
	background-color: #eeeeee;
	border-radius: 50%;
	line-height: 100%;
	width: 1em;
	text-align: center;
}

/* 全宽按钮效果 */
.eff_btn_max{
	background-color: #eeeeee;
	width: 100%;
}

/* 将图片中的白色透明与背景融合*/
.eff_img_mix{
mix-blend-mode: multiply;
}

/*---------------- 通用 --------------*/

/* 内容居中 */
.eff_inner_center{
	display: grid;
    place-items: center center;
	text-align: center;
}

/* 圆形 */
.eff_round
{	
	display: inline-block;
	overflow: hidden;
	border-radius: 50%;
	line-height: 100%;
	width: 1em;
	text-align: center;
}

/* 特别效果-底部红黑横条 */
.eff_fav_highlight
{
	background-image: linear-gradient(to bottom right,red,black);
	background-repeat: repeat-x;
	background-size: 1px 30%;
	background-position: 0 100%;
	padding-bottom: 1em;
}

/* 标记关键字 */
.eff_keyword_tag
{
	padding:0.5em;
	margin:2px;
	line-height: 120%;
	max-width: 10em; /* 最多10个字 */
}

/* 标题高亮-底部横条 */
.eff_title_highlight
{	
	background-image: linear-gradient(to bottom right,yellow,yellow);
	background-repeat: repeat-x;
	background-size: 1px 30%;
	background-position: 0 100%;
}

/* 文字阴影效果 */
.eff_text_shadow
{
	text-shadow: 2px 2px 5px silver;
}

/* 块阴影效果 */
.eff_box_shadow
{
	box-shadow: 2px 2px 5px silver;
}

/* 半透明效果 */
.eff_hyaline
{	
	opacity: 0.3;
	filter: alpha(opacity=30);
}

/* 反色 */
.eff_inverted {
    filter: invert(100%);
}

/* 原色 */
.eff_normal {
    filter: invert(0%);
}

/*背景模糊*/
.eff_blur
{
	background-color: #ffffff80;/*背景白色透明*/
	backdrop-filter: blur(5px);	/*背景模糊*/
}

/*背景模糊*/
.eff_blur_cover
{
	backdrop-filter: blur(2px);	/*背景模糊*/
}

/*边框*/
.eff_border
{
	border: solid;
	border: solid 1px #00000088;
    box-shadow: 0 0 12px 3px #00000088;
}

/*隐藏对象*/
.eff_hide
{
	display: none;
}

/*显示对象*/
.eff_show
{
	display: initial;
}

/*小号字*/
.eff_small_font
{
	font-size:0.5em;
}

/*大号字*/
.eff_big_font
{
	font-size:2em;
}

/* 定义动画关键帧 */
@keyframes eff_inprocess {
	from {
	  transform: rotateZ(0);
	  transform-origin: left top;
	}
	to {
	  transform: rotateZ(360deg);
	  transform-origin: left top;
	}
}

/**************************************************/
/* 对象定位 */
/**************************************************/

/* 右上 */
.pos_right_top {
	position: absolute;
	right: 1em;
	top: 1em;
}

/* 右下 */
.pos_right_bottom {
	position: absolute;
	right: 2em;
    bottom: 1.5em;
}

/*左下*/
.pos_left_bottom {
	position: absolute;
	bottom: 2em;
}

/*左侧*/
.pos_left {
	float: left;
}

/*右侧*/
.pos_right {
	float: right;
}

/* 对象居中 */
.pos_center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);	
}