/* 
* 各类间距（margin 和 padding）
*/

.fl {
  float: left;
}
.fr {
  float: right;
}
.p-5px {
  padding: 5px;
}

.pt-5px {
  padding-top: 5px;
}

.pb-5px {
  padding-bottom: 5px;
}

.pl-5px {
  padding-left: 5px;
}

.pr-5px {
  padding-right: 5px;
}

.px-5px {
  padding-left: 5px;
  padding-right: 5px;
}

.py-5px {
  padding-top: 5px;
  padding-bottom: 5px;
}

.m-5px {
  margin: 5px;
}

.mt-5px {
  margin-top: 5px;
}

.mb-5px {
  margin-bottom: 5px;
}

.ml-5px {
  margin-left: 5px;
}

.mr-5px {
  margin-right: 5px;
}

.mx-5px {
  margin-left: 5px;
  margin-right: 5px;
}

.my-5px {
  margin-top: 5px;
  margin-bottom: 5px;
}

.my-30px {
  margin-top: 30px;
  margin-bottom: 30px;
}
.my-50px {
  margin-top: 50px;
  margin-bottom: 50px;
}

.p-10px {
  padding: 10px;
}

.pt-10px {
  padding-top: 10px;
}

.pb-10px {
  padding-bottom: 10px;
}

.pl-10px {
  padding-left: 10px;
}

.pr-10px {
  padding-right: 10px;
}

.px-10px {
  padding-left: 10px;
  padding-right: 10px;
}

.py-10px {
  padding-top: 10px;
  padding-bottom: 10px;
}

.m-10px {
  margin: 10px;
}

.mt-10px {
  margin-top: 10px;
}

.mb-10px {
  margin-bottom: 10px;
}

.ml-10px {
  margin-left: 10px;
}

.mr-10px {
  margin-right: 10px;
}

.mx-10px {
  margin-left: 10px;
  margin-right: 10px;
}

.my-10px {
  margin-top: 10px;
  margin-bottom: 10px;
}

.p-15px {
  padding: 15px;
}

.pt-15px {
  padding-top: 15px;
}

.pb-15px {
  padding-bottom: 15px;
}

.pl-15px {
  padding-left: 15px;
}

.pr-15px {
  padding-right: 15px;
}

.px-15px {
  padding-left: 15px;
  padding-right: 15px;
}

.py-15px {
  padding-top: 15px;
  padding-bottom: 15px;
}

.m-15px {
  margin: 15px;
}

.mt-15px {
  margin-top: 15px;
}

.mb-15px {
  margin-bottom: 15px;
}

.ml-15px {
  margin-left: 15px;
}

.mr-15px {
  margin-right: 15px;
}

.mx-15px {
  margin-left: 15px;
  margin-right: 15px;
}

.my-15px {
  margin-top: 15px;
  margin-bottom: 15px;
}

.p-20px {
  padding: 20px;
}

.pt-20px {
  padding-top: 20px;
}

.pb-20px {
  padding-bottom: 20px;
}

.pl-20px {
  padding-left: 20px;
}

.pr-20px {
  padding-right: 20px;
}

.px-20px {
  padding-left: 20px;
  padding-right: 20px;
}

.py-20px {
  padding-top: 20px;
  padding-bottom: 20px;
}

.m-20px {
  margin: 20px;
}

.mt-20px {
  margin-top: 20px;
}

.mb-20px {
  margin-bottom: 20px;
}

.ml-20px {
  margin-left: 20px;
}

.mr-20px {
  margin-right: 20px;
}

.mx-20px {
  margin-left: 20px;
  margin-right: 20px;
}

.my-20px {
  margin-top: 20px;
  margin-bottom: 20px;
}

.p-25px {
  padding: 25px;
}

.pt-25px {
  padding-top: 25px;
}

.pb-25px {
  padding-bottom: 25px;
}

.pl-25px {
  padding-left: 25px;
}

.pr-25px {
  padding-right: 25px;
}

.px-25px {
  padding-left: 25px;
  padding-right: 25px;
}

.py-25px {
  padding-top: 25px;
  padding-bottom: 25px;
}

.m-25px {
  margin: 25px;
}

.mt-25px {
  margin-top: 25px;
}

.mb-25px {
  margin-bottom: 25px;
}

.ml-25px {
  margin-left: 25px;
}

.mr-25px {
  margin-right: 25px;
}

.mx-25px {
  margin-left: 25px;
  margin-right: 25px;
}

.my-25px {
  margin-top: 25px;
  margin-bottom: 25px;
}

.p-30px {
  padding: 30px;
}

.pt-30px {
  padding-top: 30px;
}

.pb-30px {
  padding-bottom: 30px;
}

.pl-30px {
  padding-left: 30px;
}

.pr-30px {
  padding-right: 30px;
}

.px-30px {
  padding-left: 30px;
  padding-right: 30px;
}

.py-30px {
  padding-top: 30px;
  padding-bottom: 30px;
}

.m-30px {
  margin: 30px;
}

.mt-30px {
  margin-top: 30px;
}

.mb-30px {
  margin-bottom: 30px;
}

.ml-30px {
  margin-left: 30px;
}

.mr-30px {
  margin-right: 30px;
}

.mx-30px {
  margin-left: 30px;
  margin-right: 30px;
}

.my-30px {
  margin-top: 30px;
  margin-bottom: 30px;
}

.p-40px {
  padding: 40px;
}

.pt-40px {
  padding-top: 40px;
}

.pb-40px {
  padding-bottom: 40px;
}

.pl-40px {
  padding-left: 40px;
}

.pr-40px {
  padding-right: 40px;
}

