/* global */

* {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    font-style: normal;
    text-decoration: none;
    overflow: hidden;
}

@keyframes wave {
    0%, 100% {
        height: 20px;
        opacity: 0.3;
    }
    50% {
        height: 40px;
        opacity: 1;
    }
}

/* 细边滚动条样式 */
::-webkit-scrollbar {
    width: 6px !important;  /* 垂直滚动条宽度 */
    height: 6px !important; /* 水平滚动条高度 */
}

::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
}

:root {
    --fg-nor: #2D3033;
    --fg-cho: #333;
    --bg-btn: linear-gradient(to top, #DADAF2, #F2F2FF);
    --bg-btn-hov: linear-gradient(to top, #EFEFF9, #F9F9FF);
    --bg-btn-act: linear-gradient(to top, #CECEE5, #E6E6F2);
    --bg-cho: linear-gradient(to top, #D3F279, #E2FF8C);
    --bg-obj: linear-gradient(to top, #CEB7E5, #E0CDF2);
    --bg-tit: linear-gradient(to top, #C1C1F2, #D8D8FF);
    --bg-sta: linear-gradient(to top, #CDD3D8, #E5E5E5);
    --bg-ico: linear-gradient(to top, #C1C1F2, #D8D8FF);
    --bg-ico-hov: linear-gradient(to top, #CDCDF2, #E5E5FF);
    --bg-ico-act: linear-gradient(to top, #B7B7E5, #CDCDF2);
    --bg-sav: linear-gradient(to top, #D3F279, #E2FF8C);
    --bg-sav-hov: linear-gradient(to top, #E0F2A9, #EFFFBF);
    --bg-sav-act: linear-gradient(to top, #C8E572, #D6F285);
    --bg-X: linear-gradient(to top, #E50000, #FF1919);
    --bg-X-hov: linear-gradient(to top, #E52D2D, #FF4C4C);
    --bg-X-act: linear-gradient(to top, #CC0000, #E51616);
    --bg-V: linear-gradient(to top, #6BB223, #84CC3D);
    --bg-V-hov: linear-gradient(to top, #8ECC51, #ACE572);
    --bg-V-act: linear-gradient(to top, #5B991E, #74B235);
    --bg-H: linear-gradient(to top, #F2F2A9, #FFFFBF);
    --bg-H-hov: linear-gradient(to top, #F2F2C1, #FFFFD8);
    --bg-H-act: linear-gradient(to top, #E5E5A0, #F2F2B5);
    --bg-box: rgba(249, 251, 252, .85);
    --bg-n: #E6E6F4;
    --bg-v: #F4F4F9;
    --sd-box: 0 0 6px 2px rgba(114, 114, 127, .65);
    --sd-list: 0 0 3px 1px rgba(114, 114, 127, .35);
    --sd-tit: inset 0 0 1px 1px rgba(250, 252, 255, .85);
    --sd-cho: inset 0 0 1px 1px rgba(230, 230, 255, .85);
    --bdc: #899199;
}

html,
body {
    position: relative;
    width: 100%;
    height: 100%;
    line-height: 150%;
    font-family: 'Microsoft YaHei', Tahoma, Verdana, SimSun, sans-serif;
    font-size: 20px;
    text-align: left;
    color: var(--fg-nor);
    background-color: #fff;
}

b {
    display: inline;
    font-weight: normal;
}

i, img {
    display: block;
}

h1 {
    line-height: 150%;
    font-size: 24px;
}

input {
    display: block;
}

input::placeholder {
    font-size: 14px;
}

a,
.cat,
.tag {
    color: #158;
    text-decoration: none;
    display: inline;
    cursor: pointer;
}

.cf {
    height: 0;
    clear: both;
    overflow: hidden;
}

.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 100%;
}

.loading .bar {
    width: 10px;
    height: 20px;
    margin-left: 5px;
    display: block;
    background-color: #8EADCC;
    border: 1px solid #6B8EB2;
    animation: wave 1.2s infinite ease-in-out;
}

.loading .bar:nth-child(1) { animation-delay: -0.4s; }
.loading .bar:nth-child(2) { animation-delay: -0.2s; }
.loading .bar:nth-child(3) { animation-delay: 0s; }

.X, .V, .atmX {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 22px;
    cursor: pointer;
    text-align: center;
    color: #fff;
    border-left: 1px solid var(--bdc);
    background: var(--bg-X);
    opacity: .85;
}

.X:hover {
    background: var(--bg-X-hov);
}

.X:active {
    background: var(--bg-X-act);
}

.V{
    right: 31px;
    background: var(--bg-V);
}

.V:hover {
    background: var(--bg-V-hov);
}

.V:active {
    background: var(--bg-V-act);
}

.X::before {
    content: "";
    width: 30px;
    height: 30px;
    display: block;
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cline x1='2' y1='2' x2='18' y2='18'/%3E%3Cline x1='18' y1='2' x2='2' y2='18'/%3E%3C/svg%3E");
}

.V::before {
    content: "";
    width: 30px;
    height: 30px;
    display: block;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpolyline points='4 10, 8 15, 16 5'/%3E%3C/svg%3E");
}

.H {
    width: 30px;
    height: 30px;
    background: var(--bg-H);
}

.H:hover {
    background: var(--bg-H-hov);
}

.H:active {
    background: var(--bg-H-hov);
}

.H::after {
    content: "?";
}

/* name value */

.nvs {
    position: relative;
    height: 30px;
    margin: 15px 15px 0 15px;
    border: 1px solid var(--bdc);
}

.nv-n, .nv-v, .nv-i, .nv-b {
    width: 30px;
    height: 30px;
    line-height: 28px;
    float: left;
    box-sizing: border-box;
}

.nv-n {
    width: 35%;
    text-align: right;
    padding: 0 5px;
    background: var(--bg-n);
}

.nv-mt .nv-n::before {
    content: "*";
    padding-right: 3px;
    color: #f22;
}

.vcok .nv-n::before {
    content: "✓ *";
    padding-right: 3px;
    color: #080;
}

.vcerr .nv-n::before {
    content: "✕ *";
    padding-right: 3px;
    color: #f22;
}

.nv-v {
    width: 65%;
    text-align: left;
    border-left: 1px solid var(--bdc);
    background: var(--bg-v);
}

.nv-v input, .nv-v textarea {
    width: calc(100% - 10px);
    height: 30px;
    line-height: 28px;
    padding: 0 5px;
    outline: none;
    font-size: 18px;
}

.vco .nv-v {
    width: calc(65% - 90px);
}

.nv-i {
    width: 90px;
    padding: 0;
    cursor: pointer;
    border-left: 1px solid var(--bdc);
    background-color: #fff;
}

.btns1 .nv-v {
    width: calc(65% - 30px);
}

.btns2 .nv-v {
    width: calc(65% - 60px);
}

.nv-b {
    padding: 0;
    cursor: pointer;
    text-align: center;
    border-left: 1px solid var(--bdc);
}

.edit {
    background: var(--bg-ico);
}

.edit:hover {
    background: var(--bg-ico-hov);
}

.edit:active {
    background: var(--bg-ico-act);
}

.edit::before {
    content: "";
    width: 30px;
    height: 30px;
    display: inline-block;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3 L17 6 L6 17 L3 17 L3 14 Z' /%3E%3Ccircle cx='15.5' cy='4.5' r='2' fill='%23fff' /%3E%3C/svg%3E");
}

.save {
    background: var(--bg-sav);
}

.save:hover {
    background: var(--bg-sav-hov);
}

.save:active {
    background: var(--bg-sav-act);
}

.save::before {
    content: "";
    width: 30px;
    height: 30px;
    display: inline-block;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Crect x='4' y='4' width='16' height='16' rx='2' ry='2'/%3E%3Crect x='8' y='12' width='8' height='8'/%3E%3Cline x1='16' y1='4' x2='16' y2='8'/%3E%3C/svg%3E");
}

.term .nv-n::before {
    content: "\2713";
    padding-right: 4px;
    color: #080;
}

.term input {
    cursor: pointer;
}

.ava .nv-n, .ava .nv-v, .txta .nv-n, .txta .nv-v {
    width: 100%;
    display: block;
    float: none;
}

.ava, .txta {
    height: 130px;
}

.ava .nv-n, .txta .nv-n {
    text-align: left;
    border-bottom: 1px solid var(--bdc);
}

.ava .nv-v, .txta .nv-v {
    height: 100px;
    padding: 0;
    border: 0;
}

.ava .nv-v img {
    width: 100px;
    height: 100px;
    margin: 0;
    padding: 0;
    border: 0;
}

.txta .nv-v textarea {
    width: 100%;
    height: 100px;
    overflow-y: auto;
    line-height: 24px;
    padding: 5px;
    display: block;
    outline: none;
}

.ava .nv-b, .txta .nv-b {
    position: absolute;
    top: 0;
    right: 0;
    border-bottom: 1px solid var(--bdc);
}

.ava .edit, .ava .save, .txta .edit, .txta .save {
    right: 30px;
}

/* choose list */

.cho-b {
    position: relative;
    margin: 15px 15px 0 15px;
    border: 1px solid var(--bdc);
}

.cho-n {
    height: 30px;
    line-height: 28px;
    padding: 0 10px;
    border-bottom: 1px solid var(--bdc);
    background: var(--bg-n);
}

.cho-v {
    padding-bottom: 5px;
    background: var(--bg-v);
}

.cho-l {
    height: 30px;
    line-height: 28px;
    margin: 5px 0 0 5px;
    padding: 0 10px;
    font-size: 18px;
    float: left;
    cursor: pointer;
    border: 1px solid var(--bdc);
    background: var(--bg-btn);
}

.cho-l:hover {
    background: var(--bg-btn-hov);
}

.cho-l:active {
    background: var(--bg-btn-act);
}

/* modify adv */

.mad, .mad-lab {
    position: relative;
    margin: 15px 15px 0 15px;
    border: 1px solid var(--bdc);
}

.mad-lab {
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 18px;
}

.mad-l, .mad-r {
    width: 72px;
    height: 72px;
    float: left;
    border-right: 1px solid var(--bdc);
}

.mad-r {
    width: calc(100% - 73px);
    border: 0;
}

.mad-l img {
    position: absolute;
    z-index: 1;
    width: 72px;
    height: 72px;
    background-color: #DADFE5;
}

.mad-txt {
    width: 100%;
    height: 24px;
    border-bottom: 1px solid var(--bdc);
}

.mad-txt input {
    width: calc(100% - 6px);
    height: 24px;
    line-height: 24px;
    padding: 0 3px;
    display: block;
    outline: none;
    font-size: 18px;
}

.mad-btn {
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    background-color: rgba(255, 255, 255, .65);
}

.mad-num {
    width: 35px;
}

.c_ .mad-num {
    color: #f22;
}

.mad-att {
    top: auto;
    bottom: 0;
}

.mad-save {
    left: 48px;
    top: auto;
    bottom: 0;
}

.mad-att::before {
    content: "";
    width: 24px;
    height: 24px;
    display: inline-block;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='4' y='4' width='8' height='2' rx='1'/%3E%3Crect x='6' y='11' width='12' height='2' rx='1'/%3E%3Crect x='12' y='18' width='8' height='2' rx='1'/%3E%3C/svg%3E");
}

.mad-save::before {
    content: "";
    width: 24px;
    height: 24px;
    display: inline-block;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Crect x='4' y='4' width='16' height='16' rx='2' ry='2'/%3E%3Crect x='8' y='12' width='8' height='8'/%3E%3Cline x1='16' y1='4' x2='16' y2='8'/%3E%3C/svg%3E");
}

/* up adv */

.upad-l, .upad-btns, #upad-img, #upad-pri {
    height: 30px;
    line-height: 28px;
    margin: 15px 15px 0 15px;
    padding: 0 5px;
    border: 1px solid var(--bdc);
    box-sizing: border-box;
}

.upad-btns {
    padding: 0;
}

#upad-img {
    max-width: calc(100% - 30px);
    height: auto;
    padding: 0;
    display: block;
    cursor: pointer;
}

#upad-pri {
    height: auto;
    line-height: 30px;
}

.upad-btn {
    width: 15%;
    height: 30px;
    line-height: 28px;
    float: left;
    cursor: pointer;
    text-align: center;
    border-left: 1px solid var(--bdc);
    background-color: #E6ECF2;
    box-sizing: border-box;
}

.upad-btn0 {
    width: calc(25% - 30px);
    border: 0;
    background-color: #CDD3D8;
}

.upad-btn2 {
    width: 30px;
    background-color: #FFDF7F;
}

.mads-l {
    height: 30px;
    line-height: 28px;
    margin: 15px 15px 0 15px;
    border: 1px solid var(--bdc);
    box-sizing: border-box;
}

.mads-ipt, .mads-opt, .mads-help {
    width: calc(50% - 15px);
    height: 30px;
    line-height: 28px;
    border-left: 1px solid var(--bdc);
    float: left;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
}

.mads-ipt, .mads-opt {
    background: var(--bg-n);
}

.mads-ipt {
    border: 0;
}

.mads-help {
    width: 30px;
}

#adv-data {
    width: calc(100% - 30px);
    height: 240px;
    line-height: 24px;
    overflow-y: auto;
    margin: 0 15px;
    padding: 5px;
    display: block;
    outline: none;
    border: 1px solid var(--bdc);
    border-top: 0;
    background: var(--bg-v);
    box-sizing: border-box;
}

/* window */

#WIN {
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/* container */

#CTN {
    position: absolute;
    z-index: 200;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 31px);
}

/* list box */

#LB {
    position: absolute;
    z-index: 210;
    left: 0;
    top: 0;
    width: 420px;
    height: calc(100% - 15px);
    padding-bottom: 15px;
    border-right: 1px solid var(--bdc);
    overflow-y: auto;
}

.H5WAP #LB {
    width: 100%;
}

.list {
    position: relative;
    margin: 10px 10px 0 10px;
    padding: 5px;
    background: var(--bg-box);
    border: 1px solid var(--bdc);
    box-shadow: var(--sd-list);
}

.list .tkdel {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    background-color: #7C97B2;
}

.tkpic {
    width: calc(50% - 2px);
    border: 1px solid var(--bdc);
    float: left;
}

.tkpic .pic, .tkado .ado, .tkvdo .vdo {
    width: 100%;
    max-width: 100%;
}

.tkado .ado, .tkvdo .vdo {
    cursor: pointer;
}

.play {
    position: absolute;
    top: 15%;
    left: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -15%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tkvdo .play {
    top: 35%;
    transform: translate(-50%, -35%);
}

.srcok .play {
    display: none;
}

.tkurl, .tkbtn {
    width: 80%;
    height: 20px;
    line-height: 20px;
    float: left;
    font-size: 14px;
}

.tkurl{
    background-color: #CEDAE5;
}

.tkvoi .tkurl {
    width: 70%;
}

.tkvl {
    margin-top: 5px;
}

.tkvl1 {
    margin-top: 0;
}

.tkurl input{
    width: calc(100% - 6px);
    height: 20px;
    line-height: 20px;
    padding: 0 3px;
    display: block;
    outline: none;
}

.tkbtn{
    width: 20%;
    text-align: center;
    cursor: pointer;
    background-color: #7C97B2;
}

.tkvoi .tkbtn {
    width: 15%;
    color: #fff;
}

.tkvoi .addvoi {
    background: linear-gradient(to top, #007F00, #1E991E);
}

.tkvoi .delvoi {
    background: linear-gradient(to top, #E50000, #FF3232);
}

/* adv side */

#AS {
    position: absolute;
    z-index: 220;
    top: 0;
    right: 0;
    width: calc(100% - 421px);
    height: 100%;
    background: var(--bg-box);
}

.H5WAP #AS {
    width: 0;
}

/* left side(navigation menu), right side(tool menu) */

#LS, #RS {
    position: absolute;
    z-index: 230;
    left: 0;
    top: 0;
    width: 160px;
    height: 100%;
    border: 1px solid var(--bdc);
    background: var(--bg-box);
    box-shadow: var(--sd-box);
}

#RS {
    z-index: 240;
    left: auto;
    top: 0;
    right: 0;
}

#LS.i_, #RS.i_ {
    width: 30px;
    height: 30px;
    background-color: rgba(224, 242, 205, .25);
}

#LS.i_ .mn-lab, #LS.i_ .mn-ico, #RS.i_ .mn-lab, #RS.i_ .mn-ico {
    background: transparent;
}

.mn-lab {
    position: relative;
    left: 0;
    top: 0;
    height: 30px;
    border-bottom: 1px solid var(--bdc);
    background: var(--bg-tit);
}

.mn-name {
    position: absolute;
    left: 62px;
    top: 0;
    width: calc(100% - 62px);
    height: 30px;
    line-height: 30px;
    text-align: center;
}

#RS .mn-name {
    left: 0;
}

.mn-ico {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--bdc);
    background: var(--bg-ico);
}

.mn-ico:hover {
    background: var(--bg-ico-hov);
}

.mn-ico:active {
    background: var(--bg-ico-act);
}

.mn-tool {
    left: auto;
    right: 0;
    border-right: 0;
    border-left: 1px solid var(--bdc);
}

#LS .mn-back {
    left: 31px;
    right: auto;
}

#RS .mn-back {
    left: auto;
    right: 31px;
    border-right: 0;
    border-left: 1px solid var(--bdc);
}

.mn-nav::after {
    content: "";
    width: 30px;
    height: 30px;
    display: inline-block;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cline x1='2' y1='5' x2='17' y2='5'/%3E%3Cline x1='2' y1='10' x2='17' y2='10'/%3E%3Cline x1='2' y1='15' x2='17' y2='15'/%3E%3C/svg%3E");
}

.mn-tool::after {
    content: "";
    width: 30px;
    height: 30px;
    display: inline-block;
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.407 6.993l3.77-3.756c0.081-0.079 0.152-0.18 0.205-0.296 0.227-0.504 0.002-1.096-0.501-1.322-0.263-0.118-0.532-0.22-0.807-0.306-1.582-0.492-3.34-0.428-4.963 0.307-1.761 0.797-3.033 2.234-3.664 3.909-0.554 1.467-0.617 3.124-0.087 4.697l-6.447 6.447c-0.609 0.609-0.914 1.41-0.914 2.207s0.305 1.598 0.914 2.207 1.41 0.914 2.207 0.914 1.598-0.305 2.207-0.914l6.448-6.448c0.050 0.017 0.1 0.033 0.151 0.049 1.582 0.492 3.34 0.428 4.963-0.307 1.761-0.797 3.033-2.234 3.664-3.909s0.624-3.594-0.173-5.355c-0.045-0.103-0.114-0.205-0.204-0.295-0.391-0.391-1.024-0.391-1.414 0l-3.756 3.77zM13.986 5.6c-0.383 0.39-0.573 0.9-0.572 1.406 0.002 0.502 0.192 1.007 0.571 1.394l1.607 1.608c0.398 0.39 0.907 0.58 1.413 0.579 0.502-0.002 1.007-0.192 1.394-0.571l2.574-2.574c0.090 0.796-0.015 1.593-0.291 2.326-0.452 1.199-1.359 2.222-2.617 2.792-1.16 0.525-2.412 0.571-3.545 0.219-0.197-0.061-0.391-0.135-0.579-0.22-0.387-0.174-0.827-0.082-1.118 0.205l-6.91 6.91c-0.219 0.219-0.504 0.328-0.793 0.328s-0.574-0.109-0.793-0.328-0.328-0.504-0.328-0.793 0.109-0.574 0.328-0.793l6.91-6.91c0.301-0.301 0.37-0.746 0.204-1.119-0.569-1.258-0.575-2.626-0.123-3.825s1.359-2.222 2.617-2.792c0.852-0.386 1.755-0.513 2.623-0.413z'/%3E%3C/svg%3E");
}

.mn-back::after {
    content: "";
    width: 30px;
    height: 30px;
    display: inline-block;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M17 8 L17 16' /%3E%3Cpath d='M5 12 L11 6' /%3E%3Cpath d='M5 12 L11 18' /%3E%3Cpath d='M11 6 L11 18' /%3E%3C/svg%3E");
}

.mn-list {
    position: absolute;
    left: 0;
    top: 31px;
    width: 100%;
    height: calc(100% - 46px);
    padding-bottom: 15px;
    overflow-y: auto;
}

.mn-btn {
    height: 30px;
    line-height: 28px;
    margin: 15px 15px 0 15px;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--bdc);
    background: var(--bg-btn);
    box-shadow: var(--sd-list);
}

.mn-btn:hover {
    color: var(--fg-nor);
    background: var(--bg-btn-hov);
}

.mn-btn:active {
    color: var(--fg-nor);
    background: var(--bg-btn-act);
}

.mn-obj {
    background: var(--bg-obj);
}

/*vavtar, expression*/

#ae-pic {
    position: relative;
    margin: 0 15px;
}

#ae-pic .ava-list,
#ae-pic .exp-list {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-top: 15px;
    display: block;
    cursor: pointer;
    border: 1px solid var(--bdc);
    box-sizing: border-box;
}

#ae-pic .exp-list .exp-img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
}

#ae-pic .exp-list .exp-txt {
    position: relative;
    z-index: 10;
    height: 14px;
    line-height: 15px;
    margin-top: -18px;
    padding: 2px 5px;
    display: block;
    float: left;
    font-size: 12px;
    color: #fff;
    background-color: rgba(0, 0, 0, .35);
}

/* right side, tab bar, status bar */

#SP {
    position: absolute;
    z-index: 250;
    left: 0;
    top: 0;
    height: calc(100% - 15px);
    padding-bottom: 15px;
    overflow-y: auto;
}

