:root {
    --link-size: 14px;
    --white-01: #fff;
    --white-02: #f5f5f5;
    --white-03: #f3f3f3;
    --white-031: #f0f0f0;
    --white-04: #f9f9f9;
    --white-05: #eee;
    --white-06: #e9e9eb;
    --white-07: #f7f7f7;
    --white-08: #e2e2e2;
    --white-09: #e5e5e5;
    --white-10: #c9d2db;
    --white-11: #d1d5d9;
    --white-12: rgb(224 224 224 / .9);
    --white-13: #ccc;
    --white-14: #bbb;
    --white-141: #afafaf;
    --white-15: #cbcbcb;
    --white-16: silver;
    --white-17: rgb(255 255 255 / .3);
    --white-18: #9caec7;
    --white-19: #a9bcd6;
    --white-20: #99a;
    --white-21: #aab0c6;
    --white-22: #969cb1;
    --white-23: #b2c3d4;
    --white-24: #858585;
    --white-25: #999;
    --white-26: #909399;
    --white-27: #778087;
    --white-28: rgba(255, 255, 255, .3);
    --white-29: #666;
    --white-30: #556;
    --white-31: #4d5256;
    --white-32: #555;
    --white-33: #4b4b4b;
    --white-34: rgba(158, 144, 158, .3);
    --white-35: rgba(144, 147, 153, 0.2);
    --white-36: rgba(80, 80, 90, .35);
    --white-37: rgba(144, 147, 153, 0.1);
    --white-38: #333;
    --white-39: rgba(80, 80, 90, .2);
    --white-40: rgba(66, 66, 77, .1);

    --steelblue-001: #506174;
    --steelblue-002: #393f4e;
    --steelblue-003: #3c444c;
    --steelblue-004: #445;
    --steelblue-005: #334;
    --steelblue-006: #385f8a;
    --steelblue-007: #22303f;
    --steelblue-0071: #242e35;
    --steelblue-009: #18222d;
    --steelblue-010: #001d25;
    --steelblue-011: #04222b;


    --green-001: #f0f9eb;
    --green-002: #e1f3d8;
    --green-003: #d7ffb8;
    --green-004: #bfe3c0;
    --green-005: #84dd43;
    --green-006: #58cc02;
    --green-007: #67c23a;
    --green-0071: #6ca530;
    --green-008: #a1d152;
    --green-009: #85b64a;
    --green-010: #6fcb72;
    --green-011: #66bb6a;
    --green-012: #4caf50;
    --green-013: #2c8f0c;
    --green-014: #58a700;
    --green-015: #388e3c;
    --green-016: rgba(103, 194, 58, 0.2);
    --green-017: rgba(103, 194, 58, 0.1);
    --green-018: #123f16;
    --green-019: #0b2005;

    --blue-001: #ecf5ff;
    --blue-0011: #ddf4ff;
    --blue-002: #c7e8ff;
    --blue-003: #b3e5fc;
    --blue-0031: #84d8ff;
    --blue-004: #6cbef3;
    --blue-005: #59c3f8;
    --blue-006: #03C8FF;
    --blue-007: #00b0ff;
    --blue-0071: #1899d6;
    --blue-008: #3a8ee6;
    --blue-009: #5d91af;
    --blue-010: #4899cf;
    --blue-011: #0277bd;
    --blue-012: #366da0;
    --blue-013: #01579b;
    --blue-014: #253761;
    --blue-015: rgba(0, 173, 255, 0.1);
    --blue-016: #1a262c;
    --blue-017: #061317;

    --yellow-001: #fdf6ec;
    --yellow-002: #faecd8;
    --yellow-003: #ffffc0;
    --yellow-004: #ffdf00;
    --yellow-005: #eac645;
    --yellow-006: #fc0;
    --yellow-007: #e6a23c; /*primary*/
    --yellow-008: #c89600;
    --yellow-009: rgb(233 175 0 / 60%);
    --yellow-010: rgba(200, 150, 0, .8);
    --yellow-011: rgb(233 175 0 / 50%);
    --yellow-012: rgba(230, 162, 60, 0.2);
    --yellow-013: rgba(230, 162, 60, 0.1);


    --purple-01: #f3e5f5;
    --purple-02: #e1bee7;
    --purple-021: #df9aea;
    --purple-03: #c385f8;
    --purple-04: #a868b8;
    --purple-05: #8e24aa;
    --purple-06: #732689;
    --purple-07: #683275;
    --purple-08: rgba(142, 36, 170, 0.2);
    --purple-09: rgba(142, 36, 170, 0.1);
    --purple-10: #3f0d4d;
    --purple-11: #150419;

    --red-001: #fef0f0;
    --red-002: #ffdfe0;
    --red-003: #ffe2df;
    --red-004: #f9dbd1;
    --red-005: #fab6b6;
    --red-006: #ffab91;
    --red-007: #ff8a65;
    --red-008: #f67373;
    --red-009: #dc605b;
    --red-010: #f56c6c;
    --red-011: #76444a;
    --red-012: #ff7043;
    --red-013: #f16d45;
    --red-014: #f4511e;
    --red-015: #ff4b4b;
    --red-016: #e64a19;
    --red-017: #d84315;
    --red-0171: #d74037;
    --red-018: #ea2b2b;
    --red-019: #5d1b07;
    --red-020: #532b17;
    --red-021: rgba(241, 109, 69, 0.2);
    --red-022: rgba(241, 109, 69, 0.1);
    --red-023: #373039;
    --red-024: #402112;
    --red-025: #210d06;

    --borwn-01: #f5c0a4;
    --borwn-02: #e8864c;
    --borwn-021: #b5693b;
    --borwn-03: #b17450;
    --borwn-04: #715240;
    --borwn-05: #70472f;
    --borwn-051: #774c33;
    --borwn-06: #5c3823;
    --brown-07: #422f24;
    --borwn-071: #4f2004;
    --borwn-08: #1e0f06;

    --black-01: #000;
    --black-02: rgba(0, 0, 0, .2);
    --black-03: #3c3c3c;
    --black-04: #1d1f21;

    --cell-hover-shadow: 6px 12px 37px rgb(224 224 224 / 90%) inset;
    --cell-hover-dark-shadow: 6px 12px 37px rgb(64 79 94) inset;
    --cell-tools-dark-bg: linear-gradient(to bottom, #253345 0, #1a2430 100%);

    --transition-time: 0.3s;
    --transition: color var(--transition-time) ease, background var(--transition-time) ease;
    --box-spacing: 20px;
    --box-border-radius: 3px;
    --content-padding: 12px 54px;
    --content-line-height: 34px;
    --content-font-size: 18px;

    --elevation-box-shadow-1: rgba(0, 0, 0, .2) 0 2px 1px -1px, rgba(0, 0, 0, .14) 0px 1px 1px 0px, rgba(0, 0, 0, .12) 0px 1px 3px 0px;
    --elevation-box-shadow-2: rgba(0, 0, 0, .2) 0 3px 1px -2px, rgba(0, 0, 0, .14) 0px 2px 2px 0px, rgba(0, 0, 0, .12) 0px 1px 5px 0px;
    --elevation-box-shadow-3: rgba(0, 0, 0, .2) 0 3px 1px -2px, rgba(0, 0, 0, .14) 0px 3px 4px 0px, rgba(0, 0, 0, .12) 0px 1px 8px 0px;
    --elevation-box-shadow-4: rgba(0, 0, 0, .2) 0 2px 4px -1px, rgba(0, 0, 0, .14) 0px 4px 5px 0px, rgba(0, 0, 0, .12) 0px 1px 10px 0px;
    --elevation-box-shadow-5: rgba(0, 0, 0, .2) 0 3px 5px -1px, rgba(0, 0, 0, .14) 0px 6px 10px 0px, rgba(0, 0, 0, .12) 0px 1px 18px 0px;
    --elevation-box-shadow-6: rgba(0, 0, 0, .2) 0 5px 5px -3px, rgba(0, 0, 0, .14) 0px 8px 10px 1px, rgba(0, 0, 0, .12) 0px 3px 14px 2px;
    --code-font: "Consolas", "Panic Sans", "Bitstream Vera Sans Mono", "Menlo", "Microsoft Yahei", monospace;
}

/*SFont*/
@font-face {
    font-family: 'ZCOOL XiaoWei';
    src: url('/fonts/ZCOOLXiaoWei-Regular.ttf');
}

@font-face {
    font-family: 'slideyouran-Regular';
    src: url('/fonts/slideyouran-Regular.ttf')
}

/*SBase*/
* {
    margin: 0;
    padding: 0;
}

a {
    color: #333;
}

body {
    font-family: "Helvetica Neue", "Luxi Sans", "Segoe UI", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Logo";
}

a,
a:active,
a:link,
a:visited {
    /*word-break: keep-all;*/
    cursor: pointer;
}

a:active,
a:link,
a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/*SWidth*/
.w-30 {
    width: 30px !important;
}

.w-80 {
    width: 80px !important;
}

.w-90 {
    width: 90px !important;
}

.w-120 {
    width: 120px !important;
}

.w-percentage-100 {
    width: 100% !important;
}

.w-180 {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
}

.w-220 {
    width: 220px !important;
}

.w-280 {
    width: 280px !important;
}

.min-w-80 {
    min-width: 80px !important;
}

.min-w-90 {
    min-width: 90px !important;
}

.width-auto {
    width: auto !important;
    max-width: none !important;
}

/*SHeight*/

.h-36 {
    height: 36px !important;
}

.h-200 {
    height: 200px !important;
}

.mh-80 {
    min-height: 80px !important;
}

.mh-168 {
    min-height: 168px !important;
}

.mh-300 {
    min-height: 300px !important;
}

.mh-447 {
    min-height: 447px !important;
}

/*SMargin*/
.m-3 {
    margin: 3px !important;
}

.m-6 {
    margin: 6px;
!important;
}


.m-10 {
    margin: 10px !important;
}

.mtb-5 {
    margin: 5px 0 !important;
}

.mtb-10 {
    margin: 10px 0 !important;
}


.ml-3 {
    margin-left: 3px !important;
}

.ml-6 {
    margin-left: 6px !important;
}

.ml-9 {
    margin-left: 9px !important;
}

.ml-12 {
    margin-left: 12px !important;
}

.ml-24 {
    margin-left: 24px !important;
}

.mr-3 {
    margin-right: 3px !important;
}

.mr-6 {
    margin-right: 6px !important;
}

.mlr-6 {
    margin-left: 6px !important;
    margin-right: 6px !important;
}

.mlr-6 {
    margin-left: 6px !important;
    margin-right: 6px !important;
}

.mr-12 {
    margin-right: 12px !important;
}

.mt-2 {
    margin-top: 2px !important;
}

.mt-3 {
    margin-top: 3px !important;
}

.mt-6 {
    margin-top: 6px !important;
}

.mb-6 {
    margin-bottom: 6px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-33 {
    margin-top: 33px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-16 {
    margin-bottom: 16px !important;
}

.mb-48 {
    margin-bottom: 48px !important;
}

.mr-auto {
    margin-right: auto !important;
}

/*SPadding*/
.p-0 {
    padding: 0 !important;
}

.p-3 {
    padding: 3px !important;
}

.p-6 {
    padding: 6px !important;
}

.b-6 {
    border: 6px !important;
}

.p-10 {
    padding: 10px !important;
}

.pl-20 {
    padding-left: 20px !important;
}

.pl-2 {
    padding-left: 2px !important;
}

.pl-10 {
    padding-left: 10px !important;
}

.pl-3 {
    padding-left: 3px !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-6 {
    padding-bottom: 6px !important;
}

.pb-14 {
    padding-bottom: 14px !important;
}

.pb-23 {
    padding-bottom: 23px !important;
}

.pb-33 {
    padding-bottom: 33px !important;
}

.p-3-12 {
    padding: 3px 12px !important;
}

.p-tb-16 {
    padding: 16px 0 !important;
}

/*SDisplay*/

/*SBlock*/
.block {
    display: block !important;
}

.inline-block {
    display: inline-block !important;
}

.fr {
    float: right;
    text-align: right;
}

/*SFlex*/
.flex {
    display: flex;
    align-items: start;
    flex-wrap: wrap;
}


.flex-1 {
    flex: 1;
}

.flex-center {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-items: center;
}

.flex-end-wrap {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
}

.flex-no-wrap {
    display: flex;
    align-items: center;
    flex-wrap: nowrap !important;
}

.flex-justify-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.flex-direction-column {
    flex-direction: column;
}

.flex-baseline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.flex-between-start {
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.flex-inline {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: start;
}

.align-self-center {
    align-self: center !important;
}

.flex-self-end {
    align-self: end !important;
}

.flex-to-grid {
    display: flex;
    align-items: start;
    flex-wrap: wrap;
}

@media screen and (max-width: 779px) {
    .flex-to-grid {
        display: grid;
    }
}

/*SGrid*/
.grid-1 {
    display: grid;
    grid-gap: 3px;
    grid-template-columns: repeat(auto-fill, minmax(83px, 1fr));
}

.grid-2 {
    display: grid !important;
    grid-template-columns: auto auto !important;
}

.grid-3 {
    display: grid !important;
    grid-template-columns: auto auto auto !important;
}


.grid-gap {
    grid-gap: 8px;
    display: grid;
}

.grid-gap-3 {
    grid-gap: 3px;
}

.grid-full {
    display: grid;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    overflow: hidden
}

/*SBorder*/
.br-8 {
    border-radius: 8px !important;
}

.br-16 {
    border-radius: 16px !important;
}

.br-50 {

    border-radius: 50px !important;
}

.lh06 {
    line-height: .6 !important;
}

/*SSticky*/

.sticky-0 {
    position: sticky;
    top: 0;
}

.sticky-3 {
    position: sticky;
    top: 3px;
}

/*SFont*/
.fs-10 {
    font-size: 10px !important;
}

.fs-11 {
    font-size: 11px !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-13 {
    font-size: 13px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-15 {
    font-size: 15px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-19 {
    font-size: 19px !important;
}

.fs-20 {
    font-size: 20px !important;
}

.fs-23 {
    font-size: 23px !important;
}

.fs-24 {
    font-size: 24px !important;
}

.fs-36 {
    font-size: 36px !important;
}

.font-weight-500 {
    font-weight: 500 !important;
}

.strong {
    font-weight: 700 !important;
}

/*STextAlign*/

.text-right {
    text-align: right !important;
}

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-underline {
    text-decoration: underline !important;
}

/*STextDecoration*/
.text-decoration-none, .text-decoration-none:hover {
    text-decoration: none !important;
}

/*SMsg*/
.msg-primary, .msg-warning {
    display: block;
    padding: 10px 0;
    font-size: 14px;
    line-height: 120%;
    text-align: left;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    cursor: pointer;
}

/*SOpacity*/
.opacity-2 {
    opacity: 0.2 !important;
}

.opacity-9 {
    opacity: 0.9 !important;
}

/*SW*/
.w {
    max-width: 1613px; /*970px(mine) 1060px(v2ex) 1233px(admin) 1513 max*/
    margin: 0 auto;
    padding: 0 var(--box-spacing);
    display: flex;
}

.w-web {
    max-width: 1060px; /*970px(mine) 1060px(v2ex) 1233px(admin)*/
    margin: 0 auto;
    padding: 0 var(--box-spacing);
}

/*STop*/
.top {
    height: 44px;
    line-height: 44px;
    font-weight: 500;
    padding: 0 3px;
    border-bottom: 1px solid rgba(0, 0, 0, .22);
}

/*SNav*/
.nav {
    padding: 7px 10px 10px 10px;
    margin-left: 3px;
    border-bottom: none;
}

.nav a {
    margin-right: 3px;
    margin-top: 3px;
}

.sub-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    padding: 10px 10px 10px 20px;
    font-size: var(--link-size);
    min-height: 22px;
    border-bottom: none;
    border-radius: 0 0 3px 3px;
}

.sub-nav a {
    margin-right: 12px;
    word-break: keep-all !important;
}


/*SRightNav*/
.right-title {
    font-size: 12px;
    line-height: 150%;
    text-align: left;
    display: inline-block;
}

.right-nav {
    font-size: 14px;
    margin: 0;
    display: none;
}

.right-nav li {
    display: flex;
    padding: 5px 10px;
    align-items: center;
}

.right-nav li:hover {
    background-color: var(--white-02);
    box-shadow: 0 1px 4px rgb(0 0 0 / 10%) inset;
}

.right-nav img {
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-right: 6px;
    border-radius: 3px;
}

/* Wrapper */
.wrapper {
    background-image: url("/image/shadow_light.png");
    background-repeat: repeat-x;
    padding-top: 1px;
    padding-bottom: var(--box-spacing);
    min-height: 233px;
}

.wrapper-left {
    width: 100%;
}

.wrapper-right {
    margin-left: var(--box-spacing);
}

.wrapper-left-web {
    max-width: 775px; /*654px(mine)775px(v2ex)*/
    width: 100%;
}

.wrapper-right-web {
    max-width: 260px; /*260px(mine) 269px(v2ex)*/
    margin-left: var(--box-spacing);
    width: 100%;
}

@media screen and (max-width: 1094px) {
    .wrapper-right-web {
        display: none;
    }
}

.wrapper-overflow-hidden {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}


/*SFooter*/
.footer {
    padding: 10px;
    min-height: 122px;
    font-size: 14px;
}

/*SBox*/
.box, .box-02 {
    border-radius: var(--box-border-radius);
    margin-top: var(--box-spacing);
    box-shadow: var(--elevation-box-shadow-2);
    opacity: 0.99;
    overflow: auto;
}

.box-02 {
    box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
}


/*SBoxHeader*/
.box-header {
    height: 26px;
    line-height: 26px;
    padding: 10px;
    font-size: 14px;
    border-radius: var(--box-border-radius) var(--box-border-radius) 0 0;
}

.box-header i {
    font-size: 20px;
}


/*SCell*/
.cell, .cell-content, .cell-nowrap, .cell-02, .cell-en-content {
    border-top-left-radius: var(--box-border-radius);
    border-top-right-radius: var(--box-border-radius);
    line-height: 1.5;
    padding: 10px;
    font-size: 14px;
    min-height: 3px;
    background-image: none;
}

.cell-en-content {
    color: var(--black-01);
    padding: 20px;
}

.cell-en-content span {
    line-height: 1.6;
    font-size: 14px;
}

.cell-en-content > p {
    margin: 20px 0;
}

.cell:last-child {
    border-bottom-left-radius: var(--box-border-radius);
    border-bottom-right-radius: var(--box-border-radius);
}

.cell-02 {
    height: 100%;
    /*background-color: red;*/
    display: grid;
}

.cell-nowrap {
    display: flex;
    flex-wrap: nowrap;
}

/*SCellContent*/
.cell-content {
    padding: 10px;
}

.cell-content ul, .cell-content ol {
    margin: 15px 28px;
    padding: 0;
}

.cell-content ul li {
    list-style: outside !important;
    margin: 12px;
}

.cell-content ol li {
    list-style: auto;
    margin: 12px;
}

.cell-content li p {
    padding: 0;
    line-height: 22px;
    font-size: 15px;
}

.cell-content p {
    padding: 8px 12px;
    margin-bottom: 32px;
}

.cell-content p span {
    display: inline;
    margin-top: 3px;
}

.cell-content pre {
    padding: 10px;
    border-radius: 6px;
    overflow: auto;
}

.cell h1 {
    font-size: 24px;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 6px;
}

/*SCellHover*/
.cell-hover:hover {
    border-radius: 3px;
    transition: all var(--transition-time) ease;
}

.cell-hover:hover .desc {
    cursor: pointer;
    transition: all var(--transition-time) ease;
}

/*SCellTools*/
.cell-tools {
    padding: 0 6px;
    border-radius: 0 0 3px 3px;
    line-height: 120%;
    min-height: 16px;
    font-size: 11px;
}

.cell .GPageSpan {
    margin: 0 3px;
}

/*SLink*/
.link-1 {
    padding: 0 6px;
    word-break: break-word;
    cursor: pointer;
    transition: color var(--transition-time) ease;
}

.link-1:hover {
    text-decoration: none;
}

.link-2, .link-2-active {
    display: inline-block;
    padding: 5px 8px;
    font-size: var(--link-size);
    line-height: 14px;
    border-radius: 3px;
    cursor: pointer;
    transition: var(--transition)
}

.link-2:hover, .link-2-active:hover {
    text-decoration: none;
}

.link-3 {
    padding: 0;
    line-height: 1.58;
    font-size: 14px;
    word-break: break-all !important;
    transition: var(--transition);
}

.link-3:hover {
    text-decoration: underline !important;
}

.link-4 {
    transition: var(--transition);
}

.link-4:hover {
    cursor: pointer !important;
    text-decoration: none;
}

.link-6 {
    padding: 8px;
    font-size: 14px;
    display: inline-block;
}

.link-6:hover {
    text-decoration: none
}

.link-7 {
    padding: 8px;
    font-size: 14px;
    display: inline-block;
    transition: var(--transition);
    border: 3px solid transparent;
}

.link-7:hover {
    text-decoration: none;
}

.link-8 {
    display: inline-flex;
    align-content: center;
    font-size: 14px;
    padding: 5px 10px 5px 5px;
    transition: var(--transition);
}

/*STag*/
*[class^='tag'] {
    cursor: pointer;
}

.tag {
    font-size: 12px;
    padding: 3px 4px;
    border-radius: 3px;
    word-break: keep-all !important;
    line-height: 12px;
    transition: color var(--transition-time) ease, background-color var(--transition-time) ease;
}

.tag:hover {
    text-decoration: none;
}

.tag-2 {
    box-shadow: var(--elevation-box-shadow-2);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-block;
    font-size: 12px;
    line-height: 12px;
    white-space: nowrap;
    transition: var(--transition);
}

.tag-2:hover {
    text-decoration: none !important;
}

.tag-3 {
    display: inline-block;
    font-size: 10px;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 10px;
    word-break: keep-all;
    transition: var(--transition);
}

.tag-3:hover {
    text-decoration: none;
}

.tag-4 {
    font-size: 12px;
    line-height: 12px;
    padding: 3px 10px;
    border-radius: 15px;
}

.tag-5 {
    font-size: 11px;
    line-height: 16px;
    text-decoration: none !important;
    padding: 5px 10px;
    border-radius: 20px;
    transition: var(--transition);
    display: inline-flex;
}

.tag-5:hover {
    text-decoration: none !important;
}

.tag-4:hover {
    text-decoration: none;
}

.tag-info, .tag-primary, .tag-warning, .tag-success, .tag-brown, .tag-purple, .tag-danger {
    display: inline-flex;
    white-space: break-spaces !important;
    height: auto !important;
    padding: 6px 10px !important;
    text-align: left;
    border-radius: 16px;
    font-size: 12px;
    line-height: 12px;
    margin: 3px;
    transition: var(--transition)
}

.tag-blue {
    font-weight: 500;
    display: inline-flex;
    cursor: pointer;
    border-radius: 9px;
    padding: 3px 12px;
    transition: all var(--transition-time) ease;
    text-align: center;
    word-break: keep-all;
    line-height: 1;
}

.tag-info:hover, .tag-success:hover, .tag-primary:hover, .tag-warning:hover, .tag-brown:hover, .tag-purple:hover, .tag-danger:hover {
    text-decoration: none !important;
}

.tag-blue:hover {
    text-decoration: underline !important;
}

.tag-answer {
    padding: 6px 12px;
    border-radius: 13px;
    cursor: pointer;
    font-size: 16px;
    margin: 4px;
    display: inline-flex;
}

.tag-v2ex {
    font-size: 14px;
    line-height: 14px;
    padding: 4px 10px;
    margin: 0 5px 5px 0;
    border-radius: 16px;
    display: inline-block;
    text-decoration: none;
    word-break: break-word;
}

.tag-v2ex:hover {
    text-decoration: none;
}

/*.btn*/
.btn-info, .btn-success, .btn-primary, .btn-warning, .btn-danger, .btn-brown, .btn-purple, .btn-disabled-v2ex {
    background-image: url(/image/bg_blended_light.png);
    cursor: pointer;
    padding: 4px 15px 3px;
    border-radius: 3px;
    font-size: 14px;
    font-family: Arial, sans-serif;
    display: inline-block;
    line-height: 1.4;
    outline: 0;
    text-decoration: none !important;
    transition: var(--transition);
}

.btn-info:hover, .btn-warning:hover {
    text-decoration: none;
    cursor: pointer;
}

.btn-duo-info,
.btn-duo-success,
.btn-duo-primary,
.btn-duo-error,
.btn-duo-info-disabled,
.btn-duo-warning {
    border-radius: 12px;
    cursor: pointer;
    line-height: 1.4;
    text-align: center;
    transition: var(--transition);
    transform: translateZ(0);
    padding: 8px 32px;
    font-size: 16px;
    border-width: 1px 1px 4px !important;
    min-width: 56px;
    text-decoration: none !important;
    outline: none;
}

.btn-duo-info-disabled {
    cursor: default !important;

}

.btn-duo-success,
.btn-duo-primary,
.btn-duo-error,
.btn-duo-warning,
.btn-duo-info-disabled {
    border-width: 1px 1px 4px !important;
}

.btn-duo-warning {
    border: 0 solid transparent;
}

.btn-duo-warning:hover {
    filter: brightness(1.1);
}

.btn-disabled-v2ex {
    text-decoration: none;
    padding: 4px 15px 3px;
    font-size: 14px;
    border-radius: 3px;
    font-family: Arial, sans-serif;
    display: inline-block;
    outline: none;
    cursor: no-drop;
}


/*STheme*/
.theme-info,
.theme-info-2,
.theme-success,
.theme-primary,
.theme-warning,
.theme-brown,
.theme-purple,
.theme-danger,
.theme-blue,
.theme-duo-info,
.theme-duo-success,
.theme-duo-danger,
.theme-duo-warning {
    border-radius: 3px;
}

.theme-info-2 {
    padding: 6px;
}

/*SIcon*/
.s-icon, .s-icon-16, .s-icon-24, .s-icon-36, .s-icon-64, .s-icon-76, .s-icon-83, .s-icon-103 {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    vertical-align: bottom;
    /*box-shadow: var(--elevation-box-shadow-2);*/
    transition: all var(--transition-time);
}

.s-icon-103 {
    box-shadow: var(--elevation-box-shadow-3);
}

.s-icon-103:hover {
    box-shadow: var(--elevation-box-shadow-6);
}

.s-icon-16 {
    width: 16px;
    height: 16px;
}

.s-icon-24 {
    width: 24px;
    height: 24px;
}

.s-icon-36 {
    width: 36px;
    height: 36px;
}

.s-icon-48 {

    width: 48px;
    height: 48px;
    border-radius: 4px;
}

.s-icon-64 {
    width: 64px;
    height: 64px;
}

.s-icon-76 {
    width: 76px;
    height: 76px;
}

.s-icon-83 {
    width: 83px;
    height: 83px;
}

.s-icon-103 {
    width: 103px;
    height: 103px;
}


/*SInfoBox*/
.info-box, .info-box-success, .info-box-primary, .info-box-warning, .info-box-danger {
    display: inline-flex;
    border-radius: 6px;
    cursor: pointer;
    padding: 0.5rem;
    font-size: 14px;
    font-family: Arial, sans-serif;
    line-height: 1.4;
    outline: 0;
    text-decoration: none !important;
    transition: var(--transition);
    min-width: 200px;
    margin-bottom: 12px;
}

.info-box {
    color: var(--white-38) !important;
    background-color: var(--white-01);
    text-shadow: 0 1px 0 var(--white-01);
    box-shadow: 0 1px 0 var(--white-40);
    border: 1px solid var(--white-39);
    border-bottom-color: var(--white-36);
}

.info-box:hover {
    background-image: linear-gradient(var(--white-01), var(--white-08));
}

.info-box-success {
    color: var(--green-018) !important;
    background-color: var(--green-011);
    text-shadow: 0 1px 1px var(--green-004);
    box-shadow: 0 1px 2px var(--green-015);
    border: 1px solid var(--green-012);
    border-bottom-color: var(--green-015);
}

.info-box-success:hover {
    background-color: var(--green-010);
}

.info-box-primary {
    color: var(--blue-017) !important;
    background-color: var(--blue-007);
    text-shadow: 0 1px 1px var(--blue-003);
    box-shadow: 0 1px 2px var(--blue-012);
    border: 1px solid var(--blue-009);
    border-bottom-color: var(--blue-012);
}

.info-box-primary:hover {
    background-color: var(--blue-005);
    box-shadow: 0 1px 2px var(--blue-011);
}

.info-box-warning {
    background-color: var(--yellow-006);
    color: var(--red-020) !important;
    text-shadow: 0 1px 1px var(--white-17);
    box-shadow: 0 1px 2px var(--yellow-009);
    border: 1px solid var(--yellow-010);
    border-bottom-color: var(--white-36);
}

.info-box-warning:hover {
    background-color: var(--yellow-004);
    color: var(--red-024);
    text-shadow: 0 1px 1px var(--white-17);
    box-shadow: 0 1px 2px var(--yellow-011);
    border: 1px solid var(--yellow-008);
}

.info-box-danger {
    color: var(--red-019) !important;
    background-color: var(--red-012);
    text-shadow: 0 1px 1px var(--red-006);
    box-shadow: 0 1px 2px var(--red-014);
    border: 1px solid var(--red-016);
    border-bottom-color: var(--red-017);
}

.info-box-danger:hover {
    background-color: var(--red-007);
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 20px;
    vertical-align: middle;
}

.switch input {
    display: none;
}

.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 34px;
    transition: background-color 0.2s;
}

.switch .slider::before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 6px;
    bottom: 4px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s;
}

.switch input:checked + .slider {
    background-color: #68c944;
}

.switch input:checked + .slider::before {
    transform: translateX(34px);
}

/* SInput*/
.title-input-box-01 {
    display: grid;
    grid-template-columns: 83px 1fr;
    align-items: center;
    justify-items: end;
    grid-gap: 13px;
    text-align: right;
}

@media screen and (max-width: 530px) {
    .title-input-box-01 {
        grid-template-columns: 33px 1fr;
    }
}

.title-input {
    width: 100%;
    border: none !important;
    outline: 0;
    font-size: 14px;
    line-height: 100%;
    padding: 10px;
    overflow: hidden;
    overflow-wrap: break-word;
    font-family: helvetica neue, hiragino sans gb, microsoft yahei, sans-serif, apple logo;
    resize: none;
    margin: 0;
    display: block;
    background-color: var(--white-04);
    box-sizing: border-box;


}

.title-input:focus {
    background-color: var(--white-01);
}

.input {
    display: inline-block;
    margin: 6px 6px;
    font-size: 13px;
}

.input input, .input textarea, .input select {
    width: 69px;
    margin-left: 6px;
    padding: 3px 9px;
    border-radius: 15px;
    font-size: 10px;
    font-family: helvetica neue, luxi sans, Tahoma, hiragino sans gb, microsoft yahei, sans-serif, apple logo;;
    outline: none;
    transition: all var(--transition-time) ease;
}

.input select {
    width: auto;
}

.input input:focus {
    width: 133px;
}

.input-duo-normal {
    background-color: transparent;
    border: 0;
    display: inline;
    text-overflow: ellipsis;
    font-size: 16px;
    outline: none;
    transition: border-bottom-color .3s ease;
    padding: 3px;
}

.input-duo-normal:focus {
    border: 0;
    border-bottom: 2px solid var(--blue-005);
}


.textarea-duo-normal {
    border-radius: 10px;
    padding: 10px 12px;
    text-overflow: ellipsis;
    font-size: 16px;
    resize: none;
    width: 100%;
    min-height: 170px;
}

/*STable*/
.table-1 {
    display: table;
    box-sizing: border-box;
    width: 100%;
    padding: 0;
    border-collapse: collapse;
    table-layout: auto;
}

.table-1 tr {
    transition: var(--transition);
    white-space: nowrap;
    overflow-x: auto;
}


.table-1 tr th {
    font-weight: 700;
    padding: 1px 9px;
    text-align: left;
    white-space: nowrap;
    height: 33px;
    font-size: 13px;
}

.table-1 td {
    font-size: 13px;
    margin: 0;
    padding: 1px 9px;
    height: 34px;
    overflow: hidden !important;
    white-space: nowrap;
    max-width: 182px;

}

.table-1 td:hover {
    overflow: auto !important;
}

/*.table-1 tr td:first-child,*/
/*.table-1 tr th:first-child,*/
/*.table-1 tr th:last-child {*/
/*    text-align: center;*/
/*}*/

.table-1 tr td:last-child,
.table-1 tr th:last-child {
    padding-right: 33px;
}

.table-1 td:hover {
    overflow: auto;
}

.table-2 td {
    font-size: 14px;
}

.table-2 .h {
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    padding: 3px 6px;
    white-space: nowrap;
}

.table-2 .d {
    font-size: 14px;
    font-weight: 400;
    padding: 9px 7px;
}

.t-mobile {
    display: none;
}

@media screen and (max-width: 500px) {
    .t-mobile {
        display: table-cell;
    }

    .t-pc {
        display: none;
    }
}

/*STableAdd*/
.table-add {
    border-spacing: 12px;
}

.table-add tr td:first-child {
    width: 160px;
    text-align: right;
}

@media screen and (max-width: 533px) {
    .table-add tr td:first-child {
        width: 51px;
        text-align: right;
    }
}

.table-add tr td:nth-child(2) {
    text-align: left;
}

.table-add td input, textarea, select {
    width: 320px;
    /* padding: 6px 12px; */
    border-radius: 3px;
    /* font-size: 14px !important; */
    font-family: helvetica neue, luxi sans, Tahoma, hiragino sans gb, microsoft yahei, sans-serif, apple logo;
    /* box-sizing: border-box; */
    outline: none;
    transition: var(--transition);
}

.table-add td textarea {
    /*width: 595px;*/
    height: 196px;
}

.table-add td input:focus, textarea:focus, select:focus {
    outline: none;
}

/*SProgressBox*/
.progress-box {
    padding: 13px;
    width: 96%;
}

.progress-all, .progress-current {
    height: 13px;
    border-radius: 13px;
}

.progress-current {
    background-color: transparent;
    width: 0;
    transition-duration: 333ms;
}

.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
    background: var(--green-006);
    transform-origin: 0;
    z-index: 1000;
}


/*SLoading*/
.full-screen-loading {
    width: 100%;
    background-color: rgba(211, 202, 202, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-spinner {
    border: 16px solid var(--white-03);
    border-top: 16px solid var(--blue-011);
    border-radius: 50%;
    width: 33px;
    height: 33px;
    margin: 33px;
    animation: spin 2s linear infinite;
}

/*SContent*/
.content h1 {
    font-size: 24px;
    font-weight: 500;
    line-height: 150%;
    margin: 0 0 10px;
    padding: 0;
    line-break: anywhere
}

.content p {
    text-indent: 2em;
    margin-bottom: 39px;
}

pre {
    font-family: var(--code-font);
    font-size: 13px;
    letter-spacing: .015em;
    line-height: 120%;
    white-space: pre;
    overflow: auto;
    word-break: normal;
    overflow-wrap: normal;
    padding: .5em;
    margin: .9em;
}

pre a {
    color: inherit;
    text-decoration: underline
}

blockquote {
    margin-left: 6px;
    padding: 0.5em 1em;
    font-size: 12px;
    color: var(--white-24);
    border-left: 0.25em solid var(--white-24);
    border-radius: 3px;
}

blockquote p {
    text-indent: 0 !important;
}

li {
    list-style: none;
}

hr {
    border: none;
    height: 2px;
    margin-top: 16px;
    margin-bottom: 16px
}

ul {
    margin: 15px 0 15px 20px;
    padding: 0
}

ul p {
    text-indent: 0 !important;
}

ol li,
ul li {
    padding: 0;
    margin: 0
}

ol {
    margin: 1em 0 1em 2em;
    padding: 0
}

/*SOther other*/
.dot-list-custom {
    margin-left: 2em;
    margin-right: 5px;
}

.dot-list-custom:before {
    content: '\2022';
    color: var(--black-01);
    display: inline-block;
    width: 0.5em;
    margin-left: -1em;
    transform: scale(1.5);
}

.GPageLink {
    display: inline-block;
    font-weight: 400;
    font-size: 12px;
    line-height: 12px;
    padding: 3px 6px;
    border-radius: var(--box-border-radius);
    margin: 0 5px;
    text-decoration: none !important;
}

.GPageSpan {
    font-weight: 700;
    font-size: 14px;
    padding: 3px 6px;
    border-radius: var(--box-border-radius);
    line-height: 14px;
    text-decoration: none;
}

.z-index-33 {
    z-index: 33;
}

input:read-only {
    cursor: default;
    color: var(--white-24) !important;
}

.page {
    visibility: hidden;
}

.not-allowed {
    cursor: not-allowed !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.trans-scale-7 {
    transform: scale(0.7) !important;
}

.text-indent-2 {
    text-indent: 2em;
}

.point {
    font-family: lucida grande, "JetBrains Mono", serif;
    font-weight: 500;
}

.hover-underline:hover {
    text-decoration: underline !important;
}

.white-space-nowrap {
    white-space: nowrap !important;
}

.white-space-inherit {
    white-space: inherit !important;
}

.text-overflow-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.text-max-width-633 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 633px;
}

.no-bottom-border {
    border-bottom: none !important;
}

.hover-underline a:hover {
    text-decoration: underline !important;
}

.logo {
    margin-right: 9px;
    font-weight: bolder;
    font-size: 32px;
    white-space: nowrap;
    word-break: keep-all !important;
}

.logo:hover {
    text-decoration: none;
}

.user-info-mobile {
    display: none;
}

.in {
    animation: slip_in .4s;
}

.out {
    animation: slip_out .6s;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes slip_in {
    from {
        transform: translateX(6%);
        opacity: 0.3;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slip_out {
    from {
        transform: translateX(0);
        opacity: .3;
    }
    to {
        transform: translateX(-20%);
        opacity: 0;
    }
}


/*-------------------- English ----------------------------------*/

.challenge-wrapper {
    display: grid;
    grid-template-rows: 100px 1fr 140px;
    grid-template-columns: 1fr;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

@media screen and (max-width: 700px) {
    .challenge-wrapper {
        padding: 24px 16px;
        width: -webkit-fill-available;
        grid-template-rows: min-content 1fr min-content;
    }
}

.w-challenge {
    max-width: 1060px;
    margin: 0 auto;
    width: 100%;
}

.challenge-box {
    display: grid;
    grid-template-columns: min-content;
    grid-template-rows: min-content;
    justify-content: center;
    align-content: center;
}

@media screen and ( max-width: 700px) {
    .challenge-box {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr);
    }
}

.challenge {
    display: grid;
    grid-template-rows: min-content minmax(0, 1fr);
    grid-gap: 24px;
    width: 600px;
    min-height: 450px;
}

@media screen and (max-width: 700px) {
    .challenge {
        width: 100%;
        min-height: unset;
    }
}

.challenge-content {
    display: grid;
    grid-template-rows: min-content 1fr;
    grid-template-columns: auto;
    align-items: start;
    grid-gap: 100px;
    text-align: inherit;
    font-family: din-round, sans-serif;
    justify-items: center;
}


.challenge-options {
    display: flex;
    grid-column: 1/-1;
    flex-wrap: wrap;
}


.challenge-footer {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(5, 1fr);
    min-height: 140px;
    padding: 0 40px;
    grid-gap: 8px 16px;
}

@media screen and (max-width: 700px) {
    .challenge-footer {
        height: 100%;
        grid-template-rows: repeat(3, minmax(0, 1fr));
        grid-template-columns: 100%;
        padding: 0;
        justify-items: stretch;
        min-height: unset;
    }
}

.challenge-btn-pass {
    min-width: 150px;
    grid-column: 1/auto;
    justify-self: start;
}

.challenge-btn-check {
    min-width: 150px;
    grid-column: 5/auto;
    justify-self: end;
}

@media screen and (max-width: 700px) {
    .challenge-btn-check {
        grid-column: unset;
        width: 100%;
        grid-row: 3/4;
    }

    .challenge-btn-pass {
        display: none;
    }
}


.challenge-msg-background {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 140px;
}


.challenge-msg-box {
    display: flex;
    flex-direction: column;
    grid-column: 1/5;
    justify-content: center;
    margin: 0;
    min-height: 140px;
}

@media screen and (max-width: 700px) {
    .challenge-msg-background {
        position: unset;
        background-color: transparent !important;
        border-top: unset !important;
    }

    .challenge-msg-box {
        bottom: 0;
        left: 0;
        margin: 0 -16px;
        padding: 24px 16px 72px;
        position: absolute;
        right: 0;
    }
}

.challenge-msg-box-inner {
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-gap: 6px;
    grid-auto-flow: column;
}

.challenge-msg-icon {
    border-radius: 98px;
    display: block;
    float: left;
    height: 80px;
    width: 80px;
}

@media screen and (max-width: 700px) {
    .challenge-msg-icon {
        display: none;
    }

    .challenge-msg-box-inner {
        grid-template-columns: auto;
    }
}

.challenge-msg-text {
    display: grid;
    grid-auto-flow: row;
    grid-gap: 6px;
    padding: 0;
    align-items: center;
    justify-content: space-between;
    font-family: din-round, sans-serif;
}


.challenge-msg-content {
    display: flex;
    grid-gap: 16px;
    grid-auto-flow: column;
    grid-column: 1/5;
}


.challenge-title {
    width: 100%;
    text-align: left;
    line-height: 1.25 !important;
    font-size: 32px !important;
    font-weight: 700 !important;
}

@media screen and ( max-width: 700px) {
    .challenge-title {
        font-size: 25px !important;
    }
}

.challenge-over-box {
    display: grid;
    grid-template-rows: min-content;
    grid-template-columns: min-content;
    justify-content: center;
    align-content: center;
}

.challenge-over-box-inner {
    display: grid;
    grid-template-rows: max-content;
    grid-template-columns: max-content;
    justify-items: center;
    align-content: center;
    height: 400px;
    max-width: 600px;
}


.answer {
    display: inline-block;
    line-height: 39px;
    font-size: 20px;
    width: 135px;
    border-bottom: 2px solid var(--white-08) !important;
    margin: 3px 6px -9px;
}

.english-progress-box {
    display: inline-grid;
    grid-template-columns:30px 1fr 138px;
    grid-gap: 10px;
    align-items: center;
    justify-items: start;
    min-height: 56px;
    width: 100%;
    padding: 30px 0;
}

@media screen and (max-width: 700px) {
    .english-progress-box {
        padding: 0;
    }
}


.multiple-choice-option-box {
    display: grid;
    grid-template-columns: 100%;
    align-self: center;
    grid-gap: 8px;
}

.multiple-choice-option {
    display: block;
    line-height: 1.4;
    padding: 12px 16px;
    font-size: 19px;
    border-width: 2px 2px 4px !important;
}

.sentence {
    /*position: relative;*/
}

.sentence-tool {
    white-space: nowrap;
}

span > span:nth-of-type(2), li > span > span:nth-of-type(2) {
    float: left;
    margin: -3px 0 0 23px;
    width: 100%;
    line-height: normal;
    font-size: 10px;
}

.levels {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 0 16px 32px;
    position: relative;
}

.level {
    margin-top: 33px;
    position: relative;
}

.level a {
    position: relative;
    top: 15px;
    left: 2px;
    border-radius: 50%;
    height: 58px;
    width: 39px;
    line-height: 62px;
    font-size: 46px;
    font-family: 'ZCOOL XiaoWei', serif;
}

/* --------------------------------English end --------------------*/

.read-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 10px;
}

.read-content h1 {
    font-size: 24px;
    font-weight: 500;
    line-height: 150%;
    margin: 0 0 10px;
    padding: 0;
    line-break: anywhere;
}

.read-content h2 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    margin: 24px 0 16px;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--white-08);
    word-break: break-word;
}

.read-content ul, .read-content ol {
    margin: 15px 0 15px 20px;
    padding: 0;
}

.read-content ul li {
    margin: 5px 0;
    list-style-type: disc !important;
}

.read-content ol li {
    margin: 5px 0;
    list-style-type: decimal !important;
}

.read-content p {
    margin: 10px 0;
}

.read-content pre {
    font-family: var(--code-font);
    font-size: 13px;
    letter-spacing: .015em;
    line-height: 120%;
    white-space: pre;
    overflow: auto;
    word-break: normal;
    overflow-wrap: normal;
    padding: 0.5em;
    border-radius: 3px;
}

/*------------------------------theme read----------------------------------*/
.theme {
    margin-top: var(--box-spacing);
    border-radius: var(--box-border-radius);
    display: flex;
    width: 100%;
}

.theme-nav {
    width: 200px;
    margin: 0;
    position: sticky;
    top: 0;
    max-height: 600px;
    overflow: scroll;
}

.theme-nav-mobile {
    display: none;
    position: sticky;
    top: 0;
}

.theme-nav-item, .theme-nav-item-current {
    padding: 6px 6px 6px 10px;
    display: block;
    text-decoration: none !important;
    font-size: 13px;
}

.theme-article {
    min-width: 559px;
    font-size: 14px;
    padding: 20px;
}

.theme-right {
    width: 259px;
    position: sticky;
    top: 0;
}

.theme-right-nav-item {
    display: block;
    padding: 5px 5px 5px 10px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none !important;
}

.theme-article h1 {
    font-size: 24px;
    font-weight: 500;
    line-height: 150%;
    margin: 0 0 10px;
    padding: 0;
    line-break: anywhere;
}

.theme-article h2 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    margin: 24px 0 16px;
    padding-bottom: 0.3em;
    word-break: break-word;
}

.theme-article p {
    line-height: 1.6;
    padding: 10px 0;
}

.theme-article ul li {
    list-style: disc;
    margin: 10px 0;
}

.theme-article ol li {
    list-style: decimal;
    margin: 10px 0;
}

.theme-article pre {
    font-family: "Consolas", "Panic Sans", "Bitstream Vera Sans Mono", "Menlo", "Microsoft Yahei", monospace;
    font-size: 13px;
    letter-spacing: .015em;
    line-height: 120%;
    white-space: pre;
    overflow: auto;
    word-break: normal;
    overflow-wrap: normal;
    padding: 0.5em;
    margin: 1em 0;
    border-radius: 3px;
    background-color: var(--white-02);
    max-width: 543px;
}

code {
    padding: 3px;
    border-radius: 6px 3px;
}

@media screen and (max-width: 966px) {
    .theme-right, .theme-nav, .theme .cell.mt-3 {
        display: none !important;
    }

    .wrapper-right, .wrapper-right-web {
        display: none;
    }

    .theme-article {
        min-width: auto;
    }

    .theme-nav-mobile {
        display: flex;
    }
}

/*Mid mobile terminal*/
@media screen and (max-width: 779px) {
    :root {
        --box-spacing: 12px;
        --content-padding: 10px 34px;
        --content-line-height: 30px;
        --content-font-size: 16px;
        --link-size: 13px;
    }

    .s-icon {
        width: 24px;
        height: 24px;
    }

    .fs-16 {
        font-size: 13px !important;
    }

    .link-1 {
        font-size: 13px;
    }

    .tag, .fs-12 {
        font-size: 10px !important;
    }

    .cell {
        font-size: 10px;
    }

    .logo {
        font-size: 22px;
    }

    .table-add td input, textarea, select {
        width: 210px
    }

    .wrapper-right, .wrapper-right-web {
        display: none;
    }

    .theme-right, .theme-nav, .theme .cell.mt-3 {
        display: none !important;
    }

}

/*Mobile terminal*/
@media screen and (max-width: 500px) {
    :root {
        --box-spacing: 6px;
        --content-padding: 10px 12px;
        --content-line-height: 26px;
    }

    .grid-3 {
        grid-template-columns: auto auto !important;
    }

    .s-icon-76 {
        width: 36px;
        height: 36px;
    }
}

.en-root {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.en-wrapper {
    display: grid;
    grid-template-rows: 100px 1fr 140px;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 600px) {

    .en-wrapper {
        display: grid;
        grid-template-rows: min-content 1fr 140px;
        width: 100%;
        height: 100%;
    }
}


.en-w {
    max-width: 1060px; /*970px(mine) 1060px(v2ex) 1233px(admin)*/
    margin: 0 auto;
    padding: 0 var(--box-spacing);
    height: 100%;
}

.en-progress-wrapper {
    width: 100%;
}

@media screen and (max-width: 900px) {
    .en-progress-wrapper {
        width: 95%;
    }
}

@media screen and (max-width: 500px) {
    .en-progress-wrapper {
        width: 85%;
    }
}

.en-main-wrapper {
    display: grid;
    align-content: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

@media screen and (max-width: 600px) {
    .en-main-wrapper {
        align-content: baseline;
    }
}

.en-main {
    min-height: 450px;
    overflow: visible;
    width: 600px;
    padding: 13px;
}

@media screen and (max-width: 600px) {
    .en-main {
        width: 333px;
    }
}

@media screen and (max-width: 375px) {
    .en-main {
        width: 333px;
    }
}

.en-footer-wrapper {
    border-top: 2px solid var(--white-11);
    position: relative;
}

.en-bg-msg {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 140px;
    z-index: -1;
}

.en-msg-box {
    display: inline-grid;
    grid-template-columns: 43px 1fr;
    align-items: center;
    border-radius: 13px;
    z-index: 0;

}

.en-footer {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    /*width: 100%;*/
    height: 100%;
}


.en-footer .left {
    grid-column: 1/5;
}

.en-footer .right {
    grid-column: 5/auto;
}

@media screen and (max-width: 523px) {
    .en-footer {
        grid-gap: 10px;
        align-items: center;
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: 100%;
        height: auto;
        padding-top: 20px;
    }

    .en-footer .left {
        grid-column: auto;
        display: grid;
    }

    .en-footer .right {
        grid-column: auto;
        display: grid;
    }

    .en-msg-box {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        margin: 70px 0;
        padding: 24px 16px 72px;
    }
}


.en-wrapper-finish {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    display: grid;
    grid-template-columns: 100%;
    min-height: 460px;
    justify-items: center;
    align-items: center;
}

.finish-message-box {
    height: 400px;
    width: 400px;
    display: grid;
    grid-template-rows: 1fr 123px;
    align-items: center;
    justify-items: center;
}

@media screen and (max-width: 523px) {
    .finish-message-box {
        width: 200px;
    }
}

.finish-utils-box {
    display: grid;
    grid-gap: 10px;
}

.spelling-title-box {
    display: flex;
    height: 122px;
    align-items: center;
}

.E01 {
    width: 10%;
}

.E02 {
    cursor: default;
    border: 2px solid var(--white-02);
    color: var(--black-01);
    padding: 12px 24px;
    border-radius: 15px;
    font-size: 20px;
    font-family: din-round, sans-serif;
}

.css-78c6dr-MuiToolbar-root-MuiTablePagination-toolbar {
    min-height: 37px;
}


.tree_head, .tree_row {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.tree_head {
    padding: 6px 9px;
    font-weight: 700;
    font-size: 13px;
    text-align: left;
}

.tree_head > div, .tree_row > div {
    width: calc(100% / 9);
    overflow-x: auto;
    overflow-y:clip;
}




.tree_row {
    font-size: 13px;
    margin: 0;
    height: 36px;
    text-align: left;
}

.tree_row > div {
    padding: 5px 6px;
    font-size: 12px;
    display: flex;
    align-items: center;
}


.tree_row > div:first-child {
    text-align: left;
}


.menuListItem {
    margin-bottom: 10px;
}

.menuListLabel {
    margin-bottom: 10px;
}

.menu_level_3 {
    padding-left: 60px;

}

.menu_level_3 > div:first-child {
    width: calc(calc(100% / 9) - 60px);
}

.menu_level_2 > div:first-child {
    width: calc(calc(100% / 9) - 30px);
}

.menu_level_2 {
    padding-left: 30px;
}

.menuContent {
    margin-top: 5px;
    background-color: white;
    padding: 10px;
    box-shadow: 0px 5px 5px 0px rgba(183, 183, 183, 0.31);

}

.ant-transfer-list {
    height: 100% !important;
}

.ant-input-affix-wrapper .ant-input-suffix {
    display: none !important;
}