html {
    box-sizing: border-box;
    word-break: normal;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4
}

*, :after, :before {
    background-repeat: no-repeat;
    box-sizing: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important
}

:after, :before {
    text-decoration: inherit;
    vertical-align: inherit
}

* {
    padding: 0;
    margin: 0
}

hr {
    overflow: visible;
    height: 0;
    color: inherit
}

details, main {
    display: block
}

summary {
    display: list-item
}

small {
    font-size: 80%
}

[hidden] {
    display: none
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

a {
    background-color: transparent
}

a:active, a:hover {
    outline-width: 0
}

code, kbd, pre, samp {
    font-family: monospace, monospace
}

pre {
    font-size: 1em
}

b, strong {
    font-weight: bolder
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    border-color: inherit;
    text-indent: 0
}

input {
    border-radius: 0
}

[disabled] {
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

textarea {
    overflow: auto;
    resize: vertical
}

button, input, optgroup, select, textarea {
    font: inherit
}

optgroup {
    font-weight: 700
}

button {
    overflow: visible
}

button, select {
    text-transform: none
}

[role=button], [type=button], [type=reset], [type=submit], button {
    cursor: pointer;
    color: inherit
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button:-moz-focusring {
    outline: 1px dotted #ccc
}

[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: button
}

button, input, select, textarea {
    background-color: transparent;
    border-style: none
}

a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline-width: 0
}

select {
    -moz-appearance: none;
    -webkit-appearance: none
}

select::-ms-expand {
    display: none
}

select::-ms-value {
    color: currentColor
}

legend {
    border: 0;
    color: inherit;
    display: table;
    white-space: normal;
    max-width: 100%
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    color: inherit;
    font: inherit
}

img {
    border-style: none
}

progress {
    vertical-align: baseline
}

[aria-busy=true] {
    cursor: progress
}

[aria-controls] {
    cursor: pointer
}

[aria-disabled=true] {
    cursor: default
}

.disabled, :disabled {
    opacity: .3 !important;
    pointer-events: none !important
}

:root {
    --colors-primary-fill: 255, 255, 255;
    --colors-primary-base-fill: 0, 200, 175;
    --colors-primary-base: rgb(var(--colors-primary-base-fill));
    --colors-primary-hover: #4dd8c7;
    --colors-primary-active: #008b7a;
    --colors-warn: #fa3f48;
    --colors-color: hsla(0, 0%, 100%, .7);
    --colors-border-color: rgba(var(--colors-primary-fill), .16);
    --colors-content-color: rgb(--colors-primary-fill);
    --colors-normal-back: rgba(var(--colors-primary-fill), .1);
    --colors-normal-base: rgba(var(--colors-primary-fill), .4);
    --colors-normal-hover: rgba(var(--colors-primary-fill), 1);
    --colors-normal-click: var(--colors-primary-click);
    --colors-normal-fill-back: var(--colors-normal-back);
    --colors-normal-fill-base: var(--colors-normal-base);
    --colors-normal-fill-hover: var(--colors-normal-hover);
    --colors-normal-fill-click: var(--colors-primary-click);
    --colors-error-fill: 250, 63, 72;
    --small-size: 12px;
    --medium-size: 14px;
    --big-size: 16px;
    --color-main-normal: var(--colors-primary-base);
    --color-main-hover: var(--colors-primary-hover);
    --color-main-focus: var(--colors-primary-click);
    --editor-head-filter: blur(0);
    --editor-head-height: 50px;
    --editor-head-back: rgba(20, 20, 20, .86);
    --editor-menu-filter: var(--editor-head-filter);
    --editor-menu-width: 80px;
    --editor-menu-left: 0;
    --editor-menu-right: 0;
    --editer-menu-fill: 27, 27, 28;
    --editor-menu-back: rgba(var(--editer-menu-fill), .8);
    --editor-menu-active-back: rgba(var(--colors-primary-fill), .06);
    --editor-menu-color: #999;
    --editor-menu-active: hsla(0, 0%, 100%, .06);
    --editor-toolbox-top: var(--editor-head-height);
    --editor-toolbox-left: calc(var(--editor-menu-left) + var(--editor-menu-width));
    --editor-toolbox-width: 340px;
    --editor-toolbox-back: var(--editor-menu-back);
    --editor-toolbox-padding: 20px;
    --editor-toolbar-height: 60px
}

.ui-loading {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, .3);
    --width: 15px;
    --color: #fff
}

.ui-loading, .ui-loading__box {
    display: flex;
    align-items: center;
    justify-content: center
}

.ui-loading__box {
    position: relative;
    width: 100px;
    height: 100px
}

.ui-loading__box .default div {
    width: var(--width);
    height: var(--width);
    background: var(--color);
    border-radius: 50%;
    display: inline-block;
    margin-left: calc(var(--width))
}

.ui-loading__box .default div:first-child {
    -webkit-animation: ui-loading-default 1s linear -.5s infinite;
    animation: ui-loading-default 1s linear -.5s infinite
}

.ui-loading__box .default div:nth-child(2) {
    -webkit-animation: ui-loading-default 1s linear -.25s infinite;
    animation: ui-loading-default 1s linear -.25s infinite
}

.ui-loading__box .default div:nth-child(3) {
    -webkit-animation: ui-loading-default 1s linear 0s infinite;
    animation: ui-loading-default 1s linear 0s infinite
}

@-webkit-keyframes ui-loading-default {
    0% {
        transform: scale(1);
        opacity: 1
    }
    50% {
        transform: scale(.5);
        opacity: .5
    }
    to {
        transform: scale(1);
        opacity: .8
    }
}

@keyframes ui-loading-default {
    0% {
        transform: scale(1);
        opacity: 1
    }
    50% {
        transform: scale(.5);
        opacity: .5
    }
    to {
        transform: scale(1);
        opacity: .8
    }
}

.ui-dialog {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #fff;
    background-color: rgba(0, 0, 0, .3);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px)
}

.ui-dialog__box {
    position: relative;
    display: inline-block;
    min-width: 400px;
    min-height: 100px;
    background-color: rgba(26, 26, 26, .8);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .7);
    border-radius: 4px;
    border: 1px solid #000;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px)
}

.ui-dialog__box:after {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    top: 1px;
    border: 1px solid hsla(0, 0%, 100%, .1);
    border-radius: 4px;
    z-index: 0;
    pointer-events: none
}

.ui-dialog__box header {
    color: #999;
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid hsla(0, 0%, 100%, .16);
    font-weight: 700
}

.ui-dialog__box header i {
    cursor: pointer
}

.ui-dialog__box section {
    padding: 40px 20px;
    display: flex;
    align-items: center;
    justify-content: center
}

.ui-dialog__box section .message {
    text-align: center;
    line-height: 1.7
}

.ui-dialog__box footer {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid hsla(0, 0%, 100%, .16)
}

.ui-dialog__box footer button {
    width: 105px;
    margin-left: 10px;
    margin-right: 10px
}

[is-mobile] .ui-dialog__box {
    max-width: 90%;
    min-width: 80%
}

[is-mobile] section .message {
    text-align: left
}

.ui-toast {
    position: fixed;
    top: 90px;
    left: 0;
    right: 0;
    min-width: 100px;
    height: 100px;
    overflow: hidden;
    pointer-events: none
}

.ui-toast, .ui-toast__box {
    display: flex;
    align-items: center;
    justify-content: center
}

.ui-toast__box {
    color: #fff;
    font-size: 14px;
    position: relative;
    background-color: rgba(26, 26, 26, .8);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .7);
    border-radius: 4px;
    border: 1px solid #000;
    padding: 8px 20px;
    pointer-events: all
}

.ui-toast__box.error i, .ui-toast__box.fixed i, .ui-toast__box.success i, .ui-toast__box.warn i {
    display: inline-block
}

.ui-toast__box.success .icon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAt1JREFUWEfFl01ME0EUx/9v19AqhJMkBqonJaIFTpjCCU8VD0aNqAmeLCTahJhwNRKC8WpiVEyIepJEIVFjYtATPdEqN6sS0ZNWYoInPpSiu89M2223+9Gdlpr2uH3v/34z72NmCJK//g9jdUvr349qun4CwCECmpnRLNyJsMzAMoCPqqK8aG1omZs5PLYlI01eRl1vo3t+a+lRgAfAaPSyz/xPWAVoaqfqG184MvGjlI8rQN/nYV9qZeMqCCPMqJcKbDEiwgYYNwNN9TdmD9xOO2k4AohVb2rpZ8wcqiSw1YeIEn7Vd8ppN2wAwcRgBzG/ZOZANYIbGkSUAqvHkz2TSbNuEUBu5QvVDm6G8Ku+LvNO5AEyOf/5K1atbXfbPZGOwO5dvUZN5AHa5y+OM3CtmtvuCgFcT/Y8HM02DIDs1m9+qbTay4UW3eFX/ftFKjIAwXhkAsyXyxXalj3RvffdD6IkJtzi6tcV6SFTRlQCPSeFhoULsz7JjL68O2G1rXFfE3W+GQprmvaqDF05U6LHbaHwhRk6qwmHzvlLLRq2UmZnVVWPUTAeuQvmqJyqpJUluPDqSAwGdF3/VqRANCEA5sDcKyntbeYQvJ+n1cXE62kwn7YAxKg9HvnEzK3eyhIW7sGnwHzOYUQvUXA+sgZwQ2FaYVbhuiFW/pLOfMtG7T5hinIuzHIrdwyelaF1G4CiKHvfhe5nisVbIEdT5soLa6A1WwrMAFIQFQcXFxlashWh6N2D3eEzRvuUhNhG8GwGKObchkRP2kLhAQeIR2A+n3OuIOeWAhJt6DqISkEAMA8ZqVQ5FG9mEJUcxS4QQksqRaU61xjFwqbkYeQAYdaV7hT7EMgeRuK753HsAlFpcNtxLCA8LyQWiEqDZ4rfeiERH6WuZERPFaIrpO9gHX/uMPikxIC2jH+XK1khFenaXEoNzJpeyw2Imj5MDIiaPs3MVVOzx6m1uv/X8/wfeMQN1tXNKK8AAAAASUVORK5CYII=)
}

.ui-toast__box.error .icon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAArlJREFUWEfNlztoU2EUx8//3i8+o5MpUuMmDg5uglsTHcytIipGhboqWBDBVexQ6SqIWEHXFtSIFtHGQUzGgqMgKG7WIo1TG1+9j7/cm0eT9L60kWvWnO+c3/2f1/dBYv5YLG6wvn7Pw+FxwtlHYhDgoHucxALABVB7Rw3P1I4tFZRKK3FcI8qIueGdNjhGR0Yo3B5l7/4PwRI0mdaJcVRnv4SdCQSgYWy0fso1Ia+SsjVO4F4bQL4JcFNtkgmUy7/8fPgCuF9tCZ+SPPg3gdeCYE4JTvqpsQaAhwv7LRsvSGb7EbzlA8C8UhjGq9m3nX67AJpf/qbfwbsgBAc6lWgDeDn/IdV+yR6kHoA5tVlyrZpoA5h5Y5wOr/dT9kAIDTdSlfJYo2PcPvaKzvnoV+0QlJWuXxDHhkXeosip0LYCZpTIZdfGotyj0PDrDiXaHjcVHoCVNyYdh5f8HKeA3aiW5z3QYlE3a/VpIc/6QgAPUpn0eZRKtmd/6Ngu07a8s70/TcNdVSmPwptwi/Va0JDpBAiF6AneUNbImuQn//7HkhpIZ2Dmjx6hY78MKZoZlUmfbn1VB8SUkOe8c37Bi0XdWlx+FJYyaHoB1tDwHUec0dDiAx6mMukRXwgR6ZQ9VqqawTTRJmHmChVScpHVHwDhCdDM+Z8EbwgnVawMGe9FuDcSIEDqznPNIl1NTaRTfHAVWCYlHWnbMvDJt29dxHAISD1ZAMHyf5GCuEXYNWRasq+7CGO2oW9ws1afcgHW14ZRg0jkiRrYdia01YIGUa3+mOSJwCHnDqLER7FLF7qMdJXF6+efYw2ZnmEVtgvay6ixNCLWMeSiBypyO0xSryDdlAFXRNNp2fb9WOvYPZjohcRTIekr2WoqmMyltNUqiV7L2xBJPkzaEEk+zbp2fFKP097x+a+e578BILk7khpPUA8AAAAASUVORK5CYII=)
}

.ui-toast__box.warn .icon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAmtJREFUWEfNlz+IE0EUxt+3zkZFEQUViblOLCzsBLtsENFLIVhoYyWiwSttxStObO082RxiZaOFIHgnKCR2B5aCoNhdDKKC4nmou3v7yWz+kMS97OzGY91238z85ps3730DMfz48Fwh+PalAgnPUHCEwiKIoh5OsA1BG8I3FOuJ2r23gfOPPJOpkRTE+86BdQ+zlPACRXYlxev/EPkOsR5sKXAOF5sfx43ZEICL01uDlV/XBbxGcofJwqMxANaEuK2mtt1Cdel33ByxAHrXgS+PSR7PsnAMyLKy5WycGn8BcOHE0YDrT0mWxkoHWVRATccEpEtKdXw8WoqqitqL14NxQwDdnb9KWlxPYKvCQVx63o6S8N7Joh94H5LUAtBSthwbVKIPEJ1562fTVPZC7eUQvOeWmQQQJSiwrErbnV5O9Cfx3cocJbxhMomOyQrQuSXWTbvWmO3eGJGu9O/TZPtEAMCasuWQPopIgcCtzIcSXjXd/aQK6PGWWHdVrTGDqMJ9/fTZtMj0ICdRoFes1J79++DXK6fI8Fma3f8LBToJaZ1GUC/fCSkzeQBYkHn4dadB0skDAEATXr38ViiH8wAQyDv4rrNK4c48ACD4kS8AZPU/OIKMSZilGcW06Wbma4iU7Tgux7rXMFshSpu0sW5IF6KspXhSAO0bo1KctRkBsqSAK11HVCdlOg1UvxlFjqbjAVO1Y9vCFC43W9H4Bafkh1wxBdBmdagd64FpDclEAKOGJNpFSkuW9Qg2tGQDR2FkSk3lHowba0p7gaa2PC1AtHiSLe9D5Pkw6UPk+TQblDe3x+noGW/W8/wPIyynU1P6B7AAAAAASUVORK5CYII=)
}

.ui-toast__box:after {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    top: 1px;
    border: 1px solid hsla(0, 0%, 100%, .1);
    border-radius: 4px;
    z-index: 0;
    pointer-events: none
}

.ui-toast__box .icon {
    margin-right: 10px;
    font-size: 0;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain
}

.ui-toast__box .close {
    cursor: pointer;
    font-size: 14px;
    margin-left: 20px
}

.ui-toast__msg {
    display: flex;
    align-items: center
}

.ui-toast__msg img {
    width: 24px;
    height: 24px
}

body[is-mobile] .ui-toast__box {
    max-width: 80%
}

.ui-tree {
    --ctrl-size: 14px;
    --padding-size: 20px;
    --margin-size: 20px;
    --border-style: dashed;
    --border-width: 1px;
    --calc-size: var(--padding-size);
    --half-ctrl: calc(var(--ctrl-size) / 2);
    --half-margin: calc(var(--margin-size) / 2);
    color: var(--colors-normal-base)
}

.ui-tree.flat .ui-tree-item {
    --padding-size: 20px;
    margin-left: calc(var(--padding-size) * -1)
}

.ui-tree .ui-tree-item {
    list-style: none;
    padding-left: var(--padding-size);
    position: relative
}

.ui-tree .ui-tree-item.un-children {
    --padding-size: 0
}

.ui-tree .ui-tree-content {
    margin-bottom: var(--margin-size);
    position: relative
}

.ui-tree .ui-tree-ctrl {
    position: absolute;
    width: var(--ctrl-size);
    height: var(--ctrl-size);
    left: calc(var(--padding-size) * -1);
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid currentColor;
    line-height: var(--ctrl-size);
    border-radius: calc(var(--ctrl-size) / 6);
    cursor: pointer
}

.ui-tree .ui-tree-ctrl:after, .ui-tree .ui-tree-ctrl:before {
    content: "";
    height: 1px;
    width: 60%;
    background-color: currentColor;
    position: absolute;
    left: 50%;
    top: 50%
}

.ui-tree .ui-tree-ctrl:before {
    transform: translate(-50%, -50%)
}

.ui-tree .ui-tree-ctrl:after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform .3s ease
}

.ui-tree .ui-tree-ctrl.open:after {
    transform: translate(-50%, -50%) rotate(90deg) scale(0)
}

.ui-tree .ui-tree-item-child {
    --offset: calc(var(--calc-size) * 2);
    width: calc(100% + var(--offset));
    padding-left: var(--offset);
    margin-left: calc(var(--offset) * -1);
    padding-top: var(--margin-size);
    margin-top: calc(var(--margin-size) * -1);
    transition: all .3s ease !important
}

.ui-tree.stroke {
    --slideWidth: calc(var(--padding-size) - var(--half-ctrl))
}

.ui-tree.stroke .ui-tree-auxiliary:after, .ui-tree.stroke .ui-tree-auxiliary:before, .ui-tree.stroke .ui-tree-content:after, .ui-tree.stroke .ui-tree-item:before {
    content: "";
    position: absolute
}

.ui-tree.stroke .ui-tree-content:after {
    left: calc(var(--padding-size) * -1);
    width: var(--slideWidth);
    border-bottom: var(--border-width) var(--border-style) currentColor;
    top: 50%;
    transform: translateX(-100%) translateY(-50%)
}

.ui-tree.stroke .ui-tree-auxiliary:after, .ui-tree.stroke .ui-tree-auxiliary:before, .ui-tree.stroke .ui-tree-item.un-children:last-child:before, .ui-tree.stroke .ui-tree-item:not(:last-child):before {
    border-left: var(--border-width) var(--border-style) currentColor;
    transform: translateX(calc(var(--slideWidth) * -1));
    left: 0
}

.ui-tree.stroke .ui-tree-item:not(:last-child):before {
    top: 0;
    bottom: calc(var(--half-ctrl) * -1)
}

.ui-tree.stroke .ui-tree-item.un-children:last-child:before {
    top: 0;
    bottom: calc(50% + var(--half-margin))
}

.ui-tree.stroke .ui-tree-auxiliary:after, .ui-tree.stroke .ui-tree-auxiliary:before {
    height: calc(50% - var(--half-ctrl));
    transition: height .3s ease
}

.ui-tree.stroke .ui-tree-auxiliary:before {
    height: calc(50% - var(--half-ctrl));
    left: calc(var(--padding-size) * -1);
    top: var(--half-ctrl)
}

.ui-tree.stroke .ui-tree-auxiliary:after {
    height: calc(50% - var(--half-ctrl) + var(--margin-size));
    bottom: calc(var(--margin-size) * -1)
}

.ui-tree.stroke .first.ui-tree-auxiliary:before {
    display: none
}

.ui-tree.stroke .alone .ui-tree-auxiliary:before {
    display: inherit;
    height: 50%;
    top: 0
}

.ui-tree.stroke:not(.children) > .ui-tree-item:before, .ui-tree.stroke:not(.children) > .ui-tree-item > .ui-tree-content:after, .ui-tree.stroke:not(.children) > .ui-tree-item > .ui-tree-content > .ui-tree-auxiliary:before {
    display: none
}

.ui-tree.stroke .ui-tree-item.put .ui-tree-item-child {
    padding-top: 0;
    margin-top: 0
}

.ui-tree.stroke .ui-tree-item.put > .ui-tree-content .ui-tree-auxiliary:after {
    height: 0
}

.ui-input {
    display: inline-flex;
    align-items: center;
    --base-border-color: hsla(0, 0%, 100%, .2);
    --colors-content-color: #fff;
    height: 100%
}

.ui-input.error {
    position: relative;
    --colors-primary-base: #fa3f48;
    --base-border-color: #fa3f48
}

.ui-input.error .error-msg {
    top: 100%;
    position: absolute;
    color: var(--colors-primary-base);
    margin-top: 5px
}

.ui-input.require {
    position: relative
}

.ui-input.require:before {
    content: "*";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 100%;
    margin-right: 2px;
    color: #fa3f48;
    line-height: 1.5em
}

.ui-input .input {
    position: relative;
    align-items: center;
    display: inline-flex
}

.ui-input .input .input-div, .ui-input .input input, .ui-input .input textarea {
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    font-size: 14px;
    color: var(--colors-content-color);
    padding-left: 4px;
    resize: none
}

.ui-input .input .input-div + .replace, .ui-input .input input + .replace, .ui-input .input textarea + .replace {
    position: absolute;
    z-index: 1
}

.ui-input .input .input-div.replace-input, .ui-input .input input.replace-input, .ui-input .input textarea.replace-input {
    opacity: 0;
    cursor: pointer
}

.ui-input .input .pre-icon {
    position: absolute;
    z-index: 1
}

.ui-input .label {
    cursor: pointer;
    margin-left: 7px
}

.ui-input .checkbox, .ui-input .radio {
    width: 16px;
    height: 16px
}

.ui-input .checkbox input + .replace, .ui-input .radio input + .replace {
    color: var(--colors-color);
    border: 1px solid currentColor;
    background-color: var(--colors-normal-back);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    transition: all .1s linear
}

.ui-input .checkbox input:focus + .replace, .ui-input .radio input:focus + .replace {
    border-color: var(--colors-primary-base)
}

.ui-input .checkbox input:checked + .replace, .ui-input .radio input:checked + .replace {
    color: var(--colors-primary-base)
}

.ui-input .checkbox input + .replace {
    border-radius: 4px
}

.ui-input .checkbox input + .replace .icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: all .1s linear
}

.ui-input .checkbox input:checked + .replace .icon {
    transform: translate(-50%, -50%) scale(1)
}

.ui-input .radio input + .replace {
    border-radius: 50%
}

.ui-input .radio input + .replace:after {
    content: "";
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: all .1s linear;
    width: 60%;
    height: 60%;
    background-color: currentColor
}

.ui-input .radio input:checked + .replace:after {
    transform: translate(-50%, -50%) scale(1)
}

.ui-input .text {
    width: 100%;
    height: 100%;
    border-radius: 4px
}

.ui-input .text input {
    background: var(--colors-normal-back);
    height: 100%;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid var(--base-border-color);
    transition: border .3s ease
}

.ui-input .text input:focus {
    border-color: var(--colors-primary-base)
}

.ui-input .text input.warn, .ui-input .text input.warn:focus {
    border-color: var(--colors-warn)
}

.ui-input .text input::-moz-placeholder {
    color: var(--colors-color)
}

.ui-input .text input:-ms-input-placeholder {
    color: var(--colors-color)
}

.ui-input .text input::placeholder {
    color: var(--colors-color)
}

.ui-input .text.pre-suffix input {
    padding-left: 30px
}

.ui-input .text.pre-suffix .pre-icon {
    left: 10px;
    top: 50%;
    transform: translateY(-50%)
}

.ui-input .text.right input {
    text-align: right
}

.ui-input .text.suffix input {
    padding-right: 60px
}

.ui-input .text.suffix .retouch {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer
}

.ui-input .text.suffix .len {
    font-size: var(--small-size);
    color: rgba(var(--colors-primary-fill), 1)
}

.ui-input .text.suffix .len span {
    color: var(--colors-primary-base)
}

.ui-input .text.ready .retouch, .ui-input .text.ready input {
    transition: all .1s linear
}

.ui-input .textarea {
    width: 100%;
    height: 100%;
    min-height: 50px
}

.ui-input .textarea > .replace {
    border-radius: 4px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: var(--colors-normal-back);
    border: 1px solid var(--base-border-color);
    transition: border .3s ease
}

.ui-input .textarea .input-div {
    overflow-y: auto
}

.ui-input .textarea .input-div a {
    color: var(--color-main-normal)
}

.ui-input .textarea .input-div, .ui-input .textarea textarea {
    height: 100%;
    width: 100%;
    padding: 10px
}

.ui-input .textarea .input-div:focus + .replace, .ui-input .textarea textarea:focus + .replace {
    border-color: var(--colors-primary-base)
}

.ui-input .textarea .input-div::-moz-placeholder, .ui-input .textarea textarea::-moz-placeholder {
    color: var(--colors-color)
}

.ui-input .textarea .input-div:-ms-input-placeholder, .ui-input .textarea textarea:-ms-input-placeholder {
    color: var(--colors-color)
}

.ui-input .textarea .input-div::placeholder, .ui-input .textarea textarea::placeholder {
    color: var(--colors-color)
}

.ui-input .textarea.right .input-div, .ui-input .textarea.right textarea {
    text-align: right
}

