@font-face{
  font-family: ZurichBT;
  src: url('../fonts/ZurichBT-ExtraCondensed.otf')
}


html {
  font-size:10px !important; /* 1rem = 10px */ 
  background: #FFF;
  font-family: "PingFang SC","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
}
body {
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
}

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

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



/* 限宽容器 */
.my-container {
  width: 100%;
  max-width: 1630px;
  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-col {flex-direction: column}                    /* 上起，垂直方向 */
.flex-direction-col-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-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}


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

/* 外边距 */
.m-xs       {margin:  5px  !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:  5px  !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:  5px  !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:  5px  !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:  5px  !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:  5px  !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:  5px  !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:  5px  !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:  5px  !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:  5px  !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 !important}

/** 过渡 **/
.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;
}

/* 颜色 */
.color-primary {color: #D81E43 !important;}
.color-warning {color: #F5AB18 !important;}
.color-gray {color: #E5E5E5 !important;}
.color-content {color: #595959;}