:root {
    /* È«¾ÖÖ÷ÌâÑÕÉ« */
    /* var()°ü¹ücss±äÁ¿ */
    --main-color: rgb(255, 106, 0);
    --main-colorHover: rgb(183, 126, 86);
    --main-colorActive: rgb(137, 88, 54);
    --main-light: rgba(255, 106, 0, 0.6);
    --ass-color: #e8ecf5;
    --info-color: rgb(144, 147, 153);
    --info-light: rgba(144, 147, 153, 0.2);
    --info-NoLight: rgba(144, 147, 153, 0.5);
    --success-color: rgb(15, 188, 94);
    --success-colorHover: rgb(65, 148, 103);
    --success-colorActive: rgb(46, 95, 68);
    --success-light: rgba(15, 188, 94, 0.6);
    --warning-color: rgb(255, 98, 33);
    --warning-colorHover: rgb(255, 98, 33);
    --warning-colorActive: rgb(255, 98, 33);
    --warning-light: rgba(255, 98, 33, 0.6);
    --danger-color: rgb(254, 82, 82);
    --danger-colorHover: rgb(254, 82, 82);
    --danger-colorActive: rgb(254, 82, 82);
    --danger-light: rgba(254, 82, 82, 0.6);
    --error-color: rgb(255, 0, 25);
    --gold-color: rgb(255, 255, 0);
    --border: rgb(233, 233, 233);
    --undertint: rgb(228, 228, 228);
    --default: rgb(243, 245, 248);
    --black: #000;
    --color3: #333;
    --color6: #666;
    --color9: #999;
    --colorC: #ccc;
    --colorD: #ddd;
    --colorW: #fff;
}

/*ÐÂÔöÈ«¾ÖÑ¡ÖÐʱ*/
::selection {
    color: #fff;
    background: var(--main-color);
}

#app iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

/* È«¾ÖͨÓÃĬÈÏÅäÖà */
body {
    font-size: 16px;
    font-family: Roboto, Helvetica, Tahoma, sans-serif;
    color: #333;
}

.ws {
    width: 1300px;
    margin: 0 auto;
}

body,
main {
    background-color: var(--default);
}

@media screen and (max-width: 1024px) {
    main {
        padding: 0 10px;
        width: 100% !important;
        padding-top: 20px;
        padding-bottom: 30px;
    }

    .ws {
        width: 100% !important;
    }
}

/* È«¾Ö¿í¶È ¸¡¶¯ */
.fl {
    float: left;
}

.fr {
    float: right;
}

.w-20 {
    width: 18%;
}

.w-25 {
    width: 23%;
}

.w-33 {
    width: 32%;
}

.w-50 {
    width: 49%;
}

.w-100 {
    width: 100%;
}

.w-100-m {
    max-width: 100%;
}

.w-f {
    -webkit-box-flex: 1;
    flex: 1;
}

/* È«¾Ö¿í¶È¸¡¶¯ ½áÊø */

/* È«¾Ö²¼¾Ö·½Ê½ position */

.pr {
    position: relative;
}

.pa-t-r {
    right: 0;
}

.pa-t-l,
.pa-t-r {
    position: absolute;
    top: 0;
}

.pa-t-l {
    left: 0;
}

.pa-b-r {
    right: 0;
}

.pa-b-l,
.pa-b-r {
    position: absolute;
    bottom: 0;
}

.pa-b-l {
    left: 0;
}

