* {
  margin: 0;
  padding: 0;
}
html,
body {
  font-size: 16px;
}
html,
body,
div,
p,
a,
img,
span,
code,
pre,
kbd,
blockquote,
iframe,
header,
footer,
section,
article,
figure,
h1,
h2,
h3,
h4,
h5,
ul,
ol,
li,
table,
thead,
tbody,
th,
td,
tr,
select,
input,
button,
textarea {
  font-family: "pingfang SC", "microsoft yahei ui", "microsoft yahei";
}
h1,
h2,
h3,
h4,
h5 {
  font-weight: 700 !important;
  word-wrap: break-word;
}
h1 {
  font-size: 2rem;
}
.h1 {
  font-size: 2.4rem !important;
}
.h2 {
  font-size: 2rem !important;
}
.h3 {
  font-size: 1.7rem !important;
}
.h4 {
  font-size: 1.4rem !important;
}
.h5 {
  font-size: 1.2rem !important;
}
p {
  word-wrap: break-word;
  line-height: 1.8 !important;
}
video {
  max-width: 100% !important;
}
header nav,
header ol,
header ul,
nav li,
header li {
  list-style: none !important;
}
table {
  font-size: 16px !important;
}
hr {
  margin: 4rem 0 !important;
  border: 1px solid #ccc;
}
@media (max-width: 1080px) {
  hr {
    margin: 3.2rem 0 !important;
  }
}
@media (max-width: 768px) {
  hr {
    margin: 2.4rem 0 !important;
  }
}
.fw200 {
  font-weight: 200 !important;
}
.fw300 {
  font-weight: 300 !important;
}
.fw400 {
  font-weight: 400 !important;
}
.fw500 {
  font-weight: 500 !important;
}
.fw600 {
  font-weight: 600 !important;
}
.fw700 {
  font-weight: 700 !important;
}
.fw800 {
  font-weight: 800 !important;
}
.fw900 {
  font-weight: 900 !important;
}
.rounded-full {
  border-radius: 9999px !important;
}
.s-center {
  justify-content: center !important;
  display: flex !important;
}
.dis-no {
  display: none !important;
}
.p0 {
  padding: 0 !important;
}
.p1rem {
  padding: 1rem !important;
}
.pt1rem {
  padding-top: 1rem !important;
}
.pb1rem {
  padding-bottom: 1rem !important;
}
.m0 {
  margin: 0 !important;
}
.m1rem {
  margin: 1rem !important;
}
.mt1rem {
  margin-top: 1rem !important;
}
.mb1rem {
  margin-bottom: 1rem !important;
}
/*黑白*/
.bai {
  color: #fff !important;
}
.hei {
  color: #000 !important;
}
/*彩色*/
.red1 {
  color: #db2828 !important;
}
.red2 {
  color: #f44336 !important;
}
.red3 {
  color: #dd0016 !important;
}
.pink1 {
  color: #e91e63 !important;
}
.pink2 {
  color: #e03997 !important;
}
.pink3 {
  color: #ff005e !important;
}
.blue1 {
  color: #00bcd4 !important;
}
.blue2 {
  color: #2196f3 !important;
}
.blue3 {
  color: #03a9f4 !important;
}
.pupe1 {
  color: #9c27b0 !important;
}
.pupe2 {
  color: #673ab7 !important;
}
.pupe3 {
  color: #6435c9 !important;
}
.pupe4 {
  color: #7a52ff !important;
}
.ink1 {
  color: #3d54d7 !important;
}
.green1 {
  color: #21ba45 !important;
}
.green2 {
  color: #4caf50 !important;
}
.green3 {
  color: #8bc34a !important;
}
.green4 {
  color: #bfd02c !important;
}
.teal1 {
  color: #00b5ad !important;
}
.teal2 {
  color: #009688 !important;
}
.yellow1 {
  color: #ffeb3b !important;
}
.yellow2 {
  color: #ffc107 !important;
}
.orenge1 {
  color: #ff9800 !important;
}
.orenge2 {
  color: #f2711c !important;
}
.orenge3 {
  color: #ff5722 !important;
}
.brown1 {
  color: #795548 !important;
}
.brown2 {
  color: #a5673f !important;
}
/*====按钮定义====*/
/* 填充到100%宽度 */
.b100 {
  display: block;
  width: 100% !important;
}
/*BOX背景色彩*/
.box {
  position: relative;
  padding: 1.6rem;
  margin: 1.6rem 0;
  border: none;
  border-radius: 0.8rem;
  font-size: 1rem;
}
@media (max-width: 768px) {
  .box {
    padding: 1.3rem;
    margin: 1.4rem 0;
    border-radius: 0.4rem;
  }
}
.box h2,
.box h3,
.box h4 {
  margin-top: 0 !important;
  margin-bottom: 0.8rem;
}
.box h3 {
  margin-bottom: 0.6rem;
}
.box p {
  padding: 0 !important;
  margin: 0 !important;
}
.box1 {
  color: #dd0016;
  background-color: #ffeaef;
}
.box1 h2,
.box1 h3,
.box1 h4,
.box1 p {
  color: #dd0016;
}
.box2 {
  color: #d44807;
  background-color: #ffefe6;
}
.box2 h2,
.box2 h3,
.box2 h4,
.box2 p {
  color: #d44807;
}
.box3 {
  color: #b18500;
  background-color: #fff3cd;
}
.box3 h2,
.box3 h3,
.box3 h4,
.box3 p {
  color: #b18500;
}
.box4 {
  color: #087722;
  background-color: #d4edda;
}
.box4 h2,
.box4 h3,
.box4 h4,
.box4 p {
  color: #087722;
}
.box5 {
  color: #007286;
  background-color: #d1ecf1;
}
.box5 h2,
.box5 h3,
.box5 h4,
.box5 p {
  color: #007286;
}
.box6 {
  color: #0054ad;
  background-color: #cce5ff;
}
.box6 h2,
.box6 h3,
.box6 h4,
.box6 p {
  color: #0054ad;
}
.box7 {
  color: #5637f1;
  background-color: #e5e0ff;
}
.box7 h2,
.box7 h3,
.box7 h4,
.box7 p {
  color: #5637f1;
}
.box8 {
  color: #a333c8;
  background-color: #f6e7ff;
}
.box8 h2,
.box8 h3,
.box8 h4,
.box8 p {
  color: #922eb4;
}
.box9 {
  color: #e03997;
  background-color: #ffe3fb;
}
.box9 h2,
.box9 h3,
.box9 h4,
.box9 p {
  color: #dd238b;
}
.box10 {
  color: #a5673f;
  background-color: #f1e2d3;
}
.box10 h2,
.box10 h3,
.box10 h4,
.box10 p {
  color: #935b38;
}
.box11 {
  color: #222;
  background-color: #eee;
}
.box11 h2,
.box11 h3,
.box11 h4,
.box11 p {
  color: #222;
}
.box12 {
  color: #999;
  background-color: #030712;
  border: 1px solid #0f172a;
}
.box12 h2,
.box12 h3,
.box12 h4,
.box12 p {
  color: #999;
}
.box13 {
  display: block;
  background-image: linear-gradient(0deg, #fff, #f3f5f8);
  border: 2px solid #fff;
  box-shadow:
    8px 8px 20px 0 rgba(74, 109, 165, 0.1),
    -8px -8px 20px 0 #fff;
  box-sizing: border-box;
  transition: all 0.3s linear;
}
.box14 {
  background-color: #ffe8e6;
  color: #db2828;
  box-shadow:
    0 0 0 1px #f37171 inset,
    0 0 0 0 transparent;
}
.box15 {
  background-color: #ffedde;
  color: #f2711c;
  box-shadow:
    0 0 0 1px #f39454 inset,
    0 0 0 0 transparent;
}
.box16 {
  background-color: #fff8db;
  color: #b58105;
  box-shadow:
    0 0 0 1px #e3bb5d inset,
    0 0 0 0 transparent;
}
.box17 {
  background-color: #fbfdef;
  color: #8abc1e;
  box-shadow:
    0 0 0 1px #c0e76c inset,
    0 0 0 0 transparent;
}
.box18 {
  background-color: #e5f9e7;
  color: #1ebc30;
  box-shadow:
    0 0 0 1px #68e477 inset,
    0 0 0 0 transparent;
}
.box19 {
  background-color: #e1f7f7;
  color: #10a3a3;
  box-shadow:
    0 0 0 1px #61c4c4 inset,
    0 0 0 0 transparent;
}
.box20 {
  background-color: #dff0ff;
  color: #2185d0;
  box-shadow:
    0 0 0 1px #76afdb inset,
    0 0 0 0 transparent;
}
.box21 {
  background-color: #eae7ff;
  color: #6435c9;
  box-shadow:
    0 0 0 1px #977cd2 inset,
    0 0 0 0 transparent;
}
.box22 {
  background-color: #f6e7ff;
  color: #a333c8;
  box-shadow:
    0 0 0 1px #b774ce inset,
    0 0 0 0 transparent;
}
.box23 {
  background-color: #ffe3fb;
  color: #e03997;
  box-shadow:
    0 0 0 1px #e778b7 inset,
    0 0 0 0 transparent;
}
.box24 {
  background-color: #f1e2d3;
  color: #a5673f;
  box-shadow:
    0 0 0 1px #d6a787 inset,
    0 0 0 0 transparent;
}
.box25 {
  background-color: #ff0000 !important;
}
.box26 {
  background-color: #0000ff !important;
}
.box27 {
  background-color: #6600ff !important;
}
.box28 {
  background-color: #ff6600 !important;
}
.box29 {
  background-color: #db2828 !important;
}
.box30 {
  background-color: #f2711c !important;
}
.box31 {
  background-color: #fbbd08 !important;
}
.box32 {
  background-color: #b5cc18 !important;
}
.box33 {
  background-color: #21ba45 !important;
}
.box34 {
  background-color: #00b5ad !important;
}
.box35 {
  background-color: #2185d0 !important;
}
.box36 {
  background-color: #6435c9 !important;
}
.box37 {
  background-color: #a333c8 !important;
}
.box38 {
  background-color: #e03997 !important;
}
.box39 {
  background-color: #a5673f !important;
}
.box40 {
  background-color: #767676 !important;
}
.box41 {
  background-color: #1b1c1d !important;
}
.box25,
.box26,
.box27,
.box28,
.box29,
.box30,
.box31,
.box32,
.box33,
.box34,
.box35,
.box36,
.box37,
.box38,
.box39,
.box40,
.box41 {
  color: #fff !important;
}
/* ********按钮********* */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: opacity 0.2s;
  color: #fff !important;
  -webkit-tap-highlight-color: transparent;
  border-bottom: 0 !important;
  height: auto;
  line-height: normal;
}
.btn:hover {
  color: #fff !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  opacity: 0.85;
}
.btn1 {
  background-color: #ea1c23 !important;
}
.btn1:hover {
  background-color: #dc3545 !important;
}
.btn2 {
  background-color: #ec6c17 !important;
}
.btn2:hover {
  background-color: #da4505 !important;
}
.btn3 {
  color: #000 !important;
  background-color: #ffc107 !important;
}
.btn3:hover {
  color: #000 !important;
  background-color: #ffca2c !important;
}
.btn4 {
  background-color: #21ba45 !important;
}
.btn4:hover {
  background-color: #198754 !important;
}
.btn5 {
  color: #000 !important;
  background-color: #0dcaf0 !important;
}
.btn5:hover {
  color: #000 !important;
  background-color: #31d2f2 !important;
}
.btn6 {
  background-color: #0d6efd !important;
}
.btn6:hover {
  background-color: #0b5ed7 !important;
}
.btn7 {
  background-color: #6e46f1 !important;
}
.btn7:hover {
  background-color: #5829bb !important;
}
.btn8 {
  background-color: #00b5ad !important;
}
.btn8:hover {
  background-color: #009c95 !important;
}
.btn9 {
  color: #000 !important;
  background-color: #b5cc18;
}
.btn9:hover {
  color: #000 !important;
  background-color: #a7bd0d;
}
.btn10 {
  background-color: #ec2d99 !important;
}
.btn10:hover {
  background-color: #bf1776 !important;
}
.btn11 {
  background-color: #212529 !important;
}
.btn11:hover {
  background-color: #424649 !important;
}
.btn12 {
  color: #000 !important;
  background-color: #f8f9fa !important;
}
.btn12:hover {
  color: #000 !important;
  background-color: #d3d4d5 !important;
}
.btn13 {
  background-color: #6c757d !important;
}
.btn13:hover {
  background-color: #464b51 !important;
}
.btn1a {
  color: #ea1c23 !important;
  border-color: #ea1c23 !important;
  background-color: transparent;
  box-shadow: 0 0 0 1px #ea1c23 inset !important;
}
.btn1a:hover {
  border-color: #ea1c23 !important;
  background-color: #ea1c23 !important;
}
.btn2a {
  color: #ec6c17 !important;
  border-color: #ec6c17 !important;
  background-color: transparent;
  box-shadow: 0 0 0 1px #ec6c17 inset !important;
}
.btn2a:hover {
  border-color: #ec6c17 !important;
  background-color: #ec6c17 !important;
}
.btn3a {
  color: #ffc107 !important;
  border-color: #ffc107 !important;
  background-color: transparent;
  box-shadow: 0 0 0 1px #ffc107 inset !important;
}
.btn3a:hover {
  color: #000 !important;
  border-color: #ffc107 !important;
  background-color: #ffc107 !important;
}
.btn4a {
  color: #21ba45 !important;
  border-color: #21ba45 !important;
  background-color: transparent;
  box-shadow: 0 0 0 1px #21ba45 inset !important;
}
.btn4a:hover {
  border-color: #21ba45;
  background-color: #21ba45 !important;
}
.btn5a {
  color: #0dcaf0 !important;
  border-color: #0dcaf0 !important;
  background-color: transparent;
  box-shadow: 0 0 0 1px #0dcaf0 inset !important;
}
.btn5a:hover {
  color: #000 !important;
  border-color: #0dcaf0 !important;
  background-color: #0dcaf0 !important;
}
.btn6a {
  color: #0d6efd !important;
  border-color: #0d6efd !important;
  background-color: transparent;
  box-shadow: 0 0 0 1px #0d6efd inset !important;
}
.btn6a:hover {
  border-color: #0d6efd;
  background-color: #0d6efd !important;
}
.btn7a {
  color: #6e46f1 !important;
  border-color: #6e46f1 !important;
  background-color: transparent;
  box-shadow: 0 0 0 1px #6e46f1 inset !important;
}
.btn7a:hover {
  border-color: #6e46f1 !important;
  background-color: #6e46f1 !important;
}
.btn8a {
  color: #00b5ad !important;
  border-color: #00b5ad !important;
  background-color: transparent;
  box-shadow: 0 0 0 1px #00b5ad inset !important;
}
.btn8a:hover {
  border-color: #00b5ad !important;
  background-color: #00b5ad !important;
}
.btn9a {
  color: #b5cc18 !important;
  border-color: #b5cc18 !important;
  background-color: transparent;
  box-shadow: 0 0 0 1px #b5cc18 inset !important;
}
.btn9a:hover {
  color: #000 !important;
  border-color: #b5cc18 !important;
  background-color: #b5cc18 !important;
}
.btn10a {
  color: #ec2d99 !important;
  border-color: #ec2d99 !important;
  background-color: transparent;
  box-shadow: 0 0 0 1px #ec2d99 inset !important;
}
.btn10a:hover {
  border-color: #ec2d99 !important;
  background-color: #ec2d99 !important;
}
/*灰色渐变按钮*/
.btnv {
  background-color: #96989e !important;
  background-image: linear-gradient(135deg, #96989e, #7d7f85);
  box-shadow: 2px 6px 15px rgba(153, 155, 171, 0.35);
}
.btnv:hover {
  background-color: #a7a9ad !important;
  background-image: linear-gradient(135deg, #7d7f85, #96989e);
  box-shadow: 2px 6px 15px rgba(151, 153, 167, 0.35);
}

/*大红渐变按钮*/
.btnr {
  background-color: #ff4848 !important;
  background-image: linear-gradient(135deg, #ff4848, #eb0000);
  box-shadow: 2px 6px 15px rgba(255, 72, 72, 0.35);
}
.btnr:hover {
  background-color: #ff2929 !important;
  background-image: linear-gradient(155deg, #ff6161, #f0116e);
  box-shadow: 2px 4px 12px rgba(255, 72, 72, 0.45);
}
/*红色渐变按钮*/
.btnh {
  background-color: #ff487f !important;
  background-image: linear-gradient(135deg, #ff487f, #eb006a);
  box-shadow: 2px 6px 15px rgba(255, 72, 112, 0.35);
}
.btnh:hover {
  background-color: #ff2971 !important;
  background-image: linear-gradient(155deg, #ff6189, #f0116e);
  box-shadow: 2px 4px 12px rgba(255, 72, 112, 0.45);
}
/*橙色渐变按钮*/
.btnt {
  background-color: #ff4b1b !important;
  background-image: linear-gradient(135deg, #ff4b1b, #fb3600);
  box-shadow: 2px 6px 15px rgba(238, 50, 3, 0.35);
}
.btnt:hover {
  background-color: #ff5f33 !important;
  background-image: linear-gradient(135deg, #ff5f33, #fb3600);
  box-shadow: 2px 6px 15px rgba(238, 50, 3, 0.35);
}
/*黄色渐变按钮*/
.btny {
  color: #000 !important;
  background-color: #ffd500;
  background-image: linear-gradient(135deg, #ffd500, #ffb700);
  box-shadow: 2px 6px 15px rgba(238, 179, 3, 0.35);
}
.btny:hover {
  color: #000 !important;
  background-color: #f5db1e;
  background-image: linear-gradient(135deg, #f5db1e, #ffb700);
  box-shadow: 2px 6px 15px rgba(238, 179, 3, 0.35);
}
/*绿色渐变按钮*/
.btng {
  background-color: #10d378 !important;
  background-image: linear-gradient(135deg, #10d378, #09b665);
  box-shadow: 2px 6px 15px rgba(9, 170, 71, 0.35);
}
.btng:hover {
  background-color: #1ee789 !important;
  background-image: linear-gradient(135deg, #1ee789, #09b665);
  box-shadow: 2px 6px 15px rgba(9, 170, 71, 0.35);
}
/*青色渐变按钮*/
.btnq {
  color: #000 !important;
  background-color: #11caeb;
  background-image: linear-gradient(135deg, #11caeb, #0dc3e4);
  box-shadow: 2px 6px 15px rgba(42, 207, 248, 0.35);
}
.btnq:hover {
  color: #000 !important;
  background-color: #28d3f1;
  background-image: linear-gradient(135deg, #28d3f1, #0dc3e4);
  box-shadow: 2px 6px 15px rgba(42, 207, 248, 0.35);
}
/*蓝色渐变按钮*/
.btnl {
  background-color: #1d8aff !important;
  background-image: linear-gradient(135deg, #1d8aff, #007bff);
  box-shadow: 2px 6px 15px rgba(72, 115, 255, 0.35);
}
.btnl:hover {
  background-color: #3195ff !important;
  background-image: linear-gradient(135deg, #3195ff, #0f83ff);
  box-shadow: 2px 6px 15px rgba(72, 115, 255, 0.35);
}
/*祡色渐变按钮*/
.btnz {
  background-color: #7a52ff !important;
  background-image: linear-gradient(135deg, #7a52ff, #6a42ed);
  box-shadow: 2px 6px 15px rgba(89, 36, 236, 0.35);
}
.btnz:hover {
  background-color: #8d6bff !important;
  background-image: linear-gradient(135deg, #8d6bff, #7b53ff);
  box-shadow: 2px 6px 15px rgba(89, 36, 236, 0.35);
}
/*黑色渐变按钮*/
.btnb {
  color: #eee !important;
  background-color: #25262b;
  background-image: linear-gradient(135deg, #25262b, #1e1f25);
  box-shadow: 2px 6px 15px rgba(137, 139, 155, 0.35);
}
.btnb:hover {
  color: #eee !important;
  background-color: #313237;
  background-image: linear-gradient(135deg, #36363a, #1e1f25);
  box-shadow: 2px 6px 15px rgba(137, 139, 155, 0.35);
}
/*暗色渐变按钮*/
.btna {
  background-color: #606268 !important;
  background-image: linear-gradient(135deg, #606268, #34353c);
  box-shadow: 2px 6px 15px rgba(137, 139, 155, 0.35);
}
.btna:hover {
  background-color: #6e7076 !important;
  background-image: linear-gradient(135deg, #36363a, #34353c);
  box-shadow: 2px 6px 15px rgba(137, 139, 155, 0.35);
}
/*自定义版面container布局*/
.w800 {
  width: 800px;
  max-width: 800px;
}
@media (max-width: 800px) {
  .w800 {
    width: 100%;
  }
}
/* 【css常用布局】卡片布局 */
.flex1 {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 8px;
}
.flex2 {
  display: flex;
  flex-wrap: wrap;
}
.flex_img {
  /* 四列布局 */
  flex-basis: 25%;
  margin-bottom: 8px;
  padding: 0px 8px;
  box-sizing: border-box;
  overflow: hidden;
}
@media (max-width: 768px) {
  .flex_img {
    flex-basis: 33.33%;
  }
}
/* 鼠标滑动时产生放大的动画效果 */
.fangda {
  transition: all 0.3s linear;
}
.fangda:hover {
  transform: translate(0, -4px);
  opacity: 0.85;
  -webkit-transform: scale(1.03);
  -ms-transform: scale(1.03);
  transform: scale(1.03);
}
/* 圆角 */
.br4r {
  border-radius: 4px;
}
.br8r {
  border-radius: 8px;
}
.br16r {
  border-radius: 16px;
}
.br24r {
  border-radius: 24px;
}
/*背景色彩定义*/
.bgw {
  background-color: white !important;
}
.bgb {
  background-color: black !important;
}
/*************************/
/* 50种渐变背景颜色 */
/*************************/
.bjb1 {
  color: #fff;
  background: #b91c1c;
  background: linear-gradient(to right, #ef4444, #b91c1c);
}
.bjb2 {
  color: #fff;
  background: #881337;
  background: linear-gradient(to right, #be123c, #881337);
}
.bjb3 {
  color: #fff;
  background: #e11d48;
  background: linear-gradient(to right, #fb7185, #e11d48);
}
.bjb4 {
  color: #fff;
  background: #ea580c;
  background: linear-gradient(to right, #fb923c, #ea580c);
}
.bjb5 {
  color: #fff;
  background: #d97706;
  background: linear-gradient(to right, #fbbf24, #d97706);
}
.bjb6 {
  color: #fff;
  background: #ca8a04;
  background: linear-gradient(to right, #fde047, #ca8a04);
}
.bjb7 {
  color: #fff;
  background: #365314;
  background: linear-gradient(to right, #84cc16, #365314);
}
.bjb8 {
  color: #fff;
  background: #65a30d;
  background: linear-gradient(to right, #bef264, #65a30d);
}
.bjb9 {
  color: #fff;
  background: #134e4a;
  background: linear-gradient(to right, #0d9488, #134e4a);
}
.bjb10 {
  color: #fff;
  background: #047857;
  background: linear-gradient(to right, #10b981, #047857);
}
.bjb11 {
  color: #fff;
  background: #1e40af;
  background: linear-gradient(to right, #0ea5e9, #1e40af);
}
.bjb12 {
  color: #fff;
  background: #0369a1;
  background: linear-gradient(to right, #38bdf8, #0369a1);
}
.bjb13 {
  color: #fff;
  background: #1e40af;
  background: linear-gradient(to right, #3b82f6, #1e40af);
}
.bjb14 {
  color: #fff;
  background: #5b21b6;
  background: linear-gradient(to right, #a78bfa, #5b21b6);
}
.bjb15 {
  color: #fff;
  background: #ec4899;
  background: linear-gradient(to right, #06b6d4, #8b5cf6, #ec4899);
}
.bjb16 {
  color: #fff;
  background: #3b82f6;
  background: linear-gradient(to right, #fbbf24, #10b981, #3b82f6);
}
.bjb17 {
  color: #fff;
  background: #7c3aed;
  background: linear-gradient(to right, #fbbf24, #dc2626, #7c3aed);
}
.bjb18 {
  color: #fff;
  background: #0d9488;
  background: linear-gradient(to right, #fbbf24, #65a30d, #0d9488);
}
.bjb19 {
  color: #fff;
  background: #db2777;
  background: linear-gradient(to right, #1e40af, #7c3aed, #db2777);
}
.bjb20 {
  color: #fff;
  background: #22d3ee;
  background: linear-gradient(to right, #fb7185, #ec4899, #8b5cf6, #22d3ee);
}
.bjb21 {
  color: #fff;
  background: #06b6d4;
  background: linear-gradient(to right, #1e3a8a, #4f46e5, #db2777, #06b6d4);
}
.bjb22 {
  color: #fff;
  background: #f2709c;
  background: linear-gradient(to right, #ff9472, #f2709c);
}
.bjb23 {
  color: #fff;
  background: #e6dada;
  background: linear-gradient(to right, #274046, #e2a5a5);
}
.bjb24 {
  color: #fff;
  background: #ddd6f3;
  background: linear-gradient(to right, #faaca8, #ddd6f3);
}
.bjb25 {
  color: #fff;
  background: #616161;
  background: linear-gradient(to right, #9bc5c3, #616161);
}
.bjb26 {
  color: #fff;
  background: #50c9c3;
  background: linear-gradient(to right, #96deda, #50c9c3);
}
.bjb27 {
  color: #fff;
  background: #215f00;
  background: linear-gradient(to right, #a7be5b, #215f00);
}
.bjb28 {
  color: #fff;
  background: #c21500;
  background: linear-gradient(to right, #ffc500, #c21500);
}
.bjb29 {
  color: #fff;
  background: #bdbd69;
  background: linear-gradient(to right, #a5a1cd, #bdbd69);
}
.bjb30 {
  color: #fff;
  background: #666600;
  background: linear-gradient(to right, #999966, #666600);
}
.bjb31 {
  color: #fff;
  background: #de6262;
  background: linear-gradient(to right, #ffb88c, #de6262);
}
.bjb32 {
  color: #fff;
  background: #a73737;
  background: linear-gradient(to right, #7a2828, #a73737);
}
.bjb33 {
  color: #fff;
  background: #f857a6;
  background: linear-gradient(to right, #ff5858, #f857a6);
}
.bjb34 {
  color: #fff;
  background: #4b6cb7;
  background: linear-gradient(to right, #182848, #4b6cb7);
}
.bjb35 {
  color: #fff;
  background: #414d0b;
  background: linear-gradient(to right, #727a17, #414d0b);
}
.bjb36 {
  color: #fff;
  background: #e43a15;
  background: linear-gradient(to right, #e65245, #e43a15);
}
.bjb37 {
  color: #fff;
  background: #c04848;
  background: linear-gradient(to right, #480048, #c04848);
}
.bjb38 {
  color: #fff;
  background: #5f2c82;
  background: linear-gradient(to right, #49a09d, #5f2c82);
}
.bjb39 {
  color: #fff;
  background: #ec6f66;
  background: linear-gradient(to right, #f3a183, #ec6f66);
}
.bjb40 {
  color: #fff;
  background: #7474bf;
  background: linear-gradient(to right, #348ac7, #7474bf);
}
.bjb41 {
  color: #fff;
  background: #24c6dc;
  background: linear-gradient(to right, #514a9d, #24c6dc);
}
.bjb42 {
  color: #fff;
  background: #283048;
  background: linear-gradient(to right, #859398, #283048);
}
.bjb43 {
  color: #fff;
  background: #1cd8d2;
  background: linear-gradient(to right, #67d8a9, #14beb9);
}
.bjb44 {
  color: #fff;
  background: #232526;
  background: linear-gradient(to right, #414345, #232526);
}
.bjb45 {
  color: #fff;
  background: #5c258d;
  background: linear-gradient(to right, #4389a2, #5c258d);
}
.bjb46 {
  color: #fff;
  background: #134e5e;
  background: linear-gradient(to right, #71b280, #134e5e);
}
.bjb47 {
  color: #fff;
  background: #085078;
  background: linear-gradient(to right, #58c2b5, #085078);
}
.bjb48 {
  color: #fff;
  background: #4776e6;
  background: linear-gradient(to right, #8e54e9, #4776e6);
}
.bjb49 {
  color: #fff;
  background: #614385;
  background: linear-gradient(to right, #516395, #614385);
}
.bjb50 {
  color: #fff;
  background: #16222a;
  background: linear-gradient(to right, #3a6073, #16222a);
}
/* 填充到100%宽度 */
.b100 {
  display: block;
  width: 100% !important;
}
/* 圆角图片 */
.imgbr {
  border-radius: 12px !important;
  margin-bottom: 48px;
}
@media (max-width: 992px) {
  .imgbr {
    border-radius: 10px !important;
    margin-bottom: 24px;
  }
}
@media (max-width: 768px) {
  .imgbr {
    border-radius: 8px !important;
    margin-bottom: 16px;
  }
}
/* flex内页自定义图片卡片效果 */
.flex2 {
  margin: auto -16px;
}
.card_img {
  flex-basis: 25%;
  margin-bottom: 12px;
  padding: 0px 8px;
  box-sizing: border-box;
  overflow: hidden;
  transition: all.4s linear;
}
.card_img:hover {
  opacity: 0.85;
  filter: alpha(opacity=85);
  transform: translate3d(0, -10px, 0);
  transform: translate(0, -4px);
}
.card_img a {
  margin: 0 !important;
  padding: 0;
}
.card_img img:hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.card_img2 {
  flex-basis: 50%;
}
.card_img3 {
  flex-basis: 33.3333%;
}
.card_img5 {
  flex-basis: 20%;
}
.card_img6 {
  flex-basis: 16.666%;
}
@media (max-width: 768px) {
  .card_img {
    flex-basis: 50%;
    margin-bottom: 4px;
    padding: 0px 4px;
  }
  .card_img5 {
    flex-basis: 25%;
  }
  .card_img6 {
    flex-basis: 20%;
  }
}
/* 图标边距 */
.btn,
a.ui.button {
  margin-bottom: 0.4rem !important;
  margin-right: 0.4rem !important;
}
.btn-group-vertical .btn,
.buttons .ui.button {
  margin-bottom: 0 !important;
}