@charset "UTF-8";
/*混合指令（Mixin）用于定义可重复使用的样式*/
/*一些可重用代码*/
/* 使用绝对定位使内容水平居中 */
/* 使用绝对定位使内容垂直居中 */
/* 使用绝对定位使内容绝对居中 */
/* 设置图片背景 */
/* 清除浮动 */
/* 单行文字显示省略号 */
/* 多行文字显示省略号 */
/* 渐变背景 */
/* 首页内容宽度 */
/**
 * hover时由内向外填充的效果
 */
/*relative相对定位*/
/**
* @param $line       超出显示省略号的行数，默认：1
* @param $substract  为预留区域百分比%，默认：0
*/
/* 主题色-蓝色*/
/* 加载动画 */
.load-container {
  position: fixed;
  z-index: 99999;
  height: 100vh;
  width: 100vw;
  background: white; }
  .load-container canvas, .load-container .slice {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
  .load-container .load1 {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
  .load-container .load1 .loader,
  .load-container .load1 .loader:before,
  .load-container .load1 .loader:after {
    background: #1a6dd3;
    -webkit-animation: load1 1s infinite ease-in-out;
    animation: load1 1s infinite ease-in-out;
    width: 1em;
    height: 4em; }
  .load-container .load1 .loader:before,
  .load-container .load1 .loader:after {
    position: absolute;
    top: 0;
    content: ''; }
  .load-container .load1 .loader:before {
    left: -1.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s; }
  .load-container .load1 .loader {
    text-indent: -9999em;
    margin: 8em auto;
    position: relative;
    font-size: 11px;
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s; }
  .load-container .load1 .loader:after {
    left: 1.5em; }

@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    -webkit-box-shadow: 0 0 #fff;
            box-shadow: 0 0 #fff;
    height: 4em; }
  40% {
    -webkit-box-shadow: 0 -2em #ffffff;
            box-shadow: 0 -2em #ffffff;
    height: 5em; } }

@keyframes load1 {
  0%,
  80%,
  100% {
    -webkit-box-shadow: 0 0 #fff;
            box-shadow: 0 0 #fff;
    height: 4em; }
  40% {
    -webkit-box-shadow: 0 -2em #ffffff;
            box-shadow: 0 -2em #ffffff;
    height: 5em; } }

.slice {
  position: relative;
  float: left;
  width: 14em;
  height: 6em;
  margin: .5em;
  padding: 2em;
  text-align: center; }

.slice > div {
  margin: 1em auto; }

[data-loader=circle-side] {
  position: relative;
  width: 40px;
  height: 40px;
  -webkit-animation: circle infinite .75s linear;
  animation: circle infinite .75s linear;
  border: 3px solid #40479a;
  border-top-color: rgba(0, 0, 0, 0.2);
  border-right-color: rgba(0, 0, 0, 0.2);
  border-bottom-color: rgba(0, 0, 0, 0.2);
  border-radius: 100%; }

[data-loader] {
  margin: 8px; }

@-webkit-keyframes circle {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0); }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes circle {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0); }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg); } }