@font-face {
    font-family: Meike Package Icons;
    src: url(https://cdn.static.duomu.tv/common-assets/font/29338c308c6e47a5a8e7a1a4f7028820.eot);
    src: url(https://cdn.static.duomu.tv/common-assets/font/29338c308c6e47a5a8e7a1a4f7028820.eot#iefix) format("eot"), url(https://cdn.static.duomu.tv/common-assets/font/a0b68bf3591c710a87c10a7f95a52271.woff) format("woff"), url(https://cdn.static.duomu.tv/common-assets/font/b7e3e10e25865cbe752adf1ea5e517bd.ttf) format("truetype")
}

.mk-icon-calendar:before, .mk-icon-error:before, .mk-icon-info:before, .mk-icon-modal-close:before, .mk-icon-success:before, .mk-icon-triangle-next:before, .mk-icon-triangle-prev:before {
    font-family: Meike Package Icons;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    text-decoration: none;
    text-transform: none
}

.mk-icon-calendar:before {
    content: "\E001"
}

.mk-icon-error:before {
    content: "\E002"
}

.mk-icon-info:before {
    content: "\E003"
}

.mk-icon-modal-close:before {
    content: "\E004"
}

.mk-icon-success:before {
    content: "\E005"
}

.mk-icon-triangle-next:before {
    content: "\E006"
}

.mk-icon-triangle-prev:before {
    content: "\E007"
}

.mk-icon:before {
    display: inline-block;
    vertical-align: middle
}

.mk-alert__icon {
    font-size: 16px;
    width: 16px
}

.mk-alert__content {
    display: table-cell;
    padding: 0 8px
}

.mk-alert__title {
    font-size: 13px;
    line-height: 18px
}

.mk-alert__closebtn {
    font-size: 12px;
    color: #c0c4cc;
    opacity: 1;
    position: absolute;
    top: 12px;
    right: 15px;
    cursor: pointer
}

.mk-alert {
    width: 100%;
    padding: 8px 22px;
    margin: 0;
    box-sizing: border-box;
    border-radius: 4px;
    position: relative;
    background-color: #fff;
    overflow: hidden;
    opacity: 1;
    display: flex;
    align-items: center;
    transition: opacity .2s
}

.mk-alert--success {
    background-color: #f0f9eb;
    color: #67c23a
}

.mk-alert--info {
    background-color: #f4f4f5;
    color: #909399
}

.mk-alert--warning {
    background-color: #fdf6ec;
    color: #e6a23c
}

.mk-alert--error {
    background-color: #fef0f0;
    color: #f56c6c
}

.mk-alert-fade-enter, .mk-alert-fade-leave-active {
    opacity: 0
}

.mk-caret {
    width: 0;
    height: 0;
    right: 5px;
    margin-left: 2px;
    vertical-align: middle
}

.mk-caret-base {
    display: inline-block;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.mk-caret-top {
    border-top: 4px dashed
}

.mk-caret-bottom, .mk-caret-top {
    border-right: 4px solid transparent;
    border-left: 4px solid transparent
}

.mk-caret-bottom {
    border-bottom: 4px dashed
}

.date-picker {
    position: relative;
    color: #666
}

.date-picker__input {
    border: 1px solid #ccc;
    position: relative
}

.date-picker__input .mk-input__icon {
    cursor: pointer;
    padding: 0 10px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

.date-picker__input .form-control {
    padding: 0;
    border: 0;
    width: calc(100% - 35px);
    margin-left: 35px
}

.date-picker__panel {
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    font-size: 14px;
    padding: 10px 10px 5px
}

.date-picker__control {
    text-align: center;
    margin-bottom: 5px
}

.date-picker__control .triangle, .date-picker__control span {
    display: inline-block;
    vertical-align: middle
}

.date-picker__control span {
    margin: 0 20px
}

.date-picker__control .triangle {
    cursor: pointer;
    display: inline-block;
    transform: scale(.8);
    color: #b3b3b3
}

.date-picker__control .triangle:hover {
    color: #969696
}

.date-table {
    width: 100%
}

.date-table td {
    padding: 2px 5px;
    text-align: center
}

.date-table td .cell {
    cursor: pointer;
    border-radius: 100%;
    display: block;
    line-height: 25px;
    height: 25px;
    width: 25px
}

.date-table td .cell:hover {
    background: #e6e6e6
}

.date-table th {
    padding-bottom: 5px;
    font-weight: 400;
    border-bottom: 1px solid #ccc
}

.date-table th:first-child, .date-table th:last-child {
    color: #ff5933
}

.disabled .cell {
    cursor: not-allowed;
    color: #ccc
}

.disabled .cell:hover {
    background: transparent
}

.today .cell {
    color: #fff
}

.today .cell, .today .cell:hover {
    background: #b3b3b3
}

.active .cell {
    color: #fff
}

.active .cell, .active .cell:hover {
    background: #4cccbb
}

.next-month, .prev-month {
    color: #b3b3b3
}

.mk-slider {
    width: 100%
}

.mk-slider__runway {
    width: 100%;
    height: 4px;
    margin: 16px 0;
    background-color: #b3b3b3;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    vertical-align: middle
}

.mk-slider__runway.disabled {
    cursor: not-allowed;
    opacity: .8
}

.mk-slider__bar {
    height: 4px;
    background-color: #4cccbb;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    position: absolute
}

.mk-slider__button-wrapper {
    width: 12px;
    height: 12px;
    position: absolute;
    z-index: 1001;
    top: -4px;
    transform: translateX(-50%);
    background-color: transparent;
    text-align: center;
    user-select: none
}

.mk-slider__button-wrapper:after {
    content: " ";
    height: 100%;
    display: inline-block;
    vertical-align: middle
}

.mk-slider__button {
    width: 12px;
    height: 12px;
    background: #4cccbb;
    border-radius: 50%;
    transition: .2s;
    user-select: none
}

.mk-scrollbar {
    overflow: hidden;
    position: relative
}

.mk-scrollbar:active .mk-scrollbar__bar, .mk-scrollbar:focus .mk-scrollbar__bar, .mk-scrollbar:hover .mk-scrollbar__bar {
    opacity: 1;
    transition: opacity .34s ease-out
}

.mk-scrollbar__wrap {
    overflow: scroll;
    position: relative
}

.mk-scrollbar__wrap.mk-scrollbar__wrap--hidden-default::-webkit-scrollbar {
    width: 0;
    height: 0
}

.mk-scrollbar__bar {
    position: absolute;
    right: 0;
    bottom: 2px;
    z-index: 1;
    border-radius: 4px;
    opacity: 0;
    transition: opacity .12s ease-out
}

.mk-scrollbar__bar.is-vertical {
    width: 6px;
    top: 2px
}

.mk-scrollbar__bar.is-vertical > div {
    width: 100%
}

.mk-scrollbar__bar.is-horizontal {
    height: 6px;
    left: 2px
}

.mk-scrollbar__bar.is-horizontal > div {
    height: 100%
}

.mk-scrollbar__thumb {
    position: relative;
    display: block;
    width: 0;
    height: 0;
    cursor: pointer;
    border-radius: inherit;
    background-color: #e6e6e6;
    transition: background-color .3s
}

.mk-scrollbar__thumb:hover {
    background-color: #ccc
}

.mk-select {
    display: inline-block;
    position: relative
}

.mk-select:hover .mk-input__inner {
    border-color: #ccc
}

.mk-select > .mk-input {
    display: block;
    position: relative
}

.mk-select-dropdown {
    position: absolute;
    z-index: 1001;
    border: #ccc;
    border-radius: 2px;
    background-color: #fff;
    box-sizing: border-box;
    margin: 5px 0
}

.mk-select-dropdown .mk-select-dropdown__wrap {
    max-height: 150px
}

.mk-select-dropdown .mk-select-dropdown__list {
    list-style: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box
}

.mk-select-dropdown__item {
    font-size: 12px;
    padding: 8px 10px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    box-sizing: border-box;
    cursor: pointer
}

.mk-select-dropdown__item.selected {
    color: #4cccbb
}

.mk-select-dropdown__item.hover {
    background-color: #ccc
}

.mk-tooltip__popper {
    position: absolute;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.2;
    padding: 5px;
    z-index: 2000
}

.mk-tooltip__popper .popper__arrow, .mk-tooltip__popper .popper__arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid
}

.mk-tooltip__popper .popper__arrow {
    border-width: 6px
}

.mk-tooltip__popper .popper__arrow:after {
    content: " ";
    border-width: 5px
}

.mk-tooltip__popper[x-placement^=top] {
    margin-bottom: 9px
}

.mk-tooltip__popper[x-placement^=top] .popper__arrow {
    bottom: -6px;
    border-top-color: #333;
    border-bottom-width: 0
}

.mk-tooltip__popper[x-placement^=top] .popper__arrow:after {
    bottom: 1px;
    margin-left: -5px;
    border-top-color: #333;
    border-bottom-width: 0
}

.mk-tooltip__popper[x-placement^=bottom] {
    margin-top: 9px
}

.mk-tooltip__popper[x-placement^=bottom] .popper__arrow {
    top: -6px;
    border-top-width: 0;
    border-bottom-color: #333
}

.mk-tooltip__popper[x-placement^=bottom] .popper__arrow:after {
    top: 1px;
    margin-left: -5px;
    border-top-width: 0;
    border-bottom-color: #333
}

.mk-tooltip__popper[x-placement^=right] {
    margin-left: 12px
}

.mk-tooltip__popper[x-placement^=right] .popper__arrow {
    left: 6px;
    border-right-color: #333;
    border-left-width: 0
}

.mk-tooltip__popper[x-placement^=right] .popper__arrow:after {
    bottom: -5px;
    left: 1px;
    border-right-color: #333;
    border-left-width: 0
}

.mk-tooltip__popper[x-placement^=left] {
    margin-right: 9px
}

.mk-tooltip__popper[x-placement^=left] .popper__arrow {
    right: 6px;
    border-right-width: 0;
    border-left-color: #333
}

.mk-tooltip__popper[x-placement^=left] .popper__arrow:after {
    right: 1px;
    bottom: -5px;
    margin-left: -5px;
    border-right-width: 0;
    border-left-color: #333
}

.mk-tooltip__popper.is-dark {
    background: #333;
    color: #fff
}

.mk-tooltip__popper.is-white {
    background: #fff;
    color: #b3b3b3;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .15)
}

.mk-tooltip__popper.is-white[x-placement^=top] .popper__arrow, .mk-tooltip__popper.is-white[x-placement^=top] .popper__arrow:after {
    border-top-color: #fff
}

.mk-tooltip__popper.is-white[x-placement^=bottom] .popper__arrow, .mk-tooltip__popper.is-white[x-placement^=bottom] .popper__arrow:after {
    border-bottom-color: #fff
}

.mk-tooltip__popper.is-white[x-placement^=right] .popper__arrow, .mk-tooltip__popper.is-white[x-placement^=right] .popper__arrow:after {
    border-right-color: #fff
}

.mk-tooltip__popper.is-white[x-placement^=left] .popper__arrow, .mk-tooltip__popper.is-white[x-placement^=left] .popper__arrow:after {
    border-left-color: #fff
}

.picker {
    overflow: hidden
}

.picker .picker-toolbar {
    height: 40px
}

.picker-center-highlight {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    margin-top: -18px;
    pointer-events: none
}

.picker-center-highlight:after, .picker-center-highlight:before {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    background-color: #eaeaea;
    display: block;
    z-index: 15;
    transform: scaleY(.5)
}

.picker-center-highlight:before {
    left: 0;
    top: 0;
    bottom: auto;
    right: auto
}

.picker-center-highlight:after {
    left: 0;
    bottom: 0;
    right: auto;
    top: auto
}

.picker-slot-wrapper {
    transition-duration: .3s;
    transition-timing-function: ease-out;
    backface-visibility: hidden
}

.picker-slot-wrapper.dragging, .picker-slot-wrapper.dragging .picker-item {
    transition-duration: 0s
}

.picker-slot-absolute .picker-item {
    position: absolute
}

.picker-items {
    display: flex;
    justify-content: center;
    padding: 0;
    text-align: right;
    font-size: 24px;
    position: relative
}

.picker-slot {
    font-size: 18px;
    overflow: hidden;
    position: relative;
    max-height: 100%
}

.picker-slot.picker-slot-left {
    text-align: left
}

.picker-slot.picker-slot-center {
    text-align: center
}

.picker-slot.picker-slot-right {
    text-align: right
}

.picker-slot.picker-slot-divider {
    color: #000;
    display: flex;
    align-items: center
}

.picker-item {
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #707274;
    left: 0;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    transition-duration: .3s;
    backface-visibility: hidden;
    text-align: center
}

.picker-item.picker-item-far {
    pointer-events: none
}

.picker-item.picker-selected {
    color: #000;
    transform: translateZ(0) rotateX(0)
}

.picker-3d .picker-items {
    overflow: hidden;
    perspective: 700px
}

.picker-3d .picker-item, .picker-3d .picker-slot, .picker-3d .picker-slot-wrapper {
    transform-style: preserve-3d
}

.picker-3d .picker-slot {
    overflow: visible
}

.picker-3d .picker-item {
    transform-origin: center center;
    backface-visibility: hidden;
    transition-timing-function: ease-out
}

.mk-popover {
    position: absolute;
    min-width: 150px;
    border-radius: 2px;
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 10px;
    z-index: 2000;
    font-size: 12px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04)
}

.mk-popover .popper__arrow, .mk-popover .popper__arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid
}

.mk-popover .popper__arrow {
    border-width: 6px
}

.mk-popover .popper__arrow:after {
    content: " ";
    border-width: 6px
}

.mk-popover[x-placement^=top] {
    margin-bottom: 12px
}

.mk-popover[x-placement^=top] .popper__arrow {
    bottom: -6px;
    left: 50%;
    margin-right: 3px;
    border-top-color: #ccc;
    border-bottom-width: 0
}

.mk-popover[x-placement^=top] .popper__arrow:after {
    bottom: 1px;
    margin-left: -6px;
    border-top-color: #fff;
    border-bottom-width: 0
}

.mk-popover[x-placement^=bottom] {
    margin-top: 12px
}

.mk-popover[x-placement^=bottom] .popper__arrow {
    top: -6px;
    left: 50%;
    margin-right: 3px;
    border-top-width: 0;
    border-bottom-color: #ccc
}

.mk-popover[x-placement^=bottom] .popper__arrow:after {
    top: 1px;
    margin-left: -6px;
    border-top-width: 0;
    border-bottom-color: #fff
}

.mk-popover[x-placement^=right] {
    margin-left: 12px
}

.mk-popover[x-placement^=right] .popper__arrow {
    top: 50%;
    left: -6px;
    margin-bottom: 3px;
    border-right-color: #ccc;
    border-left-width: 0
}

.mk-popover[x-placement^=right] .popper__arrow:after {
    bottom: -6px;
    left: 1px;
    border-right-color: #fff;
    border-left-width: 0
}

.mk-popover[x-placement^=left] {
    margin-right: 12px
}

.mk-popover[x-placement^=left] .popper__arrow {
    top: 50%;
    right: -6px;
    margin-bottom: 3px;
    border-right-width: 0;
    border-left-color: #ccc
}

.mk-popover[x-placement^=left] .popper__arrow:after {
    right: 1px;
    bottom: -6px;
    margin-left: -6px;
    border-right-width: 0;
    border-left-color: #fff
}

.mk-color-picker-panel {
    width: 300px
}

.mk-color-picker-panel .mk-color-picker-panel__main-wrapper {
    position: relative;
    margin-bottom: 6px;
    height: 180px
}

.mk-color-picker-panel .mk-color-picker-panel__main-wrapper:after {
    content: "";
    display: table;
    clear: both
}

.mk-color-picker-panel .mk-color-picker-panel__btns {
    margin-top: 6px;
    text-align: right
}

.mk-color-picker-panel .mk-color-picker-panel__value {
    float: left;
    line-height: 26px;
    font-size: 12px;
    width: 160px
}

.mk-color-picker-panel .mk-color-picker-panel__btn {
    border: 1px solid #dcdcdc;
    color: #333;
    line-height: 24px;
    border-radius: 2px;
    padding: 0 20px;
    cursor: pointer;
    background-color: transparent;
    outline: none;
    font-size: 12px
}

.mk-color-picker-panel .mk-color-picker-panel__btn[disabled] {
    color: #ccc;
    cursor: not-allowed
}

.mk-color-picker-panel .mk-color-picker-panel__link-btn {
    cursor: pointer;
    text-decoration: none;
    padding: 15px;
    font-size: 12px
}

.mk-color-hue-slider {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    width: 100%;
    height: 12px;
    background-color: red;
    padding: 0 2px
}

.mk-color-hue-slider .mk-color-hue-slider__bar {
    position: relative;
    background: linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
    height: 100%
}

.mk-color-hue-slider .mk-color-hue-slider__thumb {
    position: absolute;
    cursor: pointer;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    border-radius: 1px;
    background: #fff;
    border: 1px solid #f0f0f0;
    box-shadow: 0 0 2px rgba(0, 0, 0, .6);
    z-index: 1
}

.mk-color-hue-slider.vertical {
    position: relative;
    width: 12px;
    height: 100%;
    padding: 2px 0
}

.mk-color-hue-slider.vertical .mk-color-hue-slider__bar {
    background: linear-gradient(180deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)
}

.mk-color-hue-slider.vertical .mk-color-hue-slider__thumb {
    left: 0;
    top: 0;
    width: 100%;
    height: 4px
}

.mk-color-svpanel {
    position: relative;
    height: calc(100% - 20px)
}

.hue-slider-vertical .mk-color-svpanel {
    margin-right: 20px;
    height: 100%
}

.mk-color-svpanel .mk-color-svpanel__black, .mk-color-svpanel .mk-color-svpanel__white {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.mk-color-svpanel .mk-color-svpanel__white {
    background: linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0))
}

.mk-color-svpanel .mk-color-svpanel__black {
    background: linear-gradient(0deg, #000, transparent)
}

.mk-color-svpanel .mk-color-svpanel__cursor {
    position: absolute
}

.mk-color-svpanel .mk-color-svpanel__cursor > div {
    cursor: head;
    width: 4px;
    height: 4px;
    box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, .3), 0 0 1px 2px rgba(0, 0, 0, .4);
    border-radius: 50%;
    transform: translate(-2px, -2px)
}

.mk-color-alpha-slider {
    position: relative;
    box-sizing: border-box;
    width: 280px;
    height: 12px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)
}

.mk-color-alpha-slider .mk-color-alpha-slider__bar {
    position: relative;
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, #fff);
    height: 100%
}

.mk-color-alpha-slider .mk-color-alpha-slider__thumb {
    position: absolute;
    cursor: pointer;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    border-radius: 1px;
    background: #fff;
    border: 1px solid #f0f0f0;
    box-shadow: 0 0 2px rgba(0, 0, 0, .6);
    z-index: 1
}

.mk-color-alpha-slider.vertical {
    width: 20px;
    height: 180px
}

.mk-color-alpha-slider.vertical .mk-color-alpha-slider__bar {
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, #fff)
}

.mk-color-alpha-slider.vertical .mk-color-alpha-slider__thumb {
    left: 0;
    top: 0;
    width: 100%;
    height: 4px
}

.mk-color-picker {
    display: inline-block;
    position: relative;
    line-height: normal;
    height: 40px
}

.mk-color-picker .disabled .el-color-picker__trigger {
    cursor: not-allowed
}

.mk-color-picker .mk-color-picker__mask {
    height: 38px;
    width: 38px;
    border-radius: 4px;
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 1;
    cursor: not-allowed;
    background-color: hsla(0, 0%, 100%, .7)
}

.mk-color-picker .mk-color-picker__trigger {
    display: inline-block;
    box-sizing: border-box;
    height: 40px;
    width: 40px;
    padding: 4px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 0;
    position: relative;
    cursor: pointer
}

.mk-color-picker .mk-color-picker__color {
    position: relative;
    display: block;
    box-sizing: border-box;
    border: 1px solid #999;
    width: 100%;
    height: 100%;
    text-align: center
}

.mk-color-picker .mk-color-picker__color .alpha {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)
}

.mk-color-picker .mk-color-picker__color-inner {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0
}

.mk-color-picker .mk-color-picker__empty {
    color: #999
}

.mk-color-picker .mk-color-picker__empty, .mk-color-picker .mk-color-picker__icon {
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0) scale(.8)
}

.mk-color-picker .mk-color-picker__icon {
    display: inline-block;
    width: 100%;
    text-align: center
}

.mk-color-picker .mk-color-picker__panel {
    position: absolute;
    z-index: 10;
    padding: 6px
}

.mk-modal__wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0
}

.mk-modal {
    position: relative;
    margin: 0 auto 50px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    border-radius: 4px;
    box-sizing: border-box;
    width: 50%
}

.mk-modal .fullscreen {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    height: 100%;
    overflow: auto
}

.mk-modal--center {
    text-align: center;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.mk-modal--center .mk-modal__header {
    padding-top: 30px
}

.mk-modal--center .mk-modal__body {
    text-align: initial
}

.mk-modal--center .mk-modal__footer {
    text-align: initial;
    padding-bottom: 30px
}

.mk-modal__header {
    padding: 15px 15px 10px
}

.mk-modal__headerbtn {
    top: 15px;
    right: 15px;
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 12px
}

.mk-modal__title {
    line-height: 24px;
    font-size: 18px
}

.mk-modal__body {
    padding: 30px 20px;
    line-height: 24px;
    font-size: 14px
}

.mk-modal__footer {
    padding: 10px 15px 15px;
    text-align: right;
    box-sizing: border-box
}

.dialog-fade-enter-active {
    animation: dialog-fade-in .3s
}

.dialog-fade-leave-active {
    animation: dialog-fade-out .3s
}

@keyframes dialog-fade-in {
    0% {
        transform: translate3d(0, -20px, 0);
        opacity: 0
    }
    to {
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes dialog-fade-out {
    0% {
        transform: translateZ(0);
        opacity: 1
    }
    to {
        transform: translate3d(0, -20px, 0);
        opacity: 0
    }
}

.message-alert {
    width: 380px;
    box-sizing: border-box;
    border-radius: 4px;
    position: fixed;
    right: 50%;
    transform: translateX(50%);
    background-color: #edf2fc;
    transition: opacity .3s, transform .4s, position .4s, bottom .4s, top .4s;
    overflow: hidden;
    padding: 19px 15px 19px 20px;
    display: flex
}

.message-alert p {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    margin: 0
}

.message-alert.closable p {
    padding-right: 16px
}

.message__close-btn {
    position: absolute;
    top: calc(50% - 2px);
    right: 15px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #666;
    font-size: 22px
}

.message-alert--error {
    background-color: #fff0ed;
    color: #f96444
}

.message-alert--error .message__close-btn {
    color: #f96444
}

.message-alert--success {
    background-color: #eaf9f4;
    color: #4cccbb
}

.message-alert--success .message__close-btn {
    color: #4cccbb
}

.message-alert--info {
    background-color: #f4f4f4;
    color: #666
}

.message-alert--info .message__close-btn {
    color: #666
}

.message-alert--warning {
    background-color: #fff4e6;
    color: #ff9100
}

.message-alert--warning .message__close-btn {
    color: #ff9100
}

.message-fade-enter, .message-fade-leave-active {
    transform: translate(50%, 100%);
    opacity: 0
}

.mk-message__icon {
    display: flex;
    margin-right: 15px
}

.mk-message__icon:before {
    position: relative;
    top: 3px
}

.msgbox-fade-enter-active {
    animation: msgbox-fade-in .3s
}

.msgbox-fade-leave-active {
    animation: msgbox-fade-out .3s
}

@keyframes msgbox-fade-in {
    0% {
        transform: translate3d(0, -20px, 0);
        opacity: 0
    }
    to {
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes msgbox-fade-out {
    0% {
        transform: translateZ(0);
        opacity: 1
    }
    to {
        transform: translate3d(0, -20px, 0);
        opacity: 0
    }
}

.mk-message-box__wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center
}

.mk-message-box__wrapper:after {
    content: " ";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle
}

.mk-message-box__backdrop {
    background-color: hsla(0, 0%, 100%, 0)
}

.mk-message-box {
    display: inline-block;
    width: 480px;
    padding-bottom: 10px;
    vertical-align: middle;
    background-color: #fff;
    border-radius: 4px;
    font-size: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    text-align: left;
    backface-visibility: hidden
}

.mk-message-box__header {
    position: relative;
    padding: 20px 20px 10px
}

.mk-message-box__title {
    padding-left: 0;
    margin-bottom: 0;
    font-size: 20px;
    line-height: 1;
    color: #333
}

.mk-message-box__headerbtn {
    position: absolute;
    top: 0;
    right: -50px;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 30px;
    cursor: pointer;
    transform: scale(1.4)
}

.mk-message-box__headerbtn .mk-message-box__close {
    color: #ccc
}

.mk-message-box__headerbtn:focus .mk-message-box__close, .mk-message-box__headerbtn:hover .mk-message-box__close {
    color: #aaa
}

.mk-message-box__content {
    position: relative;
    padding: 15px 20px;
    color: #666;
    font-size: 16px
}

.mk-message-box__status {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px !important
}

.mk-message-box__status:before {
    padding-left: 1px
}

.mk-message-box__status + .el-message-box__message {
    padding-left: 36px;
    padding-right: 12px
}

.mk-message-box__message {
    margin: 0
}

.mk-message-box__message p {
    margin: 0;
    line-height: 24px
}

.mk-message-box__btns {
    padding: 5px 15px 0;
    text-align: right
}

.mk-message-box__btns button:nth-child(2) {
    margin-left: 10px
}

.mk-message-box--center {
    padding-bottom: 30px
}

.mk-message-box--center .mk-message-box__header {
    padding-top: 20px
}

.mk-message-box--center .mk-message-box__title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.mk-message-box--center .mk-message-box__status {
    position: relative;
    top: auto;
    padding-right: 5px;
    text-align: center;
    transform: translateY(-1px)
}

.mk-message-box--center .mk-message-box__message {
    margin-left: 0
}

.mk-message-box--center .mk-message-box__btns, .mk-message-box--center .mk-message-box__content {
    text-align: center
}

.mk-message-box--center .mk-message-box__content {
    padding-left: 32px;
    padding-right: 32px
}

.mk-autocomplete {
    display: inline-block;
    position: relative
}

.mk-autocomplete-suggestion {
    background-color: #fff
}

.mk-autocomplete-suggestion__wrap {
    max-height: 200px
}

.mk-autocomplete-suggestion__item {
    padding: 8px 10px
}

.mk-autocomplete-suggestion__item:hover {
    background-color: #ccc;
    cursor: pointer
}

.mk-autocomplete-suggestion__list {
    list-style: none;
    padding-left: 0
}

/*! Depth */
.mk-checkbox {
    cursor: pointer;
    user-select: none
}

.mk-checkbox:hover .mk-checkbox__inner {
    border-color: #4777ff
}

.mk-checkbox__input .checkbox-form-control {
    cursor: pointer;
    display: none
}

.mk-checkbox__input.checked .mk-checkbox__inner {
    border-color: #4777ff
}

.mk-checkbox__input.checked .mk-checkbox__inner:before {
    opacity: 1
}

.mk-checkbox__inner {
    position: relative;
    border-radius: 4px;
    width: 12px;
    height: 12px;
    border: 1px solid #ccc;
    display: inline-block;
    vertical-align: middle;
    transition: all .2s ease-in-out
}

.mk-checkbox__inner:after, .mk-checkbox__inner:before {
    content: " ";
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0;
    transition: all .2s ease-out
}

.mk-checkbox__inner:before {
    bottom: 4px;
    right: 2px;
    z-index: 2;
    width: 6px;
    height: 3px;
    border-bottom-left-radius: 2px;
    border-bottom: 2px solid #4777ff;
    border-left: 2px solid #4777ff;
    transform: rotate(-50deg)
}

.mk-checkbox__label {
    display: inline-block;
    vertical-align: middle
}

.mk-modal__wrapper {
    background-color: hsla(0, 0%, 93.7%, .9)
}

.mk-modal__wrapper.full-screen .mk-modal {
    width: 100%;
    height: 100%;
    background: #fff;
    margin: 0 !important
}

.mk-modal__wrapper.scroll-bar {
    box-sizing: border-box;
    padding-right: 15px
}

.mk-modal__wrapper.no-backdrop {
    background-color: transparent
}

.mk-modal__wrapper .mk-modal {
    width: 720px
}

.mk-modal__wrapper.mk-modal--sm .mk-modal {
    width: 480px
}

.mk-modal__wrapper.mk-modal--lg.mk-modal {
    width: 900px
}

.mk-modal {
    width: 720px
}

.mk-modal.mk-modal--sm {
    width: 480px
}

.mk-modal.mk-modal--lg {
    width: 900px
}

@media (max-width: 767px) {
    .mk-modal {
        width: 95% !important
    }

    .mk-modal .mk-modal__headerbtn {
        right: 10px;
        top: 5px
    }
}

.mk-modal--opaque {
    background: transparent;
    box-shadow: none
}

.mk-modal--below-header {
    padding-top: 65px
}

.mk-modal__header {
    padding: 20px 30px
}

.mk-modal--sm .mk-modal__header {
    padding: 30px 30px 20px
}

.mk-modal--lg .mk-modal__header {
    padding: 25px 20px 20px
}

.mk-modal__headerbtn {
    display: inline-block;
    position: absolute;
    top: 0;
    right: -50px;
    font-size: 28px;
    color: #ccc;
    transform: scale(1.4)
}

.mk-modal__headerbtn:hover {
    color: #aaa
}

.mk-modal__title {
    font-size: 20px;
    color: #333
}

.mk-modal__body {
    padding: 0 30px 20px
}

.mk-modal--sm .mk-modal__body {
    padding: 0 30px 30px
}

.mk-modal--lg .mk-modal__body {
    padding: 0 20px 25px
}

.v-modal {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0
}

.mk-select {
    user-select: none
}

.mk-select .mk-caret-base {
    right: 10px
}

.mk-select .chevron {
    right: 10px;
    color: #ccc
}

.mk-select .chevron.bb:before {
    transform: none
}

.mk-select.hover .form-control {
    border-color: #999
}

.mk-select .form-control, .mk-select .form-control[readonly] {
    cursor: pointer;
    font-size: 14px;
    background-color: transparent;
    padding: 8px 10px;
    user-select: none
}

.mk-select-dropdown {
    box-shadow: 0 0 .5rem rgba(51, 51, 51, .2)
}

.dm-select-dropdown {
    z-index: 1000001 !important
}

.dm-select-dropdown .mk-scrollbar__wrap {
    max-height: 400px
}

.dm-select-dropdown .mk-select-dropdown__item {
    min-width: 100px
}

.dm-select-dropdown .mk-scrollbar__bar {
    display: none
}

.dm-select-dropdown .dm-option {
    width: 100%;
    float: left
}

.dm-options {
    width: 100%
}

.dm-options:after {
    content: "";
    display: block;
    clear: both
}

.mk-select-dropdown__item {
    text-align: center;
    font-size: 14px
}

.mk-select-dropdown__item.selected {
    color: #4777ff
}

.mk-select-dropdown__item.hover {
    background-color: #efefef
}

.mk-popover {
    border: 0;
    border-radius: 4px;
    box-shadow: 0 .15rem .5rem rgba(51, 51, 51, .2)
}

.mk-popover.hint .mk-popover__title {
    color: #ff6544
}

.mk-slider__bar {
    background-color: #4777ff
}

.mk-slider__button-wrapper {
    top: -5px
}

.mk-slider__button {
    background-color: #fff;
    border: 2px solid #aaa;
    width: 11px;
    height: 11px
}

.mk-slider__button.dragging, .mk-slider__button:hover {
    border-color: #4777ff
}

.mk-slider__runway {
    background-color: #ddd
}

.message-alert {
    box-shadow: 0 .15rem .5rem rgba(51, 51, 51, .2)
}

.message-alert.update .sub-title {
    font-size: 14px;
    line-height: 1
}

.message-alert.update .sub-title .bb:before {
    margin-top: -3px;
    padding-right: 5px;
    transform: unset;
    color: #4777ff
}

.message-alert.update .sub-title .reload {
    color: #4777ff;
    text-decoration: underline;
    cursor: pointer
}

.mk-alert__closebtn {
    top: 6px;
    font-size: 20px
}

.mk-message-box {
    position: relative;
    text-align: center;
    top: -10vh;
    padding-bottom: 30px
}

@media (max-width: 767px) {
    .mk-message-box {
        width: 95%
    }

    .mk-message-box .mk-message-box__headerbtn {
        right: 10px;
        top: 5px
    }
}

.mk-message-box__headerbtn {
    top: -11px
}

.mk-message-box__wrapper {
    z-index: 1000001 !important
}

.mk-message-box__backdrop {
    background-color: hsla(0, 0%, 100%, .95)
}

.mk-message-box__content {
    padding: 30px
}

.mk-message-box__message p {
    font-size: 14px
}

.mk-message-box__btns {
    text-align: center
}

.mk-message-box__btns .btn {
    min-width: 90px;
    font-size: 14px
}

.mk-message-box__btns .cancel-button {
    color: #666;
    border-color: #999
}

.mk-message-box__btns .cancel-button:hover {
    color: #333;
    border-color: #666
}

.mk-textarea textarea {
    resize: none
}

.showError .input-wrap.mk-input .form-control {
    border-color: #ff6544
}

.form-control:disabled {
    color: #aaa;
    border-color: #ddd;
    background-color: #f9f9f9
}

.mk-autocomplete .form-control {
    background-color: #fff
}

.mk-autocomplete-suggestion {
    box-shadow: 0 .25rem .5rem rgba(51, 51, 51, .2)
}

.mk-autocomplete-suggestion ul {
    margin: 0
}

.mk-autocomplete-suggestion__item {
    text-align: center
}

.mk-autocomplete-suggestion__item:hover {
    background-color: #efefef
}

.message-alert--error, .message-alert--info, .message-alert--success, .message-alert--warning {
    z-index: 2000000 !important
}

body .video-js {
    margin-left: auto;
    margin-right: auto
}

body .video-js .vjs-big-play-button {
    height: 2em;
    width: 2em;
    border-radius: 50%;
    line-height: 1.8;
    margin-left: -1em;
    margin-top: -1em
}

body .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    transform: scale(1.4) translateY(1px)
}

body .vjs-button > .vjs-icon-placeholder:before {
    line-height: 2
}

body .video--no-background.video-js, body .video--no-background .video-js {
    background-color: transparent
}

body .video--no-background.video-js .vjs-poster, body .video--no-background .video-js .vjs-poster {
    background-color: transparent;
    outline: none
}

.video--poster-overlayed .vjs-poster:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .2)
}

.index-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    height: 64px;
    background-color: #fff;
    border-bottom: 1px solid #ccc
}

