#image-viewer-wrapper {
  background-color: rgba(0,0,0,.8);
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: none;
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 99999;
}
#image-viewer-wrapper * {
  margin: 0;
}
  #image-viewer-inner {
    position: absolute;
    top: 0px;
    left: 0px;
  }
    #image-viewer-image {
      position: relative;
      margin: 0;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    #image-viewer-rank {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
      #image-viewer-rank p {
        position: absolute;
        top: 8%;
        left: 73.8%;
        width: 8%;
        height: 5%;
        text-align: center;
        font-weight: bold;
        overflow: hidden;
        white-space: nowrap;
      }
      #image-viewer-rank p:nth-child( 1) { top: calc( 1 * 7.2% + 0.8%); }
      #image-viewer-rank p:nth-child( 2) { top: calc( 2 * 7.2% + 0.8%); }
      #image-viewer-rank p:nth-child( 3) { top: calc( 3 * 7.2% + 0.8%); }
      #image-viewer-rank p:nth-child( 4) { top: calc( 4 * 7.2% + 0.8%); }
      #image-viewer-rank p:nth-child( 5) { top: calc( 5 * 7.2% + 0.8%); }
      #image-viewer-rank p:nth-child( 6) { top: calc( 6 * 7.2% + 0.8%); }
      #image-viewer-rank p:nth-child( 7) { top: calc( 7 * 7.2% + 0.8%); }
      #image-viewer-rank p:nth-child( 8) { top: calc( 8 * 7.2% + 0.8%); }
      #image-viewer-rank p:nth-child( 9) { top: calc( 9 * 7.2% + 0.8%); }
      #image-viewer-rank p:nth-child(10) { top: calc(10 * 7.2% + 0.8%); }
      #image-viewer-rank p:nth-child(11) { top: calc(11 * 7.2% + 0.8%); }
      #image-viewer-rank p:nth-child(12) { top: calc(12 * 7.2% + 0.8%); }
    #image-viewer-button {
      position: absolute;
      top: 0;
      left: 0;
      white-space: nowrap;
      overflow: hidden;
    }
      #image-viewer-button p {
        position: relative;
        display: inline-block;
        width: 25%;
        box-sizing: border-box;
        background: #FF5722;
        color: #ffffff;
        text-align: center;
        border-left: 1px solid #ffffff;
        cursor: pointer;
        transition: .3s;
      }
      #image-viewer-button p:first-child {
        border: none;
      }
      #image-viewer-button p:hover {
        background: #ff9800;
      }
#footer-notice {
  background-color: #f6f6f6;
  position: fixed;
  width: 100%;
  font-size: 1em;
  height: 3em;
  font-weight: bold;
  left: 0;
  bottom: 0;
  transition: opacity .6s ease;
  text-align: center;
  user-select: none;
  z-index: 9999;
}
#footer-notice p {
  color: #8bc34a;
  line-height: 3em;
  margin: 0;
  padding: 0;
  transition: opacity .6s ease;
  white-space: nowrap;
}
#mask-notice {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(100, 100, 100, .8);
  color: #000000;
  z-index: 999999;
}
  #mask-notice p {
    display: block;
    width: 200px;
    height: 200px;
    text-align: center;
    font-size: 20px;
    color: #ffffff;
  }
  #mask-notice * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  .loader,
  .loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
  }
  .loader {
    margin: 60px auto;
    font-size: 18px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
    border-right: 1.1em solid rgba(255, 255, 255, 0.2);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
    border-left: 1.1em solid #ffffff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
  }
  @-webkit-keyframes load8 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes load8 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
.fix-image-rb {
  right: 0;
  bottom: 50px;
  position: fixed;
  width: 50%;
  cursor: pointer;
  border-radius: 15px 0 0 0;
  z-index: 999;
}