button{
    border:0;
    outline: none;
    background-color: transparent;
}
.H1{
    font-size: 20px;
}
.H2{
    font-size: 18px;
}
.H3{
    font-size: 16px;
}
.H4{
    font-size: 14px;
}
.H5{
    font-size: 12px;
}
.font_f{
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
}
.color455{
    color: #455A64;
}
.color677{
    color: #67757C;
}
.colorD8D{
    color: #D8DDE0;
}
.colorblue{
    color: #4A84FF;
}
.colorwathet{
    color: #B4D6FF;
}
.colorred{
    color: #EE524F;
}
.colorgreen{
    color: #26dAD2;
}
.colorwhite{
    color: #FFFFFF;
}
.font_4w{
    font-weight: 400;
}
.font-b{
    font-weight: bold;
}
.s_wathet{
    font-size: 12px;
    color: #fff;
    height: 20px;
    text-align: center;
    line-height: 20px;
    padding: 0px 16px;
    background: #26DAD2;
    border-radius: 3px 3px 3px 3px;
}
.s_purple{
    font-size: 12px;
    color: #fff;
    height: 20px;
    text-align: center;
    line-height: 20px;
    padding: 0px 16px;
    background: #7560EF;
    border-radius: 3px 3px 3px 3px;
}
.s_green{
    font-size: 12px;
    color: #26DAD2;
    height: 20px;
    text-align: center;
    line-height: 20px;
    padding: 0px 8px;
    background: #fff;
    border-radius:0px;
    border:1px solid #26DAD2;
}
.s_yellow{
    font-size: 12px;
    color: #FFB22B;
    height: 20px;
    text-align: center;
    line-height: 20px;
    padding: 0px 8px;
    background: #fff;
    border-radius:0px;
    border:1px solid #FFB22B;
}
.s_blue_o{
    font-size: 12px;
    color: #4C84FF;
    height: 20px;
    text-align: center;
    line-height: 20px;
    padding: 0px 8px;
    background: #fff;
    border-radius:10px;
    border:1px solid #4C84FF;
}
.s_green_o{
    font-size: 12px;
    color: #26DAD2;
    height: 20px;
    text-align: center;
    line-height: 20px;
    padding: 0px 8px;
    background: #fff;
    border-radius:10px;
    border:1px solid #26DAD2;
}
.s_red_o{
    font-size: 12px;
    color: #EF5350;
    height: 20px;
    text-align: center;
    line-height: 20px;
    padding: 0px 8px;
    background: #fff;
    border-radius:10px;
    border:1px solid #EF5350;
}
.m_blue{
    font-size: 14px;
    color: #fff;
    height: 32px;
    text-align: center;
    line-height: 32px;
    padding: 0px 18px;
    background: #4C84FF;
    border-radius:3px;
}
.m_blue_o{
    font-size: 14px;
    color: #fff;
    height: 32px;
    text-align: center;
    line-height: 32px;
    padding: 0px 18px;
    background: #4C84FF;
    border-radius:16px;
}
.m_red_o{
    font-size: 14px;
    color: #fff;
    height: 32px;
    text-align: center;
    line-height: 32px;
    padding: 0px 18px;
    background: #EF5350;
    border-radius:16px;
}
.m_yellow_o{
    font-size: 14px;
    color: #fff;
    height: 32px;
    text-align: center;
    line-height: 32px;
    padding: 0px 18px;
    background: #FFB22B;
    border-radius:16px;
}
.m_grey_o{
    font-size: 14px;
    color: #455A64;
    height: 32px;
    text-align: center;
    line-height: 32px;
    padding: 0px 18px;
    background: #E9E9E9;
    border-radius:16px;
}
.L_blue_o{
    font-size: 14px;
    color: #fff;
    height: 32px;
    text-align: center;
    line-height: 32px;
    padding: 0px 18px;
    background: #4C84FF;
    border-radius:16px;
    transition: all 0.2s;
}
.L_blue_o:hover{
    box-shadow: 0px 3px 6px 1px #C2CEE6;
}
.L_grey_o{
    font-size: 14px;
    color: #455A64;
    height: 32px;
    text-align: center;
    line-height: 32px;
    padding: 0px 18px;
    background: #E9E9E9;
    border-radius:16px;
    transition: all 0.2s;
}
.L_grey_o:hover{
    box-shadow: 0px 3px 6px 1px #C2CEE6;
}
.L_red_o{
    font-size: 14px;
    color: #fff;
    height: 32px;
    text-align: center;
    line-height: 32px;
    padding: 0px 24px;
    background: #EF5350;
    border-radius:16px;
}
.XL_blue_o{
    font-size: 14px;
    color: #fff;
    height: 36px;
    text-align: center;
    line-height: 36px;
    padding: 0px 26px;
    background: #4C84FF;
    border-radius:18px;
}
.XL_red_o{
    font-size: 14px;
    color: #fff;
    height: 36px;
    text-align: center;
    line-height: 36px;
    padding: 0px 26px;
    background: #EF5350;
    border-radius:18px;
}
.XL_yellow_o{
    font-size: 14px;
    color: #fff;
    height: 36px;
    text-align: center;
    line-height: 36px;
    padding: 0px 26px;
    background: #FFB22B;
    border-radius:18px;
}
.XL_green_o{
    font-size: 14px;
    color: #fff;
    height: 36px;
    text-align: center;
    line-height: 36px;
    padding: 0px 18px;
    background: #25BD95;
    border-radius:18px;
    position: relative;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}