/* tab bar */

#TB {
    position: absolute;
    z-index: 300;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
}

/* status bar */

#SB {
    position: absolute;
    z-index: 400;
    left: 0;
    bottom: 0;
    width: calc(100% - 80px);
    height: 30px;
    line-height: 30px;
    padding: 0 40px;
    font-size: 18px;
    text-align: center;
    background: var(--bg-sta);
    border-top: 1px solid var(--bdc);
}

/* publish tool */

#PT {
    position: absolute;
    z-index: 500;
    left: 0;
    bottom: 0;
    width: 420px;
    height: 30px;
    background-color: var(--bg-v);
    border: 1px solid var(--bdc);
    border-left: 0;
    border-bottom: 0;
}

.H5WAP #PT {
    width: calc(100% - 30px);
}

#PT.i_ {
    width: 30px;
    height: 30px;
}

.pt-btn, .atts, .att {
    height: 30px;
    line-height: 28px;
    float: left;
    box-sizing: border-box;
}

.pt-new, .submit {
    width: 30px;
    text-align: center;
    cursor: pointer;
    background: var(--bg-ico);
}

.submit {
    border-left: 1px solid var(--bdc);
}

.pt-new:hover, .submit:hover {
    background: var(--bg-ico-hov);
}

.pt-new:active, .submit:active {
    background: var(--bg-ico-act);
}

