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

/* 细边滚动条样式 */
::-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-sel: #fff;
    --bg-btn: linear-gradient(to top, #DADFE5, #F2F2F2);
    --bg-hov: linear-gradient(to top, #E6E6F2, #FFFFFF);
    --bg-act: linear-gradient(to top, #CDCDD8, #E5E5E5);
    --bg-sel: linear-gradient(to top, #000099, #1111B2);
    --bg-sub: linear-gradient(to top, #E1F4CD, #E8F9D6);
    --bg-tit: linear-gradient(to top, #DCE8F4, #E5EFF9);
    --bg-att: linear-gradient(to top, #EBEFF4, #F4F7F9);
    --bg-box: rgba(249, 251, 252, .9);
    --bg-lab: #ACB5BF;
    --bg-n: #E6E6F4;
    --bg-v: #F4F4F9;
    --sd-box: 0 0 10px 2px rgba(114, 114, 127, .65);
    --sd-list: 0 0 5px 1px rgba(114, 114, 127, .35);
    --sd-tit: inset 0 0 6px 1px rgba(249, 252, 255, .85);
    --sd-att: inset 0 0 6px 1px rgba(249, 252, 255, .85);
    --sd-sel: inset 0 0 6px 1px rgba(229, 229, 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;
}

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; }

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

.X, .OK, .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: linear-gradient(to top, #E50000, #FF3232);
    opacity: .85;
}

.X:hover {
    background: linear-gradient(to top, #FF0000, #FF3232);
}

.X:active {
    background: linear-gradient(to top, #CC0000, #E52D2D);
}

.OK{
    right: 31px;
    background: linear-gradient(to top, #3F7F00, #5B991E);
}

.OK:hover {
    background: linear-gradient(to top, #4C9900, #6BB223);
}

.OK:active {
    background: linear-gradient(to top, #336600, #4C7F19);
}

.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");
}

.OK::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");
}

/* 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;
    padding: 0 5px;
    float: left;
    box-sizing: border-box;
}

.nv-n {
    width: 35%;
    text-align: right;
    background-color: 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-color: var(--bg-v);
}

.nv-v input {
    width: 100%;
    height: 100%;
    line-height: 28px;
    padding: 0;
    outline: none;
}

.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);
}

.help {
    background-color: #FFDF7F;
}

.help:hover {
    background-color: #FFEBB2;
}

.help:active {
    background-color: #E5C872;
}

.help::before {
    content: "?";
}

.edit {
    background-color: #B7B7E5;
}

.edit:hover {
    background-color: #CCCCFF;
}

.edit:active {
    background-color: #A3A3CC;
}

.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-color: #ADCC51;
}

.save:hover {
    background-color: #A0E55B;
}

.save:active {
    background-color: #8ECC51;
}

.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;
}

/* left side, content box */

#LS {
    position: relative;
    width: 420px;
    height: calc(100% - 31px);
}

.H5WAP #LS {
    width: 100%;
}

/* content box */

#CB {
    height: calc(100% - 31px);
    overflow-y: auto;
    scrollbar-width: thin; /* auto | thin | none */
    scrollbar-color: #888 #f1f1f1; /* 滑块颜色 轨道颜色 */
    border-right: 1px solid var(--bdc);
}

/* list box */

#LB {
    height: auto;
    padding-bottom: 15px;
}

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

.list {
    position: relative;
    margin: 10px 10px 0 10px;
    padding: 5px;
    background-color: 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);
}

/* task */

#TK {
    width: calc(100% - 2px);
    height: 30px;
    background-color: #CEDAE5;
    border: 1px solid var(--bdc);
    border-bottom: 0;
}

.btn, .att {
    width: 76%;
    height: 30px;
    line-height: 28px;
    float: left;
}

.mods, .post {
    width: 12%;
    text-align: center;
    cursor: pointer;
    background-color: #7C97B2;
}

.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);
    box-sizing: border-box;
}

.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%;
}

/* footer box */

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

/* api key */

#KEY {
    position: absolute;
    z-index: 110;
    top: 10%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 250px;
    height: 60px;
    transform: translate(-50%, -50%);
    background-color: 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: #CEDAE5;
    box-sizing: border-box;
}

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

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

.key-btn1 {
    background-color: #A3B7CC;
}

.key-btn2 {
    background-color: #7C97B2;
}

.key-X {
    width: 30px;
    color: #fff;
    background: linear-gradient(to top, #E50000, #FF3232);
}

.key-H {
    width: 30px;
    color: #fff;
    background: linear-gradient(to top, #CC9900, #E5B72D);
}

/* model list */

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

.mods-list {
    margin: 5px 5px 0 5px;
    border: 1px solid var(--bdc);
}

.mods-desc {
    line-height: 20px;
    padding: 5px;
    cursor: pointer;
    background-color: #7C97B2;
}

.s_ .mods-desc {
    background-color: #59B259;
}

.mods-atts {
    padding: 0 5px 5px 5px;
}

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

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

/*menu box, tool box*/

#MB, #TB {
    position: absolute;
    z-index: 130;
    left: 0;
    top: 0;
    width: 160px;
    height: calc(100% - 64px);
    border: 1px solid var(--bdc);
    background-color: var(--bg-box);
    box-shadow: var(--sd-box);
}

#TB {
    z-index: 131;
    left: auto;
    right: 0;
    height: calc(100% - 32px);
}

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

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

.mn-back{
    position: absolute;
    right: 31px;
    top: 0;
    width: 30px;
    height: 30px;
    cursor: pointer;
    border-left: 1px solid var(--bdc);
    background-color: #E0F2CD;
}

.mn-back:hover {
    background-color: #F8FFF2;
}

.mn-back:active {
    background-color: #CEE5B7;
}

.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-hov);
}

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

/*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);
}

/* resource box */

#RES {
    position: absolute;
    z-index: 140;
    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);
    opacity: .85;
}

.res-lab, .res-lab-txt, .res-lab .X {
    height: 24px;
    line-height: 24px;
}

.res-lab {
    border-bottom: 1px solid var(--bdc);
    background-color: #A3B7CC;
}

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

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

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

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

/* digital human img */

.dhbox {
    margin: 5px 5px 0 5px;
    border: 1px solid var(--bdc);
}

.dhimg {
    max-width: 100%;
    cursor: pointer;
}

.dhname, .dhurl {
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    float: left;
}

.dhname {
    width: 50px;
    text-align: center;
    background-color: #7C97B2;
}

.dhurl {
    width: calc(100% - 50px);
    background-color: #CEDAE5;
}

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

/* 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 {
    max-width: 100%;
}

.res-name, .res-url {
    height: 24px;
    line-height: 24px;
    float: left;
}

.res-name {
    width: 70px;
    background-color: #7C97B2;
}

.res-url {
    width: calc(100% - 70px);
    background-color: #CEDAE5;
}

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

/* float window */

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

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

#CW.fw {
    z-index: 152;
    top: 0;
    left: auto;
    right: 0;
    bottom: auto;
    width: 620px;
    height: calc(100% - 2px);
    transform: none;
}

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

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

.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);
}

/* MSG */

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

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

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

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

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

.H5WAP #AS {
    width: 0;
}

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

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

.adv {
    padding: 0;
    width: 200px;
    height: 200px;
    float: left;
    cursor: pointer;
    background-color: 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 {
    position: relative;
}

.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 {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 24px;
    line-height: 24px;
    padding: 0 5px;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.35);
}

/*sel, hide*/

.s_ {
    color: #fff;
    background: linear-gradient(to top, #EF2700, #FF360F);
}

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