.index-header .header-inner {
    margin: 0 auto;
    padding-left: 5px;
    padding-right: 5px;
    position: relative
}

.index-header .header-link {
    line-height: 30px;
    padding-top: 17px;
    padding-bottom: 17px;
    display: inline-block;
    vertical-align: middle;
    letter-spacing: .075em;
    margin-right: 15px
}

.index-header .btn {
    margin: 14.5px 15px 14.5px 0;
    border-radius: 18px;
    width: 80px;
    padding-left: 0;
    padding-right: 0
}

.index-header .btn:last-child {
    margin-right: 0
}

.index-header .recharge-btn {
    padding: 5px;
    border-radius: 6px;
    width: 6em
}

.index-header .logo {
    padding: 20px 0 14px;
    height: 30px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle
}

.index-header .left-absolute-position, .index-header .right-absolute-position {
    position: absolute;
    top: 0;
    bottom: 0
}

.index-header .left-absolute-position {
    left: 50px
}

.index-header .right-absolute-position {
    right: 50px
}

.index-header .right-absolute-position.buy {
    right: 100px
}

.index-header .right-position {
    float: right
}

.index-header .logo-link h4 {
    width: 4em;
    display: inline-block
}

.index-header .link-index-header {
    position: relative;
    margin-right: 30px;
    color: #666
}

.index-header .link-index-header span {
    position: relative;
    float: left;
    display: block
}

.index-header .link-index-header span:before {
    content: " ";
    position: absolute;
    height: 2px;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    transform: scale(0);
    transition: transform .2s ease-out
}

.index-header .link-index-header.active span:before, .index-header .link-index-header:hover span:before {
    color: #333;
    transform: scale(1);
    background-color: #4777ff
}

.index-header .header-pop {
    position: absolute;
    top: 64px;
    left: 0;
    background: #fff;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 10px 20px 0 rgba(51, 57, 79, .1);
    border-top: 1px solid #ccc
}

.index-header .header-pop .header-link {
    padding: 17px 20px;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box
}

.index-header .header-pop .header-link:hover {
    background: #efefef
}

.index-header .header-pop .bb-chevron-right {
    color: #b3b3b3
}

.index-header .header-pop .bb-chevron-right:before {
    transform: scale(1.1)
}

.index-header .mb {
    display: none
}

.index-header .mb-menu {
    line-height: 64px;
    margin-right: 15px
}

.index-header .mb-menu .header-link {
    padding: 0
}

.index-header .mb-menu:before {
    padding: 9px 7px;
    line-height: 1;
    border-radius: 7px
}

.index-header .mb-menu.active:before {
    color: #4777ff;
    background: #efefef
}

@media (max-width: 767px) {
    .index-header .logo {
        margin-left: 15px
    }

    .index-header.app-header .logo, .index-header.app-header .logo-link {
        margin-left: 0
    }

    .index-header.app-header .left-absolute-position {
        left: 30px
    }

    .index-header .pc {
        display: none
    }

    .index-header .mb {
        display: block
    }
}

.nav-tabs .nav-item {
    position: relative;
    cursor: pointer;
    display: inline-block;
    color: #999;
    padding-bottom: 8px
}

.nav-tabs .nav-item.active {
    color: #4777ff
}

.nav-tabs .nav-item.active:after {
    transform: scale(1) translateX(-50%)
}

.nav-tabs .nav-item:after {
    content: " ";
    position: absolute;
    bottom: 0;
    width: 30px;
    left: 50%;
    transform: scale(0) translateX(-50%);
    height: 2px;
    background-color: #4777ff;
    transition: all .2s ease-out
}

.picture-mask {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .3)
}

.form {
    position: relative
}

.form .error-placeholder {
    top: -25px;
    left: 50%;
    position: absolute;
    text-align: center;
    color: #ff6544;
    font-size: 14px;
    transform: translateX(-50%)
}

.form .submit-btn {
    width: 100%
}

.form-group-title {
    color: #999
}

.mk-form-item {
    margin-bottom: 15px
}

.mk-form-item .mk-form-item__content {
    position: relative;
    width: 100%
}

.mk-form-item .input-wrap {
    display: block;
    width: 100%
}

.mk-form-item__content {
    position: relative
}

.mk-form-item__content .error-hint {
    font-size: 14px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc(100% + 20px);
    width: 130px;
    text-align: left;
    padding: 10px;
    z-index: 1;
    background: #fff0ed;
    box-shadow: 0 0 20px rgba(0, 0, 0, .3);
    border-radius: 7px
}

.mk-form-item__content .error-hint .bb {
    color: #ff6544;
    margin: 0 5px 0 0
}

.mk-form-item__content .error-hint span {
    color: #666
}

.mk-form-item__content .error-hint:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 10px solid #fff0ed
}

.mk-form-item__content .error-hint.bottom {
    top: calc(100% + 20px);
    left: 50%;
    transform: translateX(-50%)
}

.mk-form-item__content .error-hint.bottom:after {
    left: 50%;
    top: -16px;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 10px solid #fff0ed
}

.mk-form-item__content .error-hint.top {
    top: unset;
    bottom: calc(100% + 20px);
    left: 50%;
    transform: translateX(-50%)
}

.mk-form-item__content .error-hint.top:after {
    left: 50%;
    top: unset;
    bottom: -16px;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid #fff0ed
}

.form__line {
    display: block
}

.form--align .form__line .control-label {
    display: inline-block;
    width: 4em
}

.form--align .form__line .mk-form-item__content {
    display: inline-block;
    width: calc(100% - 4em)
}

.form--hide-label .form__line .control-label {
    display: none
}

.form--hide-label .form__line .mk-form-item__content {
    width: 100%
}

.form-control {
    display: block;
    width: 100%;
    padding: 9px 10px;
    font-size: 14px;
    color: #666;
    background-color: #f9f9f9;
    background-image: none;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-sizing: border-box
}

.form-control:focus {
    border-color: #aaa;
    outline: 0
}

.form-control::-ms-expand {
    background-color: transparent;
    border: 0
}

.form-control::placeholder {
    color: #ccc;
    opacity: 1
}

.form-control:disabled, .form-control[readonly] {
    background-color: #aaa;
    opacity: 1
}

.form__actions .btn {
    width: 100%
}

.form--actions-centered .form__actions {
    text-align: center
}

.form--actions-centered .btn {
    width: 100px;
    margin: 10px
}

.form--label-inline .mk-form-item {
    position: relative
}

.form--label-inline .control-label {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    padding-left: 10px
}

.form--label-inline .form-control {
    padding-left: 6em
}

.form--label-stack .control-label {
    display: inline-block;
    margin-bottom: 5px;
    color: #999
}

.progress-bar {
    position: relative
}

.progress-bar .bar-wrap {
    height: 3px;
    border-radius: 5px
}

.progress-bar .bar-wrap.show-text {
    margin-right: 60px
}

.progress-bar .bar {
    height: 3px;
    border-radius: 5px;
    width: 0;
    transition: width .2s, opacity .4s;
    opacity: 1;
    background-color: #4777ff;
    z-index: 999999
}

.progress-bar .progress-text {
    position: absolute;
    right: 0;
    top: 1px
}

.progress-bar--has-bg .bar-wrap {
    background-color: #ccc
}

.pagination {
    width: 100%;
    list-style: none;
    text-align: center;
    padding: 0
}

.pagination .pager {
    margin: 0 5px;
    display: inline-block
}

.pagination .page-link {
    cursor: pointer;
    color: #ccc;
    padding: 5px 10px;
    border-radius: 4px;
    user-select: none
}

.pagination .page-link:hover {
    transition: all .2s ease-in;
    color: #666
}

.pagination .active-pager .page-link {
    color: #4777ff
}

.pagination .disabled-pager .page-link {
    cursor: not-allowed;
    color: #ccc
}

.pagination.theme-market-pagination, .pagination.video-list-pagination {
    margin-bottom: 50px
}

.router-button a {
    color: inherit
}

.cellphone-line {
    position: relative
}

.cellphone-line .security-select {
    width: 100%;
    background: #f9f9f9
}

.cellphone-line .security-select .form-control {
    padding-left: 20px;
    padding-top: 12px;
    padding-bottom: 12px
}

.cellphone-line .country-code-select {
    display: inline-block;
    width: 90px
}

.cellphone-line .country-code-select .chevron {
    right: 45px
}

.cellphone-line .cellphone-input .form-control {
    padding-left: 90px;
    height: 44px
}

.cellphone-line .cellphone-input .form-control:disabled {
    color: #aaa;
    border-color: #ddd;
    background-color: #f9f9f9
}

.security-select-dropdown .mk-select-dropdown__item {
    text-align: left;
    padding-left: 20px
}

.validation-code-line {
    width: 100%
}

.validation-code-line:after {
    display: block;
    clear: both;
    content: ""
}

.form .validation-code-line .input-wrap {
    float: left;
    width: calc(100% - 7em - 10px);
    margin-right: 10px
}

.validation-code-line .form-item__append {
    float: right
}

.validation-code-line .validation-code-btn {
    margin: 0;
    width: 7em;
    padding-top: 12px;
    padding-bottom: 12px
}

.validation-code-line .validation-code-input .form-control {
    margin: 0
}

.country-code {
    position: absolute;
    left: 0;
    top: 0
}

.country-code .country-code-select .form-control {
    cursor: pointer;
    padding-left: 50px;
    padding-top: 12px;
    padding-bottom: 12px;
    border: 0;
    background-color: transparent;
    user-select: none
}

.country-code .country-flag-img {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    overflow: hidden;
    height: 12px;
    width: 20px
}

.country-code .mk-caret {
    position: absolute;
    top: 50%;
    left: 32px;
    transform: translateY(-50%)
}

.country-code-dropdown {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    width: 90px
}

.country-code-dropdown .mk-scrollbar {
    overflow: hidden;
    position: relative
}

.country-code-dropdown .mk-select-dropdown__wrap {
    overflow: scroll;
    position: relative;
    max-height: 150px
}

.country-code-dropdown .mk-select-dropdown__list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    box-sizing: border-box
}

.country-code-dropdown .mk-select-dropdown__item {
    position: relative;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 14px;
    color: #666;
    overflow: hidden;
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis
}

.country-code-dropdown .mk-select-dropdown__item.hover {
    background-color: transparent
}

.country-code-dropdown .mk-select-dropdown__item:hover {
    background-color: #efefef;
    color: #666
}

.country-code-dropdown .mk-select-dropdown__item.selected {
    background-color: transparent;
    color: #4777ff
}

.country-code-dropdown .mk-select-dropdown__item.selected:hover {
    color: #4777ff
}

.avatar-wrap {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 100%;
    min-width: 30px;
    min-height: 30px
}

.avatar-wrap .avatar-img {
    max-height: 100%;
    min-width: 100%;
    display: block
}

.avatar-wrap.avatar-wrap-action {
    cursor: pointer
}

.avatar-wrap.circle .avatar-icon-wrap, .avatar-wrap.circle .avatar-img {
    border-radius: 50%
}

.avatar-wrap .avatar-icon-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #ddd;
    color: #fff;
    font-size: 20px
}

.avatar-wrap .avatar-icon-wrap .avatar-icon:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.wechat-qrcode {
    position: relative;
    display: inline-block;
    width: 140px;
    height: 140px
}

.wechat-qrcode.error {
    border: 1px solid #ccc
}

.wechat-qrcode .request-error-info {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 10px;
    right: 10px;
    width: calc(100% - 20px);
    transform: translateY(-50%)
}

.wechat-qrcode .request-error-info.past-due {
    width: 100%;
    height: 100%;
    background: hsla(0, 0%, 100%, .95);
    top: 0;
    transform: unset;
    left: 0;
    right: unset
}

.wechat-qrcode .request-error-info.past-due h6 {
    margin-top: 60px;
    color: #666
}

.wechat-qrcode .request-error-info.past-due .btn-theme-frame {
    margin-top: 10px;
    background-color: transparent
}

.wechat-qrcode .request-error-info.past-due .btn-theme-frame:hover {
    border-color: #2966ee;
    color: #2966ee
}

.wechat-qrcode .request-error-info h6 {
    color: #ff5933
}

.wechat-qrcode .request-error-info p {
    color: #aaa;
    margin-bottom: 0
}

.divider {
    user-select: none;
    line-height: 1
}

.divider span {
    display: inline-block
}

.waterfall {
    position: relative
}

.waterfall > div {
    position: absolute;
    transition: all .3s ease
}

.tag-query-theme .tag-label:hover {
    color: #4777ff
}

.tag-label {
    margin-right: 5px;
    margin-top: 5px;
    border-radius: 4px;
    padding: 2px 7px
}

.tag-label.active {
    background-color: #4777ff
}

.tag-label.active, .tag-label.active:hover {
    color: #fff
}

.tag-label:last-child {
    margin-right: 0
}

.header-user-info {
    color: #fff;
    display: inline-block;
    height: calc(100% - 30px)
}

.header-user-info .username {
    margin-left: 10px
}

.header-user-info .user-btn {
    display: inline-block;
    height: 100%;
    width: 100%;
    color: #fff;
    position: relative
}

.header-user-info .user-btn .subscript {
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: -4px;
    right: -6px
}

.header-user-info .avatar-wrap {
    width: 35px;
    height: 35px
}

.header-user-info__popover {
    padding: 0;
    border: 0;
    border-radius: 4px
}

.header-user-info__popover .info-item {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 20px;
    display: inline-block;
    font-size: 14px
}

.header-user-info__popover .info-item.border {
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd
}

.header-user-info__popover .info-item.action:hover {
    background-color: #efefef
}

.header-user-info__popover .info-item:last-child {
    border-bottom: 0
}

.header-user-info__popover .user-info-item {
    display: inline-block;
    padding: 20px
}

.header-user-info__popover .user-info-item .avatar-wrap {
    margin-left: 20px;
    height: 60px;
    width: 60px;
    display: inline-block;
    margin-right: 10px
}

.header-user-info__popover .user-info-item .avatar-wrap .avatar-icon-wrap {
    font-size: 35px
}

.header-user-info__popover .user-info-item .user-info {
    margin-right: 20px;
    display: inline-block;
    vertical-align: middle
}

.header-user-info__popover .user-info-item .user-info img {
    float: left;
    width: 22px;
    height: 22px
}

.header-user-info__popover .user-info-item .price {
    margin: 10px 0 0
}

.header-user-info__popover .user-info-item .price.experience {
    color: #999
}

.header-user-info__popover .user-info-item .price.basic {
    color: #ffac33
}

.header-user-info__popover .user-info-item .price.professional {
    color: #ff9333
}

.header-user-info__popover .user-info-item .price.enterprise {
    color: #ff6544
}

.header-user-info__popover .user-info-item p {
    margin: 0
}

.header-user-info__popover .balance-info-item {
    width: calc(100% - 40px);
    margin: 0 20px;
    padding: 10px 0 0
}

.header-user-info__popover .balance-info-item > div {
    margin-bottom: 10px
}

.header-user-info__popover dd, .header-user-info__popover dt {
    display: inline-block
}

.header-user-info__popover .bb {
    margin-right: 3px;
    color: #999
}

.header-user-info__popover .bb:before {
    transform: scale(1.2)
}

.header-user-info__popover dd {
    margin-left: 20px
}

.header-user-info__popover dd.five {
    margin-left: 6px
}

.header-user-info__popover .vip-ad {
    text-align: center;
    margin-bottom: 10px
}

.app-header {
    background-color: #33394f;
    border-bottom: none;
    text-align: center
}

.app-header .app-header-link {
    position: relative;
    color: #fff;
    font-size: 16px;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    line-height: 64px;
    margin-right: 1em;
    margin-left: 1em
}

.app-header .app-header-link:before {
    content: " ";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    width: 100%;
    background-color: #fff;
    transform: scale(0);
    transition: transform .2s ease-out
}

.app-header .app-header-link.router-link-active:not(.logo-link):before {
    transform: scale(1)
}

.app-header .user-btn {
    margin-left: 0
}

.app-header .logo-link h4 {
    color: #fff
}

.video-setting-title {
    font-size: 16px
}

.video-setting-title:after {
    content: "";
    clear: both
}

.video-setting-title .icons, .video-setting-title .mk-form-item {
    float: left;
    height: 41px;
    box-sizing: border-box;
    margin: 0
}

.video-setting-title .icons {
    margin-top: 15px
}

.video-setting-title .icons .bb {
    color: #999;
    cursor: pointer;
    margin-left: 8px
}

.video-setting-title .icons .bb-edit {
    display: none
}

.video-setting-title .icons .bb-success-big {
    color: #4777ff
}

.video-setting-title .icons .bb-close, .video-setting-title .icons .bb-success-big {
    font-size: 12px
}

.video-setting-title .icons .bb-close:before, .video-setting-title .icons .bb-success-big:before {
    transform: none
}

.video-setting-title .form-control {
    margin-top: 7px;
    font-size: 16px;
    background-color: transparent;
    border: none;
    border-bottom: 1px dashed transparent;
    border-radius: 0
}

.video-setting-title.active .bb-edit, .video-setting-title:hover .bb-edit {
    display: inline
}

.video-setting-title.active .form-control, .video-setting-title:hover .form-control {
    border-bottom: 1px dashed #999
}

.cover-upload .action-bar {
    margin-top: 10px;
    text-align: center
}

.cover-upload .action-bar .btn {
    width: 7em;
    margin-left: 8px;
    margin-right: 8px
}

.cover-upload__resource-modal .modal-resource-item .resource-preview-wrap:hover .viewer-type-image {
    display: none
}

.cover-editor .scale-editor {
    vertical-align: middle;
    width: calc(100% - 64px);
    margin-left: 10px
}

.cover-editor .cropper {
    margin-bottom: 10px
}

.cover-editor .cropper__img-container {
    margin: auto
}

.cover-editor .circle-border {
    width: 40px;
    height: 40px;
    padding: 0
}

.cover-editor .icon-wrap {
    font-size: 40px;
    text-align: center;
    margin-bottom: 40px;
    color: #ccc
}

.cover-editor .upload-btn {
    width: 10em
}

.cover-editor__scales .link {
    padding: 10px
}

.cover-editor__empty-holder {
    height: 300px;
    background: #efefef;
    border-radius: 4px
}

.video-download {
    font-size: 16px;
    margin-top: -15px
}

.video-download .download-res-item {
    margin-top: 10px
}

.video-download .resolution-item {
    margin: 15px 0
}

.video-download .resolution-item.check-list {
    margin: 12px 0
}

.video-download .resolution-item a {
    color: #fff
}

.video-download .resolution-item .btn {
    width: 8em
}

.video-download .resolution-label {
    color: #999
}

.video-download .resolution-label.checked {
    color: #333
}

.video-download .res-list {
    position: relative;
    box-sizing: border-box;
    border: 1px solid #ccc;
    padding: 20px 25px;
    border-radius: 5px;
    margin: 20px 0
}

.video-download .res-list .mk-alert {
    margin: 15px 0
}

.video-download .res-list .mk-alert__icon:before {
    transform: none
}

.video-download .res-list:last-child {
    margin-bottom: 20px
}

.video-download .res-list .title {
    display: inline-block;
    color: #333;
    font-size: 20px;
    border: 1px solid transparent
}

.video-download .res-list .vip-ad {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff url(https://cdn.static.duomu.tv/common-assets/download-background.jpg);
    background-size: cover;
    padding: 80px;
    box-sizing: border-box;
    text-align: center;
    transition: all .25s ease-in;
    z-index: 2
}

.video-download .res-list .vip-ad .title {
    color: #fff
}

.video-download .res-list .vip-btn {
    color: #ff6544;
    margin-top: 30px
}

.video-download .res-list .vip-btn.btn {
    display: inline-block;
    outline: none;
    background-color: #fff;
    background-clip: padding-box;
    box-shadow: 0 0 0 -2px #ff6544, 0 0 0 -1px #fff;
    border: none;
    transition: box-shadow .3s
}

.video-download .res-list .vip-btn.btn:focus, .video-download .res-list .vip-btn.btn:hover {
    box-shadow: 0 0 0 2px #ff6544, 0 0 0 4px #fff;
    transition-timing-function: cubic-bezier(.6, 4, .3, .8);
    animation: gelatine .5s 1
}

.video-download .vip-res-list:hover .vip-ad {
    opacity: 1
}

.video-download .water-mark {
    margin-left: 10px;
    font-size: 13px;
    padding: 0 12px;
    line-height: 22px;
    letter-spacing: .3px;
    display: inline-block;
    color: #ffac33;
    border: 1px solid #ffac33;
    border-radius: 12px
}

.video-download .water-mark.mark {
    color: #999;
    border-color: #999
}

.video-download .mk-checkbox__inner {
    border-radius: 2px;
    width: 20px;
    height: 20px
}

.video-download .mk-checkbox__inner:before {
    content: " ";
    position: absolute;
    bottom: 7px;
    right: 5px;
    z-index: 2;
    width: 8px;
    height: 5px;
    border-bottom-left-radius: 2px;
    border-bottom: 2px solid #4777ff;
    border-left: 2px solid #4777ff;
    transform: rotate(-50deg);
    transition: all .2s ease-out
}

.video-download .mk-checkbox.disabled {
    color: #999
}

.video-download .mk-checkbox.disabled .mk-checkbox__inner, .video-download .mk-checkbox.disabled .mk-checkbox__inner:before {
    border-color: #999
}

.video-download .generate-btn {
    width: 150px;
    height: 40px;
    box-sizing: border-box;
    margin: 15px auto 0;
    display: block
}

.video-download-wrapper .mk-modal {
    max-width: 480px
}

.video-ready-to-pay {
    padding: 0 40px
}

.video-ready-to-pay .title {
    text-align: center;
    margin-bottom: 20px
}

.video-ready-to-pay .content {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 10px 0
}

.video-ready-to-pay .content span {
    color: #4777ff;
    float: right
}

.video-ready-to-pay .content .error {
    color: #ff6544
}

.video-ready-to-pay .content.main-content {
    border-bottom: none
}

.video-ready-to-pay .content.main-content span {
    font-size: 18px
}

.video-ready-to-pay .mk-alert {
    margin-top: 20px;
    font-size: 13px
}

.video-ready-to-pay .mk-alert .mk-alert__title {
    color: #666
}

.video-ready-to-pay .mk-alert .bb:before {
    transform: none
}

.video-ready-to-pay .btn-list {
    margin: 20px 0;
    display: flex
}

.video-ready-to-pay .btn-list .btn {
    min-width: 130px;
    margin: 0 auto
}

.change-video-title {
    position: relative;
    display: inline-block
}

.change-video-title .form-control {
    color: #fff;
    display: inline-block;
    border: 0;
    border-bottom: 1px solid #fff;
    border-radius: 0;
    background-color: transparent
}

.change-video-title .form-control[readonly] {
    border-bottom: 0
}

.change-video-title .input-group__append {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%)
}

.change-video-title .input-group__append .link {
    color: #fff
}

.search-toggle {
    position: relative;
    display: inline-block;
    line-height: 1
}

.search-toggle .link {
    font-size: 18px
}

.search-toggle .bb-search {
    width: 30px;
    height: 30px
}

.search-toggle .bb-search:before {
    width: 25px;
    height: 25px
}

.search-toggle .form-control {
    padding: 10px 25px 6px 35px
}

.search-toggle .clear-btn {
    display: none;
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa
}

.search-toggle .search-toggle__input .form-control {
    border-bottom: 1px solid #fff
}

.search-toggle.is-focused .search-toggle__input {
    width: 150px
}

.search-toggle.is-focused .search-toggle__input .form-control {
    border-bottom: 1px solid #ccc
}

.search-toggle.is-focused .clear-btn {
    display: block
}

.search-toggle__input {
    position: relative;
    overflow: hidden;
    transition: width .2s ease-in-out;
    display: inline-block;
    width: 30px;
    z-index: 0
}

.search-toggle__input .form-control {
    border: 0;
    padding-left: 30px;
    background-color: transparent;
    border-radius: 0
}

.search-toggle__trigger {
    line-height: 1;
    position: absolute;
    color: #666;
    text-align: center;
    top: 5px;
    z-index: 2
}

.search-toggle__trigger .bb-search {
    display: inline-block;
    vertical-align: middle;
    height: 25px;
    width: 25px;
    color: #aaa;
    cursor: default
}

.search-toggle__trigger .bb-search:before {
    top: 5px;
    position: relative
}

.search-toggle__trigger--focus .bb-search {
    cursor: pointer
}

.search-toggle__trigger--focus:hover .bb-search {
    background-color: hsla(0, 0%, 62%, .2);
    border-radius: 50%;
    color: #666
}

.music-player-icon-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    transform: translate(-50%, -50%);
    z-index: 1
}

.cropper .cropper-img {
    position: absolute;
    display: block;
    cursor: move;
    user-select: none;
    max-width: none;
    max-height: none
}

.cropper .crop-wrap {
    position: relative
}

.cropper__img-container {
    position: relative;
    display: block;
    width: 100%;
    min-height: 200px;
    overflow: hidden
}

.cropper__img-wrap {
    position: absolute
}

.cropper__img-background, .cropper__img-frame {
    position: absolute;
    left: 0;
    top: 0
}

.svg-frame-display {
    position: absolute;
    width: 100%;
    height: 100%
}

.upload .upload__input {
    display: none
}

.render-status {
    background: #3f4652;
    color: #fff;
    margin-left: auto;
    margin-right: auto
}

.render-status .percentage {
    font-size: 2.6rem;
    margin-bottom: 20px
}

.render-status .help {
    cursor: pointer
}

.render-status .bottom-info {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 10px;
    text-align: center
}

.render-feature-list li {
    margin-bottom: 10px;
    font-size: 14px
}

@keyframes vertical-waving {
    0% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(100%)
    }
    to {
        transform: translateY(0)
    }
}

.processing-hint {
    position: relative;
    width: 10px;
    margin: auto
}

.processing-hint .dot {
    top: 50%;
    position: absolute;
    animation: vertical-waving .8s ease-in-out infinite alternate;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background-color: #fff;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .2)
}

.processing-hint .dot1 {
    right: -17px;
    animation-delay: .16s
}

.processing-hint .dot2 {
    animation-delay: .32s
}

.processing-hint .dot3 {
    left: -17px;
    animation-delay: .48s
}

.ribbon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.ribbon.ribbon-type-default .ribbon-main {
    color: #fff;
    transform: rotate(-45deg);
    position: relative;
    top: 10px
}

.ribbon.ribbon-type-default .ribbon-band {
    border-bottom-color: #999
}

.ribbon.ribbon-type-default .ribbon-main-content {
    position: relative;
    font-size: 12px;
    line-height: 25px
}

.ribbon.ribbon-color-price .ribbon-band {
    border-bottom-color: #ff6544
}

.ribbon .ribbon-band {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    transform: translateX(-25px);
    left: 0;
    bottom: 0;
    border: 25px solid transparent
}

.price {
    color: #ff6544
}

.price .text-wrap {
    align-items: baseline
}

.price .per-text {
    font-size: .8em
}

.payment-item {
    padding: 40px 15px;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-right-color: #ddd;
    position: relative
}

.payment-item .superscript {
    position: absolute;
    top: 0;
    font-size: 12px;
    right: 30px;
    color: #fff;
    height: 27px;
    width: 32px
}

.payment-item .superscript:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #4777ff
}

.payment-item .superscript:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 6px solid #fff
}

.payment-item .superscript span {
    position: absolute;
    top: 3px;
    font-size: 12px;
    left: 0;
    right: 0
}

.payment-item:last-child {
    border-right-color: transparent
}

.payment-item p {
    color: #333
}

.payment-item .separator {
    margin-top: 10px;
    margin-bottom: 30px
}

.payment-item .info-icon {
    margin-left: 5px;
    color: #999;
    vertical-align: text-bottom
}

.payment-item em {
    font-style: normal;
    color: #ff6544
}

.payment-item__content {
    height: 100%;
    max-width: 250px;
    margin: auto
}

.payment-item__name {
    font-size: 24px;
    margin-bottom: 10px
}

.payment-item__suit-for {
    min-height: 2em;
    color: #999
}

.payment-item:not(.is-free) .payment-item__prices .price-text, .payment-item:not(.is-free) .payment-item__prices .symbol {
    color: #ff6544
}

.payment-item__prices .price {
    font-size: 16px;
    color: #999
}

.payment-item__prices .price-text {
    font-size: 48px
}

.payment-item__prices .price-text, .payment-item__prices .symbol {
    color: #333
}

.payment-item__prices .per-text {
    color: inherit
}

.payment-item__prices .per-text, .payment-item__prices .symbol {
    font-size: 16px
}

.payment-item__original-price {
    min-height: 20px;
    color: #333
}

.payment-item__price--lg {
    font-size: 30px;
    display: inline-block;
    margin-top: 20px
}

