body {
    background-color: var(--yi-BG-0);
    font-size: var(--yi-FS);
    color: var(--yi-FG);
    /*padding-bottom: calc(1px + env(safe-area-inset-bottom)); 页面的安全区*/
    /* padding-bottom: constant(safe-area-inset-bottom);兼容 iOS < 11.2 */
    /* padding-bottom: env(safe-area-inset-bottom); 兼容 iOS >= 11.2 */
    -webkit-text-size-adjust: 100%; /*禁字体*/
    -ms-text-size-adjust: 100%;
    text-size-adjust:100%!important;
    touch-action: manipulation; /*禁页面*/
}

body {
    /***/
    --yi-FS: 16px;
    --yi-FS-0: 12px;
    --yi-FS-1: 14px;
    --yi-FS-2: 16px;
    --yi-FS-3: 17px;
    --yi-FS-4: 18px;
    --yi-FS-5: 19px;
    --yi-FS-6: 20px;
    --yi-FS-7: 21px;
    --yi-FS-8: 22px;
    /***/
    --yi-BR: #ededed;
    --yi-BR-0: #ff6146;
    --yi-BR-1: #000;
    --yi-BR-2: #fff;
    --yi-BR-3: #00000025;
    --yi-BR-4: rgba(0, 0, 0, 0.5);
    /***/
    --yi-BG: #fff;
    --yi-BG-0: #ededed;
    --yi-BG-1: #ff6146; /*主*/
    --yi-BG-2: #f2f2f2;
    --yi-BG-3: #07c160;
    --yi-BG-4: #fa5151;
    --yi-BG-5: #4c4c4c;
    --yi-BG-6: #f7f7f7;
    --yi-BG-7: rgba(0, 0, 0, 0.60); /*暗影*/
    --yi-BG-8: #10aeff;
    /***/
    --yi-FG: #000;
    --yi-FG-0: rgba(0, 0, 0, 0.9);
    --yi-FG-1: #fff;
    --yi-FG-2: #ededed;
    --yi-FG-3: #ff6146;
    --yi-FG-4: rgba(0, 0, 0, 0.5);
    --yi-FG-5: #06c; /*#2997ff;*/
}
table { /*colspan是横向合并；rowspan是纵向合并。*/
    /*border-collapse: collapse; 无间隙*/
}
a[class=button]:link, a[class=button]:active, a[class=button]:hover, a[class=but]:link, a[class=but]:active, a[class=but]:hover {
    text-decoration: none;
    color: var(--yi-FG-1);
}
a[class=button-0]:link, a[class=button-0]:active, a[class=button-0]:hover, a[class=but-0]:link, a[class=but-0]:active, a[class=but-0]:hover {
    text-decoration: none;
    color: var(--yi-FG-3);
}
.a {
    display: inline-block;
    color: #06c;
    color: var(--yi-FG-5);
}
/*table数据表格使用合适*/
.tb {
    width: 100%;
    border-spacing:1px;
    background:var(--yi-BG-0);
}
    .tb tr th { /*每个th*/
        text-align: center;
        font-weight: 700;
        padding: 5px 0;
        background: var(--yi-BG);
    }
    .tb tr td { /*每个td*/
        padding: 3px 2px;
        background: var(--yi-BG);
    }
    .tb tr > td:first-child { /*每行的第一个td*/
        
    }
/*word排版*/
.tb-word {
    width: 100%;
    border-spacing: 1px;
    background: #000;
}
    .tb-word td {
        padding: 3px 2px;
        background: #fff;
        word-wrap: break-word; /*连接词断行*/
    }
.tb-word-shishu, .tb-word-mingzi {
    text-align: center;
    font-weight: 700;
    width: 64px;
    font-size: 100%;
}
.tb-word-mingzi {
    width: 64px;
}
.tb-word-biaoti {
    font-weight: 700;
    font-size:18px;
}

