.button {
  width: max-content;
  padding: 8px 12px;
  background-color: #9092984d;
  border-radius: 2px;
  box-shadow: inset 0 0 6px #0003;
  border: 1px solid transparent;
  transition: background-color .25s;
  vertical-align: middle;
  background: #545454;
  color: #fff;
  cursor: pointer;
}

.button:hover {
  background: #fd5000;
}

.button.button__loading {
  opacity: 0.8;
  pointer-events: none;
}

.loading-tips {
  color: #0d6efd;
  font-size: 14px;
  padding: 0;
  margin: 4px 0;
}

.img-pre__container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  z-index: var(--container-zIndex);
  pointer-events: none;
  display: none;
}

.img-pre__container .img-pre__header {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 55px;
  width: 100%;
  padding: 0 calc(25px + (100vw - 100%)) 0 25px;
  background: rgba(0, 0, 0, var(--header-bg-opcity));
  position: absolute;
  z-index: calc(var(--container-zIndex) + 1);
}

.img-pre__container .img-pre__header .img-pre__nums {
  color: #fff;
}

.img-pre__container .img-pre__header .img-pre__button-item {
  outline: none;
  border: none;
  background: none;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  margin-right: 1.5vw;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #fff;
}

.img-pre__container .img-pre__header .img-pre__button-item .bi,
.img-pre__container .img-pre__header .img-pre__button-item svg {
  font-size: 16px;
  width: 16px;
  height: 16px;
}

.img-pre__container .img-pre__header .img-pre__button-item:last-child {
  margin-right: 0;
}

.img-pre__container .img-pre__header button:not(:disabled) {
  cursor: pointer;
}

.img-pre__container .img-pre__header button:not(:disabled)::after {
  content: attr(data-tooltip);
  font-size: 12px;
  position: absolute;
  left: 50%;
  top: 130%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  padding: 3px 7px;
  white-space: nowrap;
  border-radius: 4px;
  display: none;
}

.img-pre__container .img-pre__header button:not(:disabled):hover::after {
  display: inline-block;
}

.img-pre__container .img-pre__header button:not(:disabled):hover {
  background: rgba(0, 0, 0, 0.2);
}

.img-pre__container .img-pre__header button[disabled] {
  opacity: 0.4;
  cursor: not-allowed !important;
}

.img-pre__container .img-pre__content-wrapper {
  height: 100%;
  position: relative;
}

.img-pre__container .img-pre__content-wrapper .img-pre__img-item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  animation-duration: 0.3s;
  will-change: transform, opacity;
  animation-timing-function: ease-in-out;
}

.img-pre__container .img-pre__content-wrapper .img-pre__img-item.slide-left-out {
  animation-name: img-pre_slide-left-hide;
}

.img-pre__container .img-pre__content-wrapper .img-pre__img-item.slide-left-in {
  animation-name: img-pre_slide-left-show;
}

.img-pre__container .img-pre__content-wrapper .img-pre__img-item.slide-right-out {
  animation-name: img-pre_slide-right-hide;
}

.img-pre__container .img-pre__content-wrapper .img-pre__img-item.slide-right-in {
  animation-name: img-pre_slide-right-show;
}