.payment-item__yearly-saving {
    min-height: 1em;
    color: #333;
    margin-bottom: 15px
}

.payment-item__price-hint {
    min-height: 5em;
    line-height: 1.8;
    color: #666
}

.payment-item__price-hint small {
    color: #999
}

.payment-item__descriptions {
    min-height: 3em;
    line-height: 1.8;
    border-top: 1px solid #ccc;
    padding-top: 25px;
    margin-top: 25px
}

.payment-item__descriptions p {
    color: #666
}

.overflow-hint-body, .overflow-hint-content {
    display: inline
}

.overflow-hint {
    min-width: 0
}

.overflow-hint span {
    display: inline-block;
    width: 100%;
    text-align: center
}

.scroll-request {
    margin-bottom: 80px
}

.scroll-request .processing-hint {
    width: 60px;
    height: 60px;
    margin: 20px auto 0;
    border-radius: 50%;
    background-color: #ccc
}

.scroll-request .processing-hint .dot {
    top: 20px;
    right: unset;
    box-shadow: unset
}

.scroll-request .processing-hint .dot1 {
    left: 9px
}

.scroll-request .processing-hint .dot2 {
    left: 25.5px
}

.scroll-request .processing-hint .dot3 {
    left: 42px
}

.vip-limits-dialog-wrapper {
    z-index: 1000001 !important;
    text-align: center
}

.vip-limits-dialog-wrapper.basic-yearly .mk-modal {
    width: 980px
}

.vip-limits .title {
    margin-bottom: 20px
}

.vip-limits .sub-title p {
    color: #999
}

.vip-limits .btn-list {
    margin-top: 20px
}

.vip-limits .btn-list .btn {
    color: #4777ff;
    border-color: #4777ff;
    width: 90px;
    padding: 2px;
    border-radius: 0
}

.vip-limits .btn-list .btn.btn-theme {
    color: #fff
}

.vip-limits .btn-list .btn:first-child {
    border-radius: 4px 0 0 4px
}

.vip-limits .btn-list .btn:last-child {
    border-radius: 0 4px 4px 0
}

.vip-limits .payment-item__name {
    font-size: 20px
}

.vip-limits .payment-item__price-hint, .vip-limits .payment-item__suit-for {
    display: none
}

.vip-limits .payment-item__prices {
    height: auto
}

.vip-limits .price-text {
    font-size: 42px;
    line-height: 72px
}

.vip-limits .payment-item {
    padding: 20px 15px;
    border: 1px solid #ddd;
    border-radius: 7px;
    margin: 20px auto;
    width: 290px;
    overflow: hidden;
    position: relative
}

.vip-limits .payment-item .btn {
    display: none
}

.vip-limits .payment-item:after, .vip-limits .payment-item:before {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0
}

.vip-limits .payment-item:before {
    border-top: 30px solid #4777ff;
    border-left: 30px solid transparent
}

.vip-limits .payment-item:after {
    right: 4px;
    top: 5px;
    width: 7px;
    height: 4px;
    border-bottom-left-radius: 2px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(-50deg);
    transition: all .2s ease-out
}

.vip-limits .payment-item.active {
    border-color: #4777ff
}

.vip-limits .payment-item.active:after, .vip-limits .payment-item.active:before {
    content: ""
}

.vip-limits .plan-limit .link {
    margin: 0
}

.vip-limits .payment-item__descriptions p {
    color: #999
}

.vip-limits .purchase-btn {
    min-width: 200px;
    margin-top: 10px;
    margin-bottom: 10px
}

.vip-confirm .confirm-button {
    font-size: 14px;
    padding: 12px 15px
}

.ps, .ps-container {
    position: relative;
    height: 100%
}

.ps-container-content {
    height: 100%
}

.member-plan-details {
    border-top: 1px solid #ddd;
    margin-top: 30px
}

.member-plan-details__title {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 15px
}

.pricing-detail {
    color: #333
}

.pricing-detail .table {
    width: 100%;
    border-collapse: collapse
}

.pricing-detail th {
    font-weight: 400
}

.pricing-detail__header {
    font-size: 20px
}

.pricing-detail__sec-header {
    border-top: 1px solid #efefef;
    font-size: 18px;
    color: #999;
    padding: 25px 5px
}

.pricing-detail__field, .pricing-detail__sec-header {
    border-bottom: 1px solid #efefef
}

.pricing-detail__field:last-child {
    border-bottom: none
}

.detail-cell {
    padding: 20px 5px;
    text-align: center
}

.detail-cell:first-child {
    text-align: left
}

.detail-cell .info-icon {
    color: #999;
    float: right
}

.detail-cell__support-icon {
    color: #4777ff
}

.slider-toggle {
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: 150px;
    height: 34px;
    background: #fff;
    border-radius: 24px;
    border: 1px solid #ccc
}

.slider-toggle .slider-toggle, .slider-toggle .slider-toggle-handler, .slider-toggle .slider-toggle-off, .slider-toggle .slider-toggle-on {
    transition: all .2s cubic-bezier(.445, .05, .55, .95)
}

.slider-toggle .slider-toggle-off, .slider-toggle .slider-toggle-on {
    position: absolute;
    line-height: 34px;
    z-index: 2
}

.slider-toggle .slider-toggle-handler, .slider-toggle .slider-toggle-off, .slider-toggle .slider-toggle-on {
    display: inline-block;
    font-size: 13px
}

.slider-toggle .slider-toggle-off {
    left: 12px;
    color: #fff
}

.slider-toggle .slider-toggle-on {
    right: 12px;
    color: #999
}

.slider-toggle .slider-toggle-handler {
    border-radius: 24px;
    z-index: 1;
    height: 36px;
    background: #4777ff;
    box-shadow: 0 0 5px 0 #4777ff;
    position: relative;
    top: -1px;
    left: 0
}

.slider-toggle.active {
    background: #fff
}

.slider-toggle.active .slider-toggle-off {
    color: #999
}

.slider-toggle.active .slider-toggle-on {
    color: #fff
}

.cut-slider {
    width: 100%;
    position: relative
}

.cut-slider .current-time {
    cursor: pointer;
    position: absolute;
    z-index: 2001;
    width: 2px;
    height: 36px;
    top: -7px;
    background-color: #4777ff;
    transition: transform .3s ease-in-out
}

.cut-slider .current-time:before {
    content: "";
    position: absolute;
    top: 100%;
    display: block;
    width: 12px;
    height: 12px;
    background-color: #4777ff;
    border-radius: 50%;
    left: -5px
}

.cut-slider .mk-slider__runway {
    height: 22px;
    background-color: #efefef;
    cursor: unset
}

.cut-slider .mk-slider__button-wrapper {
    background-color: transparent;
    width: 10px;
    height: 22px;
    top: 0
}

.cut-slider .mk-slider__button-wrapper.first {
    cursor: w-resize
}

.cut-slider .mk-slider__button-wrapper.first .mk-slider__button {
    border-radius: 3px 0 0 3px
}

.cut-slider .mk-slider__button-wrapper.second {
    cursor: e-resize;
    transform: translate(-7px)
}

.cut-slider .mk-slider__button-wrapper.second .mk-slider__button {
    border-radius: 0 3px 3px 0
}

.cut-slider .mk-slider__bar {
    cursor: move;
    height: 18px;
    background-color: #fff;
    border: 2px solid #4777ff;
    border-radius: 3px
}

.cut-slider .mk-slider__button {
    position: relative;
    background-color: #4777ff;
    width: 10px;
    height: 22px;
    border: unset
}