.pt-new::after {
    content: "";
    width: 30px;
    height: 30px;
    display: inline-block;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cline x1='10' y1='3' x2='10' y2='17'/%3E%3Cline x1='3' y1='10' x2='17' y2='10'/%3E%3C/svg%3E");
}

.submit::after {
    content: "";
    width: 30px;
    height: 30px;
    display: inline-block;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpolyline points='5 15, 15 5'/%3E%3Cpolyline points='6 5, 15 5, 15 14'/%3E%3C/svg%3E");
}

.atts {
    width: calc(100% - 60px);
}

.att input {
    width: calc(100% - 6px);
    height: 30px;
    line-height: 28px;
    padding: 0 3px;
    display: block;
    outline: none;
}

.att {
    width: 100%;
    border-left: 1px solid var(--bdc);
}

.atts-2 .att {
    width: 50%;
}

.atts-3 .att {
    width: 33%;
}

.atts-3 .att1 {
    width: 34%;
}

.atts-4 .att {
    width: 25%;
}

.atts-5 .att {
    width: 20%;
}

.atts-6 .att {
    width: 16%;
}

.atts-6 .att1 {
    width: 20%;
}

/* model atts */

.mods-desc {
    line-height: 20px;
    padding: 5px;
    cursor: pointer;
    color: var(--fg-nor);
    border: 1px solid var(--bdc);
    background-color: #7C97B2;
}