/*.XL_blue_o:hover,.XL_red_o:hover,.XL_yellow_o:hover,.XL_green_o:hover{
    color:rgba(255,255,255,0.5);
}*/
.XL_blue_o:hover{
    box-shadow: 0px 3px 6px 1px #C2CEE6;
}
.XL_red_o:hover{
    box-shadow: 0px 3px 6px 1px #E6B9B8;
}
.XL_yellow_o:hover{
    box-shadow: 0px 3px 6px 1px #E3D1B2;
}
.XL_green_o:hover{
    box-shadow: 0px 3px 6px 1px #B9E7DB;
}
.XL_green_o:after {
    content: "";
    background: #20AE88;
    border-radius: 18px;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.2s
}

.XL_green_o:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}
.b_disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.YL_blue_o{
    font-size: 14px;
    color: #4C84FF;
    height: 36px;
    text-align: center;
    line-height: 36px;
    padding: 0px 26px;
    background: #FFF;
    border:1px solid #4C84FF;
    border-radius:18px;
}
.YL_red_o{
    font-size: 14px;
    color: #EF5350;
    height: 36px;
    text-align: center;
    line-height: 36px;
    padding: 0px 26px;
    background: #FFF;
    border:1px solid #EF5350;
    border-radius:18px;
}
.YL_yellow_o{
    font-size: 14px;
    color: #FFB22B;
    height: 36px;
    text-align: center;
    line-height: 36px;
    padding: 0px 26px;
    background: #FFF;
    border:1px solid #FFB22B;
    border-radius:18px;
}
.YL_green_o{
    font-size: 14px;
    color: #25BD95;
    height: 36px;
    text-align: center;
    line-height: 36px;
    padding: 0px 18px;
    background: #FFF;
    border:1px solid #25BD95;
    border-radius:18px;
}
.YL_blue_o:hover{
    color: #FFF;
    background: #4C84FF;
    box-shadow: 0px 3px 6px 1px #C2CEE6;
}
.YL_red_o:hover{
    color: #FFF;
    background: #EF5350;
    box-shadow: 0px 3px 6px 1px #E6B9B8;
}
.YL_yellow_o:hover{
    color: #FFF;
    background: #FFB22B;
    box-shadow: 0px 3px 6px 1px #E3D1B2;
}
.YL_green_o:hover{
    color: #FFF;
    background: #25BD95;
    box-shadow: 0px 3px 6px 1px #B9E7DB;
}