.cut-slider .mk-slider__button:before {
    content: "";
    position: absolute;
    background-image: url(https://cdn.static.duomu.tv/common-assets/cut-slider-bar.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 7px;
    height: 7px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block
}

.music-title-error__popover .mk-popover__title {
    color: #ff9100
}

.music-title-error__popover .mk-popover__title .close {
    cursor: pointer;
    float: right
}

.music-title-error__popover .mk-popover__title .close .bb:before {
    color: #ccc;
    transform: unset
}

.music-title .music-title-time {
    color: #999;
    float: right
}

.music-title.error .music-title-time {
    transition: background-color .5s;
    animation: mk-slider-error 1s infinite
}

.password {
    position: relative
}

.password .bb {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #666
}

.loading.ball-rotate {
    position: relative;
    width: 8px;
    height: 8px;
    animation: ball-rotate 1s cubic-bezier(.7, -.13, .22, .86) 0s infinite;
    border-radius: 100%;
    background-color: #fff;
    animation-fill-mode: both
}

.loading.ball-rotate:after, .loading.ball-rotate:before {
    position: absolute;
    width: 8px;
    height: 8px;
    margin: 2px;
    content: "";
    opacity: .8;
    border-radius: 100%;
    background-color: #fff
}

.loading.ball-rotate:before {
    top: 0;
    left: -18px
}

.loading.ball-rotate:after {
    top: 0;
    left: 14px
}

@keyframes ball-rotate {
    0% {
        transform: rotate(0deg) scale(1)
    }
    50% {
        transform: rotate(180deg) scale(.8)
    }
    to {
        transform: rotate(1turn) scale(1)
    }
}

.browser-detection .mk-message-box__header {
    padding: 30px 30px 0
}

@media (max-width: 767px) {
    .browser-detection {
        width: 95%
    }
}

.announcement {
    background: #fffadd;
    box-shadow: 0 8px 17px rgba(0, 0, 0, .2), 0 6px 20px rgba(0, 0, 0, .19);
    position: fixed;
    bottom: 10px;
    top: unset;
    left: 5px;
    padding-bottom: 5px;
    width: 400px
}

.announcement .mk-message-box__headerbtn {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 18px
}

.announcement .mk-message-box__close {
    color: #666
}

.announcement .mk-message-box__close:hover {
    color: #595959
}

.announcement .mk-message-box__message {
    text-align: left;
    color: #969696
}

.announcement .mk-message-box__message .title {
    margin-bottom: 10px
}

.announcement .mk-message-box__message .main-text {
    text-indent: 2em
}

.announcement .mk-message-box__header {
    padding: 30px 30px 0
}

.announcement .confirm-button {
    width: 100%;
    display: inline-block;
    padding: 8px;
    font-weight: 400;
    background: #fff9d3;
    color: #969696;
    text-decoration: none;
    border: unset
}

.announcement .confirm-button:hover {
    background: #fff7c9
}

.announcement-wrapper {
    outline: none;
    background-color: unset;
    width: 1px
}

.teaching-popover {
    z-index: 1000010 !important;
    background: linear-gradient(-75deg, #734eff, #4777ff);
    padding: 14px 15px;
    color: #fff;
    position: relative;
    box-shadow: .1rem .3rem 1rem rgba(51, 51, 51, .2);
    transform: none
}

.teaching-popover p {
    width: 185px;
    border-right: 1px solid;
    padding-right: 14px
}

.teaching-popover .close {
    position: absolute;
    right: 12px;
    top: 50%;
    cursor: pointer;
    transform: translateY(-50%)
}

.teaching-popover .close:before {
    transform: scale(1)
}

.teaching-popover[x-placement^=top] .popper__arrow:after {
    border-top-color: #4777ff !important;
    border-bottom-color: #4777ff !important
}

.teaching-popover[x-placement^=bottom] .popper__arrow:after {
    border-bottom-color: #4777ff !important
}

.teaching-popover[x-placement^=left] .popper__arrow:after {
    border-left-color: #4777ff !important
}

.teaching-popover[x-placement^=right] .popper__arrow:after {
    border-right-color: #4777ff !important
}

.teaching-popover .icon {
    width: 50px;
    height: 40px;
    position: absolute;
    top: -28px;
    left: 10px
}

.teaching-transition-enter-active {
    transition: opacity .5s, transform .7s cubic-bezier(0, 1.65, .86, .335)
}

.teaching-transition-enter {
    opacity: 0;
    transform: translateY(50%)
}

.recorder-modal {
    z-index: 1000000 !important
}

.recorder-modal .mk-modal {
    background: hsla(0, 0%, 100%, .3) !important
}

.recorder-modal .mk-modal .text {
    color: #aaa
}

.recorder-modal .mk-modal h1 {
    margin: 20px 0;
    font-size: 46px
}

.recorder-modal .mk-modal .sub-title {
    margin-top: 15px
}

.recorder-modal .mk-modal p {
    margin-bottom: 15px
}

.recorder-modal .mk-modal .stop-recorder {
    width: 150px;
    transform: translateX(-12px)
}

.recorder-modal .mk-modal .stop-recorder:hover {
    color: #666
}

.recorder-modal .content {
    text-align: center;
    width: 260px;
    height: 230px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto
}

.msg-dialog.msg-type--activity {
    text-align: center;
    color: #fff
}

.msg-dialog.msg-type--activity .mk-modal {
    background-color: transparent;
    box-shadow: none;
    background-color: #1c226a;
    background-image: url(https://cdn.static.duomu.tv/common-assets/message/activity/present-member-bg.png);
    background-repeat: no-repeat;
    background-size: cover
}

.msg-dialog.msg-type--activity .confirm-btn {
    margin-top: 20px;
    background-color: #7d3cf2;
    border: none;
    background-image: linear-gradient(90deg, #a440f8 0, #5538ec)
}

.msg-item.msg-type--activity .msg-item__title {
    margin-top: 43px;
    font-size: 24px;
    margin-bottom: 30px
}

html {
    box-sizing: border-box;
    line-height: 1.15;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    font-size: 14px
}

body, html {
    font-family: PingFang SC, Tahoma, Arial, Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", sans-serif
}

body {
    width: 100%;
    height: 100%;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #666;
    background-color: #f9f9f9;
    overflow-y: auto
}

body button, body input, body select, body textarea {
    font-family: PingFang SC, Tahoma, Arial, Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", sans-serif
}

body.white {
    background-color: #fff
}

h1, h2, h3, h4, h5, h6 {
    color: #333;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 400
}

h1 {
    font-size: 36px
}

h2 {
    font-size: 30px
}

h3 {
    font-size: 24px
}

h4 {
    font-size: 20px
}

h5 {
    font-size: 18px
}

h6 {
    font-size: 16px
}

p {
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 5px
}

b, strong {
    font-weight: bolder
}

small {
    font-size: 80%
}

ul {
    padding-left: 20px;
    margin-top: 10px;
    margin-bottom: 10px
}

ul li {
    font-size: 14px;
    line-height: 1.5
}

a {
    color: #666;
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

input[type=checkbox] {
    margin: 0
}

.app-content {
    margin-top: 30px
}

::-moz-selection {
    background-color: #9bf;
    color: #fff
}

::selection {
    background-color: #9bf;
    color: #fff
}

@media (max-width: 768px) {
    body {
        padding-top: 54px
    }
}

button {
    background-color: transparent;
    border-style: solid;
    border-width: 1px
}

button:focus {
    outline: none
}

.container {
    box-sizing: border-box;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
    width: 100%;
    max-width: 540px
}

.container:after {
    display: block;
    clear: both;
    content: ""
}

@media (min-width: 768px) {
    .container {
        max-width: 720px
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px
    }
}

.btn {
    cursor: pointer;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    transition: all .15s ease-in-out
}

.btn:not(.disabled):focus, .btn:not(.disabled):hover, .btn:not([disabled]):focus, .btn:not([disabled]):hover {
    text-decoration: none
}

.btn.focus, .btn:focus {
    outline: 0
}

.btn.disabled, .btn.loading, .btn:disabled {
    opacity: .65
}

.btn.disabled, .btn:disabled {
    cursor: not-allowed
}

.btn.active, .btn:active {
    background-image: none
}

.btn.circle-icon-btn, .btn.circle-icon-btn:active, .btn.circle-icon-btn:focus, .btn.circle-icon-btn:hover {
    background-color: transparent;
    padding: 0;
    border: 0;
    box-shadow: none
}

.circle-icon-btn .bb:before {
    border: 1px solid transparent;
    border-radius: 50%;
    transform: scale(1)
}

.btn-block {
    display: block;
    width: 100%
}

.btn-theme {
    color: #fff;
    cursor: pointer;
    background-color: #1e87f0;
    border: 1px solid #1e87f0
}

.btn-theme.circle-icon-btn .bb {
    color: #4777ff
}

.btn-theme.circle-icon-btn .bb:before {
    border-color: #4777ff
}

.btn-theme.circle-icon-btn:hover .bb {
    color: #2966ee
}

.btn-theme.circle-icon-btn:hover .bb:before, .btn-theme:hover {
    border-color: #2966ee
}

.btn-theme:hover {
    background-color: #2966ee
}

.btn-theme.disabled, .btn-theme:disabled {
    cursor: not-allowed;
    background-color: #4777ff;
    border-color: #4777ff
}

.btn-theme.active, .btn-theme:active, .show > .btn-theme.dropdown-toggle {
    background-color: #2966ee;
    background-image: none;
    border-color: #2966ee
}

.btn-price {
    color: #fff;
    cursor: pointer;
    background-color: #ff6544;
    border: 1px solid #ff6544
}

.btn-price.circle-icon-btn .bb {
    color: #ff6544
}

.btn-price.circle-icon-btn .bb:before {
    border-color: #ff6544
}

.btn-price.circle-icon-btn:hover .bb {
    color: #ff461e
}

.btn-price.circle-icon-btn:hover .bb:before {
    border-color: #ff461e
}

.btn-price:hover {
    background-color: #ff461e;
    border-color: #ff3b11
}

.btn-price.disabled, .btn-price:disabled {
    cursor: not-allowed;
    background-color: #ff6544;
    border-color: #ff6544
}

.btn-price.active, .btn-price:active, .show > .btn-price.dropdown-toggle {
    background-color: #ff461e;
    background-image: none;
    border-color: #ff3b11
}

.btn-danger {
    color: #fff;
    cursor: pointer;
    background-color: #ff6544;
    border: 1px solid #ff6544
}

.btn-danger.circle-icon-btn .bb {
    color: #ff6544
}

.btn-danger.circle-icon-btn .bb:before {
    border-color: #ff6544
}

.btn-danger.circle-icon-btn:hover .bb {
    color: #ff461e
}

.btn-danger.circle-icon-btn:hover .bb:before {
    border-color: #ff461e
}

.btn-danger:hover {
    background-color: #ff461e;
    border-color: #ff3b11
}

.btn-danger.disabled, .btn-danger:disabled {
    cursor: not-allowed;
    background-color: #ff6544;
    border-color: #ff6544
}

.btn-danger.active, .btn-danger:active, .show > .btn-danger.dropdown-toggle {
    background-color: #ff461e;
    background-image: none;
    border-color: #ff3b11
}

.btn-light {
    color: #fff;
    cursor: pointer;
    background-color: #999;
    border: 1px solid #999
}

.btn-light.circle-icon-btn .bb {
    color: #999
}

.btn-light.circle-icon-btn .bb:before {
    border-color: #999
}

.btn-light.circle-icon-btn:hover .bb {
    color: #666
}

.btn-light.circle-icon-btn:hover .bb:before, .btn-light:hover {
    border-color: #666
}

.btn-light:hover {
    background-color: #666
}

.btn-light.disabled, .btn-light:disabled {
    cursor: not-allowed;
    background-color: #999;
    border-color: #999
}

.btn-light.active, .btn-light:active, .show > .btn-light.dropdown-toggle {
    background-color: #666;
    background-image: none;
    border-color: #666
}

.btn-opacity {
    color: #fff;
    cursor: pointer;
    background-color: hsla(0, 0%, 100%, .2);
    border: 1px solid hsla(0, 0%, 100%, .2)
}

.btn-opacity.circle-icon-btn .bb {
    color: hsla(0, 0%, 100%, .2)
}

.btn-opacity.circle-icon-btn .bb:before {
    border-color: hsla(0, 0%, 100%, .2)
}

.btn-opacity.circle-icon-btn:hover .bb {
    color: hsla(0, 0%, 100%, .3)
}

.btn-opacity.circle-icon-btn:hover .bb:before, .btn-opacity:hover {
    border-color: hsla(0, 0%, 100%, .3)
}

.btn-opacity:hover {
    background-color: hsla(0, 0%, 100%, .3)
}

.btn-opacity.disabled, .btn-opacity:disabled {
    cursor: not-allowed;
    background-color: hsla(0, 0%, 100%, .2);
    border-color: hsla(0, 0%, 100%, .2)
}

.btn-opacity.active, .btn-opacity:active, .show > .btn-opacity.dropdown-toggle {
    background-color: hsla(0, 0%, 100%, .3);
    background-image: none;
    border-color: hsla(0, 0%, 100%, .3)
}

.btn-hint-frame {
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #ff6544;
    color: #ff6544
}

.btn-hint-frame:hover {
    background-color: #fff;
    border-color: #ff461e;
    color: #ff461e
}

.btn-hint-frame.disabled, .btn-hint-frame:disabled {
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ff6544;
    color: #ff6544
}

.btn-hint-frame.active, .btn-hint-frame:active, .show > .btn-hint-frame.dropdown-toggle {
    background-color: #fff;
    background-image: none;
    border-color: #ff461e;
    color: #ff461e
}

.btn-theme-frame {
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #1e87f0;
    color: #1e87f0
}

.btn-theme-frame:hover {
    background-color: #fff;
    border-color: #106cc7;
    color: #106cc7
}

.btn-theme-frame.disabled, .btn-theme-frame:disabled {
    cursor: not-allowed;
    background-color: #fff;
    border-color: #4777ff;
    color: #4777ff
}

.btn-theme-frame.active, .btn-theme-frame:active, .show > .btn-theme-frame.dropdown-toggle {
    background-color: #fff;
    background-image: none;
    border-color: #2966ee;
    color: #2966ee
}

.btn-ghost--white {
    color: #fff;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid #fff
}

.btn-ghost--white.circle-icon-btn .bb {
    color: transparent
}

.btn-ghost--white.circle-icon-btn .bb:before {
    border-color: transparent
}

.btn-ghost--white.circle-icon-btn:hover .bb {
    color: transparent
}

.btn-ghost--white.circle-icon-btn:hover .bb:before {
    border-color: transparent
}

.btn-ghost--white:hover {
    background-color: transparent;
    border-color: #e6e6e6
}

.btn-ghost--white.disabled, .btn-ghost--white:disabled {
    cursor: not-allowed;
    background-color: transparent;
    border-color: #fff
}

.btn-ghost--white.active, .btn-ghost--white:active, .show > .btn-ghost--white.dropdown-toggle {
    background-color: transparent;
    background-image: none;
    border-color: #e6e6e6
}

.btn-ghost--white:hover {
    color: #ddd
}

.btn-normal-frame {
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #666;
    color: #666
}

.btn-normal-frame:hover {
    background-color: #fff;
    border-color: #535353;
    color: #535353
}

.btn-normal-frame.disabled, .btn-normal-frame:disabled {
    cursor: not-allowed;
    background-color: #fff;
    border-color: #666;
    color: #666
}

.btn-normal-frame.active, .btn-normal-frame:active, .show > .btn-normal-frame.dropdown-toggle {
    background-color: #fff;
    background-image: none;
    border-color: #535353;
    color: #535353
}

.btn-light-frame {
    cursor: pointer;
    background-color: transparent;
    border: 1px solid #999;
    color: #999
}

.btn-light-frame:hover {
    background-color: transparent;
    border-color: #666;
    color: #666
}

.btn-light-frame.disabled, .btn-light-frame:disabled {
    cursor: not-allowed;
    background-color: transparent;
    border-color: #999;
    color: #999
}

.btn-light-frame.active, .btn-light-frame:active, .show > .btn-light-frame.dropdown-toggle {
    background-color: transparent;
    background-image: none;
    border-color: #666;
    color: #666
}

.btn-hg {
    padding: 10px 18px;
    font-size: 16px;
    line-height: 1.5;
    border-radius: 4px
}

.btn-hg.circle-border {
    border-radius: 23px
}

.btn-hg.circle-icon-btn {
    font-size: 30px
}

.btn-hg.circle-icon-btn .bb:before {
    height: 46px;
    width: 46px;
    line-height: 46px
}

.btn-lg {
    padding: 8px 18px;
    font-size: 14px;
    line-height: 1.6;
    border-radius: 4px
}

.btn-lg.circle-border {
    border-radius: 20px
}

.btn-lg.circle-icon-btn {
    font-size: 26px
}

.btn-lg.circle-icon-btn .bb:before {
    height: 40px;
    width: 40px;
    line-height: 40px
}

.btn-md {
    padding: 10px 15px;
    font-size: 14px;
    line-height: 1;
    border-radius: 4px
}

.btn-md.circle-border {
    border-radius: 18px
}

.btn-md.circle-icon-btn {
    font-size: 18px
}

.btn-md.circle-icon-btn .bb:before {
    height: 36px;
    width: 36px;
    line-height: 36px
}

.btn-sm {
    padding: 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 4px
}

.btn-sm.circle-border {
    border-radius: 15px
}

.btn-sm.circle-icon-btn {
    font-size: 16px
}

.btn-sm.circle-icon-btn .bb:before {
    height: 30px;
    width: 30px;
    line-height: 30px
}

.btn-flat, .btn-flat:active, .btn-flat:focus, .btn-flat:hover {
    background-color: transparent;
    padding: 0;
    border: 0;
    box-shadow: none
}

.vertical-center {
    margin-left: 5px
}

.link, .vertical-center {
    display: inline-block;
    vertical-align: middle
}

.link {
    white-space: nowrap;
    user-select: none;
    transition: all .15s ease-in-out;
    font-size: 14px;
    cursor: pointer;
    color: #666
}

.link:hover {
    color: #333
}

.link:not(.disabled):focus, .link:not(.disabled):hover, .link:not([disabled]):focus, .link:not([disabled]):hover {
    text-decoration: none
}

.link.link-help {
    font-size: 12px
}

.link-theme {
    cursor: pointer;
    color: #4777ff
}

.link-theme:hover {
    color: #1451ff
}

.link-light {
    cursor: pointer;
    color: #999
}

.link-light:hover {
    color: grey
}

.link-hint {
    cursor: pointer;
    color: #ff6544
}

.link-hint:hover {
    color: #ff3b11
}

.link-dark-light {
    cursor: pointer;
    color: #aaa
}

.link-dark-light:hover {
    color: #999
}

.link-highlight {
    cursor: pointer;
    color: #ccc
}

.link-highlight:hover {
    color: #aaa
}

.link-white {
    cursor: pointer;
    color: #fff
}

.link-white:hover {
    color: #ccc
}

.height-auto-img {
    max-height: 100%;
    width: auto;
    display: block
}

.width-auto-img {
    max-width: 100%;
    height: auto;
    display: block
}

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

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

.bg-white {
    background-color: #fff
}

.hint-color, .price-color {
    color: #ff6544
}

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

.absolute-vertical-center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.absolute-line-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

@font-face {
    font-family: Blueberry Icons;
    src: url(https://cdn.static.duomu.tv/common-assets/font/34ef47e3425f832ae304fcbd8bab277a.eot);
    src: url(https://cdn.static.duomu.tv/common-assets/font/34ef47e3425f832ae304fcbd8bab277a.eot#iefix) format("eot"), url(https://cdn.static.duomu.tv/common-assets/font/c60afd4d1c1de8fd07eebe82e295f937.woff) format("woff"), url(https://cdn.static.duomu.tv/common-assets/font/a4b14a384136b526862bcdbe4e2f7c0d.ttf) format("truetype")
}

.bb-ad-video-ad-3-1-1:before, .bb-ad-video-ad-3-1-2:before, .bb-ad-video-ad-3-1-3:before, .bb-ad-video-ad-3-2-1:before, .bb-ad-video-ad-3-2-2:before, .bb-ad-video-ad-3-2-3:before, .bb-ad-video-ad-3-2-4:before, .bb-ad-video-ad-3-3-1:before, .bb-ad-video-ad-3-3-2:before, .bb-ad-video-ad-3-3-3:before, .bb-add:before, .bb-arrow-left-2:before, .bb-arrow-left:before, .bb-arrow-right-2:before, .bb-avatar:before, .bb-center-justified:before, .bb-chevron-bottom:before, .bb-chevron-left:before, .bb-chevron-right:before, .bb-chevron-top:before, .bb-close-eye:before, .bb-close:before, .bb-collect:before, .bb-common-scene:before, .bb-copy-link:before, .bb-copy:before, .bb-cut:before, .bb-delete:before, .bb-download-video:before, .bb-download:before, .bb-edit:before, .bb-email:before, .bb-envelope-letter:before, .bb-exit:before, .bb-folder-add:before, .bb-help:before, .bb-image:before, .bb-left-justified:before, .bb-link-out:before, .bb-menu:before, .bb-modal-close:before, .bb-more:before, .bb-music:before, .bb-open-eye:before, .bb-pause:before, .bb-play-circle:before, .bb-play:before, .bb-puzzle:before, .bb-qq:before, .bb-question-info:before, .bb-qzone:before, .bb-record:before, .bb-renren:before, .bb-replace:before, .bb-resource:before, .bb-right-justified:before, .bb-rotate:before, .bb-scene:before, .bb-search:before, .bb-setting:before, .bb-share:before, .bb-sound:before, .bb-subtract:before, .bb-success-big:before, .bb-success-circus:before, .bb-success:before, .bb-text:before, .bb-title-edit:before, .bb-upload-2:before, .bb-upload:before, .bb-video-error:before, .bb-video-img:before, .bb-video:before, .bb-warning-info-2:before, .bb-warning-info:before, .bb-watermark-menu:before, .bb-watermark:before, .bb-wechat:before, .bb-weibo:before, .bb-zoom-add:before {
    font-family: Blueberry Icons;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    text-decoration: none;
    text-transform: none
}

.bb-ad-video-ad-3-1-1:before {
    content: "\E001"
}

.bb-ad-video-ad-3-1-2:before {
    content: "\E002"
}

.bb-ad-video-ad-3-1-3:before {
    content: "\E003"
}

.bb-ad-video-ad-3-2-1:before {
    content: "\E004"
}

.bb-ad-video-ad-3-2-2:before {
    content: "\E005"
}

.bb-ad-video-ad-3-2-3:before {
    content: "\E006"
}

.bb-ad-video-ad-3-2-4:before {
    content: "\E007"
}

.bb-ad-video-ad-3-3-1:before {
    content: "\E008"
}

.bb-ad-video-ad-3-3-2:before {
    content: "\E009"
}

.bb-ad-video-ad-3-3-3:before {
    content: "\E00A"
}

.bb-add:before {
    content: "\E00B"
}

.bb-arrow-left-2:before {
    content: "\E00C"
}

.bb-arrow-left:before {
    content: "\E00D"
}

.bb-arrow-right-2:before {
    content: "\E00E"
}

.bb-avatar:before {
    content: "\E00F"
}

.bb-center-justified:before {
    content: "\E010"
}

.bb-chevron-bottom:before {
    content: "\E011"
}

.bb-chevron-left:before {
    content: "\E012"
}

.bb-chevron-right:before {
    content: "\E013"
}

.bb-chevron-top:before {
    content: "\E014"
}

.bb-close-eye:before {
    content: "\E015"
}

.bb-close:before {
    content: "\E016"
}

.bb-collect:before {
    content: "\E017"
}

.bb-common-scene:before {
    content: "\E018"
}

.bb-copy-link:before {
    content: "\E019"
}

.bb-copy:before {
    content: "\E01A"
}

.bb-cut:before {
    content: "\E01B"
}

.bb-delete:before {
    content: "\E01C"
}

.bb-download-video:before {
    content: "\E01D"
}

.bb-download:before {
    content: "\E01E"
}

.bb-edit:before {
    content: "\E01F"
}

.bb-email:before {
    content: "\E020"
}

.bb-envelope-letter:before {
    content: "\E021"
}

.bb-exit:before {
    content: "\E022"
}

.bb-folder-add:before {
    content: "\E023"
}

.bb-help:before {
    content: "\E024"
}

.bb-image:before {
    content: "\E025"
}

.bb-left-justified:before {
    content: "\E026"
}

.bb-link-out:before {
    content: "\E027"
}

.bb-menu:before {
    content: "\E028"
}

.bb-modal-close:before {
    content: "\E029"
}

.bb-more:before {
    content: "\E02A"
}

.bb-music:before {
    content: "\E02B"
}

.bb-open-eye:before {
    content: "\E02C"
}

.bb-pause:before {
    content: "\E02D"
}

.bb-play-circle:before {
    content: "\E02E"
}

.bb-play:before {
    content: "\E02F"
}

.bb-puzzle:before {
    content: "\E030"
}

.bb-qq:before {
    content: "\E031"
}

.bb-question-info:before {
    content: "\E032"
}

.bb-qzone:before {
    content: "\E033"
}

.bb-record:before {
    content: "\E034"
}

.bb-renren:before {
    content: "\E035"
}

.bb-replace:before {
    content: "\E036"
}

.bb-resource:before {
    content: "\E037"
}

.bb-right-justified:before {
    content: "\E038"
}

.bb-rotate:before {
    content: "\E039"
}

.bb-scene:before {
    content: "\E03A"
}

.bb-search:before {
    content: "\E03B"
}

.bb-setting:before {
    content: "\E03C"
}

.bb-share:before {
    content: "\E03D"
}

.bb-sound:before {
    content: "\E03E"
}

.bb-subtract:before {
    content: "\E03F"
}

.bb-success-big:before {
    content: "\E040"
}

.bb-success-circus:before {
    content: "\E041"
}

.bb-success:before {
    content: "\E042"
}

.bb-text:before {
    content: "\E043"
}

.bb-title-edit:before {
    content: "\E044"
}

.bb-upload-2:before {
    content: "\E045"
}

.bb-upload:before {
    content: "\E046"
}

.bb-video-error:before {
    content: "\E047"
}

.bb-video-img:before {
    content: "\E048"
}

.bb-video:before {
    content: "\E049"
}

.bb-warning-info-2:before {
    content: "\E04A"
}

.bb-warning-info:before {
    content: "\E04B"
}

.bb-watermark-menu:before {
    content: "\E04C"
}

.bb-watermark:before {
    content: "\E04D"
}

.bb-wechat:before {
    content: "\E04E"
}

.bb-weibo:before {
    content: "\E04F"
}

.bb-zoom-add:before {
    content: "\E050"
}

.caret {
    width: 0;
    height: 0;
    margin-left: 2px;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent
}

.bb:before, .caret {
    display: inline-block;
    vertical-align: middle
}

.bb:before {
    transform: scale(1.4)
}

.bb.bb-error {
    background: url(https://cdn.static.duomu.tv/common-assets/error.svg) no-repeat;
    margin: 0 5px;
    width: 20px;
    height: 20px;
    display: block;
    float: left
}

.card {
    position: relative;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border-radius: 4px;
    box-shadow: 0 .15rem .5rem rgba(51, 51, 51, .2)
}

.card > .list-group:first-child .list-group-item:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}

.card > .list-group:last-child .list-group-item:last-child {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px
}

.card-body {
    padding: 20px
}

.card-body--no-padding {
    padding: 0
}

.card-title {
    font-size: 20px;
    color: #333
}

.card-header {
    padding: 20px;
    margin-bottom: 0;
    background-color: #fff;
    border-bottom: 1px solid #ccc
}

.card-footer {
    padding: 20px
}

.c-theme {
    color: #4777ff !important
}

.c-gray {
    color: #aaa !important
}

.c-white {
    color: #fff !important
}

.c-error, .c-price {
    color: #ff6544 !important
}

.text-center {
    text-align: center
}

.underline {
    text-decoration: underline
}

.float-right {
    float: right
}

.float-left {
    float: left
}

.inline-block {
    display: inline-block
}

.m-0 {
    margin: 0 !important
}

.m-t-0 {
    margin-top: 0 !important
}

.m-b-0 {
    margin-bottom: 0 !important
}

.m-l-0 {
    margin-left: 0 !important
}

.m-r-0 {
    margin-right: 0 !important
}

.m-5 {
    margin: 5px !important
}

.m-t-5 {
    margin-top: 5px !important
}

.m-b-5 {
    margin-bottom: 5px !important
}

.m-l-5 {
    margin-left: 5px !important
}

.m-r-5 {
    margin-right: 5px !important
}

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

.m-t-10 {
    margin-top: 10px !important
}

.m-b-10 {
    margin-bottom: 10px !important
}

.m-l-10 {
    margin-left: 10px !important
}

.m-r-10 {
    margin-right: 10px !important
}

.m-15 {
    margin: 15px !important
}

.m-t-15 {
    margin-top: 15px !important
}

.m-b-15 {
    margin-bottom: 15px !important
}

.m-l-15 {
    margin-left: 15px !important
}

.m-r-15 {
    margin-right: 15px !important
}

.m-20 {
    margin: 20px !important
}

.m-t-20 {
    margin-top: 20px !important
}

.m-b-20 {
    margin-bottom: 20px !important
}

.m-l-20 {
    margin-left: 20px !important
}

.m-r-20 {
    margin-right: 20px !important
}

.m-25 {
    margin: 25px !important
}

.m-t-25 {
    margin-top: 25px !important
}

.m-b-25 {
    margin-bottom: 25px !important
}

.m-l-25 {
    margin-left: 25px !important
}

.m-r-25 {
    margin-right: 25px !important
}

.p-0 {
    padding: 0 !important
}

.p-t-0 {
    padding-top: 0 !important
}

.p-b-0 {
    padding-bottom: 0 !important
}

.p-l-0 {
    padding-left: 0 !important
}

.p-r-0 {
    padding-right: 0 !important
}

.p-5 {
    padding: 5px !important
}

.p-t-5 {
    padding-top: 5px !important
}

.p-b-5 {
    padding-bottom: 5px !important
}

.p-l-5 {
    padding-left: 5px !important
}

.p-r-5 {
    padding-right: 5px !important
}

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

.p-t-10 {
    padding-top: 10px !important
}

.p-b-10 {
    padding-bottom: 10px !important
}

.p-l-10 {
    padding-left: 10px !important
}

.p-r-10 {
    padding-right: 10px !important
}

.p-15 {
    padding: 15px !important
}

.p-t-15 {
    padding-top: 15px !important
}

.p-b-15 {
    padding-bottom: 15px !important
}

.p-l-15 {
    padding-left: 15px !important
}

.p-r-15 {
    padding-right: 15px !important
}

.p-20 {
    padding: 20px !important
}

.p-t-20 {
    padding-top: 20px !important
}

.p-b-20 {
    padding-bottom: 20px !important
}

.p-l-20 {
    padding-left: 20px !important
}

.p-r-20 {
    padding-right: 20px !important
}

.p-25 {
    padding: 25px !important
}

.p-t-25 {
    padding-top: 25px !important
}

.p-b-25 {
    padding-bottom: 25px !important
}

.p-l-25 {
    padding-left: 25px !important
}

.p-r-25 {
    padding-right: 25px !important
}

.separator {
    height: 1px;
    background: #ccc
}

.flex {
    display: flex
}

@media (min-width: 768px) {
    .flex--sm {
        display: flex
    }
}

.f__wrap {
    flex-wrap: wrap
}

.f__jc--center {
    justify-content: center
}

.f__j--b, .f__jc--between {
    justify-content: space-between
}

.f__j--e {
    justify-content: space-evenly
}

.f__j--c {
    justify-content: center
}

.f__jc--around {
    justify-content: space-around
}

.f__jc--end {
    justify-content: flex-end
}

.f__a--c, .f__ai--center {
    align-items: center
}

.f__ai--baseline {
    align-items: baseline
}

.f__ai--end {
    align-items: end
}

.f__ai--start {
    align-items: start
}

.f__with--ai-center {
    display: flex;
    align-items: center
}

.f__with--center, .f__with--jc-center {
    display: flex;
    justify-content: center
}

.f__with--center, .flex--center {
    align-items: center
}

.flex--center {
    display: flex;
    justify-content: center
}

.f__self--start {
    align-self: flex-start
}

.f__self--end {
    align-self: flex-end
}

.f__self--center {
    align-self: center
}

.flex--basis {
    flex-basis: 100%
}

.f__shrink--none {
    flex-shrink: 0
}

.f__grow--1 {
    flex-grow: 1
}

.f__di--row-reverse {
    flex-direction: row-reverse
}

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

.f__di--column-reverse {
    flex-direction: column-reverse
}

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

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.overlay--opacity {
    transition: all .2s ease-in-out;
    opacity: 0
}

.overlay--bottom {
    top: auto;
    bottom: 0
}

.overlay__wrap {
    position: relative
}

.overlay__wrap:hover .overlay--opacity {
    opacity: 1
}

.overlay__wrap:hover .overlay--opacity-opposite {
    opacity: 0
}

.flex-video-wrapper {
    position: relative;
    height: 0;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden
}

.flex-video-wrapper .render-status, .flex-video-wrapper .video-js {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important
}

.pos--center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.aspect-placeholder {
    width: 100%;
    position: relative;
    height: 0
}

.seo-display-none {
    display: block !important;
    height: 0 !important;
    overflow-y: hidden !important
}

@keyframes gelatine {
    0%, to {
        transform: scale(1)
    }
    25% {
        transform: scale(.9, 1.1)
    }
    50% {
        transform: scale(1.1, .9)
    }
    75% {
        transform: scale(.95, 1.05)
    }
}

.videojs__wrap .video-js .vjs-modal-dialog {
    background: rgba(0, 0, 0, .7)
}

.videojs__wrap .vjs-error .vjs-error-display:before {
    content: none
}

.videojs__wrap .vjs-modal-dialog-content {
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center
}

.videojs__wrap .vjs-errors-img {
    padding: 10px 0
}

.videojs__wrap .vjs-errors-img .bb {
    line-height: .5;
    font-size: 12rem;
    display: inline-block;
    vertical-align: bottom
}

.videojs__wrap .vjs-errors-img .bb:before {
    transform: none;
    float: left
}

.videojs__wrap .vjs-errors-headline {
    font-size: 16px;
    margin: 10px 0
}

.videojs__wrap.vjs-sm .vjs-errors-img {
    display: none
}

.videojs__wrap.vjs-vertical .vjs-errors-img .bb {
    font-size: 140px
}

.videojs__wrap.vjs-vertical .vjs-errors-headline {
    margin: 30px 0
}

.videojs__wrap.vjs-vertical.vjs-sm .vjs-errors-img {
    display: block
}

body {
    margin: 0;
    padding-top: 64px;
    overflow-y: scroll
}

a {
    text-decoration: none
}

a.disabled {
    pointer-events: none;
    cursor: default
}

img {
    max-width: 100%
}

/*! Depth */
.avatar-uploader-dialog .avatar-wrap {
    position: relative;
    height: auto
}

.avatar-uploader-dialog .overlay-action {
    padding: 5px 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    text-align: center;
    background-color: rgba(0, 0, 0, .5);
    font-size: 14px
}

.avatar-uploader-modal .action-bar {
    margin-top: 10px;
    text-align: center
}

.avatar-uploader-modal .action-bar .btn {
    width: 7em;
    margin-left: 8px;
    margin-right: 8px
}

.usage-stat__item {
    box-sizing: border-box;
    font-size: 12px;
    color: #999
}

.usage-stat__item .progress-bar {
    margin-top: 5px
}

.usage-stat__item .progress-bar .bar-wrap {
    background-color: #efefef
}

.account-page {
    display: flex;
    margin-bottom: 15px
}

.account-page .account-sidebar {
    display: inline-block;
    width: 250px;
    margin-right: 15px
}

.account-page .account-page__content {
    display: inline-block;
    width: calc(100% - 265px)
}

.account-sidebar {
    text-align: center
}

.account-sidebar .card {
    padding-top: 25px;
    padding-bottom: 25px
}

.account-page__content .card-header .card-title {
    font-size: 16px
}

.account-page__content-body {
    padding: 10px 25px
}

.account-tab {
    margin-top: 30px;
    margin-bottom: 30px
}

.account-tab .account-tab-item {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 15px 0;
    border-top: 1px solid #efefef;
    color: #999;
    transition: all .2s ease-in;
    font-size: 16px
}

.account-tab .account-tab-item:last-child {
    border-bottom: 1px solid #efefef
}

.account-tab .account-tab-item.router-link-active {
    color: #4777ff
}

.account-tab .account-tab-item.router-link-active:before {
    opacity: 1
}

.account-tab .account-tab-item:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 2px;
    background-color: #4777ff;
    opacity: 0;
    transition: all .2s ease-in
}

.account-tab .account-tab-item:hover {
    color: #4777ff
}

.account-person-info .avatar-wrap {
    height: 65px;
    width: 65px
}

.account-person-info .avatar-wrap .avatar-icon-wrap {
    font-size: 30px
}

.account-person-info .username {
    margin-top: 10px;
    color: #333;
    margin-bottom: 5px
}

.account-person-info .user-ver {
    color: #999
}

.account-profile {
    padding: 30px 40px
}

.account-profile .account-profile-container {
    display: inline-block;
    width: 55%
}

.account-profile .account-avatar-uploader {
    display: inline-block;
    width: 30%
}

.account-profile-item {
    position: relative;
    margin-bottom: 10px;
    padding: 10px 15px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    border-radius: 4px
}

.account-profile-item:after {
    display: block;
    clear: both;
    content: ""
}

.account-profile-item .label-name, .account-profile-item .profile-action, .account-profile-item .profile-value {
    font-size: 14px;
    display: inline-block;
    vertical-align: middle
}

.account-profile-item .profile-value {
    color: #999
}

.account-profile-item .label-name {
    width: 4em;
    color: #666
}

.account-profile-item .profile-action {
    position: relative;
    top: 1.5px;
    float: right;
    line-height: 21px;
    height: 21px
}

.acount-avatar-uploader {
    display: inline-block;
    margin: 0 auto
}

.acount-avatar-uploader .avatar-wrap {
    height: 120px;
    width: 120px
}

.acount-avatar-uploader .avatar-wrap .avatar-icon-wrap {
    font-size: 70px
}

.account-profile-modal .mk-modal__title {
    font-size: 16px
}

.profile-modal-content .change-password .form-control {
    padding-left: 8em
}

.account-profile-form {
    text-align: center
}

.account-profile-form .form-control {
    padding-top: 12px;
    padding-bottom: 12px
}

.account-profile-form .submit-btn {
    margin-top: 20px;
    width: 120px
}

.bind-wechat {
    text-align: center
}

.bind-wechat .wechat-actions {
    margin-top: 20px
}

.bind-wechat .wechat-actions .btn {
    margin: 0 10px
}

.bind-wechat .help-info {
    color: #aaa
}

.account-change-phone-form .validation-code-line .mk-form-item__content {
    width: 100%
}

.account-change-phone-form .validation-code-line .form-control {
    padding-left: 5em
}

.account-change-phone-form .validation-code-line .validation-code-btn {
    padding-top: 15px;
    padding-bottom: 15px
}

.account-change-phone-form .cellphone-line .country-code-select {
    width: 90px
}

.account-recharge .cur-plan {
    width: 190px;
    text-align: center
}

.account-recharge .cur-plan .btn {
    margin-top: 10px
}

.account-recharge .member-plan-details {
    padding-top: 20px
}

.account-recharge .payment-item {
    padding: 0 10px;
    margin: 0;
    border-right-color: #efefef;
    flex-grow: 1
}

.account-recharge .payment-item:last-child {
    border-right-color: transparent
}

.account-recharge .payment-item__name {
    font-size: 20px
}

.account-recharge .payment-item__price-hint {
    display: none
}

.account-recharge .usage-stat__item {
    width: 50%;
    padding: 15px
}

.account-recharge__suit-for {
    margin-top: 10px;
    color: #999
}

.account-recharge__separator {
    margin: 15px auto;
    background: #ddd
}

.account-recharge__other-plans header {
    margin-left: 5px;
    color: #999
}

.account-recharge__other-plans .btn-list {
    margin-top: 20px;
    margin-bottom: 40px;
    text-align: center
}

.account-recharge__other-plans .btn-list .btn {
    color: #4777ff;
    border-color: #4777ff;
    width: 90px;
    padding: 2px;
    border-radius: 0
}

.account-recharge__other-plans .btn-list .btn.btn-theme {
    color: #fff
}

.account-recharge__other-plans .btn-list .btn:first-child {
    border-radius: 4px 0 0 4px
}

.account-recharge__other-plans .btn-list .btn:last-child {
    border-radius: 0 4px 4px 0
}

.plan-limit {
    line-height: 1.8
}

.plan-limit p {
    color: #999
}

.plan-limit .link {
    margin-top: 10px;
    text-decoration: underline
}

.plan-limit__top-separator {
    max-width: 200px;
    margin: 20px auto;
    border-top: 1px solid #ccc
}

.account-payment .payment-info-table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%
}

.account-payment .payment-info-table td {
    text-align: center
}

.account-payment .payment-info-table thead td {
    color: #999;
    padding: 10px
}

.account-payment .payment-info-table tbody td {
    background-color: #f9f9f9;
    padding: 15px 10px;
    border-bottom: 1px solid #ddd
}

.account-payment .payment-info-table tbody tr:last-child td {
    border-bottom: 0
}

.account-payment .payment-pagination {
    margin-top: 30px
}

.video-list-container .empty-list-hint {
    margin-top: 15px;
    padding-top: 20px;
    overflow: hidden;
    text-align: center;
    font-size: 16px;
    color: #999
}

.video-list-container .empty-list-hint .card-body {
    transition: all .25s
}

.video-list-container .empty-list-hint .video-js {
    width: 560px;
    height: 315px
}

.video-list-container .empty-list-hint .link {
    font-size: inherit;
    vertical-align: baseline
}

.video-list-container .empty-list-hint__text {
    margin-bottom: 20px;
    line-height: 2
}

.video-list-container .empty-list-hint__title {
    margin-bottom: 10px
}

.video-list-container .empty-list-hint__bottom {
    margin-top: 15px;
    font-size: 14px
}

.video-list {
    margin-top: 15px
}

.video-query-card .card-title {
    margin-bottom: 0
}

.video-query-card .card-body {
    padding: 30px 30px 15px
}

.video-query-card .create-video-btn {
    width: 110px;
    padding-left: 0;
    padding-right: 0
}

.video-query {
    border-top: 1px solid #ccc;
    margin-top: 20px;
    padding-top: 10px
}

.video-query .search-toggle {
    margin-right: 15px
}

.video-query .mk-select {
    width: 130px
}

.video-query .bb:hover {
    background-color: transparent
}

.see-you-soon {
    padding-top: 70px;
    text-align: center
}

.see-you-soon h2 {
    padding-bottom: 20px
}

.see-you-soon h5 {
    padding-bottom: 30px
}

.see-you-soon .btn-lg {
    width: 180px
}

.pay-type-item {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px
}

.pay-type-item .item-content, .pay-type-item .item-title {
    display: inline-block
}

.pay-type-item .item-title {
    width: 8em;
    vertical-align: top
}

.pay-type-item .item-title h6 {
    color: #999;
    font-size: 14px;
    margin-bottom: 0
}

.pay-type-item .pay-type-radio {
    margin-right: 20px
}

.purchase-card {
    position: relative;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border-radius: 4px;
    box-shadow: 0 .15rem .5rem rgba(51, 51, 51, .2);
    margin-bottom: 15px;
    padding: 25px 30px 30px
}

.purchase-card .purchase-card-title {
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid #ccc
}

.purchase-card .purchase-card-title h5 {
    margin-bottom: 0
}

.purchase-info-item {
    width: 100%;
    text-align: center;
    border-left: 1px solid #fff
}

.purchase-info-item .purchase-info-title {
    padding-top: 10px;
    padding-bottom: 15px
}

.purchase-info-item .purchase-info-title h6 {
    color: #999;
    font-size: 14px;
    margin-bottom: 0
}

.purchase-info-item .purchase-info-content {
    padding: 15px 10px;
    background-color: #f9f9f9
}

.pay-info-item {
    width: 13em;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between
}

.purchase-info-table {
    background-color: #f9f9f9
}

.purchase-info-table .purchase-info-item .purchase-info-title {
    background-color: #fff
}

.purchase-info-table .info-table-hint {
    color: #ff6544;
    margin-top: 10px;
    font-size: 12px
}

.purchase-info-table .info-table-hint .bb {
    vertical-align: text-bottom
}

.pay-type-radio {
    position: relative;
    display: inline-block;
    text-align: center;
    padding: 15px 25px;
    width: 170px;
    box-sizing: border-box;
    cursor: pointer
}

.pay-type-radio:before {
    content: " ";
    position: absolute;
    transition: all .2s ease-out;
    border-radius: 4px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid #ccc
}

.pay-type-radio .mk-radio__inner:after, .pay-type-radio .mk-radio__inner:before {
    content: " ";
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0;
    transition: all .2s ease-out
}

.pay-type-radio .mk-radio__inner:before {
    bottom: 5px;
    right: 2px;
    z-index: 2;
    width: 8px;
    height: 4px;
    border-bottom-left-radius: 2px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(-50deg)
}

.pay-type-radio .mk-radio__inner:after {
    bottom: 1.5px;
    right: 1.5px;
    border-bottom: 20px solid #ccc;
    border-left: 20px solid transparent
}

.pay-type-radio.active:before {
    border: 2px solid #ff6544
}

.pay-type-radio.active .mk-radio__inner:after, .pay-type-radio.active .mk-radio__inner:before {
    opacity: 1
}

.pay-type-radio.active .mk-radio__inner:after {
    border-bottom-color: #ff6544
}

.pay-type-radio p {
    text-align: center;
    margin-bottom: 0
}

.pay-type-radio p.after_title {
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #ccc
}

.pay-type-radio .mk-radio__input input {
    display: none
}

.pay-type-radio .mk-radio__label {
    display: inline-block
}

.pay-type-radio img {
    height: 40px
}

.pay-action {
    margin-top: 20px
}

.pay-action__price-info {
    padding: 10px;
    text-align: right;
    background-color: #f9f9f9
}

.pay-action__price-info b {
    font-size: 24px
}

.pay-action__btn {
    margin-top: 20px;
    text-align: center
}

.pay-action__btn .btn {
    width: 180px
}

.pay-type__account-balance .pay-type-radio {
    margin-bottom: 10px;
    margin-right: 0
}

.pay-type__account-balance .pay-type-content-header {
    font-size: 16px
}

.back-edit {
    margin-top: 20px;
    text-align: right
}

.back-edit .btn {
    width: 120px
}

.purchase-info .mk-modal__header {
    padding: 10px
}

.purchase-info__alipay h4 {
    margin-bottom: 20px
}

.purchase-info__alipay .btn {
    width: 7em;
    box-sizing: border-box;
    margin: 15px 10px
}

.purchase-info__wxpay {
    margin-top: 30px
}

.purchase-info__actions {
    text-align: center;
    margin-top: 15px
}

.purchase-info__actions p {
    font-size: 16px
}

.purchase-info__help-actions .help-actions-title {
    margin-bottom: 20px
}

.purchase-info__help-actions p {
    color: #999
}

.purchase-info__help-actions .btn {
    margin: 15px 10px;
    box-sizing: border-box;
    min-width: 8em
}

.pay-success-modal {
    text-align: center
}

.pay-success-modal .success-icon {
    color: #4cccbb;
    margin-right: 5px;
    vertical-align: text-top;
    font-size: 40px
}

.pay-success-modal__title {
    font-size: 20px
}

.pay-success-modal__icon-wrap {
    margin-bottom: 30px
}

.pay-success-modal__actions {
    margin-top: 25px
}

/*! Depth */
.auth-page .copyright {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    z-index: 0
}

.auth-page.mobile .copyright {
    margin-top: 30px;
    position: static
}

.auth-page.mobile .copyright span {
    display: block
}

.auth-page-panel {
    position: relative;
    z-index: 3;
    box-shadow: 0 .15rem .5rem rgba(51, 51, 51, .2);
    background-color: #fff;
    width: 880px;
    border-radius: 4px
}

.auth-page-panel .auth-page-info {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    height: 100%;
    color: #fff;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.auth-page-panel .auth-page-content {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    height: 100%
}

.mobile .auth-page-panel {
    padding-bottom: 10px
}

.auth-page-panel--pc {
    height: 540px
}

.auth-page-info .info-wrap {
    padding: 45px
}

.auth-page-info .info-wrap li {
    margin-bottom: 0;
    line-height: 2.5
}

.auth-page-info h4 {
    margin-top: 20px;
    margin-bottom: 40px;
    color: #fff
}

.auth-nav-tab {
    margin-top: 50px;
    margin-bottom: 30px;
    width: 100%;
    text-align: center
}

.auth-nav-tab.phone {
    margin-top: 25px;
    margin-bottom: 20px
}

.auth-nav-tab.login {
    margin-top: 100px
}

.auth-nav-tab.login-phone {
    margin-top: 100px;
    margin-bottom: 30px
}

.auth-nav-tab .dot {
    padding-left: 15px;
    padding-right: 15px;
    position: relative
}

.auth-nav-tab .dot:after {
    content: " ";
    position: absolute;
    width: 4px;
    height: 4px;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    background-color: #ccc;
    transform: translate(-50%, -50%)
}

.auth-nav-tab .nav-item {
    font-size: 18px
}

.auth-nav-tab .nav-item:after {
    display: inline-block
}

.weixin-qrcode, .weixin-qrcode p {
    text-align: center
}

.weixin-qrcode p {
    margin-bottom: 25px;
    color: #999
}

.weixin-qrcode .qrcode-wrap {
    display: inline-block;
    width: 180px;
    height: 180px
}

.auth-extra-action {
    margin-bottom: 10px;
    text-align: right
}

.auth-extra-action:after {
    display: block;
    clear: both;
    content: ""
}

.auth-extra-action .remeber-me {
    display: block;
    float: left
}

.auth-extra-action .remeber-me .mk-checkbox__label {
    font-size: 13px;
    color: #999
}

.auth-extra-action .forget-password {
    display: inline-block;
    font-size: 13px;
    color: #999
}

.auth-extra-action .forget-password:hover {
    color: #666
}

.phone-form {
    padding: 0 70px
}

@media (max-width: 767px) {
    .phone-form {
        padding: 0 50px
    }
}

.forget-passwd-application p {
    text-align: center;
    margin-bottom: 30px
}

.forget-passwd-application .application-link {
    position: absolute;
    right: 50px;
    bottom: 40px
}

.auth-page__help-info {
    text-align: center;
    margin-top: 5px
}

.auth-page__help-info p {
    font-size: 13px;
    color: #999
}

.auth-page__help-info .link.link-help {
    font-size: 13px
}

.already-login {
    text-align: center;
    height: 100%
}

.already-login .actions {
    display: inline-block;
    margin-top: 50px
}

.already-login .actions .btn {
    width: 160px;
    display: block;
    margin-bottom: 10px
}

.reset-success {
    text-align: center
}

.reset-success .success-icon-wrap {
    color: #4777ff;
    font-size: 50px
}

.reset-success h4 {
    color: #4777ff
}

.reset-success p {
    color: #999
}

.login-form {
    padding-top: 20px
}

.register-form .last-item {
    margin-bottom: 0
}

.register-form .user-scene-tip {
    font-size: 12px;
    text-align: left;
    padding-top: unset;
    margin: 10px 0
}

.register-form .btn-scene {
    position: relative;
    width: calc(50% - 5px);
    margin-bottom: 10px;
    color: #666;
    border-color: #ddd
}

.register-form .btn-scene:hover {
    border-color: #4777ff;
    color: #4777ff
}

.register-form .btn-scene:nth-child(2n) {
    margin-left: 10px
}

.register-form .btn-scene:after, .register-form .btn-scene:before {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0
}

.register-form .btn-scene:before {
    border-top: 24px solid #4777ff;
    border-left: 24px solid transparent
}

.register-form .btn-scene:after {
    right: 3px;
    top: 4px;
    width: 6px;
    height: 3px;
    border-bottom-left-radius: 2px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(-50deg);
    transition: all .2s ease-out
}

.register-form .btn-scene.active {
    border-color: #4777ff;
    color: #4777ff
}

.register-form .btn-scene.active:after, .register-form .btn-scene.active:before {
    content: ""
}

.register-form .auth-page__help-info p {
    padding-top: 5px
}

.mobile .register-form .auth-page__help-info p {
    margin-bottom: 0
}

.bind-old-account .mk-modal__body {
    padding: 0 50px 30px
}

.bind-old-account .mk-modal {
    width: 480px
}

.bind-old-account .title {
    text-align: center;
    margin-bottom: 20px
}

.bind-old-account .control-label {
    position: absolute;
    left: 20px;
    top: 9px;
    font-size: 14px;
    z-index: 1;
    color: #666
}

.bind-old-account .form__line {
    position: relative
}

.bind-old-account .form-control {
    padding-left: 6em
}

.phone-existing .mk-message-box__content {
    padding: 30px 24px
}

.phone-existing .sub-title {
    font-size: 16px
}

.phone-existing .warnning {
    color: #ff9100;
    margin-top: 15px;
    text-align: left
}

.phone-existing .btn {
    padding: 8px 18px;
    font-size: 14px;
    line-height: 1.6;
    border-radius: 4px
}

.set-password-form .form-control {
    padding-left: 8em !important
}

.auth-realname-hint.with-shadow {
    box-shadow: 0 .15rem .5rem rgba(51, 51, 51, .2)
}

.auth-realname-hint .mk-alert__closebtn {
    display: none
}

.auth-realname-hint--pc {
    position: absolute;
    top: -45px;
    max-width: 100vh
}

.auth-realname-hint--mobile {
    margin-bottom: 10px
}

.auth-type-phone .last-item {
    margin-bottom: 15px
}

.auth-type-phone.single-step .mk-form-item {
    margin-bottom: 10px
}

.mobile .auth-type-phone.single-step .mk-form-item {
    margin-bottom: 15px
}

.auth-type-phone.single-step .last-item {
    margin-bottom: 0
}

.auth-type-phone.single-step .auth-nav-tab {
    margin-top: 20px;
    margin-bottom: 25px
}

.auth-footer .cut-off-rule {
    color: #ccc;
    border: none;
    border-bottom: 1px solid #ccc;
    position: relative;
    height: 10px;
    margin-top: 25px;
    margin-bottom: 25px
}

.auth-footer .cut-off-rule span {
    text-align: center;
    display: block;
    width: 60px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    background: #fff
}

.auth-footer .btn {
    width: calc(50% - 5px);
    margin-left: 10px
}

.auth-footer .btn:first-child {
    margin-left: unset
}

.auth-footer .hint {
    text-align: center;
    margin: 20px auto;
    color: #999
}

.auth-footer .qq {
    border-color: #12b7f5;
    color: #12b7f5
}

.auth-footer .qq:hover {
    border-color: #00a3e0;
    color: #00a3e0
}

.auth-footer .we-chat {
    border-color: #06c25f;
    color: #06c25f
}

.auth-footer .we-chat:hover {
    border-color: #23a661;
    color: #23a661
}

.auth-footer.without-qq .auth-footer-item {
    width: 100%;
    margin: 0
}

.mobile .auth-footer.without-qq {
    display: none
}

.mobile .auth-footer .btn-group {
    padding: 0 50px;
    width: 100%;
    box-sizing: border-box
}

.mobile .auth-footer .qq {
    width: 100%;
    margin: 0
}

.auth {
    padding: 0 70px
}

.auth .application-link {
    position: absolute;
    right: 30px;
    bottom: 20px
}

.mobile .auth {
    padding: 0 40px
}

.auth.single-step .mk-form-item {
    margin-bottom: 10px
}

.mobile .auth.single-step .mk-form-item {
    margin-bottom: 15px
}

.auth.single-step .last-item {
    margin-bottom: 0
}

.auth.single-step .auth-nav-tab {
    margin-top: 20px;
    margin-bottom: 25px
}

/*! Depth */
.page-banner {
    color: #666;
    position: relative;
    height: 880px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

.page-banner .container {
    position: relative;
    height: 100%
}

.page-banner .banner-content {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
    top: 0;
    z-index: 2;
    color: #fff;
    text-align: center
}

.page-banner .banner-content h4 {
    margin-top: 15px;
    color: #aaa;
    color: #999
}

.page-banner .banner-content h1 {
    height: 84px;
    line-height: 84px;
    margin-top: 54px
}

.page-banner .banner-content .banner-btn {
    margin-top: 40px;
    width: 180px;
    padding-left: 0;
    padding-right: 0;
    border-radius: 24px
}

@media (min-width: 769px) {
    .has-registerPage .page-banner .banner-content {
        transform: unset;
        top: 0;
        left: 0;
        text-align: left
    }

    .has-registerPage .page-banner .banner-content .index-main {
        width: 50%;
        float: left
    }

    .has-registerPage .page-banner .banner-content .index-register {
        width: 50%;
        float: left;
        margin-top: 60px
    }

    .has-registerPage .page-banner .banner-content h1 {
        height: 84px;
        line-height: 84px;
        margin-top: 154px
    }

    .has-registerPage .page-banner .banner-content .register-content {
        width: 400px;
        height: 540px;
        margin: 0 auto;
        background: #fff;
        border-radius: 7px
    }

    .has-registerPage .page-banner .banner-content .register-content h4 {
        color: #333
    }

    .has-registerPage .page-banner .banner-content .register-content .user-scene-tip {
        color: #666
    }

    .has-registerPage .page-banner .banner-content .register-content .auth-nav-tab {
        margin-top: 0
    }

    .has-registerPage .page-banner .banner-content .auth {
        padding: 30px 50px 60px
    }
}

@media (max-width: 768px) {
    .has-registerPage .page-banner .banner-content .index-register {
        display: none
    }
}

.page-banner img {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%)
}

.page-banner .banner-content-left {
    left: 0;
    transform: translateY(-50%);
    text-align: left
}

.page-banner .picture-mask {
    background-color: rgba(17, 27, 51, .4)
}

@media (max-width: 768px) {
    .page-banner .banner-content {
        width: 80%
    }
}

@media (max-width: 425px) {
    .page-banner {
        height: 700px
    }

    .page-banner .banner-content {
        width: 80%
    }

    .page-banner .banner-content h1 {
        height: auto;
        margin-top: 54px
    }
}

.banner-video {
    height: 640px;
    position: relative;
    overflow: hidden
}

.banner-video .banner-content {
    top: 50%;
    transform: translate(-50%, -50%)
}

.banner-video .banner-content h1, .banner-video .banner-content h4 {
    color: #fff
}

.banner-video .video:after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 100%;
    height: 100%;
    cursor: default;
    background: rgba(0, 0, 0, .2)
}

.has-registerPage .banner-video .video:after {
    background: rgba(0, 0, 0, .4)
}

.banner-video .video {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

@media (max-width: 768px) {
    .banner-video {
        height: calc(100vh - 64px)
    }
}

.banner {
    width: 100%;
    margin-top: -640px
}

.banner .overflow-x {
    overflow-x: hidden;
    padding-top: 100px;
    padding-bottom: 10px
}

.banner .container {
    position: relative
}

.banner .banner-img {
    width: 100%;
    margin: auto;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 20px 4px rgba(51, 57, 79, .1)
}

.section {
    padding-top: 55px;
    padding-bottom: 60px
}

.section .section__title {
    text-align: center;
    margin-bottom: 40px
}

.section .section__title h6 {
    color: #999
}

.section .section__content {
    display: inline-block;
    vertical-align: top
}

.section .section__content p {
    color: #999
}

.page-slider {
    position: relative;
    text-align: center;
    color: #fff;
    height: 500px
}

.page-slider .slider-content-center {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%)
}

.page-slider .slider-content-center h2, .page-slider .slider-content-center h3, .page-slider .slider-content-center h5 {
    color: #fff
}

.page-slider .slider-content-center h5 {
    margin-top: 40px
}

.page-slider .slider-content-center .slider-btn {
    margin-top: 50px;
    width: 220px;
    padding-left: 0;
    padding-right: 0
}

.page-slider .slider-content-bottom {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%)
}

.copyright p {
    color: #ccc;
    font-size: 12px
}

.user-platform {
    text-align: center
}

.user-platform .subtitle {
    margin-top: 10px
}

.user-platform .seo-sub-title {
    display: none
}

.user-platform .banner-btn {
    height: 46px;
    line-height: 1.7;
    box-sizing: border-box;
    font-size: 14px;
    margin-top: 20px;
    width: 180px;
    padding-left: 0;
    padding-right: 0;
    border-radius: 24px
}

@media (max-width: 768px) {
    .user-platform .container {
        padding: 0 40px
    }
}

@media (max-width: 425px) {
    .user-platform h2 {
        line-height: 60px;
        height: auto
    }

    .user-platform h2, .user-platform h6 {
        padding: 0 20px
    }
}

.video-item .card-body {
    overflow: hidden;
    border-radius: 4px 4px 0 0
}

.video-item .card-footer {
    padding: 15px;
    position: relative
}

.video-item .video-item-sub-info {
    color: #999;
    margin-top: 5px
}

.video-item .video-item-progress {
    position: absolute;
    width: 100%;
    height: 3px;
    left: 0;
    top: 0
}

.video-item .video-item-progress .bar {
    border-radius: 0
}

.video-item .form-control:disabled {
    color: #666
}

.video-item__cover {
    position: relative
}

.video-item__cover .video-thumbnail-img img {
    width: 100%
}

.video-item__cover .cover-overlay {
    background-color: rgba(0, 0, 0, .5);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity .2s ease-in-out, background-color .6s ease-in-out
}

.video-item__cover .cover-overlay.show-overlay {
    background: rgba(0, 0, 0, .5);
    opacity: 1
}

.video-item__cover .cover-overlay:hover {
    background: rgba(0, 0, 0, .6)
}

.video-item__cover .top-action {
    text-align: center;
    font-size: 18px;
    transition: all .2s ease-in-out
}

.video-item__cover .top-action .bb {
    padding-right: 8px
}

.video-item__cover .action-btn {
    display: inline-block;
    color: #fff;
    transition: transform .1s ease-in-out
}

.video-item__cover .action-btn span {
    vertical-align: middle
}

.video-item__cover .action-btn:hover {
    transform: scale(1.1)
}

.video-item__cover .video-action-items {
    margin-top: 12px;
    padding-top: 13px;
    border-top: 1px solid #ccc;
    transition: all .2s ease-in-out
}

.video-item__cover .video-action-items .action-btn {
    text-align: center;
    padding: 0 15px
}

.video-item__cover .video-action-items .action-btn .bb {
    display: block
}

.video-item__cover .video-action-items .action-btn .bb:before {
    transform: scale(1.8)
}

.video-item__cover .video-action-items .action-btn span {
    font-size: 12px
}

.video-item__cover .more-actions {
    position: absolute;
    right: 15px;
    top: 8px;
    color: #fff;
    font-size: 20px
}

.video-title-block {
    width: 74%;
    font-size: 14px
}

.video-title-block .icons, .video-title-block .mk-form-item {
    height: auto
}

.video-title-block .icons {
    margin-top: 0
}

.video-title-block .form-control {
    width: 129px;
    font-size: 14px;
    margin: 0;
    padding: 2px 0 1px;
    border-radius: 0
}

.video-title-block .form-control .bb {
    margin-left: 5px
}

.video-more-actions {
    min-width: 80px;
    padding: 0
}

.video-more-actions[x-placement^=bottom] {
    margin-top: 4px
}

.video-more-actions .option-item {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    color: #666
}

.video-more-actions .option-item .bb {
    margin-right: 5px
}

.video-more-actions .option-item .text {
    vertical-align: middle
}

.video-more-actions .option-item:hover {
    background-color: #efefef
}

.user-platform-item {
    width: 25%;
    box-sizing: border-box;
    display: inline-block;
    padding: 10px;
    cursor: pointer
}

.user-platform-item .theme-item {
    border-radius: 7px;
    overflow: hidden
}

.user-platform-item .theme-item .cover-overlay {
    background-color: rgba(0, 0, 0, .2);
    transition: opacity .2s ease-in-out, background-color 1s ease-in-out
}

.user-platform-item .theme-item .cover-overlay:hover {
    background-color: rgba(0, 0, 0, .6)
}

.user-platform-item .theme-item .video-thumbnail-img img {
    width: 100%;
    display: block;
    transition: all 2s
}

.user-platform-item .theme-item .sub-title {
    font-size: 12px;
    color: #fff;
    padding: 15px 20px 0;
    text-align: left
}

.user-platform-item .theme-item.hover .video-thumbnail-img img {
    transform: scale(1.2)
}

.user-platform-item .action-btn {
    font-size: 20px
}

.user-platform-item .action-btn .bb:before {
    transform: scale(1.6)
}

.user-platform-item .action-btn.play {
    font-size: 18px
}

@media (max-width: 768px) {
    .user-platform-item {
        width: 50%
    }
}

@media (max-width: 767px) {
    .user-platform-item {
        width: 100%
    }
}

.use-guide {
    text-align: center;
    padding-bottom: 90px
}

.use-guide .section__content {
    width: 100%;
    margin-top: 30px
}

.use-guide .subtitle {
    margin-top: 10px
}

.use-guide .block {
    background: #fff;
    box-shadow: 0 0 20px 4px rgba(51, 57, 79, .1);
    border-radius: 7px;
    padding: 60px 30px;
    width: 25%;
    box-sizing: border-box
}

.use-guide .dot {
    position: relative;
    height: 309.63px;
    width: 12.5%
}

.use-guide .dot img {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto 0
}

@media (max-width: 768px) {
    .use-guide .dot {
        display: none
    }

    .use-guide .block {
        width: 70%;
        margin: 20px 0;
        padding: 20px 30px
    }

    .use-guide .block img {
        width: 20%;
        float: left
    }

    .use-guide .block h5 {
        font-size: 22px;
        margin-top: 0
    }

    .use-guide .block p {
        margin-top: 8px
    }
}

@media (max-width: 425px) {
    .use-guide .block {
        width: 90%
    }

    .use-guide p {
        padding-left: 20%
    }

    .use-guide h2, .use-guide h6 {
        padding: 0 20px
    }
}

@media (max-width: 360px) {
    .use-guide .block {
        padding: 10px 15px;
        width: 100%
    }

    .use-guide .block img {
        width: 25%
    }
}

.use-guide-item {
    display: inline-block;
    vertical-align: top;
    text-align: center
}

.use-guide-item h5, .use-guide-item p {
    margin-top: 20px
}

.use-guide-item img {
    width: 50%;
    display: inline-block;
    text-align: center
}

.tools .subtitle {
    margin-top: 10px
}

@media (max-width: 425px) {
    .tools h2 {
        padding: 0 50px
    }

    .tools h6 {
        padding: 0 20px
    }
}

@media (max-width: 360px) {
    .tools h2 {
        padding: 0 30px
    }
}

.tools-item {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin-bottom: 20px
}

.tools-item .content, .tools-item .pic {
    float: left;
    height: 465px
}

.tools-item .pic {
    width: 550px;
    margin: 0 25px
}

.tools-item .content {
    width: calc(100% - 600px);
    box-sizing: border-box;
    padding: 80px 60px
}

.tools-item .content.right {
    float: right
}

.tools-item img {
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    text-align: center
}

.tools-item h3 {
    margin-top: 50px;
    line-height: 50px;
    text-align: left
}

.tools-item p {
    font-size: 16px;
    text-align: left;
    line-height: 28px;
    margin-top: 8px;
    position: relative
}

.tools-item p:after {
    position: absolute;
    bottom: -20px;
    left: 0;
    content: "";
    width: 30px;
    border-bottom: 3px solid #4777ff
}

@media (max-width: 1200px) {
    .tools-item .content, .tools-item .pic {
        height: 310px
    }

    .tools-item .pic {
        width: 400px
    }

    .tools-item .content {
        width: calc(100% - 400px)
    }

    .tools-item h3 {
        margin-top: 0
    }
}

@media (max-width: 768px) {
    .tools-item {
        position: relative;
        margin-bottom: 40px
    }

    .tools-item h3 {
        line-height: 30px
    }

    .tools-item .content, .tools-item .pic {
        height: 200px;
        margin: 20px 0
    }

    .tools-item .pic {
        position: absolute;
        top: 0;
        left: -20px;
        z-index: 0;
        width: 40%
    }

    .tools-item .content {
        width: 60%;
        padding: 0;
        float: right
    }
}

.slider-footer {
    height: 540px;
    background-color: #33394f
}

.slider-footer .content {
    width: 1200px;
    margin: 0 auto
}

.slider-footer .article {
    padding-top: 60px;
    margin-bottom: 50px;
    margin-left: 5%;
}

@media (max-width: 767px) {
    .slider-footer .article {
        padding-top: 60px;
        margin-bottom: 50px;
        margin-left: 0;
    }
}

.slider-footer .article:after {
    display: block;
    clear: both;
    content: ""
}

.slider-footer .blogs {
    width: 25%;
    padding: 0 100px 0 40px;
    box-sizing: border-box
}

.slider-footer dl {
    float: left;
    box-sizing: border-box;
    width: 25%;
    margin: 0
}

.slider-footer dt {
    font-size: 16px;
    color: #fff;
    margin-bottom: 20px
}

.slider-footer dd {
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0
}

.slider-footer dd a {
    color: #fff
}

.slider-footer ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.slider-footer ul:after {
    display: block;
    clear: both;
    content: ""
}

.slider-footer li {
    float: left;
    border: 1px solid #fff;
    margin-right: 10px;
    border-radius: 7px;
    color: #fff
}

.slider-footer li .bb {
    padding: 5px 10px;
    display: inline-block
}

.slider-footer li:hover {
    color: #33394f;
    border: 1px solid #33394f;
    background-color: #fff
}

.slider-footer .copyright, .slider-footer .links {
    height: 40px;
    line-height: 40px;
    text-align: center
}

.slider-footer .copyright a, .slider-footer .copyright p, .slider-footer .links a, .slider-footer .links p {
    color: #aaa;
    font-size: 12px
}

.slider-footer .links a {
    padding: 0 6px;
    position: relative
}

.slider-footer .links a:last-child:before {
    display: none
}

.slider-footer .links a:before {
    content: "";
    position: absolute;
    right: 0;
    top: 3px;
    border-left: 1px solid #aaa;
    height: 12px
}

.slider-footer .links a:after {
    background: #aaa;
    left: 6px;
    width: calc(100% - 12px)
}

.slider-footer a {
    position: relative;
    text-decoration: none
}

.slider-footer a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 100%;
    background: #fff;
    transform: scale(0);
    transition: all .3s
}

.slider-footer a:hover:after {
    transform: scale(1)
}

@media (max-width: 1200px) {
    .slider-footer .content {
        width: 100%;
        margin: 0 auto
    }

    .slider-footer .blogs {
        width: 25%;
        padding: 0 50px 0 40px
    }

    .slider-footer .contact {
        width: 25%
    }

    .slider-footer dl {
        width: 16.6%
    }

    .slider-footer dt {
        font-size: 14px
    }

    .slider-footer dd {
        font-size: 12px
    }
}

@media (max-width: 767px) {
    .slider-footer {
        display: block
    }
    .slider-footer .blogs {
        width: 50%;
        padding: 0 50px 0 40px
    }
    .slider-footer .contact {
        width: 80%;
        padding: 20px 50px 0 40px
    }
}

.mediums .section__content:after {
    display: block;
    clear: both;
    content: ""
}

.mediums .medium-item {
    float: left;
    margin: 0 30px
}

@media (max-width: 767px) {
    .mediums .medium-item {
        float: none;
        margin: 0
    }

    .mediums .medium-item img {
        margin: 15px auto;
        display: block
    }

    .mediums .section__content {
        width: 100%
    }
}

.start {
    background: #fff url(https://cdn.static.duomu.tv/common-assets/dotLine.svg) repeat-x;
    background-position-y: bottom;
    box-sizing: border-box
}

.start .section__title {
    max-width: 820px;
    margin: 0 auto;
    min-height: 310px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 0 20px 4px rgba(51, 57, 79, .1)
}

.start h6 {
    color: #aaa;
    height: 40px;
    line-height: 40px
}

.start h2 {
    height: 84px;
    line-height: 84px;
    padding-top: 48px
}

.start .banner-btn {
    margin-top: 40px;
    width: 180px;
    padding-left: 0;
    padding-right: 0;
    border-radius: 24px;
    margin-bottom: 24px
}

@media (max-width: 425px) {
    .start {
        height: 420px
    }

    .start h2 {
        height: auto;
        padding: 20px 40px;
        line-height: 60px
    }

    .start h6 {
        padding: 0 10px
    }

    .start .banner-content {
        width: 80%
    }
}

@media (max-width: 360px) {
    .start h2 {
        font-size: 24px
    }
}

.homepage .index-header {
    z-index: 1999
}

.mk-modal--video-ad {
    background-color: rgba(0, 0, 0, .9) !important;
    text-align: center
}

.mk-modal--video-ad .mk-modal__headerbtn {
    color: #efefef
}

.mk-modal--video-ad .btn {
    color: #4777ff;
    background: #fff;
    border-color: #fff;
    margin-top: 56px;
    height: 46px;
    line-height: 24px;
    box-sizing: border-box;
    font-size: 14px;
    width: 180px;
    padding-left: 0;
    padding-right: 0;
    border-radius: 24px
}

.pricing-page .pricing-plans .section__content {
    width: 100%
}

.pricing-page .pricing-plans .section__content p {
    color: #666
}

.pricing-page .section .section__title h2 {
    margin-bottom: 1.5rem
}

.pricing-page .section .section__content {
    display: block
}

.pricing-page .pricing-detail {
    padding-top: 20px
}

.pricing-page .btn-list {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center
}

.pricing-page .btn-list .btn {
    color: #4777ff;
    border-color: #4777ff;
    width: 90px;
    padding: 2px;
    border-radius: 0
}

.pricing-page .btn-list .btn.btn-theme {
    color: #fff
}

.pricing-page .btn-list .btn:first-child {
    border-radius: 4px 0 0 4px
}

.pricing-page .btn-list .btn:last-child {
    border-radius: 0 4px 4px 0
}

.pricing-page .member-plans {
    text-align: center;
    box-shadow: 0 0 2rem rgba(51, 51, 51, .15);
    margin-top: 40px
}

.pricing-page .payment-item {
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: 25%;
    transition: transform .3s ease, border .3s ease;
    background: #fff;
    border-right-color: #ccc
}

.pricing-page .payment-item:last-child {
    border-right-color: transparent
}

.pricing-page .payment-item.active, .pricing-page .payment-item:hover {
    transform: scale(1.05);
    border: 1px solid #4777ff;
    outline: 1px solid #4777ff;
    z-index: 10;
    box-shadow: 0 0 2rem rgba(51, 51, 51, .15)
}

.pricing-page .payment-item__action {
    width: 90px;
    margin-top: 20px
}

.pricing-page__panel {
    padding: 30px;
    background: #fff
}

.pricing-faq__sec {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    padding: 10px;
    box-sizing: border-box
}

.pricing-faq__sec li {
    margin-bottom: 10px
}

.not-found-page .content {
    padding-top: 30px
}

.not-found-page .not-found-container {
    box-sizing: border-box;
    text-align: center
}

.not-found-page .spaceship {
    width: 60%
}

.not-found-page .info-sec {
    display: inline-block;
    vertical-align: top;
    margin-left: 50px;
    margin-top: 40px;
    text-align: left
}

.not-found-page .hero-title {
    font-size: 72px;
    margin-top: 30px
}

.not-found-page p {
    color: #999
}

.not-found-page .actions {
    margin-top: 50px
}

@media (max-width: 576px) {
    .not-found-page .spaceship {
        width: 100%
    }

    .not-found-page .info-sec {
        margin: 0;
        width: 100%;
        text-align: center
    }
}

.theme-tags__group {
    flex-grow: 1
}

.theme-market__list {
    margin-top: 15px
}

.theme-market__list .card img {
    width: 100%
}

.theme-market__list .card-body {
    border-radius: 4px 4px 0 0;
    overflow: hidden
}

.theme-market__list .card-footer {
    padding: 10px 15px
}

.theme-tags__tags {
    margin-top: 10px
}

.theme-tags {
    border-top: 1px solid #ccc;
    padding-top: 10px;
    height: 125px;
    overflow: hidden
}

.theme-tags.show-more {
    height: unset
}

.theme-tags .theme-tags-row {
    width: 100%;
    margin-bottom: 10px
}

.theme-tags .theme-tags-row:last-child {
    margin-bottom: 0
}

.theme-tags .group-title {
    margin-left: 6px;
    margin-bottom: 0
}

.theme-tags .theme-tag__group {
    padding: 0 0 0 15px;
    border-right: 1px solid #ddd;
    width: 100%
}

.theme-tags .theme-tag__group .tags-wrap {
    margin-top: 5px
}

.theme-tags .theme-tag__group:first-child {
    padding-left: 0
}

.theme-tags .theme-tag__group:last-child {
    padding-right: 0;
    border-right: 0
}

.theme-tags .more-btn {
    cursor: pointer;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    width: 80px;
    padding: 5px;
    text-align: center;
    background: #fff;
    box-shadow: 0 4px .5rem rgba(51, 51, 51, .2);
    border-radius: 0 0 4px 4px;
    color: #999
}

.theme-tags .more-btn:hover, .theme-tags .more-btn:hover .bb {
    color: #666
}

.theme-tags .more-btn .bb {
    font-size: 12px;
    color: #aaa;
    margin-left: 5px
}

.theme-tags .more-btn .bb:before {
    transform: translateY(-2px) scale(1.4)
}

.theme-market__panel.has-more-tag-row {
    margin-bottom: 50px
}

.theme-market__panel .theme-market-info .info-content, .theme-market__panel .theme-market-info .theme-market__query {
    display: inline-block
}

.theme-info {
    color: #666
}

.theme-info dl {
    margin: 0
}

.theme-info .info-sec {
    line-height: 1.8
}

.theme-info .info-sec dt {
    display: inline-block;
    margin-right: 10px
}

.theme-info .info-sec dd {
    display: inline-block;
    -webkit-margin-start: 0;
    vertical-align: top
}

.theme-info .info-sec > dd {
    width: calc(100% - 42px)
}

.theme-info .separator {
    margin-top: 20px;
    margin-bottom: 20px
}

.theme-info li {
    line-height: 1.8
}

.theme-info .mk-radio .mk-radio__input {
    display: none
}

.theme-info .mk-radio .radio-item {
    color: #666;
    background-color: #fff;
    border: 1px solid #666
}

.theme-info .mk-radio.active .radio-item {
    color: #fff;
    background-color: #4777ff;
    border: 1px solid #4777ff
}

.theme-preview {
    font-size: 14px
}

.theme-preview__header {
    color: #333;
    font-size: 20px;
    margin: 10px 0
}

.theme-preview__header.title:after {
    display: block;
    clear: both;
    content: ""
}

.theme-preview__header.title .exclusive-template-img {
    float: left;
    width: 24px;
    margin-right: 3px;
    margin-top: 0
}

.theme-preview__header.title span {
    float: left
}

.theme-preview__left {
    margin-right: 15px;
    padding: 0;
    background: transparent;
    box-shadow: none
}

.theme-preview__left.flex--center {
    justify-content: unset
}

.theme-preview__left .videojs__wrap {
    box-shadow: 0 .15rem .5rem rgba(51, 51, 51, .2)
}

.theme-preview__right {
    width: 340px
}

.theme-preview__video .vjs-poster {
    background-color: #fff
}

.theme-preview__actions {
    text-align: center
}

.theme-preview__actions .btn {
    display: inline-block;
    width: 220px;
    margin-bottom: 10px
}

.theme-preview__actions .link:hover {
    color: #666
}

.exclusive-template-btn {
    background-color: #ff6544;
    border-color: #ff6544
}

.exclusive-template-btn:hover {
    background-color: #ff461e;
    border-color: #ff461e
}

.theme-preview-overlay {
    position: fixed;
    background: hsla(0, 0%, 100%, .9);
    z-index: 2000
}

.theme-preview-overlay .mk-modal__body, .theme-preview-overlay .mk-modal__header {
    padding: 0
}

.theme-preview-overlay .mk-modal {
    width: 85vw;
    max-width: 1040px
}

.theme-preview-overlay .mk-modal__headerbtn {
    right: -40px
}

.theme-market__query .search-toggle {
    line-height: 35px;
    height: 35px;
    vertical-align: middle
}

.theme-market__query .sort-list {
    vertical-align: middle;
    margin-left: 10px
}

.theme-market__query .search-toggle, .theme-market__query .sort-list {
    float: left
}

.sort-list-dropdown .mk-scrollbar__wrap {
    max-height: none
}

.theme-create-hints {
    color: #666
}

.theme-create-hints header {
    color: #ff6544
}

.theme-create-hints ul {
    margin-top: 2px
}

.theme-create-hints ul li {
    font-size: 12px
}

.theme-market-info {
    padding-bottom: 10px
}

.theme-market-info p {
    margin-bottom: 0
}

.theme-item__preview {
    position: relative;
    cursor: pointer
}

.theme-item__preview img {
    width: 100%;
    background-color: #fff;
    display: block
}

.theme-item__preview .mb-mask {
    display: none
}

@media (max-width: 767px) {
    .theme-item__preview.mb-mask {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0
    }
}

.theme-item-preview {
    position: relative
}

.theme-item-preview .preview-display {
    width: 100%;
    transition: opacity 1s;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0
}

.theme-item-preview .preview-display.active {
    opacity: 1
}

.theme-item-preview .progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 10px;
    border-color: #000;
    border-style: solid;
    border-width: 4px 8px;
    background: #444;
    box-sizing: border-box
}

.theme-item-preview .progress-bar span {
    display: block;
    background: #fff;
    height: 2px
}

.exclusive-template {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 26px;
    height: 26px;
    background: rgba(0, 0, 0, .3);
    border-radius: 4px;
    cursor: pointer
}

.exclusive-template .exclusive-template-img {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 24px !important;
    margin: auto
}

.theme-item {
    position: relative
}

.theme-item .mask-video {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .15);
    transition: opacity .5s
}

