body, html {
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-user-select: none;
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch !important; /*这一句是在IOS下滑动流畅*/
}
/*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar{
  background-color: #272C33;
}

!*定义滚动条轨道 内阴影+圆角*!
::-webkit-scrollbar-track
{
  !*-webkit-box-shadow: inset 0 0 6px #212121;*!
  border-radius: 0px;
  background: #d8d8d8;
}*/
.block{
  display: block !important;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 0px;
  /*-webkit-box-shadow: inset 0 0 6px #ffccff;*/
  background: #6f6f6f;
}
ul, li {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

body, div, ul, li {
  font-size: 14px;
  box-sizing: border-box;
  color: #333;
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !important;
}

blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul, label, span, img {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Tahoma, "Helvetica", Helvetica, Arial, sans-serif !important;
}

a, button, input {
  outline: none;
  border: none;
  box-shadow: none !important;
}

.hint {
  color: #a3afb7;
  font-size: 14px;
}
.hint-title{
  font-weight: bold;
  background:#a3afb740 ;
  padding: 4px 2px;
}
.hint-container {
  color: #333131;
  font-size: 14px;
  background-color: #a3afb730;
  padding: 5px;
}

.hidden {
  display: none ;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-left {
  text-align: left !important;
}

/*两端对齐，垂直居中*/
.flex-between-vertical {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-horziontal {
  display: flex;
  align-items: center;
}
.flex-center{
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-wrap-content {
  display: flex;
  align-items: center;
  /*justify-content: center;*/
  flex-wrap: wrap;
}

.horizontal-flex-between {
  display: flex;
  justify-content: space-between;
}

.flexed {
  display: flex !important;
}

.flex-around-vertical {
  display: flex;
  width: 100%;
  justify-content: space-around;
  align-items: center;
}

.vertical-flex-end {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.horizontal-flex-end {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}
.horizontal-flex-start {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.vertical-flex-start {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.vertical-flex-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex-1 {
  flex: 1;
}

.flex-3 {
  flex: 3;
}

.vertical-middle {
  vertical-align: middle !important;
}

.margin-0 {
  margin: 0 !important
}

.margin-3 {
  margin: 3px !important
}

.margin-5 {
  margin: 5px !important
}

.margin-10 {
  margin: 10px !important
}

.margin-15 {
  margin: 15px !important
}

.margin-20 {
  margin: 20px !important
}

.margin-25 {
  margin: 25px !important
}

.margin-30 {
  margin: 30px !important
}

.margin-35 {
  margin: 35px !important
}

.margin-40 {
  margin: 40px !important
}

.margin-45 {
  margin: 45px !important
}

.margin-50 {
  margin: 50px !important
}

.margin-60 {
  margin: 60px !important
}

.margin-70 {
  margin: 70px !important
}

.margin-80 {
  margin: 80px !important
}

.margin-vertical-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important
}

.margin-vertical-3 {
  margin-top: 3px !important;
  margin-bottom: 3px !important
}

.margin-vertical-5 {
  margin-top: 5px !important;
  margin-bottom: 5px !important
}

.margin-vertical-10 {
  margin-top: 10px !important;
  margin-bottom: 10px !important
}

.margin-vertical-15 {
  margin-top: 15px !important;
  margin-bottom: 15px !important
}

.margin-vertical-20 {
  margin-top: 20px !important;
  margin-bottom: 20px !important
}

.margin-vertical-25 {
  margin-top: 25px !important;
  margin-bottom: 25px !important
}

.margin-vertical-30 {
  margin-top: 30px !important;
  margin-bottom: 30px !important
}

.margin-vertical-35 {
  margin-top: 35px !important;
  margin-bottom: 35px !important
}

.margin-vertical-40 {
  margin-top: 40px !important;
  margin-bottom: 40px !important
}

.margin-vertical-45 {
  margin-top: 45px !important;
  margin-bottom: 45px !important
}

.margin-vertical-50 {
  margin-top: 50px !important;
  margin-bottom: 50px !important
}

.margin-vertical-60 {
  margin-top: 60px !important;
  margin-bottom: 60px !important
}

.margin-vertical-70 {
  margin-top: 70px !important;
  margin-bottom: 70px !important
}

.margin-vertical-80 {
  margin-top: 80px !important;
  margin-bottom: 80px !important
}

.margin-horizontal-0 {
  margin-right: 0 !important;
  margin-left: 0 !important
}

.margin-horizontal-3 {
  margin-right: 3px !important;
  margin-left: 3px !important
}

.margin-horizontal-5 {
  margin-right: 5px !important;
  margin-left: 5px !important
}

.margin-horizontal-10 {
  margin-right: 10px !important;
  margin-left: 10px !important
}

.margin-horizontal-15 {
  margin-right: 15px !important;
  margin-left: 15px !important
}

.margin-horizontal-20 {
  margin-right: 20px !important;
  margin-left: 20px !important
}

.margin-horizontal-25 {
  margin-right: 25px !important;
  margin-left: 25px !important
}

.margin-horizontal-30 {
  margin-right: 30px !important;
  margin-left: 30px !important
}

.margin-horizontal-35 {
  margin-right: 35px !important;
  margin-left: 35px !important
}

.margin-horizontal-40 {
  margin-right: 40px !important;
  margin-left: 40px !important
}

.margin-horizontal-45 {
  margin-right: 45px !important;
  margin-left: 45px !important
}

.margin-horizontal-50 {
  margin-right: 50px !important;
  margin-left: 50px !important
}

.margin-horizontal-60 {
  margin-right: 60px !important;
  margin-left: 60px !important
}

.margin-horizontal-70 {
  margin-right: 70px !important;
  margin-left: 70px !important
}

.margin-horizontal-80 {
  margin-right: 80px !important;
  margin-left: 80px !important
}

.margin-top-0 {
  margin-top: 0 !important
}

.margin-top-3 {
  margin-top: 3px !important
}

.margin-top-5 {
  margin-top: 5px !important
}

.margin-top-10 {
  margin-top: 10px !important
}

.margin-top-15 {
  margin-top: 15px !important
}

.margin-top-20 {
  margin-top: 20px !important
}

.margin-top-25 {
  margin-top: 25px !important
}

.margin-top-30 {
  margin-top: 30px !important
}

.margin-top-35 {
  margin-top: 35px !important
}

.margin-top-40 {
  margin-top: 40px !important
}

.margin-top-45 {
  margin-top: 45px !important
}

.margin-top-50 {
  margin-top: 50px !important
}

.margin-top-60 {
  margin-top: 60px !important
}

.margin-top-70 {
  margin-top: 70px !important
}

.margin-top-80 {
  margin-top: 80px !important
}

.margin-bottom-0 {
  margin-bottom: 0 !important
}

.margin-bottom-3 {
  margin-bottom: 3px !important
}

.margin-bottom-5 {
  margin-bottom: 5px !important
}

.margin-bottom-10 {
  margin-bottom: 10px !important
}

.margin-bottom-15 {
  margin-bottom: 15px !important
}

.margin-bottom-20 {
  margin-bottom: 20px !important
}

.margin-bottom-25 {
  margin-bottom: 25px !important
}

.margin-bottom-30 {
  margin-bottom: 30px !important
}

.margin-bottom-35 {
  margin-bottom: 35px !important
}

.margin-bottom-40 {
  margin-bottom: 40px !important
}

.margin-bottom-45 {
  margin-bottom: 45px !important
}

.margin-bottom-50 {
  margin-bottom: 50px !important
}

.margin-bottom-60 {
  margin-bottom: 60px !important
}

.margin-bottom-70 {
  margin-bottom: 70px !important
}

.margin-bottom-80 {
  margin-bottom: 80px !important
}

.margin-left-0 {
  margin-left: 0 !important
}

.margin-left-3 {
  margin-left: 3px !important
}

.margin-left-5 {
  margin-left: 5px !important
}

.margin-left-10 {
  margin-left: 10px !important
}

.margin-left-15 {
  margin-left: 15px !important
}

.margin-left-20 {
  margin-left: 20px !important
}

.margin-left-25 {
  margin-left: 25px !important
}

.margin-left-30 {
  margin-left: 30px !important
}

.margin-left-35 {
  margin-left: 35px !important
}

.margin-left-40 {
  margin-left: 40px !important
}

.margin-left-45 {
  margin-left: 45px !important
}

.margin-left-50 {
  margin-left: 50px !important
}

.margin-left-60 {
  margin-left: 60px !important
}

.margin-left-70 {
  margin-left: 70px !important
}

.margin-left-80 {
  margin-left: 80px !important
}

.margin-right-0 {
  margin-right: 0 !important
}

.margin-right-3 {
  margin-right: 3px !important
}

.margin-right-5 {
  margin-right: 5px !important
}

.margin-right-10 {
  margin-right: 10px !important
}

.margin-right-15 {
  margin-right: 15px !important
}

.margin-right-20 {
  margin-right: 20px !important
}

.margin-right-25 {
  margin-right: 25px !important
}

.margin-right-30 {
  margin-right: 30px !important
}

.margin-right-35 {
  margin-right: 35px !important
}

.margin-right-40 {
  margin-right: 40px !important
}

.margin-right-45 {
  margin-right: 45px !important
}

.margin-right-50 {
  margin-right: 50px !important
}

.margin-right-60 {
  margin-right: 60px !important
}

.margin-right-70 {
  margin-right: 70px !important
}

.margin-right-80 {
  margin-right: 80px !important
}

.padding-0 {
  padding: 0 !important
}

.padding-3 {
  padding: 3px !important
}

.padding-5 {
  padding: 5px !important
}

.padding-10 {
  padding: 10px !important
}

.padding-15 {
  padding: 15px !important
}

.padding-20 {
  padding: 20px !important
}

.padding-25 {
  padding: 25px !important
}

.padding-30 {
  padding: 30px !important
}

.padding-35 {
  padding: 35px !important
}

.padding-40 {
  padding: 40px !important
}

.padding-45 {
  padding: 45px !important
}

.padding-50 {
  padding: 50px !important
}

.padding-60 {
  padding: 60px !important
}

.padding-70 {
  padding: 70px !important
}

.padding-80 {
  padding: 80px !important
}

.padding-vertical-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important
}

.padding-vertical-3 {
  padding-top: 3px !important;
  padding-bottom: 3px !important
}

.padding-vertical-5 {
  padding-top: 5px !important;
  padding-bottom: 5px !important
}

.padding-vertical-10 {
  padding-top: 10px !important;
  padding-bottom: 10px !important
}

.padding-vertical-15 {
  padding-top: 15px !important;
  padding-bottom: 15px !important
}

.padding-vertical-20 {
  padding-top: 20px !important;
  padding-bottom: 20px !important
}

.padding-vertical-25 {
  padding-top: 25px !important;
  padding-bottom: 25px !important
}

.padding-vertical-30 {
  padding-top: 30px !important;
  padding-bottom: 30px !important
}

.padding-vertical-35 {
  padding-top: 35px !important;
  padding-bottom: 35px !important
}

.padding-vertical-40 {
  padding-top: 40px !important;
  padding-bottom: 40px !important
}

.padding-vertical-45 {
  padding-top: 45px !important;
  padding-bottom: 45px !important
}

.padding-vertical-50 {
  padding-top: 50px !important;
  padding-bottom: 50px !important
}

.padding-vertical-60 {
  padding-top: 60px !important;
  padding-bottom: 60px !important
}

.padding-vertical-70 {
  padding-top: 70px !important;
  padding-bottom: 70px !important
}

.padding-vertical-80 {
  padding-top: 80px !important;
  padding-bottom: 80px !important
}

.padding-horizontal-0 {
  padding-right: 0 !important;
  padding-left: 0 !important
}

.padding-horizontal-3 {
  padding-right: 3px !important;
  padding-left: 3px !important
}

.padding-horizontal-5 {
  padding-right: 5px !important;
  padding-left: 5px !important
}

.padding-horizontal-10 {
  padding-right: 10px !important;
  padding-left: 10px !important
}

.padding-horizontal-15 {
  padding-right: 15px !important;
  padding-left: 15px !important
}

.padding-horizontal-20 {
  padding-right: 20px !important;
  padding-left: 20px !important
}

.padding-horizontal-25 {
  padding-right: 25px !important;
  padding-left: 25px !important
}

.padding-horizontal-30 {
  padding-right: 30px !important;
  padding-left: 30px !important
}

.padding-horizontal-35 {
  padding-right: 35px !important;
  padding-left: 35px !important
}

.padding-horizontal-40 {
  padding-right: 40px !important;
  padding-left: 40px !important
}

.padding-horizontal-45 {
  padding-right: 45px !important;
  padding-left: 45px !important
}

.padding-horizontal-50 {
  padding-right: 50px !important;
  padding-left: 50px !important
}

.padding-horizontal-60 {
  padding-right: 60px !important;
  padding-left: 60px !important
}

.padding-horizontal-70 {
  padding-right: 70px !important;
  padding-left: 70px !important
}

.padding-horizontal-80 {
  padding-right: 80px !important;
  padding-left: 80px !important
}

.padding-top-0 {
  padding-top: 0 !important
}

.padding-top-3 {
  padding-top: 3px !important
}

.padding-top-5 {
  padding-top: 5px !important
}

.padding-top-10 {
  padding-top: 10px !important
}

.padding-top-15 {
  padding-top: 15px !important
}

.padding-top-20 {
  padding-top: 20px !important
}

.padding-top-25 {
  padding-top: 25px !important
}

.padding-top-30 {
  padding-top: 30px !important
}

.padding-top-35 {
  padding-top: 35px !important
}

.padding-top-40 {
  padding-top: 40px !important
}

.padding-top-45 {
  padding-top: 45px !important
}

.padding-top-50 {
  padding-top: 50px !important
}

.padding-top-60 {
  padding-top: 60px !important
}

.padding-top-70 {
  padding-top: 70px !important
}

.padding-top-80 {
  padding-top: 80px !important
}

.padding-bottom-0 {
  padding-bottom: 0 !important
}

.padding-bottom-3 {
  padding-bottom: 3px !important
}

.padding-bottom-5 {
  padding-bottom: 5px !important
}

.padding-bottom-10 {
  padding-bottom: 10px !important
}

.padding-bottom-15 {
  padding-bottom: 15px !important
}

.padding-bottom-20 {
  padding-bottom: 20px !important
}

.padding-bottom-25 {
  padding-bottom: 25px !important
}

.padding-bottom-30 {
  padding-bottom: 30px !important
}

.padding-bottom-35 {
  padding-bottom: 35px !important
}

.padding-bottom-40 {
  padding-bottom: 40px !important
}

.padding-bottom-45 {
  padding-bottom: 45px !important
}

.padding-bottom-50 {
  padding-bottom: 50px !important
}

.padding-bottom-60 {
  padding-bottom: 60px !important
}

.padding-bottom-70 {
  padding-bottom: 70px !important
}

.padding-bottom-80 {
  padding-bottom: 80px !important
}

.padding-left-0 {
  padding-left: 0 !important
}

.padding-left-3 {
  padding-left: 3px !important
}

.padding-left-5 {
  padding-left: 5px !important
}

.padding-left-10 {
  padding-left: 10px !important
}

.padding-left-15 {
  padding-left: 15px !important
}

.padding-left-20 {
  padding-left: 20px !important
}

.padding-left-25 {
  padding-left: 25px !important
}

.padding-left-30 {
  padding-left: 30px !important
}

.padding-left-35 {
  padding-left: 35px !important
}

.padding-left-40 {
  padding-left: 40px !important
}

.padding-left-45 {
  padding-left: 45px !important
}

.padding-left-50 {
  padding-left: 50px !important
}

.padding-left-60 {
  padding-left: 60px !important
}

.padding-left-70 {
  padding-left: 70px !important
}

.padding-left-80 {
  padding-left: 80px !important
}

.padding-right-0 {
  padding-right: 0 !important
}

.padding-right-3 {
  padding-right: 3px !important
}

.padding-right-5 {
  padding-right: 5px !important
}

.padding-right-10 {
  padding-right: 10px !important
}

.padding-right-15 {
  padding-right: 15px !important
}

.padding-right-20 {
  padding-right: 20px !important
}

.padding-right-25 {
  padding-right: 25px !important
}

.padding-right-30 {
  padding-right: 30px !important
}

.padding-right-35 {
  padding-right: 35px !important
}

.padding-right-40 {
  padding-right: 40px !important
}

.padding-right-45 {
  padding-right: 45px !important
}

.padding-right-50 {
  padding-right: 50px !important
}

.padding-right-60 {
  padding-right: 60px !important
}

.padding-right-70 {
  padding-right: 70px !important
}

.padding-right-80 {
  padding-right: 80px !important
}

.font-size-0 {
  font-size: 0 !important
}

.font-size-10 {
  font-size: 10px !important
}

.font-size-12 {
  font-size: 12px !important
}

.font-size-14 {
  font-size: 14px !important
}

.font-size-16 {
  font-size: 16px !important
}

.font-size-18 {
  font-size: 18px !important
}

.font-size-20 {
  font-size: 20px !important
}

.font-size-24 {
  font-size: 24px !important
}

.font-size-26 {
  font-size: 26px !important
}

.font-size-30 {
  font-size: 30px !important
}

.font-size-40 {
  font-size: 40px !important
}

.font-size-50 {
  font-size: 50px !important
}

.font-size-60 {
  font-size: 60px !important
}

.font-size-70 {
  font-size: 70px !important
}

.font-size-80 {
  font-size: 80px !important
}

.primary-100 {
  color: #e8f1f8 !important
}

.primary-200 {
  color: #d5e4f1 !important
}

.primary-300 {
  color: #bcd8f1 !important
}

.primary-400 {
  color: #a2caee !important
}

.primary-500 {
  color: #89bceb !important
}

.primary-600 {
  color: #15abeb !important
}

.primary-700 {
  color: #4e97d9 !important
}

.primary-800 {
  color: #3583ca !important
}

.red-100 {
  color: #ffeaea !important
}

.red-200 {
  color: #fad3d3 !important
}

.red-300 {
  color: #fab4b4 !important
}

.red-400 {
  color: #fa9898 !important
}

.red-500 {
  color: #fa7a7a !important
}

.red-600 {
  color: #f96868 !important
}

.red-700 {
  color: #e9595b !important
}

.red-800 {
  color: #d6494b !important
}

.pink-100 {
  color: #fce4ec !important
}

.pink-200 {
  color: #ffccde !important
}

.pink-300 {
  color: #fba9c6 !important
}

.pink-400 {
  color: #fb8db4 !important
}

.pink-500 {
  color: #f978a6 !important
}

.pink-600 {
  color: #f96197 !important
}

.pink-700 {
  color: #f44c87 !important
}

.pink-800 {
  color: #e53b75 !important
}

.purple-100 {
  color: #f6f2ff !important
}

.purple-200 {
  color: #e3dbf4 !important
}

.purple-300 {
  color: #d2c5ec !important
}

.purple-400 {
  color: #bba7e4 !important
}

.purple-500 {
  color: #a58add !important
}

.purple-600 {
  color: #926dde !important
}

.purple-700 {
  color: #7c51d1 !important
}

.purple-800 {
  color: #6d45bc !important
}

.indigo-100 {
  color: #edeff9 !important
}

.indigo-200 {
  color: #dadef5 !important
}

.indigo-300 {
  color: #bcc5f4 !important
}

.indigo-400 {
  color: #9daaf3 !important
}

.indigo-500 {
  color: #8897ec !important
}

.indigo-600 {
  color: #677ae4 !important
}

.indigo-700 {
  color: #5166d6 !important
}

.indigo-800 {
  color: #465bd4 !important
}

.blue-100 {
  color: #e8f1f8 !important
}

.blue-200 {
  color: #d5e4f1 !important
}

.blue-300 {
  color: #bcd8f1 !important
}

.blue-400 {
  color: #a2caee !important
}

.blue-500 {
  color: #89bceb !important
}

.blue-600 {
  color: #15abeb !important
}

.blue-700 {
  color: #4e97d9 !important
}

.blue-800 {
  color: #3583ca !important
}

.cyan-100 {
  color: #ecf9fa !important
}

.cyan-200 {
  color: #d3eff2 !important
}

.cyan-300 {
  color: #baeaef !important
}

.cyan-400 {
  color: #9ae1e9 !important
}

.cyan-500 {
  color: #77d6e1 !important
}

.cyan-600 {
  color: #57c7d4 !important
}

.cyan-700 {
  color: #47b8c6 !important
}

.cyan-800 {
  color: #37a9b7 !important
}

.teal-100 {
  color: #ecfdfc !important
}

.teal-200 {
  color: #cdf4f1 !important
}

.teal-300 {
  color: #99e1da !important
}

.teal-400 {
  color: #79d1c9 !important
}

.teal-500 {
  color: #56bfb5 !important
}

.teal-600 {
  color: #3aa99e !important
}

.teal-700 {
  color: #269b8f !important
}

.teal-800 {
  color: #178d81 !important
}

.green-100 {
  color: #e7faf2 !important
}

.green-200 {
  color: #bfedd8 !important
}

.green-300 {
  color: #9fe5c5 !important
}

.green-400 {
  color: #7dd3ae !important
}

.green-500 {
  color: #5cd29d !important
}

.green-600 {
  color: #46be8a !important
}

.green-700 {
  color: #36ab7a !important
}

.green-800 {
  color: #279566 !important
}

.light-green-100 {
  color: #f1f7ea !important
}

.light-green-200 {
  color: #e0ecd1 !important
}

.light-green-300 {
  color: #cadfb1 !important
}

.light-green-400 {
  color: #bad896 !important
}

.light-green-500 {
  color: #acd57c !important
}

.light-green-600 {
  color: #9ece67 !important
}

.light-green-700 {
  color: #83b944 !important
}

.light-green-800 {
  color: #70a532 !important
}

.yellow-100 {
  color: #fffae7 !important
}

.yellow-200 {
  color: #f9eec1 !important
}

.yellow-300 {
  color: #f6e7a9 !important
}

.yellow-400 {
  color: #f8e59b !important
}

.yellow-500 {
  color: #f7e083 !important
}

.yellow-600 {
  color: #f7da64 !important
}

.yellow-700 {
  color: #f9cd48 !important
}

.yellow-800 {
  color: #fbc02d !important
}

.orange-100 {
  color: #fff3e6 !important
}

.orange-200 {
  color: #ffddb9 !important
}

.orange-300 {
  color: #fbce9d !important
}

.orange-400 {
  color: #f6be80 !important
}

.orange-500 {
  color: #f4b066 !important
}

.orange-600 {
  color: #f2a654 !important
}

.orange-700 {
  color: #ec9940 !important
}

.orange-800 {
  color: #e98f2e !important
}

.brown-100 {
  color: #fae6df !important
}

.brown-200 {
  color: #e2bdaf !important
}

.brown-300 {
  color: #d3aa9c !important
}

.brown-400 {
  color: #b98e7e !important
}

.brown-500 {
  color: #a17768 !important
}

.brown-600 {
  color: #8d6658 !important
}

.brown-700 {
  color: #7d5b4f !important
}

.brown-800 {
  color: #715146 !important
}

.grey-100 {
  color: #fafafa !important
}

.grey-200 {
  color: #eee !important
}

.grey-300 {
  color: #e0e0e0 !important
}

.grey-400 {
  color: #bdbdbd !important
}

.grey-500 {
  color: #9e9e9e !important
}

.grey-600 {
  color: #757575 !important
}

.grey-700 {
  color: #616161 !important
}

.grey-800 {
  color: #424242 !important
}

.blue-grey-100 {
  color: #f3f7f9 !important
}

.blue-grey-200 {
  color: #e4eaec !important
}

.blue-grey-300 {
  color: #ccd5db !important
}

.blue-grey-400 {
  color: #a3afb7 !important
}

.blue-grey-500 {
  color: #76838f !important
}

.blue-grey-600 {
  color: #526069 !important
}

.blue-grey-700 {
  color: #37474f !important
}

.blue-grey-800 {
  color: #263238 !important
}

.bg-primary-100 {
  background-color: #e8f1f8 !important
}

.bg-primary-200 {
  background-color: #d5e4f1 !important
}

.bg-primary-300 {
  background-color: #bcd8f1 !important
}

.bg-primary-400 {
  background-color: #a2caee !important
}

.bg-primary-500 {
  background-color: #89bceb !important
}

.bg-primary-600 {
  background-color: #15abeb !important
}

.bg-primary-700 {
  background-color: #4e97d9 !important
}

.bg-primary-800 {
  background-color: #3583ca !important
}

.bg-red-100 {
  background-color: #ffeaea !important
}

.bg-red-200 {
  background-color: #fad3d3 !important
}

.bg-red-300 {
  background-color: #fab4b4 !important
}

.bg-red-400 {
  background-color: #fa9898 !important
}

.bg-red-500 {
  background-color: #fa7a7a !important
}

.bg-red-600 {
  background-color: #f96868 !important
}

.bg-red-700 {
  background-color: #e9595b !important
}

.bg-red-800 {
  background-color: #d6494b !important
}

.bg-pink-100 {
  background-color: #fce4ec !important
}

.bg-pink-200 {
  background-color: #ffccde !important
}

.bg-pink-300 {
  background-color: #fba9c6 !important
}

.bg-pink-400 {
  background-color: #fb8db4 !important
}

.bg-pink-500 {
  background-color: #f978a6 !important
}

.bg-pink-600 {
  background-color: #f96197 !important
}

.bg-pink-700 {
  background-color: #f44c87 !important
}

.bg-pink-800 {
  background-color: #e53b75 !important
}

.bg-purple-100 {
  background-color: #f6f2ff !important
}

.bg-purple-200 {
  background-color: #e3dbf4 !important
}

.bg-purple-300 {
  background-color: #d2c5ec !important
}

.bg-purple-400 {
  background-color: #bba7e4 !important
}

.bg-purple-500 {
  background-color: #a58add !important
}

.bg-purple-600 {
  background-color: #926dde !important
}

.bg-purple-700 {
  background-color: #7c51d1 !important
}

.bg-purple-800 {
  background-color: #6d45bc !important
}

.bg-indigo-100 {
  background-color: #edeff9 !important
}

.bg-indigo-200 {
  background-color: #dadef5 !important
}

.bg-indigo-300 {
  background-color: #bcc5f4 !important
}

.bg-indigo-400 {
  background-color: #9daaf3 !important
}

.bg-indigo-500 {
  background-color: #8897ec !important
}

.bg-indigo-600 {
  background-color: #677ae4 !important
}

.bg-indigo-700 {
  background-color: #5166d6 !important
}

.bg-indigo-800 {
  background-color: #465bd4 !important
}

.bg-blue-100 {
  background-color: #e8f1f8 !important
}

.bg-blue-200 {
  background-color: #d5e4f1 !important
}

.bg-blue-300 {
  background-color: #bcd8f1 !important
}

.bg-blue-400 {
  background-color: #a2caee !important
}

.bg-blue-500 {
  background-color: #89bceb !important
}

.bg-blue-600 {
  background-color: #15abeb !important
}

.bg-blue-700 {
  background-color: #4e97d9 !important
}

.bg-blue-800 {
  background-color: #3583ca !important
}

.bg-cyan-100 {
  background-color: #ecf9fa !important
}

.bg-cyan-200 {
  background-color: #d3eff2 !important
}

.bg-cyan-300 {
  background-color: #baeaef !important
}

.bg-cyan-400 {
  background-color: #9ae1e9 !important
}

.bg-cyan-500 {
  background-color: #77d6e1 !important
}

.bg-cyan-600 {
  background-color: #57c7d4 !important
}

.bg-cyan-700 {
  background-color: #47b8c6 !important
}

.bg-cyan-800 {
  background-color: #37a9b7 !important
}

.bg-teal-100 {
  background-color: #ecfdfc !important
}

.bg-teal-200 {
  background-color: #cdf4f1 !important
}

.bg-teal-300 {
  background-color: #99e1da !important
}

.bg-teal-400 {
  background-color: #79d1c9 !important
}

.bg-teal-500 {
  background-color: #56bfb5 !important
}

.bg-teal-600 {
  background-color: #3aa99e !important
}

.bg-teal-700 {
  background-color: #269b8f !important
}

.bg-teal-800 {
  background-color: #178d81 !important
}

.bg-green-100 {
  background-color: #e7faf2 !important
}

.bg-green-200 {
  background-color: #bfedd8 !important
}

.bg-green-300 {
  background-color: #9fe5c5 !important
}

.bg-green-400 {
  background-color: #7dd3ae !important
}

.bg-green-500 {
  background-color: #5cd29d !important
}

.bg-green-600 {
  background-color: #46be8a !important
}

.bg-green-700 {
  background-color: #36ab7a !important
}

.bg-green-800 {
  background-color: #279566 !important
}

.bg-light-green-100 {
  background-color: #f1f7ea !important
}

.bg-light-green-200 {
  background-color: #e0ecd1 !important
}

.bg-light-green-300 {
  background-color: #cadfb1 !important
}

.bg-light-green-400 {
  background-color: #bad896 !important
}

.bg-light-green-500 {
  background-color: #acd57c !important
}

.bg-light-green-600 {
  background-color: #9ece67 !important
}

.bg-light-green-700 {
  background-color: #83b944 !important
}

.bg-light-green-800 {
  background-color: #70a532 !important
}

.bg-yellow-100 {
  background-color: #fffae7 !important
}

.bg-yellow-200 {
  background-color: #f9eec1 !important
}

.bg-yellow-300 {
  background-color: #f6e7a9 !important
}

.bg-yellow-400 {
  background-color: #f8e59b !important
}

.bg-yellow-500 {
  background-color: #f7e083 !important
}

.bg-yellow-600 {
  background-color: #f7da64 !important
}

.bg-yellow-700 {
  background-color: #f9cd48 !important
}

.bg-yellow-800 {
  background-color: #fbc02d !important
}

.bg-orange-100 {
  background-color: #fff3e6 !important
}

.bg-orange-200 {
  background-color: #ffddb9 !important
}

.bg-orange-300 {
  background-color: #fbce9d !important
}

.bg-orange-400 {
  background-color: #f6be80 !important
}

.bg-orange-500 {
  background-color: #f4b066 !important
}

.bg-orange-600 {
  background-color: #f2a654 !important
}

.bg-orange-700 {
  background-color: #ec9940 !important
}

.bg-orange-800 {
  background-color: #e98f2e !important
}

.bg-brown-100 {
  background-color: #fae6df !important
}

.bg-brown-200 {
  background-color: #e2bdaf !important
}

.bg-brown-300 {
  background-color: #d3aa9c !important
}

.bg-brown-400 {
  background-color: #b98e7e !important
}

.bg-brown-500 {
  background-color: #a17768 !important
}

.bg-brown-600 {
  background-color: #8d6658 !important
}

.bg-brown-700 {
  background-color: #7d5b4f !important
}

.bg-brown-800 {
  background-color: #715146 !important
}

.bg-grey-100 {
  background-color: #fafafa !important
}

.bg-grey-200 {
  background-color: #eee !important
}

.bg-grey-300 {
  background-color: #e0e0e0 !important
}

.bg-grey-400 {
  background-color: #bdbdbd !important
}

.bg-grey-500 {
  background-color: #9e9e9e !important
}

.bg-grey-600 {
  background-color: #757575 !important
}

.bg-grey-700 {
  background-color: #616161 !important
}

.bg-grey-800 {
  background-color: #424242 !important
}

.bg-blue-grey-100 {
  background-color: #f3f7f9 !important
}

.bg-blue-grey-200 {
  background-color: #e4eaec !important
}

.bg-blue-grey-300 {
  background-color: #ccd5db !important
}

.bg-blue-grey-400 {
  background-color: #a3afb7 !important
}

.bg-blue-grey-500 {
  background-color: #76838f !important
}

.bg-blue-grey-600 {
  background-color: #526069 !important
}

.bg-blue-grey-700 {
  background-color: #37474f !important
}

.bg-blue-grey-800 {
  background-color: #263238 !important
}

.black {
  color: #000 !important
}

.white {
  color: #fff !important
}

.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
}

.bg-white {
  color: #76838f;
  background-color: #fff !important;
}

.bg-primary {
  color: #fff;
  background-color: #15abeb
}

.bg-primary:hover {
  background-color: #8fc1f0
}

.bg-primary a, a.bg-primary {
  color: #fff
}

.bg-primary a:hover, a.bg-primary:hover {
  color: #fff
}

.bg-success {
  color: #fff;
  background-color: #46be8a
}

.bg-success:hover {
  background-color: #6ccba2
}

.bg-success a, a.bg-success {
  color: #fff
}

.bg-success a:hover, a.bg-success:hover {
  color: #fff
}

.bg-info {
  color: #fff;
  background-color: #57c7d4
}

.bg-info:hover {
  background-color: #80d5de
}

.bg-info a, a.bg-info {
  color: #fff
}

.bg-info a:hover, a.bg-info:hover {
  color: #fff
}

.bg-warning {
  color: #fff;
  background-color: #f2a654
}

.bg-warning:hover {
  background-color: #f6bf83
}

.bg-warning a, a.bg-warning {
  color: #fff
}

.bg-warning a:hover, a.bg-warning:hover {
  color: #fff
}

.bg-danger {
  color: #fff;
  background-color: #f96868
}

.bg-danger:hover {
  background-color: #fb9999
}

.bg-danger a, a.bg-danger {
  color: #fff
}

.bg-danger a:hover, a.bg-danger:hover {
  color: #fff
}

.bg-dark {
  color: #fff;
  background-color: #526069
}

.bg-dark:hover {
  background-color: #687a86
}

.bg-dark a, a.bg-dark {
  color: #fff
}

.bg-dark a:hover, a.bg-dark:hover {
  color: #fff
}

.social-facebook {
  color: #fff;
  background-color: #3b5998 !important
}

.social-facebook:focus, .social-facebook:hover {
  color: #fff;
  background-color: #4c70ba !important
}

.social-facebook.active, .social-facebook:active {
  color: #fff;
  background-color: #2d4373 !important
}

.bg-facebook {
  background-color: #3b5998
}

.social-twitter {
  color: #fff;
  background-color: #55acee !important
}

.social-twitter:focus, .social-twitter:hover {
  color: #fff;
  background-color: #83c3f3 !important
}

.social-twitter.active, .social-twitter:active {
  color: #fff;
  background-color: #2795e9 !important
}

.bg-twitter {
  background-color: #55acee
}

.social-google-plus {
  color: #fff;
  background-color: #dd4b39 !important
}

.social-google-plus:focus, .social-google-plus:hover {
  color: #fff;
  background-color: #e47365 !important
}

.social-google-plus.active, .social-google-plus:active {
  color: #fff;
  background-color: #c23321 !important
}

.bg-google-plus {
  background-color: #dd4b39
}

.social-linkedin {
  color: #fff;
  background-color: #0976b4 !important
}

.social-linkedin:focus, .social-linkedin:hover {
  color: #fff;
  background-color: #0b96e5 !important
}

.social-linkedin.active, .social-linkedin:active {
  color: #fff;
  background-color: #075683 !important
}

.bg-linkedin {
  background-color: #0976b4
}

.social-flickr {
  color: #fff;
  background-color: #ff0084 !important
}

.social-flickr:focus, .social-flickr:hover {
  color: #fff;
  background-color: #ff339d !important
}

.social-flickr.active, .social-flickr:active {
  color: #fff;
  background-color: #cc006a !important
}

.bg-flickr {
  background-color: #ff0084
}

.social-tumblr {
  color: #fff;
  background-color: #35465c !important
}

.social-tumblr:focus, .social-tumblr:hover {
  color: #fff;
  background-color: #485f7c !important
}

.social-tumblr.active, .social-tumblr:active {
  color: #fff;
  background-color: #222d3c !important
}

.bg-tumblr {
  background-color: #35465c
}

.social-xing {
  color: #fff;
  background-color: #024b4d !important
}

.social-xing:focus, .social-xing:hover {
  color: #fff;
  background-color: #037b7f !important
}

.social-xing.active, .social-xing:active {
  color: #fff;
  background-color: #011b1b !important
}

.bg-xing {
  background-color: #024b4d
}

.social-github {
  color: #fff;
  background-color: #4183c4 !important
}

.social-github:focus, .social-github:hover {
  color: #fff;
  background-color: #689cd0 !important
}

.social-github.active, .social-github:active {
  color: #fff;
  background-color: #3269a0 !important
}

.bg-github {
  background-color: #4183c4
}

.social-html5 {
  color: #fff;
  background-color: #e44f26 !important
}

.social-html5:focus, .social-html5:hover {
  color: #fff;
  background-color: #ea7453 !important
}

.social-html5.active, .social-html5:active {
  color: #fff;
  background-color: #bf3c18 !important
}

.bg-html5 {
  background-color: #e44f26
}

.social-openid {
  color: #fff;
  background-color: #f67d28 !important
}

.social-openid:focus, .social-openid:hover {
  color: #fff;
  background-color: #f89b59 !important
}

.social-openid.active, .social-openid:active {
  color: #fff;
  background-color: #e26309 !important
}

.bg-openid {
  background-color: #f67d28
}

.social-stack-overflow {
  color: #fff;
  background-color: #f86c01 !important
}

.social-stack-overflow:focus, .social-stack-overflow:hover {
  color: #fff;
  background-color: #fe882e !important
}

.social-stack-overflow.active, .social-stack-overflow:active {
  color: #fff;
  background-color: #c55601 !important
}

.bg-stack-overflow {
  background-color: #f86c01
}

.social-css3 {
  color: #fff;
  background-color: #1572b6 !important
}

.social-css3:focus, .social-css3:hover {
  color: #fff;
  background-color: #1a8fe4 !important
}

.social-css3.active, .social-css3:active {
  color: #fff;
  background-color: #105588 !important
}

.bg-css3 {
  background-color: #1572b6
}

.social-youtube {
  color: #fff;
  background-color: #b31217 !important
}

.social-youtube:focus, .social-youtube:hover {
  color: #fff;
  background-color: #e1171d !important
}

.social-youtube.active, .social-youtube:active {
  color: #fff;
  background-color: #850d11 !important
}

.bg-youtube {
  background-color: #b31217
}

.social-dribbble {
  color: #fff;
  background-color: #c32361 !important
}

.social-dribbble:focus, .social-dribbble:hover {
  color: #fff;
  background-color: #dc3d7b !important
}

.social-dribbble.active, .social-dribbble:active {
  color: #fff;
  background-color: #981b4b !important
}

.bg-dribbble {
  background-color: #c32361
}

.social-instagram {
  color: #fff;
  background-color: #3f729b !important
}

.social-instagram:focus, .social-instagram:hover {
  color: #fff;
  background-color: #548cb9 !important
}

.social-instagram.active, .social-instagram:active {
  color: #fff;
  background-color: #305777 !important
}

.bg-instagram {
  background-color: #3f729b
}

.social-pinterest {
  color: #fff;
  background-color: #cc2127 !important
}

.social-pinterest:focus, .social-pinterest:hover {
  color: #fff;
  background-color: #e04046 !important
}

.social-pinterest.active, .social-pinterest:active {
  color: #fff;
  background-color: #a01a1f !important
}

.bg-pinterest {
  background-color: #cc2127
}

.social-vk {
  color: #fff;
  background-color: #3d5a7d !important
}

.social-vk:focus, .social-vk:hover {
  color: #fff;
  background-color: #4e739f !important
}

.social-vk.active, .social-vk:active {
  color: #fff;
  background-color: #2c415b !important
}

.bg-vk {
  background-color: #3d5a7d
}

.social-yahoo {
  color: #fff;
  background-color: #350178 !important
}

.social-yahoo:focus, .social-yahoo:hover {
  color: #fff;
  background-color: #4b01ab !important
}

.social-yahoo.active, .social-yahoo:active {
  color: #fff;
  background-color: #1f0145 !important
}

.bg-yahoo {
  background-color: #350178
}

.social-behance {
  color: #fff;
  background-color: #1769ff !important
}

.social-behance:focus, .social-behance:hover {
  color: #fff;
  background-color: #4a8aff !important
}

.social-behance.active, .social-behance:active {
  color: #fff;
  background-color: #0050e3 !important
}

.bg-behance {
  background-color: #024b4d
}

.social-dropbox {
  color: #fff;
  background-color: #007ee5 !important
}

.social-dropbox:focus, .social-dropbox:hover {
  color: #fff;
  background-color: #1998ff !important
}

.social-dropbox.active, .social-dropbox:active {
  color: #fff;
  background-color: #0062b2 !important
}

.bg-dropbox {
  background-color: #007ee5
}

.social-reddit {
  color: #fff;
  background-color: #ff4500 !important
}

.social-reddit:focus, .social-reddit:hover {
  color: #fff;
  background-color: #ff6a33 !important
}

.social-reddit.active, .social-reddit:active {
  color: #fff;
  background-color: #cc3700 !important
}

.bg-reddit {
  background-color: #ff4500
}

.social-spotify {
  color: #fff;
  background-color: #7ab800 !important
}

.social-spotify:focus, .social-spotify:hover {
  color: #fff;
  background-color: #9ceb00 !important
}

.social-spotify.active, .social-spotify:active {
  color: #fff;
  background-color: #588500 !important
}

.bg-spotify {
  background-color: #7ab800
}

.social-vine {
  color: #fff;
  background-color: #00b488 !important
}

.social-vine:focus, .social-vine:hover {
  color: #fff;
  background-color: #00e7af !important
}

.social-vine.active, .social-vine:active {
  color: #fff;
  background-color: #008161 !important
}

.bg-vine {
  background-color: #00b488
}

.social-foursquare {
  color: #fff;
  background-color: #0cbadf !important
}

.social-foursquare:focus, .social-foursquare:hover {
  color: #fff;
  background-color: #2ad0f4 !important
}

.social-foursquare.active, .social-foursquare:active {
  color: #fff;
  background-color: #0992af !important
}

.bg-foursquare {
  background-color: #0cbadf
}

.social-vimeo {
  color: #fff;
  background-color: #1ab7ea !important
}

.social-vimeo:focus, .social-vimeo:hover {
  color: #fff;
  background-color: #49c6ee !important
}

.social-vimeo.active, .social-vimeo:active {
  color: #fff;
  background-color: #1295bf !important
}

.bg-vimeo {
  background-color: #1ab7ea
}

.social-skype {
  color: #fff;
  background-color: #77bcfd !important
}

.social-skype:focus, .social-skype:hover {
  color: #fff;
  background-color: #a9d5fe !important
}

.social-skype.active, .social-skype:active {
  color: #fff;
  background-color: #45a3fc !important
}

.bg-skype {
  background-color: #77bcfd
}

.social-evernote {
  color: #fff;
  background-color: #46bf8c !important
}

.social-evernote:focus, .social-evernote:hover {
  color: #fff;
  background-color: #6ccca4 !important
}

.social-evernote.active, .social-evernote:active {
  color: #fff;
  background-color: #369c71 !important
}

.bg-evernote {
  background-color: #46bf8c
}

.img_80 {
  width: 80px;
  height: 80px;
}
.img_50 {
  width: 50px;
  height: 50px;
}

.img-circle {
  border-radius: 50%;
}

.qrcode-img {
  width: 70vw;
  height: 70vw;
}

.tablayout {
  width: 80%;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 6px;
  border: 1px solid #E24615;
  height: 30px;

}

.tablayout > li {
  flex: 1;
  text-align: center;
  height: 100%;
  display: inline-flex;
  color: #E24615;
  align-items: center;
  justify-content: center;
}

.tablayout > li:not(:last-child):not(:last-of-type) {
  border-right: 1px solid #FF0358;
}

.tablayout > li.active {
  background-image: -webkit-linear-gradient(left, #FF4D89, #FF0358);
  color: #fff;
}

.float-btn {
  background-image: -webkit-linear-gradient(left, #FF4D89, #FF0358);
  /*opacity: .5;*/
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: fixed;
  bottom: 20%;
  right: 20px;
  font-size: 12px;

  color: white;
}

.width_100p {
  width: 100%;
}

.width-80p {
  width: 80%;
}

.width-150 {
  width: 150px !important;
}

.width-180 {
  width: 180px !important;
}

.width-90 {
  width: 90px !important;
}

.width-80 {
  width: 80px !important;
}

.width-70 {
  width: 70px !important;
}

.width-60 {
  width: 60px !important;
}

.width-76 {
  width: 76px !important;
}

.width-72 {
  width: 72px !important;
}

.width-200 {
  width: 200px !important;
}

.width-250 {
  width: 250px !important;
}

.width_320 {
  width: 320px !important;
}

.height-600 {
  height: 600px;
}

.height-100 {
  height: 100px;
}

.height_32 {
  height: 32px !important;
}

.icon-16 {
  width: 16px;
  height: 16px !important;
}

.unselect {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 单行显示 */
.text-ellipsis-1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*将height与line-height设置成一致，可防止文字显示不完整*/
.text-ellipsis-2 {
  white-space: nowrap !important;;
  overflow: hidden !important;;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clam: 2
}

.text-ellipsis-3 {
  white-space: nowrap !important;;
  overflow: hidden !important;;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clam: 3
}

.text-ellipsis-4 {
  white-space: nowrap !important;;
  overflow: hidden !important;;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clam: 4
}

.text-muted {
  color: #666 !important;
}

.cursor-point {
  cursor: pointer;
}

.border-bottom {
  border-bottom: solid .02rem #efefef;
}

.panel-hint {
  border: 0.05rem solid #cdcfd6;
  line-height: 30px;
  min-height: 32px;
  background-color: #F5F7FA;
  display: inline-block;
  border-top-left-radius: 5px;
  margin-right: -4px;
  color: #606266;
  border-right-style: none;
  width: 30px;
  text-align: center;
  border-bottom-left-radius: 5px;
}

.break-work {
  word-wrap: break-word !important;
}

.overflow-hidden {
  overflow: hidden !important;
}