.sign-wrap[data-v-9069ef52] {
  position: relative;
}
.sign-wrap .sign-list[data-v-9069ef52] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.sign-wrap .sign-list li[data-v-9069ef52] {
  width: 40px;
  height: 32px;
  margin-right: 10px;
  list-style: none;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  text-align: center;
  font-size: 16px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.sign-wrap .sign-list.is-focus li[data-v-9069ef52] {
  border-color: #658afe;
  outline: 0;
  -webkit-box-shadow: 0 0 0 2px rgba(63, 109, 254, 0.2);
          box-shadow: 0 0 0 2px rgba(63, 109, 254, 0.2);
}
.sign-wrap .ivu-input-wrapper[data-v-9069ef52] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 290px;
  opacity: 0;
}

#demo #button,#demo #cancel {
    right: 10px;
    top: 10px;
    border: none;
    border-radius: 5px;
    background: white;
}
#demo #button {
    border-radius: 22px;
    background-color: rgb(0, 179, 138);
    width: 270px;
    height: 46px;
    line-height: 32px;
    font-size: 18px;
    color: #fff;
}
#demo #cancel {
    position: absolute;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
    right: 10px;
    top: 10px;
}
#demo #cancel:hover {
    color: #000;
    filter: alpha(opacity=50);
    opacity: .5;
}
#demo .show {
    width: 74px;
    height: 74px;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    border: 1px solid #ccc;
}
.head-area .hover-publish p {
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 10;
  height:17px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,1);
  line-height:17px;
  margin-top: 29px;
}
.head-area .hover-publish {
  display: none;
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  cursor: pointer;
}
.head-area .hover-publish:after {
  position: absolute;
  left: 0;
  height: 100%;
  top: 0;
  width: 100%;
  border-radius: 100%;
  background-color: #000;
  opacity: .502;
  content: "";
  z-index: 9;
}
.head-area:hover .hover-publish {
  display: block;
}
#demo .picture {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
#demo .img-container {
    border-radius: 8px;
    background-color: rgb(255, 255, 255);
    padding: 20px;
    z-index: 105;
    position: fixed;
    left: 50%;
    top: 50%;
    width: 400px;
    height: 540px;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}

/*#demo .img-container::after {*/
    /*content: '';*/
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*opacity: 0.6;*/
    /*background: #ccc;*/
/*}*/
#demo #image {
    max-width: 100%;
}
.file-input {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}
.cropper-view-box,
.cropper-face {
    /*border-radius: 50%;*/
}
/*!
 * Cropper.js v1.0.0-rc
 * https://github.com/fengyuanchen/cropperjs
 *
 * Copyright (c) 2017 Fengyuan Chen
 * Released under the MIT license
 *
 * Date: 2017-03-25T12:02:21.062Z
 */
.cropper-container {
    font-size: 0;
    line-height: 0;
    position: relative;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    direction: ltr;
    -ms-touch-action: none;
        touch-action: none;
    height: 350px;
    width: 100%;
    /*max-height: 550px;*/
}
.cropper-container img {
    display: block;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100%;
    height: 100%;
    image-orientation: 0deg;
}
.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.cropper-canvas {
    position: absolute;
}
.cropper-wrap-box {
    overflow: hidden;
    position: absolute;
}
.cropper-drag-box {
    opacity: 0;
    background-color: #fff;
}
.cropper-modal {
    background-color: rgb(204, 204, 204);
    opacity: 0.6;
}
.cropper-view-box {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    /*outline: 1px solid #00b38a;*/
    /*outline-color: rgba(0, 179, 138, 0.75);*/
}
.cropper-dashed {
    position: absolute;
    display: block;
    /*opacity: 0.5;*/
    /*border: 0 dashed #eee;*/
}
.cropper-dashed.dashed-h {
    top: 33.33333%;
    left: 0;
    width: 100%;
    height: 33.33333%;
    border-top-width: 1px;
    border-bottom-width: 1px;
}
.cropper-dashed.dashed-v {
    top: 0;
    left: 33.33333%;
    width: 33.33333%;
    height: 100%;
    border-right-width: 1px;
    border-left-width: 1px;
}
.cropper-center {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    opacity: 0.75;
}
.cropper-center:before,
.cropper-center:after {
    position: absolute;
    display: block;
    content: " ";
    background-color: #eee;
}
.cropper-center:before {
    top: 0;
    left: -3px;
    width: 7px;
    height: 1px;
}
.cropper-center:after {
    top: -3px;
    left: 0;
    width: 1px;
    height: 7px;
}
.cropper-face,
.cropper-line,
.cropper-point {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.1;
}
.cropper-face {
    top: 0;
    left: 0;
    background-color: #fff;
}
.cropper-line {
    background-color: #39f;
}
.cropper-line.line-e {
    top: 0;
    right: -3px;
    width: 5px;
    cursor: e-resize;
}
.cropper-line.line-n {
    top: -3px;
    left: 0;
    height: 5px;
    cursor: n-resize;
}
.cropper-line.line-w {
    top: 0;
    left: -3px;
    width: 5px;
    cursor: w-resize;
}
.cropper-line.line-s {
    bottom: -3px;
    left: 0;
    height: 5px;
    cursor: s-resize;
}
.cropper-point {
    width: 5px;
    height: 5px;
    opacity: 0.75;
    background-color: #39f;
}
.cropper-point.point-e {
    top: 50%;
    right: -3px;
    margin-top: -3px;
    cursor: e-resize;
}
.cropper-point.point-n {
    top: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: n-resize;
}
.cropper-point.point-w {
    top: 50%;
    left: -3px;
    margin-top: -3px;
    cursor: w-resize;
}
.cropper-point.point-s {
    bottom: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: s-resize;
}
.cropper-point.point-ne {
    top: -3px;
    right: -3px;
    cursor: ne-resize;
}
.cropper-point.point-nw {
    top: -3px;
    left: -3px;
    cursor: nw-resize;
}
.cropper-point.point-sw {
    bottom: -3px;
    left: -3px;
    cursor: sw-resize;
}
.cropper-point.point-se {
    right: -3px;
    bottom: -3px;
    width: 20px;
    height: 20px;
    cursor: se-resize;
    opacity: 1;
}
@media (min-width: 768px) {
.cropper-point.point-se {
        width: 15px;
        height: 15px;
}
}
@media (min-width: 992px) {
.cropper-point.point-se {
        width: 10px;
        height: 10px;
}
}
@media (min-width: 1200px) {
.cropper-point.point-se {
        width: 5px;
        height: 5px;
        opacity: 0.75;
}
}
.cropper-point.point-se:before {
    position: absolute;
    right: -50%;
    bottom: -50%;
    display: block;
    width: 200%;
    height: 200%;
    content: " ";
    opacity: 0;
    background-color: #39f;
}
.cropper-invisible {
    opacity: 0;
}
.cropper-bg {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
}
.cropper-hide {
    position: absolute;
    display: block;
    width: 0;
    height: 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;
}