.theme-item .mask-video:hover {
    opacity: 1
}

.theme-item .pointer {
    cursor: pointer
}

.survey__trigger {
    position: fixed;
    right: 0;
    bottom: 30%;
    background-color: #4777ff;
    text-align: center;
    padding: 5px;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    cursor: pointer
}

.survey__trigger .bb {
    font-size: 22px
}

.survey-modal__left {
    width: 340px;
    padding-top: 25px;
    padding-left: 10px
}

.survey-modal__left .btn {
    box-sizing: border-box;
    width: 120px
}

.survey-modal__right {
    margin-left: 20px;
    padding: 5px
}

.survey-modal__content {
    margin-top: 30px;
    margin-bottom: 30px;
    line-height: 1.8;
    font-size: 16px
}

.theme-market.homepage .theme-market__panel {
    margin-top: 30px
}

.theme-market.homepage .theme-list {
    padding-bottom: 0
}

.theme-market.homepage .theme-list.init {
    padding-bottom: 30px
}

.theme-market.homepage .theme-page h5 {
    padding-top: 30px
}

.theme-market.homepage .theme-market-theme-page .step-features .section__content {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

@media (max-width: 767px) {
    .theme-market.homepage .theme-market-theme-page .step-features .section__content {
        flex-wrap: wrap
    }
}

.theme-market.homepage .theme-market-theme-page .features-item {
    width: 112px;
    padding: 0 50px
}

.theme-market.homepage .theme-market-theme-page .features-item p {
    color: #666
}

@media (max-width: 768px) {
    .theme-market.homepage .theme-market-theme-page .features-item {
        padding: 0 13px
    }
}

@media (max-width: 576px) {
    .theme-market.homepage .theme-market-theme-page .features-item {
        padding: 10px 100px;
        margin: 0 10px;
        width: 100%
    }
}

.theme-market.homepage .previewingTheme {
    padding: 30px 0;
    background-color: #fff
}

.theme-market.homepage .previewingTheme .card, .theme-market.homepage .previewingTheme .card-body {
    padding: 0 20px
}

.theme-market.homepage .previewingTheme .card {
    box-shadow: none
}

@media (max-width: 769px) {
    .theme-market.homepage .previewingTheme .theme-preview > .flex {
        display: block
    }

    .theme-market.homepage .previewingTheme .theme-preview .theme-preview__right {
        width: 100%;
        padding: 0
    }

    .theme-market.homepage .previewingTheme .theme-preview .theme-preview__actions {
        width: 220px;
        margin: 0 auto
    }
}

.about-page {
    background: #fff url(https://cdn.static.duomu.tv/common-assets/background@3x.jpg) no-repeat;
    background-size: auto 434px;
    background-position: top
}

.about-page h2 {
    line-height: 220px;
    height: 220px
}

.about-page .card-body, .about-page .contact {
    padding: 50px 80px
}

.about-page p {
    text-align: center;
    line-height: 36px
}

.about-page a.help {
    color: #4777ff
}

.about-page .card {
    box-shadow: 0 0 20px rgba(51, 57, 79, .1)
}

.about-page .card-bottom {
    margin-top: 40px
}

.about-page .card-bottom h4 {
    margin-bottom: 28px
}

.about-page .card-bottom p {
    text-align: left
}

.about-page .contact:after {
    display: block;
    clear: both;
    content: ""
}

.about-page dl {
    float: left;
    width: 33%;
    padding-right: 10px;
    box-sizing: border-box
}

.about-page dt {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px
}

.about-page dd {
    line-height: 36px;
    margin: 0
}

@media (max-width: 1201px) {
    .about-page {
        background-size: auto 360px
    }

    .about-page .card-body, .about-page .contact {
        padding: 50px 60px
    }

    .about-page dl {
        width: 50%
    }
}

@media (max-width: 769px) {
    .about-page .card-body, .about-page .contact {
        padding: 50px 30px
    }

    .about-page .container {
        max-width: 100%
    }
}

@media (max-width: 426px) {
    .about-page .card-body, .about-page .contact {
        padding: 50px 20px
    }
}

/*! Depth */
.editor-header {
    background-color: #33394f
}

.editor-header .left-absolute-position {
    left: 25px;
    font-size: 16px
}

.editor-header .header-item {
    color: #fff;
    display: inline-block;
    vertical-align: middle
}

.editor-header .video-setting-title {
    margin-left: 34px;
    color: #fff
}

.editor-header .video-setting-title .form-control {
    color: #fff
}

.editor-header .video-duration {
    margin-right: 50px
}

.editor-header .btn {
    width: 110px;
    border: none;
    border-radius: 7px
}

.tab-nav {
    position: relative
}

.tab-nav:after {
    content: " ";
    position: absolute;
    z-index: 1;
    background-color: #ccc
}

.tab-nav .tab-nav-item {
    color: #999;
    position: relative;
    display: block;
    font-size: 16px
}

.tab-nav .tab-nav-item.active, .tab-nav .tab-nav-item:hover {
    color: #333
}

.tab-nav .tab-nav-item.active:after {
    background-color: #4777ff;
    transform: scale(1)
}

.tab-nav .tab-nav-item:after {
    content: " ";
    position: absolute;
    z-index: 2;
    background-color: transparent;
    transition: all .2s ease-out;
    transform: scale(0)
}

.tab-nav.horizontal:after {
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    width: 100%
}

.tab-nav.horizontal .tab-nav-item {
    display: inline-block;
    margin-right: 25px;
    padding-bottom: 15px
}

.tab-nav.horizontal .tab-nav-item:after {
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    width: 100%
}

.tab-nav.horizontal .tab-nav-item:last-child {
    margin-right: 0
}

.tab-nav.vertical {
    padding-top: 20px;
    box-sizing: border-box
}

.tab-nav.vertical .tab-nav-item {
    margin-bottom: 20px;
    line-height: 44px;
    height: 44px;
    padding-left: 35px
}

.tab-nav.vertical .tab-nav-item i {
    margin-right: 10px
}

.tab-nav.vertical .tab-nav-item:after {
    right: 0;
    top: 0;
    height: 100%;
    width: 3px
}

.tab-nav.vertical:after {
    top: 0;
    right: 0;
    height: 100%;
    width: 1px
}

.select-radio-inner {
    opacity: 0;
    position: relative;
    background-color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    transition: all .2s ease-out
}

.select-radio-inner:before {
    content: " ";
    position: absolute;
    bottom: 7px;
    right: 5px;
    z-index: 2;
    width: 7px;
    height: 4px;
    border-bottom-left-radius: 2px;
    border-bottom: 2px solid #aaa;
    border-left: 2px solid #aaa;
    transform: rotate(-50deg);
    transition: all .2s ease-out
}

.select-radio-inner.active {
    opacity: 1;
    background-color: #4777ff
}

.select-radio-inner.active:before {
    border-bottom-color: #fff;
    border-left-color: #fff
}

.color-picker__popover {
    padding: 30px 20px;
    min-height: 210px;
    border: 0
}

.color-picker__popover .mk-radio-group {
    font-size: 14px
}

.color-picker__popover .mk-radio-group.title {
    font-size: 16px;
    padding-bottom: 19px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc
}

.color-picker__popover .mk-radio-group.title .mk-radio {
    margin-right: 15px
}

.color-picker__popover .mk-radio-group.title .mk-radio.disabled {
    color: #ccc
}

.color-picker__popover .mk-radio-group.title .mk-radio:last-child {
    margin-right: 0
}

.color-picker__popover .mk-radio-group.content .mk-radio {
    display: block;
    margin: 10px 0
}

.color-picker__popover .size-input.blur {
    width: 100%;
    margin-top: 20px
}

.color-picker__popover .size-input.blur .label {
    font-size: 14px
}

.color-picker__popover .size-input.blur .size-input__popover {
    width: 248px
}

.color-picker-btn {
    position: relative;
    padding: 8px 10px;
    border: 1px solid #ccc;
    width: 100%
}

.color-picker-btn .color-picker-btn-content {
    color: #666
}

.color-picker-btn:active, .color-picker-btn:focus, .color-picker-btn:hover {
    padding: 8px 10px;
    border: 1px solid #ccc
}

.color-picker-btn.active {
    border: 1px solid #aaa
}

.color-picker-btn span {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.mk-color-alpha-slider {
    width: calc(100% - 20px)
}

.color-style-block {
    position: relative;
    bottom: 1px;
    border: 1px solid rgba(0, 0, 0, .2);
    background-color: #fff;
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle
}

.color-style-block.gradient-display {
    border: 1px solid #f0f0f0
}

.color-style-block .no-color-icon {
    top: 0;
    left: 0
}

.color-style-block .uncertain-value-icon {
    display: inline-block;
    color: #666;
    line-height: 16px
}

.color-style-block-icon {
    color: #aaa;
    border-color: transparent
}

.more-color-picker__panel {
    height: 100%;
    width: 100%
}

.more-color-picker__panel .mk-color-picker__panel {
    position: relative;
    width: 100%;
    padding: 0
}

.more-color-picker__panel .mk-color-picker__panel .mk-color-picker-panel__main-wrapper {
    height: 200px
}

.text-picker-action {
    display: flex
}

.text-picker-action .flex-grow-btn {
    flex-grow: 1;
    margin-right: 10px
}

.text-picker-action .flex-grow-btn:last-child {
    margin-right: unset
}

.color-picker-mode-btn {
    min-width: 36px;
    padding: 9px 0;
    float: right;
    border-radius: 3px
}

.color-picker-mode-btn .bb:before {
    display: inline-block;
    vertical-align: middle;
    transform: scale(1.2)
}

.color-list-picker .list-item {
    margin-bottom: 10px
}

.color-list-picker .list-item h5 {
    color: #999;
    font-size: 12px;
    margin-bottom: 5px
}

.color-list-picker .list-item:first-child h5 {
    margin-top: 0
}

.color-list-picker .color-list-wrap {
    display: flex;
    flex-wrap: wrap
}

.color-list-picker .picker-color-item {
    cursor: pointer;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(0, 0, 0, .05);
    transition: all .2s ease-out;
    z-index: 1
}

.color-list-picker .picker-color-item:hover {
    box-shadow: 1px 0 3px rgba(0, 0, 0, .3);
    transform: scale(1.1);
    z-index: 2
}

.more-color-picker-preview {
    position: relative;
    margin-top: 5px;
    margin-bottom: 15px
}

.more-color-picker-preview .input-group__prepend {
    position: absolute;
    top: 8px;
    left: 10px;
    width: 3em;
    z-index: 2
}

.more-color-picker-preview .input-group__prepend .info-title {
    font-size: 14px
}

.more-color-picker-preview .form-control {
    text-align: right;
    position: relative;
    z-index: 1;
    padding: 8px 30px 8px 10px;
    border: 1px solid #ccc;
    background-color: transparent
}

.more-color-picker-preview .form-control:focus {
    border-color: #aaa
}

.more-color-picker-preview .input-group__append {
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 2;
    transform: translateY(-50%)
}

.more-color-picker-preview .color-style-block {
    background-color: #fff;
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: middle
}

.clear-color-btn {
    padding: 10px;
    width: 10em;
    position: relative;
    text-align: right;
    border: 1px solid #ccc;
    color: #666
}

.clear-color-btn:active, .clear-color-btn:focus {
    padding: 10px;
    border: 1px solid #999
}

.clear-color-btn .no-color-icon {
    border: 1px solid #ccc
}

.clear-color-btn .color-style-block {
    border-radius: 4px;
    border: 1px solid #ccc;
    position: absolute;
    top: 8px;
    left: 10px;
    width: 18px;
    height: 18px
}

.clear-color-btn:active:hover, .clear-color-btn:hover {
    padding: 10px;
    border: 1px solid #999
}

.no-color-icon {
    border-radius: 4px;
    position: absolute;
    top: 8px;
    left: 10px;
    width: 18px;
    height: 18px
}

.no-color-icon:after {
    content: " ";
    position: absolute;
    top: 8px;
    left: -3px;
    width: 24px;
    height: 1px;
    background-color: #ff6544;
    transform: rotate(-45deg)
}

.gradient-picker .btn-scene {
    position: relative;
    width: calc(50% - 5px);
    color: #666;
    border-color: #ccc
}

.gradient-picker .btn-scene:hover {
    border-color: #4777ff;
    color: #4777ff
}

.gradient-picker .btn-scene:nth-child(2n) {
    margin-left: 10px
}

.gradient-picker .btn-scene:after, .gradient-picker .btn-scene:before {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0
}

.gradient-picker .btn-scene:before {
    border-top: 24px solid #4777ff;
    border-left: 24px solid transparent
}

.gradient-picker .btn-scene:after {
    right: 3px;
    top: 4px;
    width: 6px;
    height: 3px;
    border-bottom-left-radius: 2px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(-50deg);
    transition: all .2s ease-out
}

.gradient-picker .btn-scene.active {
    border-color: #4777ff;
    color: #4777ff
}

.gradient-picker .btn-scene.active:after, .gradient-picker .btn-scene.active:before {
    content: ""
}

.gradient-picker .list-item {
    margin-bottom: 10px
}

.gradient-picker .list-item h5 {
    color: #999;
    font-size: 12px;
    margin-bottom: 5px
}

.gradient-picker .list-item:first-child h5 {
    margin-top: 0
}

.gradient-picker .size-input .label {
    font-size: 14px
}

.gradient-picker .size-input.single {
    width: 100%
}

.gradient-picker .gradient .gradient-content {
    margin-top: 10px;
    margin-bottom: 10px;
    height: 53px
}

.gradient-picker .gradient .gradient-content .gradient-display-content {
    position: relative;
    width: 80%
}

.gradient-picker .gradient .gradient-content .gradient-content-action-panel {
    width: 20%
}

.gradient-picker .gradient .gradient-content .gradient-content-action-panel .btn {
    padding: 10px 9px;
    margin-left: 8px;
    border-color: #ccc
}

.gradient-picker .gradient .gradient-content .gradient-content-action-panel .btn:hover {
    border-color: #999
}

.gradient-picker .gradient .gradient-content .gradient-click {
    position: absolute;
    left: 0;
    top: 33px;
    width: 100%;
    height: 20px;
    cursor: cell
}

.gradient-picker .gradient .gradient-content .gradient-display {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    height: 33px;
    width: calc(100% - 2px);
    border: 1px solid #000
}

.gradient-picker .gradient .gradient-content .gradient-point {
    cursor: ew-resize;
    position: absolute;
    bottom: 20px;
    border: 2px solid #aaa;
    border-radius: 50%;
    width: 11px;
    height: 11px;
    transform: translate(-50%, 75%);
    transition: width .2s, height .2s, border-color .2s;
    background-color: #fff !important
}

.gradient-picker .gradient .gradient-content .gradient-point .background {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.gradient-picker .gradient .gradient-content .gradient-point:hover {
    border-color: #4777ff
}

.gradient-picker .gradient .gradient-content .gradient-point:before {
    position: absolute;
    display: block;
    content: "";
    height: 33px;
    border-left: 1px dashed #fff;
    top: -35px;
    opacity: 0;
    left: 6.5px
}

.gradient-picker .gradient .gradient-content .gradient-point.active {
    width: 15px;
    height: 15px;
    border-color: #4777ff
}

.gradient-picker .gradient .gradient-content .gradient-point.active:before {
    transition: opacity .2s cubic-bezier(1, -1.63, 1, -1.66);
    opacity: 1
}

.gradient-picker .gradient .gradient-content .gradient-point.active .gradient-point-click {
    left: -3px
}

.gradient-picker .gradient .gradient-content .gradient-point .gradient-point-click {
    position: absolute;
    width: 22px;
    height: 22px;
    top: 0;
    left: -5px
}

.gradient-picker .gradient .gradient-action-panel .btn {
    padding: 10px 9px;
    border-color: #ccc
}

.gradient-picker .gradient .gradient-action-panel .btn:hover {
    border-color: #999
}

.gradient-picker .gradient .gradient-action-panel .btn.disabled {
    border-color: #999;
    color: #999
}

.gradient-picker .gradient .gradient-action-panel .color-btn {
    margin-right: 5px
}

.gradient-picker .gradient .gradient-action-panel .color-picker-btn-content, .gradient-picker .gradient .gradient-action-panel .color-style-block {
    float: left
}

.gradient-picker .gradient .gradient-action-panel .color-style-block {
    width: 14px;
    height: 14px;
    margin-left: 5px
}

.gradient-picker .gradient .gradient-action-panel .size-input {
    width: 40%
}

.gradient-picker .gradient .gradient-action-panel .size-input input {
    padding: 8px 10px
}

.gradient-picker .gradient-finally-display, .gradient-picker .gradient-local-display {
    width: 38px;
    height: 38px;
    border: 1px solid #f0f0f0;
    margin-right: 20px
}

.gradient-picker .gradient-local-display {
    margin-right: 10px;
    margin-bottom: 5px;
    transition: all .2s ease-out;
    cursor: pointer
}

.gradient-picker .gradient-local-display:hover {
    box-shadow: 1px 0 3px rgba(0, 0, 0, .3);
    transform: scale(1.1)
}

.color-picker-modal {
    background: unset;
    overflow: hidden
}

.color-picker-modal.warning .mk-modal {
    animation: blink .3s infinite
}

.color-picker-modal .mk-modal {
    width: 290px;
    margin: unset;
    margin-top: 64px !important
}

.color-picker-modal .mk-modal__body {
    padding: 10px
}

.color-picker-modal .mk-modal__headerbtn {
    top: 5px;
    right: 20px
}

.color-picker-modal .mk-modal__headerbtn .mk-icon-modal-close {
    font-size: 20px
}

.color-picker-modal .mk-modal__header {
    padding: 15px;
    border-bottom: 1px solid #ccc;
    cursor: move
}

.color-picker-modal .mk-modal__title {
    font-size: 16px;
    color: #666
}

@keyframes blink {
    0% {
        transform: rotate(5deg)
    }
    25% {
        transform: rotate(0deg)
    }
    50% {
        transform: rotate(-5deg)
    }
    75% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(5deg)
    }
}

.radio-item-select {
    position: absolute;
    right: 8px;
    top: 10px
}

.scene-action-duration {
    user-select: none
}

.scene-action-duration .circle-icon-btn {
    display: inline-block
}

.scene-action-duration .circle-icon-btn.add-duration, .scene-action-duration .circle-icon-btn.subtract-duration {
    margin-left: 0
}

.scene-action-duration .duration-input {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
    cursor: default
}

.scene-action-duration .duration-input, .scene-action-duration .duration-input .form-control {
    font-size: 24px;
    color: #aaa
}

.scene-action-duration .duration-input .form-control {
    width: 3em;
    border-radius: 0;
    border-bottom: 1px solid #aaa;
    text-align: center;
    padding: 2px 5px
}

.duration-input .form-control {
    display: inline-block;
    width: calc(100% - 1em);
    border: none;
    background: transparent
}

.scene-action-dubbing .circle-icon-btn {
    margin-left: 15px
}

.scene-action-dubbing .dubbing-player .circle-icon-btn {
    margin-left: 0
}

.scene-action-dubbing .help-info {
    font-size: 12px;
    color: #aaa
}

.scene-action-dubbing .dubbing-uploader {
    display: inline-block
}

.slider-wrap .before-slider {
    display: inline-block;
    width: 3em;
    text-align: left
}

.slider-wrap .before-slider .bb {
    text-align: center
}

.slider-wrap .mk-slider {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 8em)
}

.slider-wrap .after-slider {
    width: 3em;
    display: inline-block;
    text-align: right
}

.scene-wrap-preview {
    background-color: #ccc;
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    cursor: move;
    overflow: hidden
}

.preview-layer {
    position: absolute;
    left: 0;
    top: 0
}

.preview-layer--full {
    width: 100%;
    height: 100%
}

.auxline {
    position: absolute;
    border: 0 dashed #4fffff
}

.auxline.vertical {
    border-left-width: 1px;
    width: 1px
}

.auxline.horizontal {
    border-top-width: 1px;
    height: 1px
}

.auxline-pins {
    width: 100%;
    height: 100%
}

.auxline-pins, .auxline-pins .pin {
    position: absolute
}

.auxline-pins .pin-stripe {
    position: absolute;
    background: #fff;
    box-shadow: 0 .15rem .5rem rgba(51, 51, 51, .2)
}

.fixed-footage {
    z-index: 11;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none
}

.thumb-timeline .timeline-bar {
    height: 100%;
    width: 1px;
    position: absolute;
    background-color: #fff;
    left: 0;
    top: 0;
    opacity: .5;
    z-index: 2
}

.sidebar-toggler {
    position: absolute;
    top: 50%;
    transform: translate(-100%);
    background: #fff;
    border-radius: 4px 0 0 4px;
    box-shadow: -2px 0 4px rgba(51, 51, 51, .2)
}

.sidebar-toggler.opened .toggler-btn {
    transform: rotate(180deg)
}

.sidebar-toggler .toggler-btn {
    padding: 36px 6px;
    transition: all .5s ease;
    color: #ccc
}

.sidebar-toggler .toggler-btn:hover {
    color: #aaa
}

.sidebar-toggler--right {
    transform: translate(100%);
    right: 1px;
    border-radius: 0 4px 4px 0;
    box-shadow: 2px 0 4px rgba(51, 51, 51, .2)
}

.sidebar-toggler--right .toggler-btn {
    transition: all .5s ease
}

.ribbon-type-pointed {
    right: 10px;
    left: auto;
    box-shadow: 0 2px 2px rgba(51, 51, 51, .2)
}

.ribbon-type-pointed .ribbon-main {
    background-color: #ffac33;
    width: 10px;
    height: 10px
}

.ribbon-type-pointed .ribbon-band {
    height: 0;
    width: 0;
    bottom: -5px;
    border-color: transparent #ffac33;
    border-style: solid;
    border-width: 5px;
    transform: none
}

.command-item {
    display: inline-block
}

.scene-texts-preview {
    position: absolute
}

.text-item-preview {
    position: absolute;
    z-index: 20;
    pointer-events: none
}

.text-item-preview.can-drag-text {
    pointer-events: inherit
}

.text-item-preview .text-frame {
    position: relative
}

.text-item-preview .frame-border {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    box-sizing: border-box;
    border: 2px solid transparent;
    cursor: move
}

.text-item-preview .frame-border.hover .frame-point, .text-item-preview .frame-border.selected .frame-point {
    display: block
}

.text-item-preview .frame-border.hover {
    border-color: #969696
}

.text-item-preview .frame-border.selected {
    border-color: #4777ff
}

.text-item-preview .frame-border.selected .frame-point {
    display: block
}

.text-item-preview .frame-point {
    display: none;
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    border: 2px solid #969696;
    height: 10px;
    width: 10px;
    z-index: 3
}

.text-item-preview .frame-point.bottom.right, .text-item-preview .frame-point.top.left {
    cursor: nwse-resize
}

.text-item-preview .frame-point.bottom.left, .text-item-preview .frame-point.top.right {
    cursor: nesw-resize
}

.text-item-preview .frame-point.top {
    top: -8px
}

.text-item-preview .frame-point.left {
    left: -8px
}

.text-item-preview .frame-point.right {
    right: -8px
}

.text-item-preview .frame-point.bottom {
    bottom: -8px
}

.text-item-preview .error-area {
    z-index: 21
}

.text-item-preview .error-area .error-highlight-border {
    position: relative;
    height: 100%;
    border-radius: 4px;
    border: 1px dashed #ff6544
}

.text-item-preview__text {
    background: transparent;
    border: none;
    resize: none;
    outline: none;
    margin: 0;
    word-break: keep-all;
    white-space: nowrap;
    line-height: 1;
    position: relative;
    cursor: move
}

.text-item-preview__cursor {
    position: absolute;
    height: 1em;
    width: 1px;
    background-color: #000;
    animation: cursor-blink 1.2s ease-in-out infinite;
    pointer-events: none
}

@keyframes cursor-blink {
    0%, to {
        opacity: 1
    }
    50% {
        opacity: 0
    }
}

.text-line {
    user-select: none;
    position: relative
}

.text-line__fg {
    position: relative;
    z-index: 2
}

.text-line__stroke-buddy {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1
}

.text-line__seg {
    display: inline-block;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    dominant-baseline: hanging
}

.text-line__seg rect {
    pointer-events: none
}

.char--highlight {
    background-color: #9bf;
    display: inline-block
}

.text-item-toolbar {
    position: absolute;
    left: 50%
}

.text-item-toolbar.pos-type--top {
    top: -10px;
    bottom: auto;
    transform: translate(-50%, -100%)
}

.text-item-toolbar.pos-type--bottom {
    top: auto;
    bottom: -10px;
    transform: translate(-50%, 100%)
}

.text-item-toolbar .command-item {
    background-color: rgba(0, 0, 0, .4);
    border-radius: 4px
}

.text-item-toolbar .link {
    color: #fff;
    padding: 4px 8px
}

.scene-footage-preview {
    z-index: 10
}

.scene-footage-preview .highlight-frame {
    border: 2px solid #4777ff;
    box-sizing: border-box;
    position: absolute;
    top: 15px;
    left: 15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    border-radius: 4px;
    cursor: move
}

.scene-footage-preview .unusable-footage-overlay {
    background: rgba(0, 0, 0, .2)
}

.scene-footage-preview .processing-hint {
    z-index: 10;
    font-size: 20px;
    color: #fff
}

.scene-footage-preview .footage-placeholder.show-background {
    background: #ccc
}

.scene-footage-preview .footage-placeholder.selected .placeholder-content {
    border-color: #4777ff
}

.scene-footage-preview .error-area {
    position: absolute;
    padding: 15px;
    width: 100%;
    height: 100%;
    z-index: 11;
    box-sizing: border-box
}

.scene-footage-preview .error-area .error-highlight-border {
    position: relative;
    height: 100%;
    border-radius: 4px;
    border: 1px dashed #ff6544
}

.cropped-thumb {
    position: relative
}

.cropped-thumb .image {
    position: absolute;
    display: block;
    user-select: none;
    max-width: none;
    max-height: none
}

.cropped-thumb .img-container {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    background: transparent
}

.draggable-item {
    position: relative
}

.draggable-item.dragging {
    cursor: -webkit-grabbing
}

.draggable-item.dragging .hidden-in-dragging-item {
    visibility: hidden
}

.draggable-item--multi-hidden.dragging {
    display: none
}

.draggable-item__border {
    border: 1px dashed #999;
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none
}

.draggable-item.dragging .draggable-item__border {
    display: block
}

.draggable-item__dragging-count {
    display: none;
    position: absolute;
    background: #ff5933;
    border-radius: 4px;
    z-index: 10;
    text-align: center;
    right: -6.66667px;
    top: -6.66667px;
    color: #fff;
    width: 20px;
    height: 20px
}

.droppable__dragging-frame {
    border: 1px dashed #4777ff;
    box-sizing: border-box;
    position: absolute;
    top: 15px;
    left: 15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    border-radius: 4px;
    cursor: move
}

.droppable__dragging-frame:after {
    top: -15px;
    left: -15px;
    content: "";
    position: absolute;
    height: calc(100% + 30px);
    width: calc(100% + 30px)
}

.droppable__dragging-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(71, 119, 255, .1)
}