.ui-input .textarea.suffix {
    --bar-height: 30px
}

.ui-input .textarea.suffix .input-div, .ui-input .textarea.suffix textarea {
    margin-bottom: var(--bar-height);
    height: calc(100% - var(--bar-height))
}

.ui-input .textarea.suffix > .retouch {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(var(--colors-primary-fill), .1);
    height: var(--bar-height);
    display: flex;
    padding: 0 10px;
    align-items: center;
    justify-content: space-between
}

.ui-input .textarea.suffix .len {
    justify-self: end;
    font-size: var(--small-size);
    color: rgba(var(--colors-primary-fill), 1)
}

.ui-input .textarea.suffix .len span {
    color: var(--colors-primary-base)
}

.ui-input .number input {
    -moz-appearance: textfield
}

.ui-input .number input::-webkit-inner-spin-button, .ui-input .number input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.ui-input .number .ctrls {
    position: absolute;
    width: 8px
}

.ui-input .number .ctrls .icon {
    position: absolute;
    right: 0
}

.ui-input .number .ctrls .icon.up {
    bottom: 0
}

.ui-input .number .ctrls .icon.down {
    top: 0
}

.ui-input .number.ctrl.suffix input {
    padding-right: 20px;
    z-index: 1
}

.ui-input .select input {
    cursor: pointer
}

.ui-input .select input.ui-text {
    padding-right: 0
}

.ui-input .select input.icon {
    padding-right: 30px
}

.ui-input .select.focus input {
    border-color: var(--colors-primary-base)
}

.ui-input .select.focus .retouch {
    transform: translateY(-50%) rotate(180deg)
}

.ui-input .range {
    width: 100%;
    height: 100%;
    display: flex;
    --height: 6px;
    --slideSize: calc(var(--height) + 8px)
}

.ui-input .range .range-content {
    flex: 1;
    background-color: var(--colors-normal-back);
    position: relative;
    cursor: pointer
}

.ui-input .range .range-content, .ui-input .range .range-content:before {
    height: var(--height);
    border-radius: calc(var(--height) / 2)
}

.ui-input .range .range-content .range-slide, .ui-input .range .range-content:before {
    content: "";
    position: absolute
}

.ui-input .range .range-content:before {
    pointer-events: none;
    left: 0;
    top: 0;
    width: var(--percentage);
    background-color: var(--colors-primary-base)
}

.ui-input .range .range-locus {
    width: calc(100% - var(--slideSize));
    height: var(--height);
    position: relative
}

.ui-input .range .range-locus .range-slide {
    cursor: pointer;
    height: var(--slideSize);
    width: var(--slideSize);
    top: 50%;
    left: var(--percentage);
    transform: translateY(-50%);
    background-color: var(--colors-content-color);
    border-radius: 50%
}

.ui-input .range .range-locus .range-slide .tips {
    position: absolute;
    background: rgba(0, 0, 0, .6);
    padding: 4px 6px;
    border-radius: 4px;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    font-size: 12px
}

.ui-input .range .range-locus .range-slide:hover .tips {
    display: block
}

.ui-input .range .range-text {
    margin-left: 10px;
    width: 65px
}

.ui-input .range .animation.range-content:before, .ui-input .range .animation .range-slide {
    transition: all .1s linear
}

.ui-input .switch {
    --height: 24px;
    width: 50px;
    height: var(--height)
}

.ui-input .switch .replace {
    background-color: hsla(0, 0%, 100%, .3);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: calc(var(--height) / 2);
    pointer-events: none;
    position: relative;
    transition: background-color .3s ease
}

.ui-input .switch .replace:after {
    content: "";
    --padding: 3px;
    --size: calc(var(--height) - var(--padding) * 2);
    position: absolute;
    width: var(--size);
    height: var(--size);
    top: var(--padding);
    background: var(--colors-content-color);
    border-radius: 50%;
    left: var(--padding);
    transition: left .3s ease
}

.ui-input .switch input:checked + .replace {
    background-color: var(--colors-primary-base)
}

.ui-input .switch input:checked + .replace:after {
    left: calc(100% - var(--size) - var(--padding))
}

.ui-input .file {
    width: 100%;
    height: 100%
}

.ui-input .file input {
    cursor: pointer;
    opacity: 0
}

.ui-input .file .use-replace {
    position: absolute
}

.ui-input .file .replace, .ui-input .file .use-replace {
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none
}

.ui-input .file:not(.valuable) .replace {
    top: 0;
    bottom: 0;
    background: rgba(var(--colors-primary-fill), .1);
    border-radius: 4px;
    border: 1px solid rgba(var(--colors-primary-fill), .2)
}

.ui-input .file:not(.valuable) .replace .placeholder {
    text-align: center;
    max-width: 80%
}

.ui-input .file:not(.valuable) .replace .placeholder p:not(:last-child) {
    margin-bottom: 10px
}

.ui-input .file:not(.valuable) .replace .placeholder .bottom {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .3);
    width: 90%;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    text-align: left
}

.ui-input .file:not(.valuable) input {
    width: 100%;
    height: 100%
}

.ui-input .file:not(.valuable) input:focus + .replace {
    border-color: var(--colors-primary-base)
}

.ui-input .file.valuable {
    background: rgba(var(--colors-primary-fill), .1);
    border-radius: 4px;
    border: 1px solid rgba(var(--colors-primary-fill), .2)
}

.ui-input .file.valuable .replace, .ui-input .file.valuable input {
    position: absolute;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .5));
    height: 32px;
    line-height: 32px
}

.ui-input .file.valuable .replace .tj, .ui-input .file.valuable input .tj {
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    font-size: 10px
}

.ui-input .file.valuable .replace .tj > span, .ui-input .file.valuable input .tj > span {
    color: var(--colors-primary-base);
    margin-right: 4px
}

.ui-input .file.valuable .icons {
    position: absolute;
    right: 10px;
    top: 0
}

.ui-input .file.valuable .icons span {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .3);
    font-size: 12px;
    color: hsla(0, 0%, 100%, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px
}

.ui-input .search .retouch {
    transform: translateY(-50%) !important
}

.ui-input .search .retouch .clear {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsla(0, 0%, 100%, .6);
    border-radius: 50%;
    cursor: pointer
}

.ui-input .color.default input {
    opacity: 1;
    border: inherit;
    outline: inherit
}

.ui-input .color .replace {
    pointer-events: none
}

.select-float {
    transition: transform .3s ease, opacity .3s ease;
    transform-origin: center top
}

.select-float:not(.show) {
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none
}

.select-float.show {
    transform: scale(1);
    opacity: 1
}

.select-replace {
    --colors-content-color: #fff;
    list-style: none;
    max-height: 288px;
    background: rgba(26, 26, 26, .8);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3), inset 0 0 1px hsla(0, 0%, 100%, .9);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-radius: 4px;
    overflow-y: auto;
    color: var(--colors-content-color)
}

.select-replace.hide-scroll {
    max-height: 100%
}

.select-replace li {
    padding: 10px 10px;
    font-size: 14px
}

.select-replace li.un-data {
    padding: 20px;
    color: hsla(0, 0%, 100%, .3);
    pointer-events: none
}

.select-replace li.active {
    background: var(--colors-normal-back);
    color: var(--colors-primary-base)
}

.select-replace li:not(.active):hover {
    cursor: pointer;
    background-color: var(--colors-primary-base)
}

.is-hidden {
    position: absolute;
    left: -10000px;
    top: -10000px
}

.no-vip .file input, .no-vip .file label {
    pointer-events: none
}

.ui-button {
    width: 100%;
    height: 34px;
    border: none;
    outline: none;
    border-radius: 4px;
    font-size: 14px;
    background: none !important;
    transition: all .3s ease
}

.ui-button .ui-button-icon {
    margin-right: .6em
}

.ui-button.customize {
    background: none;
    color: rgba(var(--color), .8);
    border: 1px solid rgba(var(--color), .6)
}

.ui-button.normal {
    color: var(--colors-color);
    border: 1px solid var(--colors-normal-base)
}

.ui-button.normal:hover {
    color: var(--colors-normal-hover);
    border: 1px solid var(--colors-normal-hover)
}

.ui-button.normal:active {
    color: var(--colors-normal-click);
    border: 1px solid var(--colors-normal-click)
}

.ui-button.submit {
    color: var(--color-main-hover);
    border: 1px solid var(--color-main-normal);
    background-color: var(--color-main-normal)
}

.ui-button.submit:hover {
    border-color: var(--color-main-hover);
    background-color: var(--color-main-hover)
}

.ui-button.submit:active {
    border-color: var(--color-main-focus);
    background-color: var(--color-main-focus)
}

.ui-button.cancel {
    color: var(--color-main-normal);
    border: 1px solid var(--color-main-normal)
}

.ui-button.cancel:hover {
    border-color: var(--color-main-hover)
}

.ui-button.cancel:active {
    border-color: var(--color-main-focus)
}

.ui-button.primary {
    background-color: var(--colors-primary-base) !important;
    color: var(--colors-normal-fill-hover);
    border: none;
    opacity: 1
}

.ui-button.primary:hover {
    background: #4dd8c7 !important
}

.ui-button.primary:active {
    background-color: var(--colors-primary-active) !important;
    color: hsla(0, 0%, 100%, .6)
}

.ui-group:not(:last-child) {
    margin-bottom: 20px
}

.ui-group.control > .group-title .group-icon {
    transition: transform .1s ease;
    cursor: pointer
}

.ui-group.control > .group-title .group-icon.show {
    transform: rotate(180deg)
}

.ui-group.control > div.group-title .group-icon.show {
    transform: translateY(-50%) rotate(180deg)
}

.ui-group.control .group-content {
    overflow: hidden
}

.ui-group.control .group-content.ready {
    transition: max-height .1s ease
}

.ui-group > .group-title {
    font-size: var(--big-size);
    margin-bottom: 14px;
    color: var(--colors-color)
}

.ui-group > .group-title .group-icon {
    display: inline-flex;
    align-items: center
}

.ui-group > div.group-title {
    position: relative
}

.ui-group > div.group-title .group-icon {
    position: absolute;
    width: 14px;
    right: 0;
    top: 50%;
    transform: translateY(-50%)
}

.ui-group > h3.group-title {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.ui-group .border-bottom {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--colors-border-color)
}

.ui-group .border-top {
    padding-top: 14px;
    border-top: 1px solid var(--colors-border-color)
}

.ui-group > .group-content {
    font-size: var(--medium-size)
}

.ui-group > .group-content.border-bottom {
    margin-bottom: 0
}

.ui-group > .group-content.border-top {
    margin-top: 0
}

.group-option:not(:last-child) {
    margin-bottom: 14px
}

.group-option > .group-option-label {
    display: block;
    margin-bottom: 10px;
    color: var(--colors-content-color)
}

.ui-floating {
    position: absolute
}

.ui-kankan-icon.iconfont {
    color: currentColor;
    font-size: 1em
}

.ui-kankan-icon.iconfont.small {
    font-size: 12px
}

.ui-kankan-icon.iconfont.medium {
    font-size: 16px
}

.ui-kankan-icon.iconfont.big {
    font-size: 20px
}

.icon {
    position: relative
}

.icon .tip {
    color: #fff;
    position: absolute;
    transform-origin: top center;
    background: #000;
    border-radius: 4px;
    opacity: 0;
    padding: 10px;
    margin: 10px;
    font-size: 12px;
    transition: opacity .3s ease;
    pointer-events: none;
    white-space: nowrap
}

.icon:hover {
    z-index: 999
}

.icon:hover .tip {
    opacity: .8
}

.tip-h-right .tip {
    right: 0;
    margin-right: 0
}

.tip-h-left .tip {
    left: 0;
    margin-left: 0
}

.tip-h-center .tip {
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
    z-index: 10
}

.tip-v-top .tip {
    bottom: 100%
}

.tip-v-center .tip {
    top: 50%;
    transform: translateY(-50%)
}

.tip-v-bottom .tip {
    top: 100%
}

.ui-size-animation.height {
    overflow: hidden
}

.ui-size-animation:not(.ready) {
    opacity: 0
}

.ui-size-animation.ready {
    transition: max-height .2s ease
}

.ui-size-animation.scale {
    transform-origin: center top;
    transform: scaleY(0)
}

.ui-size-animation.scale.show {
    transform: scaleY(1)
}

.ui-size-animation.scale.ready {
    transition: max-height .2s ease, transform .2s ease
}

.ui-menu-item {
    height: 100%;
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--editor-men-color);
    transition: all .3s ease
}

.ui-menu-item span {
    width: 100%;
    text-align: center;
    margin-top: 6px;
    overflow: hidden;
    font-size: 12px;
    padding: 1px 5px
}

.ui-menu-item:hover {
    color: var(--color-main-hover)
}

.ui-menu-item.active {
    color: var(--color-main-normal);
    background-color: var(--editor-menu-active)
}

.ui-gate-layer {
    --len: 1;
    --current: 0;
    width: 100%;
    height: 100%;
    overflow: hidden !important
}

.ui-gate-layer .ui-gate-slides {
    --content-width: calc(var(--len) * 100%);
    --item-width: calc(100% / var(--len));
    width: var(--content-width);
    height: 100%;
    transition: transform .3s ease;
    transform: translateX(calc(var(--current) * -1 * var(--item-width)))
}

.ui-gate-layer .ui-gate-slides .ui-gate-content {
    width: var(--item-width);
    height: 100%;
    float: left;
    opacity: 0;
    transition: opacity .3s ease
}

.ui-gate-layer .ui-gate-slides .ui-gate-content.active {
    opacity: 1
}

.ui-slide {
    position: relative;
    height: 100%
}

.ui-slide .left, .ui-slide .right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, .3);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.ui-slide .right {
    right: 10px
}

.ui-slide .left {
    left: 10px
}

.audio {
    cursor: pointer
}

.audio, .audio > span {
    display: inline-block
}

.audio > span {
    --height: 18px;
    width: 3px;
    height: calc(var(--height) * var(--percent));
    background: var(--colors-primary-base);
    transition: height .2s linear
}

.audio > span:not(:last-child) {
    margin-right: 2px
}

.audio audio {
    display: none
}

.ui-message {
    position: absolute;
    left: 50%;
    top: 70px;
    height: 40px;
    padding: 0 20px;
    background: rgba(20, 20, 20, .7);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3);
    border-radius: 4px;
    border: 1px solid #000;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    display: flex;
    font-size: 14px;
    align-items: center;
    transition: all .5s ease;
    opacity: 1;
    transform: translateX(-50%)
}

.ui-message .icon {
    font-size: 16px;
    margin-right: 10px
}

.ui-message.success .icon {
    color: #43c665
}

.ui-message.warning .icon {
    color: #f49b42
}

.ui-message.error .icon {
    color: #f34447
}

.ui-message.fade-enter-from, .ui-message.fade-leave-to {
    opacity: 0;
    transform: translateX(-50%) translateY(-100%)
}

.bubble {
    --arrow-width: 45px;
    --arrow-height: 32px;
    --back-color: rgba(27, 27, 28, .8);
    --border-color-fill: 0, 0, 0;
    --border-color: rgb(var(--border-color-fill));
    --radius: 8px;
    --padding: 20px 20px;
    --bottom-left: 40px;
    position: absolute;
    z-index: 9;
    transition: transform .3s ease, opacity .3s ease
}

.bubble > .bubble-layer {
    position: relative;
    padding: var(--padding);
    min-width: calc(var(--arrow-width) * 3);
    min-height: calc(var(--arrow-height) * 3);
    background: var(--back-color);
    box-shadow: 0 0 10px 0 rgba(var(--border-color-fill), .3);
    border-radius: var(--radius)
}

.bubble > .bubble-layer > .bubble-arr {
    position: absolute;
    display: block;
    pointer-events: none;
    margin-left: 1px;
    z-index: 99;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-width: calc(var(--arrow-width) / 2)
}

.bubble.left, .bubble.left:after, .bubble.right, .bubble.right:after {
    top: 50%;
    transform: translateY(calc(-50% + .5px))
}

.bubble.left:after, .bubble.right:after {
    content: "";
    position: absolute;
    z-index: 1;
    width: calc(var(--arrow-width) / 1.4);
    height: calc(var(--arrow-width) / 1.3)
}

.bubble.left > .bubble-layer > .bubble-arr, .bubble.right > .bubble-layer > .bubble-arr {
    top: 50%;
    transform: translateY(calc(-50% + .5px));
    border-width: calc(var(--arrow-width) / 3)
}

.bubble.left.fade-enter-active, .bubble.left.fade-leave-active, .bubble.right.fade-enter-active, .bubble.right.fade-leave-active {
    transform: translateY(calc(-50% + .5px)) scale(1);
    opacity: 1
}

.bubble.left.fade-enter-from, .bubble.left.fade-leave-to, .bubble.right.fade-enter-from, .bubble.right.fade-leave-to {
    transform: translateY(calc(-50% + .5px)) scale(0);
    opacity: 0
}

.bubble.left {
    transform-origin: center right;
    margin-right: var(--arrow-width);
    right: 50%
}

.bubble.left:after {
    left: 100%
}

.bubble.left > .bubble-layer > .bubble-arr {
    left: calc(100% - 1px);
    right: calc(var(--arrow-width) * -1 * 1.1);
    border-left-color: var(--back-color);
    border-left-width: calc(var(--arrow-width) / 1.3)
}

.bubble.right {
    transform-origin: center left;
    margin-left: var(--arrow-width);
    left: 50%
}

.bubble.right:after {
    right: 100%
}

.bubble.right > .bubble-layer > .bubble-arr {
    right: 100%;
    left: calc(var(--arrow-width) * -1 * 1.1);
    border-right-color: var(--back-color);
    border-right-width: calc(var(--arrow-width) / 1.3)
}

.bubble.bottom.fade-enter-active, .bubble.bottom.fade-leave-active, .bubble.top.fade-enter-active, .bubble.top.fade-leave-active {
    transform: scale(1);
    opacity: 1
}

.bubble.bottom.fade-enter-from, .bubble.bottom.fade-leave-to, .bubble.top.fade-enter-from, .bubble.top.fade-leave-to {
    transform: scale(0);
    opacity: 0
}

.bubble.bottom {
    top: 100%;
    left: calc(50% - var(--bottom-left));
    padding-top: var(--arrow-width);
    transform-origin: var(--bottom-left) top
}

.bubble.bottom > .bubble-layer > .bubble-arr {
    border-width: calc(var(--arrow-width) / 3);
    border-bottom-width: calc(var(--arrow-width) / 1.3);
    border-bottom-color: var(--back-color);
    left: 0;
    top: calc(var(--arrow-width) * -1);
    bottom: 100%;
    transform: translateX(calc(-50% + .5px));
    margin-left: var(--bottom-left)
}

.bubble.top {
    bottom: 100%;
    left: calc(50% - var(--bottom-left));
    padding-bottom: var(--arrow-width);
    transform-origin: var(--bottom-left) bottom
}

.bubble.top > .bubble-layer > .bubble-arr {
    border-width: calc(var(--arrow-width) / 3);
    border-top-width: calc(var(--arrow-width) / 1.3);
    border-top-color: var(--back-color);
    left: 0;
    top: 100%;
    transform: translateX(calc(-50% + .5px));
    margin-left: var(--bottom-left)
}

.guide {
    position: relative
}

.guide:not(.floating-mode).top {
    transform: translateY(-100%)
}

.guide:not(.floating-mode) .bubble {
    --arrow-width: 14px;
    --arrow-height: 10px;
    --padding: 10px;
    --bottom-left: 20px
}

.guide:not(.floating-mode) .bubble .bubble-layer {
    min-height: auto;
    min-width: auto;
    padding-right: 30px
}

.guide:not(.floating-mode) .bubble .bubble-layer .guide-close {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 12px
}

.guide:not(.floating-mode) .guide-bubble .default-msg {
    white-space: nowrap
}

.guide-floating {
    color: #fff;
    font-size: 14px
}

.guide-floating.top {
    transform: translateY(-100%)
}

.guide-floating .bubble {
    --arrow-width: 14px;
    --arrow-height: 10px;
    --padding: 10px;
    --bottom-left: 20px;
    position: static
}

.guide-floating .bubble .bubble-layer {
    min-height: auto;
    min-width: auto;
    padding-right: 30px
}

.guide-floating .bubble .bubble-layer .guide-close {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 12px
}

.guide-floating .guide-bubble .default-msg {
    white-space: nowrap
}

.ui-editor-layout {
    width: 100%;
    height: 100%;
    position: relative;
    color: #fff;
    font-size: 14px
}

.ui-editor-head {
    filter: var(--editor-head-filter);
    height: var(--editor-head-height);
    background-color: var(--editor-head-back);
    position: absolute;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    left: 0;
    top: 0;
    width: 100%;
    z-index: 4001
}

.ui-editor-head:after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    line-height: 0;
    border-top: 1px solid hsla(0, 0%, 100%, .16);
    border-bottom: 1px solid #000
}

.ui-editor-menu {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: var(--editor-menu-width);
    filter: var(--editor-menu-filter);
    background-color: var(--editor-menu-back);
    position: fixed;
    left: var(--editor-menu-left);
    top: var(--editor-head-height);
    bottom: 0;
    z-index: 2000;
    overflow: hidden;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px)
}

.ui-editor-menu > div {
    height: 100%;
    width: 100%;
    overflow: visible
}

.ui-editor-menu .ui-editor-menu-item {
    width: var(--editor-menu-width);
    height: var(--editor-menu-width)
}

.ui-editor-menu:after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    right: 0;
    border-left: 1px solid hsla(0, 0%, 100%, .16);
    border-right: 1px solid #000
}

.ui-editor-main {
    filter: var(--editor-menu-filter);
    position: fixed;
    top: var(--editor-head-height);
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 4000
}

[is-mobile] .ui-editor-main {
    top: 0
}

.ui-editor-view {
    display: flex;
    flex: 1;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 14px;
    align-items: flex-end;
    justify-content: flex-end;
    overflow: hidden
}

.ui-editor-toolbox {
    position: absolute;
    z-index: 1;
    right: var(--editor-menu-right);
    padding: var(--editor-toolbox-padding);
    width: var(--editor-toolbox-width);
    bottom: 0;
    pointer-events: all;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--editor-toolbox-back);
    top: var(--editor-toolbox-top);
    transition: right .3s ease;
    filter: var(--editor-head-filter);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px)
}

.ui-editor-toolbox li, .ui-editor-toolbox ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.ui-editor-toolbox:after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    border-right: 1px solid hsla(0, 0%, 100%, .16);
    border-left: 1px solid #000
}

.ui-editor-toolbar {
    position: absolute;
    bottom: 0;
    right: calc(var(--editor-toolbox-width) + var(--editor-menu-right));
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: var(--editor-toolbar-height);
    background-color: var(--editor-menu-back);
    pointer-events: all;
    left: var(--editor-toolbox-left);
    z-index: 1;
    transition: all .3s ease
}

.ui-editor-toolbar.full {
    right: 0
}

.ui-editor-toolbar.full, .ui-editor-toolbar.full-left {
    left: calc(0 - var(--editor-menu-width)) !important
}

.ui-editor-toolbar.full-right {
    right: 0
}

:root {
    --editor-main-color: #00c8af;
    --editor-font-color: #999;
    --editor-toolbox-top: 0;
    --editor-toolbox-left: 0;
    --editor-toolbox-width: 240px;
    --editor-toolbox-padding: 0 10px;
    --editor-menu-active: rgba(0, 200, 175, .16);
    --colors-primary-base: var(--editor-main-color);
    --colors-primary-click: #005046
}

::-webkit-scrollbar {
    width: 4px;
    height: 1px
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
    background: #ccc
}

::-webkit-scrollbar-thumb:hover {
    background: #999
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
    border-radius: 4px;
    background: #000
}

li, ul {
    margin: 0;
    padding: 0;
    list-style: none
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body, html {
    margin: 0;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

#app, body, html {
    width: 100vw;
    height: 100vh;
    overflow: hidden
}

#app {
    color: #fff;
    background-color: #232323
}

.disable * {
    opacity: .85;
    pointer-events: none
}

.enable, .enable * {
    opacity: 1 !important;
    pointer-events: all !important
}

.hidden {
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1
}

.scene {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 1
}

.slide-right-enter-active, .slide-right-leave-active {
    will-change: transform;
    transition: all .2s ease-in-out
}

.slide-right-enter-from {
    opacity: 0;
    transform: translate3d(100%, 0, 0)
}

.slide-right-leave-active {
    opacity: 0
}

.slide-left-enter-active, .slide-left-leave-active {
    will-change: transform;
    transition: all .2s ease-in-out
}

.slide-left-enter-from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0)
}

.slide-left-enter {
    opacity: 1;
    transform: translate3d(100%, 0, 0)
}

.slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0)
}

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

.fade-enter-to, .fade-leave {
    opacity: 1
}

.fade-enter-active, .fade-leave-active {
    transition: all 3s
}

.slide-right-enter {
    opacity: 1;
    transform: translate3d(-100%, 0, 0)
}

.slide-right-leave-active {
    opacity: 1;
    transform: translate3d(100%, 0, 0)
}

.ui-view-layout {
    width: 100%;
    height: 100%;
    visibility: hidden
}

.ui-view-layout.show {
    visibility: visible
}

input[type=password]::-ms-reveal {
    display: none
}

.ui-editor-toolbox .edit-list li {
    margin-top: 20px;
    color: var(--editor-font-color);
    border-bottom: 1px solid hsla(0, 0%, 100%, .16)
}

.ui-editor-toolbox .edit-list li:last-child {
    border-bottom: none
}

.ui-editor-toolbox .edit-list li > div {
    margin-bottom: 14px
}

.ui-editor-toolbox .edit-list li label {
    color: #fff
}

.ui-editor-toolbox .edit-list li label i {
    cursor: pointer
}

.ui-editor-toolbox .edit-list li .title {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.ui-editor-toolbox .edit-list li .title span {
    font-weight: 700;
    font-size: 16px
}

.ui-editor-toolbox .edit-list li .between {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.ql-editor {
    padding: 0
}

a {
    color: #00c8af
}

[xui_min_map] {
    top: 20px !important;
    right: 20px !important
}

.slider-box {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--editor-toolbox-width);
    height: 100%;
    background: #141414;
    z-index: 1
}

.slider-box .slider-content {
    color: hsla(0, 0%, 100%, .6)
}

.slider-box .slider-content .content-item {
    padding: 20px 10px;
    border-bottom: 1px solid hsla(0, 0%, 100%, .16);
    box-sizing: border-box
}

.slider-box .slider-content .content-item:last-of-type {
    border-bottom: 1px solid transparent
}

.slider-box .slider-content .item-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 14px
}

.slider-box .slider-content .item-title, .slider-box .slider-title {
    color: #999;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.slider-box .slider-title {
    height: 64px;
    border-bottom: 1px solid hsla(0, 0%, 100%, .16);
    padding: 20px 10px;
    box-sizing: border-box
}

.slider-box .slider-title span {
    font-size: 18px;
    color: #999;
    font-weight: 700
}

.slider-box .slider-title i {
    cursor: pointer
}

[xui_min_map] .button-switch > .iconfont {
    transform: rotate(180deg) scale(.7)
}

[xui_min_map] {
    width: 100px;
    height: 100px;
    top: 2.3rem !important;
    right: 15px !important;
    background-color: rgba(0, 0, 0, .2) !important;
    border-radius: 4px 4px 0 0 !important;
    border-top-left-radius: 0 !important;
    transition: all .3s
}

[xui_min_map].collapse {
    transform: translateX(calc(100% + 15px))
}

[xui_min_map].collapse .button-switch > .iconfont {
    font-size: 12px;
    transform: rotate(180deg) scale(.7)
}

[xui_min_map] .button-switch {
    position: absolute;
    top: 0;
    left: -20px;
    background-color: rgba(0, 0, 0, .2);
    height: 32px;
    width: 20px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: rotate .3s
}

[xui_min_map] .button-switch > .iconfont {
    font-size: 12px;
    transform: scale(.7)
}

[xui_min_map] .button-dollhouse {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 30px;
    font-size: 12px;
    background-color: rgba(0, 0, 0, .2) !important;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #eee;
    border-radius: 0 0 4px 4px
}

[xui_min_map] .button-dollhouse > .iconfont {
    font-size: 14px;
    margin-right: .0667rem
}

[is-mobile] [xui_min_map] {
    width: 100px;
    height: 100px;
    top: 2.3rem !important;
    right: 15px !important;
    background-color: rgba(0, 0, 0, .2) !important;
    border-radius: 4px 4px 0 0 !important;
    border-top-left-radius: 0 !important;
    transition: all .3s
}

[is-mobile] [xui_min_map].app {
    top: 2.9rem !important
}

[is-mobile] [xui_min_map].collapse {
    transform: translateX(calc(100% + 15px))
}

[is-mobile] [xui_min_map].collapse .button-switch > .iconfont {
    font-size: 12px;
    transform: rotate(180deg) scale(.7)
}

[is-mobile] [xui_min_map] .button-switch {
    position: absolute;
    top: 0;
    left: -20px;
    background-color: rgba(0, 0, 0, .2);
    height: 32px;
    width: 20px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: rotate .3s
}

[is-mobile] [xui_min_map] .button-switch > .iconfont {
    font-size: 12px;
    transform: scale(.7)
}

[is-mobile] [xui_min_map] .button-dollhouse {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 30px;
    font-size: 12px;
    background-color: rgba(0, 0, 0, .2) !important;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #eee;
    border-radius: 0 0 4px 4px
}

[is-mobile] [xui_min_map] .button-dollhouse > .iconfont {
    font-size: 14px;
    margin-right: .0667rem
}

[is-mobile] .ui-dialog .ui-dialog__box {
    min-width: 100px;
    width: 90%
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.animated.faster {
    -webkit-animation-duration: .5s;
    animation-duration: .5s
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown
}

.tab-layer {
    width: 100%;
    text-align: center;
    z-index: 10;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 2.3rem;
    pointer-events: none
}

.tab-layer, .tabs {
    display: flex;
    justify-content: center;
    align-items: center
}

.tabs {
    pointer-events: auto;
    position: relative;
    background: #222;
    border-radius: 6px;
    padding: 2px;
    border: 1px solid hsla(0, 0%, 100%, .1);
    box-shadow: inset 0 0 6px 0 rgba(0, 0, 0, .5)
}

.tabs .background {
    position: absolute;
    left: 2px;
    top: 2px;
    bottom: 2px;
    width: 50%;
    border-radius: 4px;
    background: #444;
    box-shadow: 2px 0 4px 0 rgba(0, 0, 0, .3);
    z-index: 0;
    transition: left .3s
}

.tabs span {
    flex: 1;
    color: #fff;
    opacity: .5;
    border-radius: 6px;
    height: .91737rem;
    font-size: .35842rem;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
    z-index: 1
}

.tabs span i {
    font-size: .47368rem;
    margin-right: 4px;
    pointer-events: none
}

.tabs span.active {
    opacity: 1
}

@media (orientation: landscape) {
    .tab-layer {
        top: 1.2rem
    }

    .tab-layer .tabs {
        height: .7rem
    }

    .tab-layer .tabs > span {
        height: .7rem;
        font-size: .25rem
    }
}

:root {
    --main-color: #00c8af;
    --font-color: #999
}

[x-cloak] {
    display: none !important
}

*, ::before, ::after {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important
}

.kankan-app {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #292929
}

.kankan-app .player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden
}

.kankan-app .player[name='copy'] {
    display: none
}

.kankan-app .player-mark {
    display: none;
    cursor: grab;
    position: absolute;
    left: calc(50% - 56px);
    top: calc(50% - 56px);
    z-index: 999;
    width: 102px;
    height: 102px
}

.kankan-app__split .player {
    cursor: crosshair
}

.kankan-app__split .player[name='main'] {
    width: calc(50% - 1px)
}

.kankan-app__split .player[name='copy'] {
    width: calc(50% - 1px);
    display: block;
    left: auto;
    right: 0
}

.kankan-app__split .player-mark {
    display: block
}

.kankan-app__split [xui_tags] div {
    display: none !important
}

.ui-view-layout[is-mobile='true'] .kankan-app__split .player[name='main'] {
    width: 100%;
    height: calc(50% - 1px)
}

.ui-view-layout[is-mobile='true'] .kankan-app__split .player[name='copy'] {
    width: 100%;
    height: calc(50% - 1px);
    display: block;
    top: 50%;
    left: auto;
    right: 0
}

.kankan-app__slide-right {
    will-change: transform;
    transition: all 0.2s ease-in-out
}

.kankan-app__slide-right-enter {
    opacity: 1;
    transform: translate3d(0, 0, 0)
}

.kankan-app__slide-right-leave {
    opacity: 0;
    transform: translate3d(100%, 0, 0)
}

.kankan-plugins input {
    padding: 0 5px;
    width: 100%;
    height: 34px;
    background: rgba(255, 255, 255, .1);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, .2);
    outline: none;
    color: #fff
}

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

.kankan-plugins button {
    cursor: pointer;
    width: 100%;
    height: 34px;
    outline: none;
    border-radius: 4px;
    font-size: 14px;
    background: none !important;
    transition: all 0.3s ease;
    color: var(--main-color);
    border: 1px solid var(--main-color)
}

.kankan-app_combox {
    cursor: pointer;
    position: relative;
    background: #323233;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, .2);
    outline: none;
    color: #fff;
    height: 34px;
    width: 100%
}

.kankan-app_combox .inner-icon {
    cursor: pointer;
    font-size: 12px;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--font-color)
}

.kankan-app_combox .inner-text {
    display: flex;
    align-items: center;
    padding: 0 5px;
    height: 100%
}

.kankan-app_combox .inner-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    border: 1px solid rgba(255, 255, 255, .2);
    background: #323233;
    z-index: 1000
}

.kankan-app_combox .inner-list > div {
    height: 34px;
    display: flex;
    align-items: center;
    padding: 0 5px
}

.kankan-app_combox .inner-list > div:hover {
    color: var(--main-color)
}

#compass {
    display: none;
    position: absolute;
    width: 90px;
    height: 90px;
    pointer-events: none
}

#compass .north {
    color: #02a0e9;
    top: 0
}

#compass .south {
    color: #ff1414;
    bottom: 0
}

#compass .dirText {
    text-align: center;
    font-size: 10px;
    position: absolute;
    line-height: 25px;
    color: rgb(255, 255, 255);
    top: 50%;
    left: 50%;
    width: 45%;
    height: 0;
    transform-origin: left center
}

#compass #dirTextX {
    color: rgb(255, 0, 0)
}

#compass #dirTextY {
    color: rgb(0, 255, 0)
}

#compass #dirTextZ {
    color: rgb(0, 0, 255)
}

#compass .dirText span {
    display: block;
    position: absolute;
    right: 5px;
    top: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
    margin-top: -10px
}

#compass .center {
    width: 50px;
    height: 50px;
    background-size: contain;
    background-position: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute
}

#compass .center canvas {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-color: transparent
}

.widgets-doll-labels a, .widgets-plan-labels a, .widgets-doors a {
    color: #fff;
    font-size: 14px;
    line-height: normal;
    font-family: 'Noto Sans JP', sans-serif;
    user-select: none
}

.widgets-doll-labels .room-label {
    position: absolute;
    width: 0;
    height: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: room-label 0.3s ease 0.1s;
    animation: room-label 0.3s ease 0.1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    cursor: pointer
}

.widgets-doll-labels .room-label:not(.noLine):after {
    content: "";
    display: block;
    position: absolute;
    width: 4px;
    height: 68px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABQCAYAAADYxx/bAAAASElEQVQYlY2QwQoAIAhDR///x6Z2CCaGSpfHNoegcHdfAGwBCKVUMdAMK7IKm2Wh2oSOdkaUhVbG3u++x7aqPbX9lWVEdn9/AGvVUp4wTpLmAAAAAElFTkSuQmCC);
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

.widgets-doll-labels .room-label a {
    display: block;
    position: absolute;
    line-height: 22px;
    top: -66px;
    transform: translate(-50%, -100%);
    text-align: center;
    white-space: nowrap;
    font-size: 12px;
    font-style: normal;
    pointer-events: auto;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background: rgba(210, 210, 210, .7);
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 3px;
    text-shadow: 0 1px 3px rgb(0, 0, 0, .5)
}

.widgets-doll-labels .room-label a::before {
    content: "";
    position: absolute;
    left: -1px;
    top: -1px;
    width: 10px;
    height: 10px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT5tYXBfY29ybmVyICA8L3RpdGxlPgogICAgPGcgaWQ9Iumhtemdoi0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMyIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i5bGV56S655WM6Z2iLeS4iee7tCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU2LjAwMDAwMCwgLTI3MC4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8ZyBpZD0i57yW57uELTE1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMS4wMDAwMDAsIDI3MC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSLlvaLnirbnu5PlkIgtKy3lvaLnirbnu5PlkIgt6JKZ54mIIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNS4wMDAwMDAsIDAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTYsNiBMNSw2IEw1LDIuNzA1IEwzLjMwMSwxIEwwLDEgTDAsMCBMMy43MTUyMjY0MSwwIEw2LDIuMjkzNDQ3OTUgTDYsNiBaIiBpZD0ibWFwX2Nvcm5lci0tIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjAwMDAwMCwgMy4wMDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTMuMDAwMDAwLCAtMy4wMDAwMDApICI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=);
    background-repeat: no-repeat;
    background-position: top left
}

.widgets-doll-labels .room-label a::after {
    content: "";
    position: absolute;
    left: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT5tYXBfY29ybmVyICA8L3RpdGxlPgogICAgPGcgaWQ9Iumhtemdoi0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMyIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i5bGV56S655WM6Z2iLeS4iee7tCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU2LjAwMDAwMCwgLTI3MC4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8ZyBpZD0i57yW57uELTE1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMS4wMDAwMDAsIDI3MC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSLlvaLnirbnu5PlkIgtKy3lvaLnirbnu5PlkIgt6JKZ54mIIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNS4wMDAwMDAsIDAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTYsNiBMNSw2IEw1LDIuNzA1IEwzLjMwMSwxIEwwLDEgTDAsMCBMMy43MTUyMjY0MSwwIEw2LDIuMjkzNDQ3OTUgTDYsNiBaIiBpZD0ibWFwX2Nvcm5lci0tIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjAwMDAwMCwgMy4wMDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTMuMDAwMDAwLCAtMy4wMDAwMDApICI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=);
    background-repeat: no-repeat;
    background-position: top left;
    transform: rotate(270deg)
}

.widgets-doll-labels .room-label a > p {
    margin: 0;
    padding: 2px 10px;
    height: 100%;
    line-height: 1.5
}

.widgets-doll-labels .room-label a > p::before {
    content: "";
    position: absolute;
    right: -1px;
    top: -1px;
    width: 10px;
    height: 10px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT5tYXBfY29ybmVyICA8L3RpdGxlPgogICAgPGcgaWQ9Iumhtemdoi0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMyIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i5bGV56S655WM6Z2iLeS4iee7tCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU2LjAwMDAwMCwgLTI3MC4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8ZyBpZD0i57yW57uELTE1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMS4wMDAwMDAsIDI3MC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSLlvaLnirbnu5PlkIgtKy3lvaLnirbnu5PlkIgt6JKZ54mIIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNS4wMDAwMDAsIDAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTYsNiBMNSw2IEw1LDIuNzA1IEwzLjMwMSwxIEwwLDEgTDAsMCBMMy43MTUyMjY0MSwwIEw2LDIuMjkzNDQ3OTUgTDYsNiBaIiBpZD0ibWFwX2Nvcm5lci0tIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjAwMDAwMCwgMy4wMDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTMuMDAwMDAwLCAtMy4wMDAwMDApICI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=);
    background-repeat: no-repeat;
    background-position: top left;
    transform: rotate(90deg)
}

.widgets-doll-labels .room-label a > p::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT5tYXBfY29ybmVyICA8L3RpdGxlPgogICAgPGcgaWQ9Iumhtemdoi0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMyIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i5bGV56S655WM6Z2iLeS4iee7tCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU2LjAwMDAwMCwgLTI3MC4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8ZyBpZD0i57yW57uELTE1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMS4wMDAwMDAsIDI3MC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSLlvaLnirbnu5PlkIgtKy3lvaLnirbnu5PlkIgt6JKZ54mIIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNS4wMDAwMDAsIDAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTYsNiBMNSw2IEw1LDIuNzA1IEwzLjMwMSwxIEwwLDEgTDAsMCBMMy43MTUyMjY0MSwwIEw2LDIuMjkzNDQ3OTUgTDYsNiBaIiBpZD0ibWFwX2Nvcm5lci0tIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjAwMDAwMCwgMy4wMDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTMuMDAwMDAwLCAtMy4wMDAwMDApICI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=);
    background-repeat: no-repeat;
    background-position: top left;
    transform: rotate(180deg)
}

.widgets-doll-labels .room-label.noLine a {
    top: 16px
}

.widgets-doll-labels .room-label a span {
    white-space: nowrap;
    user-select: none
}

.widgets-doll-labels .room-label.with-entrance:after {
    display: none
}

