.edit-item {
  position: absolute;
  border: 1px dashed transparent; }
  .edit-item.edit-item-not-active:hover {
    border-color: gray; }
  .edit-item .content-hide-container {
    overflow: auto;
    height: 100%; }
    .edit-item .content-hide-container::-webkit-scrollbar {
      display: none; }
  .edit-item > .ctrl-container {
    margin: 0 0;
    padding: 0 0;
    list-style: none; }
    .edit-item > .ctrl-container .line {
      position: absolute;
      z-index: 1;
      background-color: #44cb83;
      height: 1px;
      width: 1px; }
      .edit-item > .ctrl-container .line.l {
        top: 0;
        left: 0;
        height: 100%; }
      .edit-item > .ctrl-container .line.t {
        top: 0;
        left: 0;
        width: 100%; }
      .edit-item > .ctrl-container .line.r {
        top: 0;
        right: 0;
        height: 100%; }
      .edit-item > .ctrl-container .line.b {
        bottom: 0;
        left: 0;
        width: 100%; }
      .edit-item > .ctrl-container .line.link-rotate {
        width: 1px;
        height: 18px;
        left: 50%;
        top: -24px;
        transform: translateX(-50%);
        background-color: #44cb83; }
    .edit-item > .ctrl-container .point {
      position: absolute;
      z-index: 1;
      background-color: #FFFFFF;
      border-radius: 50%;
      border: 1px solid #44cb83;
      width: 12px;
      height: 12px; }
      .edit-item > .ctrl-container .point.lc {
        left: -6px;
        top: 50%;
        transform: translateY(-50%); }
      .edit-item > .ctrl-container .point.rc {
        right: -6px;
        top: 50%;
        transform: translateY(-50%); }
      .edit-item > .ctrl-container .point.tc {
        left: 50%;
        top: -6px;
        transform: translateX(-50%); }
      .edit-item > .ctrl-container .point.bc {
        left: 50%;
        bottom: -6px;
        transform: translateX(-50%); }
      .edit-item > .ctrl-container .point.lt {
        left: -6px;
        top: -6px; }
      .edit-item > .ctrl-container .point.rt {
        right: -6px;
        top: -6px; }
      .edit-item > .ctrl-container .point.lb {
        left: -6px;
        bottom: -6px; }
      .edit-item > .ctrl-container .point.rb {
        right: -6px;
        bottom: -6px; }
      .edit-item > .ctrl-container .point.rotate {
        left: 50%;
        top: -30px;
        transform: translateX(-50%);
        border-color: #44cb83;
        background-color: #44cb83; }

.component-text-style-container {
  background-color: #fafafa; }
  .component-text-style-container .ant-row-flex {
    margin: 8px 0; }

.component-picture-style-container {
  background-color: #fafafa; }
  .component-picture-style-container .ant-row-flex {
    margin: 8px 0; }

.component-setting-container {
  width: 260px;
  background-color: #fafafa; }
  .component-setting-container .header {
    cursor: move;
    height: 48px;
    line-height: 48px;
    background-color: #f7f7f7;
    padding: 0 16px; }
  .component-setting-container .tabs-content {
    padding: 0 16px; }
  .component-setting-container .animate-container {
    padding: 0 0 12px 0; }
    .component-setting-container .animate-container .ant-row-flex {
      margin: 8px 0; }

.component-page-manage-container {
  width: 260px;
  background-color: #fafafa; }
  .component-page-manage-container .header {
    cursor: move;
    height: 48px;
    line-height: 48px;
    background-color: #f7f7f7;
    padding: 0 16px; }
  .component-page-manage-container .content {
    padding-bottom: 16px; }
    .component-page-manage-container .content .page-item {
      display: flex;
      align-items: center; }
      .component-page-manage-container .content .page-item.active {
        background-color: #eee; }
      .component-page-manage-container .content .page-item .index {
        display: inline-block;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border-radius: 12px;
        color: #fff;
        background-color: #1593ff;
        margin: 0 10px; }
      .component-page-manage-container .content .page-item .describe {
        display: inline-block;
        font-size: 14px;
        width: 175px;
        line-height: 70px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden; }
  .component-page-manage-container .tabs-content {
    padding: 0 16px; }

.component-level-manage-container {
  margin-bottom: 12px; }
  .component-level-manage-container ul {
    margin: 0 0;
    padding: 0 0;
    list-style: none;
    border: 1px solid #cacaca;
    border-bottom-color: transparent; }
    .component-level-manage-container ul li {
      margin: 0 0;
      padding: 0 8px;
      list-style: none;
      line-height: 32px;
      border-bottom: 1px solid #cacaca; }
      .component-level-manage-container ul li.active {
        color: #1593ff; }

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

.m-b-5 {
  margin-bottom: 5px; }

.m-t-8 {
  margin-top: 8px; }

.m-t-12 {
  margin-top: 12px; }

.m-b-12 {
  margin-bottom: 12px; }

html {
  font-size: 12px; }

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

section {
  margin: 0 0;
  padding: 0 0; }

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

body > li {
  border-top: 1px solid #cacaca;
  border-bottom: 1px solid #cacaca;
  padding: 0 8px;
  line-height: 32px; }

.home-container {
  margin-top: 20px;
  position: relative;
  overflow: hidden; }
  .home-container .phone-container {
    width: 330px;
    position: relative; }
    .home-container .phone-container > .header {
      height: 50px;
      border-top-left-radius: 50px;
      border-top-right-radius: 50px;
      background-color: #e0e0e0; }
    .home-container .phone-container > .content {
      height: 480px;
      position: relative;
      border-left: 5px solid #e0e0e0;
      border-right: 5px solid #e0e0e0; }
      .home-container .phone-container > .content .border-left {
        position: absolute;
        left: -5px;
        top: 0;
        bottom: 0;
        width: 10px;
        background-color: #e0e0e0; }
      .home-container .phone-container > .content .border-right {
        position: absolute;
        right: -5px;
        top: 0;
        bottom: 0;
        width: 10px;
        background-color: #e0e0e0; }
    .home-container .phone-container > .footer {
      height: 30px;
      border-bottom-left-radius: 30px;
      border-bottom-right-radius: 30px;
      background-color: #e0e0e0; }
  .home-container .style-setting-container {
    position: absolute;
    right: 0;
    top: 0; }
  .home-container .page-manage-container {
    position: absolute;
    right: 300px;
    top: 0; }

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

.m-b-5 {
  margin-bottom: 5px; }

.m-t-8 {
  margin-top: 8px; }

.m-t-12 {
  margin-top: 12px; }

.m-b-12 {
  margin-bottom: 12px; }

html {
  font-size: 12px; }

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

section {
  margin: 0 0;
  padding: 0 0; }

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

body > li {
  border-top: 1px solid #cacaca;
  border-bottom: 1px solid #cacaca;
  padding: 0 8px;
  line-height: 32px; }

.home-container {
  margin-top: 20px;
  position: relative; }
  .home-container .phone-container {
    width: 330px; }
    .home-container .phone-container > .header {
      height: 50px;
      border-top-left-radius: 50px;
      border-top-right-radius: 50px;
      background-color: #e0e0e0; }
    .home-container .phone-container > .content {
      height: 480px;
      position: relative;
      border-left: 5px solid #e0e0e0;
      border-right: 5px solid #e0e0e0; }
      .home-container .phone-container > .content .ant-carousel .slick-slide {
        text-align: center;
        height: 160px;
        line-height: 160px;
        background: #364d79;
        overflow: hidden; }
    .home-container .phone-container > .footer {
      height: 30px;
      border-bottom-left-radius: 30px;
      border-bottom-right-radius: 30px;
      background-color: #e0e0e0; }
  .home-container .style-setting-container {
    position: absolute;
    right: 0;
    top: 0; }
  .home-container .page-manage-container {
    position: absolute;
    right: 300px;
    top: 0; }

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

.m-b-5 {
  margin-bottom: 5px; }

.m-t-8 {
  margin-top: 8px; }

.m-t-12 {
  margin-top: 12px; }

.m-b-12 {
  margin-bottom: 12px; }

html {
  font-size: 12px; }

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

section {
  margin: 0 0;
  padding: 0 0; }

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

body > li {
  border-top: 1px solid #cacaca;
  border-bottom: 1px solid #cacaca;
  padding: 0 8px;
  line-height: 32px; }

.realperview-container {
  margin-top: 20px;
  position: relative;
  display: flex; }
  .realperview-container .phone-container {
    width: 330px; }
    .realperview-container .phone-container > .header {
      height: 50px;
      border-top-left-radius: 50px;
      border-top-right-radius: 50px;
      background-color: #e0e0e0; }
    .realperview-container .phone-container > .content {
      height: 480px;
      position: relative;
      border-left: 5px solid #e0e0e0;
      border-right: 5px solid #e0e0e0; }
      .realperview-container .phone-container > .content .ant-carousel .slick-slide {
        text-align: center;
        height: 160px;
        line-height: 160px;
        background: #364d79;
        overflow: hidden; }
      .realperview-container .phone-container > .content .music-container {
        position: absolute;
        top: 10px;
        right: 0;
        width: 30px;
        height: 24px;
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
        background-color: #44cb83;
        z-index: 2000;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 16px; }
    .realperview-container .phone-container > .footer {
      height: 30px;
      border-bottom-left-radius: 30px;
      border-bottom-right-radius: 30px;
      background-color: #e0e0e0; }
  .realperview-container .toggle-page {
    margin-left: 8px;
    display: flex;
    justify-content: center;
    align-items: center; }

.page-header-container {
  display: flex;
  line-height: initial; }
  .page-header-container ul {
    margin: 0 0;
    padding: 0 0;
    list-style: none;
    flex: 1;
    text-align: center; }
    .page-header-container ul li {
      margin: 0 0;
      padding: 0 0;
      list-style: none;
      display: inline-block;
      width: 60px;
      text-align: center;
      cursor: pointer; }
      .page-header-container ul li:hover {
        background-color: #1593ff;
        color: #fff; }
      .page-header-container ul li .icon {
        font-size: 24px; }
      .page-header-container ul li .txt {
        font-size: 12px;
        height: 24px;
        line-height: 24px;
        text-align: center; }
  .page-header-container .example-container {
    display: flex;
    align-items: center;
    padding: 0 12px;
    flex: 1; }
  .page-header-container .publish-container {
    padding: 0 12px;
    display: flex;
    align-items: center;
    flex: 1;
    flex-direction: row-reverse; }

/*!
 * Cropper.js v1.5.1
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2019-03-10T09:55:50.492Z
 */.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}
.layout .layout-header-container {
  margin: 0 auto;
  width: 100%;
  padding: 0;
  background-color: #fff;
  height: 48px; }
  .layout .layout-header-container .menu-container {
    width: 960px;
    margin: 0 auto; }
    .layout .layout-header-container .menu-container .ant-menu-item {
      padding: 0 10px; }
      .layout .layout-header-container .menu-container .ant-menu-item a {
        line-height: 30px;
        margin: 8px 0;
        padding: 0 8px; }
        .layout .layout-header-container .menu-container .ant-menu-item a:hover {
          background-color: rgba(0, 0, 0, 0.05);
          color: #b0b0b0;
          border-radius: 5px; }
        .layout .layout-header-container .menu-container .ant-menu-item a.active {
          color: #1d1d31;
          font-weight: bold; }
          .layout .layout-header-container .menu-container .ant-menu-item a.active:hover {
            background-color: rgba(0, 0, 0, 0.05);
            color: #b0b0b0;
            border-radius: 5px;
            font-weight: normal; }

.layout .layout-content-container {
  width: 960px;
  margin: 0 auto; }

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

.m-b-5 {
  margin-bottom: 5px; }

.m-t-8 {
  margin-top: 8px; }

.m-t-12 {
  margin-top: 12px; }

.m-b-12 {
  margin-bottom: 12px; }

html {
  font-size: 12px; }

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

section {
  margin: 0 0;
  padding: 0 0; }

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

body > li {
  border-top: 1px solid #cacaca;
  border-bottom: 1px solid #cacaca;
  padding: 0 8px;
  line-height: 32px; }