@charset "UTF-8";
/*
 @Name: 东源汇金CSS模板 简称D.CSS
 @Author: 王昭东
 @Site: www.bjdyhj.cn
 可以通过@import url("d.css") 方式导入到新的项目中
*/
/* 初始化html标签与全局变量 */
:root {
  /* 字体 */
  --font: 微软雅黑 14px;
  /* 边框 */
  --border: 1px solid #CCC;
  /* 按钮配置 */
  /* 颜色 */
  --but_color:#FFF;
  /* 圆角 */
  --but_radius: 3px;
  /* 高度 */
  --but_height:36px;
  /* 文字 */
  --but_font:14px bold 幼圆;
  /* 边框 */
  --but_border: 1px solid transparent;
  /* 外边距 */
  --but_margin: 10px 0;
  /* 内边距 */
  --but_padding: 0 16px;

  /* 单元区配置 */
  /* 外边距 */
  --item_margin: 0 0 10px 0;
  /* lable */
  --padding: 10px;
  /* 布局设置 */
  /* 工作区宽度 */
  --main_width: 100%;
  /* 工作区高度 */
  --main_height: calc(100% - 90px);
  /* 列表标题 */
  --title_mode: difference;
  --title_color: #DDD; 
}

/* 父类，引用父类之后可以放置CSS本地冲突 */
body{
  text-align: left;
  clear: both;
  font: var(--font);
}
/* 简洁样式 */
.r{text-align: right;}
.c{text-align: center;}
.l{text-align: left;}
.u{border-bottom: var(--border);}
.b{font-weight:bold;}
.none{display:none;}
.block{display:block;}
.hover{background: #EEE;}
.border{border: var(--border);}
.radius-l{border-radius: var(--but_radius)  0 0 var(--but_radius);}
.radius-r{border-radius: 0 var(--but_radius) var(--but_radius) 0;}
.radius-t{border-radius: var(--but_radius)  var(--but_radius) 0 0;}
.radius-b{border-radius:0 0 var(--but_radius) var(--but_radius);}
.iframe{
  display: block;
  width: var(--main_width);
  height: var(--main_height);
	border: 1px dashed #3366CC;
	border-radius: 10px;
	padding: 0;
	overflow: scroll;
	box-sizing:border-box;
}
.img{
  padding: 0.25rem;
  background-color: #FFF;
  border: var(--border);
  border-radius: var(--but_radius);
}
.txt{
  font-size: 14px;
  color: #333;
}
/* 超链接样式 */
a{
  text-decoration: none;
  color: #333;
}
a:hover{
  color:#000;
  text-decoration: none;
}

/*自定义标签*/
md,code,csv,list,page,mind,graph,chart,flow{
  display: block;
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--but_radius);
  border: var(--border);
  padding: 5px;
}
/* 分页 */
page{
	background-color: #F8F8F8;
  min-height: var(b);
	padding: 5px;
	box-sizing: border-box;
  margin-bottom: 5px;
}

/*
布局样式 flex
*/
.f{
  display: flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-direction: row;
  flex-wrap: wrap;
}
.f .flex{
  margin-right: 5px;
  box-sizing: border-box;
}
.f .flex0{
  box-sizing: border-box;
}
.f .flex:last-child{
  margin-right: 0;
}
.f .col{
}
/* 顶部菜单 */
.header{
  top:0;
  left: 0;
  width: 100%;
  background: #FFF;
  opacity: 0.8;
  z-index: 9999;
}
/* 左侧菜单 */
.aside-l{
  position:fixed;
  box-sizing: border-box;
  top:0;
  left: 0;
}
/* 右侧菜单 */
.aside-r{
  position:fixed;
  box-sizing: border-box;
  right: 0;
}
/* 浮动面板 */
.article{
  position: fixed;
  box-sizing: border-box;
  top:0;
  left:0;
}
/* 工作区 */
.main{
  position: fixed;
  box-sizing: border-box;
  top:0;
  left:0;
}
/* 底部菜单 */
.footer {
	position: fixed;
	bottom: 0px;
  width: 100%;
  box-sizing: border-box;
  left: 0;
  padding:0 5px;
}

/*
导航样式
*/
/* 固定导航 */
.menu{
  user-select: none;
  display:table;
  width: 100%;
}
.menu .h5{
  display: none;
}
.menu .li{
  display:table-cell;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  font-size: 18px;
}
.menu .li a:hover{
  border-bottom: 3px solid #666;
}
.menu .h5-box{
 display: none;
}
.menu .h5-box:checked  ~.li{
  display: block;
  padding: 5PX;
  text-align: left;
  cursor: pointer;
  line-height: normal;
  box-sizing: border-box;
  width: 100%;
  border-top: #DDD 1px dashed ;
}