.widgets-doll-labels .room-label.with-entrance a {
    top: 50%;
    width: 38.5px;
    height: 15.75px;
    background-size: 38.5px 15.75px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.widgets-doll-labels .room-label.with-entrance a span {
    margin-left: -.875px;
    margin-top: -.875px
}

.widgets-plan-labels .room-label {
    position: absolute;
    -webkit-animation: room-label 0.3s ease 0.1s;
    animation: room-label 0.3s ease 0.1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.widgets-plan-labels .room-label a {
    display: block;
    position: absolute;
    line-height: 24px;
    -webkit-transform: translate(-50%);
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
    font-size: 14px;
    font-style: normal
}

.widgets-doors {
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.widgets-doors[data-camera-toward=right] .door.show-arrow.right a:before, .widgets-doors[data-camera-toward=forward] .door.show-arrow.right a:before {
    margin-right: 3.5px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.widgets-doors[data-camera-toward=right] .door.show-arrow.right a:before, .widgets-doors[data-camera-toward=forward] .door.show-arrow.forward a:before, .widgets-doors[data-camera-toward=forward] .door.show-arrow.left a:after, .widgets-doors[data-camera-toward=forward] .door.show-arrow.right a:before {
    content: "";
    position: relative;
    display: inline-block;
    width: 10.5px;
    height: 10.5px;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDE0IDEwIj4KICA8ZyBpZD0iaW1nX2Fycm93IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNzIxIC01OTMpIj4KICAgIDxwYXRoIGlkPSLot6/lvoRfMTQ0NSIgZGF0YS1uYW1lPSLot6/lvoQgMTQ0NSIgZD0iTTUyNS41OCw1MTAuNzczbC00LjczOC00LjU4OGEuNjIyLjYyMiwwLDAsMC0uNDM0LS4xNzNINTE3LjdhLjYyNS42MjUsMCwwLDEsLjQzNS4xNzNsNC43MzgsNC41ODhhLjM3LjM3LDAsMCwxLDAsLjU0bC00LjczOSw0LjUzMmEuNjIxLjYyMSwwLDAsMS0uNDMyLjE2N2gyLjcxMWEuNjIxLjYyMSwwLDAsMCwuNDMxLS4xNjdsNC43MzktNC41MzJBLjM3LjM3LDAsMCwwLDUyNS41OCw1MTAuNzczWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjA5LjMwMyA4Ni45ODkpIiBmaWxsPSIjZmZmIi8+CiAgICA8cGF0aCBpZD0i6Lev5b6EXzE0NDYiIGRhdGEtbmFtZT0i6Lev5b6EIDE0NDYiIGQ9Ik01MjUuNTgsNTEwLjc3M2wtNC43MzgtNC41ODhhLjYyMi42MjIsMCwwLDAtLjQzNC0uMTczSDUxNy43YS42MjUuNjI1LDAsMCwxLC40MzUuMTczbDQuNzM4LDQuNTg4YS4zNy4zNywwLDAsMSwwLC41NGwtNC43MzksNC41MzJhLjYyMS42MjEsMCwwLDEtLjQzMi4xNjdoMi43MTFhLjYyMS42MjEsMCwwLDAsLjQzMS0uMTY3bDQuNzM5LTQuNTMyQS4zNy4zNywwLDAsMCw1MjUuNTgsNTEwLjc3M1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwMy4zMDMgODYuOTg5KSIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC41Ii8+CiAgPC9nPgo8L3N2Zz4K) no-repeat 50%;
    background-size: 100% 100%;
    vertical-align: middle
}

.widgets-doors[data-camera-toward="forward"] .door.show-arrow.left a:after {
    margin-left: 4px
}

.widgets-doors[data-camera-toward="forward"] .door.show-arrow.back a:after, .widgets-doors[data-camera-toward="right"] .door.show-arrow.left a:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 10.5px;
    height: 10.5px;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDE0IDEwIj4KICA8ZyBpZD0iaW1nX2Fycm93IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNzIxIC01OTMpIj4KICAgIDxwYXRoIGlkPSLot6/lvoRfMTQ0NSIgZGF0YS1uYW1lPSLot6/lvoQgMTQ0NSIgZD0iTTUyNS41OCw1MTAuNzczbC00LjczOC00LjU4OGEuNjIyLjYyMiwwLDAsMC0uNDM0LS4xNzNINTE3LjdhLjYyNS42MjUsMCwwLDEsLjQzNS4xNzNsNC43MzgsNC41ODhhLjM3LjM3LDAsMCwxLDAsLjU0bC00LjczOSw0LjUzMmEuNjIxLjYyMSwwLDAsMS0uNDMyLjE2N2gyLjcxMWEuNjIxLjYyMSwwLDAsMCwuNDMxLS4xNjdsNC43MzktNC41MzJBLjM3LjM3LDAsMCwwLDUyNS41OCw1MTAuNzczWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjA5LjMwMyA4Ni45ODkpIiBmaWxsPSIjZmZmIi8+CiAgICA8cGF0aCBpZD0i6Lev5b6EXzE0NDYiIGRhdGEtbmFtZT0i6Lev5b6EIDE0NDYiIGQ9Ik01MjUuNTgsNTEwLjc3M2wtNC43MzgtNC41ODhhLjYyMi42MjIsMCwwLDAtLjQzNC0uMTczSDUxNy43YS42MjUuNjI1LDAsMCwxLC40MzUuMTczbDQuNzM4LDQuNTg4YS4zNy4zNywwLDAsMSwwLC41NGwtNC43MzksNC41MzJhLjYyMS42MjEsMCwwLDEtLjQzMi4xNjdoMi43MTFhLjYyMS42MjEsMCwwLDAsLjQzMS0uMTY3bDQuNzM5LTQuNTMyQS4zNy4zNywwLDAsMCw1MjUuNTgsNTEwLjc3M1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwMy4zMDMgODYuOTg5KSIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC41Ii8+CiAgPC9nPgo8L3N2Zz4K) no-repeat 50%;
    background-size: 100% 100%;
    margin-left: 4px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.widgets-doors[data-camera-toward=forward] .door.show-arrow.forward a:before, .widgets-doors[data-camera-toward=right] .door.show-arrow.back a:before {
    margin-right: 3.5px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.widgets-doors[data-camera-toward="right"] .door.show-arrow.back a:before, .widgets-doors[data-camera-toward="right"] .door.show-arrow.forward a:after {
    content: "";
    position: relative;
    display: inline-block;
    width: 10.5px;
    height: 10.5px;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDE0IDEwIj4KICA8ZyBpZD0iaW1nX2Fycm93IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNzIxIC01OTMpIj4KICAgIDxwYXRoIGlkPSLot6/lvoRfMTQ0NSIgZGF0YS1uYW1lPSLot6/lvoQgMTQ0NSIgZD0iTTUyNS41OCw1MTAuNzczbC00LjczOC00LjU4OGEuNjIyLjYyMiwwLDAsMC0uNDM0LS4xNzNINTE3LjdhLjYyNS42MjUsMCwwLDEsLjQzNS4xNzNsNC43MzgsNC41ODhhLjM3LjM3LDAsMCwxLDAsLjU0bC00LjczOSw0LjUzMmEuNjIxLjYyMSwwLDAsMS0uNDMyLjE2N2gyLjcxMWEuNjIxLjYyMSwwLDAsMCwuNDMxLS4xNjdsNC43MzktNC41MzJBLjM3LjM3LDAsMCwwLDUyNS41OCw1MTAuNzczWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjA5LjMwMyA4Ni45ODkpIiBmaWxsPSIjZmZmIi8+CiAgICA8cGF0aCBpZD0i6Lev5b6EXzE0NDYiIGRhdGEtbmFtZT0i6Lev5b6EIDE0NDYiIGQ9Ik01MjUuNTgsNTEwLjc3M2wtNC43MzgtNC41ODhhLjYyMi42MjIsMCwwLDAtLjQzNC0uMTczSDUxNy43YS42MjUuNjI1LDAsMCwxLC40MzUuMTczbDQuNzM4LDQuNTg4YS4zNy4zNywwLDAsMSwwLC41NGwtNC43MzksNC41MzJhLjYyMS42MjEsMCwwLDEtLjQzMi4xNjdoMi43MTFhLjYyMS42MjEsMCwwLDAsLjQzMS0uMTY3bDQuNzM5LTQuNTMyQS4zNy4zNywwLDAsMCw1MjUuNTgsNTEwLjc3M1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwMy4zMDMgODYuOTg5KSIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC41Ii8+CiAgPC9nPgo8L3N2Zz4K) no-repeat 50%;
    background-size: 100% 100%;
    vertical-align: middle
}

.widgets-doors[data-camera-toward="right"] .door.show-arrow.forward a:after {
    margin-left: 4px
}

.widgets-doors[data-camera-toward="left"] .door.show-arrow.right a:after {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.widgets-doors[data-camera-toward=back] .door.show-arrow.back a:after, .widgets-doors[data-camera-toward=left] .door.show-arrow.left a:after, .widgets-doors[data-camera-toward=left] .door.show-arrow.back a:after, .widgets-doors[data-camera-toward=left] .door.show-arrow.right a:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 10.5px;
    height: 10.5px;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDE0IDEwIj4KICA8ZyBpZD0iaW1nX2Fycm93IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNzIxIC01OTMpIj4KICAgIDxwYXRoIGlkPSLot6/lvoRfMTQ0NSIgZGF0YS1uYW1lPSLot6/lvoQgMTQ0NSIgZD0iTTUyNS41OCw1MTAuNzczbC00LjczOC00LjU4OGEuNjIyLjYyMiwwLDAsMC0uNDM0LS4xNzNINTE3LjdhLjYyNS42MjUsMCwwLDEsLjQzNS4xNzNsNC43MzgsNC41ODhhLjM3LjM3LDAsMCwxLDAsLjU0bC00LjczOSw0LjUzMmEuNjIxLjYyMSwwLDAsMS0uNDMyLjE2N2gyLjcxMWEuNjIxLjYyMSwwLDAsMCwuNDMxLS4xNjdsNC43MzktNC41MzJBLjM3LjM3LDAsMCwwLDUyNS41OCw1MTAuNzczWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjA5LjMwMyA4Ni45ODkpIiBmaWxsPSIjZmZmIi8+CiAgICA8cGF0aCBpZD0i6Lev5b6EXzE0NDYiIGRhdGEtbmFtZT0i6Lev5b6EIDE0NDYiIGQ9Ik01MjUuNTgsNTEwLjc3M2wtNC43MzgtNC41ODhhLjYyMi42MjIsMCwwLDAtLjQzNC0uMTczSDUxNy43YS42MjUuNjI1LDAsMCwxLC40MzUuMTczbDQuNzM4LDQuNTg4YS4zNy4zNywwLDAsMSwwLC41NGwtNC43MzksNC41MzJhLjYyMS42MjEsMCwwLDEtLjQzMi4xNjdoMi43MTFhLjYyMS42MjEsMCwwLDAsLjQzMS0uMTY3bDQuNzM5LTQuNTMyQS4zNy4zNywwLDAsMCw1MjUuNTgsNTEwLjc3M1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwMy4zMDMgODYuOTg5KSIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC41Ii8+CiAgPC9nPgo8L3N2Zz4K) no-repeat 50%;
    background-size: 100% 100%;
    margin-left: 4px
}

.widgets-doors[data-camera-toward="left"] .door.show-arrow.back a:after {
    position: relative
}

.widgets-doors[data-camera-toward="left"] .door.show-arrow.forward a:before {
    position: relative;
    margin-right: 3.5px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.widgets-doors[data-camera-toward="back"] .door.show-arrow.forward a:after, .widgets-doors[data-camera-toward="left"] .door.show-arrow.forward a:before {
    content: "";
    display: inline-block;
    width: 10.5px;
    height: 10.5px;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDE0IDEwIj4KICA8ZyBpZD0iaW1nX2Fycm93IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNzIxIC01OTMpIj4KICAgIDxwYXRoIGlkPSLot6/lvoRfMTQ0NSIgZGF0YS1uYW1lPSLot6/lvoQgMTQ0NSIgZD0iTTUyNS41OCw1MTAuNzczbC00LjczOC00LjU4OGEuNjIyLjYyMiwwLDAsMC0uNDM0LS4xNzNINTE3LjdhLjYyNS42MjUsMCwwLDEsLjQzNS4xNzNsNC43MzgsNC41ODhhLjM3LjM3LDAsMCwxLDAsLjU0bC00LjczOSw0LjUzMmEuNjIxLjYyMSwwLDAsMS0uNDMyLjE2N2gyLjcxMWEuNjIxLjYyMSwwLDAsMCwuNDMxLS4xNjdsNC43MzktNC41MzJBLjM3LjM3LDAsMCwwLDUyNS41OCw1MTAuNzczWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjA5LjMwMyA4Ni45ODkpIiBmaWxsPSIjZmZmIi8+CiAgICA8cGF0aCBpZD0i6Lev5b6EXzE0NDYiIGRhdGEtbmFtZT0i6Lev5b6EIDE0NDYiIGQ9Ik01MjUuNTgsNTEwLjc3M2wtNC43MzgtNC41ODhhLjYyMi42MjIsMCwwLDAtLjQzNC0uMTczSDUxNy43YS42MjUuNjI1LDAsMCwxLC40MzUuMTczbDQuNzM4LDQuNTg4YS4zNy4zNywwLDAsMSwwLC41NGwtNC43MzksNC41MzJhLjYyMS42MjEsMCwwLDEtLjQzMi4xNjdoMi43MTFhLjYyMS42MjEsMCwwLDAsLjQzMS0uMTY3bDQuNzM5LTQuNTMyQS4zNy4zNywwLDAsMCw1MjUuNTgsNTEwLjc3M1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwMy4zMDMgODYuOTg5KSIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC41Ii8+CiAgPC9nPgo8L3N2Zz4K) no-repeat 50%;
    background-size: 100% 100%;
    vertical-align: middle
}

.widgets-doors[data-camera-toward="back"] .door.show-arrow.forward a:after {
    margin-left: 4px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.widgets-doors[data-camera-toward="back"] .door.show-arrow.right a:after {
    margin-left: 4px
}

.widgets-doors[data-camera-toward="back"] .door.show-arrow.left a:before, .widgets-doors[data-camera-toward="back"] .door.show-arrow.right a:after {
    content: "";
    position: relative;
    display: inline-block;
    width: 10.5px;
    height: 10.5px;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDE0IDEwIj4KICA8ZyBpZD0iaW1nX2Fycm93IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNzIxIC01OTMpIj4KICAgIDxwYXRoIGlkPSLot6/lvoRfMTQ0NSIgZGF0YS1uYW1lPSLot6/lvoQgMTQ0NSIgZD0iTTUyNS41OCw1MTAuNzczbC00LjczOC00LjU4OGEuNjIyLjYyMiwwLDAsMC0uNDM0LS4xNzNINTE3LjdhLjYyNS42MjUsMCwwLDEsLjQzNS4xNzNsNC43MzgsNC41ODhhLjM3LjM3LDAsMCwxLDAsLjU0bC00LjczOSw0LjUzMmEuNjIxLjYyMSwwLDAsMS0uNDMyLjE2N2gyLjcxMWEuNjIxLjYyMSwwLDAsMCwuNDMxLS4xNjdsNC43MzktNC41MzJBLjM3LjM3LDAsMCwwLDUyNS41OCw1MTAuNzczWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjA5LjMwMyA4Ni45ODkpIiBmaWxsPSIjZmZmIi8+CiAgICA8cGF0aCBpZD0i6Lev5b6EXzE0NDYiIGRhdGEtbmFtZT0i6Lev5b6EIDE0NDYiIGQ9Ik01MjUuNTgsNTEwLjc3M2wtNC43MzgtNC41ODhhLjYyMi42MjIsMCwwLDAtLjQzNC0uMTczSDUxNy43YS42MjUuNjI1LDAsMCwxLC40MzUuMTczbDQuNzM4LDQuNTg4YS4zNy4zNywwLDAsMSwwLC41NGwtNC43MzksNC41MzJhLjYyMS42MjEsMCwwLDEtLjQzMi4xNjdoMi43MTFhLjYyMS42MjEsMCwwLDAsLjQzMS0uMTY3bDQuNzM5LTQuNTMyQS4zNy4zNywwLDAsMCw1MjUuNTgsNTEwLjc3M1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwMy4zMDMgODYuOTg5KSIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC41Ii8+CiAgPC9nPgo8L3N2Zz4K) no-repeat 50%;
    background-size: 100% 100%;
    vertical-align: middle
}

.widgets-doors[data-camera-toward="back"] .door.show-arrow.left a:before {
    margin-right: 3.5px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.widgets-doors .door {
    position: absolute;
    width: 0;
    height: 0;
    -webkit-animation: viewport-door-label 0.3s ease 1s;
    animation: viewport-door-label 0.3s ease 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    cursor: pointer
}

.widgets-doors .door a {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 1.75px;
    background: rgba(0, 0, 0, .5);
    line-height: 14px;
    padding: 8px 8px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 14px;
    font-style: normal;
    pointer-events: auto;
    -webkit-transition: background 0.3s ease, color 0.3s ease, -webkit-transform 1s ease;
    transition: background 0.3s ease, color 0.3s ease, -webkit-transform 1s ease;
    transition: transform 1s ease, background 0.3s ease, color 0.3s ease;
    transition: transform 1s ease, background 0.3s ease, color 0.3s ease, -webkit-transform 1s ease
}

.widgets-doors .door a:after {
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease
}

.widgets-doors .door a:active {
    background: rgba(0, 0, 0, .5);
    color: hsla(0, 0%, 100%, .5)
}

.widgets-doors .door a:active:after {
    opacity: .5
}

@-webkit-keyframes room-label {
    0% {
        opacity: 0;
        margin-top: 8.75px
    }
    to {
        opacity: 1;
        margin-top: 0
    }
}

@keyframes room-label {
    0% {
        opacity: 0;
        margin-top: 8.75px
    }
    to {
        opacity: 1;
        margin-top: 0
    }
}

@-webkit-keyframes door-label {
    0% {
        opacity: 0;
        margin-top: 8.75px
    }
    to {
        opacity: 1;
        margin-top: 0
    }
}

@keyframes door-label {
    0% {
        opacity: 0;
        margin-top: 8.75px
    }
    to {
        opacity: 1;
        margin-top: 0
    }
}

.widgets-design-option {
    width: 100%;
    height: 100%;
    z-index: 4;
    position: absolute;
    user-select: none;
    overflow: hidden;
    pointer-events: none;
    left: 0;
    top: 0
}

.widgets-design-option i {
    margin: 0 5px
}

.widgets-design-option i:before {
    font-family: "iconfont" !important;
    font-size: 32px;
    line-height: 36px;
    font-style: normal
}

.widgets-design-option li {
    cursor: pointer
}

.widgets-design-option > div {
    height: 36px;
    background: #262729;
    position: absolute;
    transform: translate(-100%, -50%) translateX(-15px);
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
    padding-left: 10px;
    pointer-events: auto;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .4)
}

.widgets-design-option > div:after {
    position: absolute;
    right: -15px;
    top: 0;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 18px 0 18px 15px;
    border-color: transparent transparent transparent #262729
}

.widgets-design-option.right > div {
    transform: translate(15px, -50%);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    padding: 0 10px 0 0
}

.widgets-design-option.right > div:after {
    right: auto;
    left: -15px;
    border-width: 18px 15px 18px 0;
    border-color: transparent #262729 transparent transparent
}

.widgets-design-option .delete-ruler li {
    line-height: 36px;
    padding: 0 10px;
    word-break: keep-all;
    list-style: none
}

.widgets-rulers {
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.widgets-rulers .ruler-line {
    position: absolute;
    -webkit-transform-origin: left .875px;
    transform-origin: left .875px;
    width: 0;
    height: 1.75px
}

.widgets-rulers .ruler-line em {
    background: linear-gradient(90deg, hsla(0, 0%, 100%, .5), hsla(0, 0%, 100%, .3));
    display: block;
    height: 100%;
    -webkit-animation: ruler-line 0.5s ease 1s;
    animation: ruler-line 0.5s ease 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-box-shadow: 0 0 3.5px rgba(0, 0, 0, .6);
    box-shadow: 0 0 3.5px rgba(0, 0, 0, .6)
}

.widgets-rulers .ruler-label {
    position: absolute;
    height: 0;
    top: .875px;
    left: 38%
}

.widgets-rulers .ruler-label .ruler-label-point {
    position: absolute;
    width: 28px;
    height: 11.375px;
    right: 0;
    bottom: 0;
    background-position: bottom;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzRweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgMzQgMTUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ4LjIgKDQ3MzI3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA3PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPGNpcmNsZSBpZD0icGF0aC0xIiBjeD0iMS41IiBjeT0iMS41IiByPSIxLjUiPjwvY2lyY2xlPgogICAgICAgIDxmaWx0ZXIgeD0iLTEwMC4wJSIgeT0iLTEwMC4wJSIgd2lkdGg9IjMwMC4wJSIgaGVpZ2h0PSIzMDAuMCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImZpbHRlci0yIj4KICAgICAgICAgICAgPGZlT2Zmc2V0IGR4PSIwIiBkeT0iMCIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSI+PC9mZU9mZnNldD4KICAgICAgICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMSIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlR2F1c3NpYW5CbHVyPgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAgIDAgMCAwIDAgMCAgIDAgMCAwIDAgMCAgMCAwIDAgMC4yOTkzNjU5NDIgMCIgdHlwZT0ibWF0cml4IiBpbj0ic2hhZG93Qmx1ck91dGVyMSI+PC9mZUNvbG9yTWF0cml4PgogICAgICAgIDwvZmlsdGVyPgogICAgPC9kZWZzPgogICAgPGcgaWQ9IuWbuuWumueKtuaAgS3liqDovb0iIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00MjcuMDAwMDAwLCAtMjY3LjAwMDAwMCkiPgogICAgICAgIDxnIGlkPSJHcm91cC03IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MjkuMDAwMDAwLCAyNjkuMDAwMDAwKSI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zMS41LDEyLjUgTDIxLjUsMS41IiBpZD0iTGluZS1Db3B5LTExIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMC41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD4KICAgICAgICAgICAgPHBhdGggZD0iTTIxLjUsMS41IEwyLjUsMS41IiBpZD0iTGluZS1Db3B5LTEyIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMC41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD4KICAgICAgICAgICAgPGcgaWQ9Ik92YWwtNi1Db3B5LTYiPgogICAgICAgICAgICAgICAgPHVzZSBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIxIiBmaWx0ZXI9InVybCgjZmlsdGVyLTIpIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
    background-size: 28px 11.375px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transform-origin: right center;
    -webkit-animation: ruler-point 0.3s ease 1.3s;
    animation: ruler-point 0.3s ease 1.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.widgets-rulers .ruler-label .ruler-label-name {
    position: absolute;
    height: 15.75px;
    font-size: 12px;
    line-height: 15.75px;
    right: 28px;
    bottom: .875px;
    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: ruler-label 1s ease 1.6s;
    animation: ruler-label 1s ease 1.6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    text-shadow: 0 0 3.5px rgba(0, 0, 0, .6)
}

.widgets-rulers .ruler-label.reverse .ruler-label-point {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

.widgets-rulers .ruler-label.reverse .ruler-label-name {
    right: auto;
    left: 28px
}

.widgets-rulers .measure .ruler-label .ruler-label-name {
    color: #f0ff00
}

.widgets-rulers .ruler-intersection {
    position: absolute;
    width: 0;
    height: 0
}

.widgets-rulers .ruler-intersection .ruler-intersection-point {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 18.375px;
    height: 7px;
    background-repeat: no-repeat;
    background-size: 18.375px 7px;
    background-position: 50%
}

.widgets-rulers .ruler-intersection .ruler-intersection-text {
    position: absolute;
    left: 18.375px;
    bottom: 0;
    font-size: 12px;
    line-height: 12px;
    white-space: nowrap;
    color: #12fffb;
    text-shadow: 0 0 3.5px rgba(0, 0, 0, .3);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scale(.85);
    transform: scale(.85)
}

.measure .ruler-label .ruler-label-name {
    font-size: 14px;
    line-height: 14px
}

.measure .ruler-label {
    position: absolute
}

.measure .ruler-label .ruler-label-point {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMzQgMTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDM0IDE1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6bm9uZTtzdHJva2U6I0YwRkYwMDtzdHJva2Utd2lkdGg6MC41O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDt9Cgkuc3Qxe2ZpbHRlcjp1cmwoI2ZpbHRlci0yKTt9Cgkuc3Qye2ZpbGw6I0YwRkYwMDt9Cjwvc3R5bGU+CjxmaWx0ZXIgIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaGVpZ2h0PSIzMDAuMCUiIGlkPSJmaWx0ZXItMiIgd2lkdGg9IjMwMC4wJSIgeD0iLTEwMC4wJSIgeT0iLTEwMC4wJSI+Cgk8ZmVPZmZzZXQgIGR4PSIwIiBkeT0iMCIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSI+PC9mZU9mZnNldD4KCTxmZUdhdXNzaWFuQmx1ciAgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIiBzdGREZXZpYXRpb249IjEiPjwvZmVHYXVzc2lhbkJsdXI+Cgk8ZmVDb2xvck1hdHJpeCAgaW49InNoYWRvd0JsdXJPdXRlcjEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgICAwIDAgMCAwIDAgICAwIDAgMCAwIDAgIDAgMCAwIDAuMjk5MzY1OTQyIDAiPgoJCTwvZmVDb2xvck1hdHJpeD4KPC9maWx0ZXI+Cjx0aXRsZT5Hcm91cCA3PC90aXRsZT4KPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CjxwYXRoIGlkPSJMaW5lLUNvcHktMTEiIGNsYXNzPSJzdDAiIGQ9Ik0zMy41LDE0LjVsLTEwLTExIi8+CjxwYXRoIGlkPSJMaW5lLUNvcHktMTIiIGNsYXNzPSJzdDAiIGQ9Ik0yMy41LDMuNWgtMTkiLz4KPGcgaWQ9Ik92YWwtNi1Db3B5LTYiPgoJPGcgY2xhc3M9InN0MSI+CgkJPGNpcmNsZSBpZD0icGF0aC0xXzJfIiBjbGFzcz0ic3QyIiBjeD0iMy41IiBjeT0iMy41IiByPSIxLjUiLz4KCTwvZz4KCTxnPgoJCTxjaXJjbGUgaWQ9InBhdGgtMV8xXyIgY2xhc3M9InN0MiIgY3g9IjMuNSIgY3k9IjMuNSIgcj0iMS41Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==);
    animation-delay: 0.3s
}

.measure .ruler-label .ruler-label-name {
    animation-delay: 0.6s
}

.slide-down-enter-active[data-v-18538fc6], .slide-down-leave-active[data-v-18538fc6] {
    will-change: transform;
    transition: all .35s ease-in-out
}

.slide-down-enter-from[data-v-18538fc6] {
    opacity: 0;
    transform: translate3d(0, -100%, 0)
}

.slide-down-enter[data-v-18538fc6] {
    opacity: 1;
    transform: translate3d(-50%, 100%, 0)
}

.slide-down-leave-active[data-v-18538fc6] {
    opacity: 0;
    transform: translate3d(0, -100%, 0)
}

.vue-cropper[data-v-48aab112] {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    direction: ltr;
    touch-action: none;
    text-align: left;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)
}

.cropper-box-canvas[data-v-48aab112], .cropper-box[data-v-48aab112], .cropper-crop-box[data-v-48aab112], .cropper-drag-box[data-v-48aab112], .cropper-face[data-v-48aab112] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.cropper-box-canvas img[data-v-48aab112] {
    position: relative;
    text-align: left;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transform: none;
    max-width: none;
    max-height: none
}

.cropper-box[data-v-48aab112] {
    overflow: hidden
}

.cropper-move[data-v-48aab112] {
    cursor: move
}

.cropper-crop[data-v-48aab112] {
    cursor: crosshair
}

.cropper-modal[data-v-48aab112] {
    background: rgba(0, 0, 0, .5)
}

.cropper-view-box[data-v-48aab112] {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    outline: 1px solid #39f;
    outline-color: rgba(51, 153, 255, .75)
}

.cropper-view-box[data-v-48aab112], .cropper-view-box img[data-v-48aab112] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.cropper-view-box img[data-v-48aab112] {
    text-align: left;
    max-width: none;
    max-height: none
}

.cropper-face[data-v-48aab112] {
    top: 0;
    left: 0;
    background-color: #fff;
    opacity: .1
}

.crop-info[data-v-48aab112] {
    position: absolute;
    left: 0;
    min-width: 65px;
    text-align: center;
    color: #fff;
    line-height: 20px;
    background-color: rgba(0, 0, 0, .8);
    font-size: 12px
}

.crop-line[data-v-48aab112] {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: .1
}

.line-w[data-v-48aab112] {
    top: -3px;
    left: 0;
    height: 5px;
    cursor: n-resize
}

.line-a[data-v-48aab112] {
    top: 0;
    left: -3px;
    width: 5px;
    cursor: w-resize
}

.line-s[data-v-48aab112] {
    bottom: -3px;
    left: 0;
    height: 5px;
    cursor: s-resize
}

.line-d[data-v-48aab112] {
    top: 0;
    right: -3px;
    width: 5px;
    cursor: e-resize
}

.crop-point[data-v-48aab112] {
    position: absolute;
    width: 8px;
    height: 8px;
    opacity: .75;
    background-color: #39f;
    border-radius: 100%
}

.point1[data-v-48aab112] {
    top: -4px;
    left: -4px;
    cursor: nw-resize
}

.point2[data-v-48aab112] {
    top: -5px;
    left: 50%;
    margin-left: -3px;
    cursor: n-resize
}

.point3[data-v-48aab112] {
    top: -4px;
    right: -4px;
    cursor: ne-resize
}

.point4[data-v-48aab112] {
    top: 50%;
    left: -4px;
    margin-top: -3px;
    cursor: w-resize
}

.point5[data-v-48aab112] {
    top: 50%;
    right: -4px;
    margin-top: -3px;
    cursor: e-resize
}

.point6[data-v-48aab112] {
    bottom: -5px;
    left: -4px;
    cursor: sw-resize
}

.point7[data-v-48aab112] {
    bottom: -5px;
    left: 50%;
    margin-left: -3px;
    cursor: s-resize
}

.point8[data-v-48aab112] {
    bottom: -5px;
    right: -4px;
    cursor: se-resize
}

@media screen and (max-width: 500px) {
    .crop-point[data-v-48aab112] {
        position: absolute;
        width: 20px;
        height: 20px;
        opacity: .45;
        background-color: #39f;
        border-radius: 100%
    }

    .point1[data-v-48aab112] {
        top: -10px;
        left: -10px
    }

    .point2[data-v-48aab112], .point4[data-v-48aab112], .point5[data-v-48aab112], .point7[data-v-48aab112] {
        display: none
    }

    .point3[data-v-48aab112] {
        top: -10px;
        right: -10px
    }

    .point4[data-v-48aab112] {
        top: 0;
        left: 0
    }

    .point6[data-v-48aab112] {
        bottom: -10px;
        left: -10px
    }

    .point8[data-v-48aab112] {
        bottom: -10px;
        right: -10px
    }
}

.vue-cropper {
    background-repeat: repeat
}

.cropper-view-box {
    outline-color: var(--color-main-normal) !important
}

.crop-point {
    background-color: var(--color-main-normal) !important
}

.size {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px
}

.ui-input {
    margin-right: 30px
}

.ui-input:last-of-type {
    margin-right: 0
}

.x-scrollbar {
    position: relative
}

.x-scrollbar__container {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: auto
}

.x-scrollbar__container--hideScrollbar {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important
}

.x-scrollbar__container--hideScrollbar::-webkit-scrollbar {
    display: none !important
}

.x-scrollbar__container--preventDefault {
    overscroll-behavior: contain;
    -ms-scroll-chaining: none
}

.x-scrollbar__content {
    display: inline-block;
    vertical-align: middle;
    min-width: 100%
}

.x-scrollbar__track-x, .x-scrollbar__track-y {
    overflow: hidden;
    opacity: 1;
    position: absolute;
    z-index: 2;
    transition: background-color .2s linear, opacity .2s linear
}

.x-scrollbar__track-x {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 8px
}

.x-scrollbar__track-y {
    top: 0;
    right: 0;
    height: 100%;
    width: 8px
}

.x-scrollbar__thumb-x, .x-scrollbar__thumb-y {
    position: absolute;
    background-color: hsla(0, 0%, 100%, .2);
    border-radius: 5px;
    transition: height .2s ease-in-out, width .2s ease-in-out
}

.x-scrollbar__thumb-x {
    height: 5px;
    bottom: 0
}

.x-scrollbar__thumb-y {
    width: 5px;
    right: 0
}

.x-scrollbar__track--draging .x-scrollbar__thumb-x, .x-scrollbar__track-x:hover .x-scrollbar__thumb-x {
    height: 8px
}

.x-scrollbar__track--draging .x-scrollbar__thumb-y, .x-scrollbar__track-y:hover .x-scrollbar__thumb-y {
    width: 8px
}

.x-scrollbar-keep > .x-scrollbar__track-x, .x-scrollbar-keep > .x-scrollbar__track-y, .x-scrollbar:hover > .x-scrollbar__track-x, .x-scrollbar:hover > .x-scrollbar__track-y {
    opacity: 1
}

.x-scrollbar__track-x.x-scrollbar__track--draging, .x-scrollbar__track-x:hover, .x-scrollbar__track-y.x-scrollbar__track--draging, .x-scrollbar__track-y:hover {
    opacity: 1 !important
}

.slide-up-enter-active[data-v-7b47def9], .slide-up-leave-active[data-v-7b47def9] {
    will-change: transform;
    transition: all .2s ease-in-out
}

.slide-up-enter-from[data-v-7b47def9] {
    opacity: 0;
    transform: translate3d(0, 100%, 0)
}

.slide-up-enter[data-v-7b47def9] {
    opacity: 1;
    transform: translate3d(0, -100%, 0)
}

.slide-up-leave-active[data-v-7b47def9] {
    opacity: 0;
    transform: translate3d(0, 100%, 0)
}

.slide-right-enter-active[data-v-156a83d1], .slide-right-leave-active[data-v-156a83d1] {
    will-change: transform;
    transition: all 0s ease-in-out
}

.slide-right-enter-from[data-v-156a83d1] {
    opacity: 0;
    transform: translate3d(100%, 0, 0)
}

.slide-right-enter[data-v-156a83d1] {
    opacity: 1;
    transform: translate3d(-100%, 0, 0)
}

.slide-right-leave-active[data-v-156a83d1] {
    opacity: 0;
    transform: translate3d(100%, 0, 0)
}

.showPicBox[data-v-0100b98a] {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 10000;
    background: #181616;
    top: 0;
    left: 0
}

.showPicBox .close[data-v-0100b98a] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    z-index: 100;
    color: #fff
}

.showPicBox .close .iconfont[data-v-0100b98a] {
    font-size: 20px
}

.showPicBox .loading[data-v-0100b98a] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.showPicBox .imgbox[data-v-0100b98a] {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%
}

.showPicBox .imgbox #eleImg[data-v-0100b98a] {
    margin: 0 auto;
    display: block
}

