:root {
  /* 全局主题颜色 */
  /* var()包裹css变量 */
  --main-color: rgb(255, 106, 0);
  --main-colorHover: rgb(183, 126, 86);
  --main-colorActive: rgb(137, 88, 54);
  --main-light: rgba(255, 106, 0, 0.6);

  --ass-color: #e8ecf5;

  --info-color: rgb(144, 147, 153);
  --info-light: rgba(144, 147, 153, 0.2);
  --info-NoLight: rgba(144, 147, 153, 0.5);

  --success-color: rgb(15, 188, 94);
  --success-colorHover: rgb(65, 148, 103);
  --success-colorActive: rgb(46, 95, 68);
  --success-light: rgba(15, 188, 94, 0.6);

  --warning-color: rgb(255, 98, 33);
  --warning-colorHover: rgb(255, 98, 33);
  --warning-colorActive: rgb(255, 98, 33);
  --warning-light: rgba(255, 98, 33, 0.6);

  --danger-color: rgb(254, 82, 82);
  --danger-colorHover: rgb(254, 82, 82);
  --danger-colorActive: rgb(254, 82, 82);
  --danger-light: rgba(254, 82, 82, 0.6);

  --error-color: rgb(255, 0, 25);
  --gold-color: rgb(255, 255, 0);
  --border: rgb(233, 233, 233);
  --undertint: rgb(228, 228, 228);
  --default: rgb(243, 245, 248);
  --black: #000;
  --color3: #333;
  --color6: #666;
  --color9: #999;
  --colorC: #ccc;
  --colorD: #ddd;
  --colorW: #fff;
}

/*新增全局选中时*/
::selection {
  color: #fff;
  background: var(--main-color);
}

#app iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

/* 全局通用默认配置 */
body {
  font-size: 16px;
  font-family: Roboto, Helvetica, Tahoma, sans-serif;
  color: #333;
}

.ws {
  width: 1300px;
  margin: 0 auto;
}

body,
main {
  background-color: var(--default);
}

@media screen and (max-width: 1024px) {
  main {
    padding: 0 10px;
    width: 100% !important;
    padding-top: 20px;
    padding-bottom: 30px;
  }

  .ws {
    width: 100% !important;
  }
}

/* 全局宽度 浮动 */
.fl {
  float: left;
}

.fr {
  float: right;
}

.w-20 {
  width: 18%;
}

.w-25 {
  width: 23%;
}

.w-33 {
  width: 32%;
}

.w-50 {
  width: 49%;
}

.w-100 {
  width: 100%;
}

.w-100-m {
  max-width: 100%;
}

.w-f {
  -webkit-box-flex: 1;
  flex: 1;
}

/* 全局宽度浮动 结束 */

/* 全局布局方式 position */

.pr {
  position: relative;
}

.pa-t-r {
  right: 0;
}

.pa-t-l,
.pa-t-r {
  position: absolute;
  top: 0;
}

.pa-t-l {
  left: 0;
}

.pa-b-r {
  right: 0;
}

.pa-b-l,
.pa-b-r {
  position: absolute;
  bottom: 0;
}

.pa-b-l {
  left: 0;
}

