/* common style */


/*=================== reset ===================*/

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    color: #363636;
    background: rgba(241, 242, 246, 1);
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

fieldset,
img {
    border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
th,
strong,
var {
    font-style: normal;
    font-weight: normal;
}

ul {
    list-style: none;
}

ol {
    list-style-position: inside;
}

caption,
th {
    text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before,
q:after {
    content: '';
}

abbr,
acronym {
    border: 0;
    font-variant: normal;
}

sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

legend {
    color: #4f4f4f;
}

a,
button {
    outline: none;
}

a {
    text-decoration: none;
}

body {
    font: 14px/1.2 "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    color: #363636;
    background: #edeff4;
    _background-attachment: fixed;
    _background-image: url(about:blank);
}
html,
body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: transparent;
}

@font-face {
    font-family: 'alimama';
    src: url(../font/alimama.ttf);
}

@font-face {
    font-family: 'ArchivoNarrow';
    src: url(../font/ArchivoNarrow.ttf);
}

@font-face {
    font-family: 'siyuan';
    src: url(../font/siyuan.ttf);
}

/*================== base ==================*/


/* margin */

.mg-0auto {
    margin: 0 auto !important;
}

.mg-0 {
    margin: 0 !important;
}

.mg-5 {
    margin: 0.05rem !important;
}

.mg-7 {
    margin: 0.07rem !important;
}

.mg-10 {
    margin: 0.1rem !important;
}

.mg-15 {
    margin: 0.15rem !important;
}

.mg-20 {
    margin: 0.2rem !important;
}

.mg-25 {
    margin: 0.25rem !important;
}

.mg-30 {
    margin: 0.3rem !important;
}

.mg-40 {
    margin: 0.4rem !important;
}

.mg-50 {
    margin: 0.5rem !important;
}

.mgt-0 {
    margin-top: 0 !important;
}
.mgt-3 {
    margin-top: 0.03rem !important;
}
.mgt-5 {
    margin-top: 0.05rem !important;
}

.mgt-7 {
    margin-top: 0.07rem !important;
}

.mgt-10 {
    margin-top: 0.1rem !important;
}

.mgt-15 {
    margin-top: 0.15rem !important;
}

.mgt-20 {
    margin-top: 0.2rem !important;
}

.mgt-25 {
    margin-top: 0.25rem !important;
}

.mgt-30 {
    margin-top: 0.3rem !important;
}

.mgt-40 {
    margin-top: 0.4rem !important;
}

.mgt-50 {
    margin-top: 0.5rem !important;
}

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

.mgr-5 {
    margin-right: 0.05rem !important;
}

.mgr-7 {
    margin-right: 0.07rem !important;
}

.mgr-10 {
    margin-right: 0.1rem !important;
}

.mgr-15 {
    margin-right: 0.15rem !important;
}

.mgr-20 {
    margin-right: 0.2rem !important;
}

.mgr-25 {
    margin-right: 0.25rem !important;
}

.mgr-30 {
    margin-right: 0.3rem !important;
}

.mgr-40 {
    margin-right: 0.4rem !important;
}

.mgr-50 {
    margin-right: 0.5rem !important;
}

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

.mgb-5 {
    margin-bottom: 0.05rem !important;
}

.mgb-7 {
    margin-bottom: 0.07rem !important;
}

.mgb-10 {
    margin-bottom: 0.1rem !important;
}

.mgb-15 {
    margin-bottom: 0.15rem !important;
}

.mgb-20 {
    margin-bottom: 0.2rem !important;
}

.mgb-25 {
    margin-bottom: 0.25rem !important;
}

.mgb-30 {
    margin-bottom: 0.3rem !important;
}

.mgb-40 {
    margin-bottom: 0.4rem !important;
}

.mgb-50 {
    margin-bottom: 0.5rem !important;
}

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

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

.mgl-7 {
    margin-left: 7px !important;
}

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

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

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

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

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

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

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

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


/* padding */

.pd-0 {
    padding: 0 !important;
}

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

.pd-7 {
    padding: 7px !important;
}

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

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

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

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

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

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

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

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

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

.pdt-7 {
    padding-top: 7px !important;
}

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

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

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

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

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

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

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

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

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

.pdr-7 {
    padding-right: 7px !important;
}

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

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

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

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

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

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

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

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

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

.pdb-7 {
    padding-bottom: 7px !important;
}

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

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

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

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

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

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

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

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

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

.pdl-7 {
    padding-left: 7px !important;
}

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

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

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

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

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

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

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


/* text-align && vertical-align */

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

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

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

.tj {
    text-align: justify !important;
}

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

.vt {
    vertical-align: top !important;
}

.vb {
    vertical-align: bottom !important;
}


/* float && clear */

.fl {
    float: left !important;
}

.fr {
    float: right !important;
}

.clearfix {
    /* *zoom: 1; */
}

.clearfix:before {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    height: 0;
}


/* display && visible */

.hide {
    display: none !important;
}

.none {
    display: none !important;
}

.block {
    display: block !important;
}

.inline {
    display: inline !important;
}

.inline-block {
    display: inline-block !important;
}

.table {
    display: table !important;
}

.tab-cap {
    display: table-caption !important;
}

.tab-cell {
    display: table-cell !important;
}

.tab-row {
    display: table-row !important;
}

.dis-list {
    display: list-item !important;
}

.visible {
    visibility: visible !important;
}

.hidden {
    visibility: hidden !important;
}

.ov-h {
    overflow: hidden;
}

.ovX-h {
    overflow-x: hidden;
}

.ovY-h {
    overflow-y: hidden;
}

.ov-s {
    overflow: scroll;
}

.ovX-s {
    overflow-x: scroll;
}

.ovY-s {
    overflow-y: scroll;
}

.ov-auto {
    overflow: auto;
}


/* position */

.static {
    position: static !important;
}

.relative {
    position: relative !important;
}

.absolute {
    position: absolute !important;
}

.fixed {
    position: fixed !important;
}


/* font */

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

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

.fz-12 {
    font-size: 0.12rem !important;
}

.fz-14 {
    font-size: 0.14rem !important;
}

.fz-16 {
    font-size: 0.16rem !important;
}

.fz-18 {
    font-size: 0.18rem !important;
}

.fz-20 {
    font-size: 0.2rem !important;
}

.fz-22 {
    font-size: 0.22rem !important;
}

.fz-24 {
    font-size: 0.24rem !important;
}

.fz-26 {
    font-size: 0.26rem !important;
}

.fz-28 {
    font-size: 0.28rem !important;
}

.fz-30 {
    font-size: 0.3rem !important;
}

.fz-32 {
    font-size: 0.32rem !important;
}

.fwl {
    font-weight: lighter !important;
}

.fwb {
    font-weight: bold !important;
}

.fwn {
    font-weight: normal !important;
}

.fsn {
    font-style: normal !important;
}

.fsi {
    font-style: italic !important;
}

.underline {
    text-decoration: underline !important;
}

.deleteline {
    text-decoration: line-through;
}

.overline {
    text-decoration: overline;
}

.noline {
    text-decoration: none !important;
}

.ti-0 {
    text-indent: 0 !important;
}

.ti-1 {
    text-indent: 1em !important;
}

.ti-2 {
    text-indent: 2em !important;
}

.lh-1 {
    line-height: 100% !important;
}

.lh-12 {
    line-height: 120% !important;
}

.lh-15 {
    line-height: 150% !important;
}

.lh-2 {
    line-height: 200% !important;
}

.lh-25 {
    line-height: 250% !important;
}

.lh-3 {
    line-height: 300% !important;
}


/*color*/

.color-white {
    color: #ffffff !important;
}

.color-black {
    color: #333333 !important;
}

.color-666 {
    color: #666666 !important;
}

.color-999 {
    color: #999999 !important;
}

.color-green {
    color: green !important;
}

.color-aqua {
    color: #00eaff !important;
}

.color-yellow {
    color: #ffff80 !important;
}

.color-blue {
    color: #175FBD !important;
}

.color-gray {
    color: #CFCFCF !important;
}


/*background-color*/

.bg-white {
    background-color: #ffffff !important;
}

.bg-none {
    background: none !important;
}
.bg-light{
    background: #ECF4FF !important;
}


/*ui-row*/

.pub-row {
    display: block;
}

.pub-row:before,
.pub-row:after {
    content: "";
    display: table;
    clear: both;
}

.pub-row>[class^="col-"] {
    float: left;
    min-height: 1px;
}

.col-1 {
    width: 8.33333333%;
}

.col-2 {
    width: 16.66666667%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33333333%;
}

.col-5 {
    width: 41.66666667%;
}

.col-5-1 {
    width: 20%;
}

.col-5-2 {
    width: 40%;
}

.col-5-3 {
    width: 60%;
}

.col-5-4 {
    width: 80%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33333333%;
}

.col-8 {
    width: 66.66666667%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33333333%;
}

.col-11 {
    width: 91.66666667%;
}

.col-12 {
    width: 100%;
}

.col-20 {
    width: 20%;
}

/*================ flex-layout ================*/

.flex-box {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

.flex-1 {
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.flex-2 {
    -moz-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
}

.flex-3 {
    -moz-box-flex: 3;
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
}

.flex-4 {
    -moz-box-flex: 4;
    -webkit-flex: 4;
    -ms-flex: 4;
    flex: 4;
}

.flex-5 {
    -moz-box-flex: 5;
    -webkit-flex: 5;
    -ms-flex: 5;
    flex: 5;
}


/*other*/

.nowrap {
    white-space: nowrap;
}

.text-over {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-over2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: justify;
}

.no-border {
    border: none !important;
}

.no-borderT {
    border-top: none !important
}

.no-borderB {
    border-bottom: none !important
}

.no-borderL {
    border-left: none !important
}

.no-borderR {
    border-right: none !important
}

.pointer {
    cursor: pointer;
}

.width-full {
    width: 100% !important;
}

.height-full {
    height: 100% !important;
}

.height-auto {
    height: auto !important;
}

/*滚动条*/

.scrollbar {
    width: 20px;
    height: 20px;
    margin: 0 auto;
}

::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 6px;
}

::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background: #CCD2DB;
}

::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 10px;
    background: transparent;
}

.bd-1 {
    border: 1px solid #2C353D;
}

.bdt-1 {
    border-top: 1px solid #2C353D;
}

.bdb-1 {
    border-bottom: 1px solid #2C353D;
}

.hei-100 {
    height: 100% !important;
}

.font-700{
    font-weight: 700 !important;
}

.flex-c{
    display: flex !important;
    align-items: center !important;
}
.flex-b{
    display: flex !important;
    justify-content: space-between;
}
.flex-e{
    display: flex !important;
    justify-content: flex-end;
}
.flex-str{
    display: flex !important;
    align-items: stretch;
}
.flex-dec{
    display: flex !important;
    flex-direction: column;
}