.mods-atts {
    color: var(--fg-nor);
    background-color: #EFF2F4;
}

.mods-atts-list {
    margin-top: 10px;
    border: 1px solid var(--bdc);
}

.mods-atts-desc {
    line-height: 24px;
    max-height: 48px;
    padding: 0 5px;
    cursor: pointer;
    font-size: 18px;
    border-bottom: 1px solid var(--bdc);
    background-color: #CEDAE5;
}

/* search tool */

#ST {
    position: absolute;
    z-index: 600;
    right: 0;
    bottom: 0;
    width: 240px;
    height: 30px;
    background-color: #CEDAE5;
    border: 1px solid var(--bdc);
    border-bottom: 0;
}

#ST.i_ {
    width: 30px;
    height: 30px;
}

#ST.i_ .filter {
    display: none;
}

.filter, .kw-box, .search {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    float: left;
    cursor: pointer;
}

.kw-box {
    left: 30px;
    width: calc(100% - 60px);
    height: 30px;
    border: 1px solid var(--bdc);
    border-width: 0 1px;
    background-color: #E6ECF2;
}

.kw-box input {
    width: calc(100% - 10px);
    height: 30px;
    line-height: 26px;
    padding: 0 5px;
    display: block;
    outline: none;
    cursor: text;
}

