.icon-font {
    overflow: hidden;
    width: 1em;
    height: 1em;
    padding: 0;
    margin: 0;
    fill: currentColor
}

.toast-view {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .4)
}

.toast-view, .toast-view__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.toast-view__content {
    position: absolute;
    top: 46%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 156px;
    height: 176px;
    padding-top: 32px;
    color: #fff;
    background: rgba(0, 0, 0, .88);
    -webkit-box-shadow: 0 24px 16px 0 rgba(0, 0, 0, .08);
    box-shadow: 0 24px 16px 0 rgba(0, 0, 0, .08);
    border-radius: 8px
}

.toast-view__content--large .toast-view__icon, .toast-view__content--large .toast-view__icon .icon-font {
    width: 72px;
    height: 72px
}

.toast-view__content--success {
    background: #fff
}

.toast-view__content--success .toast-view__message, .toast-view__content--success .toast-view__title {
    color: #000
}

.toast-view__icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff
}

.toast-view__icon, .toast-view__icon .icon-font {
    width: 40px;
    height: 40px
}

.toast-view__title {
    height: 22px;
    margin: 16px 0 0 0;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    text-align: center
}

.toast-view__message {
    overflow: hidden;
    width: 124px;
    min-height: 34px;
    max-height: 46px;
    margin: 4px 0 0 0;
    color: hsla(0, 0%, 100%, .64);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all
}

.toast-view-enter, .toast-view-leave-to {
    opacity: .1
}

.od-plugin-message-box[data-v-8eeff9b8] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .7)
}

.od-plugin-message-box__inner[data-v-8eeff9b8] {
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 280px;
    min-height: 178px;
    color: #000;
    -webkit-box-shadow: 0 16px 32px 2px rgba(0, 0, 0, .1);
    box-shadow: 0 16px 32px 2px rgba(0, 0, 0, .1);
    border-radius: 4px
}

.od-plugin-message-box__icon[data-v-8eeff9b8], .od-plugin-message-box__inner[data-v-8eeff9b8] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fff
}

.od-plugin-message-box__icon[data-v-8eeff9b8] {
    position: absolute;
    top: 0;
    left: 50%;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.od-plugin-message-box__icon-inner[data-v-8eeff9b8] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 64px;
    height: 64px;
    color: #fff;
    background: #34c75f;
    border-radius: 50%
}

.od-plugin-message-box__icon-inner .icon-font[data-v-8eeff9b8] {
    width: 40px;
    height: 40px
}

.od-plugin-message-box__main[data-v-8eeff9b8] {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
    padding: 54px 20px 32px 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.od-plugin-message-box__title[data-v-8eeff9b8] {
    display: block;
    color: #000;
    font-size: 18px;
    font-weight: 500;
    text-align: center
}

.od-plugin-message-box__content[data-v-8eeff9b8] {
    color: #636c78;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin: 12px 0 0 0;
    padding: 0;
    text-align: center;
    word-break: break-all
}

.od-plugin-message-box__footer[data-v-8eeff9b8] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 48px;
    color: #007aff;
    font-size: 16px;
    font-weight: 600;
    background: #fff;
    border-top: 1px solid #d9dcdf;
    border-radius: 0 0 4px 4px;
    cursor: pointer
}

.od-plugin-message-box__footer span[data-v-8eeff9b8] {
    cursor: pointer
}

.od-plugin-message-box-enter-active[data-v-8eeff9b8], .od-plugin-message-box-leave-active[data-v-8eeff9b8] {
    -webkit-transition: opacity .2s;
    transition: opacity .2s
}

.od-plugin-message-box-enter[data-v-8eeff9b8], .od-plugin-message-box-leave-to[data-v-8eeff9b8] {
    opacity: 0
}

.ui-result {
    padding-top: 100px
}

.ui-result__inner {
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 280px;
    min-height: 178px;
    color: #000;
    -webkit-box-shadow: 0 16px 32px 2px rgba(0, 0, 0, .1);
    box-shadow: 0 16px 32px 2px rgba(0, 0, 0, .1);
    border-radius: 4px
}

.ui-result__icon, .ui-result__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fff
}

.ui-result__icon {
    position: absolute;
    top: 20px;
    left: 50%;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.ui-result__icon-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 64px;
    height: 64px;
    color: #fff;
    background: #34c75f;
    border-radius: 50%
}

.ui-result__icon-inner .icon-font {
    width: 40px;
    height: 40px
}

.ui-result__title {
    color: #000;
    font-size: 24px;
    font-weight: 500;
    text-align: center
}

.ui-result__info {
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center
}

.ui-result__info span {
    font-size: 14px;
    color: #818181
}

.ui-result__info .goBtn {
    display: inline-block;
    padding-left: 2px;
    padding-right: 2px;
    color: #4545ff
}

.ui-result__activity {
    width: 100%;
    cursor: pointer
}

.ui-result__activity a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%
}

.ui-result__activity img {
    display: block;
    width: 100%
}

.ui-result__activity__close {
    position: absolute;
    right: -10px;
    top: -10px
}

.ui-result__activity__close-inner {
    width: 100px;
    height: 100px;
    padding: 5px;
    border-radius: 100%;
    font-size: 25px;
    color: #fff;
    background: rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 16px 32px 2px rgba(0, 0, 0, .1);
    box-shadow: 0 16px 32px 2px rgba(0, 0, 0, .1)
}

.close_result {
    position: absolute;
    right: 8px;
    top: 8px
}

.close_result .icon-font {
    width: 24px;
    height: 24px
}

.ui-dialog-backdrop {
    position: fixed;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: rgba(0, 0, 0, .6)
}

.ui-dialog, .ui-dialog-backdrop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ui-dialog {
    --height: 480px;
    --padding: 24px;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: var(--width);
    height: var(--height);
    border-radius: 8px;
    background-color: #fff;
    -webkit-box-shadow: 0 12px 16px 0 rgba(51, 51, 51, .08);
    box-shadow: 0 12px 16px 0 rgba(51, 51, 51, .08)
}

.ui-dialog--fit-height {
    position: absolute;
    top: 8px;
    height: calc(100vh - 16px)
}

.ui-dialog__header {
    height: 64px;
    padding: 0 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.ui-dialog__title {
    font-size: 16px;
    font-weight: 600
}

.ui-dialog__close {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    outline: 0;
    background-color: transparent;
    cursor: pointer
}

.ui-dialog__close > .icon-font {
    display: block;
    width: 100%;
    height: 100%;
    color: #ccc
}

.ui-dialog__content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow-y: auto;
    position: relative;
    padding: 0 32px
}

.ui-dialog__footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 70px;
    padding: 0 32px
}

.ui-dialog__confirm {
    margin-left: auto
}

.outside-advert-dialog .ui-dialog {
    background-color: transparent;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 32px;
    width: 100%;
    height: auto;
    position: relative;
    -webkit-box-shadow: none;
    box-shadow: none
}

.outside-advert-dialog .ui-dialog__content {
    border-radius: 5px;
    padding: 0;
    min-width: 310px;
    min-height: 177px;
    background-color: #fff;
    -webkit-box-flex: initial;
    -ms-flex: initial;
    flex: initial
}

.outside-advert-dialog .ui-dialog__content iframe {
    height: 340px
}

.share-image {
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7)
}

.share-image, .share-image__image {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.share-image__image {
    position: relative;
    height: 80%;
    width: 80%
}

.share-image__image > img {
    display: block;
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.share-image__close {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    cursor: pointer
}

.share-image__tip {
    top: calc(100% + 12px);
    line-height: 20px;
    font-weight: 600;
    text-align: center
}

.share-image__loading, .share-image__tip {
    position: absolute;
    left: 0;
    width: 100%;
    color: #fff;
    font-size: 14px
}

.share-image__loading {
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    background-color: #000;
    font-weight: 400
}

.share-image__loading > img {
    width: 35px;
    height: 35px;
    margin-bottom: 20px;
    -webkit-animation: animate-spin 1.8s linear 0s infinite;
    animation: animate-spin 1.8s linear 0s infinite
}

.share-image-fade-enter-active, .share-image-fade-leave-active {
    -webkit-transition: opacity .3s;
    transition: opacity .3s
}

.share-image-fade-enter, .share-image-fade-leave-to {
    opacity: 0
}

.share-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7)
}

.share-link__guide {
    position: absolute;
    top: 4.8vw;
    right: 6vw;
    width: 62.4vw
}

.share-link__close {
    position: absolute;
    left: calc(50% - 16.4vw);
    bottom: 10.6vw;
    width: 32.8vw;
    height: 13.6vw;
    padding: 0;
    border: 0;
    outline: 0;
    background-image: url(../img/wx_tip_share_close_2x.19021bb4.png);
    background-size: 100%;
    background-color: transparent;
    color: transparent
}

:root {
    --global-font-family: Alibaba Sans, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    --blue: #2254f4;
    --blue-9: #001182;
    --blue-8: #0722a8;
    --blue-7: #1338cf;
    --blue-6: #2254f4;
    --blue-5: #4d7cff;
    --blue-4: #759fff;
    --blue-3: #9ebeff;
    --blue-2: #c7dbff;
    --blue-1: #f0f6ff;
    --red: #f54531;
    --red-9: #820707;
    --red-8: #a81611;
    --red-7: #cf2b1f;
    --red-6: #f54531;
    --red-5: #ff725c;
    --red-4: #ff9985;
    --red-3: #ffbead;
    --red-2: #ffe0d6;
    --red-1: #fff4f0;
    --green: #24b35f;
    --green-9: #034022;
    --green-8: #0a6637;
    --green-7: #158c4b;
    --green-6: #24b35f;
    --green-5: #45bf74;
    --green-4: #6acc8c;
    --green-3: #93d9a9;
    --green-2: #c1e6cb;
    --green-1: #e4f2e7;
    --yellow: #faaa32;
    --yellow-9: #874707;
    --yellow-8: #ad6511;
    --yellow-7: #d48620;
    --yellow-6: #faaa32;
    --yellow-5: #ffc35c;
    --yellow-4: #ffd685;
    --yellow-3: #ffe7ad;
    --yellow-2: #fff4d6;
    --yellow-1: #fffbf0;
    --black: #000;
    --black-9: #33383e;
    --black-8: #636c78;
    --black-7: #7f8792;
    --black-6: #9da3ac;
    --black-5: #b4b8bf;
    --black-4: #d9dcdf;
    --black-3: #e8eaec;
    --black-2: #f1f2f4;
    --black-1: #f6f7f9;
    --primary: var(--blue);
    --warning: var(--yellow);
    --danger: var(--red);
    --success: var(--green);
    --text-title: var(--black);
    --text-emphasis: var(--black);
    --text-default: var(--black-9);
    --text-secondary: var(--black-8);
    --text-tertiary: var(--black-6);
    --text-placeholder: var(--black-5);
    --icon-default: var(--black-9);
    --icon-secondary: var(--black-5);
    --bg-primary: var(--blue-1);
    --bg-caution: var(--yellow-1);
    --bg-error: var(--red-1);
    --bg-success: var(--green-1);
    --bg-light: var(--black-1);
    --stroke: var(--black-3);
    --border: 1px solid var(--stroke);
    --disabled: 0.4;
    --text-prim: var(--text-default);
    --text-sec: var(--text-secondary);
    --text-ter: var(--text-tertiary);
    --panel-stroke: var(--stroke);
    --caution: var(--warning);
    --error: var(--danger);
    --text-dis: #bec3c9;
    --bg-reg: #f0f3f4;
    --stroke-hover: #bec3c9;
    --panel-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.08);
    --odyssey-editor-header-height: 54px;
    --odyssey-editor-navbars-width: 65px;
    --odyssey-editor-operator-width: 276px;
    --odyssey-editor-current-layout-border: 2px
}

@-webkit-keyframes animate-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes animate-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.icon-animation--spin {
    -webkit-animation: animate-spin 1.8s linear 0s infinite;
    animation: animate-spin 1.8s linear 0s infinite
}

.fade-move-v-enter-active {
    -webkit-animation: fade-move-in 1s cubic-bezier(.401221, 0, .297697, 1);
    animation: fade-move-in 1s cubic-bezier(.401221, 0, .297697, 1)
}

.fade-move-v-leave-active {
    -webkit-animation: fade-move-out 1s cubic-bezier(.400796, 0, .298444, .997314);
    animation: fade-move-out 1s cubic-bezier(.400796, 0, .298444, .997314)
}

.backward .fade-move-v-enter-active {
    -webkit-animation-name: fade-move-out;
    animation-name: fade-move-out;
    animation-direction: reverse
}

.backward .fade-move-v-leave-active {
    -webkit-animation-name: fade-move-in;
    animation-name: fade-move-in;
    animation-direction: reverse
}