.px-40px {
  padding-left: 40px;
  padding-right: 40px;
}

.py-40px {
  padding-top: 40px;
  padding-bottom: 40px;
}

.m-40px {
  margin: 40px;
}

.mt-40px {
  margin-top: 40px;
}

.mb-40px {
  margin-bottom: 40px;
}

.ml-40px {
  margin-left: 40px;
}

.mr-40px {
  margin-right: 40px;
}

.mx-40px {
  margin-left: 40px;
  margin-right: 40px;
}

.my-40px {
  margin-top: 40px;
  margin-bottom: 40px;
}

.p-50px {
  padding: 50px;
}

.pt-50px {
  padding-top: 50px;
}

.pb-50px {
  padding-bottom: 50px;
}

.pl-50px {
  padding-left: 50px;
}

.pr-50px {
  padding-right: 50px;
}

.px-50px {
  padding-left: 50px;
  padding-right: 50px;
}

.py-50px {
  padding-top: 50px;
  padding-bottom: 50px;
}

.m-50px {
  margin: 50px;
}

.mt-50px {
  margin-top: 50px;
}

.mb-50px {
  margin-bottom: 50px;
}

.ml-50px {
  margin-left: 50px;
}

.mr-50px {
  margin-right: 50px;
}

.mx-50px {
  margin-left: 50px;
  margin-right: 50px;
}

.my-50px {
  margin-top: 50px;
  margin-bottom: 50px;
}

.p-60px {
  padding: 60px;
}

.pt-60px {
  padding-top: 60px;
}

.pb-60px {
  padding-bottom: 60px;
}

.pl-60px {
  padding-left: 60px;
}

.pr-60px {
  padding-right: 60px;
}

.px-60px {
  padding-left: 60px;
  padding-right: 60px;
}

.py-60px {
  padding-top: 60px;
  padding-bottom: 60px;
}

.m-60px {
  margin: 60px;
}

.mt-60px {
  margin-top: 60px;
}

.mb-60px {
  margin-bottom: 60px;
}

.ml-60px {
  margin-left: 60px;
}

.mr-60px {
  margin-right: 60px;
}

.mx-60px {
  margin-left: 60px;
  margin-right: 60px;
}

.my-60px {
  margin-top: 60px;
  margin-bottom: 60px;
}

.p-80px {
  padding: 80px;
}

.pt-80px {
  padding-top: 80px;
}

.pb-80px {
  padding-bottom: 80px;
}

.pl-80px {
  padding-left: 80px;
}

.pr-80px {
  padding-right: 80px;
}

.px-80px {
  padding-left: 80px;
  padding-right: 80px;
}

.py-80px {
  padding-top: 80px;
  padding-bottom: 80px;
}

.m-80px {
  margin: 80px;
}

.mt-80px {
  margin-top: 80px;
}

.mb-80px {
  margin-bottom: 80px;
}

.ml-80px {
  margin-left: 80px;
}

.mr-80px {
  margin-right: 80px;
}

.mx-80px {
  margin-left: 80px;
  margin-right: 80px;
}

.my-80px {
  margin-top: 80px;
  margin-bottom: 80px;
}

/**
 * 排列样式
 */
.flex-row, .flex-wrap, .row-center-center, .row-y-end, .row-y-start, .row-x-end, .row-x-start, .row-x-center, .row-x-between {
  display: flex;
  flex-direction: row;
}

.flex-column, .column-center-center, .column-y-center, .column-center {
  display: flex;
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

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

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

.row-x-start {
  justify-content: flex-start;
}

.row-x-end {
  justify-content: flex-end;
}

.row-y-start {
  align-items: flex-start;
}

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

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

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

.row-center-center {
  align-items: center;
  justify-content: center;
}

.column-center-center {
  align-items: center;
  justify-content: center;
}

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

.wh100 {
  width: 100%;
  height: 100%;
  display: block;
}

.w50 {
  width: 50%;
  box-sizing: border-box;
}

.w100 {
  width: 100%;
  box-sizing: border-box;
}

.h100 {
  height: 100%;
}

.h50 {
  height: 50% !important;
}

.min-100 {
  min-height: 100%;
}

.h100-scroll {
  height: 100%;
  overflow: auto;
}

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

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

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


.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}

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

.flex-1 {
  flex: 1;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.items-center {
  align-items: center;
}
.items-center {
  align-items: center;
}

.grid {
  display: grid;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-6 {
  grid-template-columns: repeat(6, 1fr);
}


.po-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.po-full, .po-before-full::before {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.po-absolute, .po-before-absolute::before {
  position: absolute;
}

.po-fixed, .po-before-fixed::before {
  position: fixed;
}

.w-full {
    width: 100%;
    box-sizing: border-box;
}

.h-100vh {
  height: 100vh;
}

.h-full {
  height: 100%;
}

.block {
    display: block;
}

.title {
    font-size: 18px;
    line-height: 100%;
    padding-left: 10px;
    border-left: 4px solid #49a5ea;
}

.border-bottom-1px {
    border-bottom: 1px solid #d7d7d7 ;
}

.bg-white {
    background-color: #fff;
}

.font-bold {
    font-weight: bold;
}

.cursor-point {
    cursor: pointer;
}


.border-wrapper {
    border: 1px solid #e5f0fc;
    padding: 20px;
    margin-bottom: 30px;
}

.border-wrapper .border-wrapper-title {
    font-size: 18px;
    line-height: 150%;
    background-color: #e5f0fc;
    padding: 10px;
    margin: -20px -20px 20px -20px;
}

.btn-plain {
    background-color: transparent;
    border: 1px solid #3669C4;
    color: #3669C4;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
}