.search {
    left: auto;
    right: 0;
}

.filter::after {
    content: "";
    width: 30px;
    height: 30px;
    display: inline-block;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpolyline points='3 4, 17 4, 11 10, 11 16, 9 16, 9 10, 3 4'/%3E%3C/svg%3E");
}

.search::after {
    content: "";
    width: 30px;
    height: 30px;
    display: inline-block;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='5'/%3E%3Cline x1='12' y1='12' x2='16' y2='17'/%3E%3C/svg%3E");
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Ccircle cx='14' cy='7' r='4'/%3E%3Cline x1='4' y1='16' x2='11' y2='10'/%3E%3C/svg%3E");
}

/* float window */

.fw {
    position: absolute;
    z-index: 800;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 360px;
    min-height: 95px;
    transform: translate(-50%, -50%);
    background: var(--bg-box);
    border: 1px solid var(--bdc);
    box-shadow: var(--sd-box);
}

.cw {
    z-index: 810;
    top: 0;
    left: auto;
    right: 0;
    bottom: auto;
    width: 620px;
    height: calc(100% - 32px);
    transform: none;
}

.iw {
    z-index: 820;
    width: 240px;
}

.fw-tit, .fw-lab {
    height: 30px;
    line-height: 30px;
}

.fw-tit {
    text-align: left;
    border-bottom: 1px solid var(--bdc);
    background: var(--bg-tit);
}