.pa-c {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.pf-t-l {
  top: 0;
}

.pf-b-l,
.pf-t-l {
  position: fixed;
  left: 0;
}

.pf-b-l {
  bottom: 0;
}

.pf-c {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* 全局布局方式结束 */

/* 全局padding margin */

.pd-xs {
  padding: 6px;
}

.pd-s {
  padding: 10px;
}

.pd-m {
  padding: 16px;
}

.pd-l {
  padding: 20px;
}

.pd-t-xs {
  padding-top: 6px;
}

.pd-t-s {
  padding-top: 10px;
}

.pd-t-m {
  padding-top: 16px;
}

.pd-t-l {
  padding-top: 20px;
}

.pd-b-xs {
  padding-bottom: 6px;
}

.pd-b-s {
  padding-bottom: 10px;
}

.pd-b-l {
  padding-bottom: 20px;
}

.pd-l-xs {
  padding-left: 6px;
}

.pd-l-s {
  padding-left: 10px;
}

.pd-l-m {
  padding-left: 16px;
}

.pd-l-l {
  padding-left: 20px;
}

.pd-r-xs {
  padding-right: 6px;
}

.pd-r-s {
  padding-right: 10px;
}

.pd-r-m {
  padding-right: 16px;
}

.pd-r-l {
  padding-right: 20px;
}

.pd-x-xs {
  padding: 0 6px;
}

.pd-x-s {
  padding: 0 10px;
}

.pd-x-m {
  padding: 0 16px;
}

.pd-x-l {
  padding: 0 20px;
}

.pd-x-xl {
  padding: 0 40px;
}

.pd-y-xs {
  padding: 6px 0;
}

.pd-y-s {
  padding: 10px 0;
}

.pd-y-m {
  padding: 16px 0;
}

.pd-y-l {
  padding: 20px 0;
}

.pd-xs-s {
  padding: 6px 10px;
}

.pd-xs-m {
  padding: 6px 16px;
}

.pd-xs-l {
  padding: 6px 20px;
}

.pd-s-xs {
  padding: 10px 6px;
}

.pd-s-m {
  padding: 10px 16px;
}

.pd-s-l {
  padding: 10px 20px;
}

.pd-m-s {
  padding: 16px 10px;
}

.pd-m-l {
  padding: 16px 20px;
}

.mg-xs {
  margin: 6px;
}

.mg-s {
  margin: 10px;
}

.mg-t-xs {
  margin-top: 6px;
}

.mg-t-s {
  margin-top: 10px;
}

.mg-t-m {
  margin-top: 16px;
}

.mg-t-l {
  margin-top: 20px;
}

.mg-t-xl {
  margin-top: 40px;
}

.mg-b-xs {
  margin-bottom: 6px;
}

.mg-b-s {
  margin-bottom: 10px;
}

.mg-b-m {
  margin-bottom: 16px;
}

.mg-b-l {
  margin-bottom: 20px;
}

.mg-b-xl {
  margin-bottom: 40px;
}

.mg-l-xs {
  margin-left: 6px;
}

.mg-l-s {
  margin-left: 10px;
}

.mg-l-m {
  margin-left: 16px;
}

.mg-l-l {
  margin-left: 20px;
}

.mg-r-xs {
  margin-right: 6px;
}

.mg-r-s {
  margin-right: 10px;
}

.mg-r-m {
  margin-right: 16px;
}

.mg-r-l {
  margin-right: 20px;
}

.mg-r-xl {
  margin-right: 40px;
}

.mg-x-xs {
  margin: 0 6px;
}

.mg-x-s {
  margin: 0 10px;
}

.mg-x-l {
  margin: 0 20px;
}

.mg-y-xs {
  margin: 6px 0;
}

.mg-y-s {
  margin: 10px 0;
}

.mg-y-m {
  margin: 16px 0;
}

.mg-y-l {
  margin: 20px 0;
}

/* 全局padding margin结束 */

/* 图片大小 */
.img-xs {
  width: 80px;
  height: 80px;
}

/* 图片大小结束 */

/* 全局边框 圆角 */
.br-s {
  border-radius: 6px;
}

.br-m {
  border-radius: 18px;
}

.br-r {
  border-radius: 50%;
}

.br-r-s {
  border-radius: 0 6px 6px 0;
}

.br-r-m {
  border-radius: 0 18px 18px 0;
}

.br-l-s {
  border-radius: 6px 0 0 6px;
}

.br-l-m {
  border-radius: 18px 0 0 18px;
}

.bdn {
  border: none;
}

.bd {
  border: 1px solid #e9e9e9;
  border: 1px solid var(--border);
}

.bd-e4 {
  border: 1px solid #e4e4e4;
  border: 1px solid var(--undertint);
}

.bd-3d {
  border: 1px solid #ddd;
  border: 1px solid var(--colorD);
}

.bd-p {
  border: 1px solid #4066b8;
  border: 1px solid var(--main-color);
}

.bd-f {
  border: 1px solid #fff;
  border: 1px solid var(--colorW);
}

.bd-b {
  border-bottom: 1px solid #e9e9e9;
  border-bottom: 1px solid var(--border);
}

.bd-b-3d {
  border-bottom: 1px solid #ddd;
  border-bottom: 1px solid var(--colorD);
}

.bd-b-p {
  border-bottom: 1px solid #4066b8;
  border-bottom: 1px solid var(--main-color);
}

.bd-t {
  border-top: 1px solid #e9e9e9;
  border-top: 1px solid var(--border);
}

.bd-t-3d {
  border-top: 1px solid #ddd;
  border-top: 1px solid var(--colorD);
}

.bd-r {
  border-right: 1px solid #e9e9e9;
  border-right: 1px solid var(--border);
}

.bd-l {
  border-left: 1px solid #e9e9e9;
  border-left: 1px solid var(--border);
}

/* 全局 边框 圆角结束 */

/* 全局flex相关  */
.dn {
  display: none;
}

.dib {
  display: inline-block;
}

.db {
  display: block;
}

.df,
.df-w {
  display: -webkit-box;
  display: flex;
}

.df-w {
  flex-wrap: wrap;
}

.df-sb,
.df-sb-w {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.df-sb-w {
  flex-wrap: wrap;
}

.df-c,
.df-c-w {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.df-c-w {
  flex-wrap: wrap;
}

.df-c-c {
  -webkit-box-pack: center;
  justify-content: center;
}

.df-c-c,
.df-c-e {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.df-c-e {
  -webkit-box-pack: end;
  justify-content: flex-end;
}

.df-c-sb {
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.df-c-sa,
.df-c-sb {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.df-c-sa {
  justify-content: space-around;
}

.df-c-fs {
  -webkit-box-pack: start;
  justify-content: flex-start;
}

.df-c-fe,
.df-c-fs {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.df-c-fe {
  -webkit-box-pack: end;
  justify-content: flex-end;
}

.df-d,
.df-d-sb {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}

.df-d-sb {
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.df-d-sa {
  justify-content: space-around;
}

.df-d-c,
.df-d-sa {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}

.df-d-c {
  -webkit-box-align: center;
  align-items: center;
}

/* 全局flex相关结束 */

/* 全局对其方式 文字 颜色 加粗*/
.h-100 {
  height: 100%;
}

.h-l,
.h-l-h {
  height: 40px;
}

.h-l-h {
  line-height: 40px;
}

.h-m,
.h-m-h {
  height: 36px;
}

.h-m-h {
  line-height: 36px;
}

.ta-l {
  text-align: left;
}

.ta-c {
  text-align: center;
}

.ta-r {
  text-align: right;
}

.fs-s,
.fs-s-h {
  font-size: 12px !important;
}

.fs-s-h {
  line-height: 18px !important;
}

.fs-m,
.fs-m-h {
  font-size: 14px !important;
}

.fs-m-h {
  line-height: 22px !important;
}

.fs-l,
.fs-l-h {
  font-size: 16px !important;
}

.fs-l-h {
  line-height: 26px;
}

.fs-xl {
  font-size: 18px !important;
}

.fn {
  font-weight: 400;
}

.fw {
  font-weight: 700;
}

.cl-3 {
  color: #333;
  color: var(--color3);
}

.cl-6 {
  color: #666;
  color: var(--color6);
}

.cl-9 {
  color: #999;
  color: var(--color9);
}

.cl-c {
  color: #ccc;
  color: var(--colorC);
}

.cl-f {
  color: #fff;
  color: var(--colorW);
}

.cl-p {
  color: #4066b8;
  color: var(--main-color);
}

.cl-s {
  color: #0fbc5e;
  color: var(--success-color);
}

.cl-w {
  color: #ff6221;
  color: var(--warning-color);
}

.cl-d {
  color: #fe5252;
  color: var(--danger-color);
}

.cl-e {
  color: #ff0019;
  color: var(--error-color);
}

.cl-g {
  color: #ff0;
  color: var(--gold-color);
}

.cl-b {
  color: #e9e9e9;
  color: var(--border);
}

/* 全局对其方式 文字 颜色 加粗 结束*/

/* 全局层级 */
.zl-xs {
  z-index: 1;
}

.zl-s {
  z-index: 2;
}

.zl-m {
  z-index: 3;
}

/* 全局层级结束 */

/* 全局背景色 */

.bgc {
  background-color: #f3f5f8;
  background-color: var(--default);
}

.bgc-p {
  background-color: #4066b8;
  background-color: var(--main-color);
}

.bgc-s {
  background-color: #0fbc5e;
  background-color: var(--success-color);
}

.bgc-w {
  background-color: #ff6221;
  background-color: var(--warning-color);
}

.bgc-d {
  background-color: #fe5252;
  background-color: var(--danger-color);
}

.bgc-e {
  background-color: #ff0019;
  background-color: var(--error-color);
}

.bgc-3 {
  background-color: #333;
  background-color: var(--color3);
}

.bgc-b {
  background-color: #e9e9e9;
  background-color: var(--border);
}

.bgc-f {
  background-color: #fff;
  background-color: var(--colorW);
}

.bga-p {
  background-color: rgba(68, 96, 155, 0.3);
}

/* 全局背景色结束 */

/* 全局btn */
.s-btn {
  padding: 10px 20px;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-box-pack: center;
  justify-content: center;
  position: relative;
  min-width: 100px;
}

.s-btn.border {
  background-color: #fff !important;
  border: 1px solid var(--main-color);
  color: var(--main-color);
}

.s-btn.border .s-btn_content {
  color: var(--main-color) !important;
}

.s-btn,
.s-btn .s-btn_content {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.s-btn .s-btn_content {
  font-size: 14px;
  color: #202020;
  letter-spacing: 1px;
}

.s-btn.info {
  background-color: #f5f5f5;
}

.s-btn.info:hover {
  background-color: #e5e5e5;
}

.s-btn.info:active {
  background-color: rgba(0, 0, 0, 0.3);
}

.s-btn.primary {
  background-color: var(--main-color);
}

.s-btn.primary:hover {
  background-color: var(--main-colorHover);
}

.s-btn.primary:active {
  background-color: var(--main-colorActive);
}

.s-btn.primary .s-btn_content {
  color: #fff;
}

.s-btn.success {
  background-color: var(--success-color);
}

.s-btn.success:hover {
  background-color: var(--success-colorHover);
}

.s-btn.success:active {
  background-color: var(--success-colorActive);
}

.s-btn.success .s-btn_content {
  color: #fff;
}

.s-btn.error {
  background-color: var(--error-color);
}

.s-btn.error:hover {
  background-color: var(--error-color);
}

.s-btn.error:active {
  background-color: var(--error-color);
}

.s-btn.error .s-btn_content {
  color: #fff;
}

.s-btn.warning {
  background-color: var(--warning-color);
}

.s-btn.warning:hover {
  background-color: var(--warning-colorHover);
}

.s-btn.warning:active {
  background-color: var(--warning-colorActive);
}

.s-btn.warning .s-btn_content {
  color: #fff;
}

/* success修改水波纹 */
.s-btn.success .ripple,
.s-btn.error .ripple,
.s-btn.warning .ripple {
  background-color: rgba(0, 0, 0, 0.3);
}

.s-btn .s-btn_loading {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: -webkit-inline-box;
  display: inline-flex;
  vertical-align: middle;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}

.s-btn .s-btn_loading svg {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  -webkit-animation: progress-circular-rotate-data-v-805ebae0 1.4s linear infinite;
  animation: progress-circular-rotate-data-v-805ebae0 1.4s linear infinite;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.s-btn .s-btn_loading svg circle {
  -webkit-animation: progress-circular-dash-data-v-805ebae0 1.4s ease-in-out infinite;
  animation: progress-circular-dash-data-v-805ebae0 1.4s ease-in-out infinite;
  stroke-linecap: round;
  stroke-dasharray: 80, 200;
  stroke-dashoffset: 0px;
  stroke: currentColor;
  z-index: 2;
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}

@-webkit-keyframes progress-circular-rotate-data-v-805ebae0 {
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}

@keyframes progress-circular-rotate-data-v-805ebae0 {
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}

@-webkit-keyframes progress-circular-dash-data-v-805ebae0 {
  to {
    stroke-dasharray: 100, 200;
    stroke-dashoffset: -124px;
  }
}

@keyframes progress-circular-dash-data-v-805ebae0 {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0px;
  }

  50% {
    stroke-dasharray: 100, 200;
    stroke-dashoffset: -15px;
  }

  to {
    stroke-dasharray: 100, 200;
    stroke-dashoffset: -124px;
  }
}

/* 全局btn 结束 */

/* ellipsis:当对象内文本溢出时显示省略标记(...)。 */
.ellipsis {
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
  overflow: hidden;
}

.l1 {
  white-space: normal;
  word-break: break-all;
  -webkit-line-clamp: 1;
}

.l1,
.l2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.l2 {
  -webkit-line-clamp: 2;
}

/* 清除浮动 */
.clear {
  clear: both;
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
}

/* 效果 hover */
.h-cl-p:hover,
.h-ul-p:hover {
  cursor: pointer;
  color: var(--main-color);
}

.h-ul:hover,
.h-ul-p:hover {
  cursor: pointer;
  text-decoration: underline;
}

.hv-bga-p:hover {
  cursor: pointer;
  background-color: rgba(68, 96, 155, 0.1);
}

/* hover效果结束 */

/* 全局鼠标状态 */
.cp {
  cursor: pointer;
}

/* 禁用状态 */
.noData,
.pen {
  pointer-events: none;
}

/* 全局鼠标状态结束 */

/* 全局信息提示 */

.message {
  position: fixed;
  top: 5vh;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  max-width: 1000px;
  z-index: 9999999;
  overflow: hidden;
  opacity: 0;
  background-color: var(--colorW);
  box-shadow: 0 0 9px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  color: var(--color3);
  font-size: 14px !important;
  display: -webkit-box;
  display: flex;
  border-radius: 6px;
}

.message .iconfont {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}

.message .icon-success {
  color: var(--success-color);
  background-color: var(--success-color);
}

.message .icon-error {
  color: var(--error-color);
  background-color: var(--error-color);
}

.message .icon-warning {
  color: var(--warning-color);
  background-color: var(--warning-color);
}

.message .icon-info {
  color: var(--info-color);
  background-color: var(--info-color);
}

.message .iconfont::after {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  background-color: var(--colorW);
  border-radius: 50%;
  background-clip: content-box;
}

.message .iconfont::before {
  z-index: 10;
}

.message .content {
  color: var(--color3);
  height: 40px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  padding: 0 20px;
}

@media screen and (max-width: 1024px) {
  .message {
    left: 50vw;
    max-width: 100%;
  }

  .message span {
    padding: 0 10px;
    max-height: 40px;
    white-space: normal;
    word-break: break-all;
    -webkit-line-clamp: 1;
    flex: 1;
    flex-wrap: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.bounce-enter-active {
  -webkit-animation: bounce-in-data 0.5s;
  animation: bounce-in-data 0.5s;
}

.bounce-leave-active {
  opacity: 0;
  animation-name: fadenum;
  animation-duration: 2s;
}

@keyframes fadenum {
  0% {
    top: 5vh;
    opacity: 1;
  }

  99% {
    top: 5vh;
    opacity: 1;
  }

  100% {
    opacity: 0;
    top: 4vh;
  }
}

@keyframes bounce-in-data {
  0% {
    top: 4vh;
    opacity: 0;
  }

  to {
    opacity: 1;
    top: 5vh;
  }
}

/* 全局信息提示结束 */

/* 全局滚动条 */
.sl-y::-webkit-scrollbar {
  width: 8px;
}

.sl-y::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
  border-radius: 8px;
}

.sl-x::-webkit-scrollbar {
  height: 8px;
}

.sl-x::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
  border-radius: 8px;
}

/* 全局滚动条结束 */

/* 水波纹点击 */
.ripple {
  position: absolute;
  /* 为了保持和button的位置关系 */
  border-radius: 50% 50%;
  /* 水波纹圆形 */
  background: var(--info-light);
  /* 水波纹颜色 */

  /* 下面与动画效果相关 是0%时候的状态 */
  /* 默认的 transform-origin 是 center 即中心点 */
  transform: scale(0);
  -webkit-transform: scale(0);
  opacity: 1;
}

.rippleEffect {
  /* 执行时长0.6s、效果为渐变(linear)、名称为rippleDrop的动画 */
  -webkit-animation: rippleDrop 0.6s linear;
  animation: rippleDrop 0.6s linear;
}

@keyframes rippleDrop {

  /* 下面是动画100%时候的状态 */
  100% {
    transform: scale(2);
    -webkit-transform: scale(2);
    opacity: 0;
  }
}

@-webkit-keyframes rippleDrop {
  100% {
    transform: scale(2);
    -webkit-transform: scale(2);
    opacity: 0;
  }
}

/* 水波纹点击结束 */

/* 全局面包屑 */
.v-breadcrumb {
  font-size: 14px;
  height: 40px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.v-breadcrumb a {
  color: #666;
  display: inline-block;
  max-width: 600px;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  white-space: normal;
  word-break: break-all;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.v-breadcrumb a .iconfont-ut {
  font-size: 12px;
  margin-right: 6px;
  color: #666;
}

/* 隐藏最后一个图标 */
.v-breadcrumb a:last-child i {
  display: none;
}

.v-breadcrumb a:first-child {
  color: #333;
}

.v-breadcrumb a:last-child {
  color: hsla(0, 0%, 60%, 0.5);
  cursor: not-allowed;
  pointer-events: none;
}

/* 全局面包屑结束 */

/* v-input-upward */
.v-input-upward {
  position: relative;
  width: 100%;
  height: 36px;
}

.v-input-upward input {
  outline: none;
  width: 100%;
  padding: 10px 0;
  margin-bottom: 30px;
  color: #333;
  font-size: 14px;
  border: none;
  border-bottom: 1px solid #d4d4d4;
  background-color: transparent;
  letter-spacing: 0.5px;
}

/* 输入框聚焦时 */
.v-input-upward input:focus {
  border-color: var(--main-color);
}

/* 类型名称 */
.v-input-upward label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  color: #d4d4d4;
  pointer-events: none;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  font-size: 14px;
}

/* 输入框选中时 以及有内容 */
.v-input-upward input:focus+label,
.v-input-upward input:valid+label {
  top: -20px;
  color: var(--main-color);
  font-size: 12px;
}

.v-select .v-input-upward .iconfont-ut {
  font-size: 14px;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  position: absolute;
  top: 11px;
  right: 0;
}

/* v-input-upward结束 */

/* v-checkbox */
.v-checkbox {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  cursor: pointer;
}

/* 选中时 */
.v-checkbox.primary .checkbox.active {
  background-color: var(--main-color);
  border-color: var(--main-color);
}

/* 复选框 */
.v-checkbox .checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid #d4d4d4;
  background-color: #fff;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  font-weight: lighter;
  color: #fff;
}

.v-checkbox .checkbox-txt {
  margin-left: 5px;
  font-size: 12px;
  color: #666;
}

/* v-checkbox结束 */

/* b-dialog */
.b-dialog {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  visibility: hidden;
}

.b-dialog.active {
  height: 100%;
  opacity: 1;
  visibility: visible;
}

/* 内容区 */
.b-dialog .b-dialog-content {
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  position: absolute;
  top: 17%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  box-shadow: 1px 2px 6px rgb(0 0 0 / 9%);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
}

.b-dialog .b-dialog-content.active {
  opacity: 1;
  width: 320px;
}

/* 提示内容 */
.b-dialog .b-dialog-content .b-dialog-body {
  text-align: center;
  margin-bottom: 16px;
}

/* 提示文字 */
.b-dialog .b-dialog-content .b-dialog-body p {
  font-size: 14px;
  color: #333;
  padding: 0;
  margin: 0;
}

.b-dialog .b-dialog-content .b-dialog-body p+p {
  margin-top: 10px;
}

/* 提示符号 */
.b-dialog .b-dialog-content .b-dialog-body p .iconwenhao1 {
  font-size: 40px;
  color: #ffb709;
}

/* 操作区域 */
.b-dialog .b-dialog-content .b-dialog-footer {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  padding: 0 20px;
}

.b-dialog .b-dialog-content .b-dialog-footer button {
  width: 110px;
  height: 36px;
  font-size: 14px;
  color: var(--main-color);
  background-color: #fff;
  border: 1px solid var(--main-color);
  border-radius: 20px;
  letter-spacing: 1px;
  cursor: pointer;
}

.b-dialog .b-dialog-content .b-dialog-footer button+button {
  color: #fff;
  background-color: var(--main-color);
  margin-left: 16px;
}

/* .b-dialog 结束 */

/* v-dialog */
.v-dialog {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 106;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
  visibility: hidden;
}

.v-dialog.active {
  height: 100%;
  opacity: 1;
  visibility: visible;
}

.v-dialog .v-dialog-content {
  background-color: #fff;
  border-radius: 6px;
  position: absolute;
  top: 20%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
}

.v-dialog .v-dialog-content.active {
  max-height: 680px;
  top: 12%;
  opacity: 1;
}

.v-dialog .v-dialog-content .v-dialog-title {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  color: #333;
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
  margin: 0 20px 20px;
  position: relative;
}

.v-dialog .v-dialog-content .v-dialog-title .iconfont-ut {
  font-size: 20px;
  position: absolute;
  top: 10px;
  right: -8px;
  cursor: pointer;
}

.v-dialog .v-dialog-content .v-dialog-body {
  padding: 0 20px;
  margin-bottom: 20px;
}

.v-dialog .v-dialog-content .v-dialog-footer {
  display: -webkit-box;
  display: flex;
  padding: 0 20px;
  margin-bottom: 20px;
}

.v-dialog .v-dialog-content .center {
  -webkit-box-pack: center;
  justify-content: center;
}

.v-dialog .v-dialog-content .v-dialog-footer button {
  height: 34px;
  font-size: 14px;
  color: var(--main-color);
  background-color: #fff;
  border: 1px solid var(--main-color);
  letter-spacing: 1px;
  padding: 0 20px;
  cursor: pointer;
}

.v-dialog .v-dialog-content .v-dialog-footer button.agree {
  color: #fff;
  background-color: var(--main-color);
  margin-left: 20px;
}

@media screen and (max-width: 1024px) {
  .v-dialog .v-dialog-content {
    width: auto !important;
    left: 0;
    -webkit-transform: translateX(7%);
    transform: translateX(7%);
    margin: 0;
  }

}

/* v-dialog结束 */

/* .v-share */
.v-share {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 100;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
}

.v-share .content {
  background-color: #fff;
  position: absolute;
  width: 350px;
  top: 25%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  overflow: hidden;
  box-shadow: 0 0 30px -14px #000;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
}

.v-share .content .title {
  width: 100%;
  padding: 20px;
  font-size: 16px;
  color: #000;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.v-share .content .title .iconfont-ut {
  display: inline-block;
  width: 20px;
  height: 20px;
  color: #fff;
  font-size: 12px;
  background-color: #e91e63;
  line-height: 20px;
  text-align: center;
  margin-right: 10px;
}

.v-share .content .body {
  padding: 0 30px;
  margin-bottom: 30px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
}

/* 每项分享按钮 */
.v-share .content .body a {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  color: #fff;
  font-size: 30px;
  line-height: 50px;
  text-align: center;
}

.v-share .content .body a:first-child {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-color: #3b569d;
  text-align: right;
  color: #fff;
}

.v-share .content .body a:nth-child(2) {
  color: #0078b6;
}

.v-share .content .body a:nth-child(3) {
  color: #1ca1f1;
}

.v-share .content .body a:nth-child(4) {
  color: #474545;
}

.v-share .content footer button {
  float: right;
  height: 40px;
  padding: 0 20px;
  background-color: var(--main-color);
  font-size: 14px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
}

.v-share.active {
  opacity: 1;
}

.v-share .content.active {
  top: 30%;
  opacity: 1;
}

/* v-share 结束 */

/* v-radio */
.v-radio {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

/* 基础未选中 */
.v-radio .v-radio_checked {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #ddd;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding: 1px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
  background-color: #ddd;
}

/* 禁止选择 */
.v-radio.disabled .v-radio_checked {
  border-color: #ccc;
  background-color: rgb(221, 221, 221);
  cursor: not-allowed;
}

.v-radio.disabled .v-radio_checked p {
  background-color: rgb(221, 221, 221);
}

/* 选中 */
.v-radio .v-radio_checked.active {
  border-color: var(--main-color);
}

.v-radio .v-radio_checked p {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.v-radio .v-radio_checked.active p {
  background-color: var(--main-color);
}

.v-radio .v-radio_content {
  -webkit-box-flex: 1;
  flex: 1;
  font-size: 14px;
  margin-left: 10px;
  color: #333;
  cursor: pointer;
}

/* v-radio 结束 */

/* 拖动验证 */
.slideVerify {
  width: 100%;
  max-width: 294px;
  height: 6px;
  line-height: 42px;
}

.slideVerify .drag_bg {
  width: 0;
  height: 6px;
}

.slideVerify .handler_Verify {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  position: absolute;
  top: -7px;
  left: 0;
  cursor: move;
}

.slideVerify .handler_ok_bg {
  background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==) no-repeat 50%;
}

/* 拖动验证 */

/* 翻页器 */

/* 翻页器图标 */
.pageination li {
  min-width: 32px;
  height: 32px;
  background: #fff;
  margin-right: 5px;
  line-height: 32px;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}

.pageination li i {
  font-size: 14px;
}

/* 禁用状态 */
.pageination li i.ban {
  color: #ccc;
  cursor: not-allowed;
}

/* 每页按钮 */
.pageination li a {
  min-width: 32px;
  height: 32px;
  display: block;
  line-height: 32px;
  text-align: center;
  font-size: 14px;
  color: #666;
  padding: 0 3px;
}

/* 当前页 和鼠标经过时 */
.pageination li a.active,
.pageination li a:hover {
  background-color: var(--main-color);
  color: var(--colorW);
}

/* 上下页图标 */
.pageination li a i {
  color: #333;
}

.pageination li a:hover i {
  color: #fff;
}

/* 翻页器最后一项 */
.pageination li:last-child {
  margin-right: 0;
}

/* 翻页器 */

/* checkbox */
.checkbox {
  align-items: center;
  cursor: pointer;
  display: flex;
}

.checkbox .checkbox-frame {
  background-color: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  height: 16px;
  position: relative;
  width: 16px;
}

.checkbox.primary .checkbox-frame.active:after {
  background-color: var(--main-color);
  border-radius: 4px;
  content: "";
  height: 12px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
}

.checkbox .checkbox-txt {
  flex: 1;
  font-size: 12px;
  margin-left: 5px;
}

/* checkbox */

/* input */

.input {
  margin: 10px 0 30px;
  position: relative;
}

.input input {
  border: 1px solid #e9e9e9;
  border-radius: 4px;
  height: 36px;
  padding: 6px 10px;
  width: 100%;
}

.input input:focus {
  border: 1px solid var(--main-color);
}

.input input::placeholder {
  color: #999;
}

.input input[type="number"] {
  outline: none;
}

.input label {
  color: #333;
  font-size: 14px;
  left: 0;
  padding: 5px 0;
  pointer-events: none;
  position: absolute;
  top: -25px;
  transition: all 0.3s;
}

.input label span {
  background-color: var(--error-color);
  border-radius: 50%;
  display: inline-block;
  height: 4px;
  width: 4px;
  margin-right: 5px;
}

/* input结束 */