.showPicBox .imgbox #eleImg.s[data-v-0100b98a] {
    height: 100%;
    width: auto
}

.showPicBox .imgbox #eleImg.h[data-v-0100b98a] {
    height: auto;
    width: 100%
}

.del-btn[data-v-0100b98a] {
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, .3);
    border-radius: 50%;
    position: absolute;
    cursor: pointer;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center
}

.loading-icon[data-v-0100b98a] {
    color: var(--editor-main-color);
    -webkit-animation: rotate-0100b98a 2s linear infinite;
    animation: rotate-0100b98a 2s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px
}

.pic-box[data-v-0100b98a] {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 4px;
    border: 1px solid hsla(0, 0%, 100%, .2);
    top: 0;
    left: 0;
    z-index: 10
}

@-webkit-keyframes rotate-0100b98a {
    0% {
        transform: translate(-50%, -50%) rotate(0deg)
    }
    to {
        transform: translate(-50%, -50%) rotate(1turn)
    }
}

@keyframes rotate-0100b98a {
    0% {
        transform: translate(-50%, -50%) rotate(0deg)
    }
    to {
        transform: translate(-50%, -50%) rotate(1turn)
    }
}

.pic-box .over-box[data-v-0100b98a] {
    width: 100%;
    height: 100%;
    overflow: hidden
}

.pic-box .continue[data-v-0100b98a] {
    width: 100%;
    height: 32px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .1), #000 200%);
    border-radius: 0 0 4px 4px;
    position: absolute;
    bottom: 0;
    left: 0
}

.pic-box .continue .ui-input[data-v-0100b98a] {
    width: 100%
}

.pic-box .continue .continue-tips[data-v-0100b98a] {
    font-size: 12px
}

.pic-box .continue .pic-num[data-v-0100b98a] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px
}

.pic-box .continue .pic-num .cur[data-v-0100b98a] {
    color: var(--editor-main-color)
}

.pic-box .ctrl-btn[data-v-0100b98a] {
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, .2);
    border-radius: 50%;
    position: absolute;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center
}

.pic-box .ctrl-btn .iconfont[data-v-0100b98a] {
    font-size: 14px
}

.pic-box .ctrl-btn.left-btn[data-v-0100b98a] {
    left: 5px
}

.pic-box .ctrl-btn.right-btn[data-v-0100b98a] {
    right: 5px
}

.pic-box .image-list[data-v-0100b98a] {
    width: 100%;
    height: 100%;
    position: relative;
    transition: all .3s linear
}

.pic-box .image-list .image-item[data-v-0100b98a] {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: translateX(0);
    text-align: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%
}

.pic-box .image-list .image-item img[data-v-0100b98a] {
    height: 100%;
    width: auto
}

.pic-box.show .ctrl-btn[data-v-0100b98a] {
    width: 40px;
    height: 80px;
    background: rgba(0, 0, 0, .6)
}

.pic-box.show .ctrl-btn .iconfont[data-v-0100b98a] {
    font-size: 20px
}

.pic-box.show .ctrl-btn.left-btn[data-v-0100b98a] {
    left: 0;
    border-radius: 0 40px 40px 0
}

.pic-box.show .ctrl-btn.left-btn .icon[data-v-0100b98a] {
    margin-right: 5px
}

.pic-box.show .ctrl-btn.right-btn[data-v-0100b98a] {
    right: 0;
    border-radius: 40px 0 0 40px
}

.pic-box.show .ctrl-btn.right-btn .icon[data-v-0100b98a] {
    margin-left: 8px
}

.pic-box.show .continue[data-v-0100b98a] {
    width: 76px;
    height: 36px;
    background: rgba(0, 0, 0, .6);
    border-radius: 20px;
    position: absolute;
    bottom: -5%;
    left: 50%;
    transform: translateX(-50%)
}

.pic-box.show .continue .pic-num[data-v-0100b98a] {
    width: 76px;
    height: 36px;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.pic-box.show .continue .pic-num span[data-v-0100b98a] {
    display: flex;
    align-items: center;
    justify-content: center
}

[is-mobile] .pic-box.show .ctrl-btn[data-v-0100b98a] {
    width: 40px;
    height: 80px;
    background: rgba(0, 0, 0, .6)
}

[is-mobile] .pic-box.show .ctrl-btn .iconfont[data-v-0100b98a] {
    font-size: 20px
}

[is-mobile] .pic-box.show .ctrl-btn.left-btn[data-v-0100b98a] {
    left: 0;
    border-radius: 0 40px 40px 0
}

[is-mobile] .pic-box.show .ctrl-btn.left-btn .icon[data-v-0100b98a] {
    margin-right: 5px
}

[is-mobile] .pic-box.show .ctrl-btn.right-btn[data-v-0100b98a] {
    right: 0;
    border-radius: 40px 0 0 40px
}

[is-mobile] .pic-box.show .ctrl-btn.right-btn .icon[data-v-0100b98a] {
    margin-left: 8px
}

[is-mobile] .pic-box.show .continue[data-v-0100b98a] {
    width: 76px;
    height: 36px;
    background: rgba(0, 0, 0, .6);
    border-radius: 20px;
    position: absolute;
    bottom: -6%;
    left: 50%;
    transform: translateX(-50%)
}

[is-mobile] .pic-box.show .continue .pic-num[data-v-0100b98a] {
    width: 76px;
    height: 36px;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

[is-mobile] .pic-box.show .continue .pic-num span[data-v-0100b98a] {
    display: flex;
    align-items: center;
    justify-content: center
}

.image-view[data-v-8182d9f6], .image-view .swiper[data-v-8182d9f6] {
    width: 100%;
    height: 100%
}

.image-view .swiper .swiper-slide[data-v-8182d9f6] {
    transform: translateZ(0);
    overflow: hidden
}

.image-view .swiper .swiper-zoom-container[data-v-8182d9f6] {
    width: 100%;
    height: 100%;
    transform: translateZ(0)
}

.image-view .swiper .swiper-zoom-container .swiper-zoom-target[data-v-8182d9f6] {
    width: 100%;
    height: 100%;
    background-position: 50%;
    background-size: contain;
    margin: 0 auto;
    transform: translateZ(0)
}

.image-view .swiper-pagination-bullet {
    background: #f2f2f2
}

.image-view .swiper-pagination-bullet-active {
    background: var(--editor-main-color)
}

.del-btn[data-v-5675b14c] {
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, .3);
    border-radius: 50%;
    cursor: pointer;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center
}

.del-btn[data-v-5675b14c], .web-box[data-v-5675b14c] {
    position: absolute;
    z-index: 10
}

.web-box[data-v-5675b14c] {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid hsla(0, 0%, 100%, .2);
    background: hsla(0, 0%, 100%, .1);
    top: 0;
    left: 0
}

.web-box .show-tips[data-v-5675b14c] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.web-box .show-tips span[data-v-5675b14c] {
    color: hsla(0, 0%, 100%, .3);
    font-size: 16px;
    font-weight: 700
}

.web-box .iframe-box[data-v-5675b14c] {
    position: absolute;
    top: 0;
    left: 0
}

.web-box .iframe-box[data-v-5675b14c], .web-box .iframe-box iframe[data-v-5675b14c] {
    width: 100%;
    height: 100%
}

.web-box .input-web[data-v-5675b14c] {
    height: 32px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .25), #000 200%) !important;
    border-radius: 0 0 4px 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0 0
}

.web-box .input-web.disabled[data-v-5675b14c] {
    background: linear-gradient(180deg, rgba(0, 0, 0, .5), #000 200%) !important;
    opacity: .8 !important
}

.web-box .input-web input[data-v-5675b14c] {
    background: none;
    border: none;
    padding: 0 0 0 10px;
    width: 94%;
    box-sizing: border-box
}

.web-box .input-web input[data-v-5675b14c]:focus {
    border: none
}

.web-box .input-web input[data-v-5675b14c]::-moz-placeholder {
    color: hsla(0, 0%, 100%, .6)
}

.web-box .input-web input[data-v-5675b14c]:-ms-input-placeholder {
    color: hsla(0, 0%, 100%, .6)
}

.web-box .input-web input[data-v-5675b14c]::placeholder {
    color: hsla(0, 0%, 100%, .6)
}

.web-box .input-web .ok-web[data-v-5675b14c] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: hsla(0, 0%, 100%, .6);
    color: rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.tag-layer {
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    top: 0;
    position: fixed;
    left: 0;
    background-color: rgba(0, 0, 0, .7)
}

.tag-layer .tag-info {
    color: #fff;
    width: 100%;
    height: 85%;
    position: absolute;
    top: 7.5%;
    left: 0
}

.tag-layer .tag-info .close-btn {
    position: fixed;
    right: 36px;
    top: 36px;
    font-size: 18px;
    cursor: pointer;
    z-index: 100
}

.tag-layer .tag-info .tag-metas {
    width: 100%;
    height: 100%;
    position: relative
}

.tag-layer .tag-info .tag-metas .pic-box {
    width: 100%;
    height: 100%;
    border: none
}

.tag-layer .tag-info .tag-metas .pic-box .image-list .image-item {
    background-size: contain
}

.tag-layer .tag-info .tag-metas .video-box {
    height: auto;
    border: none
}

.tag-layer .tag-info .tag-metas .video-box video {
    width: 100%;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain
}

.tag-layer .tag-info .tag-metas .web-box {
    width: 91%;
    height: 100%;
    border: none;
    left: 50%;
    transform: translateX(-50%)
}

[is-mobile] .tag-layer .tag-info .close-btn {
    position: absolute;
    right: 20px;
    top: -30px;
    font-size: 18px;
    cursor: pointer
}

[is-mobile] .tag-layer.full {
    background-color: #141414
}

[is-mobile] .tag-layer.full .tag-info {
    height: 100%;
    top: 0
}

[is-mobile] .tag-layer.full .tag-info .close-btn {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 18px;
    cursor: pointer
}

.del-btn[data-v-38df8efc] {
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, .3);
    border-radius: 50%;
    cursor: pointer;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center
}

.del-btn[data-v-38df8efc], .video-box[data-v-38df8efc] {
    position: absolute;
    z-index: 10
}

.video-box[data-v-38df8efc] {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid hsla(0, 0%, 100%, .2);
    top: 0;
    left: 0
}

.video-box .loading-icon[data-v-38df8efc] {
    color: var(--editor-main-color);
    -webkit-animation: rotate-38df8efc 2s linear infinite;
    animation: rotate-38df8efc 2s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px
}

@-webkit-keyframes rotate-38df8efc {
    0% {
        transform: translate(-50%, -50%) rotate(0deg)
    }
    to {
        transform: translate(-50%, -50%) rotate(1turn)
    }
}

@keyframes rotate-38df8efc {
    0% {
        transform: translate(-50%, -50%) rotate(0deg)
    }
    to {
        transform: translate(-50%, -50%) rotate(1turn)
    }
}

.video-box .video-item[data-v-38df8efc] {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.del-btn[data-v-72112ceb] {
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, .3);
    border-radius: 50%;
    cursor: pointer;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center
}

.audio-box[data-v-72112ceb], .del-btn[data-v-72112ceb] {
    position: absolute;
    z-index: 10
}

.audio-box[data-v-72112ceb] {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid hsla(0, 0%, 100%, .2);
    background: hsla(0, 0%, 100%, .1);
    top: 0;
    left: 0
}

.audio-box .audio-msg[data-v-72112ceb] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.audio-box .audio-msg .iconfont[data-v-72112ceb] {
    margin-right: 6px
}

.show-tag[data-v-75e616db] {
    pointer-events: auto;
    background: rgba(27, 27, 28, .8);
    border-radius: 4px;
    min-width: 400px;
    padding: 30px 20px;
    max-height: 50vh;
    overflow-y: auto
}

.show-tag .edit-btn[data-v-75e616db] {
    margin-top: 20px;
    text-align: right
}

.show-tag .edit-btn span[data-v-75e616db] {
    font-size: 14px;
    color: hsla(0, 0%, 100%, .6);
    cursor: pointer
}

.show-tag .edit-btn span[data-v-75e616db]:hover {
    color: #fff
}

.show-tag .tag-metas[data-v-75e616db] {
    width: 100%;
    height: 225px;
    background: hsla(0, 0%, 100%, .1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    cursor: -webkit-zoom-in;
    margin-top: 20px
}

.show-tag .tag-metas.nocursor[data-v-75e616db] {
    cursor: auto
}

.show-tag .tag-metas.mask[data-v-75e616db]:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100
}

.show-tag .tag-title[data-v-75e616db] {
    word-break: break-all
}

.show-tag .tag-title h2[data-v-75e616db] {
    font-size: 20px;
    line-height: 30px;
    color: #fff;
    position: relative
}

.show-tag .tag-title h2 .ui-audio[data-v-75e616db] {
    float: right
}

.show-tag .tag-title h2 .ui-audio.audio[data-v-75e616db] {
    display: inline-block;
    cursor: pointer
}

.show-tag .desc[data-v-75e616db] {
    margin-top: 10px
}

.show-tag .desc .text[data-v-75e616db] {
    font-size: 14px;
    color: #999;
    line-height: 20px;
    text-align: justify;
    word-break: break-all
}

[is-mobile] .show-tag[data-v-75e616db] {
    pointer-events: auto;
    background: rgba(27, 27, 28, .8);
    border-radius: .0533rem;
    min-width: 7.4667rem;
    padding: .4rem .2667rem
}

[is-mobile] .show-tag .edit-btn[data-v-75e616db] {
    margin-top: .2667rem;
    text-align: right
}

[is-mobile] .show-tag .edit-btn span[data-v-75e616db] {
    font-size: .1867rem;
    color: hsla(0, 0%, 100%, .6);
    cursor: pointer
}

[is-mobile] .show-tag .edit-btn span[data-v-75e616db]:hover {
    color: #fff
}

[is-mobile] .show-tag .tag-metas[data-v-75e616db] {
    width: 100%;
    height: 4.2667rem;
    background: hsla(0, 0%, 100%, .1);
    border-radius: .0533rem;
    overflow: hidden;
    position: relative;
    cursor: -webkit-zoom-in;
    margin-top: .4rem
}

[is-mobile] .show-tag .tag-metas.mask[data-v-75e616db]:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100
}

[is-mobile] .show-tag .tag-title h2[data-v-75e616db] {
    font-size: .5333rem;
    line-height: .8rem;
    color: #fff;
    position: relative
}

[is-mobile] .show-tag .tag-title h2 .ui-audio[data-v-75e616db] {
    float: right
}

[is-mobile] .show-tag .tag-title h2 .ui-audio.audio[data-v-75e616db] {
    display: inline-block;
    cursor: pointer
}

[is-mobile] .show-tag .desc[data-v-75e616db] {
    margin-bottom: .2933rem
}

[is-mobile] .show-tag .desc .text[data-v-75e616db] {
    font-size: .3733rem;
    color: #999;
    line-height: .2533rem;
    text-align: justify;
    line-height: .5333rem
}

[is-mobile] .show-tag .desc .text p[data-v-75e616db] {
    line-height: .5333rem
}

.delete-ruler li {
    white-space: nowrap
}

.title[data-v-c49ccfc6] {
    display: flex;
    align-items: center;
    padding-right: 30px;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all .1s;
    position: relative
}

.title.collapse[data-v-c49ccfc6] {
    padding-right: 0
}

.title.collapse .back-btn .iconfont[data-v-c49ccfc6] {
    transform: rotate(180deg)
}

.title.collapse .back-btn[data-v-c49ccfc6]:after, .title.collapse .icon[data-v-c49ccfc6], .title.collapse .text[data-v-c49ccfc6] {
    display: none
}

.title .back-btn[data-v-c49ccfc6] {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all .1s
}

.title .back-btn[data-v-c49ccfc6]:after {
    content: "";
    position: absolute;
    width: 1px;
    height: 65%;
    background: linear-gradient(transparent, #fff, transparent);
    top: 50%;
    transform: translateY(-50%);
    right: 0
}

.title .text[data-v-c49ccfc6] {
    width: 240px;
    padding-left: 20px;
    transition: width .3s
}

.title .text > div[data-v-c49ccfc6] {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.title .icon i[data-v-c49ccfc6] {
    transition: transform .2s ease-in-out
}

.title.pull-up .icon i[data-v-c49ccfc6] {
    transform: rotate(180deg)
}

.information .camera-btn[data-v-c49ccfc6] {
    width: 34px;
    height: 34px;
    background: rgba(0, 0, 0, .3);
    border-radius: 50%;
    position: absolute;
    right: -44px !important;
    top: 0
}

.information .camera-btn.hide[data-v-c49ccfc6] {
    opacity: 0;
    pointer-events: none
}

.information .camera-icon[data-v-c49ccfc6] {
    width: 34px !important;
    height: 34px;
    justify-content: center !important;
    color: hsla(0, 0%, 100%, .6) !important;
    font-size: 18px
}

.information .camera-icon.active[data-v-c49ccfc6], .information .camera-icon[data-v-c49ccfc6]:hover {
    color: #fff !important
}

.information .camera-pic[data-v-c49ccfc6] {
    width: 34px !important;
    height: 34px;
    justify-content: center !important;
    background-image: url(https://eurs3.4dkankan.com/v4/www/viewer/img/camera-list.04a5bd1d.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    -webkit-animation: cameraRotate-c49ccfc6 2s steps(48);
    animation: cameraRotate-c49ccfc6 2s steps(48);
    cursor: pointer
}

.information .camera-pic .tip[data-v-c49ccfc6] {
    color: #fff;
    position: absolute;
    transform-origin: top center;
    background: #000;
    border-radius: 4px;
    opacity: 0;
    padding: 10px;
    margin: 10px;
    font-size: 12px;
    transition: opacity .3s ease;
    pointer-events: none;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
    z-index: 10;
    top: 100%
}

.information .camera-pic:hover .tip[data-v-c49ccfc6] {
    opacity: .8
}

@-webkit-keyframes cameraRotate-c49ccfc6 {
    0% {
        background-position: 0 0
    }
    to {
        background-position: 100% 0
    }
}

@keyframes cameraRotate-c49ccfc6 {
    0% {
        background-position: 0 0
    }
    to {
        background-position: 100% 0
    }
}

.description[data-v-c49ccfc6] {
    display: none;
    position: absolute;
    left: 10px;
    top: calc(100% + 10px);
    background: rgba(15, 15, 15, .3);
    border-radius: 10px
}

.description.show[data-v-c49ccfc6] {
    display: block
}

.description .text[data-v-c49ccfc6] {
    padding: 20px;
    width: 400px;
    letter-spacing: 1px;
    overflow: hidden;
    word-break: break-all;
    white-space: normal;
    line-height: 1.5
}

.disable[data-v-22696a7d] {
    opacity: 1
}

.rules-btn[data-v-22696a7d] {
    background: rgba(0, 0, 0, .8);
    position: fixed;
    height: 1.3333rem;
    width: 100%;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.rules-btn .ui-button[data-v-22696a7d] {
    width: 40%;
    height: 1.0667rem
}

.rules-btn .ui-button.cancel[data-v-22696a7d] {
    margin-right: 10px
}

.header[data-v-22696a7d] {
    position: absolute;
    top: .3rem;
    left: 0;
    height: 1.15789rem;
    width: 100%;
    z-index: 101;
    color: #fff;
    display: flex;
    align-items: center;
    text-shadow: 0 0 4px rgba(0, 0, 0, .4)
}

.header.app[data-v-22696a7d] {
    top: 1rem
}

.header .left[data-v-22696a7d] {
    width: 1rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.header .left.show[data-v-22696a7d] {
    visibility: visible;
    pointer-events: auto
}

.header .left.show .back[data-v-22696a7d] {
    visibility: visible
}

.header .left .back[data-v-22696a7d] {
    width: .78rem;
    height: .78rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    position: relative
}

.header .left .back i[data-v-22696a7d] {
    font-size: .3rem;
    width: auto;
    position: static
}

.header .left .back-pano[data-v-22696a7d] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: 10px
}

.header .left .back-pano i[data-v-22696a7d] {
    font-size: .6rem;
    position: static
}

.header .right[data-v-22696a7d] {
    position: relative;
    width: 1.28rem;
    height: 100%;
    padding-right: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 11
}

.header .right > i[data-v-22696a7d] {
    font-size: .6rem
}

.header .right > div[data-v-22696a7d] {
    position: absolute;
    display: flex;
    flex-direction: column;
    right: 10px;
    top: 1.3rem;
    padding: 4px .42105rem;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 5px
}

.header .right > div[data-v-22696a7d]:after {
    content: "";
    position: absolute;
    top: -5px;
    right: .3rem;
    width: 0;
    height: 0;
    border-width: 0 5px 5px;
    border-style: solid;
    border-color: transparent transparent rgba(0, 0, 0, .5)
}

.header .right > div.flex li span[data-v-22696a7d] {
    flex: 1;
    width: auto
}

.header .right > div li[data-v-22696a7d] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    padding: .1333rem 0 .2667rem
}

.header .right > div li i[data-v-22696a7d] {
    font-size: .3733rem;
    margin-right: .4rem
}

.header .right > div li b[data-v-22696a7d] {
    position: absolute;
    left: .32rem;
    top: .33rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #00c2c4
}

.header .right > div li b i[data-v-22696a7d] {
    color: #fff;
    font-size: 12px;
    transform: scale(.3);
    top: -4px;
    left: -3px;
    position: absolute
}

.header .right > div li span[data-v-22696a7d] {
    width: 1.89474rem;
    white-space: nowrap;
    text-align: left;
    font-size: .3733rem
}

.header .right > div .home[data-v-22696a7d] {
    border-top: 1px solid hsla(0, 0%, 100%, .4)
}

.header .right > div .home a[data-v-22696a7d] {
    width: 1.89474rem;
    margin-top: .3rem;
    margin-bottom: .1rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-decoration: none;
    overflow: hidden
}

.header .right > div .home a img[data-v-22696a7d] {
    width: 100%;
    outline: none;
    border: none
}

.header .title[data-v-22696a7d] {
    flex: 1;
    width: 100%;
    font-size: .42105rem;
    letter-spacing: 1px
}

.header .title[data-v-22696a7d], .header .title > div[data-v-22696a7d] {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center
}

.header .title > div[data-v-22696a7d] {
    transition: background .3s ease, min-width .3s ease, border-radius .3s ease;
    padding-right: 12px;
    padding-left: 12px;
    white-space: nowrap;
    position: absolute;
    min-width: 100%;
    overflow: visible;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .15) 50%, transparent)
}

.header .title span[data-v-22696a7d] {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 7rem
}

.header .title i[data-v-22696a7d] {
    transition: all .3s;
    position: absolute;
    left: 50%;
    bottom: 0;
    font-size: .3rem;
    transform: translateX(-50%);
    margin-bottom: .07rem
}

.header .title.up i[data-v-22696a7d] {
    transform: translateX(-50%) rotate(180deg)
}

.header .title.up > div[data-v-22696a7d] {
    min-width: 0;
    flex-shrink: 0;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 1.15789rem
}

.header .title.up.drak > div[data-v-22696a7d] {
    background-color: rgba(0, 0, 0, .8)
}

.header .title.empty i[data-v-22696a7d] {
    display: none
}

.header .content[data-v-22696a7d] {
    position: absolute;
    top: 1.6rem;
    left: .92105rem;
    right: .92105rem;
    padding: 10px;
    background: rgba(0, 0, 0, .5);
    border-radius: 5px;
    font-size: .36842rem;
    text-align: center
}

.header .content.drak[data-v-22696a7d] {
    background: rgba(0, 0, 0, .8)
}

.header .content > div[data-v-22696a7d] {
    display: inline-block;
    text-align: left;
    letter-spacing: 1px;
    word-break: break-all;
    white-space: normal;
    line-height: 1.5
}

.header .content > div[data-v-22696a7d] p {
    word-break: break-word
}

.header .content > div[data-v-22696a7d] a {
    color: var(--editor-main-color)
}

.header .url-share[data-v-22696a7d] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .1)
}

