* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



body {

  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;

  font-size: 14px;

  background: #fff;

  -webkit-text-size-adjust: 100%;

  color: #1b1b1b;

}



img {

  max-width: 100%;

}



a {

  color: #2d374b;

  text-decoration: none
}



em {

  font-style: normal
}



li {

  list-style: none
}



img {

  border: 0;

  vertical-align: middle
}



table {

  border-collapse: collapse;

  border-spacing: 0
}



p {
  font-size: 16px;
  word-wrap: break-word
}



input {

  outline: none;

}



html,

body {

  margin: 0;

  padding: 0;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}



button,

input,

video,

span,

div,

img {

  user-select: none;

}



button {

  border: none;

  outline: none;

  background: none;

  padding: 0;

}



.text-ellipsis {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



/* 最多显示两行 */

.text-ellipsis-2 {

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

  text-overflow: ellipsis;

}

.text-ellipsis-3 {

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 3;

  overflow: hidden;

  text-overflow: ellipsis;

}



/*  -- flex弹性布局 -- */



.flex {

  display: flex;

}



.flex-column {

  display: flex;

  flex-direction: column;

}



.flex-row-reverse {

  display: flex;

  flex-direction: row-reverse;

}



.flex-wrap {

  flex-wrap: wrap;

}



.align-start {

  align-items: flex-start;

}



.align-end {

  align-items: flex-end;

}



.align-center {

  align-items: center;

}



.align-stretch {

  align-items: stretch;

}



.self-start {

  align-self: flex-start;

}



.self-center {

  align-self: flex-center;

}



.self-end {

  align-self: flex-end;

}



.self-stretch {

  align-self: stretch;

}



.align-stretch {

  align-items: stretch;

}



.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;

}



.flex-row-end {

  display: flex;

  justify-content: flex-end;

  align-items: center;

}



.flex-row-center {

  display: flex;

  justify-content: center;

  align-items: center;

}



.flex-row-between {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.flex-column-center {

  display: flex;

  flex-direction: column;

  justify-content: center;

  text-align: center;

}



.flex-sub {

  flex: 1;

}



.abs {

  position: absolute;

}



.rel {

  position: relative;

}



.text-white {

  color: #fff;

}



.fullscreen {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  display: flex;

  flex: 1;

  flex-direction: column;

  justify-content: center;

  text-align: center;

}



.text-center {

  text-align: center;

}



.text-left {

  text-align: left;

}



.text-right {

  text-align: right;

}



.vertical-rl {
  writing-mode: vertical-rl;
}


/* 文字竖排显示超出省略号 */
.vertical-lr {
  writing-mode: vertical-lr;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 4列网格布局 */
.grid-col-4 {
  display: grid;
  display: -ms-grid;
  grid-template-columns: repeat(auto-fit, 20.7vw);
  -ms-grid-columns: repeat(auto-fit, 20.7vw);
  grid-column-gap: 12px;
  -ms-grid-column-gap: 12px;
}



:root {

  --hover-color: #b70105;

}



.text-hover-color {

  color: var(--hover-color);

}



.margin-bottom {

  margin-bottom: 15px;

}



.margin-top {

  margin-bottom: 15px;

}



.margin-left {

  margin-left: 15px;

}



.margin-right {

  margin-right: 15px;

}



/* 滚动条样式 */

/* 滚动条修改 */

.scroll-bar::-webkit-scrollbar {

  /*滚动条整体样式*/

  width: 0.3vw;

  /*高宽分别对应横竖滚动条的尺寸*/

  height: 4px;

  scrollbar-arrow-color: #fff;



}



.scroll-bar::-webkit-scrollbar-thumb {

  /*滚动条里面小方块*/

  border-radius: 10px;

  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

  background-color: #bea193;

}



.scroll-bar::-webkit-scrollbar-track {

  /*滚动条里面轨道*/

  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.0);

  border-radius: 10px;

  background: rgba(0, 0, 0, 0);

}