* {box-size:border-box;}

.df {
    display:flex
}
.fc {
    flex-direction:column;
}
.fw {
    flex-wrap:wrap;
}
.fs0 {
    flex-shrink:0;
}
.je {
    justify-content: flex-end
}
.jc {
    justify-content:center;
}
.ja {
    justify-content:space-around
}
.jb {
    justify-content:space-between
}
.ac {
    align-items:center;
}
.as {
    align-items:flex-start;
}
.ae {
    align-items:flex-end;
}
.fb {
    font-weight: bolder
}
.tc {
    text-align: center;
}
.tr {
    text-align: right;
}
.cp {
    cursor: pointer;
}
.fl {
    float:left;
}
.pr {
    position: relative;
}
.pa {
    position: absolute;
}

.shadow { box-shadow: 0px 3px 11px 3px #97959563; }

.b1 { border:1px solid red; }
.b1_gray, .b1_grey { border:1px solid #cccccc; }
.b1_dark_gray, .b1_dark_grey { border:1px solid #777777; }

.gray, .grey { color:#cccccc; } 
.dark_gray, .dark_grey { color:#777777; } 
.white { color:#ffffff; }
.c_0 {color: #2097F3} .c_1 {color: #02AAF5} .c_2 {color: #00BDD6} .c_3 {color: #019789} 
.c_4 {color: #4CB051} .c_5 {color: #8BC349} .c_6 {color: #CEDD39} .c_7 {color: #FFEB3A}
.c_8 {color: #FFC006} .c_9 {color: #FF9901} .c_10 {color: #FF5622} .c_11 {color: #785447}
.c_12 {color: #A0A0A0} .c_13 {color: #617C8C} .c_14 {color: #F54336} .c_15 {color: #E91F63}
.c_16 {color: #9E26B0} .c_17 {color: #653AB6} .c_18 {color: #3E50B5} .c_19 {color: #0E0E0E}

.bg_gray, .bg_grey { background-color:#efefef; } 
.bg_white { background-color:#ffffff; }
.bg_color_0 {background-color: #2097F3} .bg_color_1 {background-color: #02AAF5} .bg_color_2 {background-color: #00BDD6} .bg_color_3 {background-color: #019789} 
.bg_color_4 {background-color: #4CB051} .bg_color_5 {background-color: #8BC349} .bg_color_6 {background-color: #CEDD39} .bg_color_7 {background-color: #FFEB3A}
.bg_color_8 {background-color: #FFC006} .bg_color_9 {background-color: #FF9901} .bg_color_10 {background-color: #FF5622} .bg_color_11 {background-color: #785447}
.bg_color_12 {background-color: #A0A0A0} .bg_color_13 {background-color: #617C8C} .bg_color_14 {background-color: #F54336} .bg_color_15 {background-color: #E91F63}
.bg_color_16 {background-color: #9E26B0} .bg_color_17 {background-color: #653AB6} .bg_color_18 {background-color: #3E50B5} .bg_color_19 {background-color: #0E0E0E}

.bgc_0 {background-color: #2097F3} .bgc_1 {background-color: #02AAF5} .bgc_2 {background-color: #00BDD6} .bgc_3 {background-color: #019789} 
.bgc_4 {background-color: #4CB051} .bgc_5 {background-color: #8BC349} .bgc_6 {background-color: #CEDD39} .bgc_7 {background-color: #FFEB3A}
.bgc_8 {background-color: #FFC006} .bgc_9 {background-color: #FF9901} .bgc_10 {background-color: #FF5622} .bgc_11 {background-color: #785447}
.bgc_12 {background-color: #A0A0A0} .bgc_13 {background-color: #617C8C} .bgc_14 {background-color: #F54336} .bgc_15 {background-color: #E91F63}
.bgc_16 {background-color: #9E26B0} .bgc_17 {background-color: #653AB6} .bgc_18 {background-color: #3E50B5} .bgc_19 {background-color: #0E0E0E}

.am-badge-color-0 {background-color: #2097F3} .am-badge-color-1 {background-color: #02AAF5} .am-badge-color-2 {background-color: #00BDD6} .am-badge-color-3 {background-color: #019789} 
.am-badge-color-4 {background-color: #4CB051} .am-badge-color-5 {background-color: #8BC349} .am-badge-color-6 {background-color: #CEDD39} .am-badge-color-7 {background-color: #FFEB3A}
.am-badge-color-8 {background-color: #FFC006} .am-badge-color-9 {background-color: #FF9901} .am-badge-color-10 {background-color: #FF5622} .am-badge-color-11 {background-color: #785447}
.am-badge-color-12 {background-color: #A0A0A0} .am-badge-color-13 {background-color: #617C8C} .am-badge-color-14 {background-color: #F54336} .am-badge-color-15 {background-color: #E91F63}
.am-badge-color-16 {background-color: #9E26B0} .am-badge-color-17 {background-color: #653AB6} .am-badge-color-18 {background-color: #3E50B5} .am-badge-color-19 {background-color: #0E0E0E}

.br0 { border-radius: 0px;}
.br1 { border-radius: 1px;}
.br2 { border-radius: 2px;}
.br3 { border-radius: 3px;}
.br4 { border-radius: 4px;}
.br5 { border-radius: 5px;}
.br10 { border-radius: 10px;}
.br20 { border-radius: 20px;}
.br-50 { border-radius: 50%;}
.br-100, .round { border-radius: 100%;}

.h_auto { height: auto; }
.h10 { height: 10px; }
.h20 { height: 20px; }
.h30 { height: 30px; }
.h40 { height: 40px; }
.h50 { height: 50px; }
.h60 { height: 60px; }
.h70 { height: 70px; }
.h80 { height: 80px; }
.h90 { height: 90px; }
.h100 { height: 100px; }
.lh10 { line-height: 10px; }
.lh20 { line-height: 20px; }
.lh30 { line-height: 30px; }
.lh40 { line-height: 40px; }
.lh50 { line-height: 50px; }
.lh60 { line-height: 60px; }
.lh70 { line-height: 70px; }
.lh80 { line-height: 80px; }
.lh90 { line-height: 90px; }
.lh100 { line-height: 100px; }

.w10 { width: 10px; }
.w20 { width: 20px; }
.w30 { width: 30px; }
.w40 { width: 40px; }
.w50 { width: 50px; }
.w60 { width: 60px; }
.w70 { width: 70px; }
.w80 { width: 80px; }
.w90 { width: 90px; }
.w100 { width: 100px; }

.h-10 { height: 10%; }
.h-20 { height: 20%; }
.h-25 { height: 25%; }
.h-30 { height: 30%; }
.h-40 { height: 40%; }
.h-50 { height: 50%; }
.h-60 { height: 60%; }
.h-70 { height: 70%; }
.h-75 { height: 75%; }
.h-80 { height: 80%; }
.h-90 { height: 90%; }
.h-100 { height: 100%; }

.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }
.w-100 { width: 100%; }

.ls2 { letter-spacing:2px; }
.ls4 { letter-spacing:4px; }
.ls6 { letter-spacing:6px; }
.ls8 { letter-spacing:8px; }
.ls10 { letter-spacing:10px; }

.s12 { font-size: 12px; }
.s14 { font-size: 14px; }
.s16 { font-size: 16px; }
.s18 { font-size: 18px; }
.s20 { font-size: 20px; }
.s22 { font-size: 22px; }
.s24 { font-size: 24px; }
.s26 { font-size: 26px; }
.s28 { font-size: 28px; }
.s30 { font-size: 30px; }
.s32 { font-size: 32px; }

.m0 { margin: 0px; }
.m5 { margin: 5px; }
.m10 { margin: 10px; }
.m20 { margin: 20px; }
.m30 { margin: 30px; }
.m40 { margin: 40px; }
.m50 { margin: 50px; }

.mt0 { margin-top: 0px; }
.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }

.mr0 { margin-right: 0px; }
.mr5 { margin-right: 5px; }
.mr10 { margin-right: 10px; }
.mr20 { margin-right: 20px; }
.mr30 { margin-right: 30px; }
.mr40 { margin-right: 40px; }
.mr50 { margin-right: 50px; }

.mb0 { margin-bottom: 0px; }
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }

.ml0 { margin-left: 0px; }
.ml5 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml20 { margin-left: 20px; }
.ml30 { margin-left: 30px; }
.ml40 { margin-left: 40px; }
.ml50 { margin-left: 50px; }

.p0 { padding: 0px; }
.p5 { padding: 5px; }
.p10 { padding: 10px; }
.p20 { padding: 20px; }
.p30 { padding: 30px; }
.p40 { padding: 40px; }
.p50 { padding: 50px; }

.pt0 { padding-top: 0px; }
.pt5 { padding-top: 5px; }
.pt10 { padding-top: 10px; }
.pt20 { padding-top: 20px; }
.pt30 { padding-top: 30px; }
.pt40 { padding-top: 40px; }
.pt50 { padding-top: 50px; }

.pr0 { padding-right: 0px; }
.pr5 { padding-right: 5px; }
.pr10 { padding-right: 10px; }
.pr20 { padding-right: 20px; }
.pr30 { padding-right: 30px; }
.pr40 { padding-right: 40px; }
.pr50 { padding-right: 50px; }

.pb0 { padding-bottom: 0px; }
.pb5 { padding-bottom: 5px; }
.pb10 { padding-bottom: 10px; }
.pb20 { padding-bottom: 20px; }
.pb30 { padding-bottom: 30px; }
.pb40 { padding-bottom: 40px; }
.pb50 { padding-bottom: 50px; }

.pl0 { padding-left: 0px; }
.pl5 { padding-left: 5px; }
.pl10 { padding-left: 10px; }
.pl20 { padding-left: 20px; }
.pl30 { padding-left: 30px; }
.pl40 { padding-left: 40px; }
.pl50 { padding-left: 50px; }

.def_input { height: 32px; border: 1px solid #CCCCCC; line-height: 30px; padding: 0 8px; color: #7C7C7C; font-size: 14px; }

.hidden,.hide,.dn {display: none;}
.o0 {opacity: 0;}
.o0_1 {opacity: 0.1;}
.o0_2 {opacity: 0.2;}
.o0_3 {opacity: 0.3;}
.o0_4 {opacity: 0.4;}
.o0_5 {opacity: 0.5;}
.o0_6 {opacity: 0.6;}
.o0_7 {opacity: 0.7;}
.o0_8 {opacity: 0.8;}
.o0_9 {opacity: 0.9;}
.o1 {opacity: 1;}

.oh {overflow: hidden;}
.os {overflow: scroll;}
.oxh {overflow-x: hidden;}
.oxs {overflow-x: scroll;}
.oyh {overflow-y: hidden;}
.oys {overflow-y: scroll;}

.dot3 , .ellipsis {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.break {white-space: normal;max-width: 100%;word-wrap: break-word;}

.thinbar {scrollbar-width: thin;}
/* 滚动条整体部分 */
.thinbar::-webkit-scrollbar {  width:5px;height:5px;background-color:#d0cdc700;}  
 /* scroll轨道背景 */
.thinbar::-webkit-scrollbar-track {  
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  */
    border-radius: 5px; background-color:#ffffff00;    
} 
/* 滚动条中能上下移动的小块 */
.thinbar::-webkit-scrollbar-thumb {  border-radius: 5px;  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);   background-color:#dfdfdf00;}


@media only screen and (max-width: 640px) {
    .hide_lt_640 {display: none !important;}
}

@media only screen and (min-width: 640px) {
    .hide_gt_640 {display: none !important;}
}

@media only screen and (max-width: 768px) {
    .hide_lt_768 {display: none !important;}
}

@media only screen and (min-width: 768px) {
    .hide_gt_768 {display: none !important;}
}

@media only screen and (max-width: 1024px) {
    .hide_lt_1024 {display: none !important;}
}

@media only screen and (min-width: 1024px) {
    .hide_gt_1024 {display: none !important;}
}