@media screen and ( max-width: 500px){
  .dialog-content {
    top: 20%;
    width: auto;
  }
  .menu .h5 {
    display: block;
    cursor: pointer;
    text-align: center;
    font-size: 18px;
    padding:  5px 0;
  }
  .menu .li {
    display: none;
  }
}
/* 弹性导航 */
.logo{
  height: var(--but_height);
  vertical-align:middle;
}

.nav{
  display: flex;
  width: 100%;
  margin: 0;
  text-align: center;
  flex-wrap: nowrap;
}
.nav .li{
  background: #EEE;
  width: 100px;
  text-align: center;
}
.nav .li:hover{
  background: #DDD;
}
.tabs{
  background: #FFF;
  user-select: none;
  cursor: pointer;
  border-bottom: var(--border);
}
.tabs-x{
  white-space: nowrap;
  overflow-x: visible;
  overflow-y: hidden;
  max-width:calc(100vw - 10px);
}
.tabs .li{
  display: inline-block;
  padding: 0 5px;
  border: var(--border);
  border-bottom: 0px;
  margin-bottom: -1px;
  border-radius: var(--but_radius) var(--but_radius) 0 0;
  line-height: var(--but_height);
  height: var(--but_height);
}
.tabs .active{
  border-bottom: 1px solid #FFF;
  background-color: #FFF;
}
.tabs-box{
  background: #FFF;
  padding: 5px;
  border: var(--border);
  border-top: 0;
  border-radius:0 0 var(--but_radius) var(--but_radius);
}
.key{
  display: inline-block;
  cursor: pointer;
  border: 1px dotted #999;
  border-radius: var(--but_radius);
  height: var(--but_height);
  line-height: var(--but_height);
  padding:0 5px;
}
key{
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  height: var(--but_height);
  width: var(--but_height);
  line-height: var(--but_height);
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--but_radius);
}
key:hover, .key:hover{
  border: var(--border);
  background: #CCC;
}
.keybord{
  padding: 0 5px;
  height:100%;
  border-right: 1px solid #CCC;
  background: #EEE;
}
.keybord:hover{
  background: #DDD;
}
/*
表单样式 
*/
/* 默认按钮 */
.but{
  border-radius: var(--but_radius);
  height: var(--but_height);
  line-height: var(--but_height);
  font: var(--but_font);
  border: var(--but_border);
  margin: var(--but_margin);
  padding: var(--but_padding);
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  border-color: #DDD;
  background: #FDFDFD;
  box-sizing: border-box;
}
.but:hover{
  animation: blink 0.3s;
  text-shadow: 0 0 2px  #ccc;
}
/* 原始按钮 */
.primary{
  background-color: #07F;
  color: #FFF;
}
/* 成功按钮 */
.success{
  color: #FFF;
  background-color: #098;
}
/* 暖色按钮 */
.warning{
  color: #FFF;
  background-color: #FB0;
}
/* 警告按钮 */
.danger{
  color: #FFF;
  background-color: #F62;
}
/* 禁用按钮 */
.disabled{
  border-color: #EEE!important;
  background-color: #FBFBFB!important;
  color: #DDD!important;
  cursor: not-allowed!important;
}
/* 浏览按钮 */
.file-box input[type="file"]{
  display: none;
}
/* 圆形按钮 */
.circular {
	display: inline-block;
	width: var(--but_height);
	height:var(--but_height);
	box-sizing: border-box;
  border: var(--border);
	border-radius: calc(100% / 2);
	cursor: pointer;
  opacity: 0.8;
}
.circular:hover {
	animation: blink 0.3s;
  opacity: 1;
}
.input{
  height: var(--but_height);
  border: var(--border);
  line-height: var(--but_height);
  border-radius: var(--but_radius);
  margin: 0;
  box-sizing: border-box;
}
.input-c{
  height: var(--but_height);
  line-height: var(--but_height);
  border: var(--border);
  border-radius: 0;
  border-bottom: 0;
  border-top: 0;
  margin: 0;
  box-sizing:border-box;
}
.input-c:hover{
  cursor: pointer;
  background: #EEE;
}
.box{
  padding: 10px;
  display: inline-table;
  text-align: center;
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 10px;
  border: var(--border);
  border-radius: var(--but_radius);
}
.box:hover{
  background:#EEE;
}
/* 动画效果 */
@keyframes blink {
  20% {
  opacity: 1;
  }
  100% {
  opacity: 0.5;
  }
}
@keyframes sort-move {
  25% {
  opacity: 0.8;
  }
  50% {
  opacity: 0.2;
  }
  25% {
  opacity: 1;
  }
}
@keyframes come {
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.8;
  }
}