/*标题*/
.biaoti, .biaoti-0, .biaoti-1, .biaoti-2, .biaoti-3, .biaoti-4 {
    font-size: 17px;
    font-size: var(--yi-FS-3);
    font-weight: 700;
    color: #000;
    color: var(--yi-FG);
}
.biaoti-0 { /*灰色*/
    color: rgba(0, 0, 0, 0.5);
    color: var(--yi-FG-4);
    margin: 0 10px 8px 0;
}
.biaoti {
    margin: 0 10px 8px 0;
}
.biaoti-1 {
    font-size: 22px;
    font-size: var(--yi-FS-8);
}
.biaoti-2, .page-biaoti {
    font-size: 20px;
    font-size: var(--yi-FS-6);
}
.biaoti-3, .page-biaoti-2 {
    font-size: 18px;
    font-size: var(--yi-FS-4);
}
.biaoti-4 {
    font-size: 16px;
    font-size: var(--yi-FS-2);
}
.page-biaoti {/*页面大标题，继承标题2*/
    text-align:center;
    margin:10px 0;
    font-weight:700;
}
.page-biaoti-2 { /*页面副标题（2级），继承标题4*/
    margin:12px 0 8px 0;
    font-weight: 700;
}
/*标签*/
.biaoqian, .biaoqian-0 {
    display: inline-block;
    background: #ff6146;
    background: var(--yi-BG-1);
    color: #fff;
    color: var(--yi-FG-1);
    font-size: 14px;
    font-size: var(--yi-FS-1);
    font-weight:500;
    border-radius: 3px;
    padding: 1px 4px;
    margin: 0 8px 0 0;
    line-height: 1.4;
}
.biaoqian-0 {
    color: #ff6146;
    color: var(--yi-FG-3);
    background-color: #f2f2f2;
    background-color: var(--yi-BG-2);
}
/*突显*/
.tuxian {
    display: inline-block;
    color: #ff6146;
    color: var(--yi-FG-3);
}
.tuxian-0 {
    color: rgba(0, 0, 0, 0.8);
    color: var(--yi-FG-4);
}
.tuxian-1 {
    color: #06c;
    color: var(--yi-FG-5);
}
/*一行显示并出省略号*/
.yihang {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
/*多行显示并出省略号==默认3行*/
.duohang, .duohang-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.duohang-2 {
    -webkit-line-clamp: 2;
}
/*输入框*/
input, textarea {
    caret-color: #ff6146; /*光标颜色*/
    caret-color: var(--yi-FG-3);
}
    input[type=number] {
        font-size: 18px;
        font-size: var(--yi-FS-4);
    }    
.input, .input-0 { /*input*/ /*placeholder*/
    border: none;
    background: none;
    outline: none;
    font-size: 16px;
    font-size: var(--yi-FS-2);
    padding: 0;
    -webkit-appearance: none;
    width: 100%;
    height: 1.41176471em;
    line-height: 1.41176471;
    color: var(--yi-FG);
}
.input-0 {
    border-bottom: 1px solid #ff6146;
    border-bottom: 1px solid var(--yi-BR-0);
}
input[type="date"] {
    font-size: 16px;
    font-size: var(--yi-FS-2);
    border:none;
}
/*文本域*/
.textarea {
    display: block;
    border: 0;
    resize: none;/*是否可以调节元素尺寸*/
    background: transparent;
    width: 100%;
    color: inherit;
    font-size: 1em;
    line-height: inherit;
    height: 80px;
    outline: 0;
}
/*照片*/
.img {
    object-fit: cover;
    width:100%;
    height:100%;
}
/*头像*/
.touxiang48, .touxiang64 {
    border-radius: 5px;
    object-fit: cover;
}
.touxiang48 {
    width: 48px;
    height: 48px; 
}
.touxiang64 {
    width: 64px;
    height: 64px;
}
.logo32 {
    border-radius: 5px;
    width: 32px;
    height: 32px;
}
.ico40 {
    width: 40px;
    height: 40px;
}
/*族谱封面*/
.zhupufengmian, .zhupufengmian-0, .zhupufengmian-3 {
    width: 128px;
    height: 184px;
    border-radius: 2px 5px 5px 2px;
    box-shadow: 2px 2px 3px 2px var(--yi-BR-3);
}
.zhupufengmian-0 {
    width: 100px;
    height: 136px;
}
.zhupufengmian-3 {
    width: 78px;
    height: 100px;
}
.shishu {
    font-size: clamp(32px, calc(36px - 1vw), 40px);
}
.puming {
    font-size: clamp(36px, calc(38px - 1vw), 42px);
    margin-top:20px;
    font-weight:700;
}
/*页面显示的一块（主要用于大屏幕）*/
.kuai {
    position: relative;
    background: #fff;
    background: var(--yi-BG);
    color: #000;
    color: var(--yi-FG);
    padding: 10px;
}
    .kuai::after { /*底部加分隔线（默认）*/
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 1px;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        border-bottom: 1px solid var(--yi-BR);
        color: rgba(0,0,0,0.1);
        color: var(--yi-BR);
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        z-index: 2;
    }
/*搜索框*/
.sousuo{
    width: auto;
    border-radius: 5px;
    border: 1px solid var(--yi-BR);
    background: #fff;
    background: var(--yi-BG);
    padding: 3px;
}
.sousuo-auto {
    width: auto;
}
.sousuo-input {
    caret-color: #ff6146; /*光标颜色*/
    caret-color: var(--yi-FG-3);
    border: none;
    background: none;
    outline: none;
    font-size: 16px;
    font-size: var(--yi-FS-2);
    padding:5px;
    -webkit-appearance: none;
    width: 100%;
    /*height: 1.41176471em;
    line-height: 1.41176471;*/
    color: var(--yi-FG);
}
.sousuo-but {
    display: inline-block;
    font-size: 16px;
    font-size: var(--yi-FS-2);
    background: var(--yi-BG-1);
    border-radius: 4px;
    padding: 3px 8px;
    color: var(--yi-FG-1);
    cursor: pointer;
}
.sousuo-ico { /*放大镜图标（搜索框使用）*/
    font-size: 12px;
    width: 1.5em;
    height: 1em;
    position: relative;
    margin: 2px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
    .sousuo-ico::before {
        position: absolute;
        content: "";
        width: 0.9em;
        height: 0.9em;
        border: 1px solid var(--yi-BR-3);
        border-radius: 50px;
    }
    .sousuo-ico::after {
        position: absolute;
        content: "";
        width: 0.45em;
        left: 1em;
        top: 0.45em;
        border: 1px solid var(--yi-BR-3);
        border-radius: 5px;
    }
.sousuo-select-bg {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 8;
}
.sousuo-select { /*下拉*/
    background: var(--yi-BG);
    margin-top: 5px;
}
.sousuo-select-pc {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 10;
    margin-top: 5px;
    min-height: 128px;
    max-height: 50vh;
    overflow-y: auto;
    border-radius: 0 0 10px 10px;
    padding-bottom: 12px;
    -webkit-box-shadow: 0px 10px 8px 0px rgb(0 0 0 / 12%);
    box-shadow: 0px 10px 8px 0px rgb(0 0 0 / 12%);
}
/*底部导航*/
.winbotnav {
    background: var(--yi-BG-6);
    font-size: var(--yi-FS-0);
    padding: 5px 0 0 0;
    text-align: center;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
.anquanqu {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
/*按钮*/
.button, .button-0, .button-block { /*一行按钮，默认黄色*/
    position: relative;
    display: block;
    width: 184px;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 24px;
    box-sizing: border-box;
    font-weight: 700;
    font-size: 16px;
    font-size: var(--yi-FS);
    cursor: pointer; /*鼠标悬停手掌*/
    text-align: center;
    text-decoration: none; /*主要使用a标签时*/

    line-height: 1.88235294;
    border-radius: 8px;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /*去除ios点击时背景*/
    -webkit-user-select: none;
    user-select: none; /*选择文本*/
    border: none;
    appearance: none;
    -webkit-appearance: none; /*去除原生样式，主要对input按钮*/

    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #ff6146;
    background-color: var(--yi-BG-1);
    color: #fff;
    color: var(--yi-FG-1);
}
.button-0, .button-block-0 { /*灰色*/
    background-color: #f2f2f2;
    background-color: var(--yi-BG-2);
    color: #ff6146;
    color: var(--yi-FG-3);
}
.button-block {
    width:auto;
}
.button-block-0 {
    width: auto;
}
.but, .but-0 { /*不换行按钮（一行多个）默认黄色*/
    font-size: 16px;
    font-size: var(--yi-FS);
    font-weight: 600;
    padding: 5px 12px;
    box-sizing: border-box;
    border-radius: 6px;
    line-height: calc((32 - 10) / 16);
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /*去除ios点击时背景*/
    -webkit-user-select: none;
    user-select: none; /*选择文本*/
    border: none;
    appearance: none;
    -webkit-appearance: none; /*去除原生样式，主要对input按钮*/
    color: #fff;
    color: var(--yi-FG-1);
    background-color: #ff6146;
    background-color: var(--yi-BG-1);
    margin: 8px 12px 0 0;
}
.but-0 { /*灰色*/
    color: #ff6146;
    color: var(--yi-FG-3);
    background-color: #f2f2f2;
    background-color: var(--yi-BG-2);
}

/*圆圈关闭、错误、新建、上传总类*/
.close, .close-0, .error, .error-0, .error-1, .new {
    position: relative;
    display: inline-block;
    cursor: pointer; /*鼠标停留图标=手掌*/
    overflow: hidden; /*剪切溢出内容*/
}
/*圆圈黄色 关闭按钮*/
.close, .close-0 {
    height: 32px;
    width: 32px;
    border-radius: 50px;
    border: 2px solid var(--yi-BR-0);
    margin: 5px;
}
/*圆圈灰色 关闭按钮*/
.close-0 {
    border: 1px solid var(--BR-1);
}
.close:after, .close:before { /*样式*/
    height: 2px;
    background: var(--yi-BR-0);
}
.close-0:after, .close-0:before {
    height: 1px;
    background: var(--BR-1);
}

/*一个红色X ,表单使用*/
.error, .error-1 {
    height: 17px;
    width: 17px;
}
/*一个黑色X ,底部弹窗用*/
.error-0 {
    height: 22px;
    width: 22px;
}
.error:after, .error:before { /*样式（颜色、宽度）*/
    height: 1px;
    background: var(--yi-BR-0);
}
.error-0:after, .error-0:before { /*样式（颜色、宽度）*/
    height: 1.5px;
    background: var(--yi-BR-1);
}
.error-1:after, .error-1:before { /*样式（颜色、宽度）*/
    height: 1.5px;
    background: #fff;
    background: var(--yi-BR-2);
}
.close:after, .close-0:after, .error:after, .error-0:after, .error-1:after { /*前添加的内容旋转*/
    position: absolute;
    content: "";
    width: 90%;
    top: 48%;
    left: 5%;
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
}

.close:before, .close-0:before, .error:before, .error-0:before, .error-1:before { /*后添加*/
    position: absolute;
    content: "";
    width: 90%;
    top: 48%;
    left: 5%;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
/*一个虚线正方形灰色“+” 例如上传图片选择*/
.new {
    width: 64px;
    height: 64px;
    border-radius: 5px;
    border: 2px dashed var(--yi-BR);
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
}

    .new:after, .new-0:after { /*加号样式*/
        position: absolute;
        content: "";
        width: 50%;
        top: 48%;
        left: 25%;
        height: 2px;
        background: var(--yi-BR);
    }

    .new:before, .new-0:before {
        position: absolute;
        content: "";
        width: 50%;
        top: 48%;
        left: 25%;
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        height: 2px;
        background: var(--yi-BR);
    }
/*箭头*/
.jtri, .jtle, .jtbo {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 3px;
}
.jtri { /*向右箭头*/
    border-top: 2px solid var(--yi-BR-3);
    border-right: 2px solid var(--yi-BR-3);
    transform: rotate(45deg);
}
.jtle { /*向左箭头*/
    border-top: 2px solid var(--yi-BR-1);
    border-right: 2px solid var(--yi-BR-1);
    transform: rotate(-135deg);
}
.jtbo { /*向下箭头*/
    border-top: 2px solid var(--yi-BR-3);
    border-right: 2px solid var(--yi-BR-3);
    transform: rotate(135deg);
    margin-top: -5px;
}

/*横向导航选项卡*/
.tabpage {
}
.tabpage-but, .tabpage-but-on {
    display:inline-block;
    padding-bottom: 5px;
    margin: 8px 8px 8px 10px;
    position: relative;
    font-size: 17px;
    font-size: var(--yi-FS-3);
    cursor: pointer;
}
.tabpage-but-on {
    font-weight: 700;
    font-size: var(--yi-FS-4);
    color: #ff6146;
    color: var(--yi-FG-3);
}
    .tabpage-but-on::after {
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 50%;
        height: 4px;
        border-radius:2px;
        background: #ff6146;
        background: var(--yi-BR-0);
    }
/*网格导航*/
.grid-nav {
    padding: 8px 0;
}
.grid-nav-item {
    display: inline-block;
    text-align: center;
    padding:0;
}
.grid-nav-ico {
    background: #fff;
    background: var(--yi-BG);
    border-radius: 8px;
    padding: 12px;
    width: 30px;
    height: 30px;
}
.grid-nav-txt {
    margin-top:2px;
    font-size:14px;
    font-size:var(--yi-FS-1);
}
/*选择器的选择框（单双选）*/
.select {
    position:relative;
    padding-right:16px;
    min-height:25px;
}
    .select::after { /*后面加箭头*/
        content: "";
        position: absolute;
        right: -3px;
        margin: 5px;
        height:10px;width:10px;
        border-top: 2px solid var(--yi-BR-3);
        border-right: 2px solid var(--yi-BR-3);
        transform: rotate(45deg);
    }
.select-ck, .select-0-ck { /*原生选择框*/
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
.select-ck-ico { /*模拟选择框*/
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;/*调节大小只需调此属性*/
    width: 2.4em;
    height: 2.4em;
    position:relative;
    margin:0 8px;
}
    .select-ck-ico::before {
        content: "";
        position: absolute;
        top: -2px;
        right: 0;
        bottom: 0;
        left: 0;
        width: 50%;
        height: 50%;
        margin: 25% auto;
        border: 1px solid #00000025;
        border: 1px solid var(--yi-BR-3);
        border-radius: 100%;
    }
.select-ck:checked + .select-ck-ico::before {
    border: 1px solid #ff6146;
    border: 1px solid var(--yi-BR-0);
    background: #ff6146;
    background: var(--yi-BG-1);
}
.select-ck:checked + .select-ck-ico::after { /*选中时*/
    content: "";
    position: absolute;
    top: -3px;
    right: 0;
    bottom: 0;
    left: 0;
    width: 20%;
    height: 10%;
    margin: 45% auto;
    border-left: 2px solid #FFF;
    border-left: 2px solid var(--yi-BR-2);
    border-bottom: 2px solid #FFF;
    border-bottom: 2px solid var(--yi-BR-2);
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
}
/*块级选择框（捐款金额选择）*/
.select-0 { 
    display: inline-block;
    position: relative;   
}
.select-0-ck-ico { /*框*/
    position: absolute;
    top: 0;
    right: 0;
    font-size: 8px; /*调节大小只需调此属性*/
    width: 2.4em;
    height: 2.4em;
    border-radius: 0 5px 0 5px;
}
    .select-0-ck-ico::before { /*勾*/
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 50%;
        height: 25%;
        margin: 25% auto;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
    }
.select-0-ck-nr { /*内容*/
    border: 2px solid var(--yi-BR);
    border-radius: 5px;
    font-size: 17px; /*调节大小只需调此属性*/
    font-size: var(--yi-FS-3);
    padding: 8px 10px;
    text-align:center;
}
.select-0-ck:checked + .select-0-ck-ico { /*选中*/
    background: #ff6146;
    background: var(--yi-BG-1);
}
.select-0-ck:checked + .select-0-ck-ico::before{/*选中*/
    border-left: 2px solid var(--yi-BR-2);
    border-bottom: 2px solid var(--yi-BR-2);
}
.select-0-ck:checked ~.select-0-ck-nr {
    border: 2px solid var(--yi-BR-0);
}
/*步骤*/
.steps {
    padding:8px 24px;
    text-align:left;
}
.steps-item, .steps-item-to {
    position: relative;
    padding-bottom: 24px;
    padding-left: 36px;
}
.steps-item .biaoti-4{
    color: var(--yi-FG-4);
}
.steps-item-to .biaoti-4{
    color: var(--yi-FG);
}

    .steps-item::before, .steps-item-to::before { /*点*/
        content: "";
        position: absolute;
        left: -4px;
        top: 7px;
        width: 9px;
        height: 9px;
        z-index: 2;
        background: #ededed;
        background: var(--yi-BG-0);
        border-radius: 100%;
    }
    .steps-item-inner::before, .steps-item-inner-to::before { /*线*/
        content: "";
        position: absolute;
        left: 0;
        top: 19px;
        bottom: -3px;
        z-index: 1;
        width: 1px;
        border-left: 1px solid #ededed;
        border-left: 1px solid var(--yi-BR);
    }
    .steps-item-to::before {
        background: #ff6146;
        background: var(--yi-BG-1);
    }
    .steps-item-inner-to::before {
        border-left: 1px solid #ff6146;
        border-left: 1px solid var(--yi-BR-0);
    }

/*一个加号＋（黑色）*/
.jiahao, .jianhao {
    position: relative;
    cursor: pointer;
    width: 17px;
    height: 17px;
    display: inline-block;
}
    .jiahao::before, .jianhao::before {
        position: absolute;
        content: "";
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 90%;
        height: 2px;
        background: var(--yi-BR-1);
    }
    .jiahao::after {
        position: absolute;
        content: "";
        top:0;right:0;bottom:0;left:0;margin: auto;
        width: 90%;
        height: 2px;
        background: var(--yi-BR-1);
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
    }
.jiahao-0 {
    width: 17px;
    height: 17px;
    display: inline-block;
    position: relative;
    border: 1px solid var(--yi-BR-1);
    border-radius: 100%;
}
    .jiahao-0::before {
        position: absolute;
        content: "+";
        /* margin: 0 auto; */
        left: 0;
        right: 0;
        top: -1px;
        bottom: 0;
        text-align: center;
        line-height: 1;
    }
/*分隔线*/
.hr, .hr-0, .hr-1, .hr-left, .hr-right {
    position: relative;
}

    .hr::after, .hr-0::before, .hr-1::after { /*底部（默认）*/
        content: " ";
        position: absolute;
        left: 0;
        right: 0;
        /*height: 1px;*/        
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        z-index: 2;
    }
    .hr::after { /*底部*/
        bottom: 0;
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        border-bottom: 1px solid var(--yi-BR);
    }
    .hr-0::before { /*顶部*/
        top: 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        border-top: 1px solid rgba(0,0,0,0.1);
        border-top: 1px solid var(--yi-BR);
    }
    .hr-1::after {
        border-bottom: 20px solid rgba(0,0,0,0.1);
        border-bottom: 20px solid var(--yi-BR);
        bottom: 10px;
    }
    .hr-left::before, .hr-right::after {
        content: " ";
        position: absolute;
        top: 0;
        bottom: 0;
        /*width: 1px;*/
        -webkit-transform: scaleY(0.7);
        transform: scaleY(0.7);
        z-index: 2;
    }
    .hr-left::before {
        left: 0;
        border-left: 1px solid rgba(0,0,0,0.1);
        border-left: 1px solid var(--yi-BR);
    }
    .hr-right::after {
        right: 0;
        border-right: 1px solid rgba(0,0,0,0.1);
        border-right: 1px solid var(--yi-BR);
    }
.hr-2 {/*黄色线*/
    border-bottom: 1px solid #ff6146;
    border-bottom: 1px solid var(--yi-BR-0);
}
/*边框线*/
.border {
    border: 1px solid #ededed;
    border: 1px solid var(--yi-BR);
}
/*成功图标*/
.yesdata, .nodata, .waitdata {
    position: relative;
    display: inline-block;
    width: 65px;
    height: 65px;
    border-radius: 50px;
}

    .yesdata::after {
        content: "";
        position: absolute;
        margin: auto;
        border-radius: 2px;
        border-left: 5px solid var(--yi-BR-2);
        border-bottom: 5px solid var(--yi-BR-2);
        background: transparent;
        transform: rotate(-45deg);
        left: 0;
        top: -8%;
        right: 0;
        bottom: 0;
        width: 50%;
        height: 25%;
    }
.yesdata { /*绿色圆形勾*/
    background: #07c160;
    background: var(--yi-BG-3);
}
/*错误数据图标*/
.nodata {
    background: #fa5151;
    background: var(--yi-BG-4);
    color: var(--yi-FG-1);
}
    .nodata::after {
        content: "！";
        position: absolute;
        left: 12%;
        top: 50%;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 50%;
        height: 50%;
        font-size: 300%;
        font-family: emoji;
        text-align: center;
        line-height: 0;
    }
/*等待数据*/
.waitdata {
    background: #10aeff;
    background:var(--yi-BG-8);
}
    .waitdata::before {
        content: "";
        position: absolute;
        margin: auto;
        border-left: 5px solid var(--yi-BR-2);
        background: transparent;
        left: 0;
        top: -15px;
        right: 0;
        bottom: 0;
        width: 5px;
        height: 30%;
    }
    .waitdata::after {
        content: "";
        position: absolute;
        margin: auto;
        border-bottom: 5px solid var(--yi-BR-2);
        background: transparent;
        transform: rotate(45deg);
        left: 11px;
        top: 13px;
        right: 0;
        bottom: 0;
        width: 30%;
        height: 5px;
    }
/*弹性布局（默认横排）*/
.flex {
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
    flex-direction: row;
}
    .flex [style*="flex:1"] {
        word-wrap: break-word; /*连接词断行*/
        min-width:1px;
    }
.flex1 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
.flex-row { /*(横向)*/
    -webkit-box-align: center; /*垂直居中*/
    -webkit-align-items: center;
    align-items: center;
}

.flex-col { /*竖向排列*/
    box-sizing: border-box;
    -webkit-box-orient: vertical; /*从顶向下排*/
    -webkit-box-direction: normal; /*默认方向显示子元素*/
    -webkit-flex-direction: column; /*作为列，垂直地显示弹性项目。*/
    flex-direction: column;
}
.grid, .page-grid { /**/
    display: -moz-grid;
    display: -ms-grid;
    display: -webkit-box;
    display: -webkit-flex;
    display: grid;
}
.grid-col-2 {
    grid-template-columns: repeat(2,1fr);
    grid-gap: 8px 10px;
}
.grid-col-3 {
    grid-template-columns: repeat(3,1fr);
    grid-gap: 8px 10px;
}
.grid-col-4 {
    grid-template-columns: repeat(4,1fr);
    grid-gap: 8px 10px;
}
.page-grid-1 {
    grid-template-columns: repeat(1,1fr);
    grid-gap: 8px 10px;
}
.page-grid-item {
    background: #fff;
    background: var(--yi-BG);
    padding: 10px;
}
/*弹窗*/
.tanbg, .tanbg-scr { /*弹窗的背景（黑色）*/
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.60);
    background-color: var(--yi-BG-7);
}
.tanbg-scr {
    background-color: none;
}
.tan-cen { /*中部弹窗*/
    position: fixed;
    z-index: 1000;
    font-size: 10px;
    width: 13.6em;
    height: 13.6em;
    top: 45%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    text-align: center;
    border-radius: 12px;  
    background-color: #4c4c4c;
    background-color: var(--yi-BG-5);
    box-sizing: border-box;
    line-height: 1.4;
}
.tan-pos, .tan-scr { /*底部弹窗*/
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 800;
    /*line-height: 1.4;*/
    background-color: #fff;
    background-color: var(--yi-BG);
    color: #000;
    color: var(--yi-FG);
    overflow: hidden;
    padding-bottom: calc(1px + constant(safe-area-inset-bottom));
    padding-bottom: calc(1px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    outline: 0;
}
.tan-pos { /*半屏*/
    min-height: 50%;
    max-height: 90%;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.tan-scr { /*全屏*/
    height: 100%;
}
.tan-nr, .tan-pos-nr { /*弹窗的内容区域*/
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /*line-height: 1.4;*/
    word-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    flex: 1;
}
/*弹窗转浮窗*/
.tan-float {
    position: fixed;
    right: 8px;
    bottom: 10%;
    width: 72px;
    height: 100px;
    background: var(--yi-BG-5);
    border-radius: 5px;
    overflow:hidden;
    z-index:100;
}
/*.tan-float-slideOut {
    animation: tan-float-slideOut 2s forwards;
    transition-delay: 2s;
}
.tan-float-slideIn {
    animation: tan-float-slideIn 2s forwards;
    transition-delay: 2s;
}
@-webkit-keyframes tan-float-slideOut {
    0% {
        transform: translate3d(0,0,0);
        opacity: 1
    }
    25% {
        transform: translate3d(25%,25%,0);
        opacity: 0.75
    }
    50% {
        transform: translate3d(50%,50%,0);
        opacity: 0.50
    }
    75% {
        transform: translate3d(75%,75%,0);
        opacity: 0.25
    }
    100% {
        transform: translate3d(100%,100%,0);
        opacity: 0
    }
}
@-webkit-keyframes tan-float-slideIn {
    0% {
        transform: translate3d(100%,100%,0);
        opacity: 0
    }

    25% {
        transform: translate3d(75%,75%,0);
        opacity: 0.25
    }

    50% {
        transform: translate3d(50%,50%,0);
        opacity: 0.50
    }

    75% {
        transform: translate3d(25%,25%,0);
        opacity: 0.75
    }

    100% {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}*/
/*js使用显示页面*/
.js-show {
    opacity: 1;
}
/*用于单页应用的单个总页面*/
.page {
    outline: 0; /*防止跳转时出现轮廓*/
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: #000;
    color: var(--yi-FG);
    box-sizing: border-box;
    z-index: 100;
    background-color: #ededed;
    background-color: var(--yi-BG-0);
}
.page-hd {
}
.page-nr { /*单页应用的单个页面的内容框*/
    box-sizing: border-box;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.page-ft {
}
.page-ft-fo {/**浮动页脚*/
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index:100;
    background: #f7f7f7;
    background: var(--yi-BG-6);
    padding-top: 0px;
    padding-bottom: 0px;
    padding-bottom: calc(0px + constant(safe-area-inset-bottom));
    padding-bottom: calc(0px + env(safe-area-inset-bottom));
}
/**页面处理*/
.pagebg {
    background-color: #ededed;
    background-color: var(--yi-BG-0);
}
.item {
    padding: 8px;
    background: var(--yi-BG);
    margin-bottom:10px;
}
/*一个载入中的转圈*/
.load {
    width: 25px;
    height: 25px;
    border: 2px solid var(--yi-BR-3);
    border-top-color: #ff6146;
    border-radius: 50%;
    animation: load 1.5s linear infinite;
    display:inline-block;
}

@keyframes load {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/*背景闪烁*/
.bg-flick {
    -webkit-animation: bg-flick 2s 2 forwards;
    animation: bg-flick 2s 2 forwards;
}

@-webkit-keyframes bg-flick {
    0% {
        background: #ededed;
        background: var(--yi-BG-0);
    }
    50% {
        background: rgba(0, 0, 0, 0.60);
        background: var(--yi-BG-7);
    }
    to {
        background: #fff;
        background: var(--yi-BG);
    }
}

@keyframes bg-flick {
    0% {
        background: #ededed;
        background: var(--yi-BG-0);
    }

    50% {
        background: rgba(0, 0, 0, 0.60);
        background: var(--yi-BG-7);
    }
    to {
        background: #fff;
        background: var(--yi-BG);
    }
}
/*底部淡入*/
.slideIn-bot {
    -webkit-animation: slideIn-bot 0.2s forwards;
    animation: slideIn-bot 0.2s forwards;
}

@-webkit-keyframes slideIn-bot {
    0% {
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
        opacity: 0
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes slideIn-bot {
    0% {
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
        opacity: 0
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}
.slideIn-bot-0 {/*向上淡入*/
    -webkit-animation: slideIn-bot-0 0.2s forwards;
    animation: slideIn-bot-0 0.2s forwards;
}
@-webkit-keyframes slideIn-bot-0 {
    0% {
        -webkit-transform: translate3d(0,10%,0);
        transform: translate3d(0,10%,0);
        opacity: 0
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes slideIn-bot-0 {
    0% {
        -webkit-transform: translate3d(0,10%,0);
        transform: translate3d(0,10%,0);
        opacity: 0
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}
/*中部淡入*/
.slideIn-cen {
    -webkit-animation: slideIn-cen 0.2s forwards;
    animation: slideIn-cen 0.2s forwards;
}
@-webkit-keyframes slideIn-cen {
    0% {
        -webkit-transform: translate3d(0,0,-50%);
        transform: translate3d(0,0,-50%);
        opacity: 0
    }

    to {
        -webkit-transform: translateZ(1);
        transform: translateZ(1);
        opacity: 1
    }
}
@keyframes slideIn-cen {
    0% {
        -webkit-transform: translate3d(0,0,-50%);
        transform: translate3d(0,0,-50%);
        opacity: 0
    }

    to {
        -webkit-transform: translateZ(1);
        transform: translateZ(1);
        opacity: 1
    }
}
/*底部淡出*/
.slideOut-bot {
    -webkit-animation: slideOut-bot 0.2s forwards;
    animation: slideOut-bot 0.2s forwards;
}

@-webkit-keyframes slideOut-bot {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
        opacity: 0
    }
}

@keyframes slideOut-bot {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
        opacity: 0
    }
}
/*中部淡出*/
.slideOut-cen {
    -webkit-animation: slideOut-cen 0.2s forwards;
    animation: slideOut-cen 0.2s forwards;
}
@-webkit-keyframes slideOut-cen {
    0% {
        -webkit-transform: translateZ(1);
        transform: translateZ(1);
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0,0,-50%);
        transform: translate3d(0,0,-50%);
        opacity: 0
    }
}

@keyframes slideOut-cen {
    0% {
        -webkit-transform: translateZ(1);
        transform: translateZ(1);
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0,0,-50%);
        transform: translate3d(0,0,-50%);
        opacity: 0
    }
}
/*右边淡入*/
.slideIn-right {
    -webkit-animation: slideIn-right .2s forwards;
    animation: slideIn-right .2s forwards
}

@-webkit-keyframes slideIn-right {
    0% {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
        opacity: 0
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes slideIn-right {
    0% {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
        opacity: 0
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

/*右边淡出*/
.slideOut-right {
    -webkit-animation: slideOut-right .2s forwards;
    animation: slideOut-right .2s forwards
}

@-webkit-keyframes slideOut-right {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
        opacity: 0
    }
}

@keyframes slideOut-right {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
        opacity: 0
    }
}
/*文章*/
.bbs {
}
.bbs-biaoti-input, .bbs-neirong-input {
    caret-color: #ff6146; /*光标颜色*/
    caret-color: var(--yi-FG-3);
    outline: none;
    font-size: 20px;
    font-size: var(--yi-FS-6);
    font-weight:700;
    -webkit-appearance: none;
    /*line-height: 1.41176471;*/
    color: #000;
    color: var(--yi-FG);
    word-wrap: break-word; /*强制断句*/
    -webkit-hyphens: auto; /*在换行时如何使用连字符连接单词*/
    hyphens: auto; /*连字符连接单词*/
}
    .bbs-biaoti-input:empty:before, .bbs-neirong-input:empty:before { /*为空时，placeholder*/
        content: attr(placeholder);
        color: rgba(0, 0, 0, 0.5);
        color: var(--yi-FG-4);
    }
.bbs-neirong-input {
    font-size: 16px;
    font-size: var(--yi-FS-2);
    min-height: 350px;
    font-weight: 400;
}
.bbs-neirong-img {
    max-width:100%;
}
.bbs-neirong-iframe {
    width:100%;
    max-width: 100%;
}
.bbs-item-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius:2px;
    margin:2px 0 0 10px;
}
.bbs-item-zhupu {
    padding: 8px 10px;
    border-radius: 5px;
    margin: 3px 0;
}
/*结构树*/
.tree-node {
    position: relative;
    padding-left: 16px;
    margin-left: 16px;
}
    .tree-node::before {
        content: "";
        position: absolute;
        width: 14px;
        border-top: 1px solid var(--yi-BR-4);
        left: 0;
        top: 0.7em;
    }
.tree-node-child {
    position: relative;
}
    .tree-node-child .tree-node::after {
        content: "";
        position: absolute;
        border-left: 1px solid var(--yi-BR-4);
        left: 0;
        top: 0;
        bottom: 0;
    }
    .tree-node-child > .tree-node:last-child::after {
        height: 0.7em;
    }
/*.tree-node-item {
    position: relative;
}*/
/*.tree-node-but, .tree-node-but-to {
    position: absolute;
    z-index: 8;
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border-radius: 100%;
    border: 1px solid var(--yi-BR-1);
    left: -0.5em;
    top: 0.25em;
    background: var(--yi-BG);
}
    .tree-node-but::before, .tree-node-but-to::before, .tree-node-but-to::after {*/ /*减号*/
        /*content: "";
        position: absolute;
        z-index: 5;
        width: 0.5em;
        border-top: 1px solid var(--yi-BR-1);
        left: 0;
        right: 0;
        top: 0.4em;
        margin: auto;
    }
    .tree-node-but-to::after {*/ /*加号*/
        /*transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
    }*/