@-webkit-keyframes fade-move-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fade-move-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes fade-move-out {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

@keyframes fade-move-out {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

.fade-move-h-enter-active {
    -webkit-animation: fade-move-in-h 1s cubic-bezier(.401221, 0, .297697, 1);
    animation: fade-move-in-h 1s cubic-bezier(.401221, 0, .297697, 1)
}

.fade-move-h-leave-active {
    -webkit-animation: fade-move-out-h 1s cubic-bezier(.400796, 0, .298444, .997314);
    animation: fade-move-out-h 1s cubic-bezier(.400796, 0, .298444, .997314)
}

.backward .fade-move-h-enter-active {
    -webkit-animation-name: fade-move-out-h;
    animation-name: fade-move-out-h;
    animation-direction: reverse
}

.backward .fade-move-h-leave-active {
    -webkit-animation-name: fade-move-in-h;
    animation-name: fade-move-in-h;
    animation-direction: reverse
}

@-webkit-keyframes fade-move-in-h {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fade-move-in-h {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes fade-move-out-h {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

@keyframes fade-move-out-h {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

.fade-h-enter-active, .fade-v-enter-active {
    -webkit-animation: fade 1s ease-in-out;
    animation: fade 1s ease-in-out
}

.fade-h-leave-active, .fade-v-leave-active {
    animation: fade 1s ease-in-out reverse
}

@-webkit-keyframes fade {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fade {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.move-v-enter-active {
    -webkit-animation: move-in 1s;
    animation: move-in 1s;
    -webkit-animation-timing-function: cubic-bezier(.497059, 0, .498117, .995972);
    animation-timing-function: cubic-bezier(.497059, 0, .498117, .995972)
}

.move-v-leave-active {
    -webkit-animation: move-out 1s;
    animation: move-out 1s;
    -webkit-animation-timing-function: cubic-bezier(.497059, 0, .498117, .995972);
    animation-timing-function: cubic-bezier(.497059, 0, .498117, .995972)
}

.backward .move-v-enter-active {
    -webkit-animation-name: move-out;
    animation-name: move-out;
    animation-direction: reverse
}

.backward .move-v-leave-active {
    -webkit-animation-name: move-in;
    animation-name: move-in;
    animation-direction: reverse
}

@-webkit-keyframes move-in {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes move-in {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes move-out {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

@keyframes move-out {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

.move-h-enter-active {
    -webkit-animation: move-in-h 1s;
    animation: move-in-h 1s;
    -webkit-animation-timing-function: cubic-bezier(.497059, 0, .498117, .995972);
    animation-timing-function: cubic-bezier(.497059, 0, .498117, .995972)
}

.move-h-leave-active {
    -webkit-animation: move-out-h 1s;
    animation: move-out-h 1s;
    -webkit-animation-timing-function: cubic-bezier(.497059, 0, .498117, .995972);
    animation-timing-function: cubic-bezier(.497059, 0, .498117, .995972)
}

.backward .move-h-enter-active {
    -webkit-animation-name: move-out-h;
    animation-name: move-out-h;
    animation-direction: reverse
}

.backward .move-h-leave-active {
    -webkit-animation-name: move-in-h;
    animation-name: move-in-h;
    animation-direction: reverse
}

@-webkit-keyframes move-in-h {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes move-in-h {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes move-out-h {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

@keyframes move-out-h {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

.backward .slide-out-h-leave-active, .backward .slide-out-v-leave-active, .slide-out-h-enter-active, .slide-out-v-enter-active {
    -webkit-animation: still 1s;
    animation: still 1s;
    z-index: auto
}

.backward .slide-out-v-enter-active, .slide-out-v-leave-active {
    -webkit-animation: slide-out 1s cubic-bezier(.37468, 0, .475205, .0876854);
    animation: slide-out 1s cubic-bezier(.37468, 0, .475205, .0876854);
    z-index: 2
}

.backward .slide-out-v-enter-active {
    animation-direction: reverse
}

@-webkit-keyframes slide-out {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

@keyframes slide-out {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

.backward .slide-out-h-enter-active, .slide-out-h-leave-active {
    -webkit-animation: slide-out-h 1s cubic-bezier(.37468, 0, .475205, .0876854);
    animation: slide-out-h 1s cubic-bezier(.37468, 0, .475205, .0876854);
    z-index: 2
}

.backward .slide-out-h-enter-active {
    animation-direction: reverse
}

@-webkit-keyframes slide-out-h {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

@keyframes slide-out-h {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

.backward .slide-in-v-leave-active, .slide-in-v-enter-active {
    -webkit-animation: slide-in 1s cubic-bezier(.553189, .801815, .601895, 1);
    animation: slide-in 1s cubic-bezier(.553189, .801815, .601895, 1)
}

.backward .slide-in-h-enter-active, .backward .slide-in-v-enter-active, .slide-in-h-leave-active, .slide-in-v-leave-active {
    -webkit-animation: still 1s;
    animation: still 1s
}

.backward .slide-in-v-leave-active {
    animation-direction: reverse
}

@-webkit-keyframes slide-in {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes slide-in {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.backward .slide-in-h-leave-active, .slide-in-h-enter-active {
    -webkit-animation: slide-in-h 1s cubic-bezier(.553189, .801815, .601895, 1);
    animation: slide-in-h 1s cubic-bezier(.553189, .801815, .601895, 1)
}

.backward .slide-in-h-leave-active {
    animation-direction: reverse
}

@-webkit-keyframes slide-in-h {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes slide-in-h {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.rotate-h-enter-active, .rotate-v-enter-active {
    -webkit-animation: still 1.5s;
    animation: still 1.5s
}

.rotate-v-leave-active {
    -webkit-animation: rotate 1.5s;
    animation: rotate 1.5s;
    z-index: 2;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@-webkit-keyframes rotate {
    0% {
        opacity: 1;
        -webkit-transform: rotateX(0rad);
        transform: rotateX(0rad);
        -webkit-animation-timing-function: cubic-bezier(.285848, 0, .699253, 1);
        animation-timing-function: cubic-bezier(.285848, 0, .699253, 1)
    }
    18.9999% {
        -webkit-transform: rotateX(.0698132rad);
        transform: rotateX(.0698132rad);
        -webkit-animation-timing-function: cubic-bezier(.285848, 0, .699253, 1);
        animation-timing-function: cubic-bezier(.285848, 0, .699253, 1)
    }
    19% {
        opacity: 1;
        -webkit-transform: rotateX(.0698132rad);
        transform: rotateX(.0698132rad);
        -webkit-animation-timing-function: cubic-bezier(.304773, 0, .664011, 1);
        animation-timing-function: cubic-bezier(.304773, 0, .664011, 1)
    }
    65.9999% {
        -webkit-transform: rotateX(-3.20268rad);
        transform: rotateX(-3.20268rad);
        -webkit-animation-timing-function: cubic-bezier(.304773, 0, .664011, 1);
        animation-timing-function: cubic-bezier(.304773, 0, .664011, 1)
    }
    66% {
        -webkit-transform: rotateX(-3.20268rad);
        transform: rotateX(-3.20268rad);
        -webkit-animation-timing-function: cubic-bezier(.363035, 0, .745646, 1);
        animation-timing-function: cubic-bezier(.363035, 0, .745646, 1)
    }
    79.9999% {
        -webkit-transform: rotateX(-3.10669rad);
        transform: rotateX(-3.10669rad);
        -webkit-animation-timing-function: cubic-bezier(.363035, 0, .745646, 1);
        animation-timing-function: cubic-bezier(.363035, 0, .745646, 1)
    }
    80% {
        -webkit-transform: rotateX(-3.10669rad);
        transform: rotateX(-3.10669rad);
        -webkit-animation-timing-function: cubic-bezier(.250902, 0, .507943, .998066);
        animation-timing-function: cubic-bezier(.250902, 0, .507943, .998066)
    }
    to {
        opacity: .5;
        -webkit-transform: rotateX(-3.14159rad);
        transform: rotateX(-3.14159rad)
    }
}

@keyframes rotate {
    0% {
        opacity: 1;
        -webkit-transform: rotateX(0rad);
        transform: rotateX(0rad);
        -webkit-animation-timing-function: cubic-bezier(.285848, 0, .699253, 1);
        animation-timing-function: cubic-bezier(.285848, 0, .699253, 1)
    }
    18.9999% {
        -webkit-transform: rotateX(.0698132rad);
        transform: rotateX(.0698132rad);
        -webkit-animation-timing-function: cubic-bezier(.285848, 0, .699253, 1);
        animation-timing-function: cubic-bezier(.285848, 0, .699253, 1)
    }
    19% {
        opacity: 1;
        -webkit-transform: rotateX(.0698132rad);
        transform: rotateX(.0698132rad);
        -webkit-animation-timing-function: cubic-bezier(.304773, 0, .664011, 1);
        animation-timing-function: cubic-bezier(.304773, 0, .664011, 1)
    }
    65.9999% {
        -webkit-transform: rotateX(-3.20268rad);
        transform: rotateX(-3.20268rad);
        -webkit-animation-timing-function: cubic-bezier(.304773, 0, .664011, 1);
        animation-timing-function: cubic-bezier(.304773, 0, .664011, 1)
    }
    66% {
        -webkit-transform: rotateX(-3.20268rad);
        transform: rotateX(-3.20268rad);
        -webkit-animation-timing-function: cubic-bezier(.363035, 0, .745646, 1);
        animation-timing-function: cubic-bezier(.363035, 0, .745646, 1)
    }
    79.9999% {
        -webkit-transform: rotateX(-3.10669rad);
        transform: rotateX(-3.10669rad);
        -webkit-animation-timing-function: cubic-bezier(.363035, 0, .745646, 1);
        animation-timing-function: cubic-bezier(.363035, 0, .745646, 1)
    }
    80% {
        -webkit-transform: rotateX(-3.10669rad);
        transform: rotateX(-3.10669rad);
        -webkit-animation-timing-function: cubic-bezier(.250902, 0, .507943, .998066);
        animation-timing-function: cubic-bezier(.250902, 0, .507943, .998066)
    }
    to {
        opacity: .5;
        -webkit-transform: rotateX(-3.14159rad);
        transform: rotateX(-3.14159rad)
    }
}

.rotate-h-leave-active {
    -webkit-animation: rotate-h 1.5s;
    animation: rotate-h 1.5s;
    z-index: 2;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@-webkit-keyframes rotate-h {
    0% {
        opacity: 1;
        -webkit-transform: rotateY(0rad);
        transform: rotateY(0rad);
        -webkit-animation-timing-function: cubic-bezier(.285848, 0, .699253, 1);
        animation-timing-function: cubic-bezier(.285848, 0, .699253, 1)
    }
    18.9999% {
        -webkit-transform: rotateY(.0698132rad);
        transform: rotateY(.0698132rad);
        -webkit-animation-timing-function: cubic-bezier(.285848, 0, .699253, 1);
        animation-timing-function: cubic-bezier(.285848, 0, .699253, 1)
    }
    19% {
        opacity: 1;
        -webkit-transform: rotateY(.0698132rad);
        transform: rotateY(.0698132rad);
        -webkit-animation-timing-function: cubic-bezier(.304773, 0, .664011, 1);
        animation-timing-function: cubic-bezier(.304773, 0, .664011, 1)
    }
    65.9999% {
        -webkit-transform: rotateY(-3.20268rad);
        transform: rotateY(-3.20268rad);
        -webkit-animation-timing-function: cubic-bezier(.304773, 0, .664011, 1);
        animation-timing-function: cubic-bezier(.304773, 0, .664011, 1)
    }
    66% {
        -webkit-transform: rotateY(-3.20268rad);
        transform: rotateY(-3.20268rad);
        -webkit-animation-timing-function: cubic-bezier(.363035, 0, .745646, 1);
        animation-timing-function: cubic-bezier(.363035, 0, .745646, 1)
    }
    79.9999% {
        -webkit-transform: rotateY(-3.10669rad);
        transform: rotateY(-3.10669rad);
        -webkit-animation-timing-function: cubic-bezier(.363035, 0, .745646, 1);
        animation-timing-function: cubic-bezier(.363035, 0, .745646, 1)
    }
    80% {
        -webkit-transform: rotateY(-3.10669rad);
        transform: rotateY(-3.10669rad);
        -webkit-animation-timing-function: cubic-bezier(.250902, 0, .507943, .998066);
        animation-timing-function: cubic-bezier(.250902, 0, .507943, .998066)
    }
    to {
        opacity: .5;
        -webkit-transform: rotateY(-3.14159rad);
        transform: rotateY(-3.14159rad)
    }
}

@keyframes rotate-h {
    0% {
        opacity: 1;
        -webkit-transform: rotateY(0rad);
        transform: rotateY(0rad);
        -webkit-animation-timing-function: cubic-bezier(.285848, 0, .699253, 1);
        animation-timing-function: cubic-bezier(.285848, 0, .699253, 1)
    }
    18.9999% {
        -webkit-transform: rotateY(.0698132rad);
        transform: rotateY(.0698132rad);
        -webkit-animation-timing-function: cubic-bezier(.285848, 0, .699253, 1);
        animation-timing-function: cubic-bezier(.285848, 0, .699253, 1)
    }
    19% {
        opacity: 1;
        -webkit-transform: rotateY(.0698132rad);
        transform: rotateY(.0698132rad);
        -webkit-animation-timing-function: cubic-bezier(.304773, 0, .664011, 1);
        animation-timing-function: cubic-bezier(.304773, 0, .664011, 1)
    }
    65.9999% {
        -webkit-transform: rotateY(-3.20268rad);
        transform: rotateY(-3.20268rad);
        -webkit-animation-timing-function: cubic-bezier(.304773, 0, .664011, 1);
        animation-timing-function: cubic-bezier(.304773, 0, .664011, 1)
    }
    66% {
        -webkit-transform: rotateY(-3.20268rad);
        transform: rotateY(-3.20268rad);
        -webkit-animation-timing-function: cubic-bezier(.363035, 0, .745646, 1);
        animation-timing-function: cubic-bezier(.363035, 0, .745646, 1)
    }
    79.9999% {
        -webkit-transform: rotateY(-3.10669rad);
        transform: rotateY(-3.10669rad);
        -webkit-animation-timing-function: cubic-bezier(.363035, 0, .745646, 1);
        animation-timing-function: cubic-bezier(.363035, 0, .745646, 1)
    }
    80% {
        -webkit-transform: rotateY(-3.10669rad);
        transform: rotateY(-3.10669rad);
        -webkit-animation-timing-function: cubic-bezier(.250902, 0, .507943, .998066);
        animation-timing-function: cubic-bezier(.250902, 0, .507943, .998066)
    }
    to {
        opacity: .5;
        -webkit-transform: rotateY(-3.14159rad);
        transform: rotateY(-3.14159rad)
    }
}

.fly-h-enter-active, .fly-v-enter-active {
    -webkit-animation: fly 1s linear;
    animation: fly 1s linear;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    z-index: 2
}

.fly-h-leave-active, .fly-v-leave-active {
    -webkit-animation: still 1s;
    animation: still 1s
}

@-webkit-keyframes fly {
    0% {
        -webkit-transform: matrix3d(-.000403229, -.000771761, 0, 0, -.000540624, .000282465, -.000621407, 0, .000550763, -.000287762, -.000609968, 0, 68.0588, 184.19, .114357, 1);
        transform: matrix3d(-.000403229, -.000771761, 0, 0, -.000540624, .000282465, -.000621407, 0, .000550763, -.000287762, -.000609968, 0, 68.0588, 184.19, .114357, 1)
    }
    6.6667% {
        -webkit-transform: matrix3d(-.00118472, -.00317238, 0, 0, -.00218904, .000817497, -.00245099, 0, .0022961, -.000857476, -.00233671, 0, 103.847, 217.2, .530186, 1);
        transform: matrix3d(-.00118472, -.00317238, 0, 0, -.00218904, .000817497, -.00245099, 0, .0022961, -.000857476, -.00233671, 0, 103.847, 217.2, .530186, 1)
    }
    13.3333% {
        -webkit-transform: matrix3d(-.0020723, -.00966941, 0, 0, -.00647954, .00138866, -.00734024, 0, .00717726, -.0015382, -.00662667, 0, 143.325, 255.247, 1.8478, 1);
        transform: matrix3d(-.0020723, -.00966941, 0, 0, -.00647954, .00138866, -.00734024, 0, .00717726, -.0015382, -.00662667, 0, 143.325, 255.247, 1.8478, 1)
    }
    20% {
        -webkit-transform: matrix3d(-.00110483, -.0236414, 0, 0, -.0150321, .000702492, -.0182669, 0, .018247, -.000852735, -.0150485, 0, 184.314, 297.532, 5.237, 1);
        transform: matrix3d(-.00110483, -.0236414, 0, 0, -.0150321, .000702492, -.0182669, 0, .018247, -.000852735, -.0150485, 0, 184.314, 297.532, 5.237, 1)
    }
    26.6667% {
        -webkit-transform: matrix3d(.00639241, -.0484232, 0, 0, -.0281255, -.00371289, -.0397598, 0, .0394178, .0052036, -.0283695, 0, 223.765, 343.887, 12.5971, 1);
        transform: matrix3d(.00639241, -.0484232, 0, 0, -.0281255, -.00371289, -.0397598, 0, .0394178, .0052036, -.0283695, 0, 223.765, 343.887, 12.5971, 1)
    }
    33.3333% {
        -webkit-transform: matrix3d(.0280425, -.0852633, 0, 0, -.0423849, -.0139401, -.0778807, 0, .0739821, .0243322, -.0446185, 0, 256.319, 393.304, 26.2861, 1);
        transform: matrix3d(.0280425, -.0852633, 0, 0, -.0423849, -.0139401, -.0778807, 0, .0739821, .0243322, -.0446185, 0, 256.319, 393.304, 26.2861, 1)
    }
    40% {
        -webkit-transform: matrix3d(.0729349, -.131138, 0, 0, -.0492842, -.0274103, -.139056, 0, .121525, .0675883, -.0563937, 0, 273.765, 440.42, 47.9159, 1);
        transform: matrix3d(.0729349, -.131138, 0, 0, -.0492842, -.0274103, -.139056, 0, .121525, .0675883, -.0563937, 0, 273.765, 440.42, 47.9159, 1)
    }
    46.6667% {
        -webkit-transform: matrix3d(.14843, -.17788, 0, 0, -.0372727, -.0311016, -.226531, 0, .173932, .145135, -.0485445, 0, 267.743, 472.21, 75.9115, 1);
        transform: matrix3d(.14843, -.17788, 0, 0, -.0372727, -.0311016, -.226531, 0, .173932, .145135, -.0485445, 0, 267.743, 472.21, 75.9115, 1)
    }
    53.3333% {
        -webkit-transform: matrix3d(.256491, -.213788, 0, 0, .000660201, .000792075, -.333904, 0, .213787, .25649, .00103114, 0, 235.874, 470.092, 102.899, 1);
        transform: matrix3d(.256491, -.213788, 0, 0, .000660201, .000792075, -.333904, 0, .213787, .25649, .00103114, 0, 235.874, 470.092, 102.899, 1)
    }
    60% {
        -webkit-transform: matrix3d(.391485, -.227587, 0, 0, .0571569, .0983188, -.438318, 0, .220293, .378938, .113726, 0, 186.381, 420.807, 116.296, 1);
        transform: matrix3d(.391485, -.227587, 0, 0, .0571569, .0983188, -.438318, 0, .220293, .378938, .113726, 0, 186.381, 420.807, 116.296, 1)
    }
    66.6667% {
        -webkit-transform: matrix3d(.540803, -.213099, 0, 0, .108131, .274416, -.500883, 0, .183627, .466009, .294951, 0, 134.332, 329.786, 105.51, 1);
        transform: matrix3d(.540803, -.213099, 0, 0, .108131, .274416, -.500883, 0, .183627, .466009, .294951, 0, 134.332, 329.786, 105.51, 1)
    }
    73.3333% {
        -webkit-transform: matrix3d(.688115, -.172331, 0, 0, .126282, .504241, -.482695, 0, .117264, .468235, .519813, 0, 90.6604, 222.173, 72.5875, 1);
        transform: matrix3d(.688115, -.172331, 0, 0, .126282, .504241, -.482695, 0, .117264, .468235, .519813, 0, 90.6604, 222.173, 72.5875, 1)
    }
    80% {
        -webkit-transform: matrix3d(.817582, -.115487, 0, 0, .103018, .729312, -.373189, 0, .0521962, .36952, .736552, 0, 56.219, 126.209, 34.3603, 1);
        transform: matrix3d(.817582, -.115487, 0, 0, .103018, .729312, -.373189, 0, .0521962, .36952, .736552, 0, 56.219, 126.209, 34.3603, 1)
    }
    86.6667% {
        -webkit-transform: matrix3d(.917035, -.0579446, 0, 0, .0564283, .893039, -.208826, 0, .0131688, .20841, .894819, 0, 28.0534, 56.3219, 9.07775, 1);
        transform: matrix3d(.917035, -.0579446, 0, 0, .0564283, .893039, -.208826, 0, .0131688, .20841, .894819, 0, 28.0534, 56.3219, 9.07775, 1)
    }
    93.3333% {
        -webkit-transform: matrix3d(.979017, -.0155549, 0, 0, .015525, .977129, -.0607776, 0, .000965533, .06077, .977253, 0, 7.65253, 14.2679, .68495, 1);
        transform: matrix3d(.979017, -.0155549, 0, 0, .015525, .977129, -.0607776, 0, .000965533, .06077, .977253, 0, 7.65253, 14.2679, .68495, 1)
    }
    to {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0)
    }
}

@keyframes fly {
    0% {
        -webkit-transform: matrix3d(-.000403229, -.000771761, 0, 0, -.000540624, .000282465, -.000621407, 0, .000550763, -.000287762, -.000609968, 0, 68.0588, 184.19, .114357, 1);
        transform: matrix3d(-.000403229, -.000771761, 0, 0, -.000540624, .000282465, -.000621407, 0, .000550763, -.000287762, -.000609968, 0, 68.0588, 184.19, .114357, 1)
    }
    6.6667% {
        -webkit-transform: matrix3d(-.00118472, -.00317238, 0, 0, -.00218904, .000817497, -.00245099, 0, .0022961, -.000857476, -.00233671, 0, 103.847, 217.2, .530186, 1);
        transform: matrix3d(-.00118472, -.00317238, 0, 0, -.00218904, .000817497, -.00245099, 0, .0022961, -.000857476, -.00233671, 0, 103.847, 217.2, .530186, 1)
    }
    13.3333% {
        -webkit-transform: matrix3d(-.0020723, -.00966941, 0, 0, -.00647954, .00138866, -.00734024, 0, .00717726, -.0015382, -.00662667, 0, 143.325, 255.247, 1.8478, 1);
        transform: matrix3d(-.0020723, -.00966941, 0, 0, -.00647954, .00138866, -.00734024, 0, .00717726, -.0015382, -.00662667, 0, 143.325, 255.247, 1.8478, 1)
    }
    20% {
        -webkit-transform: matrix3d(-.00110483, -.0236414, 0, 0, -.0150321, .000702492, -.0182669, 0, .018247, -.000852735, -.0150485, 0, 184.314, 297.532, 5.237, 1);
        transform: matrix3d(-.00110483, -.0236414, 0, 0, -.0150321, .000702492, -.0182669, 0, .018247, -.000852735, -.0150485, 0, 184.314, 297.532, 5.237, 1)
    }
    26.6667% {
        -webkit-transform: matrix3d(.00639241, -.0484232, 0, 0, -.0281255, -.00371289, -.0397598, 0, .0394178, .0052036, -.0283695, 0, 223.765, 343.887, 12.5971, 1);
        transform: matrix3d(.00639241, -.0484232, 0, 0, -.0281255, -.00371289, -.0397598, 0, .0394178, .0052036, -.0283695, 0, 223.765, 343.887, 12.5971, 1)
    }
    33.3333% {
        -webkit-transform: matrix3d(.0280425, -.0852633, 0, 0, -.0423849, -.0139401, -.0778807, 0, .0739821, .0243322, -.0446185, 0, 256.319, 393.304, 26.2861, 1);
        transform: matrix3d(.0280425, -.0852633, 0, 0, -.0423849, -.0139401, -.0778807, 0, .0739821, .0243322, -.0446185, 0, 256.319, 393.304, 26.2861, 1)
    }
    40% {
        -webkit-transform: matrix3d(.0729349, -.131138, 0, 0, -.0492842, -.0274103, -.139056, 0, .121525, .0675883, -.0563937, 0, 273.765, 440.42, 47.9159, 1);
        transform: matrix3d(.0729349, -.131138, 0, 0, -.0492842, -.0274103, -.139056, 0, .121525, .0675883, -.0563937, 0, 273.765, 440.42, 47.9159, 1)
    }
    46.6667% {
        -webkit-transform: matrix3d(.14843, -.17788, 0, 0, -.0372727, -.0311016, -.226531, 0, .173932, .145135, -.0485445, 0, 267.743, 472.21, 75.9115, 1);
        transform: matrix3d(.14843, -.17788, 0, 0, -.0372727, -.0311016, -.226531, 0, .173932, .145135, -.0485445, 0, 267.743, 472.21, 75.9115, 1)
    }
    53.3333% {
        -webkit-transform: matrix3d(.256491, -.213788, 0, 0, .000660201, .000792075, -.333904, 0, .213787, .25649, .00103114, 0, 235.874, 470.092, 102.899, 1);
        transform: matrix3d(.256491, -.213788, 0, 0, .000660201, .000792075, -.333904, 0, .213787, .25649, .00103114, 0, 235.874, 470.092, 102.899, 1)
    }
    60% {
        -webkit-transform: matrix3d(.391485, -.227587, 0, 0, .0571569, .0983188, -.438318, 0, .220293, .378938, .113726, 0, 186.381, 420.807, 116.296, 1);
        transform: matrix3d(.391485, -.227587, 0, 0, .0571569, .0983188, -.438318, 0, .220293, .378938, .113726, 0, 186.381, 420.807, 116.296, 1)
    }
    66.6667% {
        -webkit-transform: matrix3d(.540803, -.213099, 0, 0, .108131, .274416, -.500883, 0, .183627, .466009, .294951, 0, 134.332, 329.786, 105.51, 1);
        transform: matrix3d(.540803, -.213099, 0, 0, .108131, .274416, -.500883, 0, .183627, .466009, .294951, 0, 134.332, 329.786, 105.51, 1)
    }
    73.3333% {
        -webkit-transform: matrix3d(.688115, -.172331, 0, 0, .126282, .504241, -.482695, 0, .117264, .468235, .519813, 0, 90.6604, 222.173, 72.5875, 1);
        transform: matrix3d(.688115, -.172331, 0, 0, .126282, .504241, -.482695, 0, .117264, .468235, .519813, 0, 90.6604, 222.173, 72.5875, 1)
    }
    80% {
        -webkit-transform: matrix3d(.817582, -.115487, 0, 0, .103018, .729312, -.373189, 0, .0521962, .36952, .736552, 0, 56.219, 126.209, 34.3603, 1);
        transform: matrix3d(.817582, -.115487, 0, 0, .103018, .729312, -.373189, 0, .0521962, .36952, .736552, 0, 56.219, 126.209, 34.3603, 1)
    }
    86.6667% {
        -webkit-transform: matrix3d(.917035, -.0579446, 0, 0, .0564283, .893039, -.208826, 0, .0131688, .20841, .894819, 0, 28.0534, 56.3219, 9.07775, 1);
        transform: matrix3d(.917035, -.0579446, 0, 0, .0564283, .893039, -.208826, 0, .0131688, .20841, .894819, 0, 28.0534, 56.3219, 9.07775, 1)
    }
    93.3333% {
        -webkit-transform: matrix3d(.979017, -.0155549, 0, 0, .015525, .977129, -.0607776, 0, .000965533, .06077, .977253, 0, 7.65253, 14.2679, .68495, 1);
        transform: matrix3d(.979017, -.0155549, 0, 0, .015525, .977129, -.0607776, 0, .000965533, .06077, .977253, 0, 7.65253, 14.2679, .68495, 1)
    }
    to {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0)
    }
}

.backward .rotate-3d-v-leave-active, .rotate-3d-v-enter-active {
    -webkit-animation: rotate-3d-in 1s;
    animation: rotate-3d-in 1s;
    -webkit-transform-origin-z: -100vh
}

.backward .rotate-3d-v-enter-active, .rotate-3d-v-leave-active {
    -webkit-animation: rotate-3d-out 1s;
    animation: rotate-3d-out 1s;
    -webkit-transform-origin-z: -100vh
}

.rotate-3d-v-leave-active {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.backward .rotate-3d-v-enter-active, .backward .rotate-3d-v-leave-active {
    animation-direction: reverse
}

@-webkit-keyframes rotate-3d-in {
    0% {
        opacity: 0;
        -webkit-transform: rotateX(-1.5708rad);
        transform: rotateX(-1.5708rad);
        -webkit-animation-timing-function: cubic-bezier(.30636, 0, .698353, 1);
        animation-timing-function: cubic-bezier(.30636, 0, .698353, 1)
    }
    14.9999% {
        -webkit-transform: rotateX(-1.6708rad);
        transform: rotateX(-1.6708rad);
        -webkit-animation-timing-function: cubic-bezier(.30636, 0, .698353, 1);
        animation-timing-function: cubic-bezier(.30636, 0, .698353, 1)
    }
    15% {
        -webkit-transform: rotateX(-1.6708rad);
        transform: rotateX(-1.6708rad);
        -webkit-animation-timing-function: cubic-bezier(.297268, 0, .697535, 1);
        animation-timing-function: cubic-bezier(.297268, 0, .697535, 1)
    }
    30% {
        opacity: 0
    }
    54.9999% {
        -webkit-transform: rotateX(.1rad);
        transform: rotateX(.1rad);
        -webkit-animation-timing-function: cubic-bezier(.297268, 0, .697535, 1);
        animation-timing-function: cubic-bezier(.297268, 0, .697535, 1)
    }
    55% {
        -webkit-transform: rotateX(.1rad);
        transform: rotateX(.1rad);
        -webkit-animation-timing-function: cubic-bezier(.30823, 0, .702561, 1);
        animation-timing-function: cubic-bezier(.30823, 0, .702561, 1)
    }
    77.4999% {
        -webkit-transform: rotateX(-.03rad);
        transform: rotateX(-.03rad);
        -webkit-animation-timing-function: cubic-bezier(.30823, 0, .702561, 1);
        animation-timing-function: cubic-bezier(.30823, 0, .702561, 1)
    }
    77.5% {
        -webkit-transform: rotateX(-.03rad);
        transform: rotateX(-.03rad);
        -webkit-animation-timing-function: cubic-bezier(.296901, 0, .693286, 1);
        animation-timing-function: cubic-bezier(.296901, 0, .693286, 1)
    }
    to {
        opacity: 1;
        -webkit-transform: rotateX(0rad);
        transform: rotateX(0rad)
    }
}

@keyframes rotate-3d-in {
    0% {
        opacity: 0;
        -webkit-transform: rotateX(-1.5708rad);
        transform: rotateX(-1.5708rad);
        -webkit-animation-timing-function: cubic-bezier(.30636, 0, .698353, 1);
        animation-timing-function: cubic-bezier(.30636, 0, .698353, 1)
    }
    14.9999% {
        -webkit-transform: rotateX(-1.6708rad);
        transform: rotateX(-1.6708rad);
        -webkit-animation-timing-function: cubic-bezier(.30636, 0, .698353, 1);
        animation-timing-function: cubic-bezier(.30636, 0, .698353, 1)
    }
    15% {
        -webkit-transform: rotateX(-1.6708rad);
        transform: rotateX(-1.6708rad);
        -webkit-animation-timing-function: cubic-bezier(.297268, 0, .697535, 1);
        animation-timing-function: cubic-bezier(.297268, 0, .697535, 1)
    }
    30% {
        opacity: 0
    }
    54.9999% {
        -webkit-transform: rotateX(.1rad);
        transform: rotateX(.1rad);
        -webkit-animation-timing-function: cubic-bezier(.297268, 0, .697535, 1);
        animation-timing-function: cubic-bezier(.297268, 0, .697535, 1)
    }
    55% {
        -webkit-transform: rotateX(.1rad);
        transform: rotateX(.1rad);
        -webkit-animation-timing-function: cubic-bezier(.30823, 0, .702561, 1);
        animation-timing-function: cubic-bezier(.30823, 0, .702561, 1)
    }
    77.4999% {
        -webkit-transform: rotateX(-.03rad);
        transform: rotateX(-.03rad);
        -webkit-animation-timing-function: cubic-bezier(.30823, 0, .702561, 1);
        animation-timing-function: cubic-bezier(.30823, 0, .702561, 1)
    }
    77.5% {
        -webkit-transform: rotateX(-.03rad);
        transform: rotateX(-.03rad);
        -webkit-animation-timing-function: cubic-bezier(.296901, 0, .693286, 1);
        animation-timing-function: cubic-bezier(.296901, 0, .693286, 1)
    }
    to {
        opacity: 1;
        -webkit-transform: rotateX(0rad);
        transform: rotateX(0rad)
    }
}

@-webkit-keyframes rotate-3d-out {
    0% {
        opacity: 1;
        -webkit-transform: rotateX(0rad);
        transform: rotateX(0rad);
        -webkit-animation-timing-function: cubic-bezier(.30636, 0, .698353, 1);
        animation-timing-function: cubic-bezier(.30636, 0, .698353, 1)
    }
    14.9999% {
        -webkit-transform: rotateX(-.1rad);
        transform: rotateX(-.1rad);
        -webkit-animation-timing-function: cubic-bezier(.30636, 0, .698353, 1);
        animation-timing-function: cubic-bezier(.30636, 0, .698353, 1)
    }
    15% {
        -webkit-transform: rotateX(-.1rad);
        transform: rotateX(-.1rad);
        -webkit-animation-timing-function: cubic-bezier(.297268, 0, .697535, 1);
        animation-timing-function: cubic-bezier(.297268, 0, .697535, 1)
    }
    54.9999% {
        -webkit-transform: rotateX(1.6708rad);
        transform: rotateX(1.6708rad);
        -webkit-animation-timing-function: cubic-bezier(.297268, 0, .697535, 1);
        animation-timing-function: cubic-bezier(.297268, 0, .697535, 1)
    }
    55% {
        -webkit-transform: rotateX(1.6708rad);
        transform: rotateX(1.6708rad);
        -webkit-animation-timing-function: cubic-bezier(.30823, 0, .702561, 1);
        animation-timing-function: cubic-bezier(.30823, 0, .702561, 1)
    }
    70% {
        opacity: 0
    }
    77.4999% {
        -webkit-transform: rotateX(1.5408rad);
        transform: rotateX(1.5408rad);
        -webkit-animation-timing-function: cubic-bezier(.30823, 0, .702561, 1);
        animation-timing-function: cubic-bezier(.30823, 0, .702561, 1)
    }
    77.5% {
        -webkit-transform: rotateX(1.5408rad);
        transform: rotateX(1.5408rad);
        -webkit-animation-timing-function: cubic-bezier(.296901, 0, .693286, 1);
        animation-timing-function: cubic-bezier(.296901, 0, .693286, 1)
    }
    to {
        opacity: 0;
        -webkit-transform: rotateX(1.5708rad);
        transform: rotateX(1.5708rad)
    }
}

@keyframes rotate-3d-out {
    0% {
        opacity: 1;
        -webkit-transform: rotateX(0rad);
        transform: rotateX(0rad);
        -webkit-animation-timing-function: cubic-bezier(.30636, 0, .698353, 1);
        animation-timing-function: cubic-bezier(.30636, 0, .698353, 1)
    }
    14.9999% {
        -webkit-transform: rotateX(-.1rad);
        transform: rotateX(-.1rad);
        -webkit-animation-timing-function: cubic-bezier(.30636, 0, .698353, 1);
        animation-timing-function: cubic-bezier(.30636, 0, .698353, 1)
    }
    15% {
        -webkit-transform: rotateX(-.1rad);
        transform: rotateX(-.1rad);
        -webkit-animation-timing-function: cubic-bezier(.297268, 0, .697535, 1);
        animation-timing-function: cubic-bezier(.297268, 0, .697535, 1)
    }
    54.9999% {
        -webkit-transform: rotateX(1.6708rad);
        transform: rotateX(1.6708rad);
        -webkit-animation-timing-function: cubic-bezier(.297268, 0, .697535, 1);
        animation-timing-function: cubic-bezier(.297268, 0, .697535, 1)
    }
    55% {
        -webkit-transform: rotateX(1.6708rad);
        transform: rotateX(1.6708rad);
        -webkit-animation-timing-function: cubic-bezier(.30823, 0, .702561, 1);
        animation-timing-function: cubic-bezier(.30823, 0, .702561, 1)
    }
    70% {
        opacity: 0
    }
    77.4999% {
        -webkit-transform: rotateX(1.5408rad);
        transform: rotateX(1.5408rad);
        -webkit-animation-timing-function: cubic-bezier(.30823, 0, .702561, 1);
        animation-timing-function: cubic-bezier(.30823, 0, .702561, 1)
    }
    77.5% {
        -webkit-transform: rotateX(1.5408rad);
        transform: rotateX(1.5408rad);
        -webkit-animation-timing-function: cubic-bezier(.296901, 0, .693286, 1);
        animation-timing-function: cubic-bezier(.296901, 0, .693286, 1)
    }
    to {
        opacity: 0;
        -webkit-transform: rotateX(1.5708rad);
        transform: rotateX(1.5708rad)
    }
}

.backward .rotate-3d-h-leave-active, .rotate-3d-h-enter-active {
    -webkit-animation: rotate-3d-in-h 1s;
    animation: rotate-3d-in-h 1s;
    -webkit-transform-origin-z: -100vh
}

.backward .rotate-3d-h-enter-active, .rotate-3d-h-leave-active {
    -webkit-animation: rotate-3d-out-h 1s;
    animation: rotate-3d-out-h 1s;
    -webkit-transform-origin-z: -100vh
}

.rotate-3d-h-leave-active {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.backward .rotate-3d-h-enter-active, .backward .rotate-3d-h-leave-active {
    animation-direction: reverse
}

@-webkit-keyframes rotate-3d-in-h {
    0% {
        opacity: 0;
        -webkit-transform: rotateY(-1.5708rad);
        transform: rotateY(-1.5708rad);
        -webkit-animation-timing-function: cubic-bezier(.30636, 0, .698353, 1);
        animation-timing-function: cubic-bezier(.30636, 0, .698353, 1)
    }
    14.9999% {
        -webkit-transform: rotateY(-1.6708rad);
        transform: rotateY(-1.6708rad);
        -webkit-animation-timing-function: cubic-bezier(.30636, 0, .698353, 1);
        animation-timing-function: cubic-bezier(.30636, 0, .698353, 1)
    }
    15% {
        -webkit-transform: rotateY(-1.6708rad);
        transform: rotateY(-1.6708rad);
        -webkit-animation-timing-function: cubic-bezier(.297268, 0, .697535, 1);
        animation-timing-function: cubic-bezier(.297268, 0, .697535, 1)
    }
    30% {
        opacity: 0
    }
    54.9999% {
        -webkit-transform: rotateY(.1rad);
        transform: rotateY(.1rad);
        -webkit-animation-timing-function: cubic-bezier(.297268, 0, .697535, 1);
        animation-timing-function: cubic-bezier(.297268, 0, .697535, 1)
    }
    55% {
        -webkit-transform: rotateY(.1rad);
        transform: rotateY(.1rad);
        -webkit-animation-timing-function: cubic-bezier(.30823, 0, .702561, 1);
        animation-timing-function: cubic-bezier(.30823, 0, .702561, 1)
    }
    77.4999% {
        -webkit-transform: rotateY(-.03rad);
        transform: rotateY(-.03rad);
        -webkit-animation-timing-function: cubic-bezier(.30823, 0, .702561, 1);
        animation-timing-function: cubic-bezier(.30823, 0, .702561, 1)
    }
    77.5% {
        -webkit-transform: rotateY(-.03rad);
        transform: rotateY(-.03rad);
        -webkit-animation-timing-function: cubic-bezier(.296901, 0, .693286, 1);
        animation-timing-function: cubic-bezier(.296901, 0, .693286, 1)
    }
    to {
        opacity: 1;
        -webkit-transform: rotateY(0rad);
        transform: rotateY(0rad)
    }
}

@keyframes rotate-3d-in-h {
    0% {
        opacity: 0;
        -webkit-transform: rotateY(-1.5708rad);
        transform: rotateY(-1.5708rad);
        -webkit-animation-timing-function: cubic-bezier(.30636, 0, .698353, 1);
        animation-timing-function: cubic-bezier(.30636, 0, .698353, 1)
    }
    14.9999% {
        -webkit-transform: rotateY(-1.6708rad);
        transform: rotateY(-1.6708rad);
        -webkit-animation-timing-function: cubic-bezier(.30636, 0, .698353, 1);
        animation-timing-function: cubic-bezier(.30636, 0, .698353, 1)
    }
    15% {
        -webkit-transform: rotateY(-1.6708rad);
        transform: rotateY(-1.6708rad);
        -webkit-animation-timing-function: cubic-bezier(.297268, 0, .697535, 1);
        animation-timing-function: cubic-bezier(.297268, 0, .697535, 1)
    }
    30% {
        opacity: 0
    }
    54.9999% {
        -webkit-transform: rotateY(.1rad);
        transform: rotateY(.1rad);
        -webkit-animation-timing-function: cubic-bezier(.297268, 0, .697535, 1);
        animation-timing-function: cubic-bezier(.297268, 0, .697535, 1)
    }
    55% {
        -webkit-transform: rotateY(.1rad);
        transform: rotateY(.1rad);
        -webkit-animation-timing-function: cubic-bezier(.30823, 0, .702561, 1);
        animation-timing-function: cubic-bezier(.30823, 0, .702561, 1)
    }
    77.4999% {
        -webkit-transform: rotateY(-.03rad);
        transform: rotateY(-.03rad);
        -webkit-animation-timing-function: cubic-bezier(.30823, 0, .702561, 1);
        animation-timing-function: cubic-bezier(.30823, 0, .702561, 1)
    }
    77.5% {
        -webkit-transform: rotateY(-.03rad);
        transform: rotateY(-.03rad);
        -webkit-animation-timing-function: cubic-bezier(.296901, 0, .693286, 1);
        animation-timing-function: cubic-bezier(.296901, 0, .693286, 1)
    }
    to {
        opacity: 1;
        -webkit-transform: rotateY(0rad);
        transform: rotateY(0rad)
    }
}

@-webkit-keyframes rotate-3d-out-h {
    0% {
        opacity: 1;
        -webkit-transform: rotateY(0rad);
        transform: rotateY(0rad);
        -webkit-animation-timing-function: cubic-bezier(.30636, 0, .698353, 1);
        animation-timing-function: cubic-bezier(.30636, 0, .698353, 1)
    }
    14.9999% {
        -webkit-transform: rotateY(-.1rad);
        transform: rotateY(-.1rad);
        -webkit-animation-timing-function: cubic-bezier(.30636, 0, .698353, 1);
        animation-timing-function: cubic-bezier(.30636, 0, .698353, 1)
    }
    15% {
        -webkit-transform: rotateY(-.1rad);
        transform: rotateY(-.1rad);
        -webkit-animation-timing-function: cubic-bezier(.297268, 0, .697535, 1);
        animation-timing-function: cubic-bezier(.297268, 0, .697535, 1)
    }
    54.9999% {
        -webkit-transform: rotateY(1.6708rad);
        transform: rotateY(1.6708rad);
        -webkit-animation-timing-function: cubic-bezier(.297268, 0, .697535, 1);
        animation-timing-function: cubic-bezier(.297268, 0, .697535, 1)
    }
    55% {
        -webkit-transform: rotateY(1.6708rad);
        transform: rotateY(1.6708rad);
        -webkit-animation-timing-function: cubic-bezier(.30823, 0, .702561, 1);
        animation-timing-function: cubic-bezier(.30823, 0, .702561, 1)
    }
    70% {
        opacity: 0
    }
    77.4999% {
        -webkit-transform: rotateY(1.5408rad);
        transform: rotateY(1.5408rad);
        -webkit-animation-timing-function: cubic-bezier(.30823, 0, .702561, 1);
        animation-timing-function: cubic-bezier(.30823, 0, .702561, 1)
    }
    77.5% {
        -webkit-transform: rotateY(1.5408rad);
        transform: rotateY(1.5408rad);
        -webkit-animation-timing-function: cubic-bezier(.296901, 0, .693286, 1);
        animation-timing-function: cubic-bezier(.296901, 0, .693286, 1)
    }
    to {
        opacity: 0;
        -webkit-transform: rotateY(1.5708rad);
        transform: rotateY(1.5708rad)
    }
}

@keyframes rotate-3d-out-h {
    0% {
        opacity: 1;
        -webkit-transform: rotateY(0rad);
        transform: rotateY(0rad);
        -webkit-animation-timing-function: cubic-bezier(.30636, 0, .698353, 1);
        animation-timing-function: cubic-bezier(.30636, 0, .698353, 1)
    }
    14.9999% {
        -webkit-transform: rotateY(-.1rad);
        transform: rotateY(-.1rad);
        -webkit-animation-timing-function: cubic-bezier(.30636, 0, .698353, 1);
        animation-timing-function: cubic-bezier(.30636, 0, .698353, 1)
    }
    15% {
        -webkit-transform: rotateY(-.1rad);
        transform: rotateY(-.1rad);
        -webkit-animation-timing-function: cubic-bezier(.297268, 0, .697535, 1);
        animation-timing-function: cubic-bezier(.297268, 0, .697535, 1)
    }
    54.9999% {
        -webkit-transform: rotateY(1.6708rad);
        transform: rotateY(1.6708rad);
        -webkit-animation-timing-function: cubic-bezier(.297268, 0, .697535, 1);
        animation-timing-function: cubic-bezier(.297268, 0, .697535, 1)
    }
    55% {
        -webkit-transform: rotateY(1.6708rad);
        transform: rotateY(1.6708rad);
        -webkit-animation-timing-function: cubic-bezier(.30823, 0, .702561, 1);
        animation-timing-function: cubic-bezier(.30823, 0, .702561, 1)
    }
    70% {
        opacity: 0
    }
    77.4999% {
        -webkit-transform: rotateY(1.5408rad);
        transform: rotateY(1.5408rad);
        -webkit-animation-timing-function: cubic-bezier(.30823, 0, .702561, 1);
        animation-timing-function: cubic-bezier(.30823, 0, .702561, 1)
    }
    77.5% {
        -webkit-transform: rotateY(1.5408rad);
        transform: rotateY(1.5408rad);
        -webkit-animation-timing-function: cubic-bezier(.296901, 0, .693286, 1);
        animation-timing-function: cubic-bezier(.296901, 0, .693286, 1)
    }
    to {
        opacity: 0;
        -webkit-transform: rotateY(1.5708rad);
        transform: rotateY(1.5708rad)
    }
}

.spiral-h-enter-active, .spiral-v-enter-active {
    -webkit-animation: spiral-in 1s;
    animation: spiral-in 1s;
    z-index: 2
}

.spiral-h-leave-active, .spiral-v-leave-active {
    -webkit-animation: spiral-out 1s;
    animation: spiral-out 1s
}

@-webkit-keyframes spiral-in {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(-12.5664rad);
        transform: scale(0) rotate(-12.5664rad);
        -webkit-animation-timing-function: cubic-bezier(.500499, 0, .498553, 1);
        animation-timing-function: cubic-bezier(.500499, 0, .498553, 1)
    }
    66.6666% {
        opacity: 1
    }
}

@keyframes spiral-in {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(-12.5664rad);
        transform: scale(0) rotate(-12.5664rad);
        -webkit-animation-timing-function: cubic-bezier(.500499, 0, .498553, 1);
        animation-timing-function: cubic-bezier(.500499, 0, .498553, 1)
    }
    66.6666% {
        opacity: 1
    }
}

@-webkit-keyframes spiral-out {
    0% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(.500499, 0, .498553, 1);
        animation-timing-function: cubic-bezier(.500499, 0, .498553, 1)
    }
    66.6666% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(12.5664rad);
        transform: scale(0) rotate(12.5664rad)
    }
}

@keyframes spiral-out {
    0% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(.500499, 0, .498553, 1);
        animation-timing-function: cubic-bezier(.500499, 0, .498553, 1)
    }
    66.6666% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(12.5664rad);
        transform: scale(0) rotate(12.5664rad)
    }
}

.axis-v-enter-active, .backward .axis-v-leave-active {
    -webkit-animation: axis 1s;
    animation: axis 1s;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

.axis-h-leave-active, .axis-v-leave-active, .backward .axis-h-enter-active, .backward .axis-v-enter-active {
    -webkit-animation: still 1s;
    animation: still 1s
}

.backward .axis-v-leave-active {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    animation-direction: reverse
}

@-webkit-keyframes axis {
    0% {
        -webkit-transform: rotate(-1.5708rad);
        transform: rotate(-1.5708rad)
    }
    to {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

@keyframes axis {
    0% {
        -webkit-transform: rotate(-1.5708rad);
        transform: rotate(-1.5708rad)
    }
    to {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

.axis-h-enter-active, .backward .axis-h-leave-active {
    -webkit-animation: axis-h 1s;
    animation: axis-h 1s;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

.backward .axis-h-leave-active {
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    animation-direction: reverse
}

@-webkit-keyframes axis-h {
    0% {
        -webkit-transform: rotate(1.5708rad);
        transform: rotate(1.5708rad)
    }
    to {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

@keyframes axis-h {
    0% {
        -webkit-transform: rotate(1.5708rad);
        transform: rotate(1.5708rad)
    }
    to {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

.zoom-h-enter-active, .zoom-v-enter-active {
    -webkit-animation: zoom 1s;
    animation: zoom 1s;
    z-index: 2
}

.zoom-h-leave-active, .zoom-v-leave-active {
    -webkit-animation: still 1s;
    animation: still 1s
}

@-webkit-keyframes zoom {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1);
        transform: scale(.1);
        -webkit-animation-timing-function: cubic-bezier(.494227, .480271, .8971, 1);
        animation-timing-function: cubic-bezier(.494227, .480271, .8971, 1)
    }
    61.9999% {
        opacity: 1;
        -webkit-transform: scale(1.08);
        transform: scale(1.08);
        -webkit-animation-timing-function: cubic-bezier(.494227, .480271, .8971, 1);
        animation-timing-function: cubic-bezier(.494227, .480271, .8971, 1)
    }
    62% {
        -webkit-transform: scale(1.08);
        transform: scale(1.08);
        -webkit-animation-timing-function: cubic-bezier(.30015, 0, .794629, 1);
        animation-timing-function: cubic-bezier(.30015, 0, .794629, 1)
    }
    84.9999% {
        -webkit-transform: scale(.98);
        transform: scale(.98);
        -webkit-animation-timing-function: cubic-bezier(.30015, 0, .794629, 1);
        animation-timing-function: cubic-bezier(.30015, 0, .794629, 1)
    }
    85% {
        -webkit-transform: scale(.98);
        transform: scale(.98);
        -webkit-animation-timing-function: cubic-bezier(.400711, 0, .502283, 1);
        animation-timing-function: cubic-bezier(.400711, 0, .502283, 1)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes zoom {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1);
        transform: scale(.1);
        -webkit-animation-timing-function: cubic-bezier(.494227, .480271, .8971, 1);
        animation-timing-function: cubic-bezier(.494227, .480271, .8971, 1)
    }
    61.9999% {
        opacity: 1;
        -webkit-transform: scale(1.08);
        transform: scale(1.08);
        -webkit-animation-timing-function: cubic-bezier(.494227, .480271, .8971, 1);
        animation-timing-function: cubic-bezier(.494227, .480271, .8971, 1)
    }
    62% {
        -webkit-transform: scale(1.08);
        transform: scale(1.08);
        -webkit-animation-timing-function: cubic-bezier(.30015, 0, .794629, 1);
        animation-timing-function: cubic-bezier(.30015, 0, .794629, 1)
    }
    84.9999% {
        -webkit-transform: scale(.98);
        transform: scale(.98);
        -webkit-animation-timing-function: cubic-bezier(.30015, 0, .794629, 1);
        animation-timing-function: cubic-bezier(.30015, 0, .794629, 1)
    }
    85% {
        -webkit-transform: scale(.98);
        transform: scale(.98);
        -webkit-animation-timing-function: cubic-bezier(.400711, 0, .502283, 1);
        animation-timing-function: cubic-bezier(.400711, 0, .502283, 1)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.default-enter-active, .default-leave-active {
    -webkit-animation: still .3s;
    animation: still .3s
}

@-webkit-keyframes still {
    0% {
        -webkit-transform: translateZ(-10000px);
        transform: translateZ(-10000px)
    }
    to {
        -webkit-transform: translateZ(-10000px);
        transform: translateZ(-10000px)
    }
}

@keyframes still {
    0% {
        -webkit-transform: translateZ(-10000px);
        transform: translateZ(-10000px)
    }
    to {
        -webkit-transform: translateZ(-10000px);
        transform: translateZ(-10000px)
    }
}

.editor-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    overflow: auto;
    font: 14px/1.5 Arial, PingFangSC-Regular, STHeitiSC-Light, Helvetica Neue;
    color: #333;
    background: none;
    outline: none
}

.editor-container .hide {
    display: none
}

.editor-container [class*=" icon-"], .editor-container [class|=icon] {
    display: inline-block;
    vertical-align: top;
    background: no-repeat 50% 50%
}

.editor-container, .editor-container *, .editor-container :after, .editor-container :before {
    box-sizing: border-box;
    padding: 0
}

.editor-shell-wrap {
    position: relative;
    box-sizing: content-box;
    margin: 0 auto;
    overflow: visible
}

.editor-shell {
    position: relative;
    margin: 0 auto;
    background: no-repeat 0 0;
    box-shadow: 1px 1px 15px rgba(0, 0, 0, .2)
}

.editor-shell.editor-overflow-mask:after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5);
    pointer-events: none;
    content: " "
}

.editor-shell.editor-overflow-mask .editor-canvas {
    overflow: visible
}

.editor-tips[editor-aria-label]:after, .editor-tips[editor-aria-label]:before {
    position: absolute;
    top: 100%;
    left: 50%;
    display: none;
    pointer-events: none
}

.editor-tips[editor-aria-label]:hover {
    z-index: 999
}

.editor-tips[editor-aria-label]:hover:before {
    z-index: 999;
    display: block;
    width: 0;
    height: 0;
    margin: 3px 0 0 -5px;
    color: rgba(0, 0, 0, .8);
    border: 5px solid transparent;
    border-bottom-color: rgba(0, 0, 0, .7);
    content: ""
}

.editor-tips[editor-aria-label]:hover:after {
    z-index: 1;
    display: block;
    padding: 5px 8px;
    margin-top: 13px;
    font-size: .8em;
    font-style: normal;
    color: #fff;
    text-align: center;
    word-wrap: break-word;
    white-space: pre;
    background: rgba(0, 0, 0, .7);
    border-radius: 3px;
    content: attr(editor-aria-label);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-font-smoothing: subpixel-antialiased
}

.editor-tips--up[editor-aria-label]:after, .editor-tips--up[editor-aria-label]:before {
    top: auto;
    bottom: 100%
}

.editor-tips--up[editor-aria-label]:hover:before {
    margin: 0 0 3px -5px;
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, .7)
}

.editor-tips--up[editor-aria-label]:hover:after {
    margin-top: 13px;
    margin-bottom: 13px
}

.editor-scope-pointer-events-disable {
    pointer-events: none
}

.editor-scope-pointer-events-disable .editor-contextmenu, .editor-scope-pointer-events-disable .editor-highlight, .editor-scope-pointer-events-disable .editor-selector, .editor-scope-pointer-events-disable .editor-shell {
    pointer-events: auto
}

.editor-popup {
    position: absolute;
    min-width: 40px;
    padding: 8px 12px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .3)
}

.editor-popup:before {
    position: absolute;
    bottom: 100%;
    left: 15px;
    width: 10px;
    height: 10px;
    margin-bottom: -5px;
    background: inherit;
    box-shadow: -2px -2px 2px rgba(0, 0, 0, .1);
    pointer-events: none;
    content: "";
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.editor-popup.editor-popup-nw {
    top: 100%;
    left: 0
}

.editor-popup-list {
    padding: 8px;
    margin: -35px 0 0 -10px;
    background-color: hsla(0, 0%, 100%, .9)
}

.editor-popup-list:before {
    display: none
}

.editor-popup-list .list {
    position: relative;
    max-height: 420px;
    overflow: auto
}

.editor-popup-list .list ul {
    padding: 0;
    margin: 0
}

.editor-popup-list .list li {
    padding: 5px 15px 5px 10px;
    margin-top: 1px;
    font-size: 1.2em;
    white-space: nowrap;
    vertical-align: top;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color .2s linear
}

.editor-popup-list .list li:first-child {
    margin-top: 0
}

.editor-popup-list .list li.current, .editor-popup-list .list li:hover {
    background-color: rgba(255, 186, 0, .8)
}

.ui-mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .5
}

.editor-tooltips[aria-label] {
    position: relative
}

.editor-tooltips[aria-label]:before {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 999;
    display: none;
    width: 0;
    height: 0;
    margin: 3px 0 0 -5px;
    color: rgba(0, 0, 0, .8);
    border: 5px solid transparent;
    border-bottom-color: rgba(0, 0, 0, .7);
    pointer-events: none;
    content: ""
}

.editor-tooltips[aria-label]:after {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 1;
    display: none;
    padding: 5px 8px;
    margin-top: 13px;
    color: #fff;
    text-align: center;
    word-wrap: break-word;
    white-space: pre;
    background: rgba(0, 0, 0, .7);
    border-radius: 3px;
    pointer-events: none;
    content: attr(aria-label);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-font-smoothing: subpixel-antialiased
}

.editor-tooltips[aria-label].tip-top:before {
    top: auto;
    left: 50%;
    margin: -8px 0 0 -5px;
    border-top-color: rgba(0, 0, 0, .7);
    border-bottom-color: transparent
}

.editor-tooltips[aria-label].tip-top:after {
    top: auto;
    bottom: 100%;
    margin-bottom: 8px
}

.editor-tooltips[aria-label]:active:after, .editor-tooltips[aria-label]:active:before, .editor-tooltips[aria-label]:hover:after, .editor-tooltips[aria-label]:hover:before {
    display: block;
    text-decoration: none
}

.editor-tooltips[aria-label].disabled:active:after, .editor-tooltips[aria-label].disabled:active:before, .editor-tooltips[aria-label].disabled:hover:after, .editor-tooltips[aria-label].disabled:hover:before {
    display: none
}

.editor-num-picker {
    line-height: 26px;
    text-align: right
}

.editor-num-picker label {
    float: left
}

.editor-num-picker input {
    display: inline-block;
    width: 3em;
    height: 26px;
    padding: 2px 3px;
    font-size: inherit;
    text-align: center;
    vertical-align: top;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
    outline: 0;
    -webkit-appearance: textfield
}

.editor-num-picker input:focus {
    border-color: #aaa
}

.editor-num-picker button {
    height: 26px;
    vertical-align: top;
    background: none;
    border: 0;
    outline: 0
}

.editor-num-picker input::-webkit-inner-spin-button, .editor-num-picker input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    display: none
}

.minicolors, .minicolors * {
    box-sizing: content-box
}

.editor-color-picker {
    position: relative;
    display: inline-block;
    vertical-align: top
}

.editor-color-picker .editor-popup {
    margin-top: 18px;
    margin-left: -5px;
    background-color: #f9f9f9
}

.editor-color-wrapper {
    margin: 0 -4px
}

.editor-color-wrapper .editor-color-sider {
    display: inline-block;
    vertical-align: top
}

.editor-color-wrapper .color-kit {
    margin-top: 8px;
    color: #666
}

.editor-color-wrapper .color-kit span {
    display: inline-block;
    margin-bottom: 3px
}

.editor-color-wrapper .color-history {
    float: left;
    width: 160px
}

.editor-color-wrapper .color-switch {
    float: right;
    width: 24px;
    height: 40px
}

.editor-color-wrapper .color-switch .switch-icon {
    display: block;
    width: 20px;
    height: 20px;
    margin-left: 3px;
    overflow: hidden;
    border-radius: 2px;
    cursor: pointer
}

.editor-color-wrapper .color-switch .switch-icon.icon-block b, .editor-color-wrapper .color-switch .switch-icon.icon-hue b {
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23757575'%3E%3Cpath fill='%23FC342E' d='M0 0h8v8H0z'/%3E%3Cpath fill='%23FD6469' d='M8 0h8v8H8z'/%3E%3Cpath fill='%23FDACAE' d='M16 0h8v8h-8z'/%3E%3Cpath fill='%23FD9D26' d='M0 8h8v8H0z'/%3E%3Cpath fill='%23FEEA4E' d='M8 8h8v8H8z'/%3E%3Cpath fill='%23FFFFAF' d='M16 8h8v8h-8z'/%3E%3Cpath fill='%231891FC' d='M0 16h8v8H0z'/%3E%3Cpath fill='%233ECDFD' d='M8 16h8v8H8z'/%3E%3Cpath fill='%23B6ECFE' d='M16 16h8v8h-8z'/%3E%3C/svg%3E");
    width: 20px;
    height: 20px;
    background-size: 100%
}

.editor-color-wrapper .color-switch .switch-icon.icon-hue b {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAMAUExURTVk/0j/9zw1///sOTc2/17/Wk3/fzY6///gOU7/efw1/0n/l0z/hIQ1/6P/QTVA/0r/jvM1/0n/8vj/OUk1///mOf7+OVX/Zlr/Xkv/iVL/bv/4Of9BRkn/nf828P84zu01/0j/ukj/q0f+/Ej/tEj/ykn/3/81/dw1/0//dEn/2DVM/2r/Uf81+mX/Vfc1/1T/af84xjvN//T/Ov++O/831f819DRd/0r/kkM1/7L/P0b5/v9HQlf/Yv/xOUf8/f826VY0/0j/xEj/zzRQ/0j/7P/aOTVr/zae/3P/TUj/5Ln/Pu//Okj/r9//O/99QLU1/zVH/8k1/0n/ojnG/5D/RDWi/0T0/zWA/zVU//z/Oec1/zVY/+I1/3j/TFw1///7Of/ROjSO//85s/81+KE1/7//PVA0//88iH3/Sf824v+ePv823kPw/5v/Qv84wf8/Vje7//9PQ6g0/3E2//8+bf+kPJI1/0n/0zWY/zWJ/701/zVv/2L/V+T/O0n/p1D/ccI1///1Of/WOTzU//89dIr/RoL/SP86ov+qPf+LQP/MOtA1//+WP/85utv/Oz/d//87lP8/S/9lQ/+EQf/FOnc0/0Hq/v44rP8/XP8/UP+RPpb/QzWw/641/za3/zjA/8T/Pdb/PDVz/8r/PEn/6UDi/2s1/27/TzRE/zWS//89gUj/wDV4//+0PP87muz/OtL/PDWo//9rQ/8+Yf91Qns1//+5O+j/Ov+wPP9wQv422v86p03/gP88e/9fQa7/P5U1/9Q1/z7Z///IOmU1/zWr/2I1/zR7//9YQzSD/0Hm/0A1//8+Z/826P86j/9VQv9KQvz8Of/eOYn9SULs/zWF//9cRJw1/5k1/zV1/87/PPw1/C1p/9c1//825jav/0X1+/vwOUj97/M19G//U0pO/010/0LU+eT7N9wy8Gj8aOazRufpOd83mK0+zt4szInUgvpmREjy3VOk+GHtmnRI/Ksv68D/OICZxuJpaLN0nVrO1r/yQHhl77vAZLZU/QUAAARsSURBVDjLTc91QJVXGMfxI05RYANBQUBy5GWMkMt0DnESAqM7lZaQjhEOQbpBQHJDlKk00khtioCkgjLUgbXu7nqecy648+/7eb+/c8jSkmm6z7he/2B8aG2eTW/32M3o1/aciayey2wJKs2p8ovQkeOeeOivQ3bt2maanl+h154bX5hX3ttdxmBPXGbLQsewXxG6kHlZLtm8GaQPyMHc0Npym6tlH/DgKAaLIpiTlSUHmRyvgPHCvGeQBWF4KOSQrL6/JpE+fZBJGIdkbzfCGrgiDW44VeLNJD6IJcduIYRlDPKcqqoAEff25smKfkjCNsKeuJbSHHBcdJqqAgJaxF1c3Fuayny99vjC8l4GM4M6YJh7Yp7ndhAxd3dxnKdyMDTPpvvm7T2Rc6MLOX7gDsnC9QS0tHbIk71iYhilcrw/t7CcwriWjqoIOXQ0Jy/vQSz3Il3E+W3pFe2heb1jt89UZwblFIHT9/+QMQ8vMtDJoyh99HILbQD2jJb66Qyho8zLS02NpKQMdFK7KH0aZH9oeVl0zVzQcAR3Xl8TnQeotWsFpLjYGq0lyEWQ+YO1V6Nr4kqLuA/1eQxUgb09uXLlPFjrlAGowvxSRbzNrcjRYTlwlF0DZJ+WlkwaGx88oDglpdNSbPGJqV7tWPVCRIg+MLU1UGnJycm2trYkMLChoYHq88XWkH2SHv9DXNXQR/JeoNLQvAMnJoa8gScwEH0jYOvPv/7qj2+++2KtIC3ZFkFMQEDASsDKCnlv/bwKB3757e9///z2V/y+cu/e+3DeZIe88L8THh5eV3fn+9//+SU29uzZvr6+558dQj/W1Tk5OWVl3ckONv/4y5//+unTT3Yef/3Y5I1Ll2LxF/yJOFGSlZ0dHHzU/KWXt2gLWf34mdkRDf7ZnYhBAwdPgFB01PwyMAOpEZlWi8oo31VjYX6+/WgBH5ucvEEYQvXWlt0SqSOCVkYmYbpd08S4if85vlm0FBOmKDPQVh8ROdXKefq4JCpxirjZCQPl20/tcWJ+eZ1JSKlvFZFRUlYRfTyjO9HcRtw0hPmRzqIloIBhTkp9RFJQUcHIQvRAZUaUc9J94qnRBFFGCY9JaKdu3yop6KB0OMFC1DCsxPFR4vIF4mlsh1GgfAQZzqZuH5HcJ6OooMx5F+BF3SjnZlcqmxgllGlLYW+fzCmlViMVgC4zGecemfm6niSebhpMkt0G6NTBiQg6WCkcTlAx2WToUnndsb4rMWnqJHnFTcNOGCgxkGBOSEQQg8ocC5NNLx64W6J77m3n5uU2JiFKcJY6GIagEcfiKcCwixmQNPOdptIYomTDCTooQjBBhcGZ65hMTHK9f4RJArPgJMFhUJkDbwHoUlmi61g/Ydac5HoBJDyJMIcXVFTCZR68C9tRkPRdnmKSrDsHRSsFWOZYIDQECNv1EyCnmSTU0WEI4hVNKIRLYrILx9tOgiRC1EFQSaEVlxmE15RksCSTq0SSOV5wA7pUwjZNwjXh6av/AQYJVsq66CFtAAAAAElFTkSuQmCC)
}

.editor-color-wrapper .editor-color-inp {
    position: absolute;
    width: 100px;
    height: 26px;
    padding: 2px 3px;
    margin-top: -28px;
    text-align: center;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    outline: 0
}

.editor-color-wrapper .minicolors {
    vertical-align: top
}

.editor-color-wrapper .minicolors-panel {
    vertical-align: top;
    background: none;
    border: 0
}

.editor-color-wrapper .minicolors-grid-inner {
    width: 100%;
    height: 100%
}

.toolbar-north .editor-color-picker .editor-popup {
    bottom: 100%;
    margin-bottom: 18px
}

.toolbar-north .editor-color-picker .editor-popup:before {
    bottom: 0;
    margin-top: 5px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .1)
}

.editor-color-block {
    width: 196px;
    height: 152px;
    margin: 1px -1px -1px
}

.editor-color-block i {
    float: left;
    width: 28px;
    height: 25px;
    background: #fff;
    cursor: pointer;
    transition: -webkit-transform .1s linear;
    transition: transform .1s linear;
    transition: transform .1s linear, -webkit-transform .1s linear
}

.editor-color-block i:hover {
    position: relative;
    z-index: 1;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    -webkit-transform: scale(1.25);
    transform: scale(1.25)
}

.editor-color-block i.active {
    border-color: #a3a3a3
}

.editor-color-block i.transparent {
    background-color: #fff;
    background-image: linear-gradient(to top right, #ccc 25%, transparent 0, transparent 75%, #ccc 0, #ccc), linear-gradient(to top right, #ccc 25%, transparent 0, transparent 75%, #ccc 0, #ccc);
    background-position: 0 0, 3px 3px;
    background-size: 6px 6px
}

.editor-color-block i:nth-child(36) {
    box-shadow: inset 1px -1px 0 #e0e0e0
}

.editor-color-block i:nth-child(36):hover {
    border-radius: 0
}

.editor-color-history {
    height: 20px;
    background-color: #eaeaea;
    border-radius: 2px;
    box-shadow: inset 0 0 1px rgba(0, 0, 0, .1)
}

.editor-color-history i {
    position: relative;
    float: left;
    width: 20px;
    height: 20px;
    background: #fff;
    cursor: pointer;
    transition: -webkit-transform .1s ease-out;
    transition: transform .1s ease-out;
    transition: transform .1s ease-out, -webkit-transform .1s ease-out
}

.editor-color-history i:hover {
    z-index: 1;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
}

.editor-color-history i.active {
    border-color: #a3a3a3
}

.editor-color-history i.transparent {
    background-color: #fff;
    background-image: linear-gradient(to top right, #ccc 25%, transparent 0, transparent 75%, #ccc 0, #ccc), linear-gradient(to top right, #ccc 25%, transparent 0, transparent 75%, #ccc 0, #ccc);
    background-position: 0 0, 3px 3px;
    background-size: 6px 6px
}

.editor-color-history i:first-child {
    border-radius: 2px 0 0 2px
}

.editor-color-history i:first-child:hover {
    border-radius: 0
}

.editor-color-history i:last-of-type {
    border-radius: 0 3px 3px 0
}

.editor-color-history i:last-of-type:hover {
    border-radius: 0
}

.editor-range-picker {
    position: relative;
    height: 16px;
    border-right: 12px solid transparent;
    cursor: pointer
}

.editor-range-picker:before {
    box-sizing: content-box;
    width: 100%;
    padding-right: 12px;
    content: ""
}

.editor-range-picker .progress, .editor-range-picker:before {
    position: absolute;
    top: 7px;
    left: 0;
    height: 3px;
    background: #6d6d6d;
    border-radius: 2px
}

.editor-range-picker .progress {
    width: 0;
    background-color: #ff9600
}

.editor-range-picker .progress em {
    display: none
}

.editor-range-picker .ball {
    position: absolute;
    top: 2px;
    left: 0;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 3px solid #ffba00;
    border-radius: 50%;
    cursor: pointer
}

.editor-combo-picker {
    display: inline-block;
    vertical-align: top
}

.editor-combo-picker.active {
    position: relative;
    z-index: 9
}

.editor-combo-picker .label {
    display: inline-block;
    padding: 0 7px;
    line-height: 28px;
    vertical-align: top;
    cursor: pointer
}

.editor-combo-picker .label span {
    display: inline-block;
    min-width: 1.2em;
    max-width: 5em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top
}

.editor-combo-picker .label input {
    display: inline-block;
    width: 2.2em;
    height: 24px;
    padding: 2px 3px;
    vertical-align: top;
    border: 1px solid #d9dade;
    border-radius: 2px;
    outline: 0
}

.editor-combo-picker .label input:focus {
    border-color: #aaa
}

.editor-combo-picker .label:after {
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='%23757575'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 2L4 6 1 2h6z'/%3E%3C/svg%3E");
    width: 8px;
    height: 8px;
    margin: 12px 0 0 5px;
    vertical-align: top;
    content: ""
}

.editor-combo-picker .editor-popup {
    margin-left: -5px
}

.editor-combo-picker .editor-popup .label {
    padding-right: 0;
    padding-left: 0;
    white-space: nowrap
}

.editor-combo-picker .editor-popup .label:after {
    margin-top: 9px;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.editor-select-picker {
    display: inline-block;
    vertical-align: top
}

.editor-select-picker.active {
    position: relative;
    z-index: 9
}

.editor-select-picker .label {
    padding: 0 7px;
    line-height: 28px;
    cursor: pointer
}

.editor-select-picker .label span {
    display: inline-block;
    max-width: 6em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top
}

.editor-select-picker .label:after {
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='%23757575'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 2L4 6 1 2h6z'/%3E%3C/svg%3E");
    width: 8px;
    height: 8px;
    margin: 12px 0 0 5px;
    vertical-align: top;
    content: ""
}

.editor-select-picker .preview {
    display: block
}

.editor-select-picker .preview img {
    width: 140px;
    height: auto;
    vertical-align: top
}

.editor-opacity-picker {
    position: relative;
    display: inline-block;
    vertical-align: top
}

.editor-opacity-picker > label {
    padding: 0 5px 0 16px;
    line-height: 28px;
    vertical-align: top;
    background-repeat: no-repeat;
    background-position: 2px 7px;
    cursor: pointer;
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23757575'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v3h3V0H0zm0 6v3h3V6H0zm0 9h3v-3H0v3z'/%3E%3Cpath d='M12 0h3v3h-3zm0 6h3v3h-3zm0 6h3v3h-3z' opacity='.3' fill-rule='evenodd' clip-rule='evenodd'/%3E%3Cpath d='M9 3h3v3H9zm0 6h3v3H9z' opacity='.4' fill-rule='evenodd' clip-rule='evenodd'/%3E%3Cpath d='M6 0h3v3H6zm0 6h3v3H6zm0 6h3v3H6z' opacity='.6' fill-rule='evenodd' clip-rule='evenodd'/%3E%3Cpath d='M3 3h3v3H3zm0 6h3v3H3z' opacity='.8' fill-rule='evenodd' clip-rule='evenodd'/%3E%3C/svg%3E")
}

.editor-opacity-picker > label:after {
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='%23757575'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 2L4 6 1 2h6z'/%3E%3C/svg%3E");
    width: 8px;
    height: 8px;
    margin: 10px 0 0 5px;
    vertical-align: top;
    content: ""
}

.editor-opacity-picker > label > input {
    width: 3.2em;
    height: 28px;
    padding: 0 3px;
    margin-left: 5px;
    vertical-align: top;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 2px;
    outline: 0
}

.editor-opacity-picker > label > input[readonly] {
    cursor: inherit
}

.editor-opacity-picker.active > label > input {
    border-color: #d9dade
}

.editor-opacity-picker .editor-popup {
    width: 172px;
    margin: 18px 0 0 1.5em
}

.editor-opacity-picker.inline {
    display: block
}

.editor-opacity-picker.inline > label {
    display: block;
    padding: 0;
    cursor: default
}

.editor-opacity-picker.inline > label input {
    float: right
}

.editor-opacity-picker.inline > label input:focus {
    border-color: #aaa
}

.editor-opacity-picker.inline > label:after {
    display: none
}

.editor-opacity-picker.inline .editor-popup {
    position: static;
    width: auto;
    padding: 5px 0 0;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none
}

.editor-opacity-picker.inline .editor-popup:before {
    display: none
}

.toolbar-north .editor-opacity-picker .editor-popup {
    top: inherit;
    bottom: 100%;
    margin-bottom: 18px
}

.toolbar-north .editor-opacity-picker .editor-popup:before {
    bottom: 0;
    margin-top: 5px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .1)
}

.editor-file-picker {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer
}

.editor-file-picker input {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 8em;
    outline: 0;
    cursor: pointer
}

.editor-file-reader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.editor-image-picker {
    position: relative;
    display: inline-block;
    vertical-align: top
}

.editor-image-picker .editor-file-reader {
    height: 0
}

@-webkit-keyframes element-blink {
    0% {
        background: rgba(0, 92, 249, 0);
        border: 1px solid #00ffea;
        opacity: 0
    }
    25% {
        background: rgba(0, 92, 249, .3);
        border: 1px solid #00ffea;
        opacity: 1
    }
    50% {
        background: rgba(0, 92, 249, 0);
        border: 1px solid #00ffea;
        opacity: 0
    }
    75% {
        background: rgba(0, 92, 249, .3);
        border: 1px solid #00ffea;
        opacity: 1
    }
    to {
        background: rgba(0, 92, 249, 0);
        border: 1px solid #00ffea;
        opacity: 0
    }
}

@keyframes element-blink {
    0% {
        background: rgba(0, 92, 249, 0);
        border: 1px solid #00ffea;
        opacity: 0
    }
    25% {
        background: rgba(0, 92, 249, .3);
        border: 1px solid #00ffea;
        opacity: 1
    }
    50% {
        background: rgba(0, 92, 249, 0);
        border: 1px solid #00ffea;
        opacity: 0
    }
    75% {
        background: rgba(0, 92, 249, .3);
        border: 1px solid #00ffea;
        opacity: 1
    }
    to {
        background: rgba(0, 92, 249, 0);
        border: 1px solid #00ffea;
        opacity: 0
    }
}

.editor-element {
    position: absolute;
    z-index: 1;
    line-height: 1;
    text-align: left;
    background: no-repeat 50% 50%
}

.editor-element-hidden {
    display: none
}

.editor-element-editing {
    visibility: hidden
}

.editor-element-frozen {
    pointer-events: none
}

.editor-element > span .border-before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: none;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    margin: -1px 0 0 -1px;
    border: 1px solid #666;
    pointer-events: none;
    content: ""
}

.editor-element:active {
    cursor: move
}

.editor-element-link-selected > span .border-before {
    display: block;
    background-color: rgba(241, 161, 29, .1);
    border-color: #f59800;
    border-style: solid
}

.editor-element-selected > span .border-before {
    display: block;
    box-sizing: content-box;
    background-color: transparent;
    border-color: #6ccfff;
    border-style: solid
}

.editor-element-link-selected > span .border-before, .editor-element-selected > span .border-before {
    margin: -2px 0 0 -2px;
    border-width: 2px
}

.editor-element-current.editor-element-selected > span .border-before {
    display: none
}

.editor-element-overflow-hidden > span .border-before, .editor-element.editor-element-effectText > span .border-before {
    box-sizing: border-box;
    margin: 0
}

.editor-element-upper {
    z-index: 2
}

.editor-element .element-blink, .editor-element .element-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.editor-element .element-blink {
    border: 1px solid transparent;
    -webkit-animation: element-blink 4s .5s;
    animation: element-blink 4s .5s
}

.editor-element .element-tips-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 36px;
    height: 20px;
    margin-top: -10px;
    margin-left: -18px;
    background: rgba(0, 0, 0, .6);
    border-radius: 11px;
    pointer-events: none
}

@-webkit-keyframes loading {
    0%, 40%, to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    60% {
        opacity: .3;
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px)
    }
}

@keyframes loading {
    0%, 40%, to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    60% {
        opacity: .3;
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px)
    }
}

.editor-element .element-tips-loading .fa-spin, .editor-element .element-tips-loading:after, .editor-element .element-tips-loading:before {
    width: 4px;
    height: 4px;
    margin: 1px;
    font-size: 0;
    background: #fff;
    border-radius: 50%;
    -webkit-animation: loading 1.2s ease infinite;
    animation: loading 1.2s ease infinite
}

.editor-element .element-tips-loading:after, .editor-element .element-tips-loading:before {
    content: ""
}

.editor-element .element-tips-loading .fa-spin {
    -webkit-animation-delay: -.32s;
    animation-delay: -.32s
}

.editor-element .element-tips-loading:after {
    -webkit-animation-delay: -.16s;
    animation-delay: -.16s
}

.editor-element-image .element-main {
    z-index: 1;
    overflow: hidden;
    background-repeat: no-repeat;
    opacity: 1;
    transition: opacity .1s linear
}

.editor-element-image .element-main img {
    position: relative
}

.editor-element-text .element-inner {
    position: relative;
    width: 100%;
    height: 100%;
    font-size: 0;
    white-space: nowrap;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

.editor-element-text .element-inner .elment-inner-position {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.editor-element-text .element-inner .elment-inner-position .elment-inner-content {
    width: 100%;
    height: 100%
}

.editor-element-text .element-inner .elment-inner-position .elment-inner-content:before {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
    content: ""
}

.editor-element-text .element-inner .elment-inner-position .elment-inner-content.middle-h:before {
    width: 0;
    height: 100%
}

.editor-element-text .element-inner .elment-inner-position .elment-inner-content.middle-v {
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl
}

.editor-element-text .element-inner .elment-inner-position .elment-inner-content.middle-v:before {
    width: 100%;
    height: 0
}

.editor-element-text .element-inner .element-main {
    display: inline-block;
    vertical-align: top
}

.editor-element-text .element-main {
    position: relative;
    width: auto;
    height: auto;
    min-height: 1.2em;
    word-wrap: break-word;
    white-space: normal;
    outline: 0;
    cursor: default;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

.editor-element-text .element-main div, .editor-element-text .element-main li, .editor-element-text .element-main ol, .editor-element-text .element-main p, .editor-element-text .element-main ul {
    padding: 0;
    margin: 0;
    list-style: none
}

.editor-element-text.editor-element-editing:hover {
    outline: none
}

.editor-element-text .is-list .element-main > div, .editor-element-text .is-list .element-main > ol > li, .editor-element-text .is-list .element-main > p, .editor-element-text .is-list .element-main > span, .editor-element-text .is-list .element-main > ul > li {
    display: list-item;
    list-style: none
}

.editor-element-text .is-list .element-main > div:before, .editor-element-text .is-list .element-main > ol > li:before, .editor-element-text .is-list .element-main > p:before, .editor-element-text .is-list .element-main > span:before, .editor-element-text .is-list .element-main > ul > li:before {
    position: absolute;
    left: 0;
    box-sizing: border-box;
    padding-left: .2em;
    margin: 0;
    letter-spacing: 0;
    white-space: nowrap
}

.editor-element-text .middle-v.is-list .element-main > div, .editor-element-text .middle-v.is-list .element-main > ol > li, .editor-element-text .middle-v.is-list .element-main > p, .editor-element-text .middle-v.is-list .element-main > span, .editor-element-text .middle-v.is-list .element-main > ul > li {
    margin-left: 0 !important
}

.editor-element-text .middle-v.is-list .element-main > div:before, .editor-element-text .middle-v.is-list .element-main > ol > li:before, .editor-element-text .middle-v.is-list .element-main > p:before, .editor-element-text .middle-v.is-list .element-main > span:before, .editor-element-text .middle-v.is-list .element-main > ul > li:before {
    top: 0;
    left: auto;
    width: auto;
    padding-top: .2em;
    padding-left: 0;
    margin-left: 0
}

.editor-element-text .middle-v.is-list.is-fox .element-main > div, .editor-element-text .middle-v.is-list.is-fox .element-main > ol > li, .editor-element-text .middle-v.is-list.is-fox .element-main > p, .editor-element-text .middle-v.is-list.is-fox .element-main > span, .editor-element-text .middle-v.is-list.is-fox .element-main > ul > li {
    position: relative
}

.editor-element-text .middle-v.is-list.is-fox .element-main > div:before, .editor-element-text .middle-v.is-list.is-fox .element-main > ol > li:before, .editor-element-text .middle-v.is-list.is-fox .element-main > p:before, .editor-element-text .middle-v.is-list.is-fox .element-main > span:before, .editor-element-text .middle-v.is-list.is-fox .element-main > ul > li:before {
    right: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
}

.editor-element-text .is-list--disc .element-main > div:before, .editor-element-text .is-list--disc .element-main > ol > li:before, .editor-element-text .is-list--disc .element-main > p:before, .editor-element-text .is-list--disc .element-main > span:before, .editor-element-text .is-list--disc .element-main > ul > li:before {
    padding-left: .5em
}

.editor-element-text .middle-v.is-list.is-list--disc .element-main > div:before, .editor-element-text .middle-v.is-list.is-list--disc .element-main > ol > li:before, .editor-element-text .middle-v.is-list.is-list--disc .element-main > p:before, .editor-element-text .middle-v.is-list.is-list--disc .element-main > span:before, .editor-element-text .middle-v.is-list.is-list--disc .element-main > ul > li:before {
    padding-top: .5em
}

.editor-element-text .is-list--disc .element-main {
    counter-reset: list-count
}

.editor-element-text .is-list--disc .element-main > div, .editor-element-text .is-list--disc .element-main > ol > li, .editor-element-text .is-list--disc .element-main > p, .editor-element-text .is-list--disc .element-main > span, .editor-element-text .is-list--disc .element-main > ul > li {
    margin-left: 1.3em
}

.editor-element-text .is-list--disc .element-main > div:before, .editor-element-text .is-list--disc .element-main > ol > li:before, .editor-element-text .is-list--disc .element-main > p:before, .editor-element-text .is-list--disc .element-main > span:before, .editor-element-text .is-list--disc .element-main > ul > li:before {
    width: 1.3em;
    content: counter(list-count, disc) "";
    counter-increment: list-count
}

.editor-element-text .middle-v.is-list--disc .element-main > div, .editor-element-text .middle-v.is-list--disc .element-main > ol > li, .editor-element-text .middle-v.is-list--disc .element-main > p, .editor-element-text .middle-v.is-list--disc .element-main > span, .editor-element-text .middle-v.is-list--disc .element-main > ul > li {
    margin-top: 1.3em
}

.editor-element-text .middle-v.is-list--disc .element-main > div:before, .editor-element-text .middle-v.is-list--disc .element-main > ol > li:before, .editor-element-text .middle-v.is-list--disc .element-main > p:before, .editor-element-text .middle-v.is-list--disc .element-main > span:before, .editor-element-text .middle-v.is-list--disc .element-main > ul > li:before {
    height: 1.3em
}

.editor-element-text .middle-v.is-list--digit-2.is-list--disc .element-main > div, .editor-element-text .middle-v.is-list--digit-2.is-list--disc .element-main > ol > li, .editor-element-text .middle-v.is-list--digit-2.is-list--disc .element-main > p, .editor-element-text .middle-v.is-list--digit-2.is-list--disc .element-main > span, .editor-element-text .middle-v.is-list--digit-2.is-list--disc .element-main > ul > li {
    margin-top: 1.3em
}

.editor-element-text .middle-v.is-list--digit-2.is-list--disc .element-main > div:before, .editor-element-text .middle-v.is-list--digit-2.is-list--disc .element-main > ol > li:before, .editor-element-text .middle-v.is-list--digit-2.is-list--disc .element-main > p:before, .editor-element-text .middle-v.is-list--digit-2.is-list--disc .element-main > span:before, .editor-element-text .middle-v.is-list--digit-2.is-list--disc .element-main > ul > li:before {
    height: 1.3em
}

.editor-element-text .is-list--digit-2.is-list--disc .element-main > div, .editor-element-text .is-list--digit-2.is-list--disc .element-main > ol > li, .editor-element-text .is-list--digit-2.is-list--disc .element-main > p, .editor-element-text .is-list--digit-2.is-list--disc .element-main > span, .editor-element-text .is-list--digit-2.is-list--disc .element-main > ul > li {
    margin-left: 1.3em
}

.editor-element-text .is-list--digit-2.is-list--disc .element-main > div:before, .editor-element-text .is-list--digit-2.is-list--disc .element-main > ol > li:before, .editor-element-text .is-list--digit-2.is-list--disc .element-main > p:before, .editor-element-text .is-list--digit-2.is-list--disc .element-main > span:before, .editor-element-text .is-list--digit-2.is-list--disc .element-main > ul > li:before {
    width: 1.3em
}

.editor-element-text .is-list--decimal .element-main {
    counter-reset: list-count
}

.editor-element-text .is-list--decimal .element-main > div, .editor-element-text .is-list--decimal .element-main > ol > li, .editor-element-text .is-list--decimal .element-main > p, .editor-element-text .is-list--decimal .element-main > span, .editor-element-text .is-list--decimal .element-main > ul > li {
    margin-left: 1.3em
}

.editor-element-text .is-list--decimal .element-main > div:before, .editor-element-text .is-list--decimal .element-main > ol > li:before, .editor-element-text .is-list--decimal .element-main > p:before, .editor-element-text .is-list--decimal .element-main > span:before, .editor-element-text .is-list--decimal .element-main > ul > li:before {
    width: 1.3em;
    content: counter(list-count, decimal) ".";
    counter-increment: list-count
}

.editor-element-text .middle-v.is-list--decimal .element-main > div, .editor-element-text .middle-v.is-list--decimal .element-main > ol > li, .editor-element-text .middle-v.is-list--decimal .element-main > p, .editor-element-text .middle-v.is-list--decimal .element-main > span, .editor-element-text .middle-v.is-list--decimal .element-main > ul > li {
    margin-top: 1.3em
}

.editor-element-text .middle-v.is-list--decimal .element-main > div:before, .editor-element-text .middle-v.is-list--decimal .element-main > ol > li:before, .editor-element-text .middle-v.is-list--decimal .element-main > p:before, .editor-element-text .middle-v.is-list--decimal .element-main > span:before, .editor-element-text .middle-v.is-list--decimal .element-main > ul > li:before {
    height: 1.3em
}

.editor-element-text .middle-v.is-list--digit-2.is-list--decimal .element-main > div, .editor-element-text .middle-v.is-list--digit-2.is-list--decimal .element-main > ol > li, .editor-element-text .middle-v.is-list--digit-2.is-list--decimal .element-main > p, .editor-element-text .middle-v.is-list--digit-2.is-list--decimal .element-main > span, .editor-element-text .middle-v.is-list--digit-2.is-list--decimal .element-main > ul > li {
    margin-top: 1.8em
}

.editor-element-text .middle-v.is-list--digit-2.is-list--decimal .element-main > div:before, .editor-element-text .middle-v.is-list--digit-2.is-list--decimal .element-main > ol > li:before, .editor-element-text .middle-v.is-list--digit-2.is-list--decimal .element-main > p:before, .editor-element-text .middle-v.is-list--digit-2.is-list--decimal .element-main > span:before, .editor-element-text .middle-v.is-list--digit-2.is-list--decimal .element-main > ul > li:before {
    height: 1.8em
}

.editor-element-text .is-list--digit-2.is-list--decimal .element-main > div, .editor-element-text .is-list--digit-2.is-list--decimal .element-main > ol > li, .editor-element-text .is-list--digit-2.is-list--decimal .element-main > p, .editor-element-text .is-list--digit-2.is-list--decimal .element-main > span, .editor-element-text .is-list--digit-2.is-list--decimal .element-main > ul > li {
    margin-left: 1.8em
}

.editor-element-text .is-list--digit-2.is-list--decimal .element-main > div:before, .editor-element-text .is-list--digit-2.is-list--decimal .element-main > ol > li:before, .editor-element-text .is-list--digit-2.is-list--decimal .element-main > p:before, .editor-element-text .is-list--digit-2.is-list--decimal .element-main > span:before, .editor-element-text .is-list--digit-2.is-list--decimal .element-main > ul > li:before {
    width: 1.8em
}

.editor-element-text .is-list--decimal-leading-zero .element-main {
    counter-reset: list-count
}

.editor-element-text .is-list--decimal-leading-zero .element-main > div, .editor-element-text .is-list--decimal-leading-zero .element-main > ol > li, .editor-element-text .is-list--decimal-leading-zero .element-main > p, .editor-element-text .is-list--decimal-leading-zero .element-main > span, .editor-element-text .is-list--decimal-leading-zero .element-main > ul > li {
    margin-left: 1.8em
}

.editor-element-text .is-list--decimal-leading-zero .element-main > div:before, .editor-element-text .is-list--decimal-leading-zero .element-main > ol > li:before, .editor-element-text .is-list--decimal-leading-zero .element-main > p:before, .editor-element-text .is-list--decimal-leading-zero .element-main > span:before, .editor-element-text .is-list--decimal-leading-zero .element-main > ul > li:before {
    width: 1.8em;
    content: counter(list-count, decimal-leading-zero) ".";
    counter-increment: list-count
}

.editor-element-text .middle-v.is-list--decimal-leading-zero .element-main > div, .editor-element-text .middle-v.is-list--decimal-leading-zero .element-main > ol > li, .editor-element-text .middle-v.is-list--decimal-leading-zero .element-main > p, .editor-element-text .middle-v.is-list--decimal-leading-zero .element-main > span, .editor-element-text .middle-v.is-list--decimal-leading-zero .element-main > ul > li {
    margin-top: 1.8em
}

.editor-element-text .middle-v.is-list--decimal-leading-zero .element-main > div:before, .editor-element-text .middle-v.is-list--decimal-leading-zero .element-main > ol > li:before, .editor-element-text .middle-v.is-list--decimal-leading-zero .element-main > p:before, .editor-element-text .middle-v.is-list--decimal-leading-zero .element-main > span:before, .editor-element-text .middle-v.is-list--decimal-leading-zero .element-main > ul > li:before {
    height: 1.8em
}

.editor-element-text .middle-v.is-list--digit-2.is-list--decimal-leading-zero .element-main > div, .editor-element-text .middle-v.is-list--digit-2.is-list--decimal-leading-zero .element-main > ol > li, .editor-element-text .middle-v.is-list--digit-2.is-list--decimal-leading-zero .element-main > p, .editor-element-text .middle-v.is-list--digit-2.is-list--decimal-leading-zero .element-main > span, .editor-element-text .middle-v.is-list--digit-2.is-list--decimal-leading-zero .element-main > ul > li {
    margin-top: 1.8em
}

.editor-element-text .middle-v.is-list--digit-2.is-list--decimal-leading-zero .element-main > div:before, .editor-element-text .middle-v.is-list--digit-2.is-list--decimal-leading-zero .element-main > ol > li:before, .editor-element-text .middle-v.is-list--digit-2.is-list--decimal-leading-zero .element-main > p:before, .editor-element-text .middle-v.is-list--digit-2.is-list--decimal-leading-zero .element-main > span:before, .editor-element-text .middle-v.is-list--digit-2.is-list--decimal-leading-zero .element-main > ul > li:before {
    height: 1.8em
}

.editor-element-text .is-list--digit-2.is-list--decimal-leading-zero .element-main > div, .editor-element-text .is-list--digit-2.is-list--decimal-leading-zero .element-main > ol > li, .editor-element-text .is-list--digit-2.is-list--decimal-leading-zero .element-main > p, .editor-element-text .is-list--digit-2.is-list--decimal-leading-zero .element-main > span, .editor-element-text .is-list--digit-2.is-list--decimal-leading-zero .element-main > ul > li {
    margin-left: 1.8em
}

.editor-element-text .is-list--digit-2.is-list--decimal-leading-zero .element-main > div:before, .editor-element-text .is-list--digit-2.is-list--decimal-leading-zero .element-main > ol > li:before, .editor-element-text .is-list--digit-2.is-list--decimal-leading-zero .element-main > p:before, .editor-element-text .is-list--digit-2.is-list--decimal-leading-zero .element-main > span:before, .editor-element-text .is-list--digit-2.is-list--decimal-leading-zero .element-main > ul > li:before {
    width: 1.8em
}

.editor-element-text .is-list--lower-alpha .element-main {
    counter-reset: list-count
}

.editor-element-text .is-list--lower-alpha .element-main > div, .editor-element-text .is-list--lower-alpha .element-main > ol > li, .editor-element-text .is-list--lower-alpha .element-main > p, .editor-element-text .is-list--lower-alpha .element-main > span, .editor-element-text .is-list--lower-alpha .element-main > ul > li {
    margin-left: 1.3em
}

.editor-element-text .is-list--lower-alpha .element-main > div:before, .editor-element-text .is-list--lower-alpha .element-main > ol > li:before, .editor-element-text .is-list--lower-alpha .element-main > p:before, .editor-element-text .is-list--lower-alpha .element-main > span:before, .editor-element-text .is-list--lower-alpha .element-main > ul > li:before {
    width: 1.3em;
    content: counter(list-count, lower-alpha) ".";
    counter-increment: list-count
}

.editor-element-text .middle-v.is-list--lower-alpha .element-main > div, .editor-element-text .middle-v.is-list--lower-alpha .element-main > ol > li, .editor-element-text .middle-v.is-list--lower-alpha .element-main > p, .editor-element-text .middle-v.is-list--lower-alpha .element-main > span, .editor-element-text .middle-v.is-list--lower-alpha .element-main > ul > li {
    margin-top: 1.3em
}

.editor-element-text .middle-v.is-list--lower-alpha .element-main > div:before, .editor-element-text .middle-v.is-list--lower-alpha .element-main > ol > li:before, .editor-element-text .middle-v.is-list--lower-alpha .element-main > p:before, .editor-element-text .middle-v.is-list--lower-alpha .element-main > span:before, .editor-element-text .middle-v.is-list--lower-alpha .element-main > ul > li:before {
    height: 1.3em
}

.editor-element-text .middle-v.is-list--digit-2.is-list--lower-alpha .element-main > div, .editor-element-text .middle-v.is-list--digit-2.is-list--lower-alpha .element-main > ol > li, .editor-element-text .middle-v.is-list--digit-2.is-list--lower-alpha .element-main > p, .editor-element-text .middle-v.is-list--digit-2.is-list--lower-alpha .element-main > span, .editor-element-text .middle-v.is-list--digit-2.is-list--lower-alpha .element-main > ul > li {
    margin-top: 1.8em
}

.editor-element-text .middle-v.is-list--digit-2.is-list--lower-alpha .element-main > div:before, .editor-element-text .middle-v.is-list--digit-2.is-list--lower-alpha .element-main > ol > li:before, .editor-element-text .middle-v.is-list--digit-2.is-list--lower-alpha .element-main > p:before, .editor-element-text .middle-v.is-list--digit-2.is-list--lower-alpha .element-main > span:before, .editor-element-text .middle-v.is-list--digit-2.is-list--lower-alpha .element-main > ul > li:before {
    height: 1.8em
}

.editor-element-text .is-list--digit-2.is-list--lower-alpha .element-main > div, .editor-element-text .is-list--digit-2.is-list--lower-alpha .element-main > ol > li, .editor-element-text .is-list--digit-2.is-list--lower-alpha .element-main > p, .editor-element-text .is-list--digit-2.is-list--lower-alpha .element-main > span, .editor-element-text .is-list--digit-2.is-list--lower-alpha .element-main > ul > li {
    margin-left: 1.8em
}

.editor-element-text .is-list--digit-2.is-list--lower-alpha .element-main > div:before, .editor-element-text .is-list--digit-2.is-list--lower-alpha .element-main > ol > li:before, .editor-element-text .is-list--digit-2.is-list--lower-alpha .element-main > p:before, .editor-element-text .is-list--digit-2.is-list--lower-alpha .element-main > span:before, .editor-element-text .is-list--digit-2.is-list--lower-alpha .element-main > ul > li:before {
    width: 1.8em
}

.editor-element-text .is-list--upper-alpha .element-main {
    counter-reset: list-count
}

.editor-element-text .is-list--upper-alpha .element-main > div, .editor-element-text .is-list--upper-alpha .element-main > ol > li, .editor-element-text .is-list--upper-alpha .element-main > p, .editor-element-text .is-list--upper-alpha .element-main > span, .editor-element-text .is-list--upper-alpha .element-main > ul > li {
    margin-left: 1.3em
}

.editor-element-text .is-list--upper-alpha .element-main > div:before, .editor-element-text .is-list--upper-alpha .element-main > ol > li:before, .editor-element-text .is-list--upper-alpha .element-main > p:before, .editor-element-text .is-list--upper-alpha .element-main > span:before, .editor-element-text .is-list--upper-alpha .element-main > ul > li:before {
    width: 1.3em;
    content: counter(list-count, upper-alpha) ".";
    counter-increment: list-count
}

.editor-element-text .middle-v.is-list--upper-alpha .element-main > div, .editor-element-text .middle-v.is-list--upper-alpha .element-main > ol > li, .editor-element-text .middle-v.is-list--upper-alpha .element-main > p, .editor-element-text .middle-v.is-list--upper-alpha .element-main > span, .editor-element-text .middle-v.is-list--upper-alpha .element-main > ul > li {
    margin-top: 1.3em
}

.editor-element-text .middle-v.is-list--upper-alpha .element-main > div:before, .editor-element-text .middle-v.is-list--upper-alpha .element-main > ol > li:before, .editor-element-text .middle-v.is-list--upper-alpha .element-main > p:before, .editor-element-text .middle-v.is-list--upper-alpha .element-main > span:before, .editor-element-text .middle-v.is-list--upper-alpha .element-main > ul > li:before {
    height: 1.3em
}

.editor-element-text .middle-v.is-list--digit-2.is-list--upper-alpha .element-main > div, .editor-element-text .middle-v.is-list--digit-2.is-list--upper-alpha .element-main > ol > li, .editor-element-text .middle-v.is-list--digit-2.is-list--upper-alpha .element-main > p, .editor-element-text .middle-v.is-list--digit-2.is-list--upper-alpha .element-main > span, .editor-element-text .middle-v.is-list--digit-2.is-list--upper-alpha .element-main > ul > li {
    margin-top: 1.8em
}

.editor-element-text .middle-v.is-list--digit-2.is-list--upper-alpha .element-main > div:before, .editor-element-text .middle-v.is-list--digit-2.is-list--upper-alpha .element-main > ol > li:before, .editor-element-text .middle-v.is-list--digit-2.is-list--upper-alpha .element-main > p:before, .editor-element-text .middle-v.is-list--digit-2.is-list--upper-alpha .element-main > span:before, .editor-element-text .middle-v.is-list--digit-2.is-list--upper-alpha .element-main > ul > li:before {
    height: 1.8em
}

.editor-element-text .is-list--digit-2.is-list--upper-alpha .element-main > div, .editor-element-text .is-list--digit-2.is-list--upper-alpha .element-main > ol > li, .editor-element-text .is-list--digit-2.is-list--upper-alpha .element-main > p, .editor-element-text .is-list--digit-2.is-list--upper-alpha .element-main > span, .editor-element-text .is-list--digit-2.is-list--upper-alpha .element-main > ul > li {
    margin-left: 1.8em
}

.editor-element-text .is-list--digit-2.is-list--upper-alpha .element-main > div:before, .editor-element-text .is-list--digit-2.is-list--upper-alpha .element-main > ol > li:before, .editor-element-text .is-list--digit-2.is-list--upper-alpha .element-main > p:before, .editor-element-text .is-list--digit-2.is-list--upper-alpha .element-main > span:before, .editor-element-text .is-list--digit-2.is-list--upper-alpha .element-main > ul > li:before {
    width: 1.8em
}

.editor-element-text .is-list--cjk-ideographic .element-main {
    counter-reset: list-count
}

.editor-element-text .is-list--cjk-ideographic .element-main > div, .editor-element-text .is-list--cjk-ideographic .element-main > ol > li, .editor-element-text .is-list--cjk-ideographic .element-main > p, .editor-element-text .is-list--cjk-ideographic .element-main > span, .editor-element-text .is-list--cjk-ideographic .element-main > ul > li {
    margin-left: 1.8em
}

.editor-element-text .is-list--cjk-ideographic .element-main > div:before, .editor-element-text .is-list--cjk-ideographic .element-main > ol > li:before, .editor-element-text .is-list--cjk-ideographic .element-main > p:before, .editor-element-text .is-list--cjk-ideographic .element-main > span:before, .editor-element-text .is-list--cjk-ideographic .element-main > ul > li:before {
    width: 1.8em;
    content: counter(list-count, cjk-ideographic) "、";
    counter-increment: list-count
}

.editor-element-text .middle-v.is-list--cjk-ideographic .element-main > div, .editor-element-text .middle-v.is-list--cjk-ideographic .element-main > ol > li, .editor-element-text .middle-v.is-list--cjk-ideographic .element-main > p, .editor-element-text .middle-v.is-list--cjk-ideographic .element-main > span, .editor-element-text .middle-v.is-list--cjk-ideographic .element-main > ul > li {
    margin-top: 1.8em
}

.editor-element-text .middle-v.is-list--cjk-ideographic .element-main > div:before, .editor-element-text .middle-v.is-list--cjk-ideographic .element-main > ol > li:before, .editor-element-text .middle-v.is-list--cjk-ideographic .element-main > p:before, .editor-element-text .middle-v.is-list--cjk-ideographic .element-main > span:before, .editor-element-text .middle-v.is-list--cjk-ideographic .element-main > ul > li:before {
    height: 1.8em
}

.editor-element-text .middle-v.is-list--digit-2.is-list--cjk-ideographic .element-main > div, .editor-element-text .middle-v.is-list--digit-2.is-list--cjk-ideographic .element-main > ol > li, .editor-element-text .middle-v.is-list--digit-2.is-list--cjk-ideographic .element-main > p, .editor-element-text .middle-v.is-list--digit-2.is-list--cjk-ideographic .element-main > span, .editor-element-text .middle-v.is-list--digit-2.is-list--cjk-ideographic .element-main > ul > li {
    margin-top: 3em
}

.editor-element-text .middle-v.is-list--digit-2.is-list--cjk-ideographic .element-main > div:before, .editor-element-text .middle-v.is-list--digit-2.is-list--cjk-ideographic .element-main > ol > li:before, .editor-element-text .middle-v.is-list--digit-2.is-list--cjk-ideographic .element-main > p:before, .editor-element-text .middle-v.is-list--digit-2.is-list--cjk-ideographic .element-main > span:before, .editor-element-text .middle-v.is-list--digit-2.is-list--cjk-ideographic .element-main > ul > li:before {
    height: 3em
}

.editor-element-text .is-list--digit-2.is-list--cjk-ideographic .element-main > div, .editor-element-text .is-list--digit-2.is-list--cjk-ideographic .element-main > ol > li, .editor-element-text .is-list--digit-2.is-list--cjk-ideographic .element-main > p, .editor-element-text .is-list--digit-2.is-list--cjk-ideographic .element-main > span, .editor-element-text .is-list--digit-2.is-list--cjk-ideographic .element-main > ul > li {
    margin-left: 3em
}

.editor-element-text .is-list--digit-2.is-list--cjk-ideographic .element-main > div:before, .editor-element-text .is-list--digit-2.is-list--cjk-ideographic .element-main > ol > li:before, .editor-element-text .is-list--digit-2.is-list--cjk-ideographic .element-main > p:before, .editor-element-text .is-list--digit-2.is-list--cjk-ideographic .element-main > span:before, .editor-element-text .is-list--digit-2.is-list--cjk-ideographic .element-main > ul > li:before {
    width: 3em
}

.editor-element-effectText, .editor-element-styled-text {
    overflow: hidden
}

.editor-element-effectText .element-inner, .editor-element-styled-text .element-inner {
    position: relative;
    width: 100%;
    height: 100%;
    font-size: 0;
    white-space: nowrap;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

.editor-element-effectText .element-inner .elment-inner-content, .editor-element-styled-text .element-inner .elment-inner-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.editor-element-effectText .element-inner .elment-inner-content:before, .editor-element-styled-text .element-inner .elment-inner-content:before {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
    content: ""
}

.editor-element-effectText .element-inner .elment-inner-content.middle-h:before, .editor-element-styled-text .element-inner .elment-inner-content.middle-h:before {
    width: 0;
    height: 100%
}

.editor-element-effectText .element-inner .elment-inner-content.middle-v, .editor-element-styled-text .element-inner .elment-inner-content.middle-v {
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl
}

.editor-element-effectText .element-inner .elment-inner-content.middle-v:before, .editor-element-styled-text .element-inner .elment-inner-content.middle-v:before {
    width: 100%;
    height: 0
}

.editor-element-effectText .element-inner .element-main, .editor-element-styled-text .element-inner .element-main {
    display: inline-block;
    vertical-align: top
}

.editor-element-effectText .element-main, .editor-element-styled-text .element-main {
    position: relative;
    width: auto;
    height: auto;
    min-height: 1.2em;
    word-wrap: break-word;
    white-space: normal;
    outline: 0;
    cursor: default;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

.editor-element-effectText .element-main div, .editor-element-effectText .element-main li, .editor-element-effectText .element-main ol, .editor-element-effectText .element-main p, .editor-element-effectText .element-main ul, .editor-element-styled-text .element-main div, .editor-element-styled-text .element-main li, .editor-element-styled-text .element-main ol, .editor-element-styled-text .element-main p, .editor-element-styled-text .element-main ul {
    padding: 0;
    margin: 0;
    list-style: none
}

.editor-element-effectText.editor-element-editing:hover, .editor-element-styled-text.editor-element-editing:hover {
    outline: none
}

.editor-element-effectText .canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.editor-element-effectText .effect-text-result {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

.editor-element-effectText .effect-text-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.editor-element-effectText .effect-text-area {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

.editor-element-styled-text .styled-text-result {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    pointer-events: none
}

.editor-element-ellipse .element-main svg, .editor-element-ellipse svg.element-main, .editor-element-line .element-main svg, .editor-element-line svg.element-main, .editor-element-mask .element-main canvas, .editor-element-rect .element-main svg, .editor-element-rect svg.element-main, .editor-element-svg .element-main svg, .editor-element-svg svg.element-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.editor-element-mask .element-main canvas {
    z-index: 1
}

.editor-element-mask .element-mocker {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: no-repeat 0 0;
    background-size: 100% 100%
}

.editor-element-mask .mask-drop-area {
    position: absolute;
    z-index: 3;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 150px;
    height: 66px;
    font-size: 14px;
    color: #fff;
    background: rgba(51, 51, 51, .6);
    border: 1px dashed #fff;
    border-radius: 4px;
    transition: background .1s linear
}

.editor-element-mask .mask-drop-area:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #2254f4;
    border-radius: 4px;
    opacity: 0;
    content: "";
    transition-timing-function: linear;
    transition-duration: .1s;
    transition-property: left, top, right, bottom
}

.editor-element-mask .mask-drop-area svg {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    fill: #fff
}

.editor-element-mask .mask-drop-area--small {
    font-size: 0
}

.editor-element-mask .mask-drop-area--small svg {
    margin-right: 0
}

.editor-element-mask .mask-drop-area--active {
    color: #eef1f2;
    background: #2254f4;
    border: 1px solid #2254f4
}

.editor-element-mask .mask-drop-area--active:after {
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    opacity: 1
}

.editor-element-mask .mask-drop-area--active.mask-drop-area--small:after {
    display: none
}

.editor-element-mask .mask-drop-area--active svg {
    fill: #eef1f2
}

.editor-element-cell:hover:after, .editor-element-cell:hover:before, .editor-element-collage:hover:after, .editor-element-collage:hover:before {
    display: none
}

.editor-element-cell:hover .editor-element-cell--dragover-placeholder {
    border: 2px solid #005cf9 !important
}

.editor-element-cell .element-main {
    overflow: hidden
}

.editor-element-cell .element-main.element-main-empty {
    background: #fff
}

.editor-element-cell .element-main.element-main-empty .icon-add-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.editor-element-cell .element-main.element-main-empty .icon-add-img:after, .editor-element-cell .element-main.element-main-empty .icon-add-img:before {
    position: absolute;
    top: 8px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #a4c6ff;
    content: ""
}

.editor-element-cell .element-main.element-main-empty .icon-add-img:after {
    top: 0;
    left: 8px;
    width: 2px;
    height: 100%
}

.editor-element-cell .element-main.element-main-empty .icon-add-img--small {
    width: 10px;
    height: 10px
}

.editor-element-cell .element-main.element-main-empty .icon-add-img--small:before {
    top: 4px;
    height: 2px
}

.editor-element-cell .element-main.element-main-empty .icon-add-img--small:after {
    left: 4px;
    width: 2px
}

.editor-element-cell .element-main.element-main-empty .editor-element-cell--dragover-placeholder {
    border: 2px dashed #d1e0fc
}

.editor-element-cell .element-main .editor-element-cell--dragover-placeholder {
    border-color: transparent
}

.editor-element-cell .element-main > svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.editor-element-cell .element-main > svg g {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

.editor-element-cell--dragover .editor-element-cell--dragover-placeholder {
    z-index: 1;
    background-color: rgba(0, 92, 249, .1)
}

.editor-element-cell--dragover-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(0, 0%, 100%, 0);
    transition: background-color .25s
}

.editor-element-threeText .element-main .three-text {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    overflow: hidden
}

.editor-element-threeText .element-main .three-text, .editor-element-threeText .element-main .three-text .three-text-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.editor-element-threeText .element-main .three-text .three-text-result {
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.editor-element-ninePatch {
    will-change: transform
}

.editor-element-ninePatch.is-background {
    z-index: -2;
    pointer-events: none
}

.editor-element-ninePatch.is-background .element-main {
    display: block;
    min-height: auto
}

.editor-element-ninePatch .element-main {
    width: 100%;
    height: 100%;
    border-width: 0
}

.editor-element-watermark {
    overflow: hidden
}

.editor-element-watermark__canvas, .editor-element-watermark__image {
    position: absolute;
    display: block;
    image-rendering: -webkit-optimize-contrast
}

.editor-element-watermark__cell--hidden {
    visibility: hidden
}

.editor-element-arrow .element-main svg {
    position: absolute;
    display: block
}

.editor-element-disabled {
    pointer-events: none
}

.editor-canvas {
    background-color: #fff;
    background-image: linear-gradient(to top right, #ccc 25%, transparent 0, transparent 75%, #ccc 0, #ccc), linear-gradient(to top right, #ccc 25%, transparent 0, transparent 75%, #ccc 0, #ccc);
    background-position: 0 0, 8px 8px;
    background-size: 16px 16px;
    z-index: 1;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.editor-canvas, .editor-canvas .editor-layout {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.editor-canvas .editor-layout {
    background-repeat: no-repeat;
    contain: content
}

.editor-canvas .editor-layout.editor-layout-dragover:after {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 2px solid red;
    pointer-events: none;
    content: " "
}

.editor-layout.editor-layout-preview .editor-element-link-selected > span .border-before, .editor-layout.editor-layout-preview .editor-element-selected > span .border-before {
    display: none
}

.editor-container-mirror .editor-shell {
    position: relative;
    overflow: hidden
}

.editor-container-mirror .editor-mirror {
    position: relative
}

.editor-container-mirror .editor-mirror .editor-layout {
    position: relative;
    margin: 0;
    overflow: hidden
}

.editor-container-mirror .editor-mirror .editor-layout + .editor-layout {
    margin-top: 40px
}

.editor-container-mirror .editor-canvas {
    background: none
}

.editor-container-mirror .editor-canvas .editor-element:after, .editor-container-mirror .editor-canvas .editor-element:before {
    visibility: hidden
}

.editor-container-flow .editor-flow {
    position: relative
}

.editor-container-flow .editor-flow .editor-layout {
    position: relative;
    overflow: hidden
}

.editor-toolbar-btn {
    position: relative;
    width: auto;
    height: 28px;
    padding: 0 6px;
    font-size: 12px;
    line-height: 1;
    display: inline-block;
    color: #333;
    text-align: center;
    white-space: nowrap;
    vertical-align: top;
    background: none;
    border: 0;
    border-radius: 3px;
    outline: 0;
    cursor: pointer;
    -webkit-appearance: none
}

.editor-toolbar-btn .icon-success {
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='%23b4b4b4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.4 7.048L12.03.417l1.22 1.22-7.927 7.926L.75 4.38l1.22-1.22L5.4 7.049z' fill='%232254F4'/%3E%3C/svg%3E");
    width: 14px;
    height: 14px
}

.editor-toolbar-btn .icon-close {
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='10' fill='%23b4b4b4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.25 5L10 8.75 8.75 10 5 6.25 1.25 10 0 8.75 3.75 5 0 1.25 1.25 0 5 3.75 8.75 0 10 1.25 6.25 5z' fill='%2333383E'/%3E%3C/svg%3E");
    width: 14px;
    height: 14px
}

.editor-toolbar-btn.disabled, .editor-toolbar-btn[disabled] {
    opacity: .5;
    cursor: not-allowed !important
}

.editor-toolbar {
    position: relative;
    z-index: 1;
    float: left;
    padding: 5px;
    clear: both;
    font-family: Arial, STHeitiSC-Light, Helvetica Neue, Microsoft Yahei;
    font-size: 13px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
    cursor: default
}

.editor-toolbar:hover {
    z-index: 3
}

.editor-toolbar + .editor-toolbar {
    margin-top: 10px
}

.editor-toolbar-inner {
    height: 28px;
    white-space: nowrap
}

.editor-toolbar-block, .editor-toolbar-pipe {
    display: inline-block;
    vertical-align: top
}

.editor-toolbar-pipe {
    width: 0;
    height: 16px;
    margin: 6px 1px 0;
    border-left: 1px solid #eee
}

.editor-toolbar-pipe.is-full {
    height: 38px;
    margin: -5px 1px 0
}

.editor-toolbar-loading {
    position: absolute;
    display: inline-block;
    width: 15px;
    height: 20px;
    margin: 4px 0 0 -20px;
    line-height: 20px;
    text-align: center;
    vertical-align: top;
    background: #fff
}

.editor-toolbar-pop {
    position: absolute;
    z-index: 5;
    -webkit-user-select: none
}

.editor-percentage-scaler {
    display: inline-block;
    vertical-align: middle
}

.editor-percentage-scaler .scaler-wrapper {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center
}

.editor-percentage-scaler .scaler-line {
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 1px;
    height: 6px;
    background: #979797
}

.editor-percentage-scaler .scaler-mask {
    display: inline-block;
    width: 150px;
    height: 3px;
    margin: auto 5px;
    vertical-align: middle
}

.editor-percentage-scaler .scaler-mask-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: #dee3e4;
    border-radius: 100px
}

.editor-percentage-scaler .scaler-bar {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 0;
    height: 3px;
    background: #015cf9;
    border-radius: 100px
}

.editor-percentage-scaler .scaler-btn {
    position: absolute;
    top: 50%;
    left: 0;
    width: 17px;
    height: 17px;
    background: #fff;
    border: 1px solid #979797;
    border-radius: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.editor-percentage-scaler .scaler-crop-button {
    position: relative;
    top: 1px;
    margin-right: 5px;
    color: #333;
    border: 0;
    outline: 0;
    cursor: pointer;
    -webkit-appearance: none
}

.editor-percentage-scaler .scaler-crop-button.active {
    color: #015cf9
}

.editor-percentage-scaler .scaler-tooltip-wrapper {
    position: relative;
    top: -2px;
    left: -2px;
    z-index: 1;
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer
}

.editor-toolbar-more {
    display: inline-block;
    vertical-align: top
}

.editor-toolbar-more .editor-popup-ne {
    right: 0;
    margin-top: 18px;
    background-color: #fff
}

.editor-toolbar-more .editor-popup-ne:before {
    right: 15px;
    left: auto
}

.editor-toolbar-more .more-section {
    padding: 8px 0;
    border-bottom: 1px solid #eee
}

.editor-toolbar-more .more-section:first-child {
    padding-top: 0
}

.editor-toolbar-more .more-section:last-child {
    padding-bottom: 0;
    border-bottom: 0
}

.editor-toolbar-more .more-section.buttons-5 .editor-toolbar-btn {
    margin-right: 11px
}

.editor-toolbar-more .more-section.buttons-5 .editor-toolbar-btn:last-child {
    margin-right: 0
}

.editor-toolbar-more .more-section .editor-toolbar-btn {
    margin-right: 1px;
    font-size: 12px
}

.editor-toolbar-more .more-section .editor-toolbar-space {
    display: inline-block;
    width: 10px;
    height: 5px;
    vertical-align: top
}

.editor-toolbar-more .editor-num-picker {
    margin-bottom: 5px
}

.editor-toolbar-more .editor-num-picker:last-child {
    margin-bottom: 0
}

.editor-toolbar-more .more-btns {
    font-size: 0
}

.editor-toolbar-more .more-btns .editor-toolbar-pipe {
    height: 18px;
    margin-top: 4px
}

.toolbar-north .editor-toolbar-more .editor-popup-ne {
    position: absolute;
    bottom: 100%;
    margin-bottom: 18px
}

.toolbar-north .editor-toolbar-more .editor-popup-ne:before {
    bottom: 0;
    margin-top: 5px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .1)
}

.editor-toolbar-text {
    position: relative;
    top: 1px;
    padding-right: 10px;
    padding-left: 10px;
    line-height: 28px
}

.editor-guider {
    will-change: contents
}

.editor-guider .editor-guider-x, .editor-guider .editor-guider-y {
    position: absolute;
    z-index: 5;
    overflow: hidden;
    border-color: #ff4aff;
    border-style: solid;
    border-width: 0
}

.editor-guider .editor-guider-x {
    width: 100%;
    height: 0;
    border-top-width: 1px
}

.editor-guider .editor-guider-y {
    width: 0;
    height: 100%;
    border-left-width: 1px
}

.editor-guider .editor-guider-canvas {
    border-style: solid
}

.editor-guider .editor-equally-guider-x, .editor-guider .editor-equally-guider-y {
    position: absolute;
    z-index: 5;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    background-color: rgba(244, 36, 253, .2)
}

.editor-guider .editor-equally-guider-x i, .editor-guider .editor-equally-guider-y i {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    background: #1690ff
}

.editor-guider .editor-equally-guider-x i:after, .editor-guider .editor-equally-guider-x i:before, .editor-guider .editor-equally-guider-y i:after, .editor-guider .editor-equally-guider-y i:before {
    display: block;
    background: #1690ff;
    content: ""
}

.editor-guider .editor-equally-guider-x .editor-equally-guider-text, .editor-guider .editor-equally-guider-y .editor-equally-guider-text {
    position: absolute;
    padding: 3px 9px;
    font-size: 12px;
    font-style: normal;
    line-height: 1;
    color: #fff;
    background: #1690ff;
    border-radius: 10px
}

.editor-guider .editor-equally-guider-y, .editor-guider .editor-equally-guider-y i {
    -webkit-flex-direction: column;
    flex-direction: column
}

.editor-guider .editor-equally-guider-y i {
    width: 1px;
    height: 100%
}

.editor-guider .editor-equally-guider-y i:after, .editor-guider .editor-equally-guider-y i:before {
    width: 5px;
    height: 1px
}

.editor-guider .editor-equally-guider-y .editor-equally-guider-text {
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%) scale(.6666);
    transform: translateY(-50%) scale(.6666)
}

.editor-guider .editor-equally-guider-x {
    width: 100%
}

.editor-guider .editor-equally-guider-x i {
    width: 100%;
    height: 1px
}

.editor-guider .editor-equally-guider-x i:after, .editor-guider .editor-equally-guider-x i:before {
    width: 1px;
    height: 5px
}

.editor-guider .editor-equally-guider-x .editor-equally-guider-text {
    bottom: 2px;
    left: 50%;
    -webkit-transform: translate(-50%) scale(.6666);
    transform: translate(-50%) scale(.6666)
}

.editor-selector-mask {
    position: absolute;
    z-index: 3;
    background: rgba(0, 196, 204, .15);
    border: 1px solid #00c4cc;
    border-radius: 2px;
    cursor: default
}

.editor-transform {
    position: absolute;
    z-index: 5;
    box-sizing: border-box;
    cursor: move
}

.editor-transform:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    margin: -2px 0 0 -2px;
    border: 2px solid #6ccfff;
    content: ""
}

.editor-transform:after {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    width: 100%;
    height: 25px;
    cursor: move;
    content: ""
}

.editor-transform.editor-fadeout, .editor-transform .editor-fadeout {
    opacity: 0
}

.editor-transform.editor-transition, .editor-transform .editor-transition {
    transition: opacity .3s
}

.editor-transform-thin-border:before {
    margin: -1px 0 0 -1px;
    border-color: rgba(108, 207, 255, .3);
    border-width: 1px
}

.editor-transform-multiple:before {
    border-style: dotted
}

.editor-transform-editing:after {
    display: block
}

.editor-transform-lock {
    cursor: default
}

.editor-transform-lock .editor-lock-icon {
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff'%3E%3Cpath d='M3.095 7.059L11.847 7c.604-.004 1.098.437 1.102.984l.051 5.95c.005.548-.481.995-1.086.999l-8.752.059c-.604.004-1.098-.437-1.102-.984l-.051-5.95c-.004-.548.482-.995 1.086-.999z'/%3E%3Cpath d='M9.484 4.927v3.979h1.5V4.927a3.51 3.51 0 00-7.02 0v2.802h1.5V4.927c0-1.109.578-2.01 2.01-2.01s2.01.902 2.01 2.01z'/%3E%3C/svg%3E");
    position: absolute;
    right: -11px;
    bottom: -11px;
    z-index: 2;
    width: 23px;
    height: 23px;
    background-color: #000;
    background-repeat: no-repeat;
    background-position: 5px 4px;
    background-size: 14px 14px;
    border-radius: 50%;
    cursor: pointer
}

.editor-transform-lock .editor-grip, .editor-transform-lock .editor-rotator {
    display: none
}

.editor-transform .editor-grip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    padding: 11px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.editor-transform .editor-grip b {
    display: block;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #c0c5cf;
    border-radius: 6px;
    box-shadow: 0 0 2px 0 rgba(86, 90, 98, .2)
}

.editor-transform .editor-grip-nw {
    margin-top: -1px;
    margin-left: -1px
}

.editor-transform .editor-grip-n {
    left: 50%;
    margin-top: -1px;
    cursor: ns-resize
}

.editor-transform .editor-grip-ne {
    left: 100%;
    margin-top: -1px;
    margin-left: 1px;
    cursor: nesw-resize
}

.editor-transform .editor-grip-e {
    top: 50%;
    left: 100%;
    margin-left: 1px;
    cursor: ew-resize
}

.editor-transform .editor-grip-se {
    top: 100%;
    left: 100%;
    margin-top: 1px;
    margin-left: 1px;
    cursor: nwse-resize
}

.editor-transform .editor-grip-s {
    top: 100%;
    left: 50%;
    margin-top: 1px;
    cursor: ns-resize
}

.editor-transform .editor-grip-sw {
    top: 100%;
    margin-top: 1px;
    margin-left: -1px;
    cursor: nesw-resize
}

.editor-transform .editor-grip-w {
    top: 50%;
    left: 0;
    margin-left: -1px;
    cursor: ew-resize
}

.editor-transform .editor-grip-e b, .editor-transform .editor-grip-w b {
    width: 7px;
    height: 16px
}

.editor-transform .editor-grip-n b, .editor-transform .editor-grip-s b {
    width: 16px;
    height: 7px
}

.editor-transform .editor-grip-ne, .editor-transform .editor-grip-nw, .editor-transform .editor-grip-round, .editor-transform .editor-grip-se, .editor-transform .editor-grip-sw {
    z-index: 6
}

.editor-transform .editor-grip-ne b, .editor-transform .editor-grip-nw b, .editor-transform .editor-grip-round b, .editor-transform .editor-grip-se b, .editor-transform .editor-grip-sw b {
    width: 12px;
    height: 12px;
    border-radius: 50%
}

.editor-transform .editor-rotator {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 4;
    margin: 14px 0 0 -11px;
    cursor: pointer
}

.editor-transform .editor-rotator b {
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='%23757575'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23CCD1DA' fill='%23FFF' cx='12' cy='12' r='11.5'/%3E%3Cpath d='M16.242 12.012a4.25 4.25 0 00-5.944-4.158L9.696 6.48a5.75 5.75 0 018.048 5.532h1.263l-2.01 3.002-2.008-3.002h1.253zm-8.484-.004a4.25 4.25 0 005.943 3.638l.6 1.375a5.75 5.75 0 01-8.046-5.013H5.023L7.02 9.004l1.997 3.004h-1.26z' fill='%23000' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");
    position: relative;
    z-index: 2;
    display: block;
    width: 22px;
    height: 22px;
    background-size: 100% 100%
}

.editor-transform .editor-rotator b span {
    position: absolute;
    top: 40px;
    left: 50%;
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    color: #fff;
    background: #0e1217;
    border-radius: 4px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.editor-transform .editor-rotator-three {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 6;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    margin-left: -14px;
    background-color: #3a3a3a;
    border-radius: 50%;
    cursor: pointer
}

.editor-transform .editor-rotator-three b {
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg' fill='%23757575'%3E%3Cpath d='M16.683 4.305l2.856.766-6.05 5.624L11.81 3l2.84.76C16.13 1.367 17.96 0 20 0c3.819 0 6.877 4.845 8.236 11.764C35.156 13.124 40 16.18 40 20c0 3.787-4.722 6.846-11.763 8.231C26.878 35.153 23.82 40 20 40c-3.82 0-6.877-4.846-8.237-11.766C4.79 26.867 0 23.802 0 20c0-5.207 9.008-9 20-9 2.128 0 4.182.142 6.11.41C24.872 5.79 22.497 2 20 2c-1.11 0-2.263.788-3.317 2.305zM17 26.84V24l6.999 4.389L17 32v-3.162l-.883-.002a42.797 42.797 0 01-2.228-.248C15.127 34.21 17.502 38 20 38c3.63 0 7-8.005 7-18 0-2.297-.178-4.49-.496-6.504A41.86 41.86 0 0020 13c-2.299 0-4.492.178-6.507.497A41.996 41.996 0 0013 20c0 2.301.179 4.497.498 6.514.869.136 1.772.246 2.704.326H17zm11.59-12.95c.268 1.928.41 3.982.41 6.11a44.7 44.7 0 01-.41 6.114C34.354 24.843 38 22.396 38 20c0-2.497-3.79-4.872-9.41-6.11zM11.41 26.12A44.696 44.696 0 0111 20c0-2.101.14-4.157.413-6.111C5.79 15.127 2 17.502 2 20c0 2.453 3.752 4.872 9.41 6.121z' fill='%23FFF'/%3E%3C/svg%3E");
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 20px
}

.editor-transform .editor-temp-group-icon {
    position: absolute;
    top: 50%;
    right: -36px;
    z-index: 6;
    width: 24px;
    height: 24px;
    margin-top: -11px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 12px 12px;
    border: 1px solid #c0c5cf;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M6.74 4.85l-1.102-1.1L8.403.985a2.734 2.734 0 013.866 0l.69.69a2.734 2.734 0 010 3.867l-2.764 2.764a2.734 2.734 0 01-3.865 0l1.1-1.102c.46.46 1.204.46 1.663 0l2.764-2.764c.46-.46.46-1.204 0-1.663l-.69-.691a1.176 1.176 0 00-1.664 0L6.74 4.85zm.28 4.428l1.102 1.101-2.764 2.765a2.734 2.734 0 01-3.866 0L.8 12.453a2.734 2.734 0 010-3.866l2.764-2.765a2.734 2.734 0 013.866 0l-1.1 1.102a1.176 1.176 0 00-1.663 0L1.902 9.688c-.46.46-.46 1.204 0 1.663l.691.691c.46.46 1.204.46 1.663 0l2.765-2.764zM.92 2.546l2.658 1.24-.413.885-2.658-1.24.413-.885zM11.454 13.08l-.886.413-1.239-2.658.886-.413 1.239 2.658zM3.939 0l1.24 2.657-.887.413L3.053.413 3.94 0zM14 10.06l-.413.887-2.657-1.24.413-.885L14 10.06z'/%3E%3C/svg%3E")
}

.editor-transform .editor-temp-group-icon span {
    position: absolute;
    top: 35px;
    left: -108px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 280px;
    padding: 0 12px 0 16px;
    font-size: 14px;
    line-height: 38px;
    color: #fff;
    white-space: nowrap;
    background: #2254f4;
    border-radius: 3px;
    cursor: default
}

.editor-transform .editor-temp-group-icon span:before {
    position: absolute;
    top: -14px;
    left: 40%;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 8px;
    border-bottom-color: #2254f4;
    content: ""
}

.editor-transform .editor-temp-group-icon span b {
    display: block;
    width: 20px;
    height: 20px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAABLklEQVRYR+2WOw7CMAxAnaELEhILbCxchgOAxMARWDgKC0dgYOAAnIcNFiQQC0ORh6AKNa1/QEDumjh+erHdhNH0WkLGX3BA5e24QaVAcINuUGtAG/9fNdjvAczHBWz2dzideW6ksWSDmGAxKaDbCXC5lbDe0SE1sWTA5ayA4SA8tVEhq3Ax+HAsYbW9k66ADFiXqA1SEvNKTQbEQE5Czt4mlSxAKqQVHOZjA7ZB4npspmimrRRMDcbDUpZwHTvdAk5ssAmyakNjLp4juuIqRJ1JXLeAUxtM1WM2gCl7VvWnMph1kzTNua+PGcoQpuwh/Yi5g5qTmLPXZFBLEkpixI+Fn3pucYfwRx6scShn++Sndp31PvW/2BpI3CTvBkmd7wa15t2gG9Qa0MZnX4MPMf5ioGIEwBgAAAAASUVORK5CYII=);
    background-size: 100% 100%;
    cursor: pointer
}

.editor-transform .editor-watermark-edit-popover {
    position: absolute;
    top: -49px;
    right: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    color: #333;
    background-color: #fff;
    border-radius: 2px;
    cursor: pointer
}

.editor-transform .editor-watermark-edit-popover-icon {
    width: 20px;
    height: 20px;
    margin-right: 4px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 20 20px;
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23333'%3E%3Cg fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M11.524 4.94l3.535 3.536-8.839 8.84H2.685V13.78l8.839-8.84zm0 2.358L4.352 14.47v1.178H5.53l7.172-7.172-1.178-1.178zm2.946-4.125l2.357 2.357a.833.833 0 010 1.179l-1.179 1.178-3.535-3.535 1.178-1.179a.833.833 0 011.179 0z'/%3E%3Cpath d='M11.524 4.94l3.535 3.536-8.839 8.84H2.685V13.78l8.839-8.84zm0 2.358L4.352 14.47v1.178H5.53l7.172-7.172-1.178-1.178zm2.946-4.125l2.357 2.357a.833.833 0 010 1.179l-1.179 1.178-3.535-3.535 1.178-1.179a.833.833 0 011.179 0z'/%3E%3C/g%3E%3C/svg%3E")
}

.editor-transform.octant0 .editor-grip-n {
    cursor: ns-resize
}

.editor-transform.octant1 .editor-grip-n {
    cursor: nesw-resize
}

.editor-transform.octant2 .editor-grip-n {
    cursor: ew-resize
}

.editor-transform.octant3 .editor-grip-n {
    cursor: nwse-resize
}

.editor-transform.octant4 .editor-grip-n {
    cursor: ns-resize
}

.editor-transform.octant5 .editor-grip-n {
    cursor: nesw-resize
}

.editor-transform.octant6 .editor-grip-n {
    cursor: ew-resize
}

.editor-transform.octant7 .editor-grip-n {
    cursor: nwse-resize
}

.editor-transform.octant0 .editor-grip-ne {
    cursor: nesw-resize
}

.editor-transform.octant1 .editor-grip-ne {
    cursor: ew-resize
}

.editor-transform.octant2 .editor-grip-ne {
    cursor: nwse-resize
}

.editor-transform.octant3 .editor-grip-ne {
    cursor: ns-resize
}

.editor-transform.octant4 .editor-grip-ne {
    cursor: nesw-resize
}

.editor-transform.octant5 .editor-grip-ne {
    cursor: ew-resize
}

.editor-transform.octant6 .editor-grip-ne {
    cursor: nwse-resize
}

.editor-transform.octant7 .editor-grip-ne {
    cursor: ns-resize
}

.editor-transform.octant0 .editor-grip-e {
    cursor: ew-resize
}

.editor-transform.octant1 .editor-grip-e {
    cursor: nwse-resize
}

.editor-transform.octant2 .editor-grip-e {
    cursor: ns-resize
}

.editor-transform.octant3 .editor-grip-e {
    cursor: nesw-resize
}

.editor-transform.octant4 .editor-grip-e {
    cursor: ew-resize
}

.editor-transform.octant5 .editor-grip-e {
    cursor: nwse-resize
}

.editor-transform.octant6 .editor-grip-e {
    cursor: ns-resize
}

.editor-transform.octant7 .editor-grip-e {
    cursor: nesw-resize
}

.editor-transform.octant0 .editor-grip-se {
    cursor: nwse-resize
}

.editor-transform.octant1 .editor-grip-se {
    cursor: ns-resize
}

.editor-transform.octant2 .editor-grip-se {
    cursor: nesw-resize
}

.editor-transform.octant3 .editor-grip-se {
    cursor: ew-resize
}

.editor-transform.octant4 .editor-grip-se {
    cursor: nwse-resize
}

.editor-transform.octant5 .editor-grip-se {
    cursor: ns-resize
}

.editor-transform.octant6 .editor-grip-se {
    cursor: nesw-resize
}

.editor-transform.octant7 .editor-grip-se {
    cursor: ew-resize
}

.editor-transform.octant0 .editor-grip-s {
    cursor: ns-resize
}

.editor-transform.octant1 .editor-grip-s {
    cursor: nesw-resize
}

.editor-transform.octant2 .editor-grip-s {
    cursor: ew-resize
}

.editor-transform.octant3 .editor-grip-s {
    cursor: nwse-resize
}

.editor-transform.octant4 .editor-grip-s {
    cursor: ns-resize
}

.editor-transform.octant5 .editor-grip-s {
    cursor: nesw-resize
}

.editor-transform.octant6 .editor-grip-s {
    cursor: ew-resize
}

.editor-transform.octant7 .editor-grip-s {
    cursor: nwse-resize
}

.editor-transform.octant0 .editor-grip-sw {
    cursor: nesw-resize
}

.editor-transform.octant1 .editor-grip-sw {
    cursor: ew-resize
}

.editor-transform.octant2 .editor-grip-sw {
    cursor: nwse-resize
}

.editor-transform.octant3 .editor-grip-sw {
    cursor: ns-resize
}

.editor-transform.octant4 .editor-grip-sw {
    cursor: nesw-resize
}

.editor-transform.octant5 .editor-grip-sw {
    cursor: ew-resize
}

.editor-transform.octant6 .editor-grip-sw {
    cursor: nwse-resize
}

.editor-transform.octant7 .editor-grip-sw {
    cursor: ns-resize
}

.editor-transform.octant0 .editor-grip-w {
    cursor: ew-resize
}

.editor-transform.octant1 .editor-grip-w {
    cursor: nwse-resize
}

.editor-transform.octant2 .editor-grip-w {
    cursor: ns-resize
}

.editor-transform.octant3 .editor-grip-w {
    cursor: nesw-resize
}

.editor-transform.octant4 .editor-grip-w {
    cursor: ew-resize
}

.editor-transform.octant5 .editor-grip-w {
    cursor: nwse-resize
}

.editor-transform.octant6 .editor-grip-w {
    cursor: ns-resize
}

.editor-transform.octant7 .editor-grip-w {
    cursor: nesw-resize
}

.editor-transform.octant0 .editor-grip-nw, .editor-transform.octant8 .editor-grip-nw {
    cursor: nwse-resize
}

.editor-transform.octant1 .editor-grip-nw {
    cursor: ns-resize
}

.editor-transform.octant2 .editor-grip-nw {
    cursor: nesw-resize
}

.editor-transform.octant3 .editor-grip-nw {
    cursor: ew-resize
}

.editor-transform.octant4 .editor-grip-nw {
    cursor: nwse-resize
}

.editor-transform.octant5 .editor-grip-nw {
    cursor: ns-resize
}

.editor-transform.octant6 .editor-grip-nw {
    cursor: nesw-resize
}

.editor-transform.octant7 .editor-grip-nw {
    cursor: ew-resize
}

.editor-transform.octant0 .editor-rotator, .editor-transform.octant8 .editor-rotator {
    cursor: url(../img/ic_mouse_rotation_0.1c6c9df0.svg) 11 9, pointer
}

.editor-transform.octant1 .editor-rotator {
    cursor: url(../img/ic_mouse_rotation_-45.640f648c.svg) 11 11, pointer
}

.editor-transform.octant2 .editor-rotator {
    cursor: url(../img/ic_mouse_rotation_-90.22b2eeaa.svg) 13 11, pointer
}

.editor-transform.octant3 .editor-rotator {
    cursor: url(../img/ic_mouse_rotation_-135.0ed8a36c.svg) 11 11, pointer
}

.editor-transform.octant4 .editor-rotator {
    cursor: url(../img/ic_mouse_rotation_180.315aa19b.svg) 11 13, pointer
}

.editor-transform.octant5 .editor-rotator {
    cursor: url(../img/ic_mouse_rotation_135.16a9303f.svg) 11 11, pointer
}

.editor-transform.octant6 .editor-rotator {
    cursor: url(../img/ic_mouse_rotation_90.9aa5fe4b.svg) 9 11, pointer
}

.editor-transform.octant7 .editor-rotator {
    cursor: url(../img/ic_mouse_rotation_45.f97ae09c.svg) 11 11, pointer
}

.editor-transform-inner {
    border: 0;
    cursor: move
}

.editor-transform-inner:before {
    box-sizing: border-box;
    margin: 0
}

.editor-transform-inner .editor-rotator {
    display: none
}

.editor-transform-inner .editor-grip {
    position: absolute;
    top: auto;
    left: auto;
    z-index: 5;
    padding: 0;
    margin: 0;
    -webkit-filter: drop-shadow(0 0 2px rgba(0, 0, 0, .3));
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .3));
    cursor: nwse-resize
}

.editor-transform-inner .editor-grip b {
    display: none
}

.editor-transform-inner .editor-grip:after, .editor-transform-inner .editor-grip:before {
    position: absolute;
    background: #fff;
    border-radius: 2px;
    content: ""
}

.editor-transform-inner .editor-grip:before {
    width: 100%;
    height: 4px
}

.editor-transform-inner .editor-grip:after {
    width: 4px;
    height: 100%
}

.editor-transform-inner .editor-grip-nw {
    cursor: nwse-resize
}

.editor-transform-inner .editor-grip-nw:after, .editor-transform-inner .editor-grip-nw:before {
    top: 50%;
    left: 50%
}

.editor-transform-inner .editor-grip-n {
    left: 50%;
    cursor: ns-resize
}

.editor-transform-inner .editor-grip-n:before {
    top: 50%;
    left: 0
}

.editor-transform-inner .editor-grip-n:after {
    display: none
}

.editor-transform-inner .editor-grip-ne {
    left: 100%;
    cursor: nesw-resize
}

.editor-transform-inner .editor-grip-ne:after, .editor-transform-inner .editor-grip-ne:before {
    top: 50%;
    right: 50%
}

.editor-transform-inner .editor-grip-se {
    top: 100%;
    left: 100%;
    cursor: nwse-resize
}

.editor-transform-inner .editor-grip-se:after, .editor-transform-inner .editor-grip-se:before {
    right: 50%;
    bottom: 50%
}

.editor-transform-inner .editor-grip-sw {
    top: 100%;
    cursor: nesw-resize
}

.editor-transform-inner .editor-grip-sw:after, .editor-transform-inner .editor-grip-sw:before {
    bottom: 50%;
    left: 50%
}

.editor-transform-inner .editor-grip-e {
    top: 50%;
    left: 100%;
    cursor: ew-resize
}

.editor-transform-inner .editor-grip-e:before {
    display: none
}

.editor-transform-inner .editor-grip-e:after {
    top: 0;
    right: 50%
}

.editor-transform-inner .editor-grip-s {
    top: 100%;
    left: 50%;
    cursor: ns-resize
}

.editor-transform-inner .editor-grip-s:before {
    bottom: 50%;
    left: 0
}

.editor-transform-inner .editor-grip-s:after {
    display: none
}

.editor-transform-inner .editor-grip-w {
    top: 50%;
    left: 0;
    cursor: ew-resize
}

.editor-transform-inner .editor-grip-w:before {
    display: none
}

.editor-transform-inner .editor-grip-w:after {
    top: 0;
    left: 50%
}

.editor-transform-inner .editor-grip-n:after, .editor-transform-inner .editor-grip-n:before, .editor-transform-inner .editor-grip-ne:after, .editor-transform-inner .editor-grip-ne:before, .editor-transform-inner .editor-grip-nw:after, .editor-transform-inner .editor-grip-nw:before {
    margin-top: -1px
}

.editor-transform-inner .editor-grip-s:after, .editor-transform-inner .editor-grip-s:before, .editor-transform-inner .editor-grip-se:after, .editor-transform-inner .editor-grip-se:before, .editor-transform-inner .editor-grip-sw:after, .editor-transform-inner .editor-grip-sw:before {
    margin-bottom: -1px
}

.editor-transform-inner .editor-grip-ne:after, .editor-transform-inner .editor-grip-ne:before, .editor-transform-inner .editor-grip-nw:after, .editor-transform-inner .editor-grip-nw:before, .editor-transform-inner .editor-grip-w:after, .editor-transform-inner .editor-grip-w:before {
    margin-left: -1px
}

.editor-transform-inner .editor-grip-e:after, .editor-transform-inner .editor-grip-e:before, .editor-transform-inner .editor-grip-ne:after, .editor-transform-inner .editor-grip-ne:before, .editor-transform-inner .editor-grip-se:after, .editor-transform-inner .editor-grip-se:before {
    margin-right: -1px
}

.editor-transform-submodel-wrap {
    position: absolute;
    z-index: 6
}

@-webkit-keyframes fadeout {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeout {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.editor-image-transform {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 38px;
    height: 38px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.editor-image-transform .editor-image-transform__scale-inner:before, .editor-image-transform .text-tip {
    position: absolute;
    display: none;
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    color: #fff;
    white-space: nowrap;
    background: #0e1217;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.editor-image-transform.octant0 .editor-image-transform__rotator b, .editor-image-transform.octant8 .editor-image-transform__rotator b {
    cursor: url(../img/ic_mouse_rotation_0.1c6c9df0.svg) 11 9, pointer
}

.editor-image-transform.octant1 .editor-image-transform__rotator b {
    cursor: url(../img/ic_mouse_rotation_-45.640f648c.svg) 11 11, pointer
}

.editor-image-transform.octant2 .editor-image-transform__rotator b {
    cursor: url(../img/ic_mouse_rotation_-90.22b2eeaa.svg) 13 11, pointer
}

.editor-image-transform.octant3 .editor-image-transform__rotator b {
    cursor: url(../img/ic_mouse_rotation_-135.0ed8a36c.svg) 11 11, pointer
}

.editor-image-transform.octant4 .editor-image-transform__rotator b {
    cursor: url(../img/ic_mouse_rotation_180.315aa19b.svg) 11 13, pointer
}

.editor-image-transform.octant5 .editor-image-transform__rotator b {
    cursor: url(../img/ic_mouse_rotation_135.16a9303f.svg) 11 11, pointer
}

.editor-image-transform.octant6 .editor-image-transform__rotator b {
    cursor: url(../img/ic_mouse_rotation_90.9aa5fe4b.svg) 9 11, pointer
}

.editor-image-transform.octant7 .editor-image-transform__rotator b {
    cursor: url(../img/ic_mouse_rotation_45.f97ae09c.svg) 11 11, pointer
}

.editor-image-transform__bg, .editor-image-transform__scale {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%
}

.editor-image-transform__scale {
    pointer-events: none
}

.editor-image-transform__scale-inner {
    position: absolute;
    top: 50%;
    right: -5px;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    background: #2254f4;
    border: 1px solid #fff;
    border-radius: 50%;
    pointer-events: all;
    cursor: ew-resize
}

.editor-image-transform__scale-inner .text-tip {
    top: 50%;
    left: 25px;
    margin-top: -14px
}

.editor-image-transform__scale-inner:hover .text-tip--hover {
    display: block
}

.editor-image-transform__bg {
    background: rgba(0, 0, 0, .25);
    border: 1px solid #fff;
    border-radius: 50%;
    transition: background .1s
}

.editor-image-transform__bg.is-limit {
    border-color: #e54937
}

.editor-image-transform__bg:hover {
    background: rgba(0, 0, 0, .6)
}

.editor-image-transform__bg:hover .editor-image-transform__drag {
    opacity: 1
}

.editor-image-transform__bg:hover ~ .editor-image-transform__circle {
    opacity: 0
}

.editor-image-transform__drag {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABZElEQVRoQ+3a0Q7CIAwF0PXL1S/HsAzDWIFCb2Us+OKDc7tnQKmLtE3+osnzb6YA59zb3yAi2t8tXmaAI/zrCP2xQpgAkvDhxpsg4IBMeDMEFFAJb4KAAYTh4QgIoDE8FKEGdIaHIdSAXG13zrn4MyIyuZbJSX3wBRBu22sE1hoQTpXcYaIp5EtlazOmXcTSa1YBoc63lkEAwJfhagNYBMSb1CCAnzlFRBaQ7rADAUUEC+Dag8GALOICyPU2NwCwiBNA2ZgpC6L466c18QNMEv7SxT4HcHSQ/vFHeJIgHtM/H8hPoRBi6kVcQtygCrEb2jM3Mm4kBo5AXyuRIgYBdM1cjJi2ne4tkdp2Wnrd6u8B6YnS4xZAeOfWCKynEsKponoqUbqGsg2v1vmaD7IGOhHq8B4HAXS04pDwUEADAhYeDhAgoOFNAAUEPLwZgEGYhDcFRIg5/2pQq9+oz2FlFBWo9TxfiYgsQDLM6WoAAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 24px 24px;
    opacity: 0;
    transition: .1s
}

.editor-image-transform__circle {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    pointer-events: none;
    transition: .1s;
    -webkit-transform: translate(-50%, -50%) scale(.5);
    transform: translate(-50%, -50%) scale(.5)
}

.editor-image-transform__rotator {
    position: absolute;
    bottom: 50%;
    left: 50%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 1px;
    height: 90px;
    pointer-events: none;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}

.editor-image-transform__rotator:before {
    display: block;
    -webkit-flex: 1;
    flex: 1;
    background: #fff;
    box-shadow: 0 0 3px 0 rgba(86, 90, 98, .58);
    content: ""
}

.editor-image-transform__rotator:after {
    display: block;
    height: 19px;
    content: ""
}

.editor-image-transform__rotator b {
    position: relative;
    position: absolute;
    top: -6px;
    left: -6px;
    display: block;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 1px solid #e8eaec;
    border-radius: 50%;
    pointer-events: all
}

.editor-image-transform__rotator b .text-tip {
    top: -44px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.editor-image-transform.is-drag .editor-image-transform__bg, .editor-image-transform.is-drag .editor-image-transform__circle, .editor-image-transform.is-drag .editor-image-transform__item {
    display: none
}

.editor-image-transform.is-crop, .editor-image-transform.is-rotator {
    background: none;
    border: 0
}

.editor-image-transform.is-crop .editor-image-transform__bg, .editor-image-transform.is-crop .editor-image-transform__item, .editor-image-transform.is-rotator .editor-image-transform__bg, .editor-image-transform.is-rotator .editor-image-transform__item {
    display: none
}

.editor-image-transform.is-crop .editor-image-transform__circle, .editor-image-transform.is-rotator .editor-image-transform__circle {
    display: block
}

.editor-image-transform.is-crop .editor-image-transform__rotator, .editor-image-transform.is-rotator .editor-image-transform__rotator {
    bottom: 50%;
    display: -webkit-flex;
    display: flex;
    box-shadow: 0 0 3px 0 rgba(86, 90, 98, .58)
}

.editor-image-transform.is-crop .editor-image-transform__rotator:before, .editor-image-transform.is-rotator .editor-image-transform__rotator:before {
    box-shadow: none
}

.editor-image-transform.is-crop .editor-image-transform__rotator:after, .editor-image-transform.is-rotator .editor-image-transform__rotator:after {
    display: block;
    height: 36px;
    background: #fff;
    content: ""
}

.editor-image-transform.is-rotator .text-tip {
    display: block
}

.editor-image-transform.is-scale .editor-image-transform__bg {
    background: none
}

.editor-image-transform.is-scale .editor-image-transform__item {
    display: none
}

.editor-image-transform.is-scale .editor-image-transform__circle {
    opacity: 1 !important
}

.editor-image-transform.is-scale .editor-image-transform__scale, .editor-image-transform.is-scale .editor-image-transform__scale .text-tip {
    display: block
}

.editor-image-transform.is-animation {
    display: none
}

.editor-image-transform.is-small {
    width: 28px;
    height: 28px
}

.editor-image-transform.is-small .editor-image-transform__drag {
    background-size: 20px 20px
}

.editor-image-transform.is-small .editor-image-transform__rotator:after {
    height: 14px
}

.editor-croper-grid {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid #fff
}

.editor-croper-grid i {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    border: 0 solid hsla(0, 0%, 100%, .7)
}

.editor-croper-grid.active i {
    display: block
}

.editor-croper-grid i[class^=editor-croper-grid-x] {
    width: 0;
    height: 100%;
    border-left-width: 1px
}

.editor-croper-grid i[class^=editor-croper-grid-y] {
    width: 100%;
    height: 0;
    border-top-width: 1px
}

.editor-croper-grid .editor-croper-grid-x1 {
    left: 33.3332%
}

.editor-croper-grid .editor-croper-grid-x2 {
    left: 66.6664%
}

.editor-croper-grid .editor-croper-grid-y1 {
    top: 33.332%
}

.editor-croper-grid .editor-croper-grid-y2 {
    top: 66.664%
}

.editor-image-croper {
    position: absolute;
    z-index: 2
}

.editor-image-croper:after, .editor-image-croper:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 1px solid #fff;
    cursor: move;
    content: ""
}

.editor-image-croper:after {
    border: 1px dashed #666
}

.editor-image-croper .editor-image-croper-mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: .5
}

.editor-image-croper .editor-image-croper-inner {
    position: absolute;
    z-index: 2;
    overflow: hidden;
    background-repeat: no-repeat
}

.editor-image-croper .editor-image-croper-inner img {
    display: block
}

.editor-text-editor {
    position: relative;
    z-index: 0;
    width: 100%;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

.editor-text-editor.editor-element {
    position: relative
}

.editor-text-editor:before {
    z-index: -1
}

.editor-text-editor.editor-element-editing {
    z-index: 6;
    overflow: visible;
    visibility: visible
}

.editor-text-editor.editor-element-editing:before {
    border-color: #666
}

.editor-text-editor .element-inner {
    display: block;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

.editor-text-editor .element-inner .element-main {
    z-index: 2;
    cursor: auto;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text
}

.editor-mask-editor {
    position: absolute;
    z-index: 1
}

.editor-mask-editor-main:after, .editor-mask-editor-main:before, .editor-mask-editor .editor-mask-editor-canvas, .editor-mask-editor .editor-mask-editor-main {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%
}

.editor-mask-editor-main:after, .editor-mask-editor-main:before {
    box-sizing: border-box;
    border: 1px solid #fff;
    pointer-events: none;
    cursor: move;
    content: ""
}

.editor-mask-editor-main:after {
    border: 1px dashed #666
}

.editor-mask-editor-main canvas, .editor-mask-editor-main img, .editor-mask-editor-main video {
    display: block;
    width: 100%;
    height: 100%;
    opacity: .3
}

.editor-mask-editor-grid {
    position: absolute;
    z-index: 2;
    margin: -1px 0 0 -1px;
    border: 1px solid transparent;
    pointer-events: none
}

.editor-contextmenu {
    --red: #f54531;
    --black: #000;
    --black-9: #33383e;
    --black-8: #636c78;
    --black-7: #7f8792;
    --black-6: #9da3ac;
    --black-5: #b4b8bf;
    --black-4: #d9dcdf;
    --black-3: #e8eaec;
    --black-2: #f1f2f4;
    --black-1: #f6f7f9;
    --text-title: var(--black);
    --text-emphasis: var(--black);
    --text-default: var(--black-9);
    --text-secondary: var(--black-8);
    --text-tertiary: var(--black-6);
    --text-placeholder: var(--black-5);
    --stroke: var(--black-3);
    --text-dis: #bec3c9;
    --border: 1px solid var(--stroke);
    --panel-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.08);
    --danger: var(--red);
    --bg-reg: #f0f3f4;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    width: 164px;
    padding: 8px 0;
    font-family: Alibaba Sans, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-size: 14px;
    color: var(--text-default);
    background-color: #fff;
    border: 1px solid var(--stroke);
    border-radius: 4px;
    outline: 0;
    box-shadow: var(--panel-shadow);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.editor-contextmenu--submenu {
    position: absolute;
    top: auto;
    bottom: -8px;
    left: 100%
}

.editor-contextmenu-layer-list li {
    height: auto !important;
    padding: 0 !important
}

.editor-contextmenu-no-sub-space .editor-contextmenu--submenu {
    right: 100%;
    left: auto
}

.editor-contextmenu__item:not([aria-expanded=true]) .editor-contextmenu--submenu {
    display: none
}

.editor-contextmenu__delimiter {
    height: 1px;
    margin: 3px 0;
    background-color: var(--stroke)
}

.editor-contextmenu__item {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    height: 36px;
    padding: 0 15px
}

.editor-contextmenu__item[aria-haspopup]:after {
    border-color: transparent transparent transparent var(--text-secondary);
    border-style: solid;
    border-width: 4px 0 4px 6px;
    content: ""
}

.editor-contextmenu__item--danger {
    color: var(--danger)
}

.editor-contextmenu__item[aria-disabled] {
    color: var(--text-dis);
    pointer-events: none
}

.editor-contextmenu__item:focus-within {
    background-color: var(--bg-reg);
    outline: 0
}

.editor-contextmenu__item span {
    cursor: default
}

.editor-contextmenu__item-shortcut {
    font-size: 12px;
    color: var(--text-dis)
}

.editor-contextmenu--editor {
    width: 196px;
    padding: 8px 0 !important
}

.editor-contextmenu--editor .editor-contextmenu--submenu {
    width: 176px;
    padding: 8px 0 !important
}

.editor-contextmenu--editor .editor-contextmenu__item {
    padding: 0 16px
}

.editor-contextmenu__item--thumbnail {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    height: 56px
}

.editor-contextmenu__item--thumbnail .layer-thumbnail {
    -webkit-flex: none;
    flex: none;
    width: 40px;
    height: 40px;
    margin-right: 8px;
    overflow: hidden;
    border: 1px solid var(--stroke);
    border-radius: 4px
}

.editor-contextmenu__item--thumbnail .layer-thumbnail > span {
    display: block;
    width: 100% !important;
    height: 100% !important;
    background-repeat: no-repeat;
    background-position: 50% !important;
    background-size: contain !important
}

.editor-contextmenu__item--thumbnail .thumbnail-svg {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center
}

.editor-contextmenu__item--thumbnail .thumbnail-svg > svg {
    width: 90%
}

.editor-contextmenu__item--thumbnail .thumbnail-group, .editor-contextmenu__item--thumbnail .thumbnail-text {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-family: -webkit-pictograph, serif;
    font-size: 26px
}

.editor-contextmenu__item--thumbnail .layer-info {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.editor-layer-list {
    max-height: 265px;
    overflow: auto;
    list-style: none
}

.editor-layer-list li {
    height: 53px;
    padding: 4px 0 4px 20px;
    cursor: pointer
}

.editor-layer-list li:hover {
    background-color: #f0f0f0
}

.editor-layer-list li:active {
    background-color: #e6e6e6
}

.editor-layer-list li .layer-thumbnail {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 45px;
    overflow: hidden;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #ddd
}

.editor-layer-list li .layer-thumbnail .thumbnail-image {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    width: 100%;
    height: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.editor-layer-list li .layer-thumbnail .thumbnail-group, .editor-layer-list li .layer-thumbnail .thumbnail-text {
    display: inline-block;
    width: 100%;
    height: 100%;
    font-family: -webkit-pictograph, serif;
    font-size: 26px;
    line-height: 43px;
    text-align: center
}

.editor-layer-list li .layer-thumbnail .thumbnail-svg svg {
    width: 100%;
    height: 100%
}

.editor-layer-list li .layer-thumbnail .thumbnail-arrow {
    position: absolute;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

.editor-layer-list li .layer-thumbnail .thumbnail-arrow svg {
    position: absolute
}

.editor-layer-list li .layer-info {
    display: inline-block;
    width: 160px;
    padding-left: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle
}

.editor-highlight-element {
    position: absolute;
    z-index: 5;
    background-color: rgba(0, 255, 255, .1);
    border: 1px solid #0ff;
    pointer-events: none
}

.editor-collage-editor {
    position: absolute;
    z-index: 6;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.editor-collage-editor.line-dragging {
    cursor: ns-resize
}

.editor-collage-editor.line-dragging .editor-element-cell-ghost:hover {
    border-color: transparent
}

.editor-collage-editor.line-dragging .editor-element-cell-ghost:hover svg {
    display: none
}

.editor-collage-editor.line-dragging .editor-collage-h:hover, .editor-collage-editor.line-dragging .editor-collage-v:hover {
    opacity: 0
}

.editor-collage-editor.line-dragging .editor-collage-h.line-dragging, .editor-collage-editor.line-dragging .editor-collage-v.line-dragging {
    opacity: 1
}

.editor-collage-editor.line-dragging-v {
    cursor: ew-resize
}

.editor-collage-editor.line-dragging-v .editor-element-cell-ghost:hover {
    border-color: transparent
}

.editor-collage-editor.line-dragging-v .editor-element-cell-ghost:hover svg {
    display: none
}

.editor-collage-editor.line-dragging-v .editor-collage-h:hover, .editor-collage-editor.line-dragging-v .editor-collage-v:hover {
    opacity: 0
}

.editor-collage-editor.line-dragging-v .editor-collage-h.line-dragging, .editor-collage-editor.line-dragging-v .editor-collage-v.line-dragging {
    opacity: 1
}

.editor-collage-editor.img-dragging {
    cursor: move
}

.editor-collage-editor.collage-dragging .editor-collage-h, .editor-collage-editor.collage-dragging .editor-collage-v {
    display: none
}

.editor-collage-editor .editor-drag-gap-placeholder {
    position: absolute;
    background: rgba(0, 92, 249, .6)
}

.editor-collage-editor .editor-collage-h, .editor-collage-editor .editor-collage-v {
    position: absolute;
    z-index: 5;
    min-width: 10px;
    min-height: 10px;
    overflow: hidden;
    opacity: 0
}

.editor-collage-editor .editor-collage-h:after, .editor-collage-editor .editor-collage-v:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 92, 249, .6);
    content: ""
}

.editor-collage-editor .editor-collage-h.line-dragging, .editor-collage-editor .editor-collage-h:hover, .editor-collage-editor .editor-collage-v.line-dragging, .editor-collage-editor .editor-collage-v:hover {
    opacity: 1
}

.editor-collage-editor .editor-collage-h {
    cursor: ns-resize
}

.editor-collage-editor .editor-collage-h:after {
    top: 3px;
    max-height: 4px
}

.editor-collage-editor .editor-collage-v {
    cursor: ew-resize
}

.editor-collage-editor .editor-collage-v:after {
    left: 3px;
    max-width: 4px
}

.editor-collage-editor .editor-element-cell-ghosts {
    position: relative
}

.editor-collage-editor .editor-element-cell-ghost {
    position: absolute;
    border: 2px solid transparent
}

.editor-collage-editor .editor-element-cell-ghost:hover {
    border-color: #005cf9
}

.editor-collage-editor .editor-element-cell-ghost:hover svg {
    display: block
}

.editor-collage-editor .editor-element-cell-ghost.selected {
    border-color: #005cf9
}

.editor-collage-editor.transform-resizing .editor-element-cell-ghost:hover {
    border-color: transparent
}

.editor-collage-editor .editor-element-cell--remover {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 16px;
    height: 16px;
    cursor: pointer
}

.editor-collage-editor .editor-element-cell--remover svg {
    display: none;
    pointer-events: none
}

.editor-collage-editor .editor-img-ghost {
    position: absolute;
    z-index: 1;
    font-size: 0;
    line-height: 1;
    opacity: .6
}

.editor-collage-editor .editor-img-ghost img {
    max-width: 100%
}

.editor-collage-editor .editor-collage-dragger {
    position: absolute;
    top: calc(50% - 14px);
    right: -40px;
    width: 28px;
    height: 28px;
    font-size: 0;
    line-height: 28px;
    text-align: center;
    background: #000;
    border-radius: 50%;
    cursor: move
}

.editor-collage-editor .editor-collage-dragger:before {
    position: absolute;
    top: 13px;
    left: -9px;
    z-index: -1;
    width: 12px;
    border-top: 1px dashed #666;
    content: ""
}

.editor-collage-editor .editor-collage-dragger svg {
    width: 16px;
    vertical-align: middle;
    pointer-events: none;
    fill: #fff
}

.editor-text-editor.editor-element-styledText .element-main, .editor-text-editor.editor-element-styledText:focus {
    outline: none
}

.editor-background, .editor-background__main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.editor-background.is-element, .editor-background__main.is-element {
    z-index: -2;
    overflow: hidden;
    pointer-events: none
}

.editor-background canvas, .editor-background img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.editor-background__image-wrap {
    position: relative
}

.editor-background-editor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3
}

.editor-background-editor:after, .editor-background-editor:before {
    cursor: move
}

.editor-background-editor__image, .editor-background-editor__light, .editor-background-editor__main, .editor-background-editor__main-inner {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    cursor: move
}

.editor-background-editor__image {
    opacity: .3 !important
}

.editor-background-editor__light {
    overflow: hidden
}

.editor-background--selected .editor-background__border {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 2px solid #6ccfff;
    pointer-events: none;
    content: ""
}

.editor-background-mask {
    position: absolute;
    pointer-events: none
}

.editor-background-mask canvas {
    width: 100%;
    height: 100%
}

.editor-background-mosaic {
    position: absolute
}

.editor-background-mosaic canvas, .editor-background-mosaic img {
    width: 100%;
    height: 100%
}

.editor-global-layout .editor-shell-scale {
    background-color: #fff
}

.editor-global-layout .editor-canvas {
    background-color: transparent !important;
    background-image: none !important
}

.editor-global-background, .editor-global-background__main {
    position: absolute;
    width: 100%;
    height: 100%
}

.editor-global-background {
    top: 0;
    left: 0;
    overflow: hidden
}

.editor-global-background img {
    position: absolute;
    top: 0;
    left: 0
}

.editor-global-background--selected .editor-global-background__border {
    pointer-events: none
}

.editor-global-background--selected .editor-global-background__border, .editor-global-background-editor:after, .editor-global-background-editor:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-width: 1px;
    content: ""
}

.editor-global-background--selected .editor-global-background__border--before, .editor-global-background-editor:before {
    display: block;
    border-color: #666;
    border-style: solid
}

.editor-global-background--selected .editor-global-background__border--after, .editor-global-background-editor:after {
    display: block;
    border-color: #fff;
    border-style: dashed
}

.editor-hover {
    position: absolute;
    z-index: 2;
    border: 1px solid #6ccfff;
    pointer-events: none
}

.editor-mouse-tips {
    position: absolute;
    z-index: 5;
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 28px;
    color: #fff;
    white-space: nowrap;
    background: #0e1217;
    border-radius: 4px
}

.editor-bleeding-line {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    box-sizing: content-box;
    background: none;
    border-color: hsla(0, 0%, 100%, .5);
    border-style: solid;
    pointer-events: none
}

.editor-bleeding-line:before {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 1px dashed #e0e5ea;
    content: ""
}

.editor-bleeding-line__guider {
    position: absolute
}

.editor-bleeding-line__guider--horizontal {
    width: 15px;
    height: 0;
    border-top: 1px solid #444950
}

.editor-bleeding-line__guider--vertical {
    width: 0;
    height: 15px;
    border-left: 1px solid #444950
}

.editor-watermark {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-repeat: repeat;
    pointer-events: none
}

.editor-watermark__main {
    width: 60%;
    height: 60%
}

.editor-transform .editor-rotator.editor-watermark-rotator {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.editor-element .editor-element-common__load--error {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 14px;
    color: #939ba6;
    text-align: center;
    background-color: #f8fafc
}

.editor-element .editor-element-common__load--error .editor-element-common__load--icon {
    display: block;
    width: 44px;
    height: 32px;
    margin-bottom: 12px;
    background-image: url(../img/load-error.2d614744.svg);
    background-repeat: no-repeat
}

.editor-border {
    display: none;
    pointer-events: none
}

.editor-border--loaded {
    display: block
}

.editor-border, .editor-border__main {
    position: absolute;
    width: 100%;
    height: 100%
}

.editor-border.is-element, .editor-border__main.is-element {
    z-index: -1
}

.editor-temp-group {
    position: absolute;
    z-index: 1;
    pointer-events: none
}

.editor-temp-group .editor-transition {
    transition: .2s
}

.editor-temp-group .editor-fadeout {
    opacity: 0
}

.editor-temp-group__bd {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: all;
    cursor: move
}

.editor-temp-group__bd.disabled {
    pointer-events: none
}

.editor-temp-group__bd:before {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(108, 207, 255, .45);
    border-radius: 2px;
    content: ""
}

.editor-temp-group__bd--bottom, .editor-temp-group__bd--top {
    top: -20px;
    width: 100%;
    height: 20px;
    padding: 0 1px
}

.editor-temp-group__bd--bottom {
    top: auto;
    bottom: -20px
}

.editor-temp-group__bd--left, .editor-temp-group__bd--right {
    left: -20px;
    width: 20px;
    height: 100%;
    padding: 1px 0
}

.editor-temp-group__bd--right {
    right: -20px;
    left: auto
}

.editor-watermark-editor {
    position: absolute;
    z-index: 1
}

.editor-watermark-editor-outer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    image-rendering: -webkit-optimize-contrast
}

.editor-watermark-editor-inner {
    position: absolute;
    z-index: 2;
    image-rendering: -webkit-optimize-contrast
}

.editor-watermark-editor-rotator {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    margin: 14px 0 0 -11px;
    cursor: pointer;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.editor-watermark-editor-rotator b {
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='%23757575'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23CCD1DA' fill='%23FFF' cx='12' cy='12' r='11.5'/%3E%3Cpath d='M16.242 12.012a4.25 4.25 0 00-5.944-4.158L9.696 6.48a5.75 5.75 0 018.048 5.532h1.263l-2.01 3.002-2.008-3.002h1.253zm-8.484-.004a4.25 4.25 0 005.943 3.638l.6 1.375a5.75 5.75 0 01-8.046-5.013H5.023L7.02 9.004l1.997 3.004h-1.26z' fill='%23000' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");
    position: relative;
    z-index: 2;
    display: block;
    width: 22px;
    height: 22px;
    background-size: 100% 100%
}

.editor-watermark-editor-rotator b span {
    position: absolute;
    top: 40px;
    left: 50%;
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    color: #fff;
    background: #0e1217;
    border-radius: 4px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.editor-watermark-transform {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 54px;
    height: 54px
}

.editor-watermark-transform .editor-watermark-transform__scale-inner:before, .editor-watermark-transform .text-tip {
    position: absolute;
    display: none;
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    color: #fff;
    white-space: nowrap;
    background: #0e1217;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.editor-watermark-transform.octant0 .editor-watermark-transform__rotator b, .editor-watermark-transform.octant8 .editor-watermark-transform__rotator b {
    cursor: url(../img/ic_mouse_rotation_0.1c6c9df0.svg) 11 9, pointer
}

.editor-watermark-transform.octant1 .editor-watermark-transform__rotator b {
    cursor: url(../img/ic_mouse_rotation_-45.640f648c.svg) 11 11, pointer
}

.editor-watermark-transform.octant2 .editor-watermark-transform__rotator b {
    cursor: url(../img/ic_mouse_rotation_-90.22b2eeaa.svg) 13 11, pointer
}

.editor-watermark-transform.octant3 .editor-watermark-transform__rotator b {
    cursor: url(../img/ic_mouse_rotation_-135.0ed8a36c.svg) 11 11, pointer
}

.editor-watermark-transform.octant4 .editor-watermark-transform__rotator b {
    cursor: url(../img/ic_mouse_rotation_180.315aa19b.svg) 11 13, pointer
}

.editor-watermark-transform.octant5 .editor-watermark-transform__rotator b {
    cursor: url(../img/ic_mouse_rotation_135.16a9303f.svg) 11 11, pointer
}

.editor-watermark-transform.octant6 .editor-watermark-transform__rotator b {
    cursor: url(../img/ic_mouse_rotation_90.9aa5fe4b.svg) 9 11, pointer
}

.editor-watermark-transform.octant7 .editor-watermark-transform__rotator b {
    cursor: url(../img/ic_mouse_rotation_45.f97ae09c.svg) 11 11, pointer
}

.editor-watermark-transform.is-rotator .text-tip {
    display: block
}

.editor-watermark-transform__rotator {
    position: absolute;
    bottom: 50%;
    left: 50%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 1px;
    height: 90px;
    pointer-events: none;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}

.editor-watermark-transform__rotator:before {
    display: block;
    -webkit-flex: 1;
    flex: 1;
    background: #fff;
    box-shadow: 0 0 3px 0 rgba(86, 90, 98, .58);
    content: ""
}

.editor-watermark-transform__rotator:after {
    display: block;
    height: 27px;
    content: ""
}

.editor-watermark-transform__rotator b {
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='%23757575'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23CCD1DA' fill='%23FFF' cx='12' cy='12' r='11.5'/%3E%3Cpath d='M16.242 12.012a4.25 4.25 0 00-5.944-4.158L9.696 6.48a5.75 5.75 0 018.048 5.532h1.263l-2.01 3.002-2.008-3.002h1.253zm-8.484-.004a4.25 4.25 0 005.943 3.638l.6 1.375a5.75 5.75 0 01-8.046-5.013H5.023L7.02 9.004l1.997 3.004h-1.26z' fill='%23000' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");
    position: relative;
    position: absolute;
    top: -11px;
    left: -11px;
    display: block;
    width: 22px;
    height: 22px;
    background-size: 100% 100%;
    pointer-events: all
}

.editor-watermark-transform__rotator b .text-tip {
    top: -44px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.editor-video-controller {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%
}

.editor-video-controls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.editor-video-controls__inner {
    position: relative;
    width: 100%;
    height: 100%
}

.editor-video-controls--hover .editor-video-controls__play-btn, .editor-video-controls__inner--active .editor-video-controls__bottom, .editor-video-controls__inner:hover .editor-video-controls__bottom {
    display: -webkit-flex;
    display: flex
}

.editor-video-controls__play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 24px;
    color: #fff;
    background-color: rgba(0, 0, 0, .3);
    border: 1px solid #f6f7f9;
    border-radius: 50%;
    cursor: pointer;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.editor-video-controls__play-btn:hover {
    background-color: rgba(0, 0, 0, .6)
}

.editor-video-controls__play-btn > span {
    width: 24px;
    height: 24px;
    background-position: 50%
}

.editor-video-controls__play-btn--media-play {
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='28' height='28' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.48 13.132a1 1 0 010 1.736L8.747 22.145a1 1 0 01-1.496-.868V6.723a1 1 0 011.496-.868l12.735 7.277z'/%3E%3C/svg%3E")
}

.editor-video-controls__play-btn--media-pause {
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='28' height='28' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M8 6h4v16H8zM16 6h4v16h-4z'/%3E%3C/svg%3E")
}

.editor-video-controls--small .editor-video-controls__play-btn, .editor-video-controls--smaller .editor-video-controls__play-btn {
    top: -4px;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%)
}

.editor-video-controls--small .editor-video-controls__play-btn:after, .editor-video-controls--smaller .editor-video-controls__play-btn:after {
    position: absolute;
    bottom: -5px;
    left: -10%;
    width: 120%;
    height: 10px;
    content: ""
}

.editor-video-controls__bottom {
    position: absolute;
    bottom: 0;
    display: none;
    box-sizing: border-box;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    padding: 0 20px;
    color: #fff;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .4));
    mix-blend-mode: normal
}

.editor-video-controls--simple .editor-video-controls__bottom {
    height: 40px;
    padding: 12px 3% 0;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .3))
}

.editor-video-controls--smaller .editor-video-controls__bottom {
    display: none
}

.editor-video-controls__status-btn {
    width: 24px;
    height: 24px;
    margin-right: 14px;
    background-position: 50%;
    cursor: pointer
}

.editor-video-controls__status-btn--media-play {
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='28' height='28' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.48 13.132a1 1 0 010 1.736L8.747 22.145a1 1 0 01-1.496-.868V6.723a1 1 0 011.496-.868l12.735 7.277z'/%3E%3C/svg%3E")
}

.editor-video-controls__status-btn--media-pause {
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='28' height='28' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M8 6h4v16H8zM16 6h4v16h-4z'/%3E%3C/svg%3E")
}

.editor-video-controls__progress {
    -webkit-flex: 1;
    flex: 1;
    height: auto !important;
    margin: 0 16px;
    cursor: pointer
}

.editor-video-controls--simple .editor-video-controls__progress {
    margin: 0 8px
}

.editor-video-controls__time {
    min-width: 38px;
    font-size: 14px;
    color: #fff
}

.editor-video-controls--simple .editor-video-controls__time {
    min-width: auto;
    font-size: 10px
}

.editor-video-controls--small .editor-video-controls__duration, .editor-video-controls--smaller .editor-video-controls__duration {
    display: none
}

.editor-video-controls__volume {
    position: relative;
    width: 24px;
    height: 24px;
    margin-left: 20px;
    cursor: pointer
}

.editor-video-controls__volume__inner {
    position: absolute;
    bottom: 0;
    left: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    transition: all .3s
}

.editor-video-controls__volume-value {
    -webkit-flex: 1;
    flex: 1;
    width: 46px;
    margin-bottom: 3px;
    opacity: 0
}

.editor-video-controls__volume-btn {
    width: 20px;
    height: 20px;
    cursor: pointer
}

.editor-video-controls__volume-btn--media-volume {
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.435 14.896L5.85 12.05H3.333V7.876H5.85L9.435 5.03v9.866zM3.25 7.793v4.34h2.57L9.52 15.07 5.82 12.133H3.25v-4.34zm6.582-5.205L5.268 6.209H2.45a.783.783 0 00-.784.784v5.94c0 .433.351.784.784.784h2.818l4.564 3.621a.783.783 0 001.27-.613V3.201a.783.783 0 00-1.27-.613zM5.297 6.293H2.45h2.847zm4.586-3.64a.7.7 0 011.136.548v13.524V3.201a.7.7 0 00-1.136-.548z'/%3E%3Cpath d='M18.375 10a6.698 6.698 0 00-2.803-5.434.626.626 0 00-.727 1.017A5.445 5.445 0 0117.125 10a5.445 5.445 0 01-2.28 4.417.625.625 0 00.727 1.017A6.698 6.698 0 0018.375 10z'/%3E%3Cpath d='M13.944 6.956a.625.625 0 00-.804.957c.627.528.987 1.288.987 2.087 0 .798-.36 1.559-.988 2.087a.625.625 0 00.805.957A3.975 3.975 0 0015.377 10a3.978 3.978 0 00-1.433-3.044z'/%3E%3C/svg%3E")
}

.editor-video-controls__volume-btn--media-mute {
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M2.474 3.64L3.652 2.46 17.5 16.308l-1.18 1.18z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.4 6.21H5.783A.783.783 0 005 6.992v5.94c0 .433.35.784.783.784h2.819l4.563 3.621a.783.783 0 001.27-.613v-3.48l-.083-.083v3.563-3.563l-1.583-1.584v3.318L9.183 12.05H6.667V7.876h2.4L7.482 6.293h-1.7 1.7L7.4 6.209zm5.369 3.012V5.03l-2.337 1.855-1.186-1.187 3.92-3.11a.783.783 0 011.27.613v7.687l-.084-.083V3.2a.7.7 0 110 0v7.604L12.77 9.222zm-6.186 2.912V7.792v4.34h2.57l3.7 2.936-3.7-2.936h-2.57z'/%3E%3C/svg%3E")
}

.editor-video-controls__volume--active .editor-video-controls__volume__inner, .editor-video-controls__volume:hover .editor-video-controls__volume__inner {
    height: 80px;
    padding-top: 11px;
    background-color: rgba(0, 0, 0, .3)
}

.editor-video-controls__volume--active .editor-video-controls__volume-value, .editor-video-controls__volume:hover .editor-video-controls__volume-value {
    display: block;
    opacity: 1
}

.vue-slider-disabled {
    opacity: .5;
    cursor: not-allowed
}

.vue-slider-rail {
    background-color: hsla(0, 0%, 100%, .25);
    border-radius: 3.5px
}

.vue-slider-process {
    background-color: #fff;
    border-radius: 15px
}

.vue-slider-mark {
    z-index: 4
}

.vue-slider-mark:first-child .vue-slider-mark-step, .vue-slider-mark:last-child .vue-slider-mark-step {
    display: none
}

.vue-slider-mark-step {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .16);
    border-radius: 50%
}

.vue-slider-mark-label {
    font-size: 14px;
    white-space: nowrap
}

.vue-slider-dot-handle {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: .5px .5px 2px 1px rgba(0, 0, 0, .32);
    cursor: pointer
}

.vue-slider-dot-handle-focus {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5)
}

.vue-slider-dot-handle-disabled {
    background-color: #ccc;
    cursor: not-allowed
}

.vue-slider-dot-tooltip-inner {
    box-sizing: content-box;
    min-width: 20px;
    padding: 2px 5px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #33383e;
    border-color: #33383e;
    border-radius: 4px
}

.vue-slider-dot-tooltip-inner:after {
    position: absolute;
    content: ""
}

.vue-slider-dot-tooltip-inner-top:after {
    top: 100%;
    border-color: transparent;
    border-style: solid;
    border-width: 5px;
    border-top-color: inherit
}

.vue-slider-dot-tooltip-inner-bottom:after, .vue-slider-dot-tooltip-inner-top:after {
    left: 50%;
    width: 0;
    height: 0;
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

.vue-slider-dot-tooltip-inner-bottom:after {
    bottom: 100%;
    border-color: transparent;
    border-style: solid;
    border-width: 5px;
    border-bottom-color: inherit
}

.vue-slider-dot-tooltip-inner-left:after {
    left: 100%;
    border-color: transparent;
    border-style: solid;
    border-width: 5px;
    border-left-color: inherit
}

.vue-slider-dot-tooltip-inner-left:after, .vue-slider-dot-tooltip-inner-right:after {
    top: 50%;
    width: 0;
    height: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.vue-slider-dot-tooltip-inner-right:after {
    right: 100%;
    border-color: transparent;
    border-style: solid;
    border-width: 5px;
    border-right-color: inherit
}

.vue-slider-dot-tooltip-wrapper {
    opacity: 0;
    transition: all .3s
}

.vue-slider-dot-tooltip-wrapper-show {
    opacity: 1
}

.editor-mask-wrap {
    position: absolute;
    z-index: 1;
    width: 0;
    height: 0
}

.editor-mask-wrap .editor-mask {
    position: absolute;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%
}

.editor-mask-wrap .editor-mask .editor-mask-info-element-move {
    pointer-events: auto
}

.editor-container-webpage {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%
}

.editor-container-webpage .editor-webpage-background {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fff
}

.editor-container-webpage .editor-webpage-background__inner, .editor-container-webpage .editor-webpage-flow, .editor-container-webpage .editor-webpage-layout, .editor-container-webpage .editor-webpage-single {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.editor-container-webpage .editor-webpage-flow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.editor-container-webpage .editor-webpage-single {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.editor-container-webpage .editor-webpage-layout {
    position: absolute;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.editor-container-webpage .editor-webpage-content {
    position: relative
}

.editor-container-webpage .editor-layout {
    position: relative;
    overflow: hidden
}

.editor-container-webpage .editor-element:hover > .border-after, .editor-container-webpage .editor-element:hover > .border-before {
    display: none
}

.editor-container-webpage .editor-element {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.editor-container-webpage .editor-element.editor-element-mask img.element-mocker {
    pointer-events: auto !important
}

.editor-container-webpage .editor-background .editor-background__border {
    display: none
}

.editor-container-webpage .editor-event-mark {
    cursor: pointer;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none
}

@-webkit-keyframes slide-next-page {
    0% {
        -webkit-transform: translateY(-.26rem);
        transform: translateY(-.26rem);
        opacity: 1
    }
    to {
        -webkit-transform: translateY(-.56rem);
        transform: translateY(-.56rem);
        opacity: 0
    }
}

@keyframes slide-next-page {
    0% {
        -webkit-transform: translateY(-.26rem);
        transform: translateY(-.26rem);
        opacity: 1
    }
    to {
        -webkit-transform: translateY(-.56rem);
        transform: translateY(-.56rem);
        opacity: 0
    }
}

@-webkit-keyframes slide-next-page-h {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
    to {
        -webkit-transform: translateX(.3rem);
        transform: translateX(.3rem);
        opacity: 0
    }
}

@keyframes slide-next-page-h {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
    to {
        -webkit-transform: translateX(.3rem);
        transform: translateX(.3rem);
        opacity: 0
    }
}

.paging-icon {
    position: fixed;
    left: 50%;
    bottom: 32px;
    margin-left: -25px;
    z-index: 4;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 50px;
    height: 50px;
    -webkit-animation: slide-next-page 1.5s linear infinite;
    animation: slide-next-page 1.5s linear infinite;
    cursor: pointer
}

.paging-icon:after, .paging-icon:before {
    content: "";
    width: 14px;
    height: 14px;
    -webkit-box-shadow: 2px -2px 1px 2px rgba(0, 0, 0, .08);
    box-shadow: 2px -2px 1px 2px rgba(0, 0, 0, .08);
    border-color: #fff;
    border-style: solid;
    border-width: 4px 4px 0 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.paging-icon:before {
    margin-top: -3px;
    border-color: hsla(0, 0%, 100%, .3)
}

.paging-icon--h {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-animation-name: slide-next-page-h;
    animation-name: slide-next-page-h
}

.paging-icon--h:after, .paging-icon--h:before {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg)
}

.paging-icon--h:before {
    margin-top: 0;
    margin-right: -2px
}

.paging-icon--absolute {
    position: absolute
}

.music-icon {
    position: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    top: 40px;
    right: 40px;
    border: 1px solid #fff;
    border-radius: 50%;
    background: rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);
    -webkit-transform-origin: top right;
    transform-origin: top right;
    cursor: pointer;
    z-index: 1
}

.music-icon .icon-font {
    width: 20px;
    height: 20px;
    color: #fff;
    -webkit-animation: rotate-music 3s linear infinite;
    animation: rotate-music 3s linear infinite;
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}

@-webkit-keyframes rotate-music {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes rotate-music {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.interactivity-guide[data-v-a74bdd06] {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(2);
    transform: translate(-50%, -50%) scale(2);
    z-index: 10;
    width: 42px;
    height: 42px;
    pointer-events: none
}

.interactivity-guide svg[data-v-a74bdd06] {
    position: absolute;
    top: 0;
    left: 0
}

.circle[data-v-a74bdd06] {
    position: absolute;
    width: 42px;
    height: 42px;
    opacity: 0;
    border-radius: 50%;
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .16);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .16);
    -webkit-animation: circle-scale-data-v-a74bdd06 1.2s linear 0s infinite;
    animation: circle-scale-data-v-a74bdd06 1.2s linear 0s infinite
}

.circle[data-v-a74bdd06]:nth-child(2) {
    -webkit-animation-delay: .2s;
    animation-delay: .2s
}

.circle[data-v-a74bdd06]:nth-child(3) {
    -webkit-animation-delay: .4s;
    animation-delay: .4s
}

.finger[data-v-a74bdd06] {
    position: absolute;
    top: 0;
    left: -7px;
    width: 60px;
    height: 60px;
    opacity: 0;
    -webkit-animation: finger-move-data-v-a74bdd06 1.2s linear 0s infinite;
    animation: finger-move-data-v-a74bdd06 1.2s linear 0s infinite
}

@-webkit-keyframes circle-scale-data-v-a74bdd06 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    40% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    45% {
        opacity: .75
    }
    90% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes circle-scale-data-v-a74bdd06 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    40% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    45% {
        opacity: .75
    }
    90% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes finger-move-data-v-a74bdd06 {
    0% {
        opacity: 1;
        -webkit-transform: translateY(30%) scale(.4);
        transform: translateY(30%) scale(.4)
    }
    20% {
        -webkit-transform: translateY(-5%) scale(.4);
        transform: translateY(-5%) scale(.4)
    }
    45% {
        -webkit-transform: translateY(-5%) scale(.35);
        transform: translateY(-5%) scale(.35)
    }
    60% {
        -webkit-transform: translateY(-5%) scale(.35);
        transform: translateY(-5%) scale(.35)
    }
    75% {
        opacity: 1;
        -webkit-transform: translateY(-5%) scale(.35);
        transform: translateY(-5%) scale(.35)
    }
}

@keyframes finger-move-data-v-a74bdd06 {
    0% {
        opacity: 1;
        -webkit-transform: translateY(30%) scale(.4);
        transform: translateY(30%) scale(.4)
    }
    20% {
        -webkit-transform: translateY(-5%) scale(.4);
        transform: translateY(-5%) scale(.4)
    }
    45% {
        -webkit-transform: translateY(-5%) scale(.35);
        transform: translateY(-5%) scale(.35)
    }
    60% {
        -webkit-transform: translateY(-5%) scale(.35);
        transform: translateY(-5%) scale(.35)
    }
    75% {
        opacity: 1;
        -webkit-transform: translateY(-5%) scale(.35);
        transform: translateY(-5%) scale(.35)
    }
}

.webpage-view {
    position: relative;
    padding: 0
}

.webpage-view--design {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    margin: 0 auto
}

.webpage-view--flow {
    margin: 0 auto
}

.webpage-view__innner {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%
}

.webpage-view.ios.weixin img {
    -webkit-touch-callout: none
}

.page-scroll {
    position: fixed;
    top: 0;
    right: 4px;
    z-index: 4;
    width: 8px;
    height: 100vh
}

.page-scroll__bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 80px;
    background: rgba(0, 0, 0, .32);
    -webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .12);
    border: 1px solid hsla(0, 0%, 100%, .48);
    border-radius: 4px;
    cursor: pointer
}

.inspect-view {
    position: relative
}

.inspect-view--embedded {
    overflow: -moz-scrollbars-none;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100vw;
    height: 100vh;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.inspect-view--embedded::-webkit-scrollbar {
    width: 0 !important
}

.inspect-view__loading {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100vw;
    background: #fff
}

.audit-view, .inspect-view__loading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    height: 100vh
}

.audit-view {
    max-width: 1920px;
    margin: 0 auto
}

.audit-view__main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 100%;
    background: var(--bg-light)
}

.audit-view__container {
    width: 360px;
    height: 695px
}

.audit-view__container, .audit-view__inner {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fff
}

.audit-view__inner {
    overflow-y: hidden;
    width: 100%;
    height: 100%
}

.audit-view__flow {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    overflow: -moz-scrollbars-none;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.audit-view__flow::-webkit-scrollbar {
    width: 0 !important
}

.audit-view__paging, .audit-view__scroll {
    position: absolute;
    top: 50%;
    right: -56px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    width: 40px;
    height: 108px;
    padding: 4px 0;
    color: #606770;
    background: #fff;
    -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .12);
    border-radius: 20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.audit-view__scroll {
    font-size: 12px;
    letter-spacing: 2px;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl
}

.audit-view__paging-item, .audit-view__scroll {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.audit-view__paging-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 40px;
    font-size: 14px;
    background: #fff;
    border: none;
    outline: none;
    cursor: pointer
}

.audit-view__paging-item .icon-font {
    width: 16px;
    height: 16px
}

.audit-view__info {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    width: 404px;
    height: 100%;
    padding: 40px
}

.audit-view__title {
    display: block;
    margin-bottom: 32px;
    color: #000;
    font-size: 24px;
    font-weight: 700;
    line-height: 36px
}

.audit-view__desc {
    margin-bottom: 32px;
    color: #000;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.audit-view__cover {
    display: block;
    width: 200px;
    height: 200px
}

.audit-view__link {
    display: block;
    margin-top: 16px;
    color: #005cf9
}

.audit-view__links {
    display: block;
    margin-top: 16px;
    height: 300px;
    max-height: calc(100vh - 560px);
    overflow-y: auto
}

.audit-view__link-item {
    display: block;
    margin-top: 2px;
    color: #005cf9
}

body {
    width: 100vw;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100% !important
}