.img-pre__container .img-pre__content-wrapper .img-pre__img-item.loading::after {
  content: '';
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJsb2FkZXItMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCiAgIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogIDxwYXRoIG9wYWNpdHk9IjAuMiIgZmlsbD0iI2NjYyIgZD0iTTIwLjIwMSw1LjE2OWMtOC4yNTQsMC0xNC45NDYsNi42OTItMTQuOTQ2LDE0Ljk0NmMwLDguMjU1LDYuNjkyLDE0Ljk0NiwxNC45NDYsMTQuOTQ2CiAgICBzMTQuOTQ2LTYuNjkxLDE0Ljk0Ni0xNC45NDZDMzUuMTQ2LDExLjg2MSwyOC40NTUsNS4xNjksMjAuMjAxLDUuMTY5eiBNMjAuMjAxLDMxLjc0OWMtNi40MjUsMC0xMS42MzQtNS4yMDgtMTEuNjM0LTExLjYzNAogICAgYzAtNi40MjUsNS4yMDktMTEuNjM0LDExLjYzNC0xMS42MzRjNi40MjUsMCwxMS42MzMsNS4yMDksMTEuNjMzLDExLjYzNEMzMS44MzQsMjYuNTQxLDI2LjYyNiwzMS43NDksMjAuMjAxLDMxLjc0OXoiLz4KICA8cGF0aCBmaWxsPSIjY2NjIiBkPSJNMjYuMDEzLDEwLjA0N2wxLjY1NC0yLjg2NmMtMi4xOTgtMS4yNzItNC43NDMtMi4wMTItNy40NjYtMi4wMTJoMHYzLjMxMmgwCiAgICBDMjIuMzIsOC40ODEsMjQuMzAxLDkuMDU3LDI2LjAxMywxMC4wNDd6Ij4KICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZVR5cGU9InhtbCIKICAgICAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIgogICAgICB0eXBlPSJyb3RhdGUiCiAgICAgIGZyb209IjAgMjAgMjAiCiAgICAgIHRvPSIzNjAgMjAgMjAiCiAgICAgIGR1cj0iMXMiCiAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgICA8L3BhdGg+CiAgPC9zdmc+') no-repeat center center / cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.img-pre__container .img-pre__content-wrapper img {
  cursor: pointer;
  position: absolute;
  transition: all 0.5s;
  will-change: transform;
  transform: translateX(var(--offsetX)) translateY(var(--offsetY)) translateZ(0) scale(var(--scale)) rotate(var(--rotate));
  user-select: none;
}

.img-pre__container #J-img-pre__prev,
.img-pre__container #J-img-pre__next {
  background: none;
  border: none;
  outline: none;
  position: fixed;
  top: 50%;
  color: #f6f6f6;
  cursor: pointer;
  z-index: calc(var(--container-zIndex) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 5px;
  border-radius: 2px;
}

.img-pre__container #J-img-pre__prev .bi,
.img-pre__container #J-img-pre__next .bi {
  font-size: 20px;
  width: 20px;
  height: 20px;
}

.img-pre__container #J-img-pre__prev:hover,
.img-pre__container #J-img-pre__next:hover {
  background: rgba(0, 0, 0, 0.2);
}

.img-pre__container #J-img-pre__prev {
  left: 2%;
}

.img-pre__container #J-img-pre__next {
  right: calc(2% + 100vw - 100%);
}

.img-pre__container .moving {
  transition: none !important;
}

.img-pre__container.show {
  animation-name: img-pre_show;
  pointer-events: auto;
}

.img-pre__container.show .img-pre__header {
  animation-name: img-pre_header-show;
}

.img-pre__container.hide {
  animation-name: img-pre_hide;
}

.img-pre__container.hide .img-pre__header {
  animation-name: img-pre_header-hide;
}

.img-pre__container.hide img.img-pre__animated {
  animation-name: img-pre_header-hide;
}

.img-pre__animated {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes img-pre_show {
  0% {
    background: rgba(0, 0, 0, 0);
  }

  100% {
    background: rgba(0, 0, 0, var(--container-opacity));
  }
}

@keyframes img-pre_hide {
  0% {
    background: rgba(0, 0, 0, var(--container-opacity));
  }

  100% {
    background: rgba(0, 0, 0, 0);
  }
}

@keyframes img-pre_header-show {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes img-pre_header-hide {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes img-pre_slide-left-hide {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(-90%);
    opacity: 0;
  }
}

@keyframes img-pre_slide-left-show {
  0% {
    transform: translateX(90%);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes img-pre_slide-right-hide {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(90%);
    opacity: 0;
  }
}

@keyframes img-pre_slide-right-show {
  0% {
    transform: translateX(-90%);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.section-container {
  margin: 50px auto;
  width: 1200px;
}

@media screen and (max-width: 1024px) {
  .section-container {
    margin: 30px auto;
    width: calc(100vw - 15px);
  }
}

.jackery-comment {
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid #f4f6f6 !important;
  padding: 30px;
}

.loading_more_wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.loading_more_wrapper__loading {
  display: block;
  margin: -30px;
}

.load-more__end:hover {
  background: #545454;;
}
.load-more__end {
  opacity: 0.8;
  cursor: not-allowed;
}

@media screen and (max-width: 1024px) {
  .jackery-comment {
    max-width: 100%;
    padding: 0 10px;
  }
}