.header .url-share > div[data-v-22696a7d] {
    position: absolute;
    left: .6rem;
    right: .6rem;
    top: 50vh;
    transform: translateY(-50%);
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    padding: .31579rem;
    font-size: .36842rem
}

.header .url-share > div .tips[data-v-22696a7d] {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.header .url-share > div .tips h4[data-v-22696a7d] {
    margin: 0;
    font-size: .42105rem
}

.header .url-share > div .tips i[data-v-22696a7d] {
    font-size: .6rem
}

.header .url-share > div .url[data-v-22696a7d] {
    display: -webkit-box;
    color: #fff;
    text-align: center;
    padding: .26316rem;
    width: 100%;
    height: 1.8rem;
    margin: .7rem 0;
    border-radius: .07rem;
    line-height: 1.99;
    font-size: .36842rem;
    background-color: rgba(0, 0, 0, .35);
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.header .url-share > div .btns[data-v-22696a7d] {
    display: flex;
    justify-content: space-between
}

.header .url-share > div .btns button[data-v-22696a7d] {
    font-size: .36842rem;
    width: 47%;
    height: 1.05263rem;
    border-radius: 1.05263rem
}

.header .url-share > div .btns button.submit[data-v-22696a7d] {
    background: #00c2c4
}

@media (orientation: landscape) {
    .header[data-v-22696a7d] {
        height: .7rem
    }

    .header[data-v-22696a7d], .header.app[data-v-22696a7d] {
        top: .2rem
    }

    .header .left .back-pano i[data-v-22696a7d], .header .right > i[data-v-22696a7d] {
        font-size: .5rem
    }

    .header .right > div[data-v-22696a7d] {
        right: 10px;
        top: .75rem;
        padding: 4px .2rem
    }

    .header .right > div[data-v-22696a7d]:after {
        right: .23rem
    }

    .header .right > div li[data-v-22696a7d] {
        margin-top: .15rem
    }

    .header .right > div li i[data-v-22696a7d] {
        font-size: .3rem
    }

    .header .right > div li b[data-v-22696a7d] {
        left: .2rem;
        top: .15rem
    }

    .header .right > div li span[data-v-22696a7d] {
        padding-bottom: .15rem;
        margin-left: .5rem;
        font-size: .25rem
    }

    .header .right > div .home a[data-v-22696a7d] {
        margin-top: .15rem;
        margin-bottom: 0;
        width: 1.4rem
    }

    .header .title[data-v-22696a7d] {
        font-size: .3rem
    }

    .header .content[data-v-22696a7d] {
        top: 1rem;
        left: 2rem;
        right: 2rem;
        padding: 10px
    }

    .header .content > div[data-v-22696a7d] {
        max-height: 3rem;
        font-size: .25rem;
        line-height: 1.5
    }
}

@media only screen and (min-device-width: 768px)and (orientation: landscape) {
    .header[data-v-22696a7d] {
        height: .8rem
    }

    .header .title i[data-v-22696a7d] {
        margin-bottom: 0
    }
}

.app-share[data-v-22696a7d] {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    color: var(--editor-main-color);
    text-shadow: none;
    border-radius: .146667rem .146667rem 0 0;
    z-index: 1000
}

.app-share i[data-v-22696a7d] {
    font-size: 1rem;
    margin: .666667rem 0 .106667rem;
    display: inline-block
}

.app-share ul[data-v-22696a7d] {
    overflow: hidden
}

.app-share ul div[data-v-22696a7d] {
    text-align: center;
    font-size: .34rem
}

.app-share ul li[data-v-22696a7d] {
    width: 33.3%;
    float: left;
    overflow: hidden;
    text-align: center
}

.app-share ul.flex[data-v-22696a7d] {
    display: flex
}

.app-share ul.flex li[data-v-22696a7d] {
    float: none
}

.app-share > div[data-v-22696a7d] {
    height: 1.293333rem;
    font-size: 16px;
    text-align: center;
    border-top: 1px solid #eee;
    margin-top: .466667rem;
    line-height: 1.293333rem
}

.animated.short.faster {
    -webkit-animation-duration: .3s;
    animation-duration: .3s
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 1rem, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 1rem, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate3d(0, 1rem, 0)
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate3d(0, 1rem, 0)
    }
}

.information[data-v-70998cb7] {
    position: absolute;
    left: 0;
    top: 20px;
    height: 34px;
    border-radius: 0 34px 34px 0;
    background: rgba(0, 0, 0, .3);
    pointer-events: all;
    color: hsla(0, 0%, 100%, .88);
    z-index: 100
}

.information.mobile[data-v-70998cb7] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: none;
    height: 0
}

.information[data-v-70998cb7] .icon {
    cursor: pointer;
    display: flex;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    align-items: center;
    justify-content: flex-start;
    color: inherit
}

.information[data-v-70998cb7] .icon i {
    font-size: 14px
}

.floor-switch[data-v-373181a9] {
    pointer-events: all;
    position: absolute;
    bottom: calc(100% + 5px);
    left: 20px;
    z-index: 10;
    transition: bottom .1s
}

.floor-switch li[data-v-373181a9], .floor-switch ul[data-v-373181a9] {
    padding: 0;
    margin: 0
}

.floor-switch ul[data-v-373181a9] {
    position: relative;
    z-index: 2
}

.floor-switch li[data-v-373181a9] {
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    height: 50px
}

.floor-switch li:first-child b[data-v-373181a9]:before {
    display: none
}

.floor-switch li:first-child.active b[data-v-373181a9]:after {
    bottom: -10px
}

.floor-switch li:last-child b[data-v-373181a9]:after {
    display: none
}

.floor-switch li:last-child.active b[data-v-373181a9]:before {
    top: -10px
}

.floor-switch li b[data-v-373181a9] {
    position: relative;
    width: 16px;
    height: 16px;
    background-color: #1c1c1c;
    border-radius: 50%;
    box-shadow: 0 0 2px 1px #404040;
    cursor: pointer
}

.floor-switch li b[data-v-373181a9]:before {
    top: -5px
}

.floor-switch li b[data-v-373181a9]:after, .floor-switch li b[data-v-373181a9]:before {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -3px;
    background: #1c1c1c;
    width: 6px;
    height: 6px
}

.floor-switch li b[data-v-373181a9]:after {
    bottom: -5px
}

.floor-switch li span[data-v-373181a9] {
    margin-left: 10px;
    font-size: 14px;
    cursor: pointer;
    color: #eee;
    text-shadow: 0 0 4px rgba(0, 0, 0, .5)
}

.floor-switch li.active b[data-v-373181a9] {
    left: -6px;
    width: 28px;
    height: 28px;
    border: 6px solid #1c1c1c;
    background-color: #404040;
    box-shadow: 0 0 2px 1px #404040
}

.floor-switch li.active b[data-v-373181a9]:before {
    top: -10px
}

.floor-switch li.active b[data-v-373181a9]:after {
    bottom: -10px
}

.floor-switch li.active span[data-v-373181a9] {
    margin-left: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    color: hsla(0, 0%, 100%, .88);
    border: 4px solid #1c1c1c;
    background-color: #404040;
    border-radius: 32px;
    box-shadow: 0 0 2px 1px #404040;
    padding: 0 10px;
    text-shadow: none
}

.floor-switch li.active span[data-v-373181a9]:before {
    content: "";
    position: absolute;
    left: -10px;
    background: #1c1c1c;
    width: 7px;
    height: 4px;
    box-shadow: -2px 0 2px 1px #404040
}

.floor-switch li.active span[data-v-373181a9]:after {
    left: -16px;
    height: 11px;
    border-radius: 50%
}

.floor-switch[data-v-373181a9]:after, .floor-switch li.active span[data-v-373181a9]:after {
    content: "";
    position: absolute;
    background: #1c1c1c;
    width: 6px
}

.floor-switch[data-v-373181a9]:after {
    left: 5px;
    top: 20px;
    bottom: 20px;
    box-shadow: 0 0 2px 1px #404040;
    z-index: 1
}

[is-mobile] .floor-switch[data-v-373181a9] {
    bottom: 2.5rem
}

[is-mobile] .floor-switch.showTours[data-v-373181a9] {
    bottom: 5rem
}

[is-mobile] .floor-switch li[data-v-373181a9] {
    height: 45px
}

[is-mobile] .floor-switch li:first-child.active b[data-v-373181a9]:after {
    bottom: -6px
}

[is-mobile] .floor-switch li:last-child.active b[data-v-373181a9]:before {
    top: -6px
}

[is-mobile] .floor-switch li b[data-v-373181a9] {
    width: 14px;
    height: 14px
}

[is-mobile] .floor-switch li b[data-v-373181a9]:before {
    top: -3px;
    left: 50%;
    margin-left: -2px;
    width: 4px;
    height: 4px
}

[is-mobile] .floor-switch li b[data-v-373181a9]:after {
    bottom: -3px;
    left: 50%;
    margin-left: -2px;
    width: 4px;
    height: 4px
}

[is-mobile] .floor-switch li span[data-v-373181a9] {
    font-size: .36842rem
}

[is-mobile] .floor-switch li.active b[data-v-373181a9] {
    left: -3px;
    width: 20px;
    height: 20px;
    border: 4px solid #1c1c1c
}

[is-mobile] .floor-switch li.active b[data-v-373181a9]:before {
    top: -6px
}

[is-mobile] .floor-switch li.active b[data-v-373181a9]:after {
    bottom: -6px
}

[is-mobile] .floor-switch li.active span[data-v-373181a9] {
    height: 30px;
    border: 3px solid #1c1c1c;
    border-radius: 30px;
    padding: 0 10px;
    margin-left: 5px
}

[is-mobile] .floor-switch li.active span[data-v-373181a9]:before {
    left: -11px;
    width: 10px;
    height: 4px;
    box-shadow: -2px 0 1px 1px #404040
}

[is-mobile] .floor-switch li.active span[data-v-373181a9]:after {
    left: -14px;
    width: 3px;
    height: 6px;
    border-radius: 40%
}

[is-mobile] .floor-switch[data-v-373181a9]:after {
    left: 5px;
    top: 20px;
    bottom: 20px;
    width: 4px
}

@media (orientation: landscape) {
    [is-mobile] .floor-switch[data-v-373181a9] {
        bottom: 1rem
    }

    [is-mobile] .floor-switch li span[data-v-373181a9] {
        font-size: .25rem
    }
}

.tours-captions[data-v-4ee59fd4] {
    position: absolute;
    bottom: 64px;
    left: 20px;
    width: 480px;
    word-break: break-all;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .25);
    text-align: justify;
    color: #fff;
    pointer-events: none;
    z-index: 1;
    transition: all .3s
}

.tours-captions.active[data-v-4ee59fd4] {
    bottom: 184px
}

.tours-captions .captions-title[data-v-4ee59fd4] {
    font-size: 28px;
    margin-bottom: 10px;
    font-weight: 700
}

.tours-captions .captions-desc[data-v-4ee59fd4] {
    font-size: 16px;
    line-height: 24px
}

.controls-left-buttons[data-v-4ee59fd4] {
    margin-left: 20px;
    margin-bottom: 20px;
    display: flex
}

.buttons.tour[data-v-4ee59fd4] {
    margin-right: 10px
}

.buttons.tour > div[data-v-4ee59fd4] {
    margin-left: 0;
    margin-right: 0;
    padding: 0 10px
}

.buttons.tour > div.show-list[data-v-4ee59fd4] {
    border-left: solid 1px var(--editor-font-color)
}

.buttons.tour > div .icon-pull-down[data-v-4ee59fd4] {
    font-size: 12px
}

.buttons.tour > div span[data-v-4ee59fd4] {
    right: -10px
}

.tour-list[data-v-4ee59fd4] {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 120px;
    background-color: var(--editor-menu-back);
    pointer-events: all;
    left: var(--editor-toolbox-left);
    z-index: 1;
    transition: all .3s ease
}

.tour-list.ban[data-v-4ee59fd4] {
    pointer-events: none
}

.tour-list .part-content[data-v-4ee59fd4] {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    width: 100%;
    height: 100%
}

.tour-list .part-content .part-list[data-v-4ee59fd4] {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 10px;
    box-sizing: border-box
}

.tour-list .part-content .part-list .part-item[data-v-4ee59fd4] {
    width: 120px;
    height: 80px;
    position: relative;
    cursor: pointer;
    margin-right: 10px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 50%
}

.tour-list .part-content .part-list .part-item[data-v-4ee59fd4]:last-of-type {
    margin-right: 0
}

.tour-list .part-content .part-list .part-item[data-v-4ee59fd4]:hover {
    opacity: .6
}

.tour-list .part-content .part-list .part-item .precent[data-v-4ee59fd4] {
    width: 0;
    height: 24px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #00c8af;
    opacity: .4;
    z-index: 1
}

.tour-list .part-content .part-list .part-item .part-title[data-v-4ee59fd4] {
    width: 100%;
    height: 24px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .5));
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 10
}

.play-control[data-v-4ee59fd4] {
    pointer-events: all;
    height: 34px;
    background-color: rgba(0, 0, 0, .3);
    min-width: 34px;
    border-radius: 17px;
    margin-left: 10px
}

.play-control[data-v-4ee59fd4], .play-control .tour-btn[data-v-4ee59fd4] {
    display: flex;
    align-items: center;
    justify-content: center
}

.play-control .tour-btn[data-v-4ee59fd4] {
    width: 34px;
    height: 22px;
    cursor: pointer
}

.play-control .tour-btn > .iconfont[data-v-4ee59fd4] {
    font-size: 14px
}

.play-control .tour-btn.play-btn > .iconfont[data-v-4ee59fd4] {
    font-size: 20px;
    transition: rotate .3s
}

.play-control .tour-btn.bor[data-v-4ee59fd4] {
    border-left: 1px solid hsla(0, 0%, 100%, .2)
}

.play-control .tour-btn.bor > .iconfont[data-v-4ee59fd4] {
    transform: rotate(180deg)
}

.play-control .tour-btn.bor > .iconfont.active[data-v-4ee59fd4] {
    transform: rotate(0deg)
}

.rules-box[data-v-007bd5de] {
    position: fixed;
    z-index: 1000;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 150px
}

.rules-box .ui-button[data-v-007bd5de] {
    margin-bottom: 10px
}

.rules-box .ui-button[data-v-007bd5de]:last-of-type {
    margin-bottom: 0
}

.rules-box .ui-button.cancel[data-v-007bd5de] {
    background: rgba(92, 92, 92, .51) !important;
    color: #fff !important;
    border: none !important
}

.controls-right-buttons[data-v-0d0aff26] {
    display: flex;
    margin-right: 20px;
    margin-bottom: 20px
}

.controls-right-buttons > div[data-v-0d0aff26] {
    cursor: pointer;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background-color: rgba(0, 0, 0, .3);
    border-radius: 50%;
    font-size: 18px;
    position: relative
}

.controls-right-buttons .playing[data-v-0d0aff26] {
    -webkit-animation: spinner-0d0aff26 4s linear infinite;
    animation: spinner-0d0aff26 4s linear infinite
}

@-webkit-keyframes spinner-0d0aff26 {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(1turn)
    }
}

@keyframes spinner-0d0aff26 {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(1turn)
    }
}

.bottom-controls[data-v-707555b1] {
    width: 100%;
    position: absolute;
    left: 0;
    right: var(--editor-toolbox-width);
    bottom: 20px;
    height: 34px;
    display: flex;
    justify-content: space-between;
    transition: bottom .3s ease;
    z-index: 100
}

[data-v-707555b1] .buttons {
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 34px;
    border-radius: 17px;
    background-color: rgba(0, 0, 0, .3)
}

[data-v-707555b1] .buttons > div {
    position: relative;
    margin-left: 20px;
    margin-right: 20px;
    cursor: pointer
}

[data-v-707555b1] .buttons > div.active {
    color: var(--editor-main-color)
}

[data-v-707555b1] .buttons > div > i {
    font-size: 18px
}

[data-v-707555b1] .buttons > div span {
    cursor: pointer;
    display: none;
    position: absolute;
    top: -20px;
    right: -15px;
    width: 24px;
    height: 24px;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: var(--editor-main-color);
    transition: all .1s
}

[data-v-707555b1] .buttons > div span:hover {
    transform: scale(1.2)
}

[data-v-707555b1] .buttons > div span.disable i {
    opacity: .5
}

