.tk-quest-item {
    --exam-cnt-font-weight:inherit;
}

.tk-quest-item {
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--borderRadius2);
    margin-bottom: .75rem;
    text-align: left;
    position: relative;
    transition-property: box-shadow;
    transition-duration: .3s;
    transition-timing-function: ease-in;
    background: var(--bg-color3);
}

    .tk-quest-item:hover {
        box-shadow: 0 0 6px 0 rgba(0,0,0,0.11);
    }

    .tk-quest-item .ques-additional {
        display: block;
        min-height: 2.625rem;
        border-radius: var(--borderRadius2) var(--borderRadius2) 0 0;
        font-size: 0;
        box-sizing: border-box;
        position: relative;
        z-index: 120;
    }

        .tk-quest-item .ques-additional .top-msg {
            display: flex;
            align-items: center;
            height: 1.5rem;
            overflow: hidden;
            font-size: 0;
        }

            .tk-quest-item .ques-additional .top-msg .ques-src {
                display: inline-block;
                vertical-align: middle;
                max-width: 100%;
                height: 100%;
                overflow: hidden;
                box-sizing: border-box;
                padding: 0 1.25rem;
                background: var(--primary-bg-color2);
                border-radius: .125rem 0 .125rem 0;
                text-overflow: ellipsis;
                word-break: keep-all;
                white-space: nowrap;
                font-size: .75rem;
                font-weight: 400;
                color: var(--primary-font-color1);
                line-height: 2;
                text-shadow: 0 0 6px rgba(0,0,0,0.11);
            }

                .tk-quest-item .ques-additional .top-msg .ques-src:hover {
                    color: var(--primary-font-color1-hover);
                }

        .tk-quest-item .ques-additional .msg-box {
            display: flex;
            align-items: center;
            width: 100%;
            height: 2.125rem;
            box-sizing: border-box;
            padding: 0 1.25rem;
            border-bottom: 1px solid var(--line-color2);
        }

            .tk-quest-item .ques-additional .msg-box .left-msg {
                display: flex;
                align-items: center;
                height: 100%;
                font-size: .75rem;
                flex: 1;
                font-size: 0;
            }

                .tk-quest-item .ques-additional .msg-box .left-msg .gap {
                    display: inline-block;
                    vertical-align: middle;
                    font-size: .75rem;
                    line-height: 2.833333;
                    margin: 0 .625rem;
                    color: var(--line-color1);
                    font-weight: normal;
                }

                .tk-quest-item .ques-additional .msg-box .left-msg .addi-info {
                    display: inline-block;
                    vertical-align: middle;
                    font-size: .75rem;
                    line-height: 2.833333;
                    word-break: keep-all;
                    white-space: nowrap;
                    color: var(--font-color3);
                }

                    .tk-quest-item .ques-additional .msg-box .left-msg .addi-info + .gap:last-child {
                        display: none;
                    }

                    .tk-quest-item .ques-additional .msg-box .left-msg .addi-info > .info-cnt.gonggu {
                        color: #765cf0;
                    }

                    .tk-quest-item .ques-additional .msg-box .left-msg .addi-info > .info-cnt.jichu {
                        color: #2877ff;
                    }

                    .tk-quest-item .ques-additional .msg-box .left-msg .addi-info > .info-cnt.tisheng {
                        color: #ef972f;
                    }

                .tk-quest-item .ques-additional .msg-box .left-msg .knowledge-list-wrapper {
                    flex: 1;
                    display: flex;
                    height: 2.125rem;
                    margin-left: .1875rem;
                    position: relative;
                    cursor: pointer;
                    overflow: hidden;
                }

                    .tk-quest-item .ques-additional .msg-box .left-msg .knowledge-list-wrapper:hover {
                        overflow: unset;
                    }

                        .tk-quest-item .ques-additional .msg-box .left-msg .knowledge-list-wrapper:hover .knowledge-list {
                            background-color: var(--bg-color3);
                            box-shadow: 0 2px 6px 0 rgba(0,0,0,0.1);
                            border-radius: .1875rem;
                        }

                            .tk-quest-item .ques-additional .msg-box .left-msg .knowledge-list-wrapper:hover .knowledge-list::before {
                                transform: rotate(-180deg);
                                top: .875rem;
                                color: var(--primary-font-color1-hover);
                            }

                    .tk-quest-item .ques-additional .msg-box .left-msg .knowledge-list-wrapper.single-line .knowledge-list {
                        box-shadow: none;
                        border-radius: 0;
                    }

                        .tk-quest-item .ques-additional .msg-box .left-msg .knowledge-list-wrapper.single-line .knowledge-list::before {
                            content: none;
                            display: none;
                        }

                    .tk-quest-item .ques-additional .msg-box .left-msg .knowledge-list-wrapper .knowledge-list {
                        height: auto;
                        overflow: hidden;
                        box-sizing: border-box;
                        padding-left: .5625rem;
                        padding-right: 1.75rem;
                        padding-top: .25rem;
                        padding-bottom: .25rem;
                        position: absolute;
                        top: 0;
                        left: -0.5625rem;
                        z-index: 100;
                    }

                        .tk-quest-item .ques-additional .msg-box .left-msg .knowledge-list-wrapper .knowledge-list::before {
                            content: "\e643";
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: .5rem;
                            height: .3125rem;
                            font-size: .5rem;
                            font-family: "icon" !important;
                            color: var(--font-color4);
                            transform-origin: center center;
                            position: absolute;
                            right: .5625rem;
                            top: .9375rem;
                            z-index: 101;
                            transition-property: transform,top;
                            transition-duration: .3s;
                            transition-timing-function: linear;
                        }

                        .tk-quest-item .ques-additional .msg-box .left-msg .knowledge-list-wrapper .knowledge-list > .knowledge-item {
                            display: inline;
                            height: 1.5625rem;
                            margin-right: .625rem;
                            overflow: hidden;
                            font-size: .75rem;
                            font-weight: 400;
                            color: var(--font-color4);
                            word-break: break-word;
                            line-height: 2;
                        }

                            .tk-quest-item .ques-additional .msg-box .left-msg .knowledge-list-wrapper .knowledge-list > .knowledge-item:hover {
                                color: var(--primary-font-color1-hover);
                            }

            .tk-quest-item .ques-additional .msg-box .right-msg {
                display: flex;
                align-items: center;
                font-size: .75rem;
                justify-content: flex-end;
                height: 100%;
                margin-left: .625rem;
                font-size: 0;
            }

                .tk-quest-item .ques-additional .msg-box .right-msg > .jieti-btn {
                    display: inline-block;
                    vertical-align: middle;
                    font-size: 0;
                    cursor: pointer;
                    position: relative;
                    z-index: 200;
                }

                    .tk-quest-item .ques-additional .msg-box .right-msg > .jieti-btn > .title-box {
                        display: inline-block;
                        vertical-align: middle;
                        height: 1.5rem;
                        box-sizing: border-box;
                        border-radius: .1875rem;
                        padding: .25rem .375rem .1875rem .375rem;
                        position: relative;
                        font-size: .75rem;
                        color: var(--primary-font-color1);
                        background: var(--primary-bg-color2);
                    }

                    .tk-quest-item .ques-additional .msg-box .right-msg > .jieti-btn > .method-list {
                        position: absolute;
                        top: 136%;
                        right: -1rem;
                        z-index: 300;
                        display: none;
                        box-sizing: border-box;
                        border-radius: .25rem;
                        padding: .5rem;
                        font-size: .75rem;
                        word-break: keep-all;
                        white-space: nowrap;
                        line-height: 1.5;
                        text-align: left;
                        background: #f4f9ff;
                    }

                        .tk-quest-item .ques-additional .msg-box .right-msg > .jieti-btn > .method-list::after {
                            content: "";
                            width: 0;
                            height: 0;
                            border-style: solid;
                            border-width: 0 .5rem .5rem .5rem;
                            border-color: transparent transparent #f4f9ff transparent;
                            display: inline-block;
                            position: absolute;
                            top: -0.5rem;
                            right: 1.875rem;
                        }

                        .tk-quest-item .ques-additional .msg-box .right-msg > .jieti-btn > .method-list > .item {
                            display: inline-block;
                            vertical-align: middle;
                            height: auto;
                            word-break: keep-all;
                            box-sizing: border-box;
                            white-space: nowrap;
                            padding: .125rem .25rem;
                            color: var(--primary-font-color1);
                        }

                            .tk-quest-item .ques-additional .msg-box .right-msg > .jieti-btn > .method-list > .item:hover {
                                color: var(--primary-font-color1-hover);
                            }

                    .tk-quest-item .ques-additional .msg-box .right-msg > .jieti-btn:hover > .title-box {
                        background: var(--primary-font-color1-hover);
                        color: var(--font-color5);
                    }

                    .tk-quest-item .ques-additional .msg-box .right-msg > .jieti-btn:hover > .method-list {
                        display: inline-block;
                    }

                    .tk-quest-item .ques-additional .msg-box .right-msg > .jieti-btn:hover::after {
                        content: "";
                        display: block;
                        width: 200%;
                        height: 20px;
                        background-color: transparent;
                        position: absolute;
                        top: 100%;
                        right: -10%;
                        z-index: 100;
                    }

                .tk-quest-item .ques-additional .msg-box .right-msg .tag {
                    display: inline-block;
                    vertical-align: middle;
                    margin-right: .5625rem;
                    height: 1.5rem;
                    box-sizing: border-box;
                    border-radius: .1875rem;
                    padding: .25rem .4375rem .1875rem .4375rem;
                    position: relative;
                    font-size: .75rem;
                    font-weight: 400;
                    color: var(--font-color3);
                    word-break: keep-all;
                    white-space: nowrap;
                }

                    .tk-quest-item .ques-additional .msg-box .right-msg .tag:last-child {
                        margin-right: 0;
                    }

                    .tk-quest-item .ques-additional .msg-box .right-msg .tag.classic {
                        color: #765cf0;
                    }

                    .tk-quest-item .ques-additional .msg-box .right-msg .tag.yazhou {
                        color: #16b2ad;
                    }

                    .tk-quest-item .ques-additional .msg-box .right-msg .tag.sync {
                        color: #ef972f;
                    }

        .tk-quest-item .ques-additional .new-box {
            display: none;
        }

    .tk-quest-item.new .ques-additional {
        position: relative;
    }

        .tk-quest-item.new .ques-additional .new-box {
            display: inline-block;
            width: 2.625rem;
            height: 2.625rem;
            overflow: hidden;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 201;
            pointer-events: none;
        }

            .tk-quest-item.new .ques-additional .new-box::before {
                content: "NEW";
                display: inline-block;
                width: 172%;
                height: 1rem;
                font-size: .75rem;
                text-align: center;
                line-height: 1.3333333;
                position: absolute;
                top: 20%;
                left: 28%;
                -ms-transform-origin: center center;
                -ms-transform: translate(-25%,-25%) rotate(45deg);
                transform-origin: center center;
                transform: translate(-25%,-25%) rotate(45deg);
                background: #ff7373;
                color: var(--font-color5);
            }

    .tk-quest-item .wrapper {
        width: 100%;
        box-sizing: border-box;
        padding: .625rem 1.25rem .625rem 1.25rem;
        position: relative;
        z-index: 100;
        cursor: pointer;
    }

        .tk-quest-item .wrapper.quesdiv.selected-mask {
            opacity: .5;
        }

        .tk-quest-item .wrapper .art-overview {
            margin-bottom: 1.4375rem;
            font-size: .75rem;
            color: var(--font-color4);
        }

        .tk-quest-item .wrapper .additional-file {
            display: flex;
            align-items: center;
            height: 1.6875rem;
        }

            .tk-quest-item .wrapper .additional-file > .txt {
                color: var(--font-color4);
                font-size: .75rem;
                font-style: normal;
                font-weight: 400;
                line-height: 2.25;
            }

            .tk-quest-item .wrapper .additional-file > .file-icon {
                width: .875rem;
                height: .875rem;
                flex-shrink: 0;
                margin-left: .25rem;
                margin-right: .4375rem;
                background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTIgMTMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEyIDEzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzI4NzdGRjt9Cjwvc3R5bGU+CjxnIGlkPSJWZWN0b3IiPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTkuNSwxMS45aC03Yy0wLjIsMC0wLjQtMC4yLTAuNC0wLjRWMTBjMC0wLjIsMC4yLTAuNCwwLjQtMC40UzIuOSw5LjgsMi45LDEwdjEuMWg2LjJWMTAKCQljMC0wLjIsMC4yLTAuNCwwLjQtMC40UzkuOSw5LjgsOS45LDEwdjEuNUM5LjksMTEuNyw5LjcsMTEuOSw5LjUsMTEuOXoiLz4KPC9nPgo8ZyBpZD0iVmVjdG9yXzIiPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTkuNSw1LjljLTAuMiwwLTAuNC0wLjItMC40LTAuNFY0LjFMNy4zLDEuOUgyLjl2My42YzAsMC4yLTAuMiwwLjQtMC40LDAuNFMyLjEsNS43LDIuMSw1LjV2LTQKCQljMC0wLjIsMC4yLTAuNCwwLjQtMC40aDVjMC4xLDAsMC4yLDAuMSwwLjMsMC4xbDIsMi41QzkuOSwzLjgsOS45LDMuOSw5LjksNHYxLjVDOS45LDUuNyw5LjcsNS45LDkuNSw1Ljl6Ii8+CjwvZz4KPGcgaWQ9IlZlY3Rvcl8zIj4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik05LjUsNC40SDdDNi44LDQuNCw2LjYsNC4yLDYuNiw0VjEuNWMwLTAuMiwwLjItMC40LDAuNC0wLjRzMC40LDAuMiwwLjQsMC40djIuMWgyLjFjMC4yLDAsMC40LDAuMiwwLjQsMC40CgkJUzkuNyw0LjQsOS41LDQuNHoiLz4KPC9nPgo8ZyBpZD0iVmVjdG9yXzQiPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTUsMy45SDRjLTAuMiwwLTAuNC0wLjItMC40LTAuNFMzLjgsMy4xLDQsMy4xaDFjMC4yLDAsMC40LDAuMiwwLjQsMC40UzUuMiwzLjksNSwzLjl6Ii8+CjwvZz4KPGcgaWQ9IlZlY3Rvcl81Ij4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMC41LDEwLjRoLTlDMSwxMC40LDAuNiwxMCwwLjYsOS41VjZjMC0wLjUsMC40LTAuOSwwLjktMC45aDljMC41LDAsMC45LDAuNCwwLjksMC45djMuNQoJCUMxMS40LDEwLDExLDEwLjQsMTAuNSwxMC40eiBNMS41LDUuOWMtMC4xLDAtMC4xLDAtMC4xLDAuMXYzLjVjMCwwLjEsMCwwLjEsMC4xLDAuMWg5YzAuMSwwLDAuMSwwLDAuMS0wLjFWNmMwLTAuMSwwLTAuMS0wLjEtMC4xCgkJSDEuNXoiLz4KPC9nPgo8ZyBpZD0iVmVjdG9yXzYiPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTQuMiw5LjJIMi44Yy0wLjIsMC0wLjMtMC4xLTAuNC0wLjJjLTAuMS0wLjEtMC4xLTAuMywwLTAuNGwxLTEuNEgyLjhDMi41LDcuMiwyLjQsNywyLjQsNi44czAuMi0wLjQsMC40LTAuNAoJCWgxLjVjMC4yLDAsMC4zLDAuMSwwLjQsMC4yYzAuMSwwLjEsMC4xLDAuMywwLDAuNGwtMSwxLjRoMC43YzAuMiwwLDAuNCwwLjIsMC40LDAuNFM0LjUsOS4yLDQuMiw5LjJ6Ii8+CjwvZz4KPGcgaWQ9IlZlY3Rvcl83Ij4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02LDkuMkM1LjgsOS4yLDUuNiw5LDUuNiw4Ljh2LTJjMC0wLjIsMC4yLTAuNCwwLjQtMC40czAuNCwwLjIsMC40LDAuNHYyQzYuNCw5LDYuMiw5LjIsNiw5LjJ6Ii8+CjwvZz4KPGcgaWQ9IlZlY3Rvcl84Ij4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik03LjgsOS4yQzcuNSw5LjIsNy4zLDksNy4zLDguOHYtMmMwLTAuMiwwLjItMC40LDAuNC0wLjRzMC40LDAuMiwwLjQsMC40djJDOC4yLDksOCw5LjIsNy44LDkuMnoiLz4KPC9nPgo8ZyBpZD0iVmVjdG9yXzkiPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTguNiw4LjRINy44QzcuNSw4LjQsNy4zLDguMiw3LjMsOHMwLjItMC40LDAuNC0wLjRoMC45YzAuMSwwLDAuMi0wLjEsMC4yLTAuMlM4LjcsNy4yLDguNiw3LjJINy44CgkJQzcuNSw3LjIsNy4zLDcsNy4zLDYuOHMwLjItMC40LDAuNC0wLjRoMC45YzAuNiwwLDEsMC41LDEsMVM5LjIsOC40LDguNiw4LjR6Ii8+CjwvZz4KPC9zdmc+Cg==) no-repeat;
                background-size: 100% 100%;
            }

            .tk-quest-item .wrapper .additional-file > .file-name {
                flex: 1;
                display: inline-flex;
                align-items: center;
                color: var(--font-color4);
                font-size: .75rem;
                font-style: normal;
                font-weight: 400;
                line-height: 2.25;
            }

    .tk-quest-item .exam-item__cnt {
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        font-size: .875rem;
        font-family: var(--font-family2);
        line-height: 2;
        font-weight: var(--exam-cnt-font-weight);
        white-space: normal;
        word-break: break-word;
        border-left-color: var(--bg-color5);
        border-right-color: var(--bg-color5);
    }

        .tk-quest-item .exam-item__cnt > * {
            color: var(--font-color2);
        }

        .tk-quest-item .exam-item__cnt td {
            box-sizing: border-box;
            padding: .625rem;
        }

        .tk-quest-item .exam-item__cnt table[name="optionsTable"] td {
            padding: 0;
        }

        .tk-quest-item .exam-item__cnt.clone {
            position: fixed;
            z-index: 1000;
            box-sizing: border-box;
            border-width: 1px;
            border-style: solid;
            overflow: hidden;
            background: var(--bg-color3);
            border-color: var(--primary-font-color1);
        }

        .tk-quest-item .exam-item__cnt.english-align {
            text-align: justify;
        }

    .tk-quest-item .exam-item__opt {
        width: 100%;
        box-sizing: border-box;
        margin-top: 10px;
        border-top: 1px dashed #dcdcdc;
        font-size: 14px;
    }

        .tk-quest-item .exam-item__opt > span.primary-color {
            color: var(--primary-font-color1);
        }

        .tk-quest-item .exam-item__opt > .no-login a[data-type="loginBtn"] {
            color: var(--error-color1);
        }

        .tk-quest-item .exam-item__opt > .item {
            margin-top: .625rem;
        }

            .tk-quest-item .exam-item__opt > .item.answer {
                margin-top: 0;
            }

                .tk-quest-item .exam-item__opt > .item.answer > img {
                    display: block;
                    width: 100%;
                }

            .tk-quest-item .exam-item__opt > .item.parse {
                margin-top: 0;
            }

                .tk-quest-item .exam-item__opt > .item.parse > img {
                    display: block;
                    width: 100%;
                }

            .tk-quest-item .exam-item__opt > .item > p {
                box-sizing: border-box;
                padding-left: .375rem;
            }

            .tk-quest-item .exam-item__opt > .item.knowlegde {
                margin-top: 0;
            }

            .tk-quest-item .exam-item__opt > .item > .knowledge-box {
                text-indent: 0;
                box-sizing: border-box;
                padding-left: 0;
            }

                .tk-quest-item .exam-item__opt > .item > .knowledge-box > .knowledge-title {
                    margin-top: .625rem;
                    display: inline-block;
                    vertical-align: middle;
                    font-size: .875rem;
                    text-align: left;
                    text-indent: 0;
                    color: var(--primary-font-color1);
                }

        .tk-quest-item .exam-item__opt .knowledge-item {
            margin: .625rem 1.25rem 0 0;
            display: inline-block;
            vertical-align: middle;
            font-size: .875rem;
            text-align: left;
            text-indent: 0;
        }

            .tk-quest-item .exam-item__opt .knowledge-item .knowledge-name {
                word-break: keep-all;
                display: inline-block;
                vertical-align: middle;
                color: var(--font-color2);
            }

                .tk-quest-item .exam-item__opt .knowledge-item .knowledge-name:hover {
                    color: var(--primary-font-color1-hover);
                }

            .tk-quest-item .exam-item__opt .knowledge-item .knowledge-explain {
                display: inline-block;
                vertical-align: middle;
                box-sizing: border-box;
                padding: 0 .625rem;
                border-radius: .25rem;
                margin-left: .3125rem;
                font-size: .75rem;
                line-height: 1.5;
                word-break: keep-all;
                background: var(--primary-bg-color1);
                color: var(--font-color5);
                cursor: pointer;
            }

                .tk-quest-item .exam-item__opt .knowledge-item .knowledge-explain:hover {
                    background: var(--primary-bg-hover-color1);
                }

        .tk-quest-item .exam-item__opt .quota-instuff {
            display: block;
            height: 10rem;
            position: relative;
        }

            .tk-quest-item .exam-item__opt .quota-instuff > .pos-box {
                display: block;
                height: 100%;
                position: absolute;
                top: 0;
                left: -1.25rem;
                right: -1.25rem;
                bottom: 0;
                background: url(../img/quota-instuff.jpg) no-repeat top left;
                text-align: center;
                line-height: 10rem;
            }

                .tk-quest-item .exam-item__opt .quota-instuff > .pos-box > .msg-box {
                    display: inline-block;
                    width: 70%;
                    line-height: 1.5;
                    text-align: left;
                }

                    .tk-quest-item .exam-item__opt .quota-instuff > .pos-box > .msg-box > p {
                        display: block;
                        margin-bottom: .875rem;
                        color: #6783b2;
                    }

                        .tk-quest-item .exam-item__opt .quota-instuff > .pos-box > .msg-box > p > em {
                            font-style: normal;
                            color: #ff8c3f;
                        }

                    .tk-quest-item .exam-item__opt .quota-instuff > .pos-box > .msg-box > div {
                        display: block;
                        box-sizing: border-box;
                        margin-left: 33%;
                        font-size: 0;
                    }

                        .tk-quest-item .exam-item__opt .quota-instuff > .pos-box > .msg-box > div > a, .tk-quest-item .exam-item__opt .quota-instuff > .pos-box > .msg-box > div > span {
                            display: inline-block;
                            vertical-align: middle;
                            font-size: .75rem;
                        }

                        .tk-quest-item .exam-item__opt .quota-instuff > .pos-box > .msg-box > div > span {
                            color: #6783b2;
                        }

                        .tk-quest-item .exam-item__opt .quota-instuff > .pos-box > .msg-box > div > a[href] {
                            height: 2rem;
                            border-radius: 1rem;
                            box-sizing: border-box;
                            padding: 0 1.125rem;
                            margin: 0 .5625rem;
                            line-height: 2.0625rem;
                            font-weight: 500;
                            color: #8a5a43;
                            background: linear-gradient(90deg,#f3d0b2,#f1b580);
                        }

    .tk-quest-item .exam-item__info {
        display: flex;
        align-items: center;
        height: 2.5rem;
        box-sizing: border-box;
        border-top: 1px solid var(--line-color2);
        margin: 0 1.25rem;
        font-size: 0;
    }

        .tk-quest-item .exam-item__info .info-msgs {
            flex: 6;
            display: flex;
            align-items: center;
            height: 100%;
            font-size: .875rem;
            box-sizing: border-box;
            max-width: 55%;
            font-size: 0;
        }

            .tk-quest-item .exam-item__info .info-msgs > .gap {
                display: inline-block;
                vertical-align: middle;
                font-size: .75rem;
                font-weight: normal;
                margin: 0 .75rem;
                color: var(--line-color1);
            }

                .tk-quest-item .exam-item__info .info-msgs > .gap:last-child {
                    display: none;
                }

            .tk-quest-item .exam-item__info .info-msgs > span {
                display: inline-block;
                vertical-align: middle;
                box-sizing: border-box;
                font-size: .75rem;
                position: relative;
                word-break: break-all;
                white-space: nowrap;
                color: var(--font-color4);
            }

                .tk-quest-item .exam-item__info .info-msgs > span:last-child {
                    margin-right: 0;
                }

                .tk-quest-item .exam-item__info .info-msgs > span.no-bound {
                    text-overflow: initial;
                    overflow: initial;
                    max-width: none;
                }

            .tk-quest-item .exam-item__info .info-msgs > .upload-time {
                max-width: 28%;
            }

            .tk-quest-item .exam-item__info .info-msgs .look-more-src {
                display: flex;
                align-items: center;
                max-width: 58%;
                height: 100%;
                font-size: .75rem;
                color: var(--font-color4);
                cursor: pointer;
                box-sizing: border-box;
                padding-right: .8125rem;
            }

                .tk-quest-item .exam-item__info .info-msgs .look-more-src > .info-txt {
                    display: inline-block;
                    position: relative;
                    box-sizing: border-box;
                    padding-right: .625rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-break: keep-all;
                    white-space: nowrap;
                }

                    .tk-quest-item .exam-item__info .info-msgs .look-more-src > .info-txt::after {
                        content: "";
                        display: inline-block;
                        width: 0;
                        height: 0;
                        border-style: solid;
                        border-width: .375rem .25rem 0 .25rem;
                        border-color: var(--primary-color3) transparent transparent transparent;
                        position: absolute;
                        right: 0;
                        top: .1875rem;
                        z-index: 300;
                        transform-origin: center center;
                        transition-property: transform;
                        transition-duration: .3s;
                        transition-timing-function: linear;
                    }

                    .tk-quest-item .exam-item__info .info-msgs .look-more-src > .info-txt:before {
                        content: "";
                        display: inline-block;
                        width: 0;
                        height: 0;
                        border-style: solid;
                        border-width: .375rem .25rem 0 .25rem;
                        border-color: var(--font-color4) transparent transparent transparent;
                        position: absolute;
                        right: 0;
                        top: .3125rem;
                        z-index: 300;
                        transform-origin: center center;
                        transition-property: transform;
                        transition-duration: .3s;
                        transition-timing-function: linear;
                    }

                .tk-quest-item .exam-item__info .info-msgs .look-more-src .more-src-links {
                    top: 1.875rem;
                    left: 50%;
                    -webkit-transform: translateX(-50%);
                    -ms-transform: translateX(-50%);
                    transform: translateX(-50%);
                    padding: .3125rem .625rem;
                    line-height: 1.875rem;
                    background: var(--bg-color3);
                    box-shadow: 0 0 5px rgba(51,51,51,0.5);
                    width: 33.75rem;
                    max-height: 9.25rem;
                    overflow: hidden;
                    overflow-y: auto;
                    position: absolute;
                    z-index: 999;
                }

                    .tk-quest-item .exam-item__info .info-msgs .look-more-src .more-src-links > .src-item {
                        display: block;
                        width: 100%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        word-break: keep-all;
                        color: var(--font-color2);
                    }

                        .tk-quest-item .exam-item__info .info-msgs .look-more-src .more-src-links > .src-item:hover {
                            color: var(--primary-font-color1-hover);
                        }

                    .tk-quest-item .exam-item__info .info-msgs .look-more-src .more-src-links > div {
                        text-align: right;
                    }

                        .tk-quest-item .exam-item__info .info-msgs .look-more-src .more-src-links > div > .look-more {
                            color: var(--primary-font-color1);
                        }

                            .tk-quest-item .exam-item__info .info-msgs .look-more-src .more-src-links > div > .look-more:hover {
                                color: var(--primary-font-color1-hover);
                            }

                .tk-quest-item .exam-item__info .info-msgs .look-more-src:hover > .info-txt::after {
                    transform: rotate(180deg);
                    top: .4375rem;
                }

                .tk-quest-item .exam-item__info .info-msgs .look-more-src:hover > .info-txt:before {
                    transform: rotate(180deg);
                }

        .tk-quest-item .exam-item__info .ctrl-box {
            flex: 4;
            display: flex;
            align-items: center;
            height: 100%;
            font-size: .875rem;
            min-width: 40%;
            justify-content: flex-end;
            gap: 1.25rem;
            font-size: 0;
            box-sizing: border-box;
        }

            .tk-quest-item .exam-item__info .ctrl-box > .ctrl-btn {
                display: inline-block;
                vertical-align: middle;
                padding-top: 0;
                padding-bottom: 0;
                font-size: .75rem;
                word-break: keep-all;
                white-space: nowrap;
                cursor: pointer;
                color: var(--primary-font-color1);
            }

                .tk-quest-item .exam-item__info .ctrl-box > .ctrl-btn:last-child {
                    margin-right: 0;
                }

                .tk-quest-item .exam-item__info .ctrl-box > .ctrl-btn::before {
                    margin-right: .25rem;
                }

                .tk-quest-item .exam-item__info .ctrl-box > .ctrl-btn:hover {
                    color: var(--primary-font-color1-hover);
                }

                .tk-quest-item .exam-item__info .ctrl-box > .ctrl-btn.change.jing {
                    position: relative;
                }

                    .tk-quest-item .exam-item__info .ctrl-box > .ctrl-btn.change.jing::before {
                        content: "";
                        width: 1.1875rem;
                        height: .75rem;
                        background: url(data:image/svg+xml;base64,PHN2ZyBpZD0i5Zu+5bGCXzEiIGRhdGEtbmFtZT0i5Zu+5bGCIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE5IDEyIj48dGl0bGU+amluZzwvdGl0bGU+PHBhdGggZD0iTTEzLDEySDBWNkgwQTYsNiwwLDAsMSw2LDBoN2E2LDYsMCwwLDEsNiw2aDBBNiw2LDAsMCwxLDEzLDEyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSIgc3R5bGU9ImZpbGw6I2ZlNDUwOSIvPjx0ZXh0IHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuNSA5LjE0KSIgc3R5bGU9ImZvbnQtc2l6ZToxMHB4O2ZpbGw6I2ZmZjtmb250LWZhbWlseTpQaW5nRmFuZ1NDLU1lZGl1bS1HQnBjLUVVQy1ILCBQaW5nRmFuZyBTQyI+57K+PC90ZXh0Pjwvc3ZnPg==) no-repeat;
                        text-align: center;
                        font-size: .5rem;
                        font-weight: 500;
                        color: var(--font-color5);
                        line-height: 1;
                        position: absolute;
                        top: -0.75rem;
                        right: -0.625rem;
                    }

                .tk-quest-item .exam-item__info .ctrl-box > .ctrl-btn.video-explain-btn {
                    margin-right: 0 !important;
                }

            .tk-quest-item .exam-item__info .ctrl-box > .add-exam-btn {
                display: inline-flex;
                align-items: center;
                width: 6.9375rem;
                height: 1.5rem;
                flex-shrink: 0;
                position: relative;
                box-sizing: border-box;
                padding: 0 0 0 1.9375rem;
                line-height: 1;
                border-radius: .1875rem;
                border: 1px solid var(--primary-color1);
                font-size: 0;
                overflow: hidden;
            }

            .tk-quest-item .exam-item__info .ctrl-box > .delques:first-child, .tk-quest-item .exam-item__info .ctrl-box > .addques:first-child {
                margin-top: .25rem;
            }

            .tk-quest-item .exam-item__info .ctrl-box > .delques {
                position: relative;
                background: var(--bg-color3);
                color: var(--primary-font-color1);
            }

                .tk-quest-item .exam-item__info .ctrl-box > .delques::before {
                    content: "\e77c";
                    display: inline-block;
                    width: 1rem;
                    height: .875rem;
                    font-family: "icon" !important;
                    font-size: .875rem;
                    font-style: normal;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                    position: absolute;
                    top: 50%;
                    left: .625rem;
                    z-index: 10;
                    transform: translateY(-50%);
                }

                .tk-quest-item .exam-item__info .ctrl-box > .delques::after {
                    content: "\79fb\51fa\8bd5\9898\7bee";
                    display: inline-block;
                    position: absolute;
                    top: 50%;
                    left: 1.9375rem;
                    z-index: 10;
                    transform: translateY(-50%);
                    font-size: .875rem;
                    word-break: keep-all;
                    white-space: nowrap;
                    color: var(--primary-font-color1);
                }

                .tk-quest-item .exam-item__info .ctrl-box > .delques:hover {
                    color: var(--primary-font-color1-hover);
                    border-color: var(--primary-font-color1-hover);
                }

                    .tk-quest-item .exam-item__info .ctrl-box > .delques:hover::after {
                        color: var(--primary-font-color1-hover);
                    }

            .tk-quest-item .exam-item__info .ctrl-box > .addques {
                background: var(--primary-color1);
                color: var(--font-color5);
                border-color: var(--primary-color1);
            }

                .tk-quest-item .exam-item__info .ctrl-box > .addques::before {
                    content: "\e77b";
                    display: inline-block;
                    width: 1rem;
                    height: .875rem;
                    font-family: "icon" !important;
                    font-size: .875rem;
                    font-style: normal;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                    position: absolute;
                    top: 50%;
                    left: .625rem;
                    z-index: 10;
                    transform: translateY(-50%);
                }

                .tk-quest-item .exam-item__info .ctrl-box > .addques:after {
                    content: "\52a0\5165\8bd5\9898\7bee";
                    position: absolute;
                    top: 50%;
                    left: 1.9375rem;
                    z-index: 10;
                    transform: translateY(-50%);
                    font-size: .875rem;
                    word-break: keep-all;
                    white-space: nowrap;
                    color: var(--font-color5);
                }

                .tk-quest-item .exam-item__info .ctrl-box > .addques:hover {
                    color: var(--font-color5);
                    border-color: var(--primary-color1-hover);
                    background: var(--primary-color1-hover);
                }

    .tk-quest-item .exam-item__custom {
        width: 100%;
        height: 1.5rem;
        box-sizing: border-box;
        padding: 0 .875rem;
        font-size: .75rem;
        line-height: 1.25rem;
        text-align: right;
    }

        .tk-quest-item .exam-item__custom > .month-used {
            display: inline-block;
            vertical-align: middle;
            width: 30%;
            text-align: right;
            font-size: .75rem;
            color: var(--font-color3);
        }

            .tk-quest-item .exam-item__custom > .month-used > span > em {
                font-style: normal;
                font-weight: bold;
                color: var(--error-color1);
            }

    .tk-quest-item .exam-item__cnt dot, .tk-quest-item .exam-item__cnt font {
        position: relative;
        text-emphasis-style: dot;
        text-emphasis-position: under left;
        text-emphasis-color: inherit;
        box-sizing: border-box;
        padding-top: .25rem;
    }

    .tk-quest-item .exam-item__cnt wave {
        text-decoration-style: wavy;
        text-decoration-line: underline;
        text-underline-position: auto;
    }

    .tk-quest-item .exam-item__cnt u {
        text-decoration: underline;
        text-underline-position: under;
        white-space: break-spaces;
    }

@media only screen and (max-width:1024px) {
    .tk-quest-item .exam-item__info .info-msgs {
        width: 60%;
    }

    .tk-quest-item .exam-item__info .ctrl-box {
        width: 40%;
    }
}

@media only screen and (min-width:1025px) and (max-width:1199px) {
    .tk-quest-item .exam-item__info .info-msgs {
        width: 60%;
    }

    .tk-quest-item .exam-item__info .ctrl-box {
        width: 40%;
    }
}

.tk-quest-item > .audio {
    padding-left: 1.1875rem;
    margin-top: .625rem;
    position: relative;
}

    .tk-quest-item > .audio > .audiojs {
        width: 24.6875rem;
        height: 1.5rem;
        box-sizing: border-box;
        padding: 0 .625rem 0 0;
        overflow: hidden;
        font-family: monospace;
        font-size: .75rem;
        -webkit-box-shadow: none;
        box-shadow: none;
        background: var(--bg-color3);
    }

        .tk-quest-item > .audio > .audiojs audio {
            position: absolute;
            left: -0.0625rem;
        }

        .tk-quest-item > .audio > .audiojs .play-pause {
            width: 1.5rem;
            height: 1.5rem;
            margin: 0 .625rem 0 0;
            float: left;
            overflow: hidden;
            border: 0;
            padding: 0;
            border-right-color: #000;
        }

        .tk-quest-item > .audio > .audiojs p {
            display: none;
            width: 1.5rem;
            height: 1.5rem;
            cursor: pointer;
        }

        .tk-quest-item > .audio > .audiojs .play {
            display: block;
            background: url(../img/player_icon.png) 0 0 no-repeat;
        }

        .tk-quest-item > .audio > .audiojs .pause {
            background: url(../img/player_icon.png) 0 -26px no-repeat;
        }

        .tk-quest-item > .audio > .audiojs .loading {
            background: url(../img/player_icon.png) 0 -52px no-repeat;
        }

        .tk-quest-item > .audio > .audiojs .error {
            background: url(../img/player_icon.png) 0 -78px no-repeat;
        }

        .tk-quest-item > .audio > .audiojs .loaded {
            position: absolute;
            top: 0;
            left: 0;
            height: .875rem;
            width: 0;
            background: #d6ebff;
        }

        .tk-quest-item > .audio > .audiojs .progress {
            position: absolute;
            top: 0;
            left: 0;
            height: .875rem;
            width: 0;
            z-index: 1;
            background: var(--primary-font-color1);
        }

        .tk-quest-item > .audio > .audiojs .time {
            float: left;
            height: 1.5rem;
            line-height: 1.5rem;
            margin: 0 0 0 .375rem;
            text-shadow: none;
            padding: 0;
            border: 0;
            color: var(--font-color3);
        }

            .tk-quest-item > .audio > .audiojs .time em {
                padding: 0 .125rem 0 0;
                font-style: normal;
                color: var(--primary-font-color1);
            }

            .tk-quest-item > .audio > .audiojs .time strong {
                padding: 0 0 0 .125rem;
                font-weight: normal;
            }

        .tk-quest-item > .audio > .audiojs .error-message {
            float: left;
            display: none;
            margin: 0 .625rem;
            height: 2.25rem;
            width: 25rem;
            overflow: hidden;
            line-height: 2.25rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            -icab-text-overflow: ellipsis;
            -khtml-text-overflow: ellipsis;
            -moz-text-overflow: ellipsis;
            -webkit-text-overflow: ellipsis;
            color: var(--font-color5);
        }

            .tk-quest-item > .audio > .audiojs .error-message a {
                text-decoration: none;
                padding-bottom: .0625rem;
                border-bottom-width: .0625rem;
                border-bottom-style: solid;
                white-space: wrap;
                color: #eee;
                border-bottom-color: var(--font-color4);
            }

        .tk-quest-item > .audio > .audiojs .scrubber {
            position: relative;
            float: left;
            width: 14.8125rem;
            height: .5rem;
            margin: .5rem 0;
            font-size: 0;
            border-radius: .25rem;
            border: 0;
            overflow: visible;
            background: #f8f8f8;
        }

            .tk-quest-item > .audio > .audiojs .scrubber .play-wrapper {
                display: block;
                height: .5rem;
                font-size: 0;
                border-radius: .25rem;
                overflow: hidden;
                position: relative;
            }

            .tk-quest-item > .audio > .audiojs .scrubber .playhead {
                display: block;
                position: absolute;
                top: 50%;
                left: -0.4375rem;
                z-index: 10;
                -ms-transform: translateY(-50%);
                transform: translateY(-50%);
                width: .875rem;
                height: .875rem;
                border-radius: 50%;
                box-shadow: 0 0 1px 1px rgba(40,119,255,0.55);
            }

                .tk-quest-item > .audio > .audiojs .scrubber .playhead::after {
                    content: "";
                    display: inline-block;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -ms-transform: translate(-50%,-50%);
                    transform: translate(-50%,-50%);
                    width: .75rem;
                    height: .75rem;
                    border-radius: 50%;
                    background: var(--font-color5);
                }

        .tk-quest-item > .audio > .audiojs.playing .play, .tk-quest-item > .audio > .audiojs.playing .loading, .tk-quest-item > .audio > .audiojs.playing .error {
            display: none;
        }

        .tk-quest-item > .audio > .audiojs.playing .pause {
            display: block;
        }

        .tk-quest-item > .audio > .audiojs.loading .play, .tk-quest-item > .audio > .audiojs.loading .pause, .tk-quest-item > .audio > .audiojs.loading .error {
            display: none;
        }

        .tk-quest-item > .audio > .audiojs.loading .loading {
            display: block;
        }

        .tk-quest-item > .audio > .audiojs.error .time, .tk-quest-item > .audio > .audiojs.error .play, .tk-quest-item > .audio > .audiojs.error .pause, .tk-quest-item > .audio > .audiojs.error .scrubber, .tk-quest-item > .audio > .audiojs.error .loading {
            display: none;
        }

        .tk-quest-item > .audio > .audiojs.error .error {
            display: block;
        }

        .tk-quest-item > .audio > .audiojs.error .play-pause p {
            cursor: auto;
        }

        .tk-quest-item > .audio > .audiojs.error .error-message {
            display: block;
        }

.tk-quest-item.pure-ques > .exam-item__custom {
    display: none;
}

.tk-quest-item.pure-ques > .exam-item__info {
    border: 0;
}

.tk-quest-item .exam-item__info .ctrl-box .ctrl-btn.change.jing:hover::after {
    content: '\542b\4eba\5de5\624b\52a8\7cbe\9009\53d8\5f0f';
}

@media only screen and (max-width:1098px) {
    .tk-quest-item .exam-item__info .info-msgs {
        width: 50%;
    }

    .tk-quest-item .exam-item__info .ctrl-box {
        width: 50%;
    }
}

.tk-quest-item .exam-item__info > .info-msgs > .offline-prompt {
    display: none;
}

.tk-quest-item.offline .exam-item__cnt {
    opacity: .56;
}

.tk-quest-item.offline .exam-item__info > .info-msgs {
    position: relative;
}

    .tk-quest-item.offline .exam-item__info > .info-msgs > .offline-prompt {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 301;
        background-color: var(--bg-color3);
    }

@supports(gap:.3125rem) {
    .tk-quest-item.offline .exam-item__info > .info-msgs > .offline-prompt {
        gap: .3125rem;
    }
}

@supports not(gap:.3125rem) {
    .tk-quest-item.offline .exam-item__info > .info-msgs > .offline-prompt > *:not(:last-child) {
        margin-right: .3125rem;
    }
}

.tk-quest-item.offline .exam-item__info > .info-msgs > .offline-prompt > .icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkZyYW1lIiBjbGlwLXBhdGg9InVybCgjY2xpcDBfMTA4MjdfMzA0NDMpIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTggMTVDOS45MzI5OCAxNSAxMS42ODMgMTQuMjE2NSAxMi45NDk3IDEyLjk0OTdDMTQuMjE2NSAxMS42ODMgMTUgOS45MzI5OCAxNSA4QzE1IDYuMDY3MDIgMTQuMjE2NSA0LjMxNzAyIDEyLjk0OTcgMy4wNTAyNUMxMS42ODMgMS43ODM1IDkuOTMyOTggMSA4IDFDNi4wNjcwMiAxIDQuMzE3MDIgMS43ODM1IDMuMDUwMjUgMy4wNTAyNUMxLjc4MzUgNC4zMTcwMiAxIDYuMDY3MDIgMSA4QzEgOS45MzI5OCAxLjc4MzUgMTEuNjgzIDMuMDUwMjUgMTIuOTQ5N0M0LjMxNzAyIDE0LjIxNjUgNi4wNjcwMiAxNSA4IDE1WiIgc3Ryb2tlPSIjRkY0QzNCIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGlkPSJWZWN0b3JfMiIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03Ljk5OTk2IDEyLjMzMjdDOC40NjAxOSAxMi4zMzI3IDguODMzMjkgMTEuOTU5NiA4LjgzMzI5IDExLjQ5OTNDOC44MzMyOSAxMS4wMzkxIDguNDYwMTkgMTAuNjY2IDcuOTk5OTYgMTAuNjY2QzcuNTM5NzMgMTAuNjY2IDcuMTY2NjMgMTEuMDM5MSA3LjE2NjYzIDExLjQ5OTNDNy4xNjY2MyAxMS45NTk2IDcuNTM5NzMgMTIuMzMyNyA3Ljk5OTk2IDEyLjMzMjdaIiBmaWxsPSIjRkY0QzNCIi8+CjxwYXRoIGlkPSJWZWN0b3JfMyIgZD0iTTggNFY5LjMzMzMzIiBzdHJva2U9IiNGRjRDM0IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzEwODI3XzMwNDQzIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=) no-repeat;
    background-size: 100% 100%;
}