.img-container {
  padding: 0 0 38px;
  background: #ffffff;
  border-radius: 2px;
}
.img-container .modal-title {
  height: 59px;
  background: #fcfdfe;
  border-radius: 2px;
  font-size: 18px;
  font-weight: bold;
  color: #2c2e33;
  line-height: 59px;
  padding: 0 30px;
}
.img-container .cropper-img-area {
  padding-right: 30px;
}
.img-container .pic-area {
  height: 300px;
  width: 300px;
  margin: 0 30px 14px;
  float: left;
}
.img-container .preview {
  float: left;
  width: 120px;
}
.img-container .preview .previewImg {
  height: 120px;
  margin-bottom: 16px;
  width: 120px;
  overflow: hidden;
  border-radius: 100%;
}
.img-container .preview.not-circle .previewImg {
  border-radius: 0;
}
.img-container .preview p {
  height: 20px;
  font-size: 14px;
  text-align: center;
  font-weight: 400;
  color: #bebebe;
  line-height: 20px;
}
.img-container .operate {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 300px;
  margin-left: 30px;
  position: relative;
}
.img-container .operate .file {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
  z-index: 12;
  width: 60px;
}
.img-container .operate .base-link {
  margin-right: auto;
  height: 20px;
  font-size: 14px;
  font-weight: 500;
  color: #3f6dfe;
  line-height: 20px;
}
.img-container .operate .icon {
  width: 16px;
  height: 16px;
  margin-left: 24px;
  cursor: pointer;
}
.img-container .operate .icon.icon-add {
  margin-left: 0;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAKlBMVEUAAAB0dnZ2dnZ1dnZ1dnZ1dnZ1dnZ2eHh2dnZ3d3d1d3d3d3d1dXV1d3e2HGhtAAAADnRSTlMAfg3y59S+k48vLSusrDOWszUAAABZSURBVAjXY2Bg2BFs2s0ABOyOkzRFCoCMHAUGBqZjQIEDDFwLGHgKGLYoMDAKMDB5MzQygBgMEgyREMZUBiMuQbFEwQXKcAZcCq4Yrh1qIG8BzAqEpXBnAAA0SRYOMV1BFQAAAABJRU5ErkJggg==);
}
.img-container .operate .icon.icon-reduce {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAJ1BMVEUAAAB0dnZ2d3d2dnZ1dnZ1dnZ1dnZ1dXV3d3d3d3d2dnZ3d3dxd3cCoCn7AAAADXRSTlMAfpEN8ufUrC8rvC0tUAAvJQAAAFFJREFUCNdjYGCYlOKmyQAETIHNFqIKQMZyAwYG5iqgQAFImF2BYSpQACgUyaDIAAZCDBkQRhuDM7cgEGwwgTIOmMCl4Irh2uEGwqxAWAp3BgCz3RCrBjhnrQAAAABJRU5ErkJggg==);
}
.img-container .operate .icon.icon-renew {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAQCAMAAADH72RtAAAAS1BMVEUAAAB2d3d2d3d1dnZxcXF1dnZ1dXV8fHx1dnZ1dnZ1dnaAgIB2dnZ2d3d1dnZ2d3d1dnZ1dXWAgIB1dXV2dnZ2dnZ2eHh3d3d7e3ucRupKAAAAGXRSTlMALJJ8DtWrC/7y5wbmvPTz05UIrqKIc1wfshUzdgAAAGdJREFUGNOFkEcOgDAMBN1S6IT+/5ciJ1EkfGGOI7c1KEiuWxwhwA3KQD1jCMhj4jmLyQtkZI3ZkIfKFWPUGb1UIWc6di1hMDi0pgs/5rFduNrJTGV7Q0YsFzY8mRR+2kxSUvH9hvICv30C0eA0hRoAAAAASUVORK5CYII=);
}
.img-container .area {
  margin-top: 42px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.img-container .area .btn {
  width: 118px;
  height: 34px;
  border-radius: 2px;
}
.img-container .area .btn-bake {
  margin-right: 20px;
}

.form-wrap[data-v-1299b7cc] {
  margin-top: 20px;
  padding: 20px;
  width: 600px;
}
.btn-wrap[data-v-1299b7cc] {
  margin: 20px 0;
}

.form-upload-area {
  cursor: pointer;
}