.fw-lab {
    padding: 0 10px;
}

.fw-ctt {
    max-height: 380px;
    padding-bottom: 15px;
    overflow-y: auto;
    text-align: left;
}

.iw .fw-ctt {
    max-height: 450px;
    padding: 10px;
}

#CW .fw-ctt {
    height: calc(100% - 31px);
    max-height: calc(100% - 31px);
    padding: 0;
}

#CTT {
    margin: 15px;
}

#CTT img, #CTT audio, #CTT video {
    min-width: 180px;
    max-width: 90%;
    margin: 10px auto;
    display: block;
}

#CTT iframe {
    width: 100%;
    height: 100%;
}

.H5WAP .fw {
    width: calc(90% - 2px);
}

.H5WAP .iw {
    width: calc(75% - 2px);
}

.H5WAP #CW {
    width: calc(100% - 2px);
}

/* api key */

#KEY {
    position: absolute;
    z-index: 815;
    top: 10%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 250px;
    height: 60px;
    transform: translate(-50%, -50%);
    background: var(--bg-box);
    border: 1px solid var(--bdc);
    box-shadow: var(--sd-box);
    opacity: .85;
}

.key-line {
    height: 30px;
}

.key-line1 {
    border-bottom: 1px solid var(--bdc);
}

.key-txt, .key-btn {
    width: 120px;
    height: 30px;
    line-height: 28px;
    float: left;
    background-color: var(--bg-v);
    box-sizing: border-box;
}