.tk-quest-item.offline .exam-item__info > .info-msgs > .offline-prompt > .txt {
    color: #ff4c3b;
    font-size: .75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
}

.tk-quest-item.offline .exam-item__info > .ctrl-box > .ctrl-btn {
    display: none;
}

.tk-quest-item.offline .exam-item__info > .ctrl-box > .delete {
    display: inline-block;
}

@keyframes tree-skeleton-loading {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

.tk-tree {
    --tree-node-rename-icon:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTQgMTQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE0IDE0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6bm9uZTt9Cgkuc3Qxe2ZpbGw6IzY2NjY2Njt9Cjwvc3R5bGU+CjxyZWN0IGNsYXNzPSJzdDAiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIvPgo8ZyBpZD0iVmVjdG9yIj4KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xMy4zLDEzLjhIMC43Yy0wLjMsMC0wLjUtMC4yLTAuNS0wLjVzMC4yLTAuNSwwLjUtMC41aDEyLjZjMC4zLDAsMC41LDAuMiwwLjUsMC41UzEzLjYsMTMuOCwxMy4zLDEzLjh6Ii8+CjwvZz4KPGcgaWQ9IlZlY3Rvcl8yIj4KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik00LjcsMTFIMi4xYy0wLjMsMC0wLjUtMC4yLTAuNS0wLjVWOGMwLTAuMSwwLjEtMC4zLDAuMS0wLjRsNi41LTYuNWMwLjYtMC42LDEuNS0wLjYsMi4xLDBsMS4xLDEuMQoJCUMxMS44LDIuNSwxMiwyLjksMTIsMy4zUzExLjgsNCwxMS41LDQuM0w1LDEwLjlDNC45LDEwLjksNC44LDExLDQuNywxMXogTTIuNiwxMGgxLjlsNi40LTYuNEMxMC45LDMuNSwxMSwzLjQsMTEsMy4zCgkJUzEwLjksMywxMC44LDIuOUw5LjcsMS44QzkuNSwxLjYsOS4yLDEuNiw5LDEuOEwyLjYsOC4yVjEweiIvPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
    --tree-node-add-child-icon:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTQgMTQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE0IDE0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6bm9uZTt9Cgkuc3Qxe2ZpbGw6IzY2NjY2Njt9Cjwvc3R5bGU+CjxyZWN0IGNsYXNzPSJzdDAiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIvPgo8ZyBpZD0iVmVjdG9yXzIiPgoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTEzLjMsOC41Yy0wLjMsMC0wLjUtMC4yLTAuNS0wLjVWNS45YzAtMC4zLDAuMi0wLjUsMC41LTAuNXMwLjUsMC4yLDAuNSwwLjVWOEMxMy44LDguMywxMy42LDguNSwxMy4zLDguNXoiCgkJLz4KPC9nPgo8ZyBpZD0iVmVjdG9yXzMiPgoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTAuNyw4LjVDMC40LDguNSwwLjIsOC4zLDAuMiw4VjUuOWMwLTAuMywwLjItMC41LDAuNS0wLjVzMC41LDAuMiwwLjUsMC41VjhDMS4yLDguMywxLDguNSwwLjcsOC41eiIvPgo8L2c+CjxnIGlkPSJWZWN0b3JfNCI+Cgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMC43LDRDMC40LDQsMC4yLDMuOCwwLjIsMy41VjEuNGMwLTAuMywwLjEtMC42LDAuNC0wLjhjMC4yLTAuMiwwLjUtMC40LDAuOC0wLjRoMi4xQzMuOCwwLjIsNCwwLjQsNCwwLjcKCQlTMy44LDEuMiwzLjUsMS4ySDEuNGMtMC4xLDAtMC4xLDAtMC4xLDAuMWMwLDAtMC4xLDAuMS0wLjEsMC4xdjIuMUMxLjIsMy44LDEsNCwwLjcsNHoiLz4KPC9nPgo8ZyBpZD0iVmVjdG9yXzUiPgoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTEzLjMsNGMtMC4zLDAtMC41LTAuMi0wLjUtMC41VjEuNGMwLTAuMSwwLTAuMS0wLjEtMC4xYzAsMC0wLjEtMC4xLTAuMS0wLjFoLTIuMUMxMC4yLDEuMiwxMCwxLDEwLDAuNwoJCXMwLjItMC41LDAuNS0wLjVoMi4xYzAuMywwLDAuNiwwLjEsMC44LDAuNGMwLjIsMC4yLDAuNCwwLjUsMC40LDAuOHYyLjFDMTMuOCwzLjgsMTMuNiw0LDEzLjMsNHoiLz4KPC9nPgo8ZyBpZD0iVmVjdG9yXzYiPgoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTEyLjYsMTMuOGgtMi4xYy0wLjMsMC0wLjUtMC4yLTAuNS0wLjVzMC4yLTAuNSwwLjUtMC41aDIuMWMwLjEsMCwwLjEsMCwwLjEtMC4xYzAsMCwwLjEtMC4xLDAuMS0wLjF2LTIuMQoJCWMwLTAuMywwLjItMC41LDAuNS0wLjVzMC41LDAuMiwwLjUsMC41djIuMWMwLDAuMy0wLjEsMC42LTAuNCwwLjhDMTMuMiwxMy43LDEyLjksMTMuOCwxMi42LDEzLjh6Ii8+CjwvZz4KPGcgaWQ9IlZlY3Rvcl83Ij4KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0zLjUsMTMuOEgxLjRjLTAuMywwLTAuNi0wLjEtMC44LTAuNGMtMC4yLTAuMi0wLjQtMC41LTAuNC0wLjh2LTIuMWMwLTAuMywwLjItMC41LDAuNS0wLjVzMC41LDAuMiwwLjUsMC41CgkJdjIuMWMwLDAuMSwwLDAuMSwwLjEsMC4xYzAsMCwwLjEsMC4xLDAuMSwwLjFoMi4xQzMuOCwxMi44LDQsMTMsNCwxMy4zUzMuOCwxMy44LDMuNSwxMy44eiIvPgo8L2c+CjxnIGlkPSJWZWN0b3JfOCI+Cgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNOCwxLjJINS45QzUuNywxLjIsNS40LDEsNS40LDAuN3MwLjItMC41LDAuNS0wLjVIOGMwLjMsMCwwLjUsMC4yLDAuNSwwLjVTOC4zLDEuMiw4LDEuMnoiLz4KPC9nPgo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNOS44LDYuNUg3LjVWNC4yYzAtMC4zLTAuMi0wLjUtMC41LTAuNVM2LjUsMy45LDYuNSw0LjJ2Mi4zSDQuMkMzLjksNi41LDMuNyw2LjcsMy43LDdzMC4yLDAuNSwwLjUsMC41aDIuMwoJdjIuM2MwLDAuMywwLjIsMC41LDAuNSwwLjVzMC41LTAuMiwwLjUtMC41VjcuNWgyLjNjMC4zLDAsMC41LTAuMiwwLjUtMC41UzEwLjEsNi41LDkuOCw2LjV6Ii8+CjxnIGlkPSJWZWN0b3JfMTAiPgoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTgsMTMuOEg1LjljLTAuMywwLTAuNS0wLjItMC41LTAuNXMwLjItMC41LDAuNS0wLjVIOGMwLjMsMCwwLjUsMC4yLDAuNSwwLjVTOC4zLDEzLjgsOCwxMy44eiIvPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
    --tree-node-delete-icon:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTQgMTQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE0IDE0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6bm9uZTt9Cgkuc3Qxe2ZpbGw6IzY2NjY2Njt9Cjwvc3R5bGU+CjxyZWN0IGNsYXNzPSJzdDAiIHdpZHRoPSIxMy4zIiBoZWlnaHQ9IjE0Ii8+CjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xMywyLjdoLTEuN2gtMC45bDAtMC4zYy0wLjItMS4yLTEuMi0yLjEtMi41LTIuMUg2LjFjLTEuMiwwLTIuMywwLjktMi41LDIuMWwwLDAuM0gyLjNIMQoJYy0wLjMsMC0wLjUsMC4yLTAuNSwwLjVTMC43LDMuNywxLDMuN2gwLjlsMC42LDguNmMwLjEsMC44LDAuNywxLjQsMS41LDEuNGg1LjdjMC44LDAsMS40LTAuNiwxLjUtMS40bDAuNi04LjZIMTMKCWMwLjMsMCwwLjUtMC4yLDAuNS0wLjVTMTMuMywyLjcsMTMsMi43eiBNNC42LDIuNmMwLjEtMC43LDAuNy0xLjIsMS41LTEuMmgxLjhjMC43LDAsMS40LDAuNSwxLjUsMS4ybDAsMC4xTDQuNiwyLjZMNC42LDIuNnoKCSBNMTAuMiwxMi4yYzAsMC4zLTAuMiwwLjUtMC41LDAuNUg0Yy0wLjMsMC0wLjUtMC4yLTAuNS0wLjVMMi45LDMuN2g3LjlMMTAuMiwxMi4yeiIvPgo8ZyBpZD0iVmVjdG9yXzQiPgoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTguNywxMS4zSDUuM2MtMC4zLDAtMC41LTAuMi0wLjUtMC41czAuMi0wLjUsMC41LTAuNWgzLjNjMC4zLDAsMC41LDAuMiwwLjUsMC41UzguOSwxMS4zLDguNywxMS4zeiIvPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
}

.tk-tree {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    padding: 0 1.25rem 0 .625rem;
}

    .tk-tree .tree-top-ul {
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 1;
    }

        .tk-tree .tree-top-ul::before {
            content: '';
            display: inline-block;
            width: 0;
            height: 98%;
            box-sizing: border-box;
            border-left: .0625rem dashed #ddd;
            position: absolute;
            top: .75rem;
            left: .375rem;
            z-index: 100;
        }

        .tk-tree .tree-top-ul > li.tree-node {
            margin-left: 0;
            box-sizing: border-box;
        }

            .tk-tree .tree-top-ul > li.tree-node.tree-leaf > .tree-node-name > .tree-icon {
                width: 1.1875rem;
                height: .875rem;
                box-sizing: border-box;
                position: relative;
                z-index: 200;
            }

                .tk-tree .tree-top-ul > li.tree-node.tree-leaf > .tree-node-name > .tree-icon::before {
                    content: '';
                    width: .5rem;
                    height: .5rem;
                    box-sizing: border-box;
                    border-bottom: .0625rem dashed #ddd;
                    position: absolute;
                    top: .125rem;
                    left: .375rem;
                    z-index: 100;
                }

                .tk-tree .tree-top-ul > li.tree-node.tree-leaf > .tree-node-name > .tree-icon::after {
                    content: none;
                }

            .tk-tree .tree-top-ul > li.tree-node > .tree-node-name::before {
                content: none !important;
            }

            .tk-tree .tree-top-ul > li.tree-node > .tree-ul {
                display: none;
            }

                .tk-tree .tree-top-ul > li.tree-node > .tree-ul::before {
                    content: none !important;
                }

            .tk-tree .tree-top-ul > li.tree-node:last-child > .tree-node-name::after {
                content: '';
                width: .5rem;
                height: 100%;
                box-sizing: border-box;
                border-left: .0625rem solid white;
                position: absolute;
                top: 0;
                left: .375rem;
                z-index: 101;
            }

            .tk-tree .tree-top-ul > li.tree-node:last-child > .tree-node-name::after {
                top: 9px;
            }

            .tk-tree .tree-top-ul > li.tree-node:last-child > .tree-ul::after {
                content: '';
                width: .5rem;
                height: 100%;
                box-sizing: border-box;
                border-left: .0625rem solid white;
                position: absolute;
                top: 0;
                left: .375rem;
                z-index: 101;
            }

        .tk-tree .tree-top-ul > .tree-children[data-extensibe="1"] {
            display: flex;
            flex-direction: column;
        }

            .tk-tree .tree-top-ul > .tree-children[data-extensibe="1"] > .tree-node-name {
                position: relative;
            }

                .tk-tree .tree-top-ul > .tree-children[data-extensibe="1"] > .tree-node-name > .tree-icon {
                    width: .875rem;
                    height: .875rem;
                    border-radius: 50%;
                    cursor: pointer;
                    box-sizing: border-box;
                    margin-top: .1875rem;
                    position: relative;
                    z-index: 200;
                }

                    .tk-tree .tree-top-ul > .tree-children[data-extensibe="1"] > .tree-node-name > .tree-icon:not(.tree-open) {
                        background: #e7e7e7;
                    }

                        .tk-tree .tree-top-ul > .tree-children[data-extensibe="1"] > .tree-node-name > .tree-icon:not(.tree-open)::before {
                            content: '';
                            width: .4375rem;
                            height: .0625rem;
                            font-size: 0;
                            background-color: #9e9e9e;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            z-index: 201;
                            transform: translate(-50%,-50%);
                        }

                        .tk-tree .tree-top-ul > .tree-children[data-extensibe="1"] > .tree-node-name > .tree-icon:not(.tree-open)::after {
                            content: '';
                            width: .0625rem;
                            height: .4375rem;
                            font-size: 0;
                            background-color: #9e9e9e;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            z-index: 201;
                            transform: translate(-50%,-50%);
                        }

            .tk-tree .tree-top-ul > .tree-children[data-extensibe="1"].tree-open > .tree-node-name > .tree-icon {
                background: var(--primary-color1);
            }

                .tk-tree .tree-top-ul > .tree-children[data-extensibe="1"].tree-open > .tree-node-name > .tree-icon::before {
                    content: '';
                    width: .5rem;
                    height: .0625rem;
                    font-size: 0;
                    background-color: var(--bg-color3);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    z-index: 201;
                    transform: translate(-50%,-50%);
                }

                .tk-tree .tree-top-ul > .tree-children[data-extensibe="1"].tree-open > .tree-node-name > .tree-icon::after {
                    content: none;
                }

            .tk-tree .tree-top-ul > .tree-children[data-extensibe="1"].tree-open > .tree-ul {
                display: flex;
                flex-direction: column;
            }

                .tk-tree .tree-top-ul > .tree-children[data-extensibe="1"].tree-open > .tree-ul::before {
                    content: '';
                    display: inline-block;
                    width: 0;
                    height: 100%;
                    box-sizing: border-box;
                    border-left: .0625rem dashed #ddd;
                    position: absolute;
                    top: .75rem;
                    left: .375rem;
                    z-index: 100;
                }

    .tk-tree .tree-node {
        display: flex;
        flex-direction: column;
        margin-left: 1.25rem;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;
    }

        .tk-tree .tree-node > .tree-node-name {
            display: flex;
            width: 100%;
            min-height: 1.125rem;
            box-sizing: border-box;
            position: relative;
            padding-bottom: .5rem;
        }

@supports(gap:.5rem) {
    .tk-tree .tree-node > .tree-node-name {
        gap: .5rem;
    }
}

@supports not(gap:.5rem) {
    .tk-tree .tree-node > .tree-node-name > *:not(:last-child) {
        margin-right: .5rem;
    }
}

.tk-tree .tree-node > .tree-node-name > .tree-anchor {
    flex: 1;
    overflow: hidden;
    white-space: normal;
    word-break: break-all;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--font-color2);
    -ms-transition-property: color;
    -ms-transition-duration: .3s;
    -ms-transition-timing-function: ease;
    transition-property: color;
    transition-duration: .3s;
    transition-timing-function: ease;
}

    .tk-tree .tree-node > .tree-node-name > .tree-anchor:hover {
        color: var(--primary-font-color1-hover);
    }

