.ios_wrap {
    padding-right: constant(safe-area-inset-right);
    padding-left: constant(safe-area-inset-left);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-top: constant(safe-area-inset-top);

    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
    padding-bottom: env(safe-area-inset-bottom);
    padding-top: env(safe-area-inset-top);
}


.ios_bottom_wrap {
    padding: 5px 0 constant(safe-area-inset-bottom);
    padding: 5px 0 env(safe-area-inset-bottom);
    width: 100%;
    display: flex;
}

/*
.mbody {
    padding-top: env(safe-area-inset-top);
}
*/



/* flex */
.flex {
    display: flex;
}

.flex_vertical {
    flex-direction: column;
}

.flex_none {
    flex: none;
}

.flex_end {
    justify-content: flex-end;
}

.space_between {
    justify-content: space-between;
}



.M_circle,
.C_circle {
    border-radius: 50%;
    width: 16px;
    height: 16px;
    line-height: 16px;
    display: inline-block;
    color: #fff;
    text-align: center;
    font-size: 10px;
}

.M_circle {
    background: #999;
}

.C_circle {
    background: #00bcd4;
    margin-top: 5px;
}

.height100 {
    height: 100%;
}

.radi50 {
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: inline-block;
    line-height: 18px;
    color: #fff;
    text-align: center;
}

.bg000 {
    background: #000;
}

.bg1b75bb {
    background: #1b75bb;
}

.bgeb008b {
    background: #eb008b;
}

.bgfff101 {
    background: #f9dc10;
}