.snake {
  background-color: #fff;
}
.snake .content {
  min-height: calc(100vh - 64px);
  margin: 25px auto;
  width: 1180px;
  height: auto;
  padding-bottom: 40px;
}
.snake .content .infos .info-item {
  display: flex;
  align-items: baseline;
}
.snake .content .infos .info-item p {
  margin-left: 5px;
}
.snake .content .distribution img {
  width: 100%;
}
.snake .content .items {
  flex-wrap: wrap;
  display: flex;
  margin-top: 15px;
  margin-bottom: 15px;
}
.snake .content .items .item {
  width: 277px;
  height: 235px;
  box-shadow: rgba(51, 51, 51, 0.15) 0px 8px 24px;
  margin-right: 20px;
  margin-bottom: 24px;
  border-radius: 3px;
  position: relative;
  background-color: #fff;
}
.snake .content .items .item .img-wrapper {
  width: 217px;
  height: 190px;
  line-height: 190px;
  margin: 0 auto;
  text-align: center;
}
.snake .content .items .item:nth-child(4n) {
  margin-right: 0px;
}
.snake .content .items .img-size {
  color: #7f8792;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0px 20px;
}
.snake .content .items .ant-image-mask {
  display: none;
}
.snake .content .items img {
  cursor: pointer;
}
.snake .content .first-aid {
  padding-bottom: 10px;
}