.droppable-error .droppable__dragging-frame {
    border-color: #f96444
}

.selectable-highlight {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%
}

.resource-viewer-btn {
    position: absolute;
    bottom: 10px;
    left: 8px;
    padding: 5px;
    background-color: rgba(0, 0, 0, .3);
    color: #fff;
    border: 0
}

.resource-viewer-btn:hover {
    padding: 5px;
    background-color: rgba(0, 0, 0, .5)
}

.resource-viewer-btn.viewer-type-video {
    padding: 4px;
    font-size: 12px;
    left: 50%;
    bottom: 50%;
    border-radius: 50%;
    transform: translate(-50%, 50%);
    border: unset;
    background-color: unset
}

.resource-viewer-btn.viewer-type-video:hover {
    background-color: unset
}

.resource-viewer-btn.viewer-type-video img {
    width: 36px;
    max-width: 36px
}

.resource-viewer-btn.viewer-type-video .bb {
    position: relative;
    left: 1px
}

.resource-viewer-btn.viewer-type-video .bb:before {
    transform: scale(1)
}

.theme-scene-preview {
    background: #ccc;
    border-radius: 2px;
    box-shadow: 1px 1px 2px #999
}

.editor-menu-workarea .theme-scene-preview {
    box-shadow: none
}

.cover-placeholder.aspect-type-portrait .placeholder-overlay {
    flex-direction: column
}

.cover-placeholder.aspect-type-portrait .placeholder-content:nth-child(2) {
    margin-left: auto;
    margin-top: 10px
}

.cover-placeholder .placeholder-type-icon {
    color: #fff;
    font-size: 1.8rem
}

.cover-placeholder .placeholder-content {
    border: 1px dashed #fff;
    width: 100%;
    height: 100%;
    border-radius: 4px
}

.cover-placeholder .placeholder-content.no-border {
    border-color: transparent
}

.cover-placeholder .placeholder-content:nth-child(2) {
    margin-left: 20px
}

.cover-placeholder .placeholder-overlay {
    box-sizing: border-box;
    padding: 15px
}

.cover-placeholder.logo .logo-icon {
    position: absolute;
    bottom: 18px;
    right: 22px;
    font-size: 20px;
    color: #fff
}

.collage-repr {
    position: relative;
    display: inline-block;
    width: 15px;
    height: 15px
}

.collage-repr__item {
    border: 1px solid #999
}

.btn-theme-frame .collage-repr__item {
    border-color: #4777ff
}

.scene-summary {
    display: inline-block;
    position: relative;
    color: #fff;
    margin: 5px;
    padding: 2px 5px;
    background-color: rgba(0, 0, 0, .4);
    font-size: 12px;
    border-radius: 4px
}

.scene-summary .bb {
    margin-right: 5px
}

.scene-summary span {
    vertical-align: middle
}

.edit-menu {
    padding-top: 64px;
    background-color: #fff;
    box-shadow: 0 .15rem .5rem rgba(51, 51, 51, .2);
    position: fixed;
    top: 0;
    bottom: 0
}

.edit-menu .editor-menu-list, .edit-menu .editor-menu__main-area {
    display: inline-block;
    vertical-align: top
}

.edit-menu .editor-menu__main-area {
    width: calc(100% - 60px);
    height: 100%
}

.edit-menu .draggable-wrap {
    margin-top: -15px;
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-top: 20px;
    padding-right: 15px;
    position: relative;
    box-sizing: border-box
}

.editor-menu-list {
    height: 100%;
    width: 60px;
    border-right: 1px solid #ccc;
    box-sizing: border-box
}

.editor-menu__item {
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    width: 100%;
    margin-bottom: 20px
}

.editor-menu__item.active {
    background-color: #efefef;
    color: #333
}

.editor-menu__item i {
    font-size: 20px
}

.editor-menu__item p {
    margin-bottom: 0;
    font-size: 12px
}

.editor-menu__item:last-child {
    margin-bottom: 0
}

.editor-menu__item:hover {
    color: #333
}

.editor-menu-workarea {
    position: relative;
    height: 100%
}

.editor-menu-workarea .workarea__content, .editor-menu-workarea .workarea__info {
    padding: 15px
}

.editor-menu-workarea .workarea__content {
    padding-bottom: 0;
    overflow: hidden;
    height: calc(100% - 60px);
    box-sizing: border-box
}

.editor-menu-workarea .workarea__info {
    border-bottom: 1px solid #ddd;
    height: 60px;
    box-sizing: border-box
}

.editor-menu-workarea .workarea__info:after {
    content: unset
}

.editor-menu-workarea .workarea__info h6 {
    margin-bottom: 0
}

.editor-menu-workarea .workarea__info .btn {
    width: 80px
}

.editor-menu-workarea .add-music-btn {
    margin-top: 20px;
    margin-bottom: 20px
}

.editor-menu-workarea .add-music-btn .btn {
    width: 100%
}

.editor-menu-workarea .delete-button-warp {
    background: hsla(0, 0%, 100%, .6);
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 6px 0 20px;
    text-align: center
}

.editor-menu-workarea .delete-button {
    padding: 6px 18px
}

.editor-menu-workarea .draggable-item .theme-scene-preview {
    border: 2px solid transparent
}

.editor-menu-workarea .draggable-item:hover .theme-scene-preview {
    border: 2px solid #ddd
}

.editor-menu-workarea .draggable-item.ui-selected .theme-scene-preview, .editor-menu-workarea .draggable-item.ui-selecting .theme-scene-preview {
    border-color: #4777ff
}

.editor-menu-music .workarea__content {
    padding-top: 0;
    height: calc(100% - 88px)
}

.editor-menu-music .workarea__info {
    height: 88px
}

.editor-menu-music .workarea__info .title {
    margin-bottom: 5px
}

.editor-menu-music .workarea__info p {
    margin-top: 20px
}

.editor-menu-music .workarea__info .error {
    color: #ff9100
}

.editor-menu-music .workarea__info .error .bb:before {
    color: #ff9100;
    transform: scale(1.4) translateY(-1px)
}

.editor-menu-music .workarea__info .btn-music-setting {
    color: #999;
    border-color: #999;
    padding: 4px 5px;
    float: right;
    width: 90px;
    font-size: 13px
}

.editor-menu-music .workarea__info .btn-music-setting:hover {
    color: #666
}

.editor-menu-music .workarea__info .btn-music-setting .bb:before {
    transform: scale(1.4) translateY(-1px)
}

.music-overflow-hint {
    display: inline-block;
    margin-left: 5px
}

@keyframes mk-slider-error {
    50% {
        color: #ff9100
    }
}

.menu-music-item {
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd
}

.menu-music-item .choose-duration {
    margin-top: 20px;
    font-size: 14px;
    color: #999
}

.menu-music-item .choose-duration.error {
    transition: background-color .5s;
    animation: mk-slider-error 1s infinite
}

.menu-music-item .music-cover-wrap {
    position: relative;
    display: inline-block;
    width: 60px
}

.menu-music-item .music-cover-wrap .cover-img {
    width: 100%
}

.menu-music-item .music-cover-wrap .music-player-icon-img {
    width: 30px
}

.menu-music-item .music-info .music-cover {
    width: 60px
}

.menu-music-item .music-info__title {
    padding-left: 10px;
    width: calc(100% - 50px)
}

.menu-music-item .music-info__title h6 {
    margin-bottom: 15px;
    color: #666
}

.menu-music-item .music-info__title p {
    margin-bottom: 0;
    color: #999
}

.menu-music-item .menu-music-player, .menu-music-item .music-actions {
    margin-top: 15px
}

.menu-music-item .music-action {
    width: calc(50% - 6px)
}

.menu-music-item .music-action:first-child {
    margin-right: 6px
}

.menu-music-item .music-action:last-child {
    margin-left: 6px
}

.menu-music-player .play-icon {
    color: #999;
    position: relative;
    width: 30px;
    height: 30px;
    font-size: 8px;
    border-radius: 100%;
    border: 1px solid #999
}

.menu-music-player .play-icon:hover {
    color: #666;
    border-color: #666
}

.menu-music-player .play-icon .bb:before {
    padding: 4px;
    transform: translateX(1px) scale(1.4)
}

.menu-music-player .music-player-slider {
    width: calc(100% - 60px - 4em)
}

.menu-music-item__editor-data .music-vol {
    margin: 10px 0 0
}

.menu-music-item__editor-data .music-fade .mk-checkbox {
    padding-right: 15px
}

.menu-music-item__editor-data .music-fade .mk-checkbox .mk-checkbox__label {
    padding-left: 5px
}

.music-setting-header {
    padding-bottom: 15px;
    border-bottom: 1px solid #ccc
}

.music-setting-header .header-title {
    height: 36px;
    line-height: 36px;
    display: inline-block;
    font-size: 14px;
    color: #666;
    margin-right: 40px
}

.music-setting-header .header-title.error {
    color: #ff9100
}

.music-setting-header .header-title .bb:before {
    transform: scale(1.4) translateY(-1px)
}

.music-setting-header .music-setting-slider-toggle {
    margin-right: 40px;
    float: right
}

.music-setting-body {
    padding: 0 60px
}

.music-fade .mk-checkbox__label {
    padding-left: 5px
}

.music-fade .mk-checkbox__inner {
    width: 16px;
    height: 16px
}

.music-fade .mk-checkbox__inner:before {
    bottom: 6px;
    right: 3px;
    z-index: 2;
    width: 7px;
    height: 4px
}

.menu-music-setting-item {
    padding: 20px 0;
    border-bottom: 1px solid #ccc
}

.menu-music-setting-item .processing-hint {
    height: 35px;
    margin: 10px auto
}

.menu-music-setting-item .processing-hint .dot {
    top: 0
}

.menu-music-setting-item .loading-text {
    text-align: center
}

.menu-music-setting-item .music-cover {
    width: 60px;
    margin-right: 20px
}

.menu-music-setting-item .music-actions {
    margin-top: 20px
}

.menu-music-setting-item .music-actions:after {
    display: block;
    clear: both;
    content: ""
}

.menu-music-setting-item .music-actions .button-groups {
    float: left
}

.menu-music-setting-item .music-actions .music-fade {
    float: right
}

.menu-music-setting-item .music-actions .music-fade .mk-checkbox {
    margin-left: 15px
}

.menu-music-setting-item .music-action {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 0
}