.tk-tree .tree-node > .tree-node-name > .tree-node-editor {
    display: flex;
    align-items: center;
    height: 1.125rem;
}

@supports(gap:.75rem) {
    .tk-tree .tree-node > .tree-node-name > .tree-node-editor {
        gap: .75rem;
    }
}

@supports not(gap:.75rem) {
    .tk-tree .tree-node > .tree-node-name > .tree-node-editor > *:not(:last-child) {
        margin-right: .75rem;
    }
}

.tk-tree .tree-node > .tree-node-name > .tree-node-editor > a {
    display: inline-block;
    width: .875rem;
    height: .875rem;
}

    .tk-tree .tree-node > .tree-node-name > .tree-node-editor > a.rename-btn {
        background: var(--tree-node-rename-icon);
    }

    .tk-tree .tree-node > .tree-node-name > .tree-node-editor > a.add-child-btn {
        background: var(--tree-node-add-child-icon);
    }

    .tk-tree .tree-node > .tree-node-name > .tree-node-editor > a.delete-btn {
        background: var(--tree-node-delete-icon);
    }

.tk-tree .tree-node[data-extensibe="1"] {
    display: flex;
    flex-direction: column;
}

    .tk-tree .tree-node[data-extensibe="1"] > .tree-node-name > .tree-icon {
        width: .875rem;
        height: .875rem;
        border-radius: 50%;
        cursor: pointer;
        box-sizing: border-box;
        margin-top: .1875rem;
        position: relative;
        z-index: 200;
    }

        .tk-tree .tree-node[data-extensibe="1"] > .tree-node-name > .tree-icon:not(.tree-open) {
            background: #e7e7e7;
        }

            .tk-tree .tree-node[data-extensibe="1"] > .tree-node-name > .tree-icon:not(.tree-open)::before {
                content: '';
                width: .4375rem;
                height: .0625rem;
                font-size: 0;
                background-color: #9e9e9e;
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 201;
                transform: translate(-50%,-50%);
            }

            .tk-tree .tree-node[data-extensibe="1"] > .tree-node-name > .tree-icon:not(.tree-open)::after {
                content: '';
                width: .0625rem;
                height: .4375rem;
                font-size: 0;
                background-color: #9e9e9e;
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 201;
                transform: translate(-50%,-50%);
            }

    .tk-tree .tree-node[data-extensibe="1"] > .tree-ul {
        display: none;
    }

    .tk-tree .tree-node[data-extensibe="1"]:not(:last-child) > .tree-node-name::before {
        content: '';
        display: inline-block;
        width: 0;
        height: 100%;
        box-sizing: border-box;
        border-left: .0625rem dashed #ddd;
        position: absolute;
        top: .75rem;
        left: .375rem;
        z-index: 100;
    }

    .tk-tree .tree-node[data-extensibe="1"]:not(:last-child) > .tree-ul::before {
        content: '';
        display: inline-block;
        width: 0;
        height: 100%;
        box-sizing: border-box;
        border-left: .0625rem dashed #ddd;
        position: absolute;
        top: 0;
        left: .375rem;
        z-index: 100;
    }

    .tk-tree .tree-node[data-extensibe="1"].tree-open > .tree-node-name > .tree-icon {
        background: var(--primary-color1);
    }

        .tk-tree .tree-node[data-extensibe="1"].tree-open > .tree-node-name > .tree-icon::before {
            content: '';
            width: .5rem;
            height: .0625rem;
            font-size: 0;
            background-color: var(--bg-color3);
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 201;
            transform: translate(-50%,-50%);
        }

        .tk-tree .tree-node[data-extensibe="1"].tree-open > .tree-node-name > .tree-icon::after {
            content: none;
        }

    .tk-tree .tree-node[data-extensibe="1"].tree-open > .tree-ul {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .tk-tree .tree-node[data-extensibe="1"].tree-loading > .tree-node-name > .tree-spin {
        content: '';
        width: 2rem;
        height: 2rem;
        background: url(https://static.zxxk.com/zujuan/libs/assets/ui/TKTree/tree_loading.svg) no-repeat;
        position: absolute;
        top: -0.5rem;
        left: -0.75rem;
        z-index: 210;
    }

@supports(gap:.25rem) {
    .tk-tree .tree-node.tree-leaf > .tree-node-name {
        gap: .25rem;
    }
}

@supports not(gap:.25rem) {
    .tk-tree .tree-node.tree-leaf > .tree-node-name > *:not(:last-child) {
        margin-right: .25rem;
    }
}

.tk-tree .tree-node.tree-leaf > .tree-node-name::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    box-sizing: border-box;
    border-left: .0625rem dashed #ddd;
    position: absolute;
    top: 0;
    left: .375rem;
    z-index: 100;
}

.tk-tree .tree-node.tree-leaf > .tree-node-name > .tree-icon {
    width: 1.1875rem;
    height: .875rem;
    box-sizing: border-box;
    position: relative;
    z-index: 200;
}

    .tk-tree .tree-node.tree-leaf > .tree-node-name > .tree-icon::before {
        content: '';
        width: .5rem;
        height: .5rem;
        box-sizing: border-box;
        border-bottom: .0625rem dashed #ddd;
        position: absolute;
        top: .125rem;
        left: .375rem;
        z-index: 100;
    }

.tk-tree .tree-node.tree-leaf:first-child > .tree-node-name::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 124%;
    box-sizing: border-box;
    border-left: .0625rem dashed #ddd;
    position: absolute;
    top: -0.4375rem;
    left: .375rem;
    z-index: 100;
}

.tk-tree .tree-node.tree-leaf:last-child > .tree-node-name::after {
    content: '';
    width: .5rem;
    height: 80%;
    box-sizing: border-box;
    border-left: .0625rem solid white;
    position: absolute;
    top: .6875rem;
    left: .375rem;
    z-index: 101;
}