.key-btn {
    width: 50px;
    text-align: center;
    cursor: pointer;
    border-left: 1px solid var(--bdc);
    background: var(--bg-ico);
}

.key-btn:hover {
    background: var(--bg-ico-hov);
}

.key-btn:active {
    background: var(--bg-ico-act);
}

.key-txt input {
    width: calc(100% - 6px);
    height: 30px;
    line-height: 28px;
    padding: 0 3px;
    display: block;
    outline: none;
}

.key-line .X {
    width: 30px;
    background: var(--bg-X);
}

.key-line .X:hover {
    background: var(--bg-X-hov);
}

.key-line .X:active {
    background: var(--bg-X-act);
}

.key-line .H {
    width: 30px;
    background: var(--bg-H);
}

.key-line .H:hover {
    background: var(--bg-H-hov);
}

.key-line .H:active {
    background: var(--bg-H-act);
}

/* resource box */

#RES {
    position: absolute;
    z-index: 900;
    top: 0;
    right: 0;
    width: 120px;
    height: calc(100% - 31px);
    overflow-y: auto;
    background-color: #F5F7F9;
    border-left: 1px solid var(--bdc);
    box-shadow: var(--sd-box);
}

.res-lab, .res-lab-txt, .res-lab .X {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
}

.res-lab {
    border-bottom: 1px solid var(--bdc);
    background: var(--bg-tit);
}

