@charset "utf-8";

/* 使用命令将scss文件转为css文件 */
/* npx sass index.scss index.css */

/* 禁用iPhone中Safari的字号自动调整 */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  /* 解决IOS默认滑动很卡的情况 */
  -webkit-overflow-scrolling: touch;
}

body,
html {
  font-family: "SourceHanSansCN";
  /* 防止 ios 中微信字体变大后布局错乱 */
  -webkit-text-size-adjust: 100% !important;
  color: #424242;
}

/* 禁止缩放表单 */

input[type="submit"],
input[type="reset"],
input[type="button"],
input {
  resize: none;
  border: none;
  outline: none;
}

/* 设置HTML5元素为块 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

/* 图片自适应 */

img {
  height: auto;
  /* ie8 */
  display: block;
  -ms-interpolation-mode: bicubic;
  /*为了照顾ie图片缩放失真*/
}

/* 初始化 */

body,
div,
ul,
li,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea,
select,
p,
dl,
dt,
dd,
a,
img,
button,
form,
table,
th,
tr,
td,
tbody,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* 取消链接高亮  */
}

/*单行溢出*/

.one-txt-cut {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*多行溢出 手机端使用*/

.txt-cut {
  overflow: hidden;
  text-overflow: ellipsis;
  /* 将对象作为弹性伸缩盒子模型显示  */
  display: -webkit-box;
  /* 一个块元素显示的文本的行数 */
  -webkit-line-clamp: 5;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}

/*
    文字两端对齐
*/
.txt-between {
  text-align: justify;
  text-align-last: justify;
}

/* 换行 */

.nowrap {
  white-space: nowrap;
}

/*主轴上的对齐方式*/
justify-start {
  justify-content: flex-start;
}

justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

/**
 * 交叉轴上对齐方式
 */
.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-stretch {
  align-items: stretch;
}

/* 颜色 */

.color_white {
  color: #fff;
}

.color_blue {
  color: #7c99fd;
}

.color_yellow {
  color: #f7b21e;
}

.color_green {
  color: #32b16c;
}

.color_red {
  color: #df4a42;
}

.color_gray {
  color: #bbb;
}

/* 
placeholder样式修改
冒号前写对应的input或textarea元素等。
*/

/* ::-webkit-input-placeholder {}
:-moz-placeholder {}
::-moz-placeholder {}
:-ms-input-placeholder {} */

/* IE浏览器 */

/* 隐藏滚动条
::-webkit-scrollbar {
   display: none;
   width: 0;
   height: 0;
} */

/* 文本位置 */

.tl {
  text-align: left;
}

.tc {
  text-align: center;
}

.tr {
  text-align: right;
}

/* 移动端点击a链接出现蓝色背景问题解决 */

a:link,
a:active,
a:visited,
a:hover {
  background: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

/* 清除浮动 */

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.db {
  display: block;
}

.dn {
  display: none;
}

.df {
  display: flex;
}

.w100 {
  width: 100%;
}

.w50 {
  width: 50%;
}

.w33 {
  width: 33.333333%;
}

.w25 {
  width: 25%;
}

.w20 {
  width: 20%;
}

/* 不同份数，所占的宽 */
.col-1 {
  width: 8.33333333%;
}

.col-2 {
  width: 16.66666667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33333333%;
}

.col-5 {
  width: 41.66666667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.33333333%;
}

.col-8 {
  width: 66.6666667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.33333333%;
}

.col-11 {
  width: 91.66666667%;
}

.col-12 {
  width: 100%;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.mask {
  height: 100vh;
  left: 0;
  top: 0;
  right: 0;
  position: fixed;
  z-index: 999;
  background: rgb(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.mask_content {
  width: 7.3625rem;
  position: relative;
}

.mask_content .content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  padding: .375rem;
  padding-top: .1rem;
}

.mask_content .content .mask_title {
  width: 2.625rem;
}

.mask_content .close {
  position: absolute;
  right: 0;
  top: 0;
  width: .7375rem;
  z-index: 99;
}