.wrapper[data-v-76574297] {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.error[data-v-76574297] {
    height: 18px;
    margin-top: 10px;
    color: red;
    text-align: left;
    width: 100%;
    padding-left: 10px
}

.scene-loading[data-v-6faf0118] {
    display: table;
    table-layout: fixed;
    height: 100vh;
    width: 100vw;
    z-index: 100
}

.scene-loading.thumb[data-v-6faf0118] {
    position: fixed;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    z-index: 5000
}

.scene-loading.thumb.default[data-v-6faf0118] {
    background-position: 100%
}

.scene-loading *[data-v-6faf0118] {
    opacity: 1 !important
}

.scene-loading .content[data-v-6faf0118] {
    width: 100%;
    height: 100%;
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

.scene-loading .content .all[data-v-6faf0118] {
    perspective: 100px;
    text-align: center;
    display: inline-block
}

.scene-loading .content .brick[data-v-6faf0118] {
    text-align: center;
    position: relative;
    width: 30px;
    height: 10px;
    transform-style: preserve-3d;
    transform-origin: 15px 5px;
    margin: 0 auto 2.5px
}

.scene-loading .content .brick-1[data-v-6faf0118] {
    -webkit-animation: rorate-6faf0118 2s linear 1s infinite;
    animation: rorate-6faf0118 2s linear 1s infinite;
    transform: rotateX(-30deg) rotateY(45deg) translateZ(30px)
}

.scene-loading .content .brick-2[data-v-6faf0118] {
    -webkit-animation: rorate-6faf0118 2s linear .75s infinite;
    animation: rorate-6faf0118 2s linear .75s infinite;
    transform: rotateX(-30deg) rotateY(45deg) translateZ(20px)
}

.scene-loading .content .brick-3[data-v-6faf0118] {
    -webkit-animation: rorate-6faf0118 2s linear .5s infinite;
    animation: rorate-6faf0118 2s linear .5s infinite;
    transform: rotateX(-30deg) rotateY(45deg) translateZ(10px)
}

.scene-loading .content .face[data-v-6faf0118] {
    width: 30px;
    height: 10px;
    overflow: hidden;
    position: absolute;
    background: hsla(0, 0%, 100%, .4);
    opacity: 0
}

.scene-loading .content .brick.enter[data-v-6faf0118] {
    transition: all .5s;
    transform: rotateX(-30deg) rotateY(45deg)
}

.scene-loading .content .brick.enter .face[data-v-6faf0118] {
    transition: all .5s;
    opacity: 1
}

.scene-loading .content .brick-2 .face[data-v-6faf0118] {
    background: hsla(0, 0%, 100%, .3)
}

.scene-loading .content .brick-2 .brick-back[data-v-6faf0118], .scene-loading .content .brick-2 .brick-front[data-v-6faf0118] {
    background: hsla(0, 0%, 100%, .4)
}

.scene-loading .content .brick-3 .face[data-v-6faf0118] {
    background: hsla(0, 0%, 100%, .2)
}

.scene-loading .content .brick-3 .brick-back[data-v-6faf0118], .scene-loading .content .brick-3 .brick-front[data-v-6faf0118] {
    background: hsla(0, 0%, 100%, .1)
}

.scene-loading .content .brick-front[data-v-6faf0118] {
    transform: translateZ(15px);
    background: hsla(0, 0%, 100%, .6)
}

.scene-loading .content .brick-top[data-v-6faf0118] {
    width: 30px;
    height: 30px;
    transform: rotateX(90deg) translateZ(15px);
    background-color: hsla(0, 0%, 100%, .8)
}

.scene-loading .content .brick-bottom[data-v-6faf0118] {
    width: 30px;
    height: 30px;
    transform: rotateX(-90deg) translateZ(-5px);
    background-color: hsla(0, 0%, 100%, .8)
}

.scene-loading .content .brick-left[data-v-6faf0118] {
    transform: rotateY(-90deg) translateZ(15px);
    background: hsla(0, 0%, 100%, .5)
}

.scene-loading .content .brick-right[data-v-6faf0118] {
    transform: rotateY(90deg) translateZ(15px);
    background: hsla(0, 0%, 100%, .5)
}

.scene-loading .content .brick-back[data-v-6faf0118] {
    transform: rotateY(180deg) translateZ(15px);
    background: hsla(0, 0%, 100%, .6)
}

.scene-loading .logo[data-v-6faf0118] {
    width: 100%;
    color: #fff;
    font-size: 16px;
    text-align: center;
    opacity: 0
}

.scene-loading .logo.enter[data-v-6faf0118] {
    -webkit-animation: logo-enter-6faf0118 .5s forwards;
    animation: logo-enter-6faf0118 .5s forwards;
    visibility: initial
}

.scene-loading .logo .logo-main[data-v-6faf0118] {
    width: 140px;
    height: 70px;
    position: absolute;
    left: 50%;
    top: 80%;
    transform: translateX(-50%) translateY(-50%)
}

.scene-loading .logo div[data-v-6faf0118] {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
    min-height: 70px
}

.scene-loading .logo i[data-v-6faf0118] {
    position: absolute;
    left: 50%;
    top: 65%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 148px
}

.scene-loading .copy-right[data-v-6faf0118] {
    color: hsla(0, 0%, 100%, .6);
    opacity: .5;
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    line-height: 30px;
    height: 48px;
    white-space: nowrap
}

.scene-loading .copy-right span[data-v-6faf0118] {
    white-space: nowrap
}

.small[data-v-6faf0118] {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
    z-index: 100
}

.small *[data-v-6faf0118] {
    opacity: 1 !important
}

.small .content[data-v-6faf0118] {
    width: 100%;
    height: 100%;
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

.small .content .all[data-v-6faf0118] {
    perspective: 100px;
    text-align: center;
    display: inline-block
}

.small .content .brick[data-v-6faf0118] {
    text-align: center;
    position: relative;
    width: 12px;
    height: 4px;
    transform-style: preserve-3d;
    transform-origin: 6px 2px;
    margin: 0 auto 1px
}

.small .content .brick-1[data-v-6faf0118] {
    -webkit-animation: rorate-6faf0118 2s linear 1s infinite;
    animation: rorate-6faf0118 2s linear 1s infinite;
    transform: rotateX(-30deg) rotateY(45deg) translateZ(30px)
}

.small .content .brick-2[data-v-6faf0118] {
    -webkit-animation: rorate-6faf0118 2s linear .75s infinite;
    animation: rorate-6faf0118 2s linear .75s infinite;
    transform: rotateX(-30deg) rotateY(45deg) translateZ(20px)
}

.small .content .brick-3[data-v-6faf0118] {
    -webkit-animation: rorate-6faf0118 2s linear .5s infinite;
    animation: rorate-6faf0118 2s linear .5s infinite;
    transform: rotateX(-30deg) rotateY(45deg) translateZ(10px)
}

.small .content .face[data-v-6faf0118] {
    width: 12px;
    height: 4px;
    overflow: hidden;
    position: absolute;
    background: hsla(0, 0%, 100%, .4);
    opacity: 0
}

.small .content .brick.enter[data-v-6faf0118] {
    transition: all .5s;
    transform: rotateX(-30deg) rotateY(45deg)
}

.small .content .brick.enter .face[data-v-6faf0118] {
    transition: all .5s;
    opacity: 1
}

.small .content .brick-2 .face[data-v-6faf0118] {
    background: hsla(0, 0%, 100%, .3)
}

.small .content .brick-2 .brick-back[data-v-6faf0118], .small .content .brick-2 .brick-front[data-v-6faf0118] {
    background: hsla(0, 0%, 100%, .4)
}

.small .content .brick-3 .face[data-v-6faf0118] {
    background: hsla(0, 0%, 100%, .2)
}

.small .content .brick-3 .brick-back[data-v-6faf0118], .small .content .brick-3 .brick-front[data-v-6faf0118] {
    background: hsla(0, 0%, 100%, .1)
}

.small .content .brick-front[data-v-6faf0118] {
    transform: translateZ(6px);
    background: hsla(0, 0%, 100%, .6)
}

.small .content .brick-top[data-v-6faf0118] {
    transform: rotateX(90deg) translateZ(6px)
}

.small .content .brick-bottom[data-v-6faf0118], .small .content .brick-top[data-v-6faf0118] {
    width: 12px;
    height: 12px;
    background-color: hsla(0, 0%, 100%, .8)
}

.small .content .brick-bottom[data-v-6faf0118] {
    transform: rotateX(-90deg) translateZ(-2px)
}

.small .content .brick-left[data-v-6faf0118] {
    transform: rotateY(-90deg) translateZ(6px);
    background: hsla(0, 0%, 100%, .5)
}

.small .content .brick-right[data-v-6faf0118] {
    transform: rotateY(90deg) translateZ(6px);
    background: hsla(0, 0%, 100%, .5)
}

.small .content .brick-back[data-v-6faf0118] {
    transform: rotateY(180deg) translateZ(6px);
    background: hsla(0, 0%, 100%, .6)
}

.small .logo[data-v-6faf0118] {
    width: 100%;
    color: #fff;
    font-size: 16px;
    text-align: center;
    opacity: 0
}

.small .logo.enter[data-v-6faf0118] {
    -webkit-animation: logo-enter-6faf0118 .5s forwards;
    animation: logo-enter-6faf0118 .5s forwards;
    visibility: initial
}

.small .logo .logo-main[data-v-6faf0118] {
    width: 70px;
    height: 35px;
    position: absolute;
    left: 50%;
    top: 80%;
    transform: translateX(-50%) translateY(-50%)
}

.small .logo div[data-v-6faf0118] {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
    min-height: 35px
}

.small .logo i[data-v-6faf0118] {
    position: absolute;
    left: 50%;
    top: 65%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 74px
}

.small .logo-bottom[data-v-6faf0118] {
    width: 100%;
    height: 48px;
    color: #fff;
    font-size: 16px;
    position: absolute;
    bottom: 42px;
    left: 0
}

.small .logo-bottom div[data-v-6faf0118] {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%
}

.small .logo-bottom i[data-v-6faf0118] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 140px
}

[edit-mode=mobile] .content .brick[data-v-6faf0118], [show-mode=mobile] .content .brick[data-v-6faf0118] {
    width: 24px;
    height: 8px;
    transform-origin: 12px 4px;
    margin: 0 auto 2px
}

[edit-mode=mobile] .content .brick.enter[data-v-6faf0118], [show-mode=mobile] .content .brick.enter[data-v-6faf0118] {
    transition: all .5s;
    transform: rotateX(-30deg) rotateY(45deg)
}

[edit-mode=mobile] .content .brick.enter .face[data-v-6faf0118], [show-mode=mobile] .content .brick.enter .face[data-v-6faf0118] {
    transition: all .5s;
    opacity: 1
}

[edit-mode=mobile] .content .brick-1[data-v-6faf0118], [show-mode=mobile] .content .brick-1[data-v-6faf0118] {
    -webkit-animation: rorate-6faf0118 2s linear 1s infinite;
    animation: rorate-6faf0118 2s linear 1s infinite;
    transform: rotateX(-30deg) rotateY(45deg) translateZ(30px)
}

[edit-mode=mobile] .content .brick-2[data-v-6faf0118], [show-mode=mobile] .content .brick-2[data-v-6faf0118] {
    -webkit-animation: rorate-6faf0118 2s linear .75s infinite;
    animation: rorate-6faf0118 2s linear .75s infinite;
    transform: rotateX(-30deg) rotateY(45deg) translateZ(20px)
}

[edit-mode=mobile] .content .brick-3[data-v-6faf0118], [show-mode=mobile] .content .brick-3[data-v-6faf0118] {
    -webkit-animation: rorate-6faf0118 2s linear .5s infinite;
    animation: rorate-6faf0118 2s linear .5s infinite;
    transform: rotateX(-30deg) rotateY(45deg) translateZ(10px)
}

[edit-mode=mobile] .content .face[data-v-6faf0118], [show-mode=mobile] .content .face[data-v-6faf0118] {
    width: 24px;
    height: 8px
}

[edit-mode=mobile] .content .brick-front[data-v-6faf0118], [show-mode=mobile] .content .brick-front[data-v-6faf0118] {
    transform: translateZ(12px)
}

[edit-mode=mobile] .content .brick-top[data-v-6faf0118], [show-mode=mobile] .content .brick-top[data-v-6faf0118] {
    width: 24px;
    height: 24px;
    transform: rotateX(90deg) translateZ(12px)
}

[edit-mode=mobile] .content .brick-bottom[data-v-6faf0118], [show-mode=mobile] .content .brick-bottom[data-v-6faf0118] {
    width: 24px;
    height: 24px;
    transform: rotateX(-90deg) translateZ(-4px)
}

[edit-mode=mobile] .content .brick-left[data-v-6faf0118], [show-mode=mobile] .content .brick-left[data-v-6faf0118] {
    transform: rotateY(-90deg) translateZ(12px)
}

[edit-mode=mobile] .content .brick-right[data-v-6faf0118], [show-mode=mobile] .content .brick-right[data-v-6faf0118] {
    transform: rotateY(90deg) translateZ(12px)
}

[edit-mode=mobile] .content .brick-back[data-v-6faf0118], [show-mode=mobile] .content .brick-back[data-v-6faf0118] {
    transform: rotateY(180deg) translateZ(12px)
}

[edit-mode=mobile] .logo[data-v-6faf0118], [show-mode=mobile] .logo[data-v-6faf0118] {
    margin-top: 5px
}

[edit-mode=mobile] .logo .logo-main[data-v-6faf0118], [show-mode=mobile] .logo .logo-main[data-v-6faf0118] {
    margin-top: 15px
}

[edit-mode=mobile] .logo i[data-v-6faf0118], [show-mode=mobile] .logo i[data-v-6faf0118] {
    font-size: 100px
}

[edit-mode=mobile] .logo-bottom[data-v-6faf0118], [show-mode=mobile] .logo-bottom[data-v-6faf0118] {
    bottom: .7rem
}

[edit-mode=mobile] .logo-bottom i[data-v-6faf0118], [show-mode=mobile] .logo-bottom i[data-v-6faf0118] {
    font-size: 75px
}

[edit-mode=mobile] .logo-bottom div[data-v-6faf0118], [show-mode=mobile] .logo-bottom div[data-v-6faf0118] {
    height: 36px
}

@-webkit-keyframes logo-enter-6faf0118 {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes logo-enter-6faf0118 {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-webkit-keyframes rorate-6faf0118 {
    0% {
        transform: rotateX(-30deg) rotateY(-45deg)
    }
    50% {
        transform: rotateX(-30deg) rotateY(-315deg)
    }
    to {
        transform: rotateX(-30deg) rotateY(-315deg)
    }
}

@keyframes rorate-6faf0118 {
    0% {
        transform: rotateX(-30deg) rotateY(-45deg)
    }
    50% {
        transform: rotateX(-30deg) rotateY(-315deg)
    }
    to {
        transform: rotateX(-30deg) rotateY(-315deg)
    }
}

.camera-close[data-v-7d407c89] {
    width: 48px;
    height: 48px;
    font-size: 20px;
    background: rgba(0, 0, 0, .32);
    border-radius: 50%;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 20px;
    right: 20px;
    z-index: 4000;
    cursor: pointer
}

.camera-close[data-v-7d407c89]:hover {
    color: #fff
}

.camera-info[data-v-7d407c89] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    height: 100%;
    width: 340px;
    background-color: var(--editor-toolbox-back);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    padding: 55px 0 10px
}

.camera-info .camera-header[data-v-7d407c89] {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin-bottom: 10px
}

.camera-info .camera-header .camera-title[data-v-7d407c89] {
    color: #999;
    font-size: 16px;
    font-weight: 700
}

.camera-info .camera-header .iconfont[data-v-7d407c89] {
    font-size: 18px;
    cursor: pointer
}

.camera-info .camera-header .iconfont.active[data-v-7d407c89] {
    color: var(--editor-main-color)
}

.camera-info .camera-list[data-v-7d407c89] {
    height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden
}

.camera-info .camera-list .camera-item[data-v-7d407c89] {
    width: 100%;
    height: 44px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #fff;
    cursor: pointer
}

.camera-info .camera-list .camera-item.active[data-v-7d407c89] {
    background: rgba(0, 200, 175, .15)
}

.camera-info .camera-list .camera-item .iconfont[data-v-7d407c89] {
    font-size: 24px;
    margin-right: 10px
}

.camera-info .camera-list .camera-item .camera-name[data-v-7d407c89] {
    font-size: 14px
}

.camera-info .close-btn[data-v-7d407c89] {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 14px;
    cursor: pointer;
    color: #999
}

.camera-info .close-btn[data-v-7d407c89]:hover {
    color: #fff
}

.check-browser[data-v-c29c77ea] {
    width: 100vw;
    height: 100vh;
    background: #f7f7f7;
    overflow: hidden
}

.check-browser .pic[data-v-c29c77ea] {
    width: 240px;
    height: 240px;
    background: url(https://eurs3.4dkankan.com/v4/www/viewer/img/pic_update.342ed9ce.png) no-repeat;
    background-size: 100% 100%;
    margin: 120px auto 30px
}

.check-browser .tips[data-v-c29c77ea] {
    font-size: 24px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    color: #646566;
    line-height: 33px;
    text-align: center
}

.check-browser .center-tips[data-v-c29c77ea] {
    font-family: 'Noto Sans JP', sans-serif;
    text-align: center;
    margin: 10px auto 30px
}

.check-browser .browser-list[data-v-c29c77ea], .check-browser .center-tips[data-v-c29c77ea] {
    font-size: 16px;
    font-weight: 400;
    color: #909090;
    line-height: 32px
}

.check-browser .browser-list[data-v-c29c77ea] {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center
}

.check-browser .browser-list .browser-item[data-v-c29c77ea] {
    width: 80px;
    margin-right: 100px;
    margin-bottom: 10px
}

.check-browser .browser-list .browser-item[data-v-c29c77ea]:last-of-type {
    margin-right: 0
}

.check-browser .browser-list .browser-item .browser-pic[data-v-c29c77ea] {
    width: 80px;
    height: 80px;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.check-browser .browser-list .browser-item .browser-pic.Firefox[data-v-c29c77ea] {
    background-image: url(https://eurs3.4dkankan.com/v4/www/viewer/img/browser_Firefox.cbc0ba86.png)
}

.check-browser .browser-list .browser-item .browser-pic.Edge[data-v-c29c77ea] {
    background-image: url(https://eurs3.4dkankan.com/v4/www/viewer/img/browser_Edge.cb5b542a.png)
}

.check-browser .browser-list .browser-item .browser-pic.Safari[data-v-c29c77ea] {
    background-image: url(https://eurs3.4dkankan.com/v4/www/viewer/img/browser_Safari.42f97fd2.png)
}

.check-browser .browser-list .browser-item .browser-pic.Chrome[data-v-c29c77ea] {
    background-image: url(https://eurs3.4dkankan.com/v4/www/viewer/img/browser_Chrome.5a769bf8.png)
}

.check-browser .browser-list .browser-item .borwser-name[data-v-c29c77ea] {
    display: block;
    width: 100%;
    font-size: 16px;
    text-align: center
}

.mobile .pic[data-v-c29c77ea] {
    width: 3.2rem;
    height: 3.2rem;
    background: url(https://eurs3.4dkankan.com/v4/www/viewer/img/pic_update.342ed9ce.png) no-repeat;
    background-size: 100% 100%;
    margin: 5.2rem auto .4rem
}

.mobile .tips[data-v-c29c77ea] {
    font-size: .32rem;
    color: #646566;
    line-height: .44rem
}

.mobile .center-tips[data-v-c29c77ea], .mobile .tips[data-v-c29c77ea] {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    text-align: center
}

.mobile .center-tips[data-v-c29c77ea] {
    font-size: .2133rem;
    color: #909090;
    line-height: .4267rem;
    margin: 10px auto .4rem
}

.mobile .browser-list[data-v-c29c77ea] {
    width: 100%;
    height: auto;
    font-size: 16px;
    font-weight: 400;
    color: #909090;
    line-height: .4267rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.mobile .browser-list .browser-item[data-v-c29c77ea] {
    width: 1.0667rem;
    margin-right: 1.3333rem;
    margin-bottom: .1333rem
}

.mobile .browser-list .browser-item[data-v-c29c77ea]:last-of-type {
    margin-right: 0
}

.mobile .browser-list .browser-item .browser-pic[data-v-c29c77ea] {
    width: 1.0667rem;
    height: 1.0667rem;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.mobile .browser-list .browser-item .browser-pic.Firefox[data-v-c29c77ea] {
    background-image: url(https://eurs3.4dkankan.com/v4/www/viewer/img/browser_Firefox.cbc0ba86.png)
}

.mobile .browser-list .browser-item .browser-pic.Edge[data-v-c29c77ea] {
    background-image: url(https://eurs3.4dkankan.com/v4/www/viewer/img/browser_Edge.cb5b542a.png)
}

.mobile .browser-list .browser-item .browser-pic.Safari[data-v-c29c77ea] {
    background-image: url(https://eurs3.4dkankan.com/v4/www/viewer/img/browser_Safari.42f97fd2.png)
}

.mobile .browser-list .browser-item .browser-pic.Chrome[data-v-c29c77ea] {
    background-image: url(https://eurs3.4dkankan.com/v4/www/viewer/img/browser_Chrome.5a769bf8.png)
}

.mobile .browser-list .browser-item .borwser-name[data-v-c29c77ea] {
    display: block;
    width: 100%;
    text-align: center;
    font-size: .2133rem
}

div#driver-popover-item {
    display: none;
    position: absolute;
    background: #fff;
    color: #2d2d2d;
    margin: 0;
    padding: 15px;
    border-radius: 5px;
    min-width: 250px;
    max-width: 300px;
    box-shadow: 0 1px 10px rgba(0, 0, 0, .4);
    z-index: 1000000000
}

div#driver-popover-item .driver-popover-tip {
    border: 5px solid #fff;
    content: "";
    position: absolute
}

div#driver-popover-item .driver-popover-tip.bottom {
    bottom: -10px;
    border-color: #fff transparent transparent
}

div#driver-popover-item .driver-popover-tip.bottom.position-center {
    left: 49%
}

div#driver-popover-item .driver-popover-tip.bottom.position-right {
    right: 20px
}

div#driver-popover-item .driver-popover-tip.left {
    left: -10px;
    top: 10px;
    border-color: transparent #fff transparent transparent
}

div#driver-popover-item .driver-popover-tip.left.position-center {
    top: 46%
}

div#driver-popover-item .driver-popover-tip.left.position-bottom {
    top: auto;
    bottom: 20px
}

div#driver-popover-item .driver-popover-tip.right {
    right: -10px;
    top: 10px;
    border-color: transparent transparent transparent #fff
}

div#driver-popover-item .driver-popover-tip.right.position-center {
    top: 46%
}

div#driver-popover-item .driver-popover-tip.right.position-bottom {
    top: auto;
    bottom: 20px
}

div#driver-popover-item .driver-popover-tip.top {
    top: -10px;
    border-color: transparent transparent #fff
}

div#driver-popover-item .driver-popover-tip.top.position-center {
    left: 49%
}

div#driver-popover-item .driver-popover-tip.top.position-right {
    right: 20px
}

div#driver-popover-item .driver-popover-tip.mid-center {
    display: none
}

div#driver-popover-item .driver-popover-footer {
    display: block;
    margin-top: 10px
}

div#driver-popover-item .driver-popover-footer button {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid #d4d4d4;
    text-decoration: none;
    text-shadow: 1px 1px 0 #fff;
    color: #2d2d2d;
    font: 11px/normal sans-serif;
    cursor: pointer;
    outline: 0;
    background-color: #f1f1f1;
    border-radius: 2px;
    zoom: 1;
    line-height: 1.3
}

div#driver-popover-item .driver-popover-footer button.driver-disabled {
    color: grey;
    cursor: default;
    pointer-events: none
}

div#driver-popover-item .driver-popover-footer .driver-close-btn {
    float: left
}

div#driver-popover-item .driver-popover-footer .driver-btn-group, div#driver-popover-item .driver-popover-footer .driver-close-only-btn {
    float: right
}

div#driver-popover-item .driver-popover-title {
    font: 19px/normal sans-serif;
    margin: 0 0 5px;
    font-weight: 700;
    display: block;
    position: relative;
    line-height: 1.5;
    zoom: 1
}

div#driver-popover-item .driver-popover-description {
    margin-bottom: 0;
    font: 14px/normal sans-serif;
    line-height: 1.5;
    color: #2d2d2d;
    font-weight: 400;
    zoom: 1
}

.driver-clearfix:after, .driver-clearfix:before {
    content: "";
    display: table
}

.driver-clearfix:after {
    clear: both
}

.driver-stage-no-animation {
    transition: none !important;
    background: transparent !important;
    outline: 5000px solid rgba(0, 0, 0, .75)
}

div#driver-page-overlay {
    background: #000;
    position: fixed;
    bottom: 0;
    right: 0;
    display: block;
    width: 100%;
    height: 100%;
    zoom: 1;
    filter: alpha(opacity=75);
    opacity: .75;
    z-index: 100002 !important
}

div#driver-highlighted-element-stage, div#driver-page-overlay {
    top: 0;
    left: 0;
    transition: all .3s
}

div#driver-highlighted-element-stage {
    position: absolute;
    height: 50px;
    width: 300px;
    background: #fff;
    z-index: 100003 !important;
    display: none;
    border-radius: 2px
}

.driver-highlighted-element {
    z-index: 100004 !important
}

.driver-position-relative {
    position: relative !important
}

.driver-fix-stacking {
    z-index: auto !important;
    opacity: 1 !important;
    transform: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    -o-filter: none !important;
    filter: none !important;
    -ms-perspective: none !important;
    -o-perspective: none !important;
    perspective: none !important;
    transform-style: flat !important;
    -webkit-transform-box: border-box !important;
    -moz-transform-box: border-box !important;
    -ms-transform-box: border-box !important;
    -o-transform-box: border-box !important;
    transform-box: border-box !important;
    will-change: unset !important
}

#driver-highlighted-element-stage {
    background: hsla(0, 0%, 100%, .2) !important
}

.user-guide-overlay[data-v-1d99a70e] {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    background-color: rgba(0, 0, 0, .7)
}

.user-guide[data-v-1d99a70e] {
    white-space: normal;
    position: absolute;
    top: 50%;
    left: 1.2rem;
    right: 1.2rem;
    border-radius: .15rem;
    color: #fff;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, .7);
    z-index: 999999
}

.user-guide .main[data-v-1d99a70e] {
    padding: .8rem;
    padding-bottom: 0
}

.user-guide .main h4[data-v-1d99a70e] {
    margin: 0;
    font-size: .5rem;
    text-align: center
}

.user-guide .main li[data-v-1d99a70e], .user-guide .main ul[data-v-1d99a70e] {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%
}

.user-guide .main ul[data-v-1d99a70e] {
    margin: .4rem 0
}

.user-guide .main li[data-v-1d99a70e] {
    display: flex;
    align-items: center;
    padding: .6rem 0
}

.user-guide .main li i[data-v-1d99a70e] {
    font-size: 1.2rem
}

.user-guide .main li > div[data-v-1d99a70e] {
    line-height: 1.6;
    font-size: .4rem;
    margin-left: .35rem
}

.user-guide .main button[data-v-1d99a70e] {
    width: 100%;
    margin-bottom: .5rem;
    background-color: #fff;
    font-size: .4rem;
    color: #444;
    height: 1.1rem;
    border: none;
    border-radius: .15rem
}

.user-guide .main button[type=submit][data-v-1d99a70e] {
    color: #fff;
    background-color: transparent
}

@media (orientation: landscape) {
    .user-guide[data-v-1d99a70e] {
        width: 400px;
        left: 50% !important;
        right: auto !important;
        margin-left: -200px
    }

    .user-guide .main[data-v-1d99a70e] {
        padding: .5rem
    }

    .user-guide .main h4[data-v-1d99a70e] {
        font-size: .35rem
    }

    .user-guide .main ul[data-v-1d99a70e] {
        margin: .3rem 0
    }

    .user-guide .main li[data-v-1d99a70e] {
        padding: .1rem 0
    }

    .user-guide .main li i[data-v-1d99a70e] {
        font-size: .6rem
    }

    .user-guide .main li > div[data-v-1d99a70e] {
        font-size: .25rem
    }

    .user-guide .main button[data-v-1d99a70e] {
        margin-bottom: 0;
        font-size: .3rem;
        height: .8rem
    }
}

.user-guide-mobile[data-v-1d99a70e] {
    position: absolute;
    top: 1.53789rem;
    left: 50%;
    width: 7.89474rem;
    transform: translateX(-50%)
}

.user-guide-mobile .zh[data-v-1d99a70e] {
    width: 100%;
    height: 7rem;
    background-image: url(https://eurs3.4dkankan.com/v4/www/viewer/img/novice_guide_text@2x.fa3d963a.png);
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat
}

.user-guide-mobile .en[data-v-1d99a70e] {
    width: 100%;
    color: #fff
}

.user-guide-mobile .en li[data-v-1d99a70e], .user-guide-mobile .en ul[data-v-1d99a70e] {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%
}

.user-guide-mobile .en ul[data-v-1d99a70e] {
    margin: 0
}

.user-guide-mobile .en li[data-v-1d99a70e] {
    display: flex;
    align-items: flex-start;
    padding: .25rem 0
}

.user-guide-mobile .en li[data-v-1d99a70e]:first-child {
    padding-top: 0
}

.user-guide-mobile .en li i[data-v-1d99a70e] {
    font-size: 1.32rem
}

.user-guide-mobile .en li > div[data-v-1d99a70e] {
    font-size: .4rem;
    margin-left: .3rem
}

.user-guide-mobile .en li > div[data-v-1d99a70e] span {
    font-size: .6rem;
    color: #00c2c4
}

.user-guide-mobile .en li > div[data-v-1d99a70e] div {
    font-size: .5rem;
    margin-top: .1rem;
    white-space: pre-line;
    line-height: 1.3
}

.user-guide-mobile .en .btn[data-v-1d99a70e] {
    background-image: none;
    color: #00c2c4;
    line-height: 1.2rem;
    text-align: center;
    font-size: .52632rem;
    background-image: url(https://eurs3.4dkankan.com/v4/www/viewer/img/novice_guide_button_empty@2x.c4d5afb6.png)
}

.user-guide-mobile .btn[data-v-1d99a70e] {
    position: relative;
    left: 50%;
    width: 3.5rem;
    height: 1.31579rem;
    background-image: url(https://eurs3.4dkankan.com/v4/www/viewer/img/novice_guide_button@2x.69d2f4d1.png);
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    transform: translateX(-50%);
    margin-top: 25px
}

@media (orientation: landscape) {
    .user-guide-mobile[data-v-1d99a70e] {
        top: .5rem
    }

    .user-guide-mobile .zh[data-v-1d99a70e] {
        height: 4rem
    }

    .user-guide-mobile .zh .btn[data-v-1d99a70e] {
        width: 2.5rem;
        height: .8rem;
        bottom: -1.4rem
    }

    .user-guide-mobile .en li[data-v-1d99a70e] {
        padding: .15rem 0
    }

    .user-guide-mobile .en li i[data-v-1d99a70e] {
        font-size: 1rem
    }

    .user-guide-mobile .en li > div[data-v-1d99a70e] {
        margin-left: .3rem
    }

    .user-guide-mobile .en li > div[data-v-1d99a70e] span {
        font-size: .3rem
    }

    .user-guide-mobile .en li > div[data-v-1d99a70e] div {
        font-size: .25rem;
        margin-top: .1rem
    }

    .user-guide-mobile .en .btn[data-v-1d99a70e] {
        height: .7rem;
        line-height: .63rem;
        font-size: .25rem;
        bottom: -.7rem
    }
}

#compass {
    opacity: 0 !important
}

.user-guide-mobile.pc {
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30vw;
    height: 60vh
}

.user-guide-mobile.pc .en li[data-v-1d99a70e] {
    padding: 1.4rem 0
}

.user-guide-mobile.pc .en li[data-v-1d99a70e]:first-child {
    padding-top: 0
}

.user-guide-mobile.pc .en li > div[data-v-1d99a70e] span {
    font-size: 1.5rem
}

.user-guide-mobile.pc .en li > div[data-v-1d99a70e] div {
    font-size: 1rem;
    margin-top: .5rem
}

.user-guide-mobile.pc .en .btn[data-v-1d99a70e] {
    position: relative;
    background-size: cover;
    padding-bottom: 66px;
    font-size: 1.2rem;
    width: 12rem;
    height: 2rem;
    line-height: 4rem;
    bottom: 0;
    margin-top: -10px;
    cursor: pointer
}

.user-guide-mobile .en li > div[data-v-1d99a70e] div p {
    margin: 10px 0;
    font-size: .45rem
}

.user-guide-mobile.pc .en li > div[data-v-1d99a70e] div p {
    margin: 15px 0;
    font-size: 1.2rem
}

[xui_tags_view] > div[data-tag-id="aMNIu1887898"] {
    width: 160px !important;
    height: 160px !important;
    margin-left: -80px !important;
    margin-top: -70px !important
}

[xui_tags_view] > div[data-tag-id="aMNIu1887898"] .tag-icon {
    width: 160px !important;
    height: 160px !important
}

.course-box[data-v-02332892] {
    position: absolute;
    width: 128px;
    background: rgba(27, 27, 28, .8);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3);
    border-radius: 4px;
    border: 1px solid #000;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    top: -250px;
    left: -50%;
    z-index: 1000;
    display: none;
    max-height: 240px;
    overflow-y: scroll
}

.course-box[data-v-02332892].chapter {
    display: block
}

.course-box p[data-v-02332892] {
    width: 100%;
    height: 2.4rem;
    font-size: .9rem;
    color: #fff;
    text-align: left;
    line-height: 32px;
    white-space: nowrap;
    padding: 0 10px;
    text-overflow: ellipsis;
    overflow: hidden
}

.course-box p[data-v-02332892]:hover {
    background: hsla(0, 0%, 100%, .1)
}

.music {
    position: relative
}

.trans.active {
    transform: translateY(-50%) scale(1)
}

.trans {
    padding: 0 40px 0 0;
    position: absolute;
    right: 35px;
    top: 50%;
    min-width: 420px;
    min-height: 60px;
    z-index: 1000;
    transform: translateY(-50%) scale(0);
    transform-origin: center right;
    transition: all 0.3s cubic-bezier(.35, .32, .65, .63);
    pointer-events: none
}

.trans .arrow {
    pointer-events: auto;
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 40px solid rgba(27, 27, 28, .8);
    transform: translateY(-50%)
}

.show-tag[data-v-26d14923] {
    pointer-events: auto;
    background: rgba(27, 27, 28, .8);
    border-radius: 4px;
    min-width: 400px;
    padding: 30px 20px
}

.tag-title[data-v-26d14923] {
    word-break: break-all
}

.show-tag .tag-title h2[data-v-26d14923] {
    font-size: 16px;
    line-height: 20px;
    color: #fff;
    position: relative
}

.show-tag .desc[data-v-26d14923] {
    margin-top: 10px
}

.show-tag .desc .text[data-v-26d14923] {
    font-size: 14px;
    color: #999;
    line-height: 20px;
    text-align: justify;
    word-break: break-all
}

.show-tag .tag-metas[data-v-26d14923] {
    width: 100%;
    height: 225px;
    background: hsla(0, 0%, 100%, .1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    cursor: -webkit-zoom-in;
    margin-top: 12px
}

.pic-box[data-v-74f94aee] {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 1px solid hsla(0, 0%, 100%, .2);
    top: 0;
    left: 0
}

.del-btn[data-v-74f94aee], .pic-box[data-v-74f94aee] {
    position: absolute;
    z-index: 10
}

.pic-box[data-v-74f94aee] {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 1px solid hsla(0, 0%, 100%, .2);
    top: 0;
    left: 0
}

.pic-box .loading-icon[data-v-74f94aee] {
    color: var(--editor-main-color);
    -webkit-animation: rotate-74f94aee 2s linear infinite;
    animation: rotate-74f94aee 2s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px
}

@-webkit-keyframes rotate-74f94aee {
    0% {
        transform: translate(-50%, -50%) rotate(0deg)
    }
    to {
        transform: translate(-50%, -50%) rotate(1turn)
    }
}

@keyframes rotate-74f94aee {
    0% {
        transform: translate(-50%, -50%) rotate(0deg)
    }
    to {
        transform: translate(-50%, -50%) rotate(1turn)
    }
}

.pic-box .over-box[data-v-74f94aee] {
    width: 100%;
    height: 100%;
    overflow: hidden
}

.pic-box .continue[data-v-74f94aee] {
    width: 100%;
    height: 32px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .1), #000 200%);
    border-radius: 0 0 4px 4px;
    position: absolute;
    bottom: 0;
    left: 0
}

.pic-box .continue .ui-input[data-v-74f94aee] {
    width: 100%
}

.pic-box .continue .continue-tips[data-v-74f94aee] {
    font-size: 12px
}

.pic-box .continue .pic-num[data-v-74f94aee] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px
}

.pic-box .continue .pic-num .cur[data-v-74f94aee] {
    color: var(--editor-main-color)
}

.pic-box .ctrl-btn[data-v-74f94aee] {
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, .2);
    border-radius: 50%;
    position: absolute;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center
}

.pic-box .ctrl-btn .iconfont[data-v-74f94aee] {
    font-size: 14px
}

.pic-box .ctrl-btn.left-btn[data-v-74f94aee] {
    left: 5px
}

.pic-box .ctrl-btn.right-btn[data-v-74f94aee] {
    right: 5px
}

.pic-box .image-list[data-v-74f94aee] {
    width: 100%;
    height: 100%;
    position: relative;
    transition: all .3s linear
}

.pic-box .image-list .image-item[data-v-74f94aee] {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: translateX(0);
    text-align: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%
}

.pic-box .image-list .image-item img[data-v-74f94aee] {
    height: 100%;
    width: auto
}

.pic-box.show .ctrl-btn[data-v-74f94aee] {
    width: 40px;
    height: 80px;
    background: rgba(0, 0, 0, .6)
}

.pic-box.show .ctrl-btn .iconfont[data-v-74f94aee] {
    font-size: 20px
}

.pic-box.show .ctrl-btn.left-btn[data-v-74f94aee] {
    left: 0;
    border-radius: 0 40px 40px 0
}

.pic-box.show .ctrl-btn.left-btn .icon[data-v-74f94aee] {
    margin-right: 5px
}

.pic-box.show .ctrl-btn.right-btn[data-v-74f94aee] {
    right: 0;
    border-radius: 40px 0 0 40px
}

.pic-box.show .ctrl-btn.right-btn .icon[data-v-74f94aee] {
    margin-left: 8px
}

.pic-box.show .continue[data-v-74f94aee] {
    width: 76px;
    height: 36px;
    background: rgba(0, 0, 0, .6);
    border-radius: 20px;
    position: absolute;
    bottom: -5%;
    left: 50%;
    transform: translateX(-50%)
}

.pic-box.show .continue .pic-num[data-v-74f94aee] {
    width: 76px;
    height: 36px;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.pic-box.show .continue .pic-num span[data-v-74f94aee] {
    display: flex;
    align-items: center;
    justify-content: center
}

[is-mobile] .pic-box.show .ctrl-btn[data-v-74f94aee] {
    width: 40px;
    height: 80px;
    background: rgba(0, 0, 0, .6)
}

[is-mobile] .pic-box.show .ctrl-btn .iconfont[data-v-74f94aee] {
    font-size: 20px
}

[is-mobile] .pic-box.show .ctrl-btn.left-btn[data-v-74f94aee] {
    left: 0;
    border-radius: 0 40px 40px 0
}

[is-mobile] .pic-box.show .ctrl-btn.left-btn .icon[data-v-74f94aee] {
    margin-right: 5px
}

[is-mobile] .pic-box.show .ctrl-btn.right-btn[data-v-74f94aee] {
    right: 0;
    border-radius: 40px 0 0 40px
}

[is-mobile] .pic-box.show .ctrl-btn.right-btn .icon[data-v-74f94aee] {
    margin-left: 8px
}

[is-mobile] .pic-box.show .continue[data-v-74f94aee] {
    width: 76px;
    height: 36px;
    background: rgba(0, 0, 0, .6);
    border-radius: 20px;
    position: absolute;
    bottom: -6%;
    left: 50%;
    transform: translateX(-50%)
}

[is-mobile] .pic-box.show .continue .pic-num[data-v-74f94aee] {
    width: 76px;
    height: 36px;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

[is-mobile] .pic-box.show .continue .pic-num span[data-v-74f94aee] {
    display: flex;
    align-items: center;
    justify-content: center
}

.batsu {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 8px;
    right: 50px;
    cursor: pointer;
    z-index: 10
}

.batsu::before, .batsu::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: .1rem;
    height: 18px;
    background: #FFF
}

[is-mobile] .batsu {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 5px;
    right: 5px;
    cursor: pointer
}

.batsu::before {
    transform: translate(-50%, -50%) rotate(45deg)
}

.batsu::after {
    transform: translate(-50%, -50%) rotate(-45deg)
}

.over-box .image-item[data-v-64a0bf6a] {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: translateX(0);
    text-align: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    overflow: hidden
}

.over-box .image-item img[data-v-64a0bf6a] {
    height: 100%;
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    touch-action: none
}

.pic-box .image-list[data-v-64a0bf6a] {
    width: 100%;
    height: 100%;
    position: relative;
    transition: all .3s linear
}

.tag-layer .tag-info .tag-metas .pic-box .image-list .image-item {
    background-size: contain
}

.pic-box .image-list .image-item[data-v-64a0bf6a] {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: translateX(0);
    text-align: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    overflow: hidden
}

.pic-box .image-list .image-item img[data-v-64a0bf6a] {
    height: 100%;
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    touch-action: none;
    cursor: grab
}

.playing {
    -webkit-animation: spinner 4s linear infinite;
    animation: spinner 4s linear infinite
}

@keyframes spinner {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(1turn)
    }
}

@keyframes quiet {
    25% {
        transform: scaleY(.6)
    }
    50% {
        transform: scaleY(.4)
    }
    75% {
        transform: scaleY(.8)
    }
}

@keyframes normal {
    25% {
        transform: scaleY(1)
    }
    50% {
        transform: scaleY(.4)
    }
    75% {
        transform: scaleY(.6)
    }
}

@keyframes loud {
    25% {
        transform: scaleY(1)
    }
    50% {
        transform: scaleY(.4)
    }
    75% {
        transform: scaleY(1.2)
    }
}

body {
    display: flex;
    justify-content: center;
    background: #000;
    margin: 0;
    padding: 0;
    align-items: center;
    height: 100vh
}

.information[data-v-77262bee] {
    position: absolute;
    left: 0;
    top: 20px;
    height: 34px;
    border-radius: 0 34px 34px 0;
    background: rgba(0, 0, 0, .3);
    pointer-events: all;
    color: hsla(0, 0%, 100%, .88);
    z-index: 100
}

.information.mobile[data-v-77262bee] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: none;
    height: 0
}

.header[data-v-0165efd6] {
    position: absolute;
    top: .3rem;
    left: 0;
    height: 1.15789rem;
    width: 100%;
    z-index: 101;
    color: #fff;
    display: flex;
    align-items: center;
    text-shadow: 0 0 4px rgba(0, 0, 0, .4)
}

.header .left[data-v-0165efd6] {
    width: 1rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.header .left .back-pano[data-v-0165efd6] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.information[data-v-77262bee] .icon {
    cursor: pointer;
    display: flex;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    align-items: center;
    justify-content: flex-start;
    color: inherit
}

.header .left .back-pano i[data-v-0165efd6] {
    font-size: .6rem;
    position: static
}

.header .left .back[data-v-0165efd6] {
    width: .78rem;
    height: .78rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    position: relative
}

.header .left .back i[data-v-0165efd6] {
    font-size: .3rem;
    width: auto;
    position: static
}

.header .title[data-v-0165efd6] {
    flex: 1;
    width: 100%;
    font-size: .42105rem;
    letter-spacing: 1px
}

.header .title[data-v-0165efd6], .header .title > div[data-v-0165efd6] {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center
}

.header .title > div[data-v-0165efd6] {
    transition: background .3s ease, min-width .3s ease, border-radius .3s ease;
    padding-right: 12px;
    padding-left: 12px;
    white-space: nowrap;
    position: absolute;
    min-width: 100%;
    overflow: visible;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .15) 50%, transparent)
}

.header .title span[data-v-0165efd6] {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 7rem
}

.header .title i[data-v-0165efd6] {
    transition: all .3s;
    position: absolute;
    left: 50%;
    bottom: -.08rem;
    font-size: .3rem;
    transform: translateX(-50%);
    margin-bottom: .07rem
}

.header .right[data-v-0165efd6] {
    position: relative;
    width: 1.28rem;
    height: 100%;
    padding-right: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 11
}

.header .right > i[data-v-0165efd6] {
    font-size: .6rem
}

.header .content[data-v-0165efd6] {
    position: absolute;
    top: 1.6rem;
    left: .92105rem;
    right: .92105rem;
    padding: 10px;
    background: rgba(0, 0, 0, .5);
    border-radius: 5px;
    font-size: .36842rem;
    text-align: center
}

.header .content > div[data-v-0165efd6] {
    display: inline-block;
    text-align: left;
    letter-spacing: 1px;
    word-break: break-all;
    white-space: normal;
    line-height: 1.5
}

.header .content > div[data-v-0165efd6] p {
    word-break: break-word
}

.header .title.up > div[data-v-0165efd6] {
    min-width: 0;
    flex-shrink: 0;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 1.15789rem
}

.header .title.up i[data-v-0165efd6] {
    transform: translateX(-50%) rotate(180deg)
}

.video-box[data-v-02f198e3] {
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid hsla(0, 0%, 100%, .2);
    z-index: 10
}

.video-box[data-v-02f198e3], .video-box .play-layer[data-v-02f198e3] {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.video-box .loading-icon[data-v-02f198e3], .video-box .play-layer .play-btn[data-v-02f198e3] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.video-box .loading-icon[data-v-02f198e3] {
    color: var(--editor-main-color);
    -webkit-animation: rotate-02f198e3 2s linear infinite;
    animation: rotate-02f198e3 2s linear infinite;
    font-size: 30px
}

.video-box .video-item[data-v-02f198e3] {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.chapter.active {
    color: var(--colors-primary-base) !important
}

.description .text[data-v-c49ccfc6] {
    font-size: 13px
}

.show-tag[data-v-72658335] {
    pointer-events: auto;
    border-radius: 4px;
    min-width: 400px;
    padding: 0 20px 0 0;
    max-height: 50vh;
    overflow-y: auto;
    position: relative;
    border-radius: 8px
}

.show-tag[data-v-72658335]:before {
    content: "";
    position: fixed;
    width: calc(100% - 40px);
    border-radius: 8px;
    height: 100%;
    z-index: 1;
    top: 0;
    left: 0;
    background: rgba(27, 27, 28, .8)
}

.show-tag .show-content[data-v-72658335] {
    position: relative;
    z-index: 2
}

.show-tag .tag-title[data-v-72658335] {
    word-break: break-all
}

.show-tag .tag-title h2[data-v-72658335] {
    font-size: 20px;
    line-height: 30px;
    color: #fff;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

.show-tag .tag-title h2 > span[data-v-72658335] {
    width: 93%;
    text-align: justify
}

.show-tag .desc[data-v-72658335] {
    margin-top: 10px
}

.show-tag .desc .text[data-v-72658335] {
    font-size: 14px;
    color: #999;
    line-height: 20px;
    text-align: justify;
    word-break: break-all
}

.show-tag .tag-metas[data-v-72658335] {
    width: 100%;
    height: 225px;
    background: hsla(0, 0%, 100%, .1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    cursor: -webkit-zoom-in;
    margin-top: 20px
}

.del-btn[data-v-5675b14c], .web-box[data-v-5675b14c] {
    position: absolute;
    z-index: 10
}

.web-box[data-v-5675b14c] {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid hsla(0, 0%, 100%, .2);
    background: hsla(0, 0%, 100%, .1);
    top: 0;
    left: 0
}

.web-box .iframe-box[data-v-5675b14c] {
    position: absolute;
    top: 0;
    left: 0
}

.web-box .iframe-box[data-v-5675b14c], .web-box .iframe-box iframe[data-v-5675b14c] {
    width: 100%;
    height: 100%
}

.web-box .iframe-box[data-v-5675b14c], .web-box .iframe-box iframe[data-v-5675b14c] {
    width: 100%;
    height: 100%
}

.toggle {
    position: relative;
    width: 40px;
    height: 20px;
    margin: 10px 0 10px 10px;
    user-select: none;
    cursor: pointer
}

.toggle input[type=checkbox] {
    display: none
}

.toggle span {
    position: absolute;
    top: 4px;
    right: -141px;
    font-size: .95rem;
    line-height: 1;
    color: #FFF;
    -webkit-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
    white-space: nowrap;
    color: #FFF
}

.toggle.checked:after {
    left: 18px;
    box-shadow: 0 9px 28px -6px rgba(0, 0, 0, .5)
}

.button-switch {
    cursor: pointer
}

.big {
    min-width: 640px
}

.big .show-tag .tag-metas[data-v-26d14923] {
    height: 420px
}

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none
}

.image-list video.list {
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%
}

.image-list video.overlay {
    height: 100%;
    background-size: contain;
    background-position: 50%;
    object-fit: contain;
    touch-action: none;
    cursor: grab
}

.scene-loading *[data-v-538eeb47] {
    opacity: 1 !important
}

.scene-loading .logo[data-v-538eeb47] {
    width: 100%;
    color: #fff;
    font-size: 16px;
    text-align: center;
    opacity: 0
}

.scene-loading .logo div[data-v-538eeb47] {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
    min-height: 70px
}

.scene-loading .logo .logo-main[data-v-538eeb47] {
    width: 140px;
    height: 70px;
    position: absolute;
    left: 50%;
    top: 80%;
    transform: translateX(-50%) translateY(-50%)
}

.share-code[data-v-0b694f23] {
    width: 168px;
    height: 194px;
    background: rgba(27, 27, 28, .9);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25), inset 0 0 0 2px hsla(0, 0%, 100%, .1);
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #000;
    position: absolute;
    z-index: 10;
    pointer-events: auto;
    right: 0;
    top: -210px;
    padding: 20px;
    box-sizing: border-box
}

.share-code[data-v-0b694f23]:after {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    top: 1px;
    border: 1px solid hsla(0, 0%, 100%, .1);
    border-radius: 4px;
    z-index: 0;
    pointer-events: none
}

.share-code[data-v-0b694f23]:before {
    position: absolute;
    content: "";
    right: 10px;
    bottom: -10px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 10px solid rgba(0, 0, 0, .8)
}

.share-code canvas[data-v-0b694f23] {
    width: 128px !important;
    height: 128px !important;
    margin-bottom: 10px
}

.share-code p[data-v-0b694f23] {
    font-size: 12px;
    color: #fff;
    text-align: center;
    width: 120%;
    margin-left: -10%
}

.controls-right-buttons[data-v-0b694f23] {
    display: flex;
    margin-right: 20px;
    margin-bottom: 20px
}

.controls-right-buttons > div[data-v-0b694f23] {
    cursor: pointer;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background-color: rgba(0, 0, 0, .3);
    border-radius: 50%;
    font-size: 18px;
    position: relative
}

.controls-right-buttons .playing[data-v-0b694f23] {
    -webkit-animation: spinner-0b694f23 4s linear infinite;
    animation: spinner-0b694f23 4s linear infinite
}

@-webkit-keyframes spinner-0b694f23 {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(1turn)
    }
}

@keyframes spinner-0b694f23 {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(1turn)
    }
}

.toasted {
    font-size: 14px !important;
    min-height: 32px !important
}

.responsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0
}

.responsive-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.floor-switch[data-v-c09260a2] {
    pointer-events: all;
    position: fixed;
    left: 20px;
    z-index: 10;
    top: 55%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, .3);
    border-radius: 6px 6px 6px 6px;
    height: 50px;
    max-height: 50%;
    overflow: hidden;
    transition: all .3s;
    padding: 5px;
}

.floor-switch.scroll[data-v-c09260a2] {
    max-height: 50%;
    overflow-y: auto
}

.floor-switch .visible-name[data-v-c09260a2] {
    height: 40px;
    cursor: pointer;
    color: hsla(0, 0%, 100%, .7);
    font-size: 14px;
    line-height: 40px;
    max-width: 83vw;
    text-align: center;
    position: relative;
    color: #fff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.floor-switch .visible-name[data-v-c09260a2]:after {
    position: absolute;
    content: "";
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAACCAYAAAAesF8hAAAAAXNSR0IArs4c6QAAAFlJREFUKFOVj8EKgDAMQ98OXtT//9PpsRJYpJQ58BCakLYkLSI24ABOYB9cegXt2q830vb1+yrogHCPKe6dLy4/e9a9pQI58J8yq6Iq4KA5xCzMrGgN7rt3PmYWNgUKFvBpAAAAAElFTkSuQmCC) no-repeat;
    width: 24px;
    height: 1px;
    background-size: 100% 100%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5px
}

.floor-switch ul li[data-v-c09260a2] {
    height: 40px;
    cursor: pointer;
    color: hsla(0, 0%, 100%, .7);
    font-size: .9125rem;
    line-height: 40px;
    max-width: 83vw;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.floor-switch ul li[data-v-c09260a2]:hover {
    color: #fff
}

.floor-switch ul li.active[data-v-c09260a2] {
    color: #fff;
    position: relative
}

.floor-switch ul li.active[data-v-c09260a2]:after {
    position: absolute;
    content: "";
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAACCAYAAAAesF8hAAAAAXNSR0IArs4c6QAAAFlJREFUKFOVj8EKgDAMQ98OXtT//9PpsRJYpJQ58BCakLYkLSI24ABOYB9cegXt2q830vb1+yrogHCPKe6dLy4/e9a9pQI58J8yq6Iq4KA5xCzMrGgN7rt3PmYWNgUKFvBpAAAAAElFTkSuQmCC) no-repeat;
    width: 24px;
    height: 1px;
    background-size: 100% 100%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5px
}

[is-mobile] .floor-switch[data-v-c09260a2] {
    left: .5333rem;
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, .3);
    border-radius: .16rem;
    height: 1.3rem;
    padding: .1333rem .3467rem
}

[is-mobile] .floor-switch ul li[data-v-c09260a2] {
    height: 1.0667rem;
    cursor: pointer;
    color: hsla(0, 0%, 100%, .7);
    font-size: .3733rem;
    line-height: 1.0667rem;
    width: 100%;
    text-align: center
}

[is-mobile] .floor-switch ul li.active[data-v-c09260a2] {
    color: #fff
}

@media (orientation: landscape) {
    [is-mobile] .floor-switch[data-v-c09260a2] {
        padding: .32rem
    }

    [is-mobile] .floor-switch ul li[data-v-c09260a2] {
        height: .8rem;
        line-height: .8rem
    }

    [is-mobile] .floor-switch ul li span[data-v-c09260a2] {
        font-size: .25rem
    }
}

#snackbar {
    visibility: hidden;
    min-width: 300px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 14px;
    position: fixed;
    z-index: 100000;
    left: 48%;
    bottom: 30px
}

._show {
    visibility: visible !important;
}

@-webkit-keyframes _fade-in {
    from {
        bottom: 0;
        opacity: 0
    }
    to {
        bottom: 30px;
        opacity: 1
    }
}

@keyframes _fade-in {
    from {
        bottom: 0;
        opacity: 0
    }
    to {
        bottom: 30px;
        opacity: 1
    }
}

.show-tag .desc .text[data-v-26d14923] {
    font-size: 13.5px;
    max-height: 100px;
    overflow-y: scroll;
}

.w20 {
    width: 20px !important;
    height: 20px !important;
}