/**
*  公共基本样式文件
*/

html {
  background: #FFF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
}
body { scroll-behavior: smooth;}

[v-cloak] {display: none !important}
pre {margin: 0}
ul{list-style: none;}
.clearfix:after,  /** 清除浮动 **/
.divider:after {content:""; display:block; height:0; clear:both; visibility:hidden; overflow: hidden;}
.divider { border-top: 1px solid #e8eaec;}                /** 分割线 **/
.hide {display: none !important}                              /** 隐藏元素 **/
.show {display: block !important}                             /** 显示元素 **/
a:hover {color: #247BFF}                                  /** 链接悬停 **/

/* 去掉数字输入框的箭头 */
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {-webkit-appearance: none}
input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset !important;}
input[type="number"] {-moz-appearance: textfield;}

/* 限宽容器 */
.my-container {
  width: 100%;
  max-width: 1440px;
  padding: 0 10px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 容器 */
.container {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 流式布局 */
.flex {
  display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box;      /* 老版本语法: Firefox (buggy) */
  display: -ms-flexbox;   /* 混合版本语法: IE 10 */
  display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
  display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
}

/* 主轴排列方向 */
.flex-direction-row {flex-direction: row}                  /* 左起，水平方向 */
.flex-direction-row-reverse {flex-direction: row-reverse}  /* 右起，水平方向 */
.flex-direction-column {flex-direction: column}            /* 上起，垂直方向 */
.flex-direction-column-reverse {flex-direction: column-reverse}    /* 下起，垂直方向 */

/* 子元素换行 */
.flex-nowrap {flex-wrap: nowrap}                           /* 不换行 */
.flex-wrap {flex-wrap: wrap}                               /* 换行, 第一行在上 */
.flex-reverse {flex-wrap: wrap-reverse}                    /* 换行, 第一行在下 */

/* 子元素在主轴对齐方式 */
.flex-justify-end {justify-content: flex-end}              /* 右对齐   */
.flex-justify-center {justify-content: center}             /* 居中对齐 */
.flex-justify-between {justify-content: space-between}     /* 两端对齐 */
.flex-justify-around {justify-content: space-around}       /* 间隔相等 */
.flex-justify-evenly {justify-content: space-evenly}       /* 间隔平均 */

/* 子元素在交叉轴对齐 */
.flex-align-start {align-items: flex-start}                /* 起点对齐 */
.flex-align-end {align-items: flex-end}                    /* 终点对齐 */
.flex-align-center {align-items: center}                   /* 中点对齐 */
.flex-align-baseline {align-items: baseline}               /* 基线对齐 */
.flex-align-stretch {align-items: stretch}                 /* 高度对齐 */

/** 文字截断 **/
.line-clamp   {word-wrap: normal; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.line-clamp-2 {overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical}
.line-clamp-3 {overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical}
.line-clamp-4 {overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical}

/* 文字大小 */
.text-xs      {font-size: 12px !important}
.text-sm      {font-size: 14px !important}
.text-df      {font-size: 16px !important}
.text-lg      {font-size: 18px !important}
.text-xl      {font-size: 24px !important}
.text-xxl     {font-size: 32px !important}
.text-xxxl    {font-size: 42px !important}

/* 颜色 */
.color-primary          { color: #0199E2 !important }  /* 主色 */
.color-light-primary    { color: #5CADFF !important }  /* 亮主色 */
.color-dark-primary     { color: #247BFF !important }  /* 深主色 */
.color-info             { color: #2DB7F5 !important }  /* 信息 辅助色 */
.color-success          { color: #19BE6B !important }  /* 成功 辅助色 */
.color-warning          { color: #F68300 !important }  /* 警告 辅助色 */
.color-error            { color: #FB4C4C !important }  /* 错误 辅助色 */
.color-title            { color: #17233D !important }  /* 标题 中性色 */
.color-content          { color: #666666 !important }  /* 正文 中性色 */
.color-sub              { color: #808695 !important }  /* 辅助 中性色 */
.color-disabled         { color: #C5C8CE !important }  /* 失效 中性色 */
.color-border           { color: #DCDEE2 !important }  /* 边框 中性色 */
.color-divider          { color: #E8EAEC !important }  /* 分割 中性色 */
.color-background       { color: #F7F7F7 !important }  /* 背景 中性色 */
.color-black            { color: #000000 !important }  /* 黑色 */
.color-white            { color: #FFFFFF !important }  /* 白色 */

/* 背景颜色 */
.bg-primary          { background-color: #0199E2 !important }  /* 主色 */
.bg-light-primary    { background-color: #5CADFF !important }  /* 亮主色 */
.bg-dark-primary     { background-color: #247BFF !important }  /* 深主色 */
.bg-info             { background-color: #2DB7F5 !important }  /* 信息 辅助色 */
.bg-success          { background-color: #19BE6B !important }  /* 成功 辅助色 */
.bg-warning          { background-color: #F68300 !important }  /* 警告 辅助色 */
.bg-error            { background-color: #ED4014 !important }  /* 错误 辅助色 */
.bg-title            { background-color: #17233D !important }  /* 标题 中性色 */
.bg-content          { background-color: #666666 !important }  /* 正文 中性色 */
.bg-sub              { background-color: #808695 !important }  /* 辅助 中性色 */
.bg-disabled         { background-color: #C5C8CE !important }  /* 失效 中性色 */
.bg-border           { background-color: #DCDEE2 !important }  /* 边框 中性色 */
.bg-divider          { background-color: #E8EAEC !important }  /* 分割 中性色 */
.bg-background       { background-color: #F7F7F7 !important }  /* 背景 中性色 */
.bg-black            { background-color: #000000 !important }  /* 黑色 */
.bg-white            { background-color: #FFFFFF !important }  /* 白色 */

/* 对齐方式 */
.align-left   {text-align: left   !important}
.align-right  {text-align: right  !important}
.align-center {text-align: center !important}

/* 外边距 */
.m-xs       {margin:  05px !important}
.m-sm       {margin:  10px !important}
.m-md       {margin:  15px !important}
.m-df       {margin:  20px !important}
.m-lg       {margin:  30px !important}
.m-xl       {margin:  40px !important}
.m-xxl      {margin:  50px !important}
.m-xxxl     {margin: 100px !important}
/* 左外边距 */
.ml-xs      {margin-left:  05px !important}
.ml-sm      {margin-left:  10px !important}
.ml-md      {margin-left:  15px !important}
.ml-df      {margin-left:  20px !important}
.ml-lg      {margin-left:  30px !important}
.ml-xl      {margin-left:  40px !important}
.ml-xxl     {margin-left:  50px !important}
.ml-xxxl    {margin-left: 100px !important}
/* 右外边距 */
.mr-xs      {margin-right:  05px !important}
.mr-sm      {margin-right:  10px !important}
.mr-md      {margin-right:  15px !important}
.mr-df      {margin-right:  20px !important}
.mr-lg      {margin-right:  30px !important}
.mr-xl      {margin-right:  40px !important}
.mr-xxl     {margin-right:  50px !important}
.mr-xxxl    {margin-right: 100px !important}
/* 上外边距 */
.mt-xs      {margin-top:  05px !important}
.mt-sm      {margin-top:  10px !important}
.mt-md      {margin-top:  15px !important}
.mt-df      {margin-top:  20px !important}
.mt-lg      {margin-top:  30px !important}
.mt-xl      {margin-top:  40px !important}
.mt-xxl     {margin-top:  50px !important}
.mt-xxxl    {margin-top: 100px !important}
/* 下外边距 */
.mb-xs      {margin-bottom:  05px !important}
.mb-sm      {margin-bottom:  10px !important}
.mb-md      {margin-bottom:  15px !important}
.mb-df      {margin-bottom:  20px !important}
.mb-lg      {margin-bottom:  30px !important}
.mb-xl      {margin-bottom:  40px !important}
.mb-xxl     {margin-bottom:  50px !important}
.mb-xxxl    {margin-bottom: 100px !important}

/* 内边距 */
.p-xs       {padding:  05px !important}
.p-sm       {padding:  10px !important}
.p-md       {padding:  15px !important}
.p-df       {padding:  20px !important}
.p-lg       {padding:  30px !important}
.p-xl       {padding:  40px !important}
.p-xxl      {padding:  50px !important}
.p-xxxl     {padding: 100px !important}
/* 左内边距 */
.pl-xs      {padding-left:  05px !important}
.pl-sm      {padding-left:  10px !important}
.pl-md      {padding-left:  15px !important}
.pl-df      {padding-left:  20px !important}
.pl-lg      {padding-left:  30px !important}
.pl-xl      {padding-left:  40px !important}
.pl-xxl     {padding-left:  50px !important}
.pl-xxxl    {padding-left: 100px !important}
/* 右内边距 */
.pr-xs      {padding-right:  05px !important}
.pr-sm      {padding-right:  10px !important}
.pr-md      {padding-right:  15px !important}
.pr-df      {padding-right:  20px !important}
.pr-lg      {padding-right:  30px !important}
.pr-xl      {padding-right:  40px !important}
.pr-xxl     {padding-right:  50px !important}
.pr-xxxl    {padding-right: 100px !important}
/* 上内边距 */
.pt-xs      {padding-top:  05px !important}
.pt-sm      {padding-top:  10px !important}
.pt-md      {padding-top:  15px !important}
.pt-df      {padding-top:  20px !important}
.pt-lg      {padding-top:  30px !important}
.pt-xl      {padding-top:  40px !important}
.pt-xxl     {padding-top:  50px !important}
.pt-xxxl    {padding-top: 100px !important}
/* 下内边距 */
.pb-xs      {padding-bottom:  05px !important}
.pb-sm      {padding-bottom:  10px !important}
.pb-md      {padding-bottom:  15px !important}
.pb-df      {padding-bottom:  20px !important}
.pb-lg      {padding-bottom:  30px !important}
.pb-xl      {padding-bottom:  40px !important}
.pb-xxl     {padding-bottom:  50px !important}
.pb-xxxl    {padding-bottom: 100px !important}

/* 浮动 */
.float-left   {float: left   !important}
.float-right  {float: right  !important}
.float-center {float: center !important; margin: 0 auto }

/** 过渡 **/
.transition, .transition:hover {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* 面板 */
.panel {display: block; background: #FFF;}
.panel>.panel-header {font-size: 16px; height: 40px; line-height: 40px; padding: 0 15px;}
.panel>.panel-body {padding: 0 15px;}

/* 表格 */
.my-table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
	background-color: #fff;
  color: #333;
  font-size: 14px;
}
.my-table tr {transition: all .3s; -webkit-transition: all .3s}
.my-table th {text-align: left; font-weight: 600}
/* 行背景 */
.my-table tbody tr:hover,
.my-table thead tr,
.my-table-hover,
.my-table[even] tr:nth-child(even) {
	background-color: #F8F8F9;
}
/* 表格边框 */
.my-table td,
.my-table th,
.my-table[skin=row] {
	border-width: 1px;
	border-style: solid;
	border-color: #e8eaec;
}
/* 单元格样式 */
.my-table td,
.my-table th {
	position: relative;
	padding: 9px 15px;
	min-height: 20px;
	line-height: 20px;
	font-size: 14px
}
/* 行边框风格 */
.my-table[skin=line] td {border-width: 0 0 1px}
.my-table[skin=line] th {border-width: 1px 0}
/* 列边框风格 */
.my-table[skin=row] td,
.my-table[skin=row] th {border-width: 0 1px 0 0}
/* 无边框风格 */
.my-table[skin=nob] td,
.my-table[skin=nob] th {border: none}
/* 大尺寸表格 */
.my-table[size=lg] td,
.my-table[size=lg] th {padding: 15px 30px}
/* 小尺寸表格 */
.my-table[size=sm] td,
.my-table[size=sm] th {font-size: 12px; padding: 5px 10px}


/* 文章 */
.article>.title {text-align: center}
.article>.title h1 {font-size: 22px; font-weight: 400; color: #17233d}
.article>.meta {text-align: center; height: 30px; line-height: 30px; color: #808695}
.article>.content, .article .content p {font-size: 14px;color: #515a6e;line-height: 1.8}
.article>.content {padding: 15px}
.article>.content p {margin-bottom: 10px}
.article>.content.indented p{text-indent: 2em}    /** 首行缩进 **/
.article>.content img {max-width: 100%}


/* 呼吸灯动画 */
@keyframes breathe {
	0% {
    opacity:.2;
  }
  100% {
    opacity:1;
  }
}