/* 单元区 */
.item{
  margin: var(--item_margin);
  display:table;
  width: 100%;
  border-spacing: 0;
  padding: 0;
  box-sizing: border-box;
  clear: both;
}
/* 左侧单元格 */
.item .label{
  cursor: pointer;
  display:table-cell;
  padding: 10px;
  width: 80px;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 单元格 */
.item .inline{
  display:table-cell;
  width: auto;
  border-spacing: 0;
  padding: 0;
  margin: 0;
}

/*文本框*/
.item .text{
  height: var(--but_height);
  line-height: var(--but_height);
  border-radius: var(--but_radius);
  border: var(--border);
  display: block;
  width: 100%;
  padding-left: 10px;
  box-sizing: border-box;
  outline: none;
}

.item .but-l{
  height: var(--but_height);
  line-height: var(--but_height);
  border: var(--border);
  border-radius: var(--but_radius) 0 0 var(--but_radius);
  background: #EEE;
  display:table-cell;
  text-align: center;
  cursor: pointer;
  width: auto;
}
.item .but-c{
  background: #FFF;
  border-top:var(--border);
  border-bottom: var(--border);
  display: table-cell;
  padding: 0;
  width: auto;
}
.item .txt-l{
  border-left: var(--border);
  border-radius: var(--but_radius) 0 0 var(--but_radius);
}
.item .txt-c{
  outline: none;
  padding:0 5px;
  box-sizing: border-box;
  border: 0;
  height: var(--but_height);
  line-height: var(--but_height);
  display:table-cell;
  width: 100%;
}
.item .txt-r{
  border-right: var(--border);
  border-radius:0 var(--but_radius) var(--but_radius) 0;
}
.item .but-r{
  user-select: none;
  height: var(--but_height);
  line-height: var(--but_height);
  border: var(--border);
  border-radius: 0 var(--but_radius) var(--but_radius) 0;
  background: #EEE;
  display:table-cell;
  text-align: center;
  cursor: pointer;
  width: 100%;
}
.item .but-l:hover, .item .but-r:hover{
  background: #DDD;
  color: #222;
}

/* 自动行高 */
.item .div-l{
  border: var(--border);
  border-radius: var(--but_radius) 0 0 var(--but_radius);
  background: #FFF;
  display:table-cell;
  text-align: center;
  width: auto;
  vertical-align: bottom;
}
.item .div-c{
  background: #FFF;
  border-top:var(--border);
  border-bottom: var(--border);
  display: table-cell;
  width: auto;
}
.item .div-r{
  border: var(--border);
  border-radius: 0 var(--but_radius) var(--but_radius) 0;
  background: #FFF;
  display:table-cell;
  text-align: center;
  vertical-align: bottom;
  width: auto;
}

/*下拉框*/
.select{
  border: var(--border);
  height: var(--but_height);
  border-radius: var(--but_radius);
  display: block;
  width: 100%;
  box-sizing: border-box;
  outline: none;
}
/* 选项列表 */
.option{
  background-color: #FFF;
  border: var(--border);
  border-radius: var(--but_radius);
}
.option .li{
  cursor: pointer;
  display: block;
  line-height: normal;
  padding: 5px;
  border-bottom: var(--border);
}
.option .li:hover{
  background: #DDD;
}
.option .li:last-child{
  border-bottom:0;
  border-radius:0 0 var(--but_radius) var(--but_radius);
}
.option .li:first-child{
  border-radius: var(--but_radius)  var(--but_radius) 0 0;
}
.option .li a{
  overflow: hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.option .sub-menus{
  display: none;
  border-bottom: 1px solid #CCC;
  border-top: 1px solid #CCC;
  border-left: 5px solid #CCC;
  opacity: 0.8;
}

/* 列表 */
.lists {
  width: 100%;
  min-height: 100%;
  background: fixed;
  background-size: cover;
  background-repeat:no-repeat;
  background-position: center center;
  border-radius: var(--but_radius);
}

.lists table {
  width: 100%;
  border-radius: var(--but_radius);
}

.lists table .td:first-child {
  border-radius: 0 var(--but_radius) 0 var(--but_radius);
}

.lists tr .td {
  position: relative;
  height: var(--but_height);
  border-bottom: 1px dashed #DDD;
}

.lists .td:hover {
  color: #000;
}

.lists tr td .percent {
  position: absolute;
  width: 0%;
  top: 0;
  left: 0;
  height: var(--but_height);
  line-height: var(--but_height);
  background: #F8F8F8;
  z-index: 0;
  cursor: w-resize;
}
.lists tr td .percent:hover {
	opacity:0.5;
}
.lists tr td .show {
  padding:0 5px;
	position: absolute;
  height: var(--but_height);
  line-height: var(--but_height);
  left: 0;
  top: 0;
}
.lists td .show .move{
  cursor: move;
  user-select: none;
  text-align: center;
  height: var(--but_height);
  line-height: var(--but_height);
  width: var(--but_height);
  padding: 0 5px;
  opacity: 0.5;
}
.lists td .show .move:hover{
  opacity: 1;
}
.lists tr td .show:hover .title{
  mix-blend-mode: normal;
  color: #000;
}
.lists tr td .show:hover{
  background: #F8F8F8;
  border-radius: var(--but_height);
}
.lists td .title{
  mix-blend-mode: var(--title_mode);
  color: var(--title_color);
  cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 列表级别 */
.lists .level{
  color: #F30;
  margin-left: 5px;
}
.lists .l0 {
	opacity: 0;
}
.lists .l1 {
	opacity: 0.2;
}
.lists .l2 {
	opacity: 0.4;
}
.lists .l3 {
	opacity: 0.6;
}
.lists .l4 {
	opacity: 0.8;
}
.lists .l5 {
	opacity: 1;
}
/* 图书列表 */
.book {
  border: dotted 1px #CCC;
  background-color: #F8F8F8;
  padding: 5px;
  border-radius: var(--but_radius);
  box-sizing: border-box;
  line-height: 1.5em;
}
.books{
	max-height: 235px;
	display: inline-block;
	overflow: auto;
  margin-top: 5px;
  text-align: center;
}
.books .bk{
  display: inline-block;
	text-align: center;
	border: var(--border);
  border-radius: var(--but_radius);
}
.books .bk:hover{
	border: 1px solid #4AD;
  background-color: #4AD;
}
.books .bk .book-img{
	border-radius:var(--but_radius) var(--but_radius) 0 0;
	background: #FFF;
	max-height: 200px;
	overflow: hidden;
}
.books .bk .book-title{
	line-height: 25px;
  padding: 0 5px;
}
.books .bk a:hover{
  color: #FFF;
}

/* 模拟下拉框 */
/* 鼠标经过模式 */
.select-box{
  position:relative;
  background: #EEE;
  border-radius: var(--but_radius);
}
.select-box .select-title{
  cursor: pointer;
  height: var(--but_height);
  line-height: var(--but_height);
  border-radius: var(--but_radius);
  text-align: center;
  color: #333;
}
.select-box .select-title:hover{
  color:#000;
}
.select-box .select-option{
  position: absolute;
  width: 100%;
  background: #EEE;
  cursor: pointer;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: all 1s ease;
  border-radius: var(--but_radius);
}
/* 向上菜单 */
.select-box .up{
  bottom: var(--but_height);
}
.select-box:hover .select-option{
  opacity: 1;
  height: auto;
  display: block;
  z-index: 9999;
}
/* 鼠标点击模式 */
.toggler-box{
  position:relative;
  background: #EEE;
  border-radius: var(--but_radius);
}
.toggler-box .toggler-div{
  display: block;
}
.toggler-box .toggler-title{
  user-select: none;
  cursor: pointer;
  height: var(--but_height);
  line-height: var(--but_height);
  border-radius: var(--but_radius);
  display: block;
  text-align: center;
}
.toggler-box .toggler:checked + .toggler-div .toggler-option{
  position: absolute;
  width: 100%;
  display: block;
  z-index: 9999;
}
.toggler-box .up{
  bottom: var(--but_height);
}
.toggler-box .toggler{
  display: none;
}
.toggler-box .toggler-option{
  display: none;
}

/* 多选框 */
.checkbox{
  display: inline-block;
  clear: both;
  border-radius: var(--but_radius);
  background-color: #07F;
  margin-right: 10px;
}
.checkbox .title{
  padding: 0 8px;
  display: block;
  float: left;
  height: var(--but_height);
  line-height: var(--but_height);;
  color: #FFF;
}
.checkbox input[type='checkbox']{
  display: block;
  height: var(--but_height);
  width: var(--but_height);
  float: left;
  box-sizing: border-box;
  border: 0;
  margin: 0;
}
/* 单选框 */
.radio{
  display: inline-block;
  clear: both;
  margin-right: 10px;
}
.radio .title{
  height: var(--but_height);
  line-height: var(--but_height);
  padding: 0 8px;
  display: block;
  float: left;
  font-weight:600;
}
.radio .title:hover{
  color: #07F;
}
.radio input[type='radio']{
  display: block;
  height: 28px;
  width: 28px;
  float: left;
  box-sizing: border-box;
  margin: 4px 0;
}

/* 区域框 */
.textarea{
  padding: var(--padding);
  display: block;
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--but_radius);
  border: var(--border);
  outline: none;
}

/* 自动增加行高 */
.data-text{
  display: block;
  width:100%;
  min-height: 1em;
  background: #FFF;
  line-height: 1.5em;
  border-radius: var(--but_radius);
  border: var(--border);
  outline: none;
  padding: 5px;
  overflow-x: hidden;
	overflow-y: auto;
	box-sizing: border-box;
}
.data-text:empty::before {
	content: attr(data-text);
  color: #666;
  font-size: 12px;
}
.data-text:focus{
  border: var(--border);
  width: 100%;
}
/* 进度条 */
.progress{
  height: var(--but_height);
}
.progres-box,.progres-left{
  padding:0 0.5em;
  position: relative;
  border: var(--border);
  border-radius: var(--but_radius);
  height: var(--but_height);
  line-height: var(--but_height);
  background: #EEE;
}
.progres-val{
  position: absolute;
  left: 50%;
  width: 50%;
  padding:0 5px;
  background: #07F;
  color: #FFF;
  height: var(--but_height);
  line-height: var(--but_height);
  border-radius: 0;
  padding:0  5px;
  box-sizing: border-box;
}
.progres-left{
  position: absolute;
  left: 0;
  width: 50%;
  border: 0;
  border-radius:var(--but_radius) 0  0 var(--but_radius);
  box-sizing: border-box;
}
.progres-title{
  position: absolute;
  mix-blend-mode: difference;
  color:#FFF;
  left: 0;
  height: var(--but_height);
  line-height: var(--but_height);
  padding:0  5px;
}
.progres-left{
  position: absolute;
  left: 0;
  width: 50%;
  border: 0;
  border-radius:var(--but_radius) 0  0 var(--but_radius);
  box-sizing: border-box;
}
.progres-val::after{
  content: attr(data-after);
}
.progres-val::before{
  content: attr(data-before);
}

/* 表格 */
.table{
  width: 100%;
  border-spacing: 0;
}
.table .txt{
  display: table-cell;
  color: #666;
  overflow: hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.table caption{
  font-size: 1.2em;
  font-weight: bold;
}
.table tr:hover{
  background: #EEE;
}
.table th{
  color: #666; 
  text-align: center;
  padding:5px;
  border-bottom: 1px solid #666;
}
.table td {
  color: #333;
  padding:5px;
  border-bottom: 1px solid #EEE;
}
/* 垂直时间轴 */
.history {
  border-spacing: 0px;
  width: 100%;
}
.history .top {
  width: 20px;
  border-radius: 50% 50% 0 0;
  background: #07F;
  color: #FFF;
  padding: 2px;
}
.history .bottom{
  width: 20px;
  border-radius:0  0 50% 50%;
  background: #07F;
  color: #FFF;
  padding: 2px;
}
.history .left {
  padding: 0;
  width: 50%;
  text-align: right;
}
.history .center {
  background: #07F;
  color: #FFF;
  width: 20px;
  text-align: center;
}
.history .right {
  padding: 0;
  width: 50%;
  text-align: left;
}
.history .left dl dt {
  margin-left: 10px;
  background: #F90;
  color: #FFF;
  border-radius: 10px 0 0 10px;
  padding: 2px;
  padding-right: 10px;
}
.history .left dl dd {
  text-align: left;
  padding: 5px;
  margin-left: 20px;
  background: #EEE;
  text-indent: 2em;
  border-radius: var(--but_radius) 0 0 0;
}
.history .right dl dt{
  margin-right: 10px;
  margin-right: 0px;
  background: #2C0;
  color: #FFF;
  border-radius:0 10px 10px 0;
  padding: 2px;
  padding-left: 10px;
}
.history .right dl dd {
  text-align: left;
  margin-left: 0;
  margin-right:10px;
  padding: 5px;
  background: #EEE;
  text-indent: 2em;
  border-radius:0  0 var(--but_radius) 0;
}
/* 气泡 */
.arrow-left, .arrow-right, .arrow-up, .arrow-down,.arrow-border-left,.arrow-border-right,.arrow-border-up,.arrow-border-down{
  position: relative;
  text-align: center;
  padding: 0 5px;
  margin:10px;
  min-height: var(--but_height);
  line-height:var(--but_height);
  border-radius: var(--but_radius);
  background-color: #EEE;
}
.arrow-left::after,.arrow-border-left::before,.arrow-border-left::after{
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  top: calc(50% - 10px);
  left: 100%;
  border: solid 10px;
  border-color:  transparent transparent transparent #EEE;
}
.arrow-right::after,.arrow-border-right::before,.arrow-border-right::after{
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  top: calc(50% - 10px);
  left: -20px;
  border: solid 10px;
  border-color:  transparent #EEE transparent transparent;
}
.arrow-up::after,.arrow-border-up::before,.arrow-border-up::after{
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: solid 10px;
  top: calc(-50% + 2px);;
  left: calc(50% - 10px);
  border-color: transparent transparent #EEE  transparent;
}
.arrow-down::after,.arrow-border-down::before,.arrow-border-down::after{
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: solid 10px;
  top: 100%;
  left: calc(50% - 10px);
  border-color:#EEE transparent transparent  transparent;
}
.arrow-border-left,.arrow-border-right,.arrow-border-up,.arrow-border-down{
  background: #FFF;
  border: 1px solid #CCC;
}
.arrow-border-left::before{
  border-color:  transparent transparent transparent #CCC;
}
.arrow-border-left::after{
  left:calc(100% - 2px);
  border-color:  transparent transparent transparent #FFF;
}
.arrow-border-right::before{
  border-color:  transparent #CCC transparent transparent;
}
.arrow-border-right::after{
  left: -18px;
  border-color:  transparent #FFF transparent transparent;
}
.arrow-border-up::before{
  border-color:  transparent transparent #CCC transparent;
}
.arrow-border-up::after{
  top: -18px;
  border-color:  transparent transparent #FFF transparent;
}
.arrow-border-down::before{
  border-color:#CCC transparent transparent  transparent;
}
.arrow-border-down::after{
  top: calc(100% - 2px);
  border-color:#FFF transparent transparent  transparent;
}
/* 变形箭头 不常用 */
.arrow-transform{
  min-height: var(--but_height);
  line-height: var(--but_height);
  border-radius: var(--but_radius);
  margin: 20px;
  padding: 5px;
  text-align: center;
  position: relative;
  background: #EEE;
}
.arrow-transform::after{
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: solid 15px;
  /* 左 */
  /* top: 50%;
  left: 100%;
  border-color:  transparent transparent transparent #EEE;
  transform: skewY(50deg); */
  /* 右 */
  /* top: 50%;
  left: calc(-50% + 10px);
  border-color: transparent #EEE transparent transparent;
  transform: skewY(-50deg); */
  /* 上 */
  left: 25%;
  top: calc(-100% + 20px);
  border-color: transparent transparent #EEE transparent;
  transform: skewX(50deg);
  /* 下 */
  /* left: 50%;
  bottom:calc(-100% + 20px);
  border-color:  #EEE transparent transparent transparent;
  transform: skewX(50deg); */
}

/* 锁屏 */
.lock {
	background-color: rgba(0, 0, 0,0.7);
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 9998;
}
.lock .login {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin:auto;
  background: #FFF;
  opacity: 1 !important;
  border: var(--border);
  border-radius: var(--but_radius);
  color: #000;
	z-index: 9999;
}
/* 模态框 弹窗 */
.dialog-box{
  position: fixed;
	left: 0;
	top: 0;
  right: 0;
  bottom: 0;
  margin:auto;
  display: none;
  overflow:hidden;
  box-sizing: border-box;
}
.dialog-content {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width:350px;
  width: 500px;
  max-width: 100%;
	top: 25%;
  margin: auto;
  border-radius: var(--but_radius);
  background-color: #FFF;
  outline: 0;
  border: var(--border);
  border-width: 10px; 
  box-sizing: border-box;
}

/* 编码 */