.res-lab-txt {
    width: calc(100% - 30px);
    padding: 0 3px;
    text-align: center;
}

.res-lab .X {
    width: 30px;
}

.res-ctt {
    height: calc(100% - 31px);
    padding-bottom: 5px;
    overflow-y: auto;
    box-sizing: border-box;
}

/* digital human img ado vdo */

.res-list {
    position: relative;
    margin: 5px 5px 0 5px;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--bdc);
}

.dhm_img, .dhm_ado, .dhm_vdo {
    width: 100%;
    max-width: 100%;
    display: block;
    border-bottom: 1px solid var(--bdc);
}

.res-name, .res-url {
    height: 24px;
    line-height: 24px;
    font-size: 16px;
    float: left;
    box-sizing: border-box;
}

.res-name {
    width: 70px;
    border-right: 1px solid var(--bdc);
    background-color: var(--bg-n);
}

.res-url {
    width: calc(100% - 70px);
    background-color: var(--bg-v);
}

.res-url input {
    width: calc(100% - 6px);
    height: 24px;
    line-height: 24px;
    font-size: 16px;
    padding: 0 3px;
    text-align: left;
    display: block;
    outline: none;
}

/* adv ctt, adv side, adv pop*/

#AP {
    position: absolute;
    z-index: 960;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background: var(--bg-box);
    border: 1px solid var(--bdc);
    box-shadow: var(--sd-box);
}

.H5WAP #AP {
    width: 94%;
    height: auto;
}

#AC-1, #AC-2 {
    width: 600px;
    height: 200px;
}

.H5WAP #AC-1, .H5WAP #AC-2 {
    width: 100%;
    height: auto;
}

.adv {
    position: relative;
    padding: 0;
    width: 200px;
    height: 200px;
    float: left;
    cursor: pointer;
    background: var(--bg-box);
    border: 1px solid var(--bdc);
    box-sizing: border-box;
}

#AS .adv {
    margin: 10px 0 0 10px;
    box-shadow: var(--sd-list);
}

.H5WAP .list .adv, .H5WAP #AC-1 .adv, .H5WAP #AC-2 .adv, .H5WAP #AP .adv {
    width: 50%;
    height: auto;
}

.adv-link, .adv-pic {
    width: 100%;
    height: 100%;
    display: block;
}

.adv-tit {
    margin-top: -40px;
    padding: 0 3px;
    width: calc(100% - 6px);
    height: 40px;
    line-height: 20px;
    font-size: 16px;
    text-align: left;
    display: block;
    background-color: rgba(255, 255, 255, .35);
}

.adv-pic, .adv-tit {
    float: left;
}

.adv-pri, .adv-cpl {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 24px;
    line-height: 24px;
    padding: 0 5px;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.35);
}

.adv-cpl {
    left: auto;
    right: 0;
    display: none;
    font-size: 16px;
}

.H5WAP .adv-cpl {
    display: block;
}

/* msg */

#MSG {
    position: absolute;
    z-index: 980;
    right: 20px;
    bottom: 50px;
    width: 240px;
    height: 60px;
    line-height: 20px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-box);
    border: 1px solid var(--bdc);
    box-shadow: var(--sd-box);
}

/* choose, hide */

.c_ {
    color: var(--fg-cho);
    background: var(--bg-cho);
}

.h_ {
    display: none;
    visibility: hidden;
}