.pa-c {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.pf-t-l {
    top: 0;
}

.pf-b-l,
.pf-t-l {
    position: fixed;
    left: 0;
}

.pf-b-l {
    bottom: 0;
}

.pf-c {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* È«¾Ö²¼¾Ö·½Ê½½áÊø */

/* È«¾Öpadding margin */

.pd-xs {
    padding: 6px;
}

.pd-s {
    padding: 10px;
}

.pd-m {
    padding: 16px;
}

.pd-l {
    padding: 20px;
}

.pd-t-xs {
    padding-top: 6px;
}

.pd-t-s {
    padding-top: 10px;
}

.pd-t-m {
    padding-top: 16px;
}

.pd-t-l {
    padding-top: 20px;
}

.pd-b-xs {
    padding-bottom: 6px;
}

.pd-b-s {
    padding-bottom: 10px;
}

.pd-b-l {
    padding-bottom: 20px;
}

.pd-l-xs {
    padding-left: 6px;
}

.pd-l-s {
    padding-left: 10px;
}

.pd-l-m {
    padding-left: 16px;
}

.pd-l-l {
    padding-left: 20px;
}

.pd-r-xs {
    padding-right: 6px;
}

.pd-r-s {
    padding-right: 10px;
}

.pd-r-m {
    padding-right: 16px;
}

.pd-r-l {
    padding-right: 20px;
}

.pd-x-xs {
    padding: 0 6px;
}

.pd-x-s {
    padding: 0 10px;
}

.pd-x-m {
    padding: 0 16px;
}

.pd-x-l {
    padding: 0 20px;
}

.pd-x-xl {
    padding: 0 40px;
}

.pd-y-xs {
    padding: 6px 0;
}

.pd-y-s {
    padding: 10px 0;
}

.pd-y-m {
    padding: 16px 0;
}

.pd-y-l {
    padding: 20px 0;
}

.pd-xs-s {
    padding: 6px 10px;
}

.pd-xs-m {
    padding: 6px 16px;
}

.pd-xs-l {
    padding: 6px 20px;
}

.pd-s-xs {
    padding: 10px 6px;
}

.pd-s-m {
    padding: 10px 16px;
}

.pd-s-l {
    padding: 10px 20px;
}

.pd-m-s {
    padding: 16px 10px;
}

.pd-m-l {
    padding: 16px 20px;
}

.mg-xs {
    margin: 6px;
}

.mg-s {
    margin: 10px;
}

.mg-t-xs {
    margin-top: 6px;
}

.mg-t-s {
    margin-top: 10px;
}

.mg-t-m {
    margin-top: 16px;
}

.mg-t-l {
    margin-top: 20px;
}

.mg-t-xl {
    margin-top: 40px;
}

.mg-b-xs {
    margin-bottom: 6px;
}

.mg-b-s {
    margin-bottom: 10px;
}

.mg-b-m {
    margin-bottom: 16px;
}

.mg-b-l {
    margin-bottom: 20px;
}

.mg-b-xl {
    margin-bottom: 40px;
}

.mg-l-xs {
    margin-left: 6px;
}

.mg-l-s {
    margin-left: 10px;
}

.mg-l-m {
    margin-left: 16px;
}

.mg-l-l {
    margin-left: 20px;
}

.mg-r-xs {
    margin-right: 6px;
}

.mg-r-s {
    margin-right: 10px;
}

.mg-r-m {
    margin-right: 16px;
}

.mg-r-l {
    margin-right: 20px;
}

.mg-r-xl {
    margin-right: 40px;
}

.mg-x-xs {
    margin: 0 6px;
}

.mg-x-s {
    margin: 0 10px;
}

.mg-x-l {
    margin: 0 20px;
}

.mg-y-xs {
    margin: 6px 0;
}

.mg-y-s {
    margin: 10px 0;
}

.mg-y-m {
    margin: 16px 0;
}

.mg-y-l {
    margin: 20px 0;
}

/* È«¾Öpadding margin½áÊø */

/* ͼƬ´óС */
.img-xs {
    width: 80px;
    height: 80px;
}

/* ͼƬ´óС½áÊø */

/* È«¾Ö±ß¿ò Ô²½Ç */
.br-s {
    border-radius: 6px;
}

.br-m {
    border-radius: 18px;
}

.br-r {
    border-radius: 50%;
}

.br-r-s {
    border-radius: 0 6px 6px 0;
}

.br-r-m {
    border-radius: 0 18px 18px 0;
}

.br-l-s {
    border-radius: 6px 0 0 6px;
}

.br-l-m {
    border-radius: 18px 0 0 18px;
}

.bdn {
    border: none;
}

.bd {
    border: 1px solid #e9e9e9;
    border: 1px solid var(--border);
}

.bd-e4 {
    border: 1px solid #e4e4e4;
    border: 1px solid var(--undertint);
}

.bd-3d {
    border: 1px solid #ddd;
    border: 1px solid var(--colorD);
}

.bd-p {
    border: 1px solid #4066b8;
    border: 1px solid var(--main-color);
}

.bd-f {
    border: 1px solid #fff;
    border: 1px solid var(--colorW);
}

.bd-b {
    border-bottom: 1px solid #e9e9e9;
    border-bottom: 1px solid var(--border);
}

.bd-b-3d {
    border-bottom: 1px solid #ddd;
    border-bottom: 1px solid var(--colorD);
}

.bd-b-p {
    border-bottom: 1px solid #4066b8;
    border-bottom: 1px solid var(--main-color);
}

.bd-t {
    border-top: 1px solid #e9e9e9;
    border-top: 1px solid var(--border);
}

.bd-t-3d {
    border-top: 1px solid #ddd;
    border-top: 1px solid var(--colorD);
}

.bd-r {
    border-right: 1px solid #e9e9e9;
    border-right: 1px solid var(--border);
}

.bd-l {
    border-left: 1px solid #e9e9e9;
    border-left: 1px solid var(--border);
}

/* È«¾Ö ±ß¿ò Ô²½Ç½áÊø */

/* È«¾ÖflexÏà¹Ø  */
.dn {
    display: none;
}

.dib {
    display: inline-block;
}

.db {
    display: block;
}

.df,
.df-w {
    display: -webkit-box;
    display: flex;
}

.df-w {
    flex-wrap: wrap;
}

.df-sb,
.df-sb-w {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.df-sb-w {
    flex-wrap: wrap;
}

.df-c,
.df-c-w {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.df-c-w {
    flex-wrap: wrap;
}

.df-c-c {
    -webkit-box-pack: center;
    justify-content: center;
}

.df-c-c,
.df-c-e {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.df-c-e {
    -webkit-box-pack: end;
    justify-content: flex-end;
}

.df-c-sb {
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.df-c-sa,
.df-c-sb {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.df-c-sa {
    justify-content: space-around;
}

.df-c-fs {
    -webkit-box-pack: start;
    justify-content: flex-start;
}

.df-c-fe,
.df-c-fs {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.df-c-fe {
    -webkit-box-pack: end;
    justify-content: flex-end;
}

.df-d,
.df-d-sb {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

.df-d-sb {
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.df-d-sa {
    justify-content: space-around;
}

.df-d-c,
.df-d-sa {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

.df-d-c {
    -webkit-box-align: center;
    align-items: center;
}

/* È«¾ÖflexÏà¹Ø½áÊø */

/* È«¾Ö¶ÔÆ䷽ʽ ÎÄ×Ö ÑÕÉ« ¼Ó´Ö*/
.h-100 {
    height: 100%;
}

.h-l,
.h-l-h {
    height: 40px;
}

.h-l-h {
    line-height: 40px;
}

.h-m,
.h-m-h {
    height: 36px;
}

.h-m-h {
    line-height: 36px;
}

.ta-l {
    text-align: left;
}

.ta-c {
    text-align: center;
}

.ta-r {
    text-align: right;
}

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

.fs-s-h {
    line-height: 18px !important;
}

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

.fs-m-h {
    line-height: 22px !important;
}

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

.fs-l-h {
    line-height: 26px;
}

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

.fn {
    font-weight: 400;
}

.fw {
    font-weight: 700;
}

.cl-3 {
    color: #333;
    color: var(--color3);
}

.cl-6 {
    color: #666;
    color: var(--color6);
}

.cl-9 {
    color: #999;
    color: var(--color9);
}

.cl-c {
    color: #ccc;
    color: var(--colorC);
}

.cl-f {
    color: #fff;
    color: var(--colorW);
}

.cl-p {
    color: #4066b8;
    color: var(--main-color);
}

.cl-s {
    color: #0fbc5e;
    color: var(--success-color);
}

.cl-w {
    color: #ff6221;
    color: var(--warning-color);
}

.cl-d {
    color: #fe5252;
    color: var(--danger-color);
}

.cl-e {
    color: #ff0019;
    color: var(--error-color);
}

.cl-g {
    color: #ff0;
    color: var(--gold-color);
}

.cl-b {
    color: #e9e9e9;
    color: var(--border);
}

/* È«¾Ö¶ÔÆ䷽ʽ ÎÄ×Ö ÑÕÉ« ¼Ó´Ö ½áÊø*/

/* È«¾Ö²ã¼¶ */
.zl-xs {
    z-index: 1;
}

.zl-s {
    z-index: 2;
}

.zl-m {
    z-index: 3;
}

/* È«¾Ö²ã¼¶½áÊø */

/* È«¾Ö±³¾°É« */

.bgc {
    background-color: #f3f5f8;
    background-color: var(--default);
}

.bgc-p {
    background-color: #4066b8;
    background-color: var(--main-color);
}

.bgc-s {
    background-color: #0fbc5e;
    background-color: var(--success-color);
}

.bgc-w {
    background-color: #ff6221;
    background-color: var(--warning-color);
}

.bgc-d {
    background-color: #fe5252;
    background-color: var(--danger-color);
}

.bgc-e {
    background-color: #ff0019;
    background-color: var(--error-color);
}

.bgc-3 {
    background-color: #333;
    background-color: var(--color3);
}

.bgc-b {
    background-color: #e9e9e9;
    background-color: var(--border);
}

.bgc-f {
    background-color: #fff;
    background-color: var(--colorW);
}

.bga-p {
    background-color: rgba(68, 96, 155, 0.3);
}

/* È«¾Ö±³¾°É«½áÊø */

/* È«¾Öbtn */
.s-btn {
    padding: 10px 20px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    min-width: 100px;
}

    .s-btn.border {
        background-color: #fff !important;
        border: 1px solid var(--main-color);
        color: var(--main-color);
    }

        .s-btn.border .s-btn_content {
            color: var(--main-color) !important;
        }

    .s-btn,
    .s-btn .s-btn_content {
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
    }

        .s-btn .s-btn_content {
            font-size: 14px;
            color: #202020;
            letter-spacing: 1px;
        }

        .s-btn.info {
            background-color: #f5f5f5;
        }

            .s-btn.info:hover {
                background-color: #e5e5e5;
            }

            .s-btn.info:active {
                background-color: rgba(0, 0, 0, 0.3);
            }

        .s-btn.primary {
            background-color: var(--main-color);
        }

            .s-btn.primary:hover {
                background-color: var(--main-colorHover);
            }

            .s-btn.primary:active {
                background-color: var(--main-colorActive);
            }

            .s-btn.primary .s-btn_content {
                color: #fff;
            }

        .s-btn.success {
            background-color: var(--success-color);
        }

            .s-btn.success:hover {
                background-color: var(--success-colorHover);
            }

            .s-btn.success:active {
                background-color: var(--success-colorActive);
            }

            .s-btn.success .s-btn_content {
                color: #fff;
            }

        .s-btn.error {
            background-color: var(--error-color);
        }

            .s-btn.error:hover {
                background-color: var(--error-color);
            }

            .s-btn.error:active {
                background-color: var(--error-color);
            }

            .s-btn.error .s-btn_content {
                color: #fff;
            }

        .s-btn.warning {
            background-color: var(--warning-color);
        }

            .s-btn.warning:hover {
                background-color: var(--warning-colorHover);
            }

            .s-btn.warning:active {
                background-color: var(--warning-colorActive);
            }

            .s-btn.warning .s-btn_content {
                color: #fff;
            }

            /* successÐÞ¸ÄË®²¨ÎÆ */
            .s-btn.success .ripple,
            .s-btn.error .ripple,
            .s-btn.warning .ripple {
                background-color: rgba(0, 0, 0, 0.3);
            }

        .s-btn .s-btn_loading {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            display: -webkit-inline-box;
            display: inline-flex;
            vertical-align: middle;
            -webkit-box-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            align-items: center;
        }

            .s-btn .s-btn_loading svg {
                width: 100%;
                height: 100%;
                margin: auto;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 1;
                -webkit-animation: progress-circular-rotate-data-v-805ebae0 1.4s linear infinite;
                animation: progress-circular-rotate-data-v-805ebae0 1.4s linear infinite;
                -webkit-transform-origin: center center;
                transform-origin: center center;
                -webkit-transition: all 0.2s ease-in-out;
                transition: all 0.2s ease-in-out;
            }

                .s-btn .s-btn_loading svg circle {
                    -webkit-animation: progress-circular-dash-data-v-805ebae0 1.4s ease-in-out infinite;
                    animation: progress-circular-dash-data-v-805ebae0 1.4s ease-in-out infinite;
                    stroke-linecap: round;
                    stroke-dasharray: 80, 200;
                    stroke-dashoffset: 0px;
                    stroke: currentColor;
                    z-index: 2;
                    -webkit-transition: all 0.6s ease-in-out;
                    transition: all 0.6s ease-in-out;
                }

@-webkit-keyframes progress-circular-rotate-data-v-805ebae0 {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}

@keyframes progress-circular-rotate-data-v-805ebae0 {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}

@-webkit-keyframes progress-circular-dash-data-v-805ebae0 {
    to {
        stroke-dasharray: 100, 200;
        stroke-dashoffset: -124px;
    }
}

@keyframes progress-circular-dash-data-v-805ebae0 {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0px;
    }

    50% {
        stroke-dasharray: 100, 200;
        stroke-dashoffset: -15px;
    }

    to {
        stroke-dasharray: 100, 200;
        stroke-dashoffset: -124px;
    }
}

/* È«¾Öbtn ½áÊø */

/* ellipsis:µ±¶ÔÏóÄÚÎı¾Òç³öʱÏÔʾʡÂÔ±ê¼Ç(...)¡£ */
.ellipsis {
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
    overflow: hidden;
}

.l1 {
    white-space: normal;
    word-break: break-all;
    -webkit-line-clamp: 1;
}

.l1,
.l2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.l2 {
    -webkit-line-clamp: 2;
}

/* Çå³ý¸¡¶¯ */
.clear {
    clear: both;
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
}

/* Ч¹û hover */
.h-cl-p:hover,
.h-ul-p:hover {
    cursor: pointer;
    color: var(--main-color);
}

.h-ul:hover,
.h-ul-p:hover {
    cursor: pointer;
    text-decoration: underline;
}

.hv-bga-p:hover {
    cursor: pointer;
    background-color: rgba(68, 96, 155, 0.1);
}

/* hoverЧ¹û½áÊø */

/* È«¾ÖÊó±ê״̬ */
.cp {
    cursor: pointer;
}

/* ½ûÓÃ״̬ */
.noData,
.pen {
    pointer-events: none;
}

/* È«¾ÖÊó±ê״̬½áÊø */

/* È«¾ÖÐÅÏ¢Ìáʾ */

.message {
    position: fixed;
    top: 5vh;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    max-width: 1000px;
    z-index: 9999999;
    overflow: hidden;
    opacity: 0;
    background-color: var(--colorW);
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    color: var(--color3);
    font-size: 14px !important;
    display: -webkit-box;
    display: flex;
    border-radius: 6px;
}

    .message .iconfont {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        position: relative;
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
    }

    .message .icon-success {
        color: var(--success-color);
        background-color: var(--success-color);
    }

    .message .icon-error {
        color: var(--error-color);
        background-color: var(--error-color);
    }

    .message .icon-warning {
        color: var(--warning-color);
        background-color: var(--warning-color);
    }

    .message .icon-info {
        color: var(--info-color);
        background-color: var(--info-color);
    }

    .message .iconfont::after {
        content: "";
        position: absolute;
        height: 20px;
        width: 20px;
        background-color: var(--colorW);
        border-radius: 50%;
        background-clip: content-box;
    }

    .message .iconfont::before {
        z-index: 10;
    }

    .message .content {
        color: var(--color3);
        height: 40px;
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        padding: 0 20px;
    }

@media screen and (max-width: 1024px) {
    .message {
        left: 50vw;
        max-width: 100%;
    }

        .message span {
            padding: 0 10px;
            max-height: 40px;
            white-space: normal;
            word-break: break-all;
            -webkit-line-clamp: 1;
            flex: 1;
            flex-wrap: wrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
}

.bounce-enter-active {
    -webkit-animation: bounce-in-data 0.5s;
    animation: bounce-in-data 0.5s;
}

.bounce-leave-active {
    opacity: 0;
    animation-name: fadenum;
    animation-duration: 2s;
}

@keyframes fadenum {
    0% {
        top: 5vh;
        opacity: 1;
    }

    99% {
        top: 5vh;
        opacity: 1;
    }

    100% {
        opacity: 0;
        top: 4vh;
    }
}

@keyframes bounce-in-data {
    0% {
        top: 4vh;
        opacity: 0;
    }

    to {
        opacity: 1;
        top: 5vh;
    }
}

/* È«¾ÖÐÅÏ¢Ìáʾ½áÊø */

/* È«¾Ö¹ö¶¯Ìõ */
.sl-y::-webkit-scrollbar {
    width: 8px;
}

.sl-y::-webkit-scrollbar-thumb {
    background-color: var(--main-color);
    border-radius: 8px;
}

.sl-x::-webkit-scrollbar {
    height: 8px;
}

.sl-x::-webkit-scrollbar-thumb {
    background-color: var(--main-color);
    border-radius: 8px;
}

/* È«¾Ö¹ö¶¯Ìõ½áÊø */

/* Ë®²¨ÎƵã»÷ */
.ripple {
    position: absolute;
    /* ΪÁ˱£³ÖºÍbuttonµÄλÖùØϵ */
    border-radius: 50% 50%;
    /* Ë®²¨ÎÆÔ²ÐÎ */
    background: var(--info-light);
    /* Ë®²¨ÎÆÑÕÉ« */
    /* ÏÂÃæÓ붯»­Ð§¹ûÏà¹Ø ÊÇ0%ʱºòµÄ״̬ */
    /* ĬÈ쵀 transform-origin ÊÇ center ¼´ÖÐÐĵã */
    transform: scale(0);
    -webkit-transform: scale(0);
    opacity: 1;
}

.rippleEffect {
    /* Ö´ÐÐʱ³¤0.6s¡¢Ð§¹ûΪ½¥±ä(linear)¡¢Ãû³ÆΪrippleDropµÄ¶¯»­ */
    -webkit-animation: rippleDrop 0.6s linear;
    animation: rippleDrop 0.6s linear;
}

@keyframes rippleDrop {
    /* ÏÂÃæÊǶ¯»­100%ʱºòµÄ״̬ */
    100% {
        transform: scale(2);
        -webkit-transform: scale(2);
        opacity: 0;
    }
}

@-webkit-keyframes rippleDrop {
    100% {
        transform: scale(2);
        -webkit-transform: scale(2);
        opacity: 0;
    }
}

/* Ë®²¨ÎƵã»÷½áÊø */

/* È«¾ÖÃæ°üм */
.v-breadcrumb {
    font-size: 14px;
    height: 40px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

    .v-breadcrumb a {
        color: #666;
        display: inline-block;
        max-width: 600px;
        height: 40px;
        line-height: 40px;
        overflow: hidden;
        white-space: normal;
        word-break: break-all;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        color: #333;
    }

        .v-breadcrumb a .iconfont-ut {
            font-size: 12px;
            margin-right: 6px;
            color: #666;
        }

        /* Òþ²Ø×îºóÒ»¸öͼ±ê */
        .v-breadcrumb a:last-child i {
            display: none;
        }

        .v-breadcrumb a:first-child {
            color: #333;
        }

        .v-breadcrumb a:last-child {
            color: hsla(0, 0%, 60%, 0.5);
            cursor: not-allowed;
            pointer-events: none;
            color: #333;
        }

/* È«¾ÖÃæ°üм½áÊø */

/* v-input-upward */
.v-input-upward {
    position: relative;
    width: 100%;
    height: 36px;
}

    .v-input-upward input {
        outline: none;
        width: 100%;
        padding: 10px 0;
        margin-bottom: 30px;
        color: #333;
        font-size: 14px;
        border: none;
        border-bottom: 1px solid #d4d4d4;
        background-color: transparent;
        letter-spacing: 0.5px;
    }

        /* ÊäÈë¿ò¾Û½¹Ê± */
        .v-input-upward input:focus {
            border-color: var(--main-color);
        }

    /* ÀàÐÍÃû³Æ */
    .v-input-upward label {
        position: absolute;
        top: 0;
        left: 0;
        padding: 10px 0;
        color: #d4d4d4;
        pointer-events: none;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        font-size: 14px;
    }

    /* ÊäÈë¿òÑ¡ÖÐʱ ÒÔ¼°ÓÐÄÚÈÝ */
    .v-input-upward input:focus + label,
    .v-input-upward input:valid + label {
        top: -20px;
        color: var(--main-color);
        font-size: 12px;
    }

.v-select .v-input-upward .iconfont-ut {
    font-size: 14px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    position: absolute;
    top: 11px;
    right: 0;
}

/* v-input-upward½áÊø */

/* v-checkbox */
.v-checkbox {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    cursor: pointer;
}

    /* Ñ¡ÖÐʱ */
    .v-checkbox.primary .checkbox.active {
        background-color: var(--main-color);
        border-color: var(--main-color);
    }

    /* ¸´Ñ¡¿ò */
    .v-checkbox .checkbox {
        width: 16px;
        height: 16px;
        border: 1px solid #d4d4d4;
        background-color: #fff;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        font-weight: lighter;
        color: #fff;
    }

    .v-checkbox .checkbox-txt {
        margin-left: 5px;
        font-size: 12px;
        color: #666;
    }

/* v-checkbox½áÊø */

/* b-dialog */
.b-dialog {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    visibility: hidden;
}

    .b-dialog.active {
        height: 100%;
        opacity: 1;
        visibility: visible;
    }

    /* ÄÚÈÝÇø */
    .b-dialog .b-dialog-content {
        background-color: #fff;
        border-radius: 4px;
        padding: 20px;
        position: absolute;
        top: 17%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        box-shadow: 1px 2px 6px rgb(0 0 0 / 9%);
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        opacity: 0;
    }

        .b-dialog .b-dialog-content.active {
            opacity: 1;
            width: 320px;
        }

        /* ÌáʾÄÚÈÝ */
        .b-dialog .b-dialog-content .b-dialog-body {
            text-align: center;
            margin-bottom: 16px;
        }

            /* ÌáʾÎÄ×Ö */
            .b-dialog .b-dialog-content .b-dialog-body p {
                font-size: 14px;
                color: #333;
                padding: 0;
                margin: 0;
            }

                .b-dialog .b-dialog-content .b-dialog-body p + p {
                    margin-top: 10px;
                }

                /* Ìáʾ·ûºÅ */
                .b-dialog .b-dialog-content .b-dialog-body p .iconwenhao1 {
                    font-size: 40px;
                    color: #ffb709;
                }

        /* ²Ù×÷ÇøÓò */
        .b-dialog .b-dialog-content .b-dialog-footer {
            display: -webkit-box;
            display: flex;
            -webkit-box-pack: center;
            justify-content: center;
            padding: 0 20px;
        }

            .b-dialog .b-dialog-content .b-dialog-footer button {
                width: 110px;
                height: 36px;
                font-size: 14px;
                color: var(--main-color);
                background-color: #fff;
                border: 1px solid var(--main-color);
                border-radius: 20px;
                letter-spacing: 1px;
                cursor: pointer;
            }

                .b-dialog .b-dialog-content .b-dialog-footer button + button {
                    color: #fff;
                    background-color: var(--main-color);
                    margin-left: 16px;
                }

/* .b-dialog ½áÊø */

/* v-dialog */
.v-dialog {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 106;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 0;
    visibility: hidden;
}

    .v-dialog.active {
        height: 100%;
        opacity: 1;
        visibility: visible;
    }

    .v-dialog .v-dialog-content {
        background-color: #fff;
        border-radius: 6px;
        position: absolute;
        top: 20%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        opacity: 0;
    }

        .v-dialog .v-dialog-content.active {
            max-height: 680px;
            top: 12%;
            opacity: 1;
        }

        .v-dialog .v-dialog-content .v-dialog-title {
            display: -webkit-box;
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            font-size: 14px;
            font-weight: 700;
            color: #333;
            border-bottom: 1px solid #ccc;
            padding: 10px 0;
            margin: 0 20px 20px;
            position: relative;
        }

            .v-dialog .v-dialog-content .v-dialog-title .iconfont-ut {
                font-size: 20px;
                position: absolute;
                top: 10px;
                right: -8px;
                cursor: pointer;
            }

        .v-dialog .v-dialog-content .v-dialog-body {
            padding: 0 20px;
            margin-bottom: 20px;
        }

        .v-dialog .v-dialog-content .v-dialog-footer {
            display: -webkit-box;
            display: flex;
            padding: 0 20px;
            margin-bottom: 20px;
        }

        .v-dialog .v-dialog-content .center {
            -webkit-box-pack: center;
            justify-content: center;
        }

        .v-dialog .v-dialog-content .v-dialog-footer button {
            height: 34px;
            font-size: 14px;
            color: var(--main-color);
            background-color: #fff;
            border: 1px solid var(--main-color);
            letter-spacing: 1px;
            padding: 0 20px;
            cursor: pointer;
        }

            .v-dialog .v-dialog-content .v-dialog-footer button.agree {
                color: #fff;
                background-color: var(--main-color);
                margin-left: 20px;
            }

@media screen and (max-width: 1024px) {
    .v-dialog .v-dialog-content {
        width: auto !important;
        left: 0;
        -webkit-transform: translateX(7%);
        transform: translateX(7%);
        margin: 0;
    }
}

/* v-dialog½áÊø */

/* .v-share */
.v-share {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 100;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 0;
}

    .v-share .content {
        background-color: #fff;
        position: absolute;
        width: 350px;
        top: 25%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        overflow: hidden;
        box-shadow: 0 0 30px -14px #000;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        opacity: 0;
    }

        .v-share .content .title {
            width: 100%;
            padding: 20px;
            font-size: 16px;
            color: #000;
            display: -webkit-box;
            display: flex;
            -webkit-box-align: center;
            align-items: center;
        }

            .v-share .content .title .iconfont-ut {
                display: inline-block;
                width: 20px;
                height: 20px;
                color: #fff;
                font-size: 12px;
                background-color: #e91e63;
                line-height: 20px;
                text-align: center;
                margin-right: 10px;
            }

        .v-share .content .body {
            padding: 0 30px;
            margin-bottom: 30px;
            display: -webkit-box;
            display: flex;
            -webkit-box-pack: justify;
            justify-content: space-between;
            -webkit-box-align: center;
            align-items: center;
        }

            /* ÿÏî·ÖÏí°´Å¥ */
            .v-share .content .body a {
                display: inline-block;
                width: 50px;
                height: 50px;
                border-radius: 10px;
                color: #fff;
                font-size: 30px;
                line-height: 50px;
                text-align: center;
            }

                .v-share .content .body a:first-child {
                    width: 40px;
                    height: 40px;
                    line-height: 40px;
                    background-color: #3b569d;
                    text-align: right;
                    color: #fff;
                }

                .v-share .content .body a:nth-child(2) {
                    color: #0078b6;
                }

                .v-share .content .body a:nth-child(3) {
                    color: #1ca1f1;
                }

                .v-share .content .body a:nth-child(4) {
                    color: #474545;
                }

        .v-share .content footer button {
            float: right;
            height: 40px;
            padding: 0 20px;
            background-color: var(--main-color);
            font-size: 14px;
            color: #fff;
            font-weight: 700;
            letter-spacing: 1px;
            cursor: pointer;
        }

    .v-share.active {
        opacity: 1;
    }

    .v-share .content.active {
        top: 30%;
        opacity: 1;
    }

/* v-share ½áÊø */

/* v-radio */
.v-radio {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

    /* »ù´¡Î´Ñ¡ÖÐ */
    .v-radio .v-radio_checked {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 1px solid #ddd;
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        padding: 1px;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
        cursor: pointer;
        background-color: #ddd;
    }

    /* ½ûֹѡÔñ */
    .v-radio.disabled .v-radio_checked {
        border-color: #ccc;
        background-color: rgb(221, 221, 221);
        cursor: not-allowed;
    }

        .v-radio.disabled .v-radio_checked p {
            background-color: rgb(221, 221, 221);
        }

    /* Ñ¡ÖÐ */
    .v-radio .v-radio_checked.active {
        border-color: var(--main-color);
    }

    .v-radio .v-radio_checked p {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #fff;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
    }

    .v-radio .v-radio_checked.active p {
        background-color: var(--main-color);
    }

    .v-radio .v-radio_content {
        -webkit-box-flex: 1;
        flex: 1;
        font-size: 14px;
        margin-left: 10px;
        color: #333;
        cursor: pointer;
    }

/* v-radio ½áÊø */

/* Í϶¯ÑéÖ¤ */
.slideVerify {
    width: 100%;
    max-width: 294px;
    height: 6px;
    line-height: 42px;
}

    .slideVerify .drag_bg {
        width: 0;
        height: 6px;
    }

    .slideVerify .handler_Verify {
        width: 20px;
        height: 20px;
        border: 1px solid #ccc;
        position: absolute;
        top: -7px;
        left: 0;
        cursor: move;
    }

    .slideVerify .handler_ok_bg {
        background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==) no-repeat 50%;
    }

/* Í϶¯ÑéÖ¤ */

/* ·­Ò³Æ÷ */

/* ·­Ò³Æ÷ͼ±ê */
.pageination li {
    min-width: 32px;
    height: 32px;
    background: #fff;
    margin-right: 5px;
    line-height: 32px;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
}

    .pageination li i {
        font-size: 14px;
    }

        /* ½ûÓÃ״̬ */
        .pageination li i.ban {
            color: #ccc;
            cursor: not-allowed;
        }

    /* ÿҳ°´Å¥ */
    .pageination li a {
        min-width: 32px;
        height: 32px;
        display: block;
        line-height: 32px;
        text-align: center;
        font-size: 14px;
        color: #666;
        padding: 0 3px;
    }

        /* µ±Ç°Ò³ ºÍÊó±ê¾­¹ýʱ */
        .pageination li a.active,
        .pageination li a:hover {
            background-color: var(--main-color);
            color: var(--colorW);
        }

        /* ÉÏÏÂҳͼ±ê */
        .pageination li a i {
            color: #333;
        }

        .pageination li a:hover i {
            color: #fff;
        }

    /* ·­Ò³Æ÷×îºóÒ»Ïî */
    .pageination li:last-child {
        margin-right: 0;
    }

/* ·­Ò³Æ÷ */

/* checkbox */
.checkbox {
    align-items: center;
    cursor: pointer;
    display: flex;
}

    .checkbox .checkbox-frame {
        background-color: #fff;
        border: 1px solid #d4d4d4;
        border-radius: 4px;
        height: 16px;
        position: relative;
        width: 16px;
    }

    .checkbox.primary .checkbox-frame.active:after {
        background-color: var(--main-color);
        border-radius: 4px;
        content: "";
        height: 12px;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 12px;
    }

    .checkbox .checkbox-txt {
        flex: 1;
        font-size: 12px;
        margin-left: 5px;
    }

/* checkbox */

/* input */

.input {
    margin: 10px 0 30px;
    position: relative;
}

    .input input {
        border: 1px solid #e9e9e9;
        border-radius: 4px;
        height: 36px;
        padding: 6px 10px;
        width: 100%;
    }

        .input input:focus {
            border: 1px solid var(--main-color);
        }

        .input input::placeholder {
            color: #999;
        }

        .input input[type="number"] {
            outline: none;
        }

    .input label {
        color: #333;
        font-size: 14px;
        left: 0;
        padding: 5px 0px;
        pointer-events: none;
        position: absolute;
        top: -25px;
        transition: all 0.3s;
    }

        .input label span {
            background-color: var(--error-color);
            border-radius: 50%;
            display: inline-block;
            height: 4px;
            width: 4px;
            margin-right: 5px;
        }

/* input½áÊø */