.menu-music-setting-item .overflow-hint-body {
    margin-right: 5px
}

.menu-music-setting-item .music-info__title {
    width: calc(100% - 80px)
}

.menu-music-setting-item .music-cover-wrap {
    position: relative;
    display: inline-block;
    width: 60px
}

.menu-music-setting-item .music-cover-wrap.playing .picture-mask, .menu-music-setting-item .music-cover-wrap:hover .picture-mask {
    opacity: 1
}

.menu-music-setting-item .music-cover-wrap .picture-mask {
    opacity: 0;
    transition: opacity .5s
}

.menu-music-setting-item .music-cover-wrap .cover-img {
    width: 100%
}

.menu-music-setting-item .music-cover-wrap .music-player-icon-img {
    width: 30px
}

.mk-popover.music-volume {
    width: 280px
}

.mk-popover.music-volume .title, .mk-popover.music-volume .vol-improve {
    display: inline-block;
    font-size: 14px;
    color: #666
}

.mk-popover.music-volume .title {
    min-width: 65px
}

.mk-popover.music-volume .vol-improve {
    min-width: 50px;
    text-align: right
}

.editor-menu-scene .workarea__info {
    height: 60px
}

.editor-menu-scene .workarea__info h6 {
    margin-top: 6px
}

.editor-menu-scene .menu-scene-tab-nav .tab-nav-item {
    padding-bottom: 20px
}

.editor-menu-scene .menu-scene-tab-nav .tab-nav-item:after {
    bottom: -1px
}

.editor-menu-scene .sortable-drag.sortable-fallback .draggable-item__dragging-count {
    display: block
}

.editor-menu-scene .scene-title {
    color: #999
}

.editor-menu-scene .workarea__content {
    height: calc(100% - 105px)
}

.editor-menu-scene .tag-group {
    padding: 15px 15px 5px
}

.editor-menu-scene .tag-label {
    margin: 0
}

.editor-menu-scene .tag-label:last-child {
    margin-right: 0
}

.menu-scene-list .theme-scene-item {
    width: 100%
}

.menu-scene-list .theme-scene-item.aspect-type-portrait {
    width: 48%
}

.theme-scene-item {
    margin-bottom: 10px;
    cursor: -webkit-grab
}

.theme-scene-item:hover .resource-viewer-btn, .theme-scene-item:hover .theme-scene-item__add-btn {
    display: block
}

.theme-scene-item .scene-title {
    text-align: center;
    margin-top: 10px;
    font-size: 14px
}

.theme-scene-item .theme-scene-preview {
    border-radius: 0
}

.theme-scene-item .selectable-highlight {
    top: -6px;
    left: -6px;
    border: 6px solid #ddd;
    border-radius: 4px;
    z-index: -1
}

.theme-scene-item.selected .selectable-highlight, .theme-scene-item.ui-selected .selectable-highlight, .theme-scene-item.ui-selecting .selectable-highlight {
    display: block
}

.theme-scene-item .resource-viewer-btn {
    display: none
}

.theme-scene-item__add-btn {
    position: absolute;
    bottom: 10px;
    right: 8px;
    padding: 5px;
    background-color: rgba(0, 0, 0, .3);
    color: #fff;
    border: 0;
    display: none;
    z-index: 41
}

.theme-scene-item__add-btn:hover {
    padding: 5px;
    background-color: rgba(0, 0, 0, .5)
}

.menu-resource-list {
    position: relative;
    height: calc(100% + 15px)
}

.menu-resource-list .waterfall > div {
    transition: length .3s ease
}

.menu-resource-list .draggable-wrap {
    height: 100%
}

.menu-resource-list .draggable-item {
    border: 2px solid transparent
}

.menu-resource-list .draggable-item:hover {
    border: 2px solid #ddd
}

.menu-resource-list .draggable-item.ui-selected, .menu-resource-list .draggable-item.ui-selecting {
    border-color: #4777ff
}

.menu-resource-list .ps-container {
    overflow: hidden
}

.menu-resource-item .resource-preview-wrap .thumbnail-img {
    width: 100%
}

.menu-resource-item .resource-preview-wrap:hover .viewer-type-image {
    display: block
}

.menu-resource-item .resource-preview-wrap:hover .select-radio-inner {
    opacity: 1
}

.menu-resource-item .resource-used-hint .radio-item-select {
    z-index: 1
}

.menu-resource-item .resource-used-hint .btn {
    cursor: default
}

.menu-resource-item .processing-resource-holder {
    background: #ccc;
    color: #fff
}

.menu-resource-item .processing-hint {
    transform: scale(.5);
    margin-top: 5px
}

.menu-resource-item .resource-viewer-btn.viewer-type-image {
    display: none;
    left: 8px
}

.menu-resource-item .resource-viewer-btn.viewer-type-video img {
    width: 26px;
    max-width: 26px
}

.menu-resource-item .mk-popover {
    min-width: auto
}

.menu-resource-item__error-border {
    outline: 4px solid #ff6544;
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.editor-menu-watermark .workarea__info .title span {
    float: left
}

.editor-menu-watermark .workarea__info .title img {
    float: left;
    width: 24px;
    margin-left: 5px
}

.editor-menu-watermark .remarks {
    list-style: none;
    padding: 0;
    margin-top: 30px
}

.editor-menu-watermark .remarks li {
    color: #999;
    font-size: 12px
}

.editor-menu-watermark .editor-scene-item, .editor-menu-watermark .scene-wrap-preview {
    cursor: auto
}

.editor-menu-watermark .editor-scene-item {
    width: 210px;
    margin: unset;
    margin-bottom: 15px
}

.editor-menu-watermark .editor-scene-item.watermark-img {
    background-color: unset
}

.editor-menu-watermark .btn-group {
    margin-top: 15px
}

.editor-menu-watermark .btn-group .btn {
    width: 100px;
    margin-right: 10px;
    color: #999;
    border-color: #999
}

.editor-menu-watermark .btn-group .btn:last-child {
    margin-right: 0
}

.editor-menu-watermark .btn-group .btn:hover {
    color: #666;
    border-color: #666
}

.editor-menu-watermark .crop-wrap {
    overflow: hidden
}

.editor-menu-watermark .watermark__content {
    position: relative;
    margin-top: 15px
}

.editor-menu-watermark .watermark__content .watermark-img {
    overflow: hidden;
    width: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 21;
    box-shadow: none;
    transform-origin: top left
}

.editor-menu-watermark .watermark__content .watermark-img img {
    float: left
}

.editor-menu-watermark-modal-wrapper .btn-md.circle-icon-btn {
    font-size: 20px
}

.editor-menu-watermark-modal-wrapper .cropper-img {
    border: 2px solid #4777ff;
    z-index: 21
}

.editor-menu-watermark-modal-wrapper .cropper {
    margin-bottom: 30px
}

.editor-menu-watermark-modal-wrapper .editor-scene-item {
    width: 660px;
    margin: 0
}

.editor-action-panel {
    background-color: #fff;
    box-shadow: 0 .15rem .5rem rgba(51, 51, 51, .2);
    position: fixed;
    top: 0;
    bottom: 0;
    padding-top: 64px;
    padding-bottom: 20px
}

.editor-action-panel .scene-scan-panel-content {
    padding-bottom: 20px
}

.editor-action-panel .help-info {
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #aaa
}

.action-panel-workarea {
    position: relative;
    z-index: 1;
    height: 100%;
    padding-left: 20px;
    padding-right: 20px
}

.action-panel-tab-nav {
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    max-height: 39px
}

.action-panel-tab-nav .tab-nav-item.active {
    color: #333
}

.style-action-panel .size-input {
    width: calc(50% - 5px);
    padding-right: 5px;
    display: inline-block;
    position: relative
}

.style-action-panel .size-input .form-control {
    background-color: unset;
    text-align: right;
    cursor: pointer;
    color: #666
}

.style-action-panel .size-input .label {
    cursor: pointer;
    position: absolute;
    left: 10px;
    top: 8px
}

.style-action-panel .size-input.disabled .label {
    color: graytext
}

.style-action-panel .form-control {
    padding: 7px 10px
}

.style-action-panel .color-picker-btn:hover, .style-action-panel .form-control:hover {
    border-color: #999
}

.style-action-panel .label {
    pointer-events: none
}

.style-action-panel .reset-style-btn {
    border-top: 1px solid #ccc;
    margin-top: 20px;
    padding-top: 20px
}

.style-action-panel .reset-style-btn .btn {
    width: 100%
}

.size-input__popover {
    padding: 10px 20px
}

.style-action-item {
    margin-bottom: 15px
}

.style-action-item header {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px
}

.style-action-item .color-picker-btn.disabled, .style-action-item .form-control:disabled {
    background-color: #f9f9f9;
    cursor: not-allowed;
    color: graytext
}

.style-action-item .color-picker-btn.disabled:hover, .style-action-item .form-control:disabled:hover {
    border-color: #999
}

.style-action-item .color-picker-btn.disabled:hover {
    border-color: #666
}

.style-action-item .disabled .mk-select .chevron {
    cursor: not-allowed
}

.text-style-action .color-picker, .text-style-action .mk-select {
    margin-bottom: 10px
}

.text-style-action .font-family-select {
    width: 100%
}

.text-style-action .font-align-select {
    width: calc(50% - 5px);
    padding-left: 5px;
    display: inline-block
}

.text-style-action .font-align-select .mk-radio__input {
    display: none
}

.text-style-action .font-align-select .mk-radio.active .radio-item {
    color: #666;
    background: #efefef
}

.text-style-action .font-align-select .mk-radio:first-child .radio-item {
    border-radius: 4px 0 0 4px;
    border-right-color: transparent
}

.text-style-action .font-align-select .mk-radio:last-child .radio-item {
    border-radius: 0 4px 4px 0;
    border-left-color: transparent
}

.text-style-action .font-align-select .mk-radio, .text-style-action .font-align-select .mk-radio__label {
    display: inline-block
}

.text-style-action .font-align-select .radio-item {
    border: 1px solid #ccc;
    padding: 7px 12px;
    font-size: 12px;
    color: #999
}

.font-family-select__dropdown img {
    max-height: 25px;
    display: inline-block;
    vertical-align: middle
}

.font-family-select__dropdown .mk-select-dropdown__wrap {
    max-height: 50vh
}

.font-family-select__dropdown .mk-select-dropdown__item {
    text-align: left;
    height: 35px;
    line-height: 35px;
    padding: 0 10px
}

.font-family-select__dropdown .font-title {
    margin: 0 10px;
    color: #bbb
}

.font-family-select__dropdown .font-description {
    position: absolute;
    right: 10px;
    top: 5px;
    transform: scale(.7);
    transform-origin: top right;
    color: #999
}

.font-family-select__dropdown .divider {
    margin: 5px 10px;
    font-size: 12px;
    color: #ddd
}

.decoration-setting.active .decoration-input .form-control {
    border-color: #999 #999 #ccc;
    border-radius: 4px 4px 0 0
}

.decoration-setting .mk-select-dropdown {
    position: relative;
    box-shadow: unset;
    margin-top: 0;
    border: 1px solid #999;
    border-top-color: transparent;
    border-radius: 0 0 4px 4px
}

.decoration-setting .mk-select {
    width: 100%
}

.decoration-setting .mk-select.disabled .form-control, .decoration-setting .mk-select.disabled .mk-caret-base {
    cursor: not-allowed;
    color: #ccc
}

.decoration-setting .mk-select-dropdown__item {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.decoration-setting .mk-select-dropdown__item:hover {
    background: #efefef
}

.decoration-setting .btn {
    height: 36px
}

.decoration-setting .decoration-setting-tip {
    margin-top: 3px;
    font-size: 12px;
    color: #999
}

.filter-action-panel .filter-list-wrap {
    margin: 0 -5px
}

.filter-action-item {
    cursor: pointer;
    display: inline-block;
    width: calc(33% - 10px);
    margin: 0 5px 10px
}

.filter-action-item .filter-img-wrap {
    position: relative;
    height: 0;
    padding-bottom: 100%;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat
}

.filter-action-item .filter-name {
    margin-top: 5px;
    max-width: 100%;
    text-align: center;
    color: #999
}

.filter-action-item:hover .filter-select-radio {
    opacity: 1
}

.filter-action-item .filter-select-radio {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0
}

.filter-action-item .filter-select-radio.active {
    opacity: 1
}

.filter-slider-wrap {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px
}

.filter-slider-wrap .size-input {
    position: relative;
    width: 100%
}

.filter-slider-wrap .size-input .form-control {
    background-color: unset;
    text-align: right;
    cursor: pointer;
    color: #666
}

.filter-slider-wrap .size-input .label {
    cursor: pointer;
    position: absolute;
    left: 10px;
    top: 8px
}

.action-panel-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: hsla(0, 0%, 100%, .9);
    z-index: 1002;
    text-align: center
}

.action-panel-mask p {
    position: relative;
    top: 80px;
    margin: 0 30%
}

.scene-scan-panel {
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px;
    position: relative;
    overflow: hidden;
    height: calc(100vh - 119px)
}

.scene-scan-panel .sortable-drag.sortable-fallback .draggable-item__dragging-count {
    display: block
}

.scene-scan-panel .ui-lasso {
    z-index: 800
}

.scene-scan-item {
    position: relative;
    margin-top: 20px;
    box-shadow: 0 .05rem .3rem rgba(51, 51, 51, .2);
    cursor: -webkit-grab;
    outline: 4px solid transparent;
    width: 100%
}

.scene-scan-item:after {
    position: absolute;
    border: 1px dashed #999;
    border-radius: 7px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    content: "";
    display: none;
    top: 0;
    left: 0
}

.scene-scan-item:hover .scene-scan-item__commands {
    display: block
}

.scene-scan-item.aspect-type-portrait {
    width: 48%
}

.scene-scan-item.selected, .scene-scan-item.ui-selecting {
    outline-color: #ddd
}

.scene-scan-item.dragging {
    border-radius: 4px;
    background: transparent
}

.scene-scan-item.dragging:after {
    display: block
}

.scene-scan-item .scene-summary {
    z-index: 30
}

.scene-scan-item__commands {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 30;
    display: none
}

.scene-scan-item__commands .command-item {
    background-color: rgba(0, 0, 0, .4);
    border-radius: 4px;
    margin-left: 5px
}

.scene-scan-item__commands .link {
    color: #fff;
    padding: 2px 5px
}

.editor-scenes {
    position: relative;
    transition: all .2s ease-out;
    box-sizing: border-box;
    min-height: calc(100vh - 64px)
}

.editor-scene-list-wrap {
    padding: 30px 40px;
    width: 100%;
    box-sizing: border-box
}

.editor-scene-list-wrap .hidden-in-dragging-item .scene-title {
    display: none
}

.editor-scene-list-wrap .draggable-wrap {
    margin-left: -10px;
    min-height: calc(100vh - 124px)
}

.editor-scene-list-wrap .editor-scene-list-droppable-area {
    z-index: -1
}

.editor-scene-list-wrap .sortable-ghost .hidden-in-sortable-ghost {
    visibility: hidden
}

.editor-scene-list-wrap .sortable-drag.sortable-fallback .draggable-item__dragging-count {
    display: block
}

.editor-scene-list-wrap .draggable-item {
    box-shadow: 0 .05rem .3rem rgba(51, 51, 51, .2);
    margin: 0 10px 40px;
    width: 230px
}

.editor-scene-list-wrap .draggable-item.aspect-type-portrait {
    width: 130px
}

.editor-scene-list-wrap .draggable-item.draggable-add-holder {
    box-shadow: none;
    margin-top: 0
}

.editor-scene-list-wrap .draggable-item.dragging:not(.draggable-item--multi-hidden) {
    display: inline-block
}

.editor-scene-list-wrap .ui-lasso {
    z-index: 800
}

.editor-scene-item {
    position: relative;
    background-color: #fff;
    box-shadow: 0 .05rem .3rem rgba(51, 51, 51, .2);
    margin: 0 10px 40px;
    display: inline-block;
    vertical-align: top;
    outline: 3px solid transparent;
    cursor: pointer
}

.editor-scene-item.selected, .editor-scene-item.ui-selecting {
    outline-color: rgba(71, 119, 255, .5)
}

.editor-scene-item.dragging {
    border-color: #999;
    border-radius: 4px;
    background-color: transparent
}

.editor-scene-item.sortable-fallback .scene-action-panel__editarea {
    display: none
}

.editor-scene-item .scene-item-actions-tab .tab-nav-item {
    font-size: 14px
}

.editor-scene-item .scene-summary {
    z-index: 30
}

.editor-scene-item .placeholder {
    background: rgba(0, 0, 0, .3)
}

.editor-scene-item .placeholder .loading {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto
}

.scene-action-panel__editarea {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 120;
    background-color: #fff;
    box-shadow: 0 .05rem .3rem rgba(51, 51, 51, .2)
}

.scene-action-panel__editarea.direction-left, .scene-action-panel__editarea.direction-right {
    min-height: 100%;
    width: 200px;
    display: flex;
    flex-direction: column
}

.scene-action-panel__editarea.direction-left .tab-nav-item, .scene-action-panel__editarea.direction-right .tab-nav-item {
    margin-right: 15px
}

.scene-action-panel__editarea.direction-left .dubbing-play-content, .scene-action-panel__editarea.direction-left .scene-action-upload, .scene-action-panel__editarea.direction-right .dubbing-play-content, .scene-action-panel__editarea.direction-right .scene-action-upload {
    margin-top: 10px
}

.scene-action-panel__editarea.direction-left {
    left: auto;
    right: 100%;
    top: 0
}

.scene-action-panel__editarea.direction-right {
    left: 100%;
    right: 0;
    top: 0
}

.scene-action-panel__editarea.direction-top {
    top: auto;
    bottom: 100%
}

.scene-action-panel__editarea .scene-action-area {
    padding-left: 10px;
    padding-right: 10px;
    flex-grow: 1
}

.scene-action-panel__editarea .editor-more-opts {
    padding: 5px 10px;
    box-sizing: border-box
}

.scene-action-panel__editarea .editor-more-opts .bb {
    transform: scale(1.6)
}

.scene-action-panel__editarea .editor-more-opts .command-item {
    margin-right: 10px
}

.scene-action-panel__editarea .editor-more-opts .link {
    color: #999
}

.scene-action-panel__editarea .editor-more-opts .link:hover {
    color: #666
}

.scene-item-actions-tab {
    padding-left: 10px;
    padding-right: 10px;
    user-select: none
}

.scene-item-actions-tab .tab-nav-item {
    text-align: center;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: 30px;
    line-height: 28px;
    min-width: 2em;
    color: #999
}

.scene-item-actions-tab .tab-nav-item.active .link, .scene-item-actions-tab .tab-nav-item:hover .link {
    color: #333
}

.scene-item-actions-tab .tab-nav-item:last-child {
    margin-right: 0
}

.scene-item-actions-tab .tab-nav-item.scene-duration {
    min-width: 3em
}

.scene-item-actions-tab .tab-nav-item .bb {
    display: inline-block;
    transform: scale(1.2);
    transform-origin: center right
}

.scene-item-actions-tab:after {
    background-color: #ccc
}

.scene-item__error-border {
    outline: 4px solid #ff6544;
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.scene-action-area {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc
}

.scene-action-area .action-item {
    display: inline-block
}

.scene-action-area .scene-action-btn {
    width: 110px
}

.scene-action-area .circle-icon-btn {
    margin-left: 15px
}

.scene-action-area .help-info {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 12px;
    color: #aaa
}

.scene-action-text-input {
    margin-top: 8px
}

.scene-action-text-input .form-control {
    width: 100%;
    border-radius: 0;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #ccc;
    padding: 0 0 5px;
    font-size: 14px;
    overflow-y: hidden
}

.scene-action-text {
    width: 100%
}

.scene-action-text .scene-action-text-input:first-child {
    margin-top: 0
}

.editor-add-scene-item {
    margin-top: 15px;
    box-shadow: none;
    border: 2px dashed #ccc;
    border-radius: 4px
}

.editor-add-scene-item, .editor-add-scene-item .scene-wrap-preview {
    cursor: pointer;
    background: transparent
}

.editor-add-scene-item .editor-action-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center
}

.editor-add-scene-item .editor-action-btn .bb {
    font-size: 18px;
    color: #ccc
}

.editor-add-scene-item .editor-action-btn .bb:before {
    transform: scale(2)
}

.editor-add-scene-item .editor-action-btn p {
    color: #ccc;
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 16px
}

.editor-add-scene-item:hover {
    border-color: #aaa
}

.editor-add-scene-item:hover .editor-action-btn .bb, .editor-add-scene-item:hover .editor-action-btn p {
    color: #aaa
}

.theme-scene-view {
    position: absolute;
    z-index: 40
}

.theme-scene-view video {
    width: 100%
}

.theme-scene-view .progress-bar {
    position: absolute;
    width: 100%
}

.theme-scene-view .progress-bar .bar {
    transition: none
}

.edit-main-area.right-sidebar-opened .right-sidebar {
    right: 0
}

.edit-main-area.right-sidebar-opened .middle {
    margin-right: 280px
}

.edit-main-area.left-sidebar-opened .left-sidebar {
    left: 0
}

.edit-main-area.left-sidebar-opened .middle {
    margin-left: 310px
}

.edit-main-area .left-sidebar {
    width: 310px;
    left: -310px
}

.edit-main-area .right-sidebar {
    width: 280px;
    right: -280px
}

.edit-main-area .left-sidebar, .edit-main-area .right-sidebar {
    z-index: 110;
    transition: all .3s ease
}

.edit-main-area .middle {
    margin-left: 0;
    margin-right: 0
}

.editor-global-toolbar {
    position: fixed;
    background-color: #fff;
    cursor: move;
    box-shadow: 0 .25rem .8rem rgba(51, 51, 51, .15);
    z-index: 2000;
    top: 50px;
    right: 400px
}

.editor-global-toolbar .close {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px;
    cursor: pointer
}

.editor-global-toolbar .action-btn {
    margin-right: 10px;
    margin-top: 10px
}

.editor-global-toolbar .action-btn:hover {
    background-color: #f9f9f9
}

.editor-modal-wrapper.resource-viewer {
    z-index: 1000001 !important
}

.editor-modal-wrapper.full-screen {
    z-index: 1000000 !important
}

.editor-modal-wrapper.full-screen .title .usage-stat {
    float: right;
    margin-right: 80px
}

.editor-modal-wrapper.full-screen .title .usage-stat__item {
    font-size: 13px;
    min-width: 200px
}

.editor-modal-wrapper.full-screen .title .usage-stat__item .bar-wrap, .editor-modal-wrapper.full-screen .title .usage-stat__item .progressbar {
    height: 4px;
    border-radius: 2px
}

.editor-modal-wrapper.full-screen .mk-modal__headerbtn {
    right: 0;
    top: 8px;
    color: #999;
    padding: 7px 15px;
    font-size: 14px;
    transform: none;
    border-left: 1px solid #ddd
}

.editor-modal-wrapper.full-screen .mk-modal__headerbtn .mk-icon-modal-close {
    color: #ccc;
    display: block;
    font-size: 38px
}

.editor-modal-wrapper.full-screen .mk-modal__headerbtn .mk-icon-modal-close:hover {
    color: #aaa
}

.editor-modal-wrapper.full-screen .mk-modal__headerbtn .mk-icon-modal-close:before {
    display: block
}

.editor-modal-wrapper.full-screen .mk-modal__header {
    padding: 23px 20px;
    border-bottom: 1px solid #ddd
}

.editor-modal-wrapper.full-screen .mk-modal__body {
    box-sizing: border-box;
    height: calc(100vh - 136px);
    padding: 0 20px
}

.editor-modal-wrapper.full-screen .public-resource-modal {
    height: 100%
}

.editor-modal-wrapper .mk-modal__title {
    font-size: 18px
}

.editor-modal-wrapper .mk-modal__header {
    padding: 20px
}

.editor-modal-wrapper .mk-modal__body {
    padding: 0 20px 20px
}

.editor-modal-tab-wrap {
    width: 160px;
    position: absolute;
    left: 0;
    right: 0
}

.editor-modal-tab-wrap .right-part {
    position: absolute;
    right: 0;
    top: -10px
}

.editor-modal-tab-wrap .tab-nav.vertical {
    height: calc(100vh - 71px)
}

.editor-modal-query-wrap {
    padding: 15px 10px 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.editor-modal-query-wrap .btn {
    width: 90px
}

.editor-modal-query-wrap .mk-select {
    margin-right: 10px
}

.editor-modal-query-wrap .mk-select .form-control {
    width: 100px
}

.editor-modal-multi-drag-list {
    margin: -20px;
    padding: 20px;
    height: 100%
}

.search-toggle + .editor-modal-usage-stat {
    padding-left: 10px;
    margin-left: 10px;
    border-left: 1px solid #ccc
}

.editor-modal-usage-stat .usage-stat__item .progress-bar {
    margin-top: 5px
}

.add-scene-modal .editor-modal-actions-wrap {
    padding: 15px 0 15px 160px
}

.add-scene-modal .editor-modal-actions-wrap:after {
    display: block;
    clear: both;
    content: ""
}

.add-scene-modal .editor-modal-actions-wrap .resource-tag {
    display: inline-block
}

.add-scene-modal .editor-modal-actions-wrap .resource-tag-query {
    width: 120px
}

.add-scene-modal .editor-modal-actions-wrap .btn, .add-scene-modal .editor-modal-actions-wrap .search-toggle {
    float: right;
    margin-right: 20px
}

.add-scene-modal .editor-modal-actions-wrap .btn-md {
    padding: 11px 15px;
    min-width: 90px
}

.modal-actions-wrap .btn-md {
    padding: 11px 15px
}

.editor-modal-content-wrap {
    padding-left: 140px;
    height: calc(100% - 69px)
}

.music-modal .editor-modal-content-wrap {
    height: 100%
}

.music-modal {
    height: 100%;
    overflow: hidden
}

.music-modal-container {
    padding: 0 20px;
    height: calc(100% - 68px)
}

.music-modal-item {
    height: 59px;
    line-height: 59px;
    border-bottom: 1px solid #efefef
}

.music-modal-item:last-child {
    border-bottom: none
}

.music-modal-item.unfinished {
    cursor: not-allowed;
    opacity: .5
}

.music-modal-item .music-cover-img-wrap {
    margin-left: 0;
    position: relative;
    width: 40px;
    height: 40px;
    display: block;
    margin-top: 8px;
    float: left;
    text-align: center;
    background: #efefef
}

.music-modal-item .music-cover-img-wrap .music-cover-img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: block;
    max-width: 100%;
    max-height: 100%
}

.music-modal-item .music-cover-img-wrap .music-player-icon-img {
    display: none;
    color: #fff;
    background: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%;
    border-radius: 0;
    font-size: 12px
}

.music-modal-item .music-cover-img-wrap .music-player-icon-img.playing {
    display: inline-block
}

.music-modal-item .music-cover-img-wrap .music-player-icon-img img {
    width: 65%;
    height: 65%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
}

.music-modal-item .music-title {
    margin-left: 15px;
    display: inline-block;
    max-width: calc(100% - 55px)
}

.music-modal-item .mk-checkbox__input {
    margin-left: 15px
}

@media (max-width: 1200px) {
    .music-modal-item .mk-checkbox__input {
        margin-left: 5px
    }
}

.music-modal-item .mk-checkbox__input.checked .mk-checkbox__inner {
    background: #4777ff
}

.music-modal-item .mk-checkbox__input.checked .mk-checkbox__inner:before {
    border-color: #fff
}

.music-modal-item .mk-checkbox__inner {
    width: 20px;
    height: 20px;
    border-radius: 2px
}

.music-modal-item .mk-checkbox__inner:before {
    bottom: 7px;
    right: 4px;
    z-index: 2;
    width: 9px;
    height: 4px
}

.music-modal-item:hover {
    background: #f4f4f4
}

.music-modal-item:hover .music-player-icon-img {
    display: inline-block
}

.music-list {
    height: 100%
}

.music-list .music-list-content {
    height: calc(100% - 26px)
}

.music-list .row-1 {
    width: 4.16667%
}

.music-list .row-1, .music-list .row-2 {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 100%
}

.music-list .row-2 {
    width: 8.33333%
}

.music-list .row-3 {
    width: 12.5%
}

.music-list .row-3, .music-list .row-4 {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 100%
}

.music-list .row-4 {
    width: 16.66667%
}

.music-list .row-5 {
    width: 20.83333%
}

.music-list .row-5, .music-list .row-6 {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 100%
}

.music-list .row-6 {
    width: 25%
}

.music-list .row-7 {
    width: 29.16667%
}

.music-list .row-7, .music-list .row-8 {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 100%
}

.music-list .row-8 {
    width: 33.33333%
}

.music-list .row-9 {
    width: 37.5%
}

.music-list .row-9, .music-list .row-10 {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 100%
}

.music-list .row-10 {
    width: 41.66667%
}

.music-list .row-11 {
    width: 45.83333%
}

.music-list .row-11, .music-list .row-12 {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 100%
}

.music-list .row-12 {
    width: 50%
}

.music-list .row-13 {
    width: 54.16667%
}

.music-list .row-13, .music-list .row-14 {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 100%
}

.music-list .row-14 {
    width: 58.33333%
}

.music-list .row-15 {
    width: 62.5%
}

.music-list .row-15, .music-list .row-16 {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 100%
}

.music-list .row-16 {
    width: 66.66667%
}

.music-list .row-17 {
    width: 70.83333%
}

.music-list .row-17, .music-list .row-18 {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 100%
}

.music-list .row-18 {
    width: 75%
}

.music-list .row-19 {
    width: 79.16667%
}

.music-list .row-19, .music-list .row-20 {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 100%
}

.music-list .row-20 {
    width: 83.33333%
}

.music-list .row-21 {
    width: 87.5%
}

.music-list .row-21, .music-list .row-22 {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 100%
}

.music-list .row-22 {
    width: 91.66667%
}

.music-list .row-23 {
    width: 95.83333%
}

.music-list .row-23, .music-list .row-24 {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 100%
}

.music-list .row-24 {
    width: 100%
}

.music-list .text-align-center {
    text-align: center
}

.music-list .title {
    border-bottom: 1px solid #efefef
}

.music-list .f-color-light {
    color: #999
}

.music-item-select {
    position: absolute;
    right: 10px;
    top: 10px
}

.modal-music-player {
    padding: 15px 0 10px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    min-width: 450px;
    max-width: 50%
}

.modal-music-player .music-cover-wrap {
    position: relative;
    display: inline-block;
    width: 40px
}

.modal-music-player .music-cover-wrap .cover-img {
    width: 100%
}

.modal-music-player .music-cover-wrap .music-player-icon-img {
    width: 25px
}

.modal-music-player .player-slider-wrap {
    display: inline-block;
    width: calc(100% - 50px);
    padding-left: 15px
}

.modal-music-player .player-slider-wrap .music-duration {
    margin-left: 10px;
    display: inline-block;
    min-width: 63px
}

.modal-music-player .modal-music-player-slider .mk-slider__runway {
    margin-top: 10px;
    margin-bottom: 0;
    background-color: #efefef
}

.modal-music-player .mk-slider {
    margin-bottom: 5px
}

.musics-actions-wrap .search-toggle {
    float: left;
    margin-right: 10px
}

.musics-actions-wrap .music-select-info {
    margin-right: 5px
}

.musics-actions-wrap .btn {
    width: 90px;
    margin-left: 15px
}

.modal-scene-item {
    margin: 0 15px 30px;
    text-align: center;
    display: inline-block;
    position: relative;
    width: 250px;
    cursor: pointer
}

.modal-scene-item:hover .select-radio-inner {
    opacity: 1
}

.modal-scene-item:hover .resource-viewer-btn {
    display: block
}

.modal-scene-item.aspect-type-portrait {
    width: 158px
}

.modal-scene-item.selected .selectable-highlight, .modal-scene-item.ui-selecting .selectable-highlight, .modal-scene-item:hover .selectable-highlight {
    display: block
}

.modal-scene-item .radio-item-select {
    z-index: 41
}

.modal-scene-item .select-radio-inner {
    border-radius: 2px;
    border: 1px solid #ccc
}

.modal-scene-item .select-radio-inner:before {
    border-color: #fff
}

.modal-scene-item .select-radio-inner.active, .modal-scene-item .select-radio-inner:hover {
    border: 1px solid #4777ff !important
}

.modal-scene-item .preview-area {
    position: relative
}

.modal-scene-item .selectable-highlight {
    background-color: rgba(71, 119, 255, .05);
    width: 100%;
    height: 100%;
    padding: 5px;
    margin-left: -5px;
    margin-top: -5px;
    border: 1px solid #4777ff;
    border-radius: 2px
}

.modal-scene-item .scene-title {
    font-size: 12px;
    color: #999;
    user-select: none;
    margin-top: 15px
}

.modal-scene-item .resource-viewer-btn {
    display: none;
    z-index: 1
}

.scene-modal-container {
    padding: 20px;
    height: calc(100% - 80px)
}

.scene-modal-container .multi-drag-list {
    height: 100%;
    position: relative;
    padding: 20px;
    margin: -20px
}

.add-scene-modal {
    height: 100%
}

.add-scene-modal .editor-modal-tab-wrap .btn {
    margin-left: 10px;
    width: 6em
}

.video-length-editor {
    margin-top: 10px;
    margin-bottom: 30px
}

.video-length-editor .cut-slider {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 8em)
}

.video-length-editor .cut-slider .mk-slider {
    display: block;
    width: 100%
}

.video-length-editor .current-time {
    top: 13px
}

.video-length-actions {
    text-align: center
}

.video-length-actions .btn {
    margin: 0 5px;
    width: 120px
}

.editor-video-preview {
    width: 100%;
    position: relative;
    background: #fff
}

.editor-video-preview .video-js {
    background-color: #fff
}

.editor-video-preview img {
    width: 100%
}

.editor-video-preview .img-area {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0
}

.video-preview-display .processing-hint {
    color: #fff;
    font-size: 20px
}

.resource-modal-container {
    position: relative;
    height: 100%
}

.resource-modal-container .resource-list {
    padding: 20px;
    height: calc(100% - 68px)
}

.resource-modal-container .modal-resource-item, .resource-modal-container .upload-resource-item {
    display: inline-block;
    width: 158px;
    margin: 0 15px 30px;
    vertical-align: top
}

.resource-modal-container .modal-resource-item .center-info, .resource-modal-container .upload-resource-item .center-info {
    text-align: center;
    color: #fff;
    top: 40%
}

.resource-modal-container .modal-resource-item .processing-hint, .resource-modal-container .upload-resource-item .processing-hint {
    transform: scale(.6);
    margin-top: 5px
}

.resource-modal-container .modal-resource-item .resource-title, .resource-modal-container .upload-resource-item .resource-title {
    font-size: 12px;
    color: #999
}

.resource-modal-container .resource-list-container {
    position: relative;
    height: 100%;
    margin: -20px;
    padding: 20px
}

.resource-modal-container .resource-select-info {
    display: inline-block;
    margin-right: 10px
}

.resource-modal-container .resource-actions .btn {
    margin-left: 10px
}

.resource-modal-container .resource-actions .search-toggle {
    float: left;
    margin-right: 10px
}

.resource-pagination {
    position: fixed;
    bottom: 40px;
    padding: 0;
    margin: 0;
    left: 0
}

.resource-pagination.null {
    position: absolute;
    top: 180px;
    height: 1px
}

.modal-resource-item.item--hover .resource-preview-wrap, .modal-resource-item.selected .resource-preview-wrap, .modal-resource-item.ui-selecting .resource-preview-wrap {
    background-color: rgba(71, 119, 255, .05);
    border: 1px solid #4777ff
}

.modal-resource-item.item--hover .resource-preview-wrap .select-radio-inner, .modal-resource-item.selected .resource-preview-wrap .select-radio-inner, .modal-resource-item.ui-selecting .resource-preview-wrap .select-radio-inner {
    opacity: 1;
    border: 1px solid #4777ff
}

.modal-resource-item.item--hover .resource-preview-wrap .select-radio-inner {
    border: 1px solid #ccc
}

.modal-resource-item.unfinished .resource-preview-wrap {
    background-color: #ddd;
    color: #fff
}

.modal-resource-item .item-selecting-bg {
    display: none;
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    background-color: #ddd;
    z-index: -1
}

.modal-resource-item .resource-preview-wrap {
    position: relative;
    border: 1px solid #fff;
    padding: 5px;
    cursor: pointer;
    z-index: 0
}

.modal-resource-item .resource-preview-wrap:hover .viewer-type-image {
    display: block
}

.modal-resource-item .resource-viewer-btn.viewer-type-image {
    display: none
}

.modal-resource-item .resource-preview {
    height: 0;
    padding-bottom: 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all .2s ease-out
}

.modal-resource-item .resource-preview .select-radio-inner {
    box-shadow: 0 .15rem .5rem rgba(51, 51, 51, .2)
}

.modal-resource-item .select-radio-inner {
    border-radius: 2px;
    border: 1px solid #ccc
}

.modal-resource-item .select-radio-inner:before {
    border-color: #fff
}

.modal-resource-item .select-radio-inner.active, .modal-resource-item .select-radio-inner:hover {
    border: 1px solid #4777ff !important
}

.modal-resource-item .resource-info {
    text-align: center;
    user-select: none;
    margin: 5px 10px 0
}

.resource-uploader {
    text-align: center;
    padding: 60px 0 40px
}

.resource-uploader.is-dubbing .title {
    margin: 40px 0 25px
}

.resource-uploader .upload-dragger {
    cursor: pointer;
    height: 240px;
    width: 600px;
    border: 2px dotted #ccc;
    border-radius: 14px;
    padding-top: 60px
}

.resource-uploader .upload-dragger.is-dragover {
    background-color: rgba(71, 119, 255, .05);
    border: 2px dotted #4777ff
}

.resource-uploader .upload-icon {
    font-size: 50px;
    color: #ccc
}

.resource-uploader .title {
    margin: 40px 0;
    color: #999
}

.resource-uploader .upload {
    display: inline-block;
    outline: none
}

.resource-uploader .uploader-btn {
    font-size: 16px;
    width: 200px;
    padding-top: 13px;
    padding-bottom: 12px
}

.upload-resource-item .resource-preview-wrap {
    position: relative;
    padding: 5px;
    background: #ddd
}

.upload-resource-item .resource-preview {
    padding-bottom: 100%
}

.upload-resource-item .center-info {
    width: 80%
}

.render-video-preview {
    margin: auto
}

.render-video-preview .processing-hint {
    margin-top: 15px;
    transform: scale(.8)
}

.editor-preview-modal {
    padding-top: 64px
}

.editor-preview-modal .mk-modal {
    width: 100%;
    height: 100%;
    background: #f4f4f4;
    margin: 0
}

.editor-preview-modal .mk-modal__headerbtn {
    right: 50px;
    top: 20px;
    border: 1px solid #999;
    color: #999;
    border-radius: 28px;
    padding: 7px 15px;
    font-size: 14px;
    transform: none
}

.editor-preview-modal .mk-modal__headerbtn .mk-icon-modal-close {
    display: block;
    font-size: 20px;
    float: right;
    margin-left: 5px
}

.editor-preview-modal .mk-modal__headerbtn .mk-icon-modal-close:before {
    display: block
}

.editor-preview-modal .mk-modal__body {
    padding-left: 340px
}

.editor-preview-modal .preview-wrap {
    position: relative
}

.editor-preview-modal .action-bar {
    margin-top: 20px;
    text-align: center
}

.editor-preview-modal .action-bar .btn {
    width: 120px;
    height: 40px;
    box-sizing: border-box;
    margin: 0 10px
}

.editor-preview-modal .sidebar {
    position: absolute;
    box-shadow: 0 .15rem .5rem rgba(51, 51, 51, .2);
    width: 340px;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    box-sizing: border-box;
    padding: 22px
}

.editor-preview-modal .sidebar .video-download {
    margin: 0
}

.editor-preview-modal .sidebar .video-download .title {
    font-size: 16px
}

.editor-preview-modal .sidebar .download-res-item {
    font-size: 14px
}

.editor-preview-modal .sidebar .mk-checkbox__inner {
    width: 16px;
    height: 16px;
    border-radius: 2px
}

.editor-preview-modal .sidebar .mk-checkbox__inner:before {
    bottom: 6px;
    right: 3px;
    width: 7px;
    height: 4px
}

.editor-preview-modal .sidebar .generate-btn {
    display: none
}

.editor-preview-modal .sidebar .vip-ad {
    padding: 50px
}

.editor-preview-modal .sidebar .vip-ad .title {
    font-size: 18px
}

.editor-preview-modal .sidebar .vip-ad .vip-btn.btn {
    display: inline-block;
    outline: none;
    background-color: #fff;
    background-clip: padding-box;
    box-shadow: 0 0 0 -2px #fff, 0 0 0 -1px #fff;
    border: none;
    transition: box-shadow .3s
}

.editor-preview-modal .sidebar .vip-ad .vip-btn.btn:focus, .editor-preview-modal .sidebar .vip-ad .vip-btn.btn:hover {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #fff;
    transition-timing-function: cubic-bezier(.6, 4, .3, .8);
    animation: gelatine .5s 1
}

.editor-preview-modal .sidebar .res-list {
    padding: 16px 25px;
    overflow: hidden;
    position: relative
}

.editor-preview-modal .sidebar .res-list:after, .editor-preview-modal .sidebar .res-list:before {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0
}

.editor-preview-modal .sidebar .res-list:before {
    border-top: 30px solid #4777ff;
    border-left: 30px solid transparent
}

.editor-preview-modal .sidebar .res-list:after {
    right: 4px;
    top: 5px;
    width: 7px;
    height: 4px;
    border-bottom-left-radius: 2px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(-50deg);
    transition: all .2s ease-out
}

.editor-preview-modal .sidebar .res-list.active {
    border-color: #4777ff
}

.editor-preview-modal .sidebar .res-list.active:after, .editor-preview-modal .sidebar .res-list.active:before {
    content: ""
}

.editor-preview-modal .sidebar .res-list .mk-alert {
    display: none
}

.editor-preview-modal .sidebar .export-btn {
    width: 100%;
    font-size: 16px;
    padding: 9.5px 18px
}

.editor-preview-modal .sidebar .export-alert {
    margin-top: 20px;
    background-color: #ecf1ff;
    color: #666
}

.editor-preview-modal .sidebar .export-alert .bb {
    color: #4777ff
}

.editor-preview-modal .sidebar .export-alert .bb:before {
    transform: none
}

.editor-preview-modal .sidebar .video-ready-to-pay {
    padding: 0
}

.publish-overlay {
    background: #fff
}

.publish-overlay .publish-item {
    width: calc(50% - 10px)
}

.publish-item {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 20px;
    position: relative;
    box-sizing: border-box;
    cursor: pointer
}

.publish-item.selected {
    border-color: #4777ff
}

.publish-item .publish-item-title {
    text-align: center;
    font-size: 20px;
    color: #333;
    margin-top: 10px;
    margin-bottom: 30px
}

.publish-item .publish-item-bottom-hint {
    font-size: 13px;
    margin-top: 30px;
    margin-bottom: 10px;
    padding-left: 20px
}

.publish-item .radio-item-select {
    top: 15px;
    right: 15px
}

.resource-viewer-modal .delete-footage-btn {
    margin-top: 30px;
    margin-bottom: 20px;
    min-width: 8em
}

.scene-editor-wrap {
    background-color: #f4f4f4;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100% - 65px);
    text-align: center;
    z-index: 100
}

.scene-editor {
    max-width: 600px;
    display: inline-block;
    width: 100%;
    margin: 40px 0;
    text-align: left
}

.scene-editor.aspect-type-portrait .scene-editor-preview {
    width: 55%
}

.scene-editor.aspect-type-portrait .scene-editor-action {
    width: 45%
}

.scene-editor.aspect-type-portrait .scene-display-flex-box {
    flex-wrap: nowrap
}

.scene-editor .scene-display-flex-box {
    flex-wrap: wrap
}

.scene-editor .scene-editor-action, .scene-editor .scene-editor-preview {
    width: 100%
}

.scene-editor__closebtn {
    font-size: 18px
}

.scene-editor-background {
    position: absolute;
    width: 100%;
    height: 100%
}

.scene-editor-background .gradient {
    width: 100%;
    height: 100%
}

.change-editor-scene .change-scene-btn {
    z-index: 101;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
    font-size: 26px
}

.change-editor-scene .change-scene-btn:first-child {
    left: -55px
}

.change-editor-scene .change-scene-btn:last-child {
    right: -55px
}

.scene-editor-preview {
    position: relative;
    overflow: hidden
}

.scene-editor-preview .footage-layer {
    z-index: 10
}

.scene-editor-preview .text-layer {
    z-index: 20
}

.scene-editor-preview .auxline-layer {
    z-index: 23
}

.scene-editor-preview .auxline {
    z-index: 25
}

.scene-editor-preview .auxline-pins .pin {
    z-index: 24
}

.scene-editor-action-tab {
    padding-left: 20px;
    padding-right: 20px
}

.scene-editor-action-tab .tab-nav-item {
    margin-right: 25px
}

.scene-editor-action {
    position: relative
}

.scene-editor-action.aspect-type-portrait .scale-editor-wrap {
    margin-top: 10px;
    width: 100%
}

.scene-editor-action.aspect-type-portrait .scale-editor {
    margin-right: 0
}

.scene-editor-action.aspect-type-portrait .scene-editor-action-column-flex {
    margin-bottom: 0
}

.scene-editor-action.aspect-type-portrait .scene-editor__logo-action .btn-group-name {
    margin-bottom: 10px
}

.scene-editor-action.aspect-type-portrait .scene-editor__logo-action .text-effect-item .btn {
    margin: 5px;
    width: 100px;
    color: #666
}

.scene-editor-action.aspect-type-portrait .scene-editor__logo-action .text-effect-item .btn.btn-theme-frame {
    color: #4777ff
}

.scene-editor-action.aspect-type-portrait .scene-editor__dubbing-action .separator {
    display: none
}

.scene-editor-action.aspect-type-portrait .scene-editor__dubbing-action .more-features {
    margin-top: 10px;
    display: block
}

.scene-editor-action.aspect-type-portrait .scene-editor__dubbing-action .menu-music-player {
    position: relative;
    margin-top: 10px
}

.scene-editor-action.aspect-type-portrait .scene-editor__dubbing-action .play-icon {
    position: absolute;
    top: -40px
}

.scene-editor-action.aspect-type-portrait .scene-editor__dubbing-action .btn.editor-dubbing-btn {
    margin-left: 0
}

.scene-editor-action.aspect-type-portrait .tip-alert {
    left: -200px;
    padding-left: 0;
    padding-right: 0;
    width: 400px
}

.scene-editor-action .scale-editor-wrap {
    width: 50%;
    margin-right: 10px !important
}

.scene-editor-action .scale-editor-wrap .scale-editor {
    width: 100%;
    margin: 0
}

.scene-editor-action .scale-editor {
    width: 50%;
    margin-right: 10px
}

.scene-editor-action .scene-editor-action-column-flex {
    height: 100%
}

.scene-editor-action .scene-editor-action-bottom-area {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 15px
}

.scene-editor-action .tip-alert {
    position: absolute;
    background-color: unset;
    bottom: -10px;
    transform: translateY(100%);
    left: 0;
    padding-left: 20%
}

.scene-editor-action .tip-alert .mk-alert__icon {
    color: #ffac33;
    font-size: 14px
}

.scene-editor-action .tip-alert .mk-alert__content {
    font-size: 12px;
    color: #999
}

.scene-editor__action-item {
    padding: 10px 20px 30px
}

.scene-editor__action-item .action-name {
    margin-top: 10px;
    margin-bottom: 15px
}

.scale-slider-wrap {
    display: inline-block
}

.scale-slider-wrap .bb {
    display: inline-block;
    font-size: 12px;
    padding: 5px 10px;
    color: #aaa;
    vertical-align: middle;
    cursor: pointer
}

.scale-slider-wrap .bb:last-child {
    text-align: right
}

.scale-slider-wrap .bb:hover {
    color: #333
}

.scale-slider-wrap .scale-slider {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 64px)
}

.scene-editor__resource-action .overflow-hint-body {
    display: inline-block;
    margin-right: 10px
}

.scene-editor__resource-action .overflow-hint-body:last-child {
    margin-right: 0
}

.scene-editor__resource-action .circle-icon-btn {
    margin-right: 10px;
    margin-left: 0
}

.scene-editor__resource-action .circle-icon-btn:last-child {
    margin-right: 0
}

.scene-editor__resource-action .circle-icon-btn .bb {
    width: 36px;
    height: 36px;
    display: block;
    border: 1px solid #999;
    border-radius: 100%
}

.scene-editor__resource-action .circle-icon-btn .bb:hover {
    border: 1px solid #666
}

.scene-editor__resource-action .circle-icon-btn .bb:before {
    border: none;
    transform: scale(1.4)
}

.scene-editor__resource-action .circle-icon-btn .bb.bb-upload:before {
    transform: scale(1.3)
}

.scene-editor__resource-action .buttons {
    display: inline-block
}

.scene-editor__resource-action .action-button-list .btn {
    min-width: 102px;
    margin-right: 10px;
    margin-bottom: 10px
}

.scene-editor__resource-action .collage-repr {
    margin-right: 2px;
    vertical-align: bottom
}

.scale-editor {
    display: inline-block;
    margin-top: 10px;
    margin-left: -5px
}

.scale-editor .scale-slider-wrap {
    width: 100%
}

.video-vol-improve {
    display: inline-block
}

.video-vol-improve__popover .slider-wrap .slider-title {
    display: inline-block;
    width: 4em;
    margin-right: 5px
}

.video-vol-improve__popover .slider-wrap .mk-slider {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 7em - 5px)
}

.video-vol-improve__popover .slider-wrap .slider-value {
    text-align: right;
    display: inline-block;
    width: 3em
}

.video-vol-improve__popover .slider-wrap .mk-slider__runway {
    margin: 10px 0
}

.scene-editor__dubbing-action .btn.btn-group {
    margin-left: 8px
}

.scene-editor__dubbing-action .btn.editor-dubbing-btn {
    margin-left: 12px
}

.scene-editor__dubbing-action .more-features {
    display: inline-block
}

.scene-editor__dubbing-action .dubbing-editor {
    margin-top: 20px
}

.scene-editor__dubbing-action .dubbing-editor .music-player-slider {
    width: calc(100% - 3em)
}

.scene-editor__dubbing-action .dubbing-editor .play-icon {
    width: auto;
    height: auto;
    padding: 8px;
    margin-right: 10px
}

.scene-editor__dubbing-action .music-duration {
    width: 2em
}

.scene-editor__dubbing-action .dubbing-duration {
    margin-top: 20px;
    color: #999
}

.dubbing-uploading {
    margin-top: 15px;
    text-align: center;
    padding-bottom: 30px;
    color: #999;
    font-size: 14px
}

.dubbing-uploading .processing-hint {
    transform: scale(.8)
}

.dubbing-editor-modal .btn.btn-group {
    margin-left: 8px
}

.dubbing-editor-modal .dubbing-editor .music-title {
    padding-right: 15px
}

.dubbing-editor-modal .dubbing-editor .menu-music-player {
    margin-bottom: 20px
}

.dubbing-editor-modal .dubbing-editor .play-icon {
    width: 38px;
    height: 38px
}

.dubbing-editor-modal .dubbing-editor .dubbing-editor-duration {
    margin-left: 15px;
    margin-right: 10px
}

.dubbing-editor-modal .dubbing-editor .dubbing-editor-duration .current-time {
    top: 8px
}

.dubbing-editor-modal .dubbing-setting-body {
    margin-top: 20px
}

.scene-editor__text-action .action-area {
    margin-top: 10px
}

.scene-editor__logo-action .scene-effect-item {
    margin-right: 15px
}

.scene-editor__logo-action .text-effect-item {
    display: inline-block
}

.scene-editor__logo-action .text-effect-item .btn {
    min-width: 5em;
    margin-right: 5px;
    box-sizing: border-box
}

.action-collage:after {
    display: block;
    clear: both;
    content: ""
}

.action-collage .collage-repr {
    width: 100px;
    min-height: 100px
}

.action-collage .collage-repr__item {
    cursor: pointer
}

.action-collage .collage-repr__item:hover {
    border-color: #4777ff
}

.action-collage .collage-repr__item.active {
    border-color: #4777ff;
    position: relative
}

.action-collage .collage-repr__item.active:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 10px;
    height: 5px;
    border-bottom-left-radius: 2px;
    border-bottom: 2px solid #4777ff;
    border-left: 2px solid #4777ff;
    transform: rotate(-50deg)
}

.action-collage .collage-repr, .action-collage .control {
    float: left
}

.action-collage .control {
    margin-left: 20px
}

.action-collage .cut-video-button {
    margin-top: 10px
}

.aspect-type-portrait .action-collage .collage-repr {
    width: 50px
}

.scene-player-toggler {
    width: 100%;
    box-sizing: border-box
}

.scene-player-toggler.append-btn {
    width: 50px;
    padding-top: 16px
}

.scene-player-toggler__text {
    margin-left: 5px
}

.scene-player {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 40
}

.scene-player .bling-player {
    z-index: 12
}

.scene-player__progress {
    position: absolute;
    width: 100%;
    bottom: 0
}

.footage-player {
    overflow: hidden
}

.footage-player .video-js {
    margin: 0
}

.footage-player .vjs-poster {
    background-color: transparent
}

.footage-player__img {
    position: absolute
}

/*! Depth */
.advertising-page .use-guide-item.video {
    background: #fff;
    box-shadow: 0 0 20px 4px rgba(51, 57, 79, .1);
    border-radius: 7px;
    overflow: hidden;
    padding: 0;
    width: 31%;
    margin: 0 1%;
    box-sizing: border-box
}

.advertising-page .use-guide-item.video h5, .advertising-page .use-guide-item.video p {
    padding: 0 15px;
    text-align: left
}

.advertising-page .use-guide-item.video p {
    margin: 0;
    padding-bottom: 15px
}

@media (max-width: 992px) {
    .advertising-page .use-guide-item.video {
        margin: 10px 0;
        width: 100%
    }
}

.advertising-page .use-guide {
    padding-top: 70px
}

.advertising-page .use-guide .btn {
    height: 46px;
    line-height: 1.7;
    box-sizing: border-box;
    font-size: 14px;
    margin-top: 56px;
    width: 180px;
    padding-left: 0;
    padding-right: 0;
    border-radius: 24px
}

.advertising-page .tools h5 {
    margin-top: 10px;
    line-height: 40px;
    text-align: left
}

.advertising-page .tools .title {
    margin-top: 0
}

.advertising-page .tools p {
    font-size: 14px
}

.advertising-page .tools p:after {
    display: none
}

.advertising-page .tools .tools-item .pic.right {
    float: right
}

.advertising-page .tools .section__title {
    margin-bottom: 60px
}

@media (max-width: 1200px) {
    .advertising-page .tools .tools-item .content, .advertising-page .tools .tools-item .pic {
        margin: 0;
        height: auto
    }

    .advertising-page .tools .tools-item .content {
        padding: 0 40px
    }
}

@media (max-width: 768px) {
    .advertising-page .tools .tools-item .content, .advertising-page .tools .tools-item .pic {
        margin: 0;
        height: 300px
    }
}

@media (max-width: 767px) {
    .advertising-page .tools .tools-item .content, .advertising-page .tools .tools-item .pic {
        height: auto;
        position: static;
        margin: 0;
        display: block;
        width: 96%;
        padding: 0 2%;
        float: none
    }
}

.advertising-page .features {
    margin-top: 20px;
    list-style: none;
    padding: 0
}

.advertising-page .features:after {
    display: block;
    clear: both;
    content: ""
}

.advertising-page .features .feature-item {
    display: block;
    float: left;
    width: 60px;
    margin-right: 10px
}

.advertising-page .features .feature-item i {
    font-size: 20px
}

@media (max-width: 767px) {
    .advertising-page .banner-video .title {
        margin-top: 34px;
        line-height: 55px
    }
}

/*! Depth */
.mobile-show-page {
    background: #000;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    box-sizing: border-box;
    padding-bottom: 55px
}

.mobile-show-page .mobile-show-close {
    font-size: 12px;
    margin-left: 5px;
    padding: 5px
}

.mobile-show-page .mobile-show-close:before {
    transform: none
}

.mobile-show-page .video-area {
    position: relative;
    height: 100%
}

.mobile-show-page .video-area .video-preview {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%)
}

.mobile-show-page .fixed-top {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 10px 15px;
    box-sizing: border-box;
    color: #fff;
    background: #131217
}

.mobile-show-page .bottom-logo {
    vertical-align: text-bottom;
    margin-right: 10px
}

.mobile-show-page .promo-title {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

/*! Depth */
.show-page {
    font-size: 14px
}

.show-page .show-content {
    margin: 25px auto auto;
    width: 1040px
}

.show-page .video-area {
    float: left;
    width: 680px
}

.show-page .share-area {
    float: right;
    max-width: 340px
}

.video-area .card-footer {
    padding-top: 5px
}

.video-area .video-info-actions__actions {
    float: right;
    position: relative;
    top: 5px
}

.video-area .video-info {
    float: left
}

.video-info-actions .btn {
    margin-left: 15px;
    width: 142.5px
}

.video-info-actions .btn:first-child {
    margin-left: 0
}

.video-info-actions .bb {
    margin-right: 5px;
    font-size: .8em
}

.video-info header {
    font-size: 20px;
    color: #333;
    margin-bottom: 5px
}

.video-info__sub {
    color: #999;
    font-size: 14px
}

.video-info__sub .divider {
    margin-left: 10px;
    margin-right: 10px
}

.video-preview {
    position: relative
}

.video-preview__placeholder {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 50%;
    transform: translateX(-50%)
}

.video-preview__top-hint {
    color: #fff;
    background-color: rgba(0, 0, 0, .6);
    padding: 8px;
    box-sizing: border-box
}

.video-preview__play-limit-overlay {
    background-color: rgba(0, 0, 0, .6);
    color: #fff;
    text-align: center
}

.video-preview__overlay-title {
    font-size: 20px;
    margin-bottom: 20px
}

.share-area .other-sharing, .share-area .qrcode-sharing, .share-area .share-button {
    color: #aaa
}

.share-area .qrcode-sharing {
    margin-bottom: 10px
}

.share-area .other-sharing {
    float: left;
    margin-bottom: 0;
    margin-top: 3px;
    margin-right: 5px
}

.share-area .share-area-info-actions {
    padding-bottom: 25px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc
}

.share-area .video-info-actions__actions {
    margin-top: 15px
}

.share-area .separator {
    margin: 15px 0
}

.share-area .share-download-btn {
    width: 200px;
    margin-top: 10px;
    margin-bottom: 10px
}

.share-area .share-download-btn .bb {
    margin-right: 5px
}

.share-area .share-download-btn .bb:before {
    transform: scale(1.2)
}

.share-area .share-button {
    margin-right: 2px;
    margin-bottom: 0;
    border: none;
    padding: 0;
    width: 24px;
    height: 24px
}

.share-area .share-button .bb:before {
    vertical-align: unset;
    transform: scale(1.2)
}

.share-area .share-button:last-child {
    margin-right: 0
}

.share-area .qrcode-wrap {
    margin-bottom: 10px
}

.share-area .share-buttons {
    float: left
}

.clearfix:after {
    display: block;
    clear: both;
    content: ""
}

.share-setting {
    text-align: center
}

.share-setting .cover-display__img {
    display: block
}

.share-setting .overlay {
    cursor: pointer;
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
    height: 40px;
    top: auto;
    bottom: 0
}

.share-setting .show-length-textarea {
    position: relative
}

.share-setting .show-length-textarea .form-control {
    padding: 9px 10px 30px
}

.share-setting .show-max {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #999
}

.share-setting__form {
    padding-top: 20px
}

.share-setting__form .mk-form-item {
    margin-bottom: 5px
}

.share-setting__form.form--label-stack .control-label {
    margin-bottom: 0
}

.share-setting__form-header {
    font-size: 20px;
    color: #333;
    margin-top: 10px;
    margin-bottom: 8px
}

.share-setting-modal .mk-modal__header {
    padding: 0
}

.share-setting-modal .mk-modal {
    width: 950px
}

.share-setting-modal .mk-modal__headerbtn {
    right: 0;
    top: 30px
}

.share-setting-modal .form__actions {
    margin-top: 15px
}

.share-setting-modal .form-group-title {
    margin-bottom: 5px
}

.share-setting-modal .card {
    display: inline-block;
    vertical-align: top;
    width: 480px;
    margin-top: 30px;
    text-align: left
}

.share-setting-modal .card-header {
    border-bottom: 0;
    border-radius: 4px;
    padding: 30px 30px 10px;
    font-size: 20px;
    color: #333
}

.share-setting-modal .card-body {
    padding: 0 30px 30px
}

@media (min-width: 768px) {
    .share-setting-modal .wechat-share-preview {
        margin-top: 60px
    }
}

.wechat-share-preview {
    display: inline-block;
    position: relative
}

.wechat-share-preview .title-holder {
    position: absolute;
    top: 101px;
    left: 95px;
    color: #fff;
    width: 160px;
    text-align: center
}

.wechat-share-preview .messages-holder {
    position: absolute;
    top: 129px;
    left: 26px;
    width: 289px;
    padding: 10px;
    box-sizing: border-box;
    height: 430px;
    background: #f1f1f1
}

.wechat-share-preview .message {
    margin-bottom: 10px;
    color: #333
}

.wechat-share-preview .message.my {
    float: right
}

.wechat-share-preview .message.friend, .wechat-share-preview .message.my .avatar, .wechat-share-preview .message.my .message-frame {
    float: left
}

.wechat-share-preview .message.friend .avatar, .wechat-share-preview .message.friend .message-frame {
    float: right
}

.wechat-share-preview .message .title {
    color: #333
}

.wechat-share-preview .message-frame {
    display: inline-block;
    max-width: 200px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 4px;
    padding: 6px 10px;
    line-height: 1.5;
    font-size: 12px;
    margin-left: 5px;
    margin-right: 5px;
    text-align: left;
    word-break: break-all
}

.wechat-share-preview .message-frame .title {
    font-size: 14px
}

.wechat-share-preview .message-frame .description {
    color: #999
}

.wechat-share-preview .message-frame .description-text {
    display: inline-block;
    width: 130px;
    vertical-align: text-top
}

.wechat-share-preview .message-frame .description-text p {
    margin: 0;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.wechat-share-preview .message-frame .share-cover {
    float: right;
    height: 36px;
    width: 36px;
    background-size: cover;
    background-position: 50%
}

.wechat-share-preview .message-frame--green {
    background: #9aea6d
}

.wechat-share-preview .avatar {
    display: inline-block
}

.wechat-share-preview .avatar img {
    width: 30px;
    height: 30px
}

.share-button {
    font-size: 18px;
    box-sizing: border-box;
    float: none;
    padding: 5px;
    line-height: 24px;
    margin: 0;
    width: 40px;
    height: 40px;
    border: 1px solid #999;
    color: #999;
    border-radius: 50%
}

.share-button:hover {
    color: #666
}

.share-button .bb-email {
    font-size: 14px
}

.page-progress-bar[data-v-2f2a15c2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    width: 0;
    transition: width .2s, opacity .4s;
    opacity: 1;
    background-color: #4777ff;
    z-index: 999999
}