.snakes {
  background-color: #fff;
}
.snakes .content {
  min-height: calc(100vh - 64px);
  margin: 25px auto;
  width: 1180px;
  height: auto;
}
.snakes .content .group-name {
  color: rgba(0, 0, 0, 0.85);
  font-size: 18px;
  margin-bottom: 15px;
}
.snakes .content .templates {
  flex-wrap: wrap;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  width: 100%;
  height: auto;
}
.snakes .content .templates .template:nth-child(5n) {
  margin-right: 0px;
}
.snakes .content .templates .template:hover .name {
  color: #575e67;
}
.snakes .content .templates .template {
  margin-right: 20px;
  display: block;
  margin-bottom: 24px;
  background-color: #fff;
  width: 220px;
  position: relative;
  text-decoration: none;
}
.snakes .content .templates .template img {
  width: 100%;
  border-radius: 4px;
}
.snakes .content .templates .template .name {
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.topics {
  background-color: #f6f8f9;
}
.topics .content {
  min-height: calc(100vh - 64px);
  margin: 25px auto;
  width: 1180px;
  height: auto;
  display: flex;
  justify-content: center;
}
.topics .content .group-name {
  color: rgba(0, 0, 0, 0.85);
  font-size: 18px;
  margin-bottom: 15px;
}
.topics .content .items {
  width: 700px;
}
.topics .content .items .item-container {
  margin-bottom: 20px;
  border-radius: 8px;
  background-color: #fff;
}
.topics .content .items .item-container .item {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
.topics .content .items .item-container .info-like {
  display: flex;
  align-items: center;
}
.topics .content .items .item-container .info-like .like {
  background-color: transparent;
  cursor: pointer;
  width: 16px;
  height: 16px;
  color: #9499A0;
  display: flex;
  padding: 5px 20px 5px 5px;
}
.topics .content .items .item-container .info-like .like span {
  line-height: 16px;
}
.topics .content .items .item-container .info-like .like::before {
  --mask-width: 16px;
  -webkit-mask-image: url("/like.svg");
  height: 16px;
  width: 16px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 16px;
  content: '';
  display: block;
  background-color: #9499A0;
  padding-right: 20px;
}
.topics .content .items .item-container .info-like .like:hover::before {
  background-color: #1677ff;
}
.topics .content .items .item-container .info-like .like-on::before {
  background-color: #1677ff;
  -webkit-mask-image: url("/liked.svg");
}
.topics .content .items .item-container .info-like .like:hover {
  color: #1677ff;
}
.topics .content .items .item-container .info-like .dislike {
  background-color: transparent;
  cursor: pointer;
  width: 16px;
  height: 16px;
  color: #9499A0;
  padding: 5px;
}
.topics .content .items .item-container .info-like .dislike::after {
  --mask-width: 16px;
  -webkit-mask-image: url("/dislike.svg");
  height: 16px;
  width: 16px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 16px;
  content: '';
  display: block;
  background-color: #9499A0;
}
.topics .content .items .item-container .info-like .dislike:hover::after {
  background-color: #1677ff;
}
.topics .content .items .item-container .info-like .dislike-on {
  color: #1677ff;
}
.topics .content .items .item-container .info-like .dislike-on::after {
  background-color: #1677ff;
  -webkit-mask-image: url("/disliked.svg");
}
.topics .content .items .item-container .item-info {
  display: flex;
  justify-content: space-between;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 20px;
  padding-top: 15px;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
}
.topics .content .items .item-container .item-info .info a {
  color: #1677ff;
  text-decoration: none;
}
.topics .content .items .item-container .item-info .info-comment {
  display: flex;
  align-items: center;
}
.topics .content .items .item-container .item-info .info-comment .comment {
  background-color: transparent;
  cursor: pointer;
  width: 90px;
  height: 17px;
  color: #9499A0;
  display: flex;
  padding: 5px;
}
.topics .content .items .item-container .item-info .info-comment .comment span {
  line-height: 17px;
}
.topics .content .items .item-container .item-info .info-comment .comment::before {
  --mask-width: 17px;
  -webkit-mask-image: url("/comment.svg");
  height: 17px;
  width: 17px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 17px;
  content: '';
  display: block;
  background-color: #9499A0;
  padding-right: 2px;
}
.topics .content .items .item-container .item-info .info-comment .comment:hover::before {
  background-color: #676a6e;
}
.topics .content .items .item-container .item-info .info-comment .comment:hover {
  color: #676a6e;
}
.topics .content .items .item-container .comment-info {
  padding-left: 100px;
  padding-right: 100px;
}
.topics .content .items .item-container .comment-info .comment-box {
  display: flex;
  padding-bottom: 15px;
}
.topics .content .items .item-container .comment-info .comment-box .user-avatar {
  width: 40px;
  height: 40px;
  padding-right: 10px;
}
.topics .content .items .item-container .comment-info .comment-box .comment-area {
  width: 100%;
  height: 74px;
}
.topics .content .items .item-container .comment-info .comment-box .comment-area .comment-publish {
  float: right;
  margin-top: 10px;
}
.topics .content .items .item-container .comment-info .comments .comment {
  display: flex;
}
.topics .content .items .item-container .comment-info .comments .comment .user-avatar {
  width: 40px;
  height: 40px;
  padding-right: 10px;
}
.topics .content .items .item-container .comment-info .comments .comment .comment-content {
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid #E3E5E7;
  margin-bottom: 15px;
}
.topics .content .items .item-container .comment-info .comments .comment .comment-content .comment-detail {
  display: flex;
  align-items: center;
  position: relative;
}
.topics .content .items .item-container .comment-info .comments .comment .comment-content .comment-detail .time {
  color: #9499A0;
  font-size: 12px;
  padding-right: 20px;
}
.topics .content .items .item-container .comment-info .comments .comment .comment-delete {
  background-color: transparent;
  cursor: pointer;
  width: 16px;
  height: 16px;
  color: #9499A0;
  opacity: 0;
  padding: 5px;
  position: absolute;
  right: 0px;
}
.topics .content .items .item-container .comment-info .comments .comment .comment-delete::after {
  --mask-width: 16px;
  -webkit-mask-image: url("/edit.svg");
  height: 16px;
  width: 16px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 16px;
  content: '';
  display: block;
  background-color: #9499A0;
}
.topics .content .items .item-container .comment-info .comments .comment .comment-delete:hover::after {
  background-color: #676a6e;
}
.topics .content .items .item-container .comment-info .comments .comment:hover .comment-delete {
  opacity: 1;
}
.topics .hidden {
  display: none;
}
.topics #text {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
  min-width: 100px;
}
.topics #text .loading {
  width: 30px;
  height: 30px;
  border: 2px solid #232e3c;
  border-top-color: transparent;
  border-radius: 100%;
  animation: circle infinite 0.75s linear;
}
@keyframes circle {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.topics .end-message {
  padding: 12px 24px;
  opacity: 0;
  text-align: center;
}
.topics .end-message.show {
  bottom: 20px;
  opacity: 1;
}

.contact {
  position: fixed;
  bottom: 30px;
  width: 40px;
  z-index: 9;
  right: 30px;
  bottom: 100px;
}
.contact .go-top {
  position: relative;
  background-image: url("/top.png");
  background-size: 17px auto;
  display: none;
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  border-radius: 20px;
  line-height: 40px;
  text-align: center;
  background-color: #fff;
  background-position: 50%;
  background-repeat: no-repeat;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.contact .wechat {
  position: relative;
  background-image: url("/mini.svg");
  background-size: 24px auto;
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  border-radius: 20px;
  line-height: 40px;
  text-align: center;
  background-color: #fff;
  background-position: 50%;
  background-repeat: no-repeat;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.contact .wechat .qr-code {
  display: block;
  position: absolute;
  width: 160px;
  left: -180px;
  top: -108px;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(51, 51, 51, 0.15);
  z-index: 10;
  background-color: #fff;
  line-height: 1.4;
}
.contact .wechat .qr-code img {
  width: 140px;
  height: 140px;
  margin-bottom: 5px;
}
.contact .wechat .qr-code p {
  letter-spacing: 1px;
  font-size: 14px;
}
.contact .wechat:hover .qr-code {
  display: block;
}

html,
body {
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  margin: 0px;
}
h2,
h3 {
  margin-top: 0;
  margin-bottom: 1em;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
}
p {
  margin-top: 0;
  margin-bottom: 1em;
}
.header {
  -webkit-box-shadow: 0 2px 8px #f0f1f2;
  box-shadow: 0 2px 8px #f0f1f2;
  background-color: #fff;
  border-bottom: 1px solid #eaecef;
}
.header .header-content {
  height: 64px;
}
.header .header-content .logo {
  display: flex;
  align-items: center;
  padding-left: 24px;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.85);
  font-size: 18px;
  line-height: 64px;
  white-space: nowrap;
  text-decoration: none;
}
.header .header-content .logo img {
  width: 32px;
  margin-right: 16px;
}
.header .header-content .navs {
  display: flex;
  align-items: center;
}
.header .header-content .navs .nav {
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  line-height: 64px;
  margin: 0 20px;
}
.header .header-content .navs .nav:hover {
  color: #07c160;
}
.header .header-content .user-info {
  display: flex;
  align-items: center;
  position: relative;
}
.header .header-content .user-info .avatar {
  width: 32px;
  border-radius: 16px;
}
.header .header-content .user-info .vip-icon {
  position: absolute;
  width: 20px;
  top: 35px;
  left: 18px;
}
.header .header-content .login-enter {
  color: #666;
  font-size: 14px;
  line-height: 64px;
  padding-left: 16px;
}
.header .header-content .login-enter:hover {
  color: #07c160;
}

/*!
 * Cropper.js v1.6.2
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2024-04-21T07:43:02.731Z
 */.cropper-container{-webkit-touch-callout:none;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{backface-visibility:hidden;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}
.img-cropper-container {
  width: 472px;
  height: 354px;
}

.img-cropper-preview-container {
  width: 472px;
  height: 300px;
  margin-bottom: 10px;
}

.index {
  background-color: #fff;
}
.index .before-upload .content {
  min-height: calc(100vh - 64px);
  margin: 25px auto;
  width: 1180px;
  height: auto;
}
.index .before-upload .content .info {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  margin-top: 35px;
}
.index .before-upload .content .info img {
  width: 36px;
  height: 36px;
}
.index .before-upload .content .info .name {
  font-size: 28px;
  text-align: center;
  padding-left: 20px;
  line-height: 36px;
}
.index .before-upload .content .desc {
  color: #666;
  font-size: 18px;
  line-height: 30px;
  font-weight: 300;
  margin-bottom: 25px;
  text-align: center;
}
.index .before-upload .content .desc .desc-tips {
  font-size: 14px;
}
.index .before-upload .content .upload-container {
  display: flex;
  justify-content: center;
}
.index .before-upload .content .file-dragging {
  background-color: #3d99f5;
  width: 700px;
  height: 300px;
  border-radius: 3px;
  padding: 12px;
  margin-bottom: 24px;
}
.index .before-upload .content .file-dragging .inner-section {
  border: 2px dashed rgba(0, 0, 0, 0.15);
  background-color: #368adc;
  height: 276px;
  border-radius: 5px;
  cursor: pointer;
}
.index .before-upload .content .file-dragging .inner-section .icon-section {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.index .before-upload .content .file-dragging .inner-section .icon-section img {
  height: 60px;
  width: 96px;
}
.index .before-upload .content .file-dragging .inner-section .button-section {
  display: flex;
  justify-content: center;
  margin: 15px 0px;
}
.index .before-upload .content .file-dragging .inner-section .button-section button {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px 27px;
  border: 0px;
  border-radius: 3px;
  background-color: #fff;
}
.index .before-upload .content .file-dragging .inner-section .button-section button img {
  margin-right: 6px;
  width: 24px;
  height: 24px;
}
.index .before-upload .content .file-dragging .inner-section .text-section {
  color: #ffffff;
  text-align: center;
}
.index .before-upload .content #text {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
  min-width: 100px;
}
.index .before-upload .content #text .loading {
  width: 30px;
  height: 30px;
  border: 2px solid #232e3c;
  border-top-color: transparent;
  border-radius: 100%;
  animation: circle infinite 0.75s linear;
}
@keyframes circle {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.index .file-result {
  margin-top: 80px;
}
.index .file-result .image {
  box-shadow: rgba(51, 51, 51, 0.15) 0px 8px 24px;
  padding: 20px;
  min-height: 400px;
}
.index .file-result .image .title {
  font-size: 18px;
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #6969691a;
}
.index .file-result .image .image-box {
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding: 5px 5px;
  display: flex;
  justify-content: center;
}
.index .file-result .image .image-box img {
  width: 90%;
}
.index .file-result .result {
  box-shadow: rgba(51, 51, 51, 0.15) 0px 8px 24px;
  padding: 20px;
  height: 400px;
}
.index .file-result .result .title {
  font-size: 18px;
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #6969691a;
}
.index .file-result .result .result-box {
  text-align: center;
  margin-bottom: 25px;
  color: #2c3e50;
  font-size: 16px;
}
.index .file-result .result .result-tips {
  margin-top: 55px;
  margin-bottom: 15px;
  color: #2c3e50;
}
.index .file-result .result .result-text {
  min-height: 100px;
  height: 100px;
}
.index .file-result .result .result-text textarea {
  color: #2c3e50;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 300;
}
.index .go-back-start {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.index .go-back-start .go-back {
  cursor: pointer;
  height: 40px;
  padding: 0 20px;
  line-height: 40px;
  border-radius: 50px;
  text-align: center;
  background-color: #222;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  text-decoration: none!important;
  font-size: 14px;
  color: #fff;
  display: flex;
}
.index .go-back-start .go-back img {
  width: 24px;
}
.index .go-back-start .go-back .go-back-text {
  padding-left: 5px;
}
.index .convert-hidden {
  display: none;
}
.snake-video-modal .video-container {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  background: #000;
}
.snake-video-modal .fixed-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.snake-video-frame-modal .img-wrapper {
  width: 400px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  background-color: #f0f0f0;
  margin-bottom: 20px;
  margin-left: 156px;
}
.snake-video-frame-modal .img-wrapper img {
  max-width: 100%;
  max-height: 100%;
}
.snake-video-frame-modal .video-images {
  display: flex;
  margin: 10px 6px 10px;
}
.snake-video-frame-modal .ant-slider-handle {
  cursor: pointer;
  width: 12px;
  height: 64px;
  background-image: url(/video_image.png);
  box-sizing: border-box;
  background-size: cover;
  border-radius: 4px;
  border: none;
  margin-top: 0px;
  top: -72px;
}
.snake-video-frame-modal .ant-slider-handle::after {
  content: none;
}
.snake-video-frame-modal .ant-slider {
  width: 700px;
}
.snake-video-frame-modal .ant-slider-rail {
  display: none;
}
.snake-video-frame-modal .ant-slider-track {
  display: none;
}
.snake-video-frame-modal .ant-slider-handle:focus {
  box-shadow: none;
}
.snake-result-modal .snake-result-container {
  display: flex;
  justify-content: space-between;
}
.snake-result-modal .snake-result-container .sync-topic {
  margin-top: 10px;
  font-size: 12px;
  color: #9499A0;
}
.snake-result-modal img {
  width: 70px;
}

.img-cropper-topic-container {
  position: relative;
}
.img-cropper-topic-container .ant-image {
  width: 500px;
  height: 400px;
  background-color: #f0f0f0;
}
.img-cropper-topic-container .ant-image .ant-image-mask {
  display: none;
}
.img-cropper-topic-container .image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}
.img-cropper-topic-container .crop-box {
  position: absolute;
  border: 1px solid #39f;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.img-cropper-topic-container .crop-box .control-parent-point {
  position: absolute;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}
.img-cropper-topic-container .crop-box .control-parent-point.top-left {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  cursor: nwse-resize;
}
.img-cropper-topic-container .crop-box .control-parent-point.top-right {
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}
.img-cropper-topic-container .crop-box .control-parent-point.bottom-left {
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
  cursor: nesw-resize;
}
.img-cropper-topic-container .crop-box .control-parent-point.bottom-right {
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%);
  cursor: nwse-resize;
}
.img-cropper-topic-container .crop-box .control-parent-point.top {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: ns-resize;
}
.img-cropper-topic-container .crop-box .control-parent-point.bottom {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  cursor: ns-resize;
}
.img-cropper-topic-container .crop-box .control-parent-point.left {
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: ew-resize;
}
.img-cropper-topic-container .crop-box .control-parent-point.right {
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  cursor: ew-resize;
}
.img-cropper-topic-container .crop-box .control-point {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #39f;
  border: 1px solid #39f;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}
.img-cropper-topic-container .crop-box .control-point.top-left {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: nwse-resize;
}
.img-cropper-topic-container .crop-box .control-point.top-right {
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}
.img-cropper-topic-container .crop-box .control-point.bottom-left {
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  cursor: nesw-resize;
}
.img-cropper-topic-container .crop-box .control-point.bottom-right {
  bottom: 50%;
  right: 50%;
  transform: translate(50%, 50%);
  cursor: nwse-resize;
}
.img-cropper-topic-container .crop-box .control-point.top {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: ns-resize;
}
.img-cropper-topic-container .crop-box .control-point.bottom {
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  cursor: ns-resize;
}
.img-cropper-topic-container .crop-box .control-point.left {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: ew-resize;
}
.img-cropper-topic-container .crop-box .control-point.right {
  right: 50%;
  top: 50%;
  transform: translate(50%, -50%);
  cursor: ew-resize;
}

.login {
  height: 100vh;
  background-color: #f0f3f7;
}
.login .content {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-top: 80px;
}
.login .content .title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 4px;
  margin-bottom: 52px;
}
.login .content .info {
  margin: 0 auto;
  width: 416px;
  height: 350px;
  background-color: #fff;
  color: #777;
  padding: 20px 40px 32px 40px;
  border-radius: 2px;
}
.login .content .info .code-login img {
  height: 200px;
}
.login .content .info .code-login .refresh {
  cursor: pointer;
}
.login .content .info .code-login > div {
  margin-top: 24px;
  margin-bottom: 10px;
}
.login .content .info .code-login > div p {
  font-size: 14px;
  margin-bottom: 4px;
}