.tk-tree .tree-node .tree-node-name > .tree-radio {
    display: inline-block;
    width: .875rem;
    height: .875rem;
    cursor: pointer;
    box-sizing: border-box;
    border-style: solid;
    border-width: .0625rem;
    border-radius: 50%;
}

    .tk-tree .tree-node .tree-node-name > .tree-radio[data-checked="0"] {
        border-color: #ccc;
    }

        .tk-tree .tree-node .tree-node-name > .tree-radio[data-checked="0"]:hover {
            border-color: var(--primary-color1-hover);
        }

    .tk-tree .tree-node .tree-node-name > .tree-radio[data-checked="1"] {
        position: relative;
        border-color: var(--primary-color1);
    }

        .tk-tree .tree-node .tree-node-name > .tree-radio[data-checked="1"]::after {
            content: '';
            display: inline-block;
            width: .375rem;
            height: .375rem;
            font-size: 0;
            background: var(--primary-color1);
            box-sizing: border-box;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 203;
            transform: translate(-50%,-50%);
        }

        .tk-tree .tree-node .tree-node-name > .tree-radio[data-checked="1"] ~ .tree-anchor {
            color: var(--primary-color1);
        }

.tk-tree .tree-node .tree-node-name > .tree-checkbox {
    display: inline-block;
    width: .875rem;
    height: .875rem;
    cursor: pointer;
    box-sizing: border-box;
    border-style: solid;
    border-width: .0625rem;
    border-radius: .1875rem;
}

    .tk-tree .tree-node .tree-node-name > .tree-checkbox[data-checked="0"] {
        border-color: #ccc;
    }

        .tk-tree .tree-node .tree-node-name > .tree-checkbox[data-checked="0"]:hover {
            border-color: var(--primary-color1-hover);
            background-color: var(--bg-color4);
        }

    .tk-tree .tree-node .tree-node-name > .tree-checkbox[data-checked="1"] {
        position: relative;
        background-color: var(--primary-color1);
        border-color: var(--primary-color1);
    }

        .tk-tree .tree-node .tree-node-name > .tree-checkbox[data-checked="1"]::before {
            content: "";
            display: inline-block;
            width: .5rem;
            height: .25rem;
            border-width: 0 0 .125rem .125rem;
            border-style: solid;
            border-color: var(--bg-color3);
            position: absolute;
            z-index: 205;
            top: 44%;
            left: 50%;
            transform-origin: center center;
            transform: translate(-50%,-50%) rotate(-45deg);
        }

.tk-tree .tree-node .tree-node-name > .gap-right {
    margin: .1875rem .375rem 0 0;
}

.tk-tree .tree-node .tree-node-name > .icon-gap-left {
    margin-left: .875rem;
}

.tk-tree .tree-node.tree-node--selected > .tree-node-name > .tree-anchor {
    color: var(--primary-font-color1);
}

    .tk-tree .tree-node.tree-node--selected > .tree-node-name > .tree-anchor:hover {
        color: var(--primary-font-color1-hover);
    }

.tk-tree .tree-node.tktree-selected-part > .tree-node-name > .tree-checkbox {
    border-color: var(--primary-color1);
    background: var(--primary-color1);
    position: relative;
}

    .tk-tree .tree-node.tktree-selected-part > .tree-node-name > .tree-checkbox:hover {
        border-color: var(--primary-color1);
        background: var(--primary-color1);
    }

    .tk-tree .tree-node.tktree-selected-part > .tree-node-name > .tree-checkbox::before {
        content: none;
    }

    .tk-tree .tree-node.tktree-selected-part > .tree-node-name > .tree-checkbox::after {
        content: '';
        display: inline-block;
        width: .5rem;
        height: .125rem;
        background: var(--bg-color3);
        position: absolute;
        z-index: 205;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

.tk-tree .tree-node.disabled, .tk-tree .tree-node[disabled] {
    pointer-events: none;
}

    .tk-tree .tree-node.disabled > .tree-node-name > .tree-anchor, .tk-tree .tree-node[disabled] > .tree-node-name > .tree-anchor {
        opacity: .5;
        cursor: not-allowed;
    }

    .tk-tree .tree-node.disabled > .tree-node-name > .tree-checkbox, .tk-tree .tree-node[disabled] > .tree-node-name > .tree-checkbox {
        opacity: .5;
        cursor: not-allowed;
    }

    .tk-tree .tree-node.disabled.tktree-selected-part > .tree-node-name > .tree-anchor, .tk-tree .tree-node[disabled].tktree-selected-part > .tree-node-name > .tree-anchor {
        opacity: .5;
        cursor: not-allowed;
    }

    .tk-tree .tree-node.disabled.tktree-selected-part > .tree-node-name > .tree-checkbox, .tk-tree .tree-node[disabled].tktree-selected-part > .tree-node-name > .tree-checkbox {
        opacity: .5;
        cursor: not-allowed;
    }

.tk-tree .tree-node.tree-node--selected {
    pointer-events: all;
}

.tk-tree[data-only-leaf-check="1"] .tree-node.tree-children[disabled], .tk-tree[data-only-leaf-check="1"] .tree-node.tree-children.disabled {
    pointer-events: all;
    opacity: 1;
    cursor: pointer;
}

    .tk-tree[data-only-leaf-check="1"] .tree-node.tree-children[disabled] > .tree-node-name > .tree-anchor, .tk-tree[data-only-leaf-check="1"] .tree-node.tree-children.disabled > .tree-node-name > .tree-anchor {
        opacity: 1;
        cursor: pointer;
    }

    .tk-tree[data-only-leaf-check="1"] .tree-node.tree-children[disabled] > .tree-node-name > .tree-checkbox, .tk-tree[data-only-leaf-check="1"] .tree-node.tree-children.disabled > .tree-node-name > .tree-checkbox {
        opacity: 1;
        cursor: pointer;
    }

.tk-tree.tree-skeleton {
    padding-right: 10px;
}

    .tk-tree.tree-skeleton .skeleton-long {
        display: inline-block;
        width: 100%;
        height: 1rem;
        background-color: #f2f2f2;
        box-sizing: border-box;
        border-radius: .1875rem;
        margin-bottom: 1rem;
        background-image: linear-gradient(90deg,#f2f2f2 25%,#fafafa 37%,#f2f2f2 63%);
        background-size: 400% 100%;
        background-position: 100% 50%;
        animation: tree-skeleton-loading 1.4s ease infinite;
    }

    .tk-tree.tree-skeleton .skeleton-mid {
        display: inline-block;
        width: 60%;
        height: 1rem;
        background-color: #f2f2f2;
        box-sizing: border-box;
        border-radius: .1875rem;
        margin-bottom: 1rem;
        background-image: linear-gradient(90deg,#f2f2f2 25%,#fafafa 37%,#f2f2f2 63%);
        background-size: 400% 100%;
        background-position: 100% 50%;
        animation: tree-skeleton-loading 1.4s ease infinite;
    }

    .tk-tree.tree-skeleton .skeleton-short {
        display: inline-block;
        width: 30%;
        height: 1rem;
        background-color: #f2f2f2;
        box-sizing: border-box;
        border-radius: .1875rem;
        margin-bottom: 1rem;
        background-image: linear-gradient(90deg,#f2f2f2 25%,#fafafa 37%,#f2f2f2 63%);
        background-size: 400% 100%;
        background-position: 100% 50%;
        animation: tree-skeleton-loading 1.4s ease infinite;
    }

.tk-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    min-height: 2.375rem;
    margin: 0 auto;
    font-size: 0;
    text-align: center;
    box-sizing: border-box;
    border-radius: .875rem;
    padding: .5rem .625rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: var(--bg-color3);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.06);
}

@supports(gap:.75rem) {
    .tk-pager {
        gap: .75rem;
    }
}

@supports not(gap:.75rem) {
    .tk-pager > * {
        margin-right: .75rem;
    }

        .tk-pager > *:last-child {
            margin-right: 0;
        }
}

.tk-pager .pager-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.375rem;
    font-size: .875rem;
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
    border-radius: .5rem;
    color: var(--font-color3);
    word-break: keep-all;
    white-space: nowrap;
}

    .tk-pager .pager-item.active {
        border: 1px solid var(--primary-color1);
        background: var(--primary-bg-color1);
        color: var(--font-color5);
    }

    .tk-pager .pager-item.page-num {
        cursor: pointer;
        box-sizing: border-box;
        padding: 0 .75rem;
        border: 1px solid var(--primary-color3);
    }

        .tk-pager .pager-item.page-num:hover {
            border: 1px solid var(--primary-color1);
        }

    .tk-pager .pager-item.prev-gap, .tk-pager .pager-item.next-gap {
        letter-spacing: 2px;
        box-sizing: border-box;
    }

    .tk-pager .pager-item.prev-page {
        width: 1.375rem;
        height: 1.375rem;
        min-width: 1.375rem;
        -ms-transform-origin: center center;
        transform-origin: center center;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAMAAADzapwJAAAAXVBMVEUAAAD////w8PDs7Ozv7+/u7u7v7+/w8PDw8PDv7+/v7+/v7+/v7++ZmZmampqhoaGioqKlpaWnp6ewsLCysrK3t7fAwMDHx8fX19fb29vn5+fo6Ojt7e3u7u7v7++mvjW6AAAADXRSTlMACBEbYHmuy9jj7/DyQEsdpwAAAJJJREFUGNN1kccCwyAMQ8UmgDvT3fD/n9lDWAlFJ/kdPGQAAMCltiFYLTmqmHIxySmWqTCxkRGJTnGjSQAAM3EnwwCo2EkB3PfYc8hSfOZLthI629eJaElew65meRyoYouwmhtRg0PG1x1OTb532jQpI5/HdmRd8D2f64Lc9ec4Pjp+FNUg2NEbAKZKjL4+7c+Lf3LOJuS9eMEcAAAAAElFTkSuQmCC) no-repeat;
    }

        .tk-pager .pager-item.prev-page:hover {
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAMAAADzapwJAAAAZlBMVEUAAAD////w8P/s9v/v9//u9//v+P/v9//u+P/u9//v+P/u9v/u+P8mlf8nlf8plv84nv88oP9Do/9Gpf9cr/9hsf9isv9suP+Cwv+Tyv+33P/B4f/c7v/f7//q9f/s9v/t9v/u9//i6Qm4AAAADXRSTlMACBEbYHmuy9jj7/DyQEsdpwAAAJNJREFUGNN1kUcCAyEMA4WpS0nvnf9/MoelZQk62XNwkQAAAAllvDdKEKqYtDHJSpYp17GR5olO8UcTBwCm40KaAZCxkwTI9dgRRK73p2fhAipV7xC294wVTMVhff3MjYFvcAjnufELfMi4HbK6vPKQZuXmVleWA3fHR3Mg2f4dS6PnR1YNjB3FADBZbHQ1tD8RfwHytCptQ84FdgAAAABJRU5ErkJggg==) no-repeat;
        }

    .tk-pager .pager-item.next-page {
        width: 1.375rem;
        height: 1.375rem;
        min-width: 1.375rem;
        -ms-transform-origin: center center;
        transform-origin: center center;
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAMAAADzapwJAAAAXVBMVEUAAAD////w8PDs7Ozv7+/u7u7v7+/w8PDw8PDv7+/v7+/v7+/v7++ZmZmampqhoaGioqKlpaWnp6ewsLCysrK3t7fAwMDHx8fX19fb29vn5+fo6Ojt7e3u7u7v7++mvjW6AAAADXRSTlMACBEbYHmuy9jj7/DyQEsdpwAAAJJJREFUGNN1kccCwyAMQ8UmgDvT3fD/n9lDWAlFJ/kdPGQAAMCltiFYLTmqmHIxySmWqTCxkRGJTnGjSQAAM3EnwwCo2EkB3PfYc8hSfOZLthI629eJaElew65meRyoYouwmhtRg0PG1x1OTb532jQpI5/HdmRd8D2f64Lc9ec4Pjp+FNUg2NEbAKZKjL4+7c+Lf3LOJuS9eMEcAAAAAElFTkSuQmCC) no-repeat;
    }

        .tk-pager .pager-item.next-page:hover {
            -ms-transform: rotate(0);
            transform: rotate(0);
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAMAAADzapwJAAAAZlBMVEUAAAD////w8P/s9v/v9//u9//v+P/v9//u+P/u9//v+P/u9v/u+P8mlf8nlf8plv84nv88oP9Do/9Gpf9cr/9hsf9isv9suP+Cwv+Tyv+33P/B4f/c7v/f7//q9f/s9v/t9v/u9//i6Qm4AAAADXRSTlMACBEbYHmuy9jj7/DyQEsdpwAAAJNJREFUGNN1kUcCAyEMA4WpS0nvnf9/MoelZQk62XNwkQAAAAllvDdKEKqYtDHJSpYp17GR5olO8UcTBwCm40KaAZCxkwTI9dgRRK73p2fhAipV7xC294wVTMVhff3MjYFvcAjnufELfMi4HbK6vPKQZuXmVleWA3fHR3Mg2f4dS6PnR1YNjB3FADBZbHQ1tD8RfwHytCptQ84FdgAAAABJRU5ErkJggg==) no-repeat;
        }

.tk-pager .go-to {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22%;
    height: 1.375rem;
    font-size: 0;
}

@supports(gap:.3125rem) {
    .tk-pager .go-to {
        gap: .3125rem;
    }

        .tk-pager .go-to :not(:last-child) {
            margin-right: .3125rem;
        }
}

.tk-pager .go-to > input {
    display: inline-block;
    vertical-align: middle;
    width: 28%;
    height: 100%;
    text-align: center;
    box-sizing: border-box;
    border-radius: .5rem;
    border: var(--border1);
}

    .tk-pager .go-to > input:focus {
        box-shadow: var(--inputFocus);
    }

.tk-pager .go-to > .go-to__txt {
    display: inline-block;
    vertical-align: middle;
    font-size: .875rem;
}

.tk-pager .go-to .confirm-btn {
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 1px .75rem;
    border-radius: .5rem;
    font-size: .875rem;
    color: var(--bg-color3);
    background: var(--primary-bg-color1);
}

.tk-pager .page-totoal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tk-pager.is-simple {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
}

    .tk-pager.is-simple .go-to {
        display: inline-block;
        vertical-align: middle;
        width: 2rem;
        height: 1.375rem;
        margin-left: .75rem;
        box-sizing: border-box;
        border-radius: .5rem;
        border: 1px solid var(--line-color1);
    }

        .tk-pager.is-simple .go-to > input {
            display: inline-block;
            width: 100%;
            height: 100%;
            text-align: center;
            margin: 0;
            border: 0;
        }

    .tk-pager.is-simple .pager-item.to-last {
        margin-left: 0;
    }

.tk-check-box {
    display: inline-block;
    vertical-align: middle;
    width: .875rem;
    height: .875rem;
    overflow: hidden;
    box-sizing: border-box;
    line-height: .875rem;
    position: relative;
    z-index: 9;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background: var(--bg-color3);
    border: 1px solid var(--font-color4);
}

    .tk-check-box:hover {
        border-color: var(--primary-color1-hover);
    }

    .tk-check-box > .checkbox-icon {
        display: inline-block;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .tk-check-box > input[checked="checked"] + .checkbox-icon::before {
        content: "";
        display: inline-block;
        width: .5rem;
        height: .25rem;
        border-width: 0 0 .125rem .125rem;
        border-style: solid;
        border-color: var(--primary-color1);
        position: absolute;
        top: .1875rem;
        left: .0625rem;
        -ms-transform: rotate(-45deg);
        -ms-transform-origin: center center;
        transform: rotate(-45deg);
        transform-origin: center center;
    }

    .tk-check-box.checked {
        border-color: var(--primary-color1);
    }

        .tk-check-box.checked > .checkbox-icon::before {
            content: "";
            display: inline-block;
            width: .5rem;
            height: .25rem;
            border-width: 0 0 .125rem .125rem;
            border-style: solid;
            border-color: var(--primary-color1);
            position: absolute;
            top: .1875rem;
            left: .0625rem;
            -ms-transform: rotate(-45deg);
            -ms-transform-origin: center center;
            transform: rotate(-45deg);
            transform-origin: center center;
        }

.type-group-nav {
    --type-group-nav-item-h:2.125rem;
}

.type-group-nav {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 1.25rem 1.25rem 0 1.25rem;
    padding-bottom: 1.5rem;
    background: var(--bg-color3);
    border-radius: var(--borderRadius2) var(--borderRadius2) 0 0;
}

@supports(gap:.625rem) {
    .type-group-nav {
        gap: .625rem;
    }
}

@supports not(gap:.625rem) {
    .type-group-nav > *:not(:last-child) {
        margin-bottom: .625rem;
    }
}

.type-group-nav:first-child {
    padding-bottom: .625rem;
}

.type-group-nav .type-group-item {
    display: flex;
    min-height: var(--type-group-nav-item-h);
    box-sizing: border-box;
    padding: .625rem 0 .625rem 0;
    background: var(--bg-color3);
}

    .type-group-nav .type-group-item .type-item-top {
        flex: 1;
        display: flex;
        align-items: flex-start;
        box-sizing: border-box;
    }

@supports(gap:.625rem) {
    .type-group-nav .type-group-item .type-item-top {
        gap: .625rem;
    }
}

@supports not(gap:10px) {
    .type-group-nav .type-group-item .type-item-top > *:not(:last-child) {
        margin-right: .625rem;
    }
}

.type-group-nav .type-group-item .type-item-top .type-name {
    display: inline-flex;
    box-sizing: border-box;
    padding-top: .0187rem;
    font-size: .875rem;
    font-weight: normal;
    line-height: 1;
    text-align: right;
    color: var(--font-color4);
}

.type-group-nav .type-group-item .type-item-top .type-list {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    font-size: 0;
}

@supports(gap:.875rem 1.5rem) {
    .type-group-nav .type-group-item .type-item-top .type-list {
        gap: .875rem 1.5rem;
    }
}

@supports not(gap:1.5rem) {
    .type-group-nav .type-group-item .type-item-top .type-list > *:not(:last-child) {
        margin-right: .875rem;
        margin-bottom: 1.5rem;
    }
}

.type-group-nav .type-group-item .type-item-top .type-list > .type-item {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    line-height: 1;
    font-size: .875rem;
    color: var(--font-color2);
    word-break: keep-all;
    white-space: nowrap;
}

    .type-group-nav .type-group-item .type-item-top .type-list > .type-item:hover {
        color: var(--primary-font-color1-hover);
    }

        .type-group-nav .type-group-item .type-item-top .type-list > .type-item:hover.type-item--selected {
            color: var(--primary-font-color1-hover);
        }

    .type-group-nav .type-group-item .type-item-top .type-list > .type-item.type-item--selected {
        color: var(--primary-font-color1);
        font-weight: 500;
    }

.type-group-nav .type-group-item .type-item-top .multi-btn {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    line-height: 1;
    font-size: .875rem;
    font-weight: 500;
    text-align: right;
    color: var(--primary-font-color1);
}

.type-group-nav .type-group-item .type-item-top .multi-btn--cancel {
    margin-left: 0;
}

.type-group-nav .type-group-item > .type-name {
    display: inline-block;
    box-sizing: border-box;
    font-size: .875rem;
    font-weight: normal;
    line-height: 1;
    text-align: right;
    color: var(--font-color4);
}

.type-group-nav .type-group-item > .type-list {
    flex: 1;
    font-size: 0;
}

    .type-group-nav .type-group-item > .type-list > .type-item {
        display: inline-block;
        vertical-align: middle;
        box-sizing: border-box;
        font-size: .875rem;
        line-height: 1;
        color: var(--font-color2);
    }

        .type-group-nav .type-group-item > .type-list > .type-item:hover {
            color: var(--primary-font-color1-hover);
        }

            .type-group-nav .type-group-item > .type-list > .type-item:hover.type-item--selected {
                color: var(--primary-font-color1-hover);
            }

        .type-group-nav .type-group-item > .type-list > .type-item.type-item--selected {
            color: var(--primary-font-color1);
            font-weight: 500;
        }

.type-group-nav .type-group-item.has-sub .type-list > .type-item {
    margin: 0;
}

    .type-group-nav .type-group-item.has-sub .type-list > .type-item.type-item--selected {
        font-weight: 500;
        color: var(--primary-font-color1);
        background: var(--bg-color5);
    }

        .type-group-nav .type-group-item.has-sub .type-list > .type-item.type-item--selected.has-sub {
            position: relative;
            z-index: 2;
        }

            .type-group-nav .type-group-item.has-sub .type-list > .type-item.type-item--selected.has-sub::before {
                content: '';
                width: 100%;
                height: 100%;
                padding: 6px;
                position: absolute;
                top: -6px;
                left: -6px;
                z-index: -1;
                border-radius: var(--borderRadius2) var(--borderRadius2) 0 0;
                background: var(--bg-color5);
            }

.type-group-nav .type-group-item .sub-types {
    display: block;
    width: 100%;
    position: relative;
}

    .type-group-nav .type-group-item .sub-types > .wrapper {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        box-sizing: border-box;
        border-radius: var(--borderRadius2);
        background: var(--bg-color5);
        padding: .625rem 5.25rem .625rem 1.25rem;
        position: absolute;
        top: -0.5rem;
        left: 0;
        z-index: 10;
    }

@supports(gap:.875rem 1.5rem) {
    .type-group-nav .type-group-item .sub-types > .wrapper {
        gap: .875rem 1.5rem;
    }
}

@supports not(gap:.875rem 1.5rem) {
    .type-group-nav .type-group-item .sub-types > .wrapper > *:not(:last-child) {
        margin-right: 1.5rem;
    }
}

.type-group-nav .type-group-item .sub-types > .wrapper .type-item {
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    font-size: .75rem;
    line-height: 1;
    color: var(--font-color2);
}

    .type-group-nav .type-group-item .sub-types > .wrapper .type-item:hover {
        color: var(--primary-font-color1);
    }

    .type-group-nav .type-group-item .sub-types > .wrapper .type-item.type-item--selected {
        color: var(--primary-font-color1);
        font-weight: 500;
    }

.type-group-nav .type-group-item.ques-type.has-sub .type-name {
    margin: .75rem 0 .75rem 0;
}

.type-group-nav .type-group-item.ques-types-area > .other-area-ques {
    box-sizing: border-box;
    padding-left: 2.25rem;
    position: relative;
    overflow: hidden;
}

    .type-group-nav .type-group-item.ques-types-area > .other-area-ques > .type-list {
        width: 89%;
    }

        .type-group-nav .type-group-item.ques-types-area > .other-area-ques > .type-list > .type-item {
            display: inline-block;
            vertical-align: middle;
            box-sizing: border-box;
            padding: 0 .625rem;
            padding-bottom: .3125rem;
            margin: .75rem 0 0 0;
            font-size: .875rem;
            line-height: 2;
        }

            .type-group-nav .type-group-item.ques-types-area > .other-area-ques > .type-list > .type-item.type-item--selected {
                color: var(--primary-font-color1);
                background: var(--bg-color5);
            }

.type-group-nav .type-group-item.ques-types-area .other-area-sub-types {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    position: relative;
    background: var(--bg-color5);
}

    .type-group-nav .type-group-item.ques-types-area .other-area-sub-types::before {
        content: "";
        display: block;
        width: 2.25rem;
        height: 100%;
        background: transparent;
        position: absolute;
        top: 0;
        left: -2.25rem;
        z-index: 10;
        background: var(--bg-color5);
    }

    .type-group-nav .type-group-item.ques-types-area .other-area-sub-types::after {
        content: "";
        display: block;
        width: 5.625rem;
        height: 100%;
        background: transparent;
        position: absolute;
        top: 0;
        right: -5.625rem;
        z-index: 10;
        background: var(--bg-color5);
    }

    .type-group-nav .type-group-item.ques-types-area .other-area-sub-types > .type-item {
        display: inline-block;
        vertical-align: middle;
        box-sizing: border-box;
        padding: 0 .625rem;
        font-size: .875rem;
        line-height: 2;
        margin: .3125rem 0;
    }

.type-group-nav .type-group-item.ques-types-area > .type-item-top > .toggle-btn {
    display: inline-block;
    margin-top: 1.1875rem;
    font-size: .875rem;
    line-height: 1;
    position: relative;
    color: var(--primary-font-color1);
}

    .type-group-nav .type-group-item.ques-types-area > .type-item-top > .toggle-btn > i {
        display: inline-block;
        width: .5rem;
        height: .25rem;
        overflow: hidden;
        position: absolute;
        top: .375rem;
        left: -0.75rem;
        transition-property: transform;
        transition-duration: .3s;
        transition-timing-function: ease-in;
    }

        .type-group-nav .type-group-item.ques-types-area > .type-item-top > .toggle-btn > i::before {
            content: '';
            display: inline-block;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: .25rem .25rem 0 .25rem;
            border-color: var(--primary-color1) transparent transparent transparent;
            position: absolute;
            top: 0;
            left: 0;
        }

        .type-group-nav .type-group-item.ques-types-area > .type-item-top > .toggle-btn > i::after {
            content: '';
            display: inline-block;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: .25rem .25rem 0 .25rem;
            border-color: var(--bg-color3) transparent transparent transparent;
            position: absolute;
            top: -0.0625rem;
            left: 0;
        }

    .type-group-nav .type-group-item.ques-types-area > .type-item-top > .toggle-btn.opening > i {
        transform: translateY(-50%) rotate(180deg);
    }

.type-group-nav .type-group-item.tk-area-bar {
    overflow: initial;
    height: auto;
    display: flex;
}

@supports(gap:.625rem) {
    .type-group-nav .type-group-item.tk-area-bar {
        gap: .625rem;
    }
}

@supports not(gap:10px) {
    .type-group-nav .type-group-item.tk-area-bar > *:not(:last-child) {
        margin-right: .625rem;
    }
}

.type-group-nav .type-group-item.tk-area-bar .type-list, .type-group-nav .type-group-item.tk-area-bar > .type-list {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    font-size: 0;
}

@supports(gap:.875rem 1.5rem) {
    .type-group-nav .type-group-item.tk-area-bar .type-list, .type-group-nav .type-group-item.tk-area-bar > .type-list {
        gap: .875rem 1.5rem;
    }
}

@supports not(gap:1.5rem) {
    .type-group-nav .type-group-item.tk-area-bar .type-list > *:not(:last-child), .type-group-nav .type-group-item.tk-area-bar > .type-list > *:not(:last-child) {
        margin-right: .875rem;
        margin-bottom: 1.5rem;
    }
}

.type-group-nav .type-group-item.tk-area-bar .tk-area-box {
    display: flex;
    min-height: 1.5rem;
}

    .type-group-nav .type-group-item.tk-area-bar .tk-area-box > i {
        display: inline-block;
        height: 1rem;
        margin-left: 1rem;
        margin-top: 5px;
        font-family: "icon" !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-style: normal;
        font-size: 0;
        line-height: 1;
        color: var(--font-color2);
    }

        .type-group-nav .type-group-item.tk-area-bar .tk-area-box > i::before {
            content: "\e6a3";
            font-size: .875rem;
        }

    .type-group-nav .type-group-item.tk-area-bar .tk-area-box > .area-citys {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 12px 20px;
        margin: 4px 0 5px 10px;
        font-size: .875rem;
        line-height: 1;
        font-style: normal;
    }

        .type-group-nav .type-group-item.tk-area-bar .tk-area-box > .area-citys > .city-name {
            display: inline-block;
            box-sizing: border-box;
            border-radius: .25rem;
            color: var(--font-color2);
        }

            .type-group-nav .type-group-item.tk-area-bar .tk-area-box > .area-citys > .city-name:hover {
                color: var(--primary-font-color1-hover);
            }

            .type-group-nav .type-group-item.tk-area-bar .tk-area-box > .area-citys > .city-name.selected {
                background: var(--primary-font-color1);
                color: var(--font-color5);
            }

            .type-group-nav .type-group-item.tk-area-bar .tk-area-box > .area-citys > .city-name.type-item--selected {
                color: var(--primary-font-color1);
                font-weight: 500;
            }

    .type-group-nav .type-group-item.tk-area-bar .tk-area-box > .area-provinces {
        display: block;
        height: 1.375rem;
    }

        .type-group-nav .type-group-item.tk-area-bar .tk-area-box > .area-provinces.ctrl-hide {
            position: relative;
        }

            .type-group-nav .type-group-item.tk-area-bar .tk-area-box > .area-provinces.ctrl-hide:hover > .area-provinces__list {
                display: block;
            }

            .type-group-nav .type-group-item.tk-area-bar .tk-area-box > .area-provinces.ctrl-hide:hover::before {
                content: '';
                display: block;
                width: 21rem;
                height: 1.25rem;
                position: absolute;
                top: 1.125rem;
                left: 0;
                z-index: 299;
            }

            .type-group-nav .type-group-item.tk-area-bar .tk-area-box > .area-provinces.ctrl-hide:hover > .area-provinces__select > i {
                top: 50%;
                transform: translateY(-50%) rotate(180deg);
            }

        .type-group-nav .type-group-item.tk-area-bar .tk-area-box > .area-provinces > .area-provinces__select {
            display: inline-block;
            height: 1.375rem;
            box-sizing: border-box;
            padding: 0 .8125rem 0 .5rem;
            border-radius: .25rem;
            position: relative;
            font-size: .875rem;
            line-height: 1.83333;
            font-style: normal;
            word-break: keep-all;
            white-space: initial;
            background: #ebf5ff;
            color: var(--primary-font-color1);
        }

            .type-group-nav .type-group-item.tk-area-bar .tk-area-box > .area-provinces > .area-provinces__select > i {
                display: inline-block;
                width: .375rem;
                height: .25rem;
                overflow: hidden;
                position: absolute;
                top: 50%;
                right: .25rem;
                transform: translateY(-50%);
                transform-origin: center center;
                transition-property: transform;
                transition-duration: .3s;
                transition-timing-function: ease;
            }

                .type-group-nav .type-group-item.tk-area-bar .tk-area-box > .area-provinces > .area-provinces__select > i::before {
                    content: '';
                    display: inline-block;
                    width: 0;
                    height: 0;
                    position: absolute;
                    top: 0;
                    left: 0;
                    border-style: solid;
                    border-width: .25rem .1875rem 0 .1875rem;
                    border-color: var(--primary-color1) transparent transparent transparent;
                }

        .type-group-nav .type-group-item.tk-area-bar .tk-area-box > .area-provinces > .area-provinces__list {
            display: none;
            width: 21rem;
            overflow: hidden;
            box-sizing: border-box;
            padding: 6px 11px 9px 10px;
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 300;
            background: var(--bg-color3);
            border: 1px solid var(--primary-color-light1);
        }

            .type-group-nav .type-group-item.tk-area-bar .tk-area-box > .area-provinces > .area-provinces__list > .line {
                display: table-row;
                font-size: 0;
            }

                .type-group-nav .type-group-item.tk-area-bar .tk-area-box > .area-provinces > .area-provinces__list > .line > .name-type {
                    display: table-cell;
                    height: 1.5rem;
                    text-transform: uppercase;
                    word-break: keep-all;
                    white-space: nowrap;
                    font-size: .875rem;
                    text-align: right;
                    line-height: 2;
                    color: var(--font-color4);
                }

                .type-group-nav .type-group-item.tk-area-bar .tk-area-box > .area-provinces > .area-provinces__list > .line > .list {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 10px 18px;
                    box-sizing: border-box;
                    padding: .5rem 0 .5rem 1.125rem;
                    word-break: break-all;
                    white-space: initial;
                }

                    .type-group-nav .type-group-item.tk-area-bar .tk-area-box > .area-provinces > .area-provinces__list > .line > .list .province-name {
                        display: inline-block;
                        box-sizing: border-box;
                        padding: 0;
                        font-size: .875rem;
                        color: var(--font-color2);
                    }

                        .type-group-nav .type-group-item.tk-area-bar .tk-area-box > .area-provinces > .area-provinces__list > .line > .list .province-name:hover {
                            color: var(--primary-font-color1-hover);
                        }

                        .type-group-nav .type-group-item.tk-area-bar .tk-area-box > .area-provinces > .area-provinces__list > .line > .list .province-name.selected {
                            color: var(--primary-font-color1);
                        }

        .type-group-nav .type-group-item.tk-area-bar .tk-area-box > .area-provinces.area-filter > .area-provinces__list {
            width: 31.25rem;
        }

.topic-ctrl-bar {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    margin: .75rem 0 .75rem 0;
    font-size: 0;
    box-sizing: border-box;
    border-radius: var(--borderRadius2);
    padding: 0 1.25rem 0 1.25rem;
    background: var(--bg-color3);
}

    .topic-ctrl-bar .sort-ctrls {
        display: flex;
        align-items: center;
        height: 2.25rem;
        font-size: 0;
    }

@supports(gap:1.5rem) {
    .topic-ctrl-bar .sort-ctrls {
        gap: 1.5rem;
    }
}

@supports not(gap:1.5rem) {
    .topic-ctrl-bar .sort-ctrls > .sort-item:not(:last-child) {
        margin-right: 1.125rem;
    }
}

.topic-ctrl-bar .sort-ctrls .sort-item {
    display: inline-block;
    font-size: .875rem;
    font-weight: 400;
    text-align: center;
    line-height: 1;
    box-sizing: border-box;
    position: relative;
    color: var(--font-color2);
    border-color: #b2b2b2;
}

    .topic-ctrl-bar .sort-ctrls .sort-item:nth-child(3n+2) {
        border-left: .0625rem;
        border-right: .0625rem;
    }

        .topic-ctrl-bar .sort-ctrls .sort-item:nth-child(3n+2)::after {
            z-index: 220;
        }

    .topic-ctrl-bar .sort-ctrls .sort-item::after {
        content: "";
        display: none;
        width: 100%;
        height: 100%;
        position: absolute;
        top: -0.0625rem;
        left: -0.0625rem;
        border-color: #b2b2b2;
    }

    .topic-ctrl-bar .sort-ctrls .sort-item:hover {
        color: var(--primary-font-color1-hover);
    }

        .topic-ctrl-bar .sort-ctrls .sort-item:hover::after {
            display: inline-block;
        }

        .topic-ctrl-bar .sort-ctrls .sort-item:hover > i {
            color: var(--primary-font-color1-hover);
        }

    .topic-ctrl-bar .sort-ctrls .sort-item.sort-item--selected {
        color: var(--primary-font-color1);
        font-weight: 500;
    }

        .topic-ctrl-bar .sort-ctrls .sort-item.sort-item--selected::after {
            display: none;
        }

    .topic-ctrl-bar .sort-ctrls .sort-item > i {
        position: relative;
        margin-left: .25rem;
        box-sizing: border-box;
        float: right;
        height: 100%;
    }

        .topic-ctrl-bar .sort-ctrls .sort-item > i::after {
            content: "鈫�";
            font-style: normal;
            line-height: 2;
        }

.topic-ctrl-bar > .mid-box {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .topic-ctrl-bar > .mid-box .search-box {
        display: flex;
        align-items: center;
        font-size: 0;
        width: 10rem;
        height: 1.625rem;
        box-sizing: border-box;
        border: 1px solid var(--line-color1);
        background: var(--bg-color3);
        border-radius: var(--borderRadius2);
        padding: 0 .25rem 0 .5rem;
        margin-right: .625rem;
    }

        .topic-ctrl-bar > .mid-box .search-box > label, .topic-ctrl-bar > .mid-box .search-box > input, .topic-ctrl-bar > .mid-box .search-box > .icon-search1 {
            display: inline-block;
            vertical-align: middle;
            font-size: .75rem;
        }

        .topic-ctrl-bar > .mid-box .search-box > input {
            width: 80%;
            height: 100%;
            box-sizing: border-box;
            color: var(--font-color2);
        }

        .topic-ctrl-bar > .mid-box .search-box > .icon-search1 {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1rem;
            height: 1rem;
            margin-right: .25rem;
            color: #bababa;
            font-size: .875rem;
        }

.topic-ctrl-bar > .place {
    display: inline-block;
    vertical-align: middle;
    font-size: .75rem;
}

.topic-ctrl-bar .count-box {
    display: flex;
    align-items: center;
    font-size: 0;
    line-height: 1.5;
    text-align: right;
}

@supports(gap:1.25rem) {
    .topic-ctrl-bar .count-box {
        gap: 1.25rem;
    }
}

@supports not(gap:1.25rem) {
    .topic-ctrl-bar .count-box > *:not(:last-child) {
        margin-right: 1.25rem;
    }
}

.topic-ctrl-bar .count-box > i, .topic-ctrl-bar .count-box > span {
    display: inline-block;
    vertical-align: middle;
    font-size: .75rem;
    color: var(--font-color2);
}

.topic-ctrl-bar .count-box > .show-knowledge {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    color: var(--font-color2);
    line-height: 1.5;
    cursor: pointer;
    margin-left: .625rem;
}

    .topic-ctrl-bar .count-box > .show-knowledge > .show-answer__checkbox {
        margin-right: .25rem;
    }

    .topic-ctrl-bar .count-box > .show-knowledge > .show-answer__label {
        display: inline-block;
        vertical-align: middle;
        font-size: .75rem;
    }

.topic-ctrl-bar .count-box > .show-answer {
    display: inline-flex;
    align-items: center;
    color: var(--font-color2);
    font-size: 0;
    line-height: 1.5;
    cursor: pointer;
}

    .topic-ctrl-bar .count-box > .show-answer > .show-answer__checkbox {
        display: inline-block;
        vertical-align: middle;
        width: .875rem;
        height: .875rem;
        overflow: hidden;
        margin-right: .375rem;
        line-height: 1;
        position: relative;
        z-index: 9;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        box-sizing: border-box;
        border-radius: 2px;
    }

        .topic-ctrl-bar .count-box > .show-answer > .show-answer__checkbox > input[checked] + .checkbox-icon {
            background-color: var(--primary-color1);
        }

        .topic-ctrl-bar .count-box > .show-answer > .show-answer__checkbox > .checkbox-icon::before {
            border-color: var(--primary-color3);
            top: .125rem;
            left: .0625rem;
        }

    .topic-ctrl-bar .count-box > .show-answer > .show-answer__label {
        display: inline-block;
        vertical-align: middle;
        font-size: .75rem;
    }

    .topic-ctrl-bar .count-box > .show-answer > span {
        display: inline-block;
        vertical-align: middle;
    }

.topic-ctrl-bar .count-box > i {
    font-style: normal;
    font-weight: normal;
    font-size: 1rem;
    margin: 0 .625rem;
    color: #ccc;
}

.topic-ctrl-bar .count-box > span > em {
    font-style: normal;
    color: #f64e2c;
}

.topic-ctrl-bar .count-box > .look-answer-limit {
    width: 38.453%;
    text-align: right;
}

    .topic-ctrl-bar .count-box > .look-answer-limit > b {
        color: #f64e2c;
        font-weight: normal;
    }

.topic-ctrl-bar .add-all-btn {
    display: inline-block;
    vertical-align: middle;
    font-size: .75rem;
    box-sizing: border-box;
    padding: 0 .625rem;
    line-height: 2.5;
    margin-left: .625rem;
    transition-property: background-color;
    transition-duration: .3s;
    transition-timing-function: ease;
    background: #33c98d;
    color: var(--font-color5);
}

    .topic-ctrl-bar .add-all-btn:hover {
        background: #2eb57f;
    }

@media only screen and (max-width:1024px) {
    .topic-ctrl-bar {
        padding: .875rem .3125rem .5625rem .3125rem;
    }

        .topic-ctrl-bar .sort-ctrls {
            margin-right: 1rem;
        }

            .topic-ctrl-bar .sort-ctrls .sort-item {
                width: 3.5rem;
            }

        .topic-ctrl-bar .count-box {
            width: auto;
        }

            .topic-ctrl-bar .count-box > .look-answer-limit {
                width: auto;
            }

            .topic-ctrl-bar .count-box > i {
                margin: 0 .3125rem;
            }

        .topic-ctrl-bar .add-all-btn {
            margin-left: .375rem;
        }
}

@media only screen and (min-width:1025px) and (max-width:1199px) {
    .topic-ctrl-bar {
        padding: .875rem .625rem .5625rem .625rem;
    }

        .topic-ctrl-bar .sort-ctrls {
            margin-right: .625rem;
        }

        .topic-ctrl-bar .count-box {
            width: auto;
        }

            .topic-ctrl-bar .count-box > .look-answer-limit {
                width: auto;
            }

        .topic-ctrl-bar .add-all-btn {
            margin-left: .625rem;
        }
}

.more-type-select {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    background: var(--bg-color3);
    padding: .625rem 1.25rem .625rem 1.25rem;
    font-size: 0;
    position: relative;
}

@supports(gap:.25rem) {
    .more-type-select {
        gap: .25rem;
    }
}

@supports not(gap:.25rem) {
    .more-type-select > .type-name {
        margin-right: .25rem;
    }
}

.more-type-select > .type-name {
    display: inline-block;
    vertical-align: middle;
    height: 1.625rem;
    line-height: 1.857142;
    font-size: .875rem;
    text-align: right;
    font-weight: 400;
    color: var(--font-color4);
}

.more-type-select > .type-menu {
    display: inline-block;
    vertical-align: middle;
    margin-right: 1.25rem;
    border-radius: .125rem;
    font-size: .875rem;
    position: relative;
}

    .more-type-select > .type-menu > .menu-name {
        display: flex;
        align-items: center;
        min-height: 1.625rem;
        position: relative;
        cursor: pointer;
        box-sizing: border-box;
        padding: 0 1.1875rem 0 .4375rem;
        font-size: 0;
    }

        .more-type-select > .type-menu > .menu-name > .name-txt {
            display: inline-block;
            vertical-align: middle;
            height: 100%;
            box-sizing: border-box;
            font-size: .875rem;
            line-height: 1.833333;
            color: var(--font-color2);
        }

        .more-type-select > .type-menu > .menu-name > i {
            display: inline-block;
            width: .5rem;
            height: .3125rem;
            overflow: hidden;
            position: absolute;
            top: 50%;
            right: .375rem;
            z-index: 100;
            transform-origin: center center;
            transform: translateY(-50%);
            -ms-transition-property: transform;
            -ms-transition-duration: .3s;
            -ms-transition-timing-function: ease;
            transition-property: transform;
            transition-duration: .3s;
            transition-timing-function: ease;
            background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEwIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJVbmlvbiIgZD0iTTAuOTE5MTg5IDEuMjI5NzlMMS44Mzg0MyAwLjMxMDU0N0w1LjM3ODgxIDMuODUwOTNMOC45MTkxOSAwLjMxMDU0N0w5LjgzODQzIDEuMjI5NzlMNS4zNzg4MSA1LjY4OTRMMC45MTkxODkgMS4yMjk3OVoiIGZpbGw9IiMzMzMzMzMiLz4KPC9zdmc+Cg==) no-repeat;
            background-size: 100% 100%;
        }

    .more-type-select > .type-menu.type-menu--selected {
        background: var(--primary-bg-color2);
    }

        .more-type-select > .type-menu.type-menu--selected > .menu-name > .name-txt {
            color: var(--primary-font-color1);
        }

        .more-type-select > .type-menu.type-menu--selected > .menu-name > i {
            -ms-transform: rotate(180deg) translateY(50%);
            transform: rotate(180deg) translateY(50%);
            background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgOSA2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA5IDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojMjg3N0ZGO30KPC9zdHlsZT4KPHBhdGggaWQ9IlVuaW9uIiBjbGFzcz0ic3QwIiBkPSJNNC41LDUuN2w0LjUtNC41TDgsMC4zTDQuNSwzLjlMMC45LDAuM0wwLDEuMkw0LjUsNS43eiIvPgo8L3N2Zz4K) no-repeat;
        }

        .more-type-select > .type-menu.type-menu--selected[data-type="knowledgeMenu"] > .menu-name > .name-txt {
            background: var(--primary-bg-color1);
            color: var(--font-color5);
        }

    .more-type-select > .type-menu.menu-name--selected > .menu-name {
        box-sizing: border-box;
        padding: 0 1.25rem 0 .375rem;
        background: var(--primary-bg-color2);
    }

        .more-type-select > .type-menu.menu-name--selected > .menu-name > a.reset-btn {
            display: inline-block;
            vertical-align: middle;
            width: 1.25rem;
            height: 1.375rem;
            overflow: hidden;
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
        }

            .more-type-select > .type-menu.menu-name--selected > .menu-name > a.reset-btn::before {
                content: "\e78a";
                font-family: "icon" !important;
                font-size: .875rem;
                font-style: normal;
                color: var(--primary-font-color1);
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                display: inline-block;
                position: absolute;
                top: 50%;
                left: .25rem;
                transform: translateY(-50%);
                -ms-transform: translateY(-50%);
            }

        .more-type-select > .type-menu.menu-name--selected > .menu-name > .name-txt {
            color: var(--primary-font-color1);
        }

    .more-type-select > .type-menu.menu-name--selected:hover > .menu-name {
        background: var(--primary-bg-color2);
    }

        .more-type-select > .type-menu.menu-name--selected:hover > .menu-name > a.reset-btn::before {
            color: var(--primary-font-color1);
        }

        .more-type-select > .type-menu.menu-name--selected:hover > .menu-name > .name-txt {
            color: var(--primary-font-color1);
        }

    .more-type-select > .type-menu.menu-name--selected[data-type="knowledgeMenu"]:hover > .menu-name > .name-txt {
        border-color: var(--primary-color1);
        color: var(--primary-font-color1);
        background: var(--bg-color3);
    }

    .more-type-select > .type-menu > .item-list {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        min-width: 7rem;
        position: absolute;
        left: 50%;
        top: calc(100% + 0.3125rem);
        z-index: 500;
        transform: translateX(-50%);
        border-radius: var(--borderRadius2);
        box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.1);
        padding: .3125rem .75rem .3125rem .75rem;
        background: var(--bg-color3);
    }

@supports not(top:calc(100% + 0.3125rem)) {
    .more-type-select > .type-menu > .item-list {
        top: 1.9375rem;
    }
}

.more-type-select > .type-menu > .item-list::before {
    content: '';
    display: block;
    width: 100%;
    height: 20px;
    background-color: rgba(0,0,0,0);
    position: absolute;
    top: -10px;
    left: 50%;
    z-index: 499;
    transform: translateX(-50%);
    cursor: pointer;
}

.more-type-select > .type-menu > .item-list .menu-item {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 2rem;
    box-sizing: border-box;
    border-radius: var(----xkw-small-radious,4px);
    background-color: var(--bg-color3);
    word-break: keep-all;
    white-space: normal;
    color: var(--font-color2);
}

    .more-type-select > .type-menu > .item-list .menu-item > a.link-txt {
        word-break: keep-all;
        white-space: nowrap;
        color: var(--font-color2);
    }

    .more-type-select > .type-menu > .item-list .menu-item:hover > a.link-txt {
        color: var(--primary-font-color1-hover);
    }

    .more-type-select > .type-menu > .item-list .menu-item.link-txt--selected {
        background: var(--primary-bg-color2);
    }

        .more-type-select > .type-menu > .item-list .menu-item.link-txt--selected > a {
            color: var(--primary-font-color1);
        }

        .more-type-select > .type-menu > .item-list .menu-item.link-txt--selected a.link-txt {
            color: var(--primary-font-color1);
        }

            .more-type-select > .type-menu > .item-list .menu-item.link-txt--selected a.link-txt:hover {
                color: var(--primary-font-color1);
            }

.more-type-select > .type-menu > .item-list.kaofa-menu {
    min-width: 7rem;
}

    .more-type-select > .type-menu > .item-list.kaofa-menu > .wrapper {
        display: block;
        max-width: 100%;
        max-height: 12.5rem;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

        .more-type-select > .type-menu > .item-list.kaofa-menu > .wrapper > .menu-item {
            width: 100%;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: keep-all;
            white-space: nowrap;
        }

.more-type-select > .type-menu > .item-list.province-menu {
    display: table;
    width: 29.0625rem;
    left: 238%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

    .more-type-select > .type-menu > .item-list.province-menu .menu-item {
        display: table-row;
        margin-top: 0;
        padding: 0;
    }

        .more-type-select > .type-menu > .item-list.province-menu .menu-item:last-child {
            margin-bottom: 0;
        }

        .more-type-select > .type-menu > .item-list.province-menu .menu-item > .item-title {
            display: table-cell;
            vertical-align: top;
            word-break: break-all;
            white-space: nowrap;
            text-align: right;
            line-height: 2.875rem;
            color: var(--font-color4);
        }

        .more-type-select > .type-menu > .item-list.province-menu .menu-item > .link-box {
            width: 100%;
            display: table-cell;
            word-break: break-all;
            white-space: normal;
            line-height: 1.875rem;
            box-sizing: border-box;
            padding: .5rem 0 .5rem 1.125rem;
        }

            .more-type-select > .type-menu > .item-list.province-menu .menu-item > .link-box > .link-txt {
                display: block;
                float: left;
                box-sizing: border-box;
                padding: .4375rem .375rem;
                margin-right: .4375rem;
                word-break: break-all;
                white-space: nowrap;
                line-height: 1rem;
                color: var(--font-color2);
            }

                .more-type-select > .type-menu > .item-list.province-menu .menu-item > .link-box > .link-txt:hover {
                    color: var(--primary-font-color1-hover);
                }

                .more-type-select > .type-menu > .item-list.province-menu .menu-item > .link-box > .link-txt.link-txt--selected {
                    color: var(--primary-font-color1);
                }

.more-type-select > .type-menu > .item-list.city-menu {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: calc(75rem * 0.76);
    left: -200px;
    transform: none;
    padding: .375rem .25rem;
    min-width: 47.8125rem;
    word-break: break-all;
    white-space: normal;
}

    .more-type-select > .type-menu > .item-list.city-menu .menu-item {
        display: inline-block;
        box-sizing: border-box;
        padding: .375rem .625rem;
        height: auto;
    }

        .more-type-select > .type-menu > .item-list.city-menu .menu-item.link-txt--selected {
            background-color: var(--bg-color3);
        }

.more-type-select > .type-menu > .item-list.knowledge-menu {
    width: auto;
    max-width: 144%;
    overflow: hidden;
    max-height: 480px;
    overflow-y: auto;
}

    .more-type-select > .type-menu > .item-list.knowledge-menu .menu-item {
        display: block;
        overflow: hidden;
        word-break: keep-all;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.more-type-select > .type-menu[data-type="knowledgeMenu"] > .menu-name > .name-txt {
    color: #e4393c;
}

.more-type-select > b {
    display: inline-block;
    vertical-align: middle;
    font-size: .875rem;
    font-weight: normal;
    margin-right: 1.875rem;
    color: #dcdcdc;
}

.more-type-select > .filter-checkbox {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    font-size: 0;
    margin-right: .625rem;
    margin-right: 0;
}

    .more-type-select > .filter-checkbox > i {
        display: inline-block;
        vertical-align: middle;
        width: .875rem;
        height: .875rem;
        box-sizing: border-box;
        border-width: .0625rem;
        border-style: solid;
        border-radius: .125rem;
        margin-right: .25rem;
        font-size: .75rem;
        font-style: normal;
        position: relative;
        background: var(--bg-color3);
        border-color: var(--font-color4);
        pointer-events: none;
    }

    .more-type-select > .filter-checkbox > span {
        display: inline-block;
        vertical-align: middle;
        pointer-events: none;
        font-size: .75rem;
        color: var(--font-color2);
    }

    .more-type-select > .filter-checkbox.checked > i {
        border-color: var(--primary-color1);
    }

        .more-type-select > .filter-checkbox.checked > i::before {
            content: "";
            position: absolute;
            top: 0;
            left: .25rem;
            width: .25rem;
            height: .5rem;
            border-right: .125rem solid var(--primary-color1);
            border-bottom: .125rem solid var(--primary-color1);
            -webkit-transform: rotate(45deg) scale(1);
            -ms-transform: rotate(45deg) scale(1);
            transform: rotate(45deg) scale(1);
            border-color: var(--primary-color1);
            opacity: 1;
            filter: alpha(opacity=100);
        }

    .more-type-select > .filter-checkbox.new-ques-filter.new {
        position: relative;
    }

        .more-type-select > .filter-checkbox.new-ques-filter.new::after {
            content: "";
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.875rem;
            height: 1rem;
            box-sizing: border-box;
            background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMzAgMTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwIDE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0ZFNDUwOTt9Cgkuc3Qxe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+Cjx0aXRsZT5uZXc8L3RpdGxlPgo8ZyBpZD0i57uE5Y235ouN5pCc5a6j5LygIj4KCTxnIGlkPSLnu4TljbfpppbpobUt55m75b2V5aSH5Lu9IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQwNy4wMDAwMDAsIC00OC4wMDAwMDApIj4KCQk8ZyBpZD0ibmV3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDA3LjAwMDAwMCwgNDguNzQ0MzQ3KSI+CgkJCTxwYXRoIGlkPSLnn6nlvaIiIGNsYXNzPSJzdDAiIGQ9Ik02LDBoMTYuNUMyNi42LDAsMzAsMy40LDMwLDcuNVMyNi42LDE1LDIyLjUsMTVIMGwwLDBWNkMwLDIuNywyLjcsMCw2LDB6Ii8+CgkJCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik01LjIsMTFWNy4xYzAtMC41LDAuMS0wLjgsMC40LTEuMWMwLjItMC4yLDAuNi0wLjQsMC45LTAuNFM3LjIsNS44LDcuNCw2YzAuMiwwLjIsMC40LDAuNiwwLjQsMS4xVjExaDEuMwoJCQkJVjYuNmMwLTAuOC0wLjMtMS4zLTAuNy0xLjdDOCw0LjUsNy41LDQuMyw2LjksNC4zYy0wLjcsMC0xLjMsMC4zLTEuNywwLjhoMFY0LjRIMy45VjExSDUuMnogTTEzLjQsMTEuMWMwLjksMCwxLjctMC4zLDIuNC0xLjEKCQkJCWwtMS0wLjhjLTAuNCwwLjQtMC45LDAuNi0xLjQsMC42Yy0wLjUsMC0wLjgtMC4xLTEuMS0wLjRjLTAuMy0wLjMtMC41LTAuNy0wLjUtMS4yaDQuMVY3LjFjMC0wLjktMC4zLTEuNS0wLjgtMgoJCQkJYy0wLjUtMC41LTEuMi0wLjctMS45LTAuN2MtMC4zLDAtMC42LDAuMS0xLDAuMmMtMC4zLDAuMS0wLjYsMC4zLTAuOSwwLjZjLTAuMywwLjMtMC41LDAuNi0wLjYsMWMtMC4yLDAuNC0wLjIsMS0wLjIsMS42CgkJCQljMCwwLjcsMC4xLDEuMiwwLjMsMS43YzAuMiwwLjQsMC40LDAuOCwwLjcsMWMwLjEsMC4xLDAuMywwLjIsMC41LDAuM2MwLjIsMC4xLDAuMywwLjIsMC41LDAuMkMxMi44LDExLDEzLjEsMTEuMSwxMy40LDExLjF6CgkJCQkgTTE0LjYsNy4xaC0yLjhjMC0wLjUsMC4yLTAuOSwwLjQtMS4yYzAuMy0wLjIsMC42LTAuNCwxLTAuNHMwLjcsMC4xLDEsMC40QzE0LjUsNi4yLDE0LjYsNi42LDE0LjYsNy4xeiBNMTkuOCwxMWwxLjQtNC42aDAKCQkJCWwxLjQsNC42aDEuMmwyLjEtNi42aC0xLjRMMjMuMiw5aDBsLTEuNS00LjZoLTFMMTkuMiw5aDBsLTEuMy00LjZoLTEuNGwyLjEsNi42SDE5Ljh6Ii8+CgkJPC9nPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
            position: absolute;
            top: -1rem;
            right: -1.125rem;
        }

    .more-type-select > .filter-checkbox.new-ques-filter + .new-quest-explain {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        font-size: .875rem;
        color: var(--font-color4);
    }

        .more-type-select > .filter-checkbox.new-ques-filter + .new-quest-explain:hover {
            color: var(--primary-font-color1-hover);
        }

            .more-type-select > .filter-checkbox.new-ques-filter + .new-quest-explain:hover > .tip {
                left: 160%;
                opacity: 1;
            }

        .more-type-select > .filter-checkbox.new-ques-filter + .new-quest-explain::before {
            display: inline-block;
            position: relative;
            z-index: 2;
            line-height: 1;
        }

        .more-type-select > .filter-checkbox.new-ques-filter + .new-quest-explain::after {
            content: '';
            display: inline-block;
            width: 180%;
            height: 180%;
            position: absolute;
            top: -40%;
            left: -40%;
            z-index: 1;
        }

        .more-type-select > .filter-checkbox.new-ques-filter + .new-quest-explain > .tip {
            display: block;
            box-sizing: border-box;
            padding: .25rem;
            border-radius: .25rem;
            background-color: var(--primary-color-light1);
            pointer-events: none;
            font-size: .75rem;
            word-break: keep-all;
            white-space: nowrap;
            color: var(--primary-font-color1);
            position: absolute;
            top: 50%;
            left: 400%;
            z-index: 3;
            opacity: 0;
            transform: translateY(-50%);
            transition-property: left,opacity;
            transition-duration: .5s;
            transition-timing-function: ease;
        }

            .more-type-select > .filter-checkbox.new-ques-filter + .new-quest-explain > .tip::before {
                content: '';
                width: 10px;
                height: 10px;
                border-radius: 2px;
                background-color: var(--primary-color-light1);
                position: absolute;
                top: 50%;
                left: -3px;
                z-index: -1;
                transform: translateY(-50%) rotate(45deg);
            }

    .more-type-select > .filter-checkbox.checked > .checkbox-icon {
        background-color: var(--primary-color1);
    }

        .more-type-select > .filter-checkbox.checked > .checkbox-icon::before {
            width: .25rem;
            height: .5rem;
            border-color: var(--primary-color3);
            top: 0;
            left: .1875rem;
        }

.more-type-select > .classic-filter {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    font-size: 0;
    margin-right: .625rem;
}

    .more-type-select > .classic-filter > i {
        display: inline-block;
        vertical-align: middle;
        width: .875rem;
        height: .875rem;
        box-sizing: border-box;
        border-width: .0625rem;
        border-style: solid;
        border-radius: .125rem;
        margin-right: .25rem;
        font-size: .75rem;
        font-style: normal;
        position: relative;
        background: var(--bg-color3);
        border-color: var(--font-color4);
        pointer-events: none;
    }

    .more-type-select > .classic-filter > span {
        display: inline-block;
        vertical-align: middle;
        pointer-events: none;
        font-size: .75rem;
        color: var(--font-color2);
    }

    .more-type-select > .classic-filter.checked > i {
        border-color: var(--primary-color1);
    }

        .more-type-select > .classic-filter.checked > i::before {
            content: "";
            position: absolute;
            top: 0;
            left: .25rem;
            width: .25rem;
            height: .5rem;
            border-right: .125rem solid var(--primary-color1);
            border-bottom: .125rem solid var(--primary-color1);
            -webkit-transform: rotate(45deg) scale(1);
            -ms-transform: rotate(45deg) scale(1);
            transform: rotate(45deg) scale(1);
            border-color: var(--primary-color1);
            opacity: 1;
            filter: alpha(opacity=100);
        }

.title-menu {
    display: flex;
    width: 100%;
    min-height: 2.375rem;
    box-sizing: border-box;
    padding: 0 1.25rem;
    font-size: 0;
    line-height: 1;
    position: relative;
}

@supports(gap:.25rem) {
    .title-menu {
        gap: .25rem;
    }
}

@supports not(gap:.25rem) {
    .title-menu > .icon {
        margin-right: .25rem;
    }
}

.title-menu > .icon {
    display: inline-block;
    vertical-align: middle;
    width: .875rem;
    height: .875rem;
    overflow: hidden;
    margin-top: .375rem;
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB4PSI0IiB5PSIyIiB3aWR0aD0iNiIgaGVpZ2h0PSIxIiByeD0iMC41IiBmaWxsPSIjMjg3N0ZGIi8+CjxyZWN0IHg9IjQiIHk9IjUiIHdpZHRoPSI2IiBoZWlnaHQ9IjEiIHJ4PSIwLjUiIGZpbGw9IiMyODc3RkYiLz4KPHJlY3QgeD0iNCIgeT0iOCIgd2lkdGg9IjYiIGhlaWdodD0iMSIgcng9IjAuNSIgZmlsbD0iIzI4NzdGRiIvPgo8cmVjdCB4PSI0IiB5PSIxMSIgd2lkdGg9IjYiIGhlaWdodD0iMSIgcng9IjAuNSIgZmlsbD0iIzI4NzdGRiIvPgo8L3N2Zz4K) no-repeat;
}

.title-menu > .title-name {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    font-size: 0;
    box-sizing: border-box;
    position: relative;
}

    .title-menu > .title-name > .wrapper {
        flex: 1;
        display: flex;
        box-sizing: border-box;
        padding-right: 1.5rem;
        cursor: pointer;
        font-size: 0;
        word-break: break-all;
        white-space: normal;
        position: relative;
    }

        .title-menu > .title-name > .wrapper > .title-box {
            flex: 1;
            display: inline-block;
            line-height: 1.5;
            font-size: 0;
            color: var(--primary-color1);
            position: relative;
        }

            .title-menu > .title-name > .wrapper > .title-box > .version-name, .title-menu > .title-name > .wrapper > .title-box > .edu-name {
                font-size: 1rem;
                word-break: break-all;
                white-space: normal;
                position: relative;
            }

            .title-menu > .title-name > .wrapper > .title-box > i {
                display: inline-block;
                width: 6px;
                height: 9px;
                margin: 0 .5rem;
                overflow: hidden;
                font-size: 0;
                position: relative;
                margin-top: 6px;
            }

                .title-menu > .title-name > .wrapper > .title-box > i::before {
                    content: '';
                    width: 5px;
                    height: 5px;
                    border: 1px solid #ccc;
                    border-bottom: 0;
                    border-left: 0;
                    transform-origin: center center;
                    position: absolute;
                    top: 50%;
                    left: -2px;
                    transform: translateY(-50%) rotate(45deg);
                    z-index: 10;
                }

        .title-menu > .title-name > .wrapper .title-arrow {
            display: inline-block;
            width: .5625rem;
            height: .375rem;
            position: absolute;
            top: .625rem;
            right: 0;
            transform-origin: center center;
            transition-property: transform;
            transition-duration: .3s;
            transition-timing-function: ease;
        }

            .title-menu > .title-name > .wrapper .title-arrow::after {
                content: '';
                display: inline-block;
                width: .5625rem;
                height: .375rem;
                overflow: hidden;
                background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgOSA2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA5IDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojMjg3N0ZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTcuNywwLjRjMC45LDAsMS40LDEuMSwwLjcsMS43TDUuMyw1LjNjLTAuNCwwLjQtMSwwLjQtMS40LDBMMC42LDIuMmMtMC42LTAuNi0wLjItMS44LDAuNy0xLjhINy43eiIvPgo8L3N2Zz4K) no-repeat;
                position: absolute;
                top: 0;
                right: 0;
            }

    .title-menu > .title-name.new::before {
        content: '';
        display: inline-block;
        width: 2rem;
        height: 1rem;
        background: url(../assets/nav_new.png) no-repeat;
        position: absolute;
        top: -0.75rem;
        right: .625rem;
    }

    .title-menu > .title-name:hover .title-arrow {
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .title-menu > .title-name:hover::after {
        content: '';
        width: 120%;
        height: 1.25rem;
        position: absolute;
        top: 100%;
        left: -1.5rem;
    }

.title-menu:hover > .title-name > .title-menu__menu-box {
    display: flex;
}

.title-menu > .title-name .title-menu__menu-box {
    display: none;
    flex-direction: column;
    width: 75rem;
    box-sizing: border-box;
    padding: .75rem;
    border-radius: var(--borderRadius2);
    background: var(--bg-color3);
    box-shadow: -2px 2px 10px 0 rgba(0,0,0,0.1);
    position: absolute;
    top: 102%;
    left: -2.5rem;
    z-index: 900;
}

@supports(gap:.75rem) {
    .title-menu > .title-name .title-menu__menu-box {
        gap: .75rem;
    }
}

@supports not(gap:.75rem) {
    .title-menu > .title-name .title-menu__menu-box > .title-menu__menu-item:not(:last-child) {
        margin-bottom: .75rem;
    }
}

.title-menu > .title-name .title-menu__menu-box > .arrow {
    display: inline-block;
    width: .5rem;
    height: 1rem;
    position: absolute;
    top: -0.5rem;
    left: 3rem;
}

    .title-menu > .title-name .title-menu__menu-box > .arrow::after {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 .5rem .5rem .5rem;
        border-color: transparent transparent var(--primary-color3) transparent;
        position: absolute;
        top: .0625rem;
        left: -0.5rem;
    }

    .title-menu > .title-name .title-menu__menu-box > .arrow::before {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 .5rem .5rem .5rem;
        border-color: transparent transparent var(--primary-color1) transparent;
        position: absolute;
        top: 0;
        left: -0.5rem;
    }

.title-menu > .title-name .title-menu__menu-box > .title-menu__menu-item {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: .25rem 0 0 0;
    font-size: 0;
    cursor: pointer;
}

    .title-menu > .title-name .title-menu__menu-box > .title-menu__menu-item > .menu-item__title {
        display: inline-flex;
        align-items: center;
        height: 2rem;
        margin-right: .625rem;
        color: var(--font-color4);
        font-size: .875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1;
    }

    .title-menu > .title-name .title-menu__menu-box > .title-menu__menu-item > .menu-item__navs {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        font-size: 0;
    }

@supports(gap:.5rem .25rem) {
    .title-menu > .title-name .title-menu__menu-box > .title-menu__menu-item > .menu-item__navs {
        gap: .5rem .25rem;
    }
}

@supports not(gap:.5rem .25rem) {
    .title-menu > .title-name .title-menu__menu-box > .title-menu__menu-item > .menu-item__navs > .item {
        margin-right: .25rem;
        margin-bottom: .5rem;
    }
}

.title-menu > .title-name .title-menu__menu-box > .title-menu__menu-item > .menu-item__navs > .item {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    box-sizing: border-box;
    padding: 0 1rem;
    color: var(--font-color2);
    font-size: .875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    word-break: keep-all;
    white-space: nowrap;
    position: relative;
}

    .title-menu > .title-name .title-menu__menu-box > .title-menu__menu-item > .menu-item__navs > .item:hover {
        color: var(--primary-font-color1-hover);
    }

    .title-menu > .title-name .title-menu__menu-box > .title-menu__menu-item > .menu-item__navs > .item.selected {
        border-radius: var(--borderRadius2);
        background: var(--primary-color-light1);
        color: var(--primary-font-color1);
    }

    .title-menu > .title-name .title-menu__menu-box > .title-menu__menu-item > .menu-item__navs > .item.new {
        position: relative;
    }

        .title-menu > .title-name .title-menu__menu-box > .title-menu__menu-item > .menu-item__navs > .item.new::after {
            content: "";
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.875rem;
            height: 1rem;
            box-sizing: border-box;
            background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMzAgMTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwIDE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0ZFNDUwOTt9Cgkuc3Qxe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+Cjx0aXRsZT5uZXc8L3RpdGxlPgo8ZyBpZD0i57uE5Y235ouN5pCc5a6j5LygIj4KCTxnIGlkPSLnu4TljbfpppbpobUt55m75b2V5aSH5Lu9IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQwNy4wMDAwMDAsIC00OC4wMDAwMDApIj4KCQk8ZyBpZD0ibmV3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDA3LjAwMDAwMCwgNDguNzQ0MzQ3KSI+CgkJCTxwYXRoIGlkPSLnn6nlvaIiIGNsYXNzPSJzdDAiIGQ9Ik02LDBoMTYuNUMyNi42LDAsMzAsMy40LDMwLDcuNVMyNi42LDE1LDIyLjUsMTVIMGwwLDBWNkMwLDIuNywyLjcsMCw2LDB6Ii8+CgkJCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik01LjIsMTFWNy4xYzAtMC41LDAuMS0wLjgsMC40LTEuMWMwLjItMC4yLDAuNi0wLjQsMC45LTAuNFM3LjIsNS44LDcuNCw2YzAuMiwwLjIsMC40LDAuNiwwLjQsMS4xVjExaDEuMwoJCQkJVjYuNmMwLTAuOC0wLjMtMS4zLTAuNy0xLjdDOCw0LjUsNy41LDQuMyw2LjksNC4zYy0wLjcsMC0xLjMsMC4zLTEuNywwLjhoMFY0LjRIMy45VjExSDUuMnogTTEzLjQsMTEuMWMwLjksMCwxLjctMC4zLDIuNC0xLjEKCQkJCWwtMS0wLjhjLTAuNCwwLjQtMC45LDAuNi0xLjQsMC42Yy0wLjUsMC0wLjgtMC4xLTEuMS0wLjRjLTAuMy0wLjMtMC41LTAuNy0wLjUtMS4yaDQuMVY3LjFjMC0wLjktMC4zLTEuNS0wLjgtMgoJCQkJYy0wLjUtMC41LTEuMi0wLjctMS45LTAuN2MtMC4zLDAtMC42LDAuMS0xLDAuMmMtMC4zLDAuMS0wLjYsMC4zLTAuOSwwLjZjLTAuMywwLjMtMC41LDAuNi0wLjYsMWMtMC4yLDAuNC0wLjIsMS0wLjIsMS42CgkJCQljMCwwLjcsMC4xLDEuMiwwLjMsMS43YzAuMiwwLjQsMC40LDAuOCwwLjcsMWMwLjEsMC4xLDAuMywwLjIsMC41LDAuM2MwLjIsMC4xLDAuMywwLjIsMC41LDAuMkMxMi44LDExLDEzLjEsMTEuMSwxMy40LDExLjF6CgkJCQkgTTE0LjYsNy4xaC0yLjhjMC0wLjUsMC4yLTAuOSwwLjQtMS4yYzAuMy0wLjIsMC42LTAuNCwxLTAuNHMwLjcsMC4xLDEsMC40QzE0LjUsNi4yLDE0LjYsNi42LDE0LjYsNy4xeiBNMTkuOCwxMWwxLjQtNC42aDAKCQkJCWwxLjQsNC42aDEuMmwyLjEtNi42aC0xLjRMMjMuMiw5aDBsLTEuNS00LjZoLTFMMTkuMiw5aDBsLTEuMy00LjZoLTEuNGwyLjEsNi42SDE5Ljh6Ii8+CgkJPC9nPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
            position: absolute;
            top: -0.25rem;
            right: 0;
        }

.title-menu.step-test {
    align-items: center;
    gap: 10px;
}

    .title-menu.step-test > .icon {
        width: 1rem;
        height: 1rem;
        background: unset;
        margin-top: 0;
        color: var(--primary-color1);
    }

        .title-menu.step-test > .icon::before {
            content: "\e690";
        }

    .title-menu.step-test > .title-name > .wrapper > .title-box {
        display: flex;
        width: 100%;
    }

        .title-menu.step-test > .title-name > .wrapper > .title-box > span {
            flex: 1;
            display: inline-flex;
            font-size: 1rem;
            word-break: break-all;
            white-space: normal;
            position: relative;
        }

.subject-box {
    width: 100%;
    height: 3.75rem;
    font-size: 0;
    line-height: 4.5;
    box-sizing: border-box;
    border-bottom: 1px solid #dcdcdc;
}

    .subject-box > .icon {
        margin-left: .75rem;
        margin-right: .625rem;
        font-size: .875rem;
    }

    .subject-box > .subject-name {
        max-width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: keep-all;
        white-space: normal;
        font-size: .875rem;
        text-align: left;
    }

    .subject-box > .icon, .subject-box > .subject-name {
        display: inline-block;
        vertical-align: middle;
        color: var(--primary-font-color1);
    }

@keyframes skeleton-loading {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

.skeleton {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

    .skeleton .skeleton-item {
        display: flex;
        flex-direction: column;
        background-color: white;
        border-radius: .1875rem;
        box-sizing: border-box;
        padding: 1rem 1.25rem 0 1.25rem;
        overflow: hidden;
    }

        .skeleton .skeleton-item > .line-short {
            display: inline-block;
            width: 20%;
            height: 1rem;
            background-color: #f2f2f2;
            box-sizing: border-box;
            border-radius: .1875rem;
            margin-bottom: 1rem;
            background-image: linear-gradient(90deg,#f2f2f2 25%,#fafafa 37%,#f2f2f2 63%);
            background-size: 400% 100%;
            background-position: 100% 50%;
            animation: skeleton-loading 1.4s ease infinite;
        }

        .skeleton .skeleton-item > .bar {
            display: flex;
            align-items: center;
        }

            .skeleton .skeleton-item > .bar .line-long {
                display: inline-block;
                width: 60%;
                height: 1rem;
                background-color: #f2f2f2;
                box-sizing: border-box;
                border-radius: .1875rem;
                margin-bottom: 1rem;
                background-image: linear-gradient(90deg,#f2f2f2 25%,#fafafa 37%,#f2f2f2 63%);
                background-size: 400% 100%;
                background-position: 100% 50%;
                animation: skeleton-loading 1.4s ease infinite;
            }

            .skeleton .skeleton-item > .bar .r-wrapper {
                flex: 1;
                display: flex;
                justify-content: flex-end;
                gap: .625rem;
            }

                .skeleton .skeleton-item > .bar .r-wrapper .line-rest {
                    display: inline-block;
                    width: 3.75rem;
                    height: 1rem;
                    background-color: #f2f2f2;
                    box-sizing: border-box;
                    border-radius: .1875rem;
                    margin-bottom: 1rem;
                    background-image: linear-gradient(90deg,#f2f2f2 25%,#fafafa 37%,#f2f2f2 63%);
                    background-size: 400% 100%;
                    background-position: 100% 50%;
                    animation: skeleton-loading 1.4s ease infinite;
                }

        .skeleton .skeleton-item > .box {
            display: flex;
            flex-direction: column;
        }

            .skeleton .skeleton-item > .box .line-long {
                display: inline-block;
                width: 60%;
                height: 1rem;
                background-color: #f2f2f2;
                box-sizing: border-box;
                border-radius: .1875rem;
                margin-bottom: 1rem;
                background-image: linear-gradient(90deg,#f2f2f2 25%,#fafafa 37%,#f2f2f2 63%);
                background-size: 400% 100%;
                background-position: 100% 50%;
                animation: skeleton-loading 1.4s ease infinite;
            }

            .skeleton .skeleton-item > .box .line-mid {
                display: inline-block;
                width: 40%;
                height: 1rem;
                background-color: #f2f2f2;
                box-sizing: border-box;
                border-radius: .1875rem;
                margin-bottom: 1rem;
                background-image: linear-gradient(90deg,#f2f2f2 25%,#fafafa 37%,#f2f2f2 63%);
                background-size: 400% 100%;
                background-position: 100% 50%;
                animation: skeleton-loading 1.4s ease infinite;
            }

            .skeleton .skeleton-item > .box .line-short {
                display: inline-block;
                width: 20%;
                height: 1rem;
                background-color: #f2f2f2;
                box-sizing: border-box;
                border-radius: .1875rem;
                margin-bottom: 1rem;
                background-image: linear-gradient(90deg,#f2f2f2 25%,#fafafa 37%,#f2f2f2 63%);
                background-size: 400% 100%;
                background-position: 100% 50%;
                animation: skeleton-loading 1.4s ease infinite;
            }

        .skeleton .skeleton-item > .bottom {
            display: flex;
            align-items: center;
        }

            .skeleton .skeleton-item > .bottom > .l-wrapper {
                flex: 3;
                display: flex;
                align-items: center;
                gap: .625rem;
            }

                .skeleton .skeleton-item > .bottom > .l-wrapper .line-rect {
                    display: inline-block;
                    width: 3.75rem;
                    height: 1rem;
                    background-color: #f2f2f2;
                    box-sizing: border-box;
                    border-radius: .1875rem;
                    margin-bottom: 1rem;
                    background-image: linear-gradient(90deg,#f2f2f2 25%,#fafafa 37%,#f2f2f2 63%);
                    background-size: 400% 100%;
                    background-position: 100% 50%;
                    animation: skeleton-loading 1.4s ease infinite;
                }

            .skeleton .skeleton-item > .bottom > .r-wrapper {
                flex: 2;
                display: flex;
                justify-content: flex-end;
                gap: .625rem;
            }

                .skeleton .skeleton-item > .bottom > .r-wrapper .line-rect {
                    display: inline-block;
                    width: 3rem;
                    height: 1rem;
                    background-color: #f2f2f2;
                    box-sizing: border-box;
                    border-radius: .1875rem;
                    margin-bottom: 1rem;
                    background-image: linear-gradient(90deg,#f2f2f2 25%,#fafafa 37%,#f2f2f2 63%);
                    background-size: 400% 100%;
                    background-position: 100% 50%;
                    animation: skeleton-loading 1.4s ease infinite;
                }

#videoExplainPlayer {
    width: 45rem;
    height: 25.3125rem;
    overflow: hidden;
}

.tk-dialog > .wrapper > .box.video-explain-pop {
    overflow: unset;
    position: relative;
    box-shadow: none;
}

    .tk-dialog > .wrapper > .box.video-explain-pop > .dialog__cnt {
        padding: 0;
    }

        .tk-dialog > .wrapper > .box.video-explain-pop > .dialog__cnt > .video-explain-box {
            border-radius: .25rem;
        }

            .tk-dialog > .wrapper > .box.video-explain-pop > .dialog__cnt > .video-explain-box .close-btn {
                display: inline-block;
                width: 1rem;
                height: 1rem;
                background: url(../assets/close_gray_16x15.png) no-repeat;
                position: absolute;
                top: .125rem;
                right: -2rem;
                z-index: 100;
            }

.tk-quest-item > .exam-item__info > .ctrl-box > .video-explain-btn {
    display: inline-block;
    vertical-align: middle;
    background: transparent;
    border: 0;
    box-sizing: border-box;
    margin-right: 1.25rem;
    font-size: 0;
    line-height: 2.125rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    line-height: unset;
}

    .tk-quest-item > .exam-item__info > .ctrl-box > .video-explain-btn > .icon {
        display: inline-block;
        vertical-align: middle;
        margin-right: .25rem;
        font-size: .75rem;
        color: var(--primary-font-color1);
    }

    .tk-quest-item > .exam-item__info > .ctrl-box > .video-explain-btn > .btn-txt {
        display: inline-block;
        vertical-align: middle;
        font-size: .75rem;
        color: var(--primary-font-color1);
    }

    .tk-quest-item > .exam-item__info > .ctrl-box > .video-explain-btn:hover > .icon {
        color: var(--primary-font-color1-hover);
    }

    .tk-quest-item > .exam-item__info > .ctrl-box > .video-explain-btn:hover > .btn-txt {
        color: var(--primary-font-color1-hover);
    }

    .tk-quest-item > .exam-item__info > .ctrl-box > .video-explain-btn.disabled {
        cursor: not-allowed;
    }

        .tk-quest-item > .exam-item__info > .ctrl-box > .video-explain-btn.disabled > .icon {
            color: var(--font-color4);
        }

        .tk-quest-item > .exam-item__info > .ctrl-box > .video-explain-btn.disabled > .btn-txt {
            color: var(--font-color4);
        }

    .tk-quest-item > .exam-item__info > .ctrl-box > .video-explain-btn > i {
        line-height: .8125rem;
    }

.quest-content .ctrl-box .btn-box > .video-explain-btn {
    display: inline-block;
    vertical-align: middle;
    background: transparent;
    border: 0;
    box-sizing: border-box;
    margin-right: 1.25rem;
    font-size: 0;
    line-height: 3.1875rem;
    cursor: pointer;
}

    .quest-content .ctrl-box .btn-box > .video-explain-btn > .icon {
        display: inline-block;
        vertical-align: middle;
        margin-right: .25rem;
        font-size: .875rem;
        color: var(--primary-font-color1);
    }

    .quest-content .ctrl-box .btn-box > .video-explain-btn > .btn-txt {
        display: inline-block;
        vertical-align: middle;
        font-size: .875rem;
        color: var(--primary-font-color1);
    }

    .quest-content .ctrl-box .btn-box > .video-explain-btn:hover > .icon {
        color: var(--primary-font-color1-hover);
    }

    .quest-content .ctrl-box .btn-box > .video-explain-btn:hover > .btn-txt {
        color: var(--primary-font-color1-hover);
    }

    .quest-content .ctrl-box .btn-box > .video-explain-btn.disabled {
        cursor: not-allowed;
    }

        .quest-content .ctrl-box .btn-box > .video-explain-btn.disabled > .icon {
            color: var(--font-color4);
        }

        .quest-content .ctrl-box .btn-box > .video-explain-btn.disabled > .btn-txt {
            color: var(--font-color4);
        }

.zhonggao-detail .exam-list .sec-item .sec-list .tk-quest-item > .exam-item__info > .ctrl-box > .video-explain-btn {
    display: inline-block;
    vertical-align: middle;
    background: transparent;
    border: 0;
    box-sizing: border-box;
    margin-right: 1.25rem;
    font-size: 0;
    line-height: 2.25rem;
    cursor: pointer;
}

    .zhonggao-detail .exam-list .sec-item .sec-list .tk-quest-item > .exam-item__info > .ctrl-box > .video-explain-btn > .icon {
        display: inline-block;
        vertical-align: middle;
        margin-right: .25rem;
        font-size: .75rem;
        color: var(--primary-font-color1);
    }

    .zhonggao-detail .exam-list .sec-item .sec-list .tk-quest-item > .exam-item__info > .ctrl-box > .video-explain-btn > .btn-txt {
        display: inline-block;
        vertical-align: middle;
        font-size: .75rem;
        color: var(--primary-font-color1);
    }

    .zhonggao-detail .exam-list .sec-item .sec-list .tk-quest-item > .exam-item__info > .ctrl-box > .video-explain-btn:hover > .icon {
        color: var(--primary-font-color1-hover);
    }

    .zhonggao-detail .exam-list .sec-item .sec-list .tk-quest-item > .exam-item__info > .ctrl-box > .video-explain-btn:hover > .btn-txt {
        color: var(--primary-font-color1-hover);
    }

    .zhonggao-detail .exam-list .sec-item .sec-list .tk-quest-item > .exam-item__info > .ctrl-box > .video-explain-btn.disabled {
        cursor: not-allowed;
    }

        .zhonggao-detail .exam-list .sec-item .sec-list .tk-quest-item > .exam-item__info > .ctrl-box > .video-explain-btn.disabled > .icon {
            color: var(--font-color4);
        }

        .zhonggao-detail .exam-list .sec-item .sec-list .tk-quest-item > .exam-item__info > .ctrl-box > .video-explain-btn.disabled > .btn-txt {
            color: var(--font-color4);
        }

.chapter-select-page .left-box {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-top: 1.25rem;
    background: var(--font-color5);
    width: 16.5rem;
    min-width: 16.5rem;
    border-radius: var(--borderRadius2);
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

    .chapter-select-page .left-box .fix-box {
        display: block;
        position: relative;
    }

        .chapter-select-page .left-box .fix-box .tree-box {
            box-sizing: border-box;
            padding: 10px;
            overflow: hidden;
            background: var(--font-color5);
        }

    .chapter-select-page .left-box .tree-box {
        width: 100%;
        background: var(--font-color5);
    }

        .chapter-select-page .left-box .tree-box .tk-tree .tree-node.tree-children.has-knowledge .tree-ul .tree-leaf .tree-node-name .tree-anchor {
            color: var(--font-color3);
        }

            .chapter-select-page .left-box .tree-box .tk-tree .tree-node.tree-children.has-knowledge .tree-ul .tree-leaf .tree-node-name .tree-anchor:hover {
                color: var(--primary-font-color1-hover);
            }

        .chapter-select-page .left-box .tree-box .tk-tree .tree-node.tree-children.has-knowledge .tree-ul .tree-leaf.tree-node--selected > .tree-node-name .tree-anchor {
            color: var(--primary-font-color1);
        }

            .chapter-select-page .left-box .tree-box .tk-tree .tree-node.tree-children.has-knowledge .tree-ul .tree-leaf.tree-node--selected > .tree-node-name .tree-anchor:hover {
                color: var(--primary-font-color1-hover);
            }

.practice-rec {
    display: block;
    margin-bottom: .75rem;
    border-radius: .1875rem;
    overflow: hidden;
}

    .practice-rec .practice-entry {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 4.125rem;
        width: 100%;
        box-sizing: border-box;
        border-radius: var(--borderRadius2);
        padding: 0 3.25rem 0 .625rem;
        border-bottom: .0625rem dashed var(--line-color1);
        background: var(--bg-color3);
        position: relative;
    }

        .practice-rec .practice-entry:last-child {
            border-bottom: 0;
        }

        .practice-rec .practice-entry .entry-list {
            display: flex;
            align-items: center;
            max-width: 84%;
        }

            .practice-rec .practice-entry .entry-list > .item {
                display: inline-block;
                vertical-align: middle;
                max-width: 10.1875rem;
                box-sizing: border-box;
                padding: .375rem .625rem;
                margin: 0 .625rem;
                background: #f2f2f2;
                border-radius: .8125rem;
                font-size: 0;
                text-align: center;
                word-break: keep-all;
                white-space: nowrap;
            }

                .practice-rec .practice-entry .entry-list > .item > .icon {
                    display: inline-block;
                    vertical-align: middle;
                    width: .8125rem;
                    height: .8125rem;
                    overflow: hidden;
                    font-size: .75rem;
                    text-align: center;
                    color: var(--primary-font-color1);
                    margin-right: .5625rem;
                }

                .practice-rec .practice-entry .entry-list > .item > span {
                    display: inline-block;
                    vertical-align: middle;
                    max-width: 87%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-break: keep-all;
                    white-space: nowrap;
                    font-size: .875rem;
                    color: var(--primary-font-color1);
                    line-height: 1;
                }

                .practice-rec .practice-entry .entry-list > .item:hover > .icon {
                    color: var(--primary-font-color1-hover);
                }

                .practice-rec .practice-entry .entry-list > .item:hover > span {
                    color: var(--primary-font-color1-hover);
                }

        .practice-rec .practice-entry .goto-smart {
            display: flex;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
            width: 7.6875rem;
            height: 1.625rem;
            background: var(--primary-bg-color1);
            border-radius: .8125rem;
            margin-left: .625rem;
            color: var(--font-color5);
            font-size: 0;
            text-align: center;
        }

            .practice-rec .practice-entry .goto-smart > .icon {
                display: inline-block;
                vertical-align: middle;
                margin-right: .4375rem;
                font-size: .875rem;
                line-height: 1.5;
            }

            .practice-rec .practice-entry .goto-smart > span {
                display: inline-block;
                vertical-align: middle;
                font-size: .875rem;
                line-height: 1.5;
            }

            .practice-rec .practice-entry .goto-smart:hover {
                background-color: var(--primary-bg-hover-color1);
            }

        .practice-rec .practice-entry::after {
            content: '';
            display: inline-block;
            vertical-align: middle;
            width: 1.375rem;
            height: 1.75rem;
            background: url(../img/rec_topic.png) no-repeat -8px -8px;
            position: absolute;
            top: 0;
            right: 1.25rem;
        }

    .practice-rec .topic-rec {
        display: flex;
        align-items: center;
        height: 2.25rem;
        width: 100%;
        background-color: var(--bg-color3);
        box-sizing: border-box;
        padding: 0 1.0625rem 0 1.25rem;
    }

        .practice-rec .topic-rec .title-txt {
            display: inline-block;
            vertical-align: middle;
            margin-right: .625rem;
            font-size: .75rem;
            color: var(--font-color3);
            line-height: 1;
            word-break: keep-all;
            white-space: nowrap;
        }

        .practice-rec .topic-rec .topic-list {
            flex: 1;
            display: block;
            font-size: 0;
        }

            .practice-rec .topic-rec .topic-list > .item {
                display: inline-block;
                vertical-align: middle;
                max-width: 22%;
                margin-right: 1.25rem;
                overflow: hidden;
                font-size: .75rem;
                color: var(--font-color3);
                text-overflow: ellipsis;
                word-break: keep-all;
                white-space: nowrap;
                line-height: 3;
            }

                .practice-rec .topic-rec .topic-list > .item:hover {
                    color: var(--primary-font-color1-hover);
                }

                .practice-rec .topic-rec .topic-list > .item:last-child {
                    margin-right: 0;
                }

        .practice-rec .topic-rec .more-links {
            display: inline-block;
            vertical-align: middle;
            font-size: .75rem;
            line-height: 1;
            color: var(--primary-font-color1);
            word-break: keep-all;
            white-space: nowrap;
        }

            .practice-rec .topic-rec .more-links:hover {
                color: var(--primary-font-color1-hover);
            }

            .practice-rec .topic-rec .more-links > i {
                display: inline-block;
                vertical-align: middle;
                font-style: normal;
                font-size: .75rem;
            }

.first-area-ques-msg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

    .first-area-ques-msg > .cnt-box {
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        position: relative;
    }

        .first-area-ques-msg > .cnt-box > .area-select {
            width: 396px;
            height: 289px;
            position: absolute;
            top: 71px;
            left: 162px;
        }

        .first-area-ques-msg > .cnt-box > .whole-ques-type {
            width: 488px;
            height: 282px;
            position: absolute;
            top: 362px;
            right: 0;
        }

        .first-area-ques-msg > .cnt-box > .ctrl-box {
            display: block;
            text-align: center;
            position: absolute;
            top: 70%;
            left: 50%;
            transform: translateX(-50%);
        }

            .first-area-ques-msg > .cnt-box > .ctrl-box > .confirm-btn {
                display: inline-block;
                width: 200px;
                height: 50px;
                box-sizing: border-box;
                border-radius: 25px;
                line-height: 50px;
                text-align: center;
                font-size: 18px;
                background: var(--primary-color1);
                color: var(--font-color5);
            }

                .first-area-ques-msg > .cnt-box > .ctrl-box > .confirm-btn:hover {
                    background: var(--primary-color1-hover);
                    color: var(--font-color5);
                }

.intro-ctk {
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.5);
}

    .intro-ctk .ctk-box {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background: white;
        border-radius: .625rem;
        overflow: hidden;
    }

    .intro-ctk .ctk-ctrl {
        display: block;
        width: 33.5rem;
        height: 12.8125rem;
        position: absolute;
        top: 6.25rem;
        left: 6.25rem;
    }

        .intro-ctk .ctk-ctrl > img {
            display: block;
        }

        .intro-ctk .ctk-ctrl > .confirm-btn {
            display: inline-block;
            width: 12.5rem;
            height: 3.125rem;
            background: #29f;
            box-shadow: 0 0 10px 0 #135e9f;
            border-radius: 1.5625rem;
            font-size: 1.125rem;
            line-height: 3;
            text-align: center;
            font-family: PingFangSC-Medium,PingFang SC;
            font-weight: 500;
            color: #fff;
            position: absolute;
            bottom: -1rem;
            left: 46%;
        }

    .intro-ctk .ctk-box {
        box-sizing: border-box;
        padding-left: .625rem;
        padding-bottom: .625rem;
    }

        .intro-ctk .ctk-box a {
            cursor: pointer;
        }

        .intro-ctk .ctk-box > li.tree-node {
            margin-left: 0;
            box-sizing: border-box;
        }

        .intro-ctk .ctk-box > .tree-children[data-extensibe="1"] > .tree-node-name > .tree-icon {
            background: url(../img/treeicon.png) no-repeat -4px 0;
        }

        .intro-ctk .ctk-box > .tree-children[data-extensibe="1"].tree-open > .tree-node-name > .tree-icon {
            background-position: -28px 0;
        }

        .intro-ctk .ctk-box > .tree-children[data-extensibe="1"].tree-open:not(:first-child):not(:last-child) > .tree-node-name > .tree-icon {
            background-position: -108px 0;
        }

        .intro-ctk .ctk-box > .tree-children[data-extensibe="1"].tree-open:last-child > .tree-node-name > .tree-icon {
            background-position: -108px -34px;
        }

        .intro-ctk .ctk-box > .tree-children[data-extensibe="1"]:not(:first-child):not(:last-child) > .tree-node-name > .tree-icon {
            background: url(../img/treeicon.png) no-repeat -84px 0;
        }

        .intro-ctk .ctk-box > .tree-children[data-extensibe="1"]:last-child > .tree-node-name > .tree-icon {
            background-position: -84px -34px;
        }

        .intro-ctk .ctk-box > .tree-children[data-extensibe="1"] > .tree-ul {
            background: url(../img/treeicon.png);
            background-repeat: repeat-y;
            background-position: -180px 0;
            position: relative;
        }

            .intro-ctk .ctk-box > .tree-children[data-extensibe="1"] > .tree-ul::after {
                content: '';
                display: block;
                box-sizing: border-box;
                border: 1px solid #de5050;
                border-radius: .625rem;
                width: 75%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 2.4375rem;
            }

        .intro-ctk .ctk-box > .tree-leaf > .tree-node-name > .tree-icon {
            background: url(../img/treeicon.png) no-repeat;
            background-position: -57px 0;
            margin-right: 0;
        }

        .intro-ctk .ctk-box > .tree-leaf:last-child > .tree-node-name > .tree-icon {
            background-position: -132px 0;
        }

        .intro-ctk .ctk-box .tree-children ul.tree-ul {
            display: none;
        }

        .intro-ctk .ctk-box .tree-node {
            display: block;
            margin-left: 1.25rem;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            user-select: none;
        }

            .intro-ctk .ctk-box .tree-node > .tree-node-name {
                display: block;
                height: 2.125rem;
                font-size: 0;
                line-height: 2.42;
                white-space: nowrap;
            }

                .intro-ctk .ctk-box .tree-node > .tree-node-name::after {
                    content: '';
                    display: inline-block;
                    width: 100%;
                    height: 2.125rem;
                    position: absolute;
                    left: 0;
                    z-index: 1;
                    opacity: 0;
                    cursor: pointer;
                    -ms-transition-property: opacity;
                    -ms-transition-duration: .3s;
                    -ms-transition-timing-function: ease;
                    transition-property: opacity;
                    transition-duration: .3s;
                    transition-timing-function: ease;
                }

                .intro-ctk .ctk-box .tree-node > .tree-node-name:hover::after {
                    opacity: 1;
                }

                .intro-ctk .ctk-box .tree-node > .tree-node-name > .tree-checkbox, .intro-ctk .ctk-box .tree-node > .tree-node-name > .tree-radio, .intro-ctk .ctk-box .tree-node > .tree-node-name > .tree-icon, .intro-ctk .ctk-box .tree-node > .tree-node-name > .tree-anchor {
                    display: inline-block;
                    vertical-align: middle;
                    position: relative;
                    z-index: 10;
                }

                .intro-ctk .ctk-box .tree-node > .tree-node-name > .tree-icon {
                    width: 1.25rem;
                    height: 2.125rem;
                    cursor: pointer;
                }

                .intro-ctk .ctk-box .tree-node > .tree-node-name > .tree-checkbox {
                    width: .875rem;
                    height: .875rem;
                    cursor: pointer;
                    background: url(../img/treeicon.png) no-repeat;
                }

                    .intro-ctk .ctk-box .tree-node > .tree-node-name > .tree-checkbox[data-checked="0"] {
                        background-position: -16px -72px;
                    }

                .intro-ctk .ctk-box .tree-node > .tree-node-name > .tree-radio {
                    width: .875rem;
                    height: .875rem;
                    cursor: pointer;
                    background: url(../img/treeicon.png) no-repeat;
                }

                    .intro-ctk .ctk-box .tree-node > .tree-node-name > .tree-radio[data-checked="0"] {
                        background-position: 0 -72px;
                    }

                    .intro-ctk .ctk-box .tree-node > .tree-node-name > .tree-radio[data-checked="1"] {
                        background-position: 0 -87px;
                    }

                .intro-ctk .ctk-box .tree-node > .tree-node-name > .gap-right {
                    margin: .125rem .375rem 0 0;
                }

                .intro-ctk .ctk-box .tree-node > .tree-node-name > .icon-gap-left {
                    margin-left: .875rem;
                }

                .intro-ctk .ctk-box .tree-node > .tree-node-name > .tree-anchor {
                    width: 78%;
                    height: 2.125rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-break: keep-all;
                    font-size: .8125rem;
                    line-height: 2.8;
                    color: var(--font-color2);
                    -ms-transition-property: color;
                    -ms-transition-duration: .3s;
                    -ms-transition-timing-function: ease;
                    transition-property: color;
                    transition-duration: .3s;
                    transition-timing-function: ease;
                }

                    .intro-ctk .ctk-box .tree-node > .tree-node-name > .tree-anchor:hover {
                        color: var(--primary-font-color1-hover);
                    }

            .intro-ctk .ctk-box .tree-node.tree-node--selected > .tree-node-name > .tree-checkbox[data-checked="1"] {
                background-position: -16px -87px;
            }

            .intro-ctk .ctk-box .tree-node.tree-node--selected > .tree-node-name > .tree-anchor {
                color: var(--primary-font-color1);
            }

                .intro-ctk .ctk-box .tree-node.tree-node--selected > .tree-node-name > .tree-anchor:hover {
                    color: var(--primary-font-color1-hover);
                }

            .intro-ctk .ctk-box .tree-node.tktree-selected-part > .tree-node-name > .tree-checkbox {
                background-position: -36px -72px;
            }

            .intro-ctk .ctk-box .tree-node[disabled] > .tree-node-name > .tree-anchor, .intro-ctk .ctk-box .tree-node[disabled].tktree-selected-part > .tree-node-name > .tree-anchor, .intro-ctk .ctk-box .tree-node[disabled].tktree-selected-part > .tree-node-name > .tree-checkbox, .intro-ctk .ctk-box .tree-node[disabled] > .tree-node-name > .tree-checkbox {
                opacity: .5;
                cursor: not-allowed;
            }

            .intro-ctk .ctk-box .tree-node.tree-children > .tree-node-name > .tree-icon {
                background: url(../img/treeicon.png) no-repeat;
                background-position: -4px 0;
            }

            .intro-ctk .ctk-box .tree-node.tree-children:not(:first-child):not(:last-child) > .tree-node-name > .tree-icon {
                background-position: -84px 0;
            }

            .intro-ctk .ctk-box .tree-node.tree-children.tree-open > .tree-node-name > .tree-icon {
                background-position: -28px 0;
            }

            .intro-ctk .ctk-box .tree-node.tree-children.tree-open:last-child:first-child > .tree-node-name > .tree-icon {
                background-position: -28px -34px;
            }

            .intro-ctk .ctk-box .tree-node.tree-children.tree-open:last-child:first-child > .tree-ul {
                background: 0;
            }

            .intro-ctk .ctk-box .tree-node.tree-children.tree-open:last-child > .tree-node-name > .tree-icon {
                background-position: -108px -34px;
            }

            .intro-ctk .ctk-box .tree-node.tree-children.tree-open:last-child > .tree-ul {
                background: 0;
            }

            .intro-ctk .ctk-box .tree-node.tree-children.tree-open:not(:first-child):not(:last-child) > .tree-node-name > .tree-icon {
                background-position: -108px 0;
            }

            .intro-ctk .ctk-box .tree-node.tree-children:last-child:first-child > .tree-node-name > .tree-icon {
                background-position: -4px -34px;
            }

            .intro-ctk .ctk-box .tree-node.tree-children:last-child > .tree-node-name > .tree-icon {
                background-position: -84px -34px;
            }

            .intro-ctk .ctk-box .tree-node.tree-children[data-extensibe="1"] > .tree-ul {
                background: url(../img/treeicon.png);
                background-repeat: repeat-y;
                background-position: -180px 0;
            }

            .intro-ctk .ctk-box .tree-node.tree-leaf > .tree-node-name > .tree-icon {
                background: url(../img/treeicon.png) no-repeat;
                background-position: -57px 0;
                margin-right: .25rem;
            }

            .intro-ctk .ctk-box .tree-node.tree-leaf:last-child > .tree-node-name > .tree-icon {
                background-position: -132px 0;
            }

        .intro-ctk .ctk-box .tree-open > ul.tree-ul {
            display: block;
        }

.footer {
    margin-top: 0;
}

.chapter-select-page {
    display: flex;
    overflow: hidden;
}

@supports(gap:.75rem) {
    .chapter-select-page {
        gap: .75rem;
    }
}

@supports not(gap:.75rem) {
    .chapter-select-page > .left-box {
        margin-right: .75rem;
    }
}

.chapter-select-page .right-box {
    flex: 1;
    display: block;
    max-width: 77%;
    min-height: 100vh;
    box-sizing: border-box;
    padding-bottom: 6.25rem;
}

    .chapter-select-page .right-box > .tab-bar {
        width: 100%;
        height: 3.5625rem;
        box-sizing: border-box;
        padding: 0 1.25rem;
        margin-bottom: .9375rem;
        background: var(--bg-color3);
        border-radius: var(--borderRadius2) var(--borderRadius2) 0 0;
    }

        .chapter-select-page .right-box > .tab-bar .wrapper {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border-bottom: var(--border1);
            padding-top: 1.5rem;
            font-size: 0;
        }

            .chapter-select-page .right-box > .tab-bar .wrapper .nav-box {
                display: flex;
                width: 80%;
                box-sizing: border-box;
                padding: 0 1.6875rem;
                font-size: 0;
                word-break: keep-all;
                white-space: nowrap;
            }

@supports(gap:3rem) {
    .chapter-select-page .right-box > .tab-bar .wrapper .nav-box {
        gap: 3rem;
    }
}

@supports not(gap:3rem) {
    .chapter-select-page .right-box > .tab-bar .wrapper .nav-box > *:not(:last-child) {
        margin-right: 3rem;
    }
}

.chapter-select-page .right-box > .tab-bar .wrapper .nav-box > .tab-nav-item {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    box-sizing: border-box;
}

    .chapter-select-page .right-box > .tab-bar .wrapper .nav-box > .tab-nav-item > .txt {
        display: inline-block;
        height: 100%;
        font-size: 1rem;
        line-height: 1.5;
        color: var(--font-color2);
    }

    .chapter-select-page .right-box > .tab-bar .wrapper .nav-box > .tab-nav-item.selected > .txt {
        position: relative;
        z-index: 1;
        color: var(--primary-font-color1);
        font-weight: 500;
    }

        .chapter-select-page .right-box > .tab-bar .wrapper .nav-box > .tab-nav-item.selected > .txt::after {
            content: '';
            display: block;
            width: 80%;
            height: .1875rem;
            border-radius: 6.25rem;
            background: var(--primary-color1);
            position: absolute;
            bottom: -0.5rem;
            left: 50%;
            z-index: 1;
            transform: translateX(-50%);
        }

.chapter-select-page .right-box > .tab-bar .wrapper .gap {
    display: inline-block;
    vertical-align: middle;
    font-style: normal;
    font-size: 1.25rem;
    color: #dcdcdc;
    margin-right: .75rem;
}

.chapter-select-page .right-box > .tab-bar .wrapper .sync-lib {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    line-height: 3.9;
    font-size: .875rem;
    color: var(--primary-font-color1);
}

    .chapter-select-page .right-box > .tab-bar .wrapper .sync-lib:hover {
        color: var(--primary-font-color1-hover);
    }

    .chapter-select-page .right-box > .tab-bar .wrapper .sync-lib > .icon {
        margin-right: .375rem;
    }

.chapter-select-page .right-box > .tab-bar + .selects-box > .type-group-nav {
    padding-top: .625rem;
}

.chapter-select-page .right-box .selects-box {
    width: 100%;
    box-sizing: border-box;
    border-radius: 0 0 var(--borderRadius2) var(--borderRadius2);
    background: var(--bg-color3);
}

.chapter-select-page .topic-ctrl-bar > .sort-ctrls {
    float: left;
}

.chapter-select-page .topic-ctrl-bar > .search-box {
    float: left;
}

.chapter-select-page .topic-ctrl-bar > .count-box {
    float: right;
}

.chapter-select-page .test-list {
    margin-bottom: 1.875rem;
    box-sizing: border-box;
}

.chapter-select-page .title-menu__menu-box {
    border-color: var(--primary-color1);
    box-shadow: 0 5px 7px 0 rgba(0,0,0,0.2);
}

    .chapter-select-page .title-menu__menu-box > .arrow {
        border-color: transparent transparent var(--primary-color1) transparent;
    }

    .chapter-select-page .title-menu__menu-box > .title-menu__menu-item > .menu-item__navs > .item.selected {
        background: var(--primary-color1);
        color: var(--font-color5);
    }

.more-type-select {
    border-radius: 0 0 var(--borderRadius2) var(--borderRadius2);
}

    .more-type-select > .type-menu > .item-list.province-menu .menu-item > .item-title {
        color: #999;
    }

    .more-type-select > .type-menu > .item-list.province-menu .menu-item > .senior {
        width: 5.25rem;
    }

    .more-type-select > .goto-personaltk {
        display: inline-block;
        vertical-align: middle;
        width: auto;
        height: auto;
        box-sizing: border-box;
        padding: 5px 14px;
        border: 1px solid #2877ff;
        border-radius: .1875rem;
        font-family: 'Microsoft YaHei',PingFang SC,"Alibaba PuHuiTi 2.0",Helvetica,Tahoma,Arial,sana-serif;
        font-size: .875rem;
        line-height: 1;
        cursor: pointer;
        background: #fff;
        color: #2877ff;
        float: right;
        word-break: keep-all;
        white-space: nowrap;
        margin: .5rem 0;
        position: relative;
        left: .9375rem;
    }

        .more-type-select > .goto-personaltk:hover {
            border-color: #006fff;
            color: #2877ff;
        }

        .more-type-select > .goto-personaltk.disabled {
            color: #999;
            border-color: #999;
            cursor: not-allowed;
        }

            .more-type-select > .goto-personaltk.disabled:hover {
                color: #999;
                border-color: #999;
            }

.chapter-select-page .right-box > .tab-bar .wrapper .nav-box .tab-nav-item.expand-read.coop_21 {
    position: relative;
}

    .chapter-select-page .right-box > .tab-bar .wrapper .nav-box .tab-nav-item.expand-read.coop_21::after {
        content: "";
        display: inline-block;
        width: 1.25rem;
        height: 1.25rem;
        overflow: hidden;
        background: url(../assets/21logo.png) no-repeat;
        background-size: 1.25rem 1.25rem;
        position: absolute;
        top: .8125rem;
        right: -0.4375rem;
    }

.chapter-select-page .right-box > .tab-bar {
    margin-bottom: 0;
}

.chapter-select-page .right-box .selects-box {
    box-sizing: border-box;
}

    .chapter-select-page .right-box .selects-box > .more-type-select {
        padding-top: 1rem;
        padding-bottom: 1.25rem;
    }

        .chapter-select-page .right-box .selects-box > .more-type-select::before {
            content: '';
            height: 0;
            border-top: .0625rem dashed var(--line-color1);
            margin: 0 1.25rem;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 0;
        }

.chapter-select-page .test-list {
    margin-bottom: 1.875rem;
    box-sizing: border-box;
}

@media only screen and (max-width:1098px) {
    .test-list .tk-quest-item .exam-item__info .info-msgs {
        width: 50%;
    }

    .tk-test-item .exam-item__info .ctrl-box {
        width: 50%;
    }
}

.chapter-select-page .goto-smart {
    display: table;
    width: 100%;
    height: 5.625rem;
    margin: .875rem 0;
    position: relative;
    box-sizing: border-box;
    border-radius: .25rem .25rem 0 0;
    background: var(--bg-color3);
}

    .chapter-select-page .goto-smart > .wrapper {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

        .chapter-select-page .goto-smart > .wrapper > .title-txt {
            display: inline-block;
            width: 20.3125rem;
            height: 2.125rem;
            background: url(../img/goto_smart_bg.png) no-repeat;
            text-align: center;
            font-size: 1rem;
            color: var(--font-color2);
        }

        .chapter-select-page .goto-smart > .wrapper > .ctrl-box {
            display: block;
            text-align: center;
        }

            .chapter-select-page .goto-smart > .wrapper > .ctrl-box > .goto-btn {
                display: inline-block;
                min-width: 8.226%;
                box-sizing: border-box;
                padding: .1875rem .125rem;
                border-radius: .25rem;
                font-size: .875rem;
                text-align: center;
                background: var(--primary-bg-color1);
                color: var(--font-color5);
            }

                .chapter-select-page .goto-smart > .wrapper > .ctrl-box > .goto-btn:hover {
                    background: var(--primary-color1-hover);
                }

    .chapter-select-page .goto-smart > .close-btn {
        display: inline-block;
        width: .75rem;
        height: .75rem;
        background: url(../img/close-1.png) no-repeat center center;
        opacity: .5;
        position: absolute;
        top: .625rem;
        right: .625rem;
    }

.type-group-nav .type-group-item .sub-types > .multi-btn {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    line-height: 1;
    font-size: .875rem;
    font-weight: 500;
    text-align: right;
    position: absolute;
    right: 5px;
    z-index: 10;
    color: var(--primary-font-color1);
}