CEWall/css/section1.css

.grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
}

.grid__item {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: opacity 0.9s cubic-bezier(0.57, 0.09, 0.105, 1.005);
  transition: opacity 0.9s cubic-bezier(0.57, 0.09, 0.105, 1.005);
  /* background: url(https://vr.njmuseum.com/img/webp/wai.webp) no-repeat center/cover; */
  width: 100%;
  height: 100%;
}
.grid__item.hide:not(.grid__item--selected) {
  opacity: 0;
  -webkit-transition: opacity 0.2s cubic-bezier(0.57, 0.09, 0.105, 1.005);
  transition: opacity 0.2s cubic-bezier(0.57, 0.09, 0.105, 1.005);
}
.grid__item.in {
  opacity: 1 !important;
  -webkit-transition: opacity cubic-bezier(0.51, 0.18, 0.26, 0.895) 0.5s;
  transition: opacity cubic-bezier(0.51, 0.18, 0.26, 0.895) 0.5s;
}
.grid__item.out {
  opacity: 0.2 !important;
}

.pcbody .grid__item:not(.grid__item--selected):hover {
  cursor: pointer;
}
.pcbody .grid__item:not(.grid__item--selected):hover .grid__itemPicture {
  -webkit-transition: all cubic-bezier(0.51, 0.18, 0.26, 0.895) 0.5s;
  transition: all cubic-bezier(0.51, 0.18, 0.26, 0.895) 0.5s;
  -webkit-box-shadow: 0px 5px 9px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 5px 9px 3px rgba(0, 0, 0, 0.2);
}
.pcbody .grid__item:not(.grid__item--selected):hover .grid__itemPicture .shadow {
  opacity: 1;
}
.pcbody .grid__item:not(.grid__item--selected):hover .grid__itemPicture .coverbox {
  pointer-events: all;
}

.wapbody .grid__item:not(.grid__item--selected).active {
  cursor: pointer;
}
.wapbody .grid__item:not(.grid__item--selected).active .grid__itemPicture {
  -webkit-transition: all cubic-bezier(0.51, 0.18, 0.26, 0.895) 0.5s;
  transition: all cubic-bezier(0.51, 0.18, 0.26, 0.895) 0.5s;
  -webkit-box-shadow: 0px 5px 9px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 5px 9px 3px rgba(0, 0, 0, 0.2);
}
.wapbody .grid__item:not(.grid__item--selected).active .grid__itemPicture .shadow {
  opacity: 1;
}
.wapbody .grid__item:not(.grid__item--selected).active.later .grid__itemPicture .coverbox {
  pointer-events: all;
}

.grid__itemCard {
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform cubic-bezier(0.51, 0.18, 0.26, 0.895) 0.9s;
  transition: -webkit-transform cubic-bezier(0.51, 0.18, 0.26, 0.895) 0.9s;
  transition: transform cubic-bezier(0.51, 0.18, 0.26, 0.895) 0.9s;
  transition: transform cubic-bezier(0.51, 0.18, 0.26, 0.895) 0.9s, -webkit-transform cubic-bezier(0.51, 0.18, 0.26, 0.895) 0.9s;
  -webkit-transition: all cubic-bezier(0.51, 0.18, 0.26, 0.895) 0.9s;
  transition: all cubic-bezier(0.51, 0.18, 0.26, 0.895) 0.9s;
}

.showBack {
  -webkit-transform: rotateY(180deg) rotateX(0) !important;
  transform: rotateY(180deg) rotateX(0) !important;
}

.grid__itemBack {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  -webkit-transform: rotateY(180deg) scale(1) translateX(-50%) translateY(-50%);
  transform: rotateY(180deg) scale(1) translateX(-50%) translateY(-50%);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* background: url(https://vr.njmuseum.com/img/webp/nei1.webp) no-repeat center/cover; */
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
}

/* @media screen and (max-aspect-ratio: 80 / 100) and (max-width: 1050px) {
  .grid__itemBack {
    min-height: 56rem;
    min-width: 32rem;
    padding: 5rem 4rem;
  }
}
@media screen and (max-aspect-ratio: 80 / 100) and (max-width: 1050px) and (max-width: 1050px) and (min-width: 600px) and (min-width: 1000px) {
  .grid__itemBack {
    min-width: 36rem;
    padding: 4rem 3rem;
  }
}
@media screen and (max-width: 600px) {
  .grid__itemBack {
    min-height: 40rem;
    min-width: 28rem;
    top: 53%;
    height: 180%;
    padding: 3rem 2.5rem;
  }
} */
.grid__itemPicture {
  width: 100%;
  height: 100%;
  border-radius: 2rem;
  -webkit-box-shadow: 0 0rem 1.5rem transparent;
  box-shadow: 0 0rem 1.5rem transparent;
  -webkit-transition: all 0.9s cubic-bezier(0.435, 0.22, 0.135, 0.95);
  transition: all 0.9s cubic-bezier(0.435, 0.22, 0.135, 0.95);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: block;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: url(../img/nei2.png) no-repeat center/cover;
  background-size: 100% 74%;
  /* clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%); */
}
.grid__itemPicture .shadow {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.9s cubic-bezier(0.435, 0.22, 0.135, 0.95);
  transition: all 0.9s cubic-bezier(0.435, 0.22, 0.135, 0.95);
  z-index: 1;
  background: url(../img/hover.png) no-repeat center/contain;
  background-size: 95% 68%;
  padding: 16% 15%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.grid__itemPicture .shadow .name {
  color: #ffffff;
  text-align: center;
  margin-bottom: 1.5rem;
}
.grid__itemPicture .shadow .name i {
  color: #a3855f;
  font-size: 1rem;
  display: block;
  font-style: normal;
  margin-bottom: 0.5rem;
}
.grid__itemPicture .shadow .name h3 {
  font-size: 1.1rem;
  height: 2em;
  font-weight: normal;
}
.grid__itemPicture .shadow .iconbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.grid__itemPicture .shadow .iconbox .explore,
.grid__itemPicture .shadow .iconbox .threed {
  width: 1.8rem;
  height: 1.8rem;
  background: no-repeat center/contain;
}
.grid__itemPicture .shadow .iconbox .explore:hover,
.grid__itemPicture .shadow .iconbox .threed:hover {
  -webkit-animation: scale 1s linear infinite;
  animation: scale 1s linear infinite;
  cursor: pointer;
}
@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes scale {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.grid__itemPicture .shadow .iconbox .explore {
  background-image: url(https://vr.njmuseum.com/img/webp/explore.webp);
  margin-right: 1rem;
}
.grid__itemPicture .shadow .iconbox .threed {
  background-image: url(https://vr.njmuseum.com/img/webp/threed.webp);
}
.grid__itemPicture .shadow .coverbox {
  position: absolute;
  top: 22%;
  left: 8%;
  width: 84%;
  height: 56%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  pointer-events: none;
}
.grid__itemPicture .shadow .coverbox .left {
  width: 50%;
  height: 100%;
}
.grid__itemPicture .shadow .coverbox .right {
  width: 50%;
  height: 100%;
}
.grid__itemPicture img {
  border-radius: 2rem;
  width: 100%;
  /* height: auto; */
  height: 75%;
  -o-object-fit: contain;
  object-fit: contain;
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.grid__itemPicture.hasurl:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/nei2.gif) no-repeat center/cover;
  opacity: .4;
  background-size: 87% 64%;
}

.grid__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 3.8rem;
  height: 3.8rem;
  background: url(https://vr.njmuseum.com/img/close.png) no-repeat center/2.5rem auto;
  /* -webkit-transform: translateX(1rem);
  -ms-transform: translateX(1rem);
  transform: translateX(1rem); */
  opacity: 0;
  -webkit-transition: opacity 0.9s cubic-bezier(0.57, 0.09, 0.105, 1.005);
  transition: opacity 0.9s cubic-bezier(0.57, 0.09, 0.105, 1.005);
  cursor: pointer;
  z-index: 120;
}

.grid__close img {
  display: none;
}

@media screen and (max-aspect-ratio: 80/100) and (max-width: 1050px) {
  .grid__close {
    top: 2rem;
    right: 2rem;
  }
}
@-webkit-keyframes drag-anim {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    /* background-image: url(/images/cursors/grab@2x.png); */
    background-position: 50% 50%;
    background-size: 60% auto;
  }
  5% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    /* background-image: url(/images/cursors/grabbing@2x.png); */
    background-position: 50% 70%;
    background-size: 45% auto;
  }
  60% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    /* background-image: url(/images/cursors/grabbing@2x.png); */
    background-position: 50% 70%;
    background-size: 45% auto;
  }
  65% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    /* background-image: url(/images/cursors/grab@2x.png); */
    background-position: 50% 50%;
    background-size: 60% auto;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    /* background-image: url(/images/cursors/grab@2x.png); */
    background-position: 50% 50%;
    background-size: 60% auto;
  }
}
@keyframes drag-anim {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    /* background-image: url(/images/cursors/grab@2x.png); */
    background-position: 50% 50%;
    background-size: 60% auto;
  }
  5% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    /* background-image: url(/images/cursors/grabbing@2x.png); */
    background-position: 50% 70%;
    background-size: 45% auto;
  }
  60% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    /* background-image: url(/images/cursors/grabbing@2x.png); */
    background-position: 50% 70%;
    background-size: 45% auto;
  }
  65% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    /* background-image: url(/images/cursors/grab@2x.png); */
    background-position: 50% 50%;
    background-size: 60% auto;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    /* background-image: url(/images/cursors/grab@2x.png); */
    background-position: 50% 50%;
    background-size: 60% auto;
  }
}
.grid {
  -webkit-transform: translateY(30rem);
  transform: translateY(30rem);
  -webkit-transition: -webkit-transform 1.26s cubic-bezier(0.27, 0.71, 0.285, 0.93);
  transition: -webkit-transform 1.26s cubic-bezier(0.27, 0.71, 0.285, 0.93);
  transition: transform 1.26s cubic-bezier(0.27, 0.71, 0.285, 0.93);
  transition: transform 1.26s cubic-bezier(0.27, 0.71, 0.285, 0.93), -webkit-transform 1.26s cubic-bezier(0.27, 0.71, 0.285, 0.93);
}

.grid__item {
  opacity: 0;
}

.grid__item:nth-child(1n) {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.grid__item:nth-child(2n) {
  -webkit-transition-delay: 180ms;
  transition-delay: 180ms;
}

.grid__item:nth-child(3n) {
  -webkit-transition-delay: 360ms;
  transition-delay: 360ms;
}

.grid__item:nth-child(4n) {
  -webkit-transition-delay: 540ms;
  transition-delay: 540ms;
}

.show-grid .grid {
  pointer-events: auto;
  -webkit-transform: translateY(0) scale(1);
  transform: translateY(0) scale(1);
}

.show-grid .grid__item {
  opacity: 1;
}

.show-grid-overlay .grid__close {
  opacity: 1;
}

@media screen and (max-width: 600px) {
  .show-grid-overlay .grid {
    -webkit-transform: translateY(5vh) scale(1);
    transform: translateY(5vh) scale(1);
  }
}
.fade {
  opacity: 0;
  -webkit-transition: opacity 540ms ease-in-out;
  transition: opacity 540ms ease-in-out;
}

.enter .fade,
.enter.fade {
  opacity: 1;
}

.exit .fade,
.exit.fade {
  opacity: 0;
}

.fadeUp {
  opacity: 0;
  -webkit-transition: opacity 720ms ease-in-out, -webkit-transform 1.26s cubic-bezier(0.27, 0.71, 0.285, 0.93);
  transition: opacity 720ms ease-in-out, -webkit-transform 1.26s cubic-bezier(0.27, 0.71, 0.285, 0.93);
  transition: opacity 720ms ease-in-out, transform 1.26s cubic-bezier(0.27, 0.71, 0.285, 0.93);
  transition: opacity 720ms ease-in-out, transform 1.26s cubic-bezier(0.27, 0.71, 0.285, 0.93), -webkit-transform 1.26s cubic-bezier(0.27, 0.71, 0.285, 0.93);
  -webkit-transform: translateY(4rem);
  transform: translateY(4rem);
}

@media screen and (max-width: 600px) {
  .fadeUp {
    -webkit-transform: translateY(2rem);
    transform: translateY(2rem);
  }
}
.enter .fadeUp,
.enter.fadeUp {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.exit .fadeUp,
.exit.fadeUp {
  opacity: 0;
  -webkit-transition: opacity 450ms ease-in-out, -webkit-transform 0.9s cubic-bezier(0.52, 0.05, 0.625, 0.47);
  transition: opacity 450ms ease-in-out, -webkit-transform 0.9s cubic-bezier(0.52, 0.05, 0.625, 0.47);
  transition: opacity 450ms ease-in-out, transform 0.9s cubic-bezier(0.52, 0.05, 0.625, 0.47);
  transition: opacity 450ms ease-in-out, transform 0.9s cubic-bezier(0.52, 0.05, 0.625, 0.47), -webkit-transform 0.9s cubic-bezier(0.52, 0.05, 0.625, 0.47);
  -webkit-transform: translateY(-4rem);
  transform: translateY(-4rem);
}

.maskOut {
  position: relative;
  overflow: hidden;
}

.maskOut > * {
  display: block;
  position: relative;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transform-origin: left center;
  transform-origin: left center;
}

.enter .maskOut > *,
.enter.maskOut > * {
  -webkit-transform: translateY(0) rotate(0);
  transform: translateY(0) rotate(0);
  -webkit-transition: -webkit-transform 1.26s cubic-bezier(0.57, 0.09, 0.105, 1.005);
  transition: -webkit-transform 1.26s cubic-bezier(0.57, 0.09, 0.105, 1.005);
  transition: transform 1.26s cubic-bezier(0.57, 0.09, 0.105, 1.005);
  transition: transform 1.26s cubic-bezier(0.57, 0.09, 0.105, 1.005), -webkit-transform 1.26s cubic-bezier(0.57, 0.09, 0.105, 1.005);
}

.exit .maskOut > *,
.exit.maskOut > * {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: -webkit-transform 540ms cubic-bezier(0.57, 0.09, 0.105, 1.005);
  transition: -webkit-transform 540ms cubic-bezier(0.57, 0.09, 0.105, 1.005);
  transition: transform 540ms cubic-bezier(0.57, 0.09, 0.105, 1.005);
  transition: transform 540ms cubic-bezier(0.57, 0.09, 0.105, 1.005), -webkit-transform 540ms cubic-bezier(0.57, 0.09, 0.105, 1.005);
  -webkit-transition-delay: 0s !important;
  transition-delay: 0s !important;
}

.lineOut {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

.enter .lineOut,
.enter.lineOut {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: opacity 0.9s cubic-bezier(0.57, 0.09, 0.105, 1.005), -webkit-transform 1.26s cubic-bezier(0.57, 0.09, 0.105, 1.005);
  transition: opacity 0.9s cubic-bezier(0.57, 0.09, 0.105, 1.005), -webkit-transform 1.26s cubic-bezier(0.57, 0.09, 0.105, 1.005);
  transition: transform 1.26s cubic-bezier(0.57, 0.09, 0.105, 1.005), opacity 0.9s cubic-bezier(0.57, 0.09, 0.105, 1.005);
  transition: transform 1.26s cubic-bezier(0.57, 0.09, 0.105, 1.005), opacity 0.9s cubic-bezier(0.57, 0.09, 0.105, 1.005), -webkit-transform 1.26s cubic-bezier(0.57, 0.09, 0.105, 1.005);
}

.exit .lineOut,
.exit.lineOut {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: right center;
  transform-origin: right center;
  -webkit-transition: -webkit-transform 720ms cubic-bezier(0.57, 0.09, 0.105, 1.005);
  transition: -webkit-transform 720ms cubic-bezier(0.57, 0.09, 0.105, 1.005);
  transition: transform 720ms cubic-bezier(0.57, 0.09, 0.105, 1.005);
  transition: transform 720ms cubic-bezier(0.57, 0.09, 0.105, 1.005), -webkit-transform 720ms cubic-bezier(0.57, 0.09, 0.105, 1.005);
}

.enter .sa--delay1,
.enter.sa--delay1 {
  -webkit-transition-delay: 180ms;
  transition-delay: 180ms;
}

.exit .sa--delay1,
.exit.sa--delay1 {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.enter .sa--delay2,
.enter.sa--delay2 {
  -webkit-transition-delay: 360ms;
  transition-delay: 360ms;
}

.exit .sa--delay2,
.exit.sa--delay2 {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.enter .sa--delay3,
.enter.sa--delay3 {
  -webkit-transition-delay: 540ms;
  transition-delay: 540ms;
}

.exit .sa--delay3,
.exit.sa--delay3 {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.enter .sa--delay4,
.enter.sa--delay4 {
  -webkit-transition-delay: 720ms;
  transition-delay: 720ms;
}

.exit .sa--delay4,
.exit.sa--delay4 {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.enter .sa--delay5,
.enter.sa--delay5 {
  -webkit-transition-delay: 0.9s;
  transition-delay: 0.9s;
}

.exit .sa--delay5,
.exit.sa--delay5 {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.enter .sa--delay6,
.enter.sa--delay6 {
  -webkit-transition-delay: 1.08s;
  transition-delay: 1.08s;
}

.exit .sa--delay6,
.exit.sa--delay6 {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.enter .sa--delay7,
.enter.sa--delay7 {
  -webkit-transition-delay: 1.26s;
  transition-delay: 1.26s;
}

.exit .sa--delay7,
.exit.sa--delay7 {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.enter .sa--delay8,
.enter.sa--delay8 {
  -webkit-transition-delay: 1.44s;
  transition-delay: 1.44s;
}

.exit .sa--delay8,
.exit.sa--delay8 {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.enter .sa--delay9,
.enter.sa--delay9 {
  -webkit-transition-delay: 1.62s;
  transition-delay: 1.62s;
}

.exit .sa--delay9,
.exit.sa--delay9 {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.gridmove {
  -webkit-animation: gridmove 20s linear infinite;
  animation: gridmove 20s linear infinite;
}

@-webkit-keyframes gridmove {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  20% {
    -webkit-transform: translate(100px, 0);
    transform: translate(100px, 0);
  }
  50% {
    -webkit-transform: translate(100px, 100px);
    transform: translate(100px, 100px);
  }
  75% {
    -webkit-transform: translate(0, 100px);
    transform: translate(0, 100px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes gridmove {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  20% {
    -webkit-transform: translate(100px, 0);
    transform: translate(100px, 0);
  }
  50% {
    -webkit-transform: translate(100px, 100px);
    transform: translate(100px, 100px);
  }
  75% {
    -webkit-transform: translate(0, 100px);
    transform: translate(0, 100px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
.logo {
  position: absolute;
  width: 7rem;
  height: 39.63rem;
  left: 0;
  top: 0;
  z-index: 1;
  background: url(../img/logo.png) no-repeat top center/contain;
}

.timelinewrap, .explorewrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 13, 43, 0.9);
  display: none;
  z-index: 10;
}
.timelinewrap .close, .explorewrap .close {
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  background: url(https://vr.njmuseum.com/img/close.png) no-repeat center/contain;
  cursor: pointer;
}

.explorewrap .wwtype {
  position: absolute;
  left: 2.5rem;
  bottom: 1.5rem;
  margin: 0.8rem 0 2rem;
  font-size: 0;
}
.explorewrap .wwtype li {
  display: inline-block;
  margin: 1rem 0;
  padding: 0.5rem 1.5rem;
  border-radius: 2rem;
  border: 1px solid #756340;
  font-size: 1.2rem;
  cursor: pointer;
  color: #dcdcdc;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  background-color: rgba(24, 44, 81, 0.3);
}
.explorewrap .wwtype li:hover {
  background-color: #756340;
  color: #fff;
}
.explorewrap .wwtype li.colors {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0.5rem 0.75rem;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
.explorewrap .wwtype li.colors i {
  width: 1.5rem;
  border: 1px solid #756340;
  height: 1.5rem;
  border-radius: 50%;
  margin: 0 0.5rem 0;
}
.explorewrap .exploreiframe {
  height: 100%;
}
.explorewrap .exploreiframe iframe {
  width: 100%;
  height: 100%;
}

.timelinewrap .timelineiframe {
  height: 100vh;
}
.timelinewrap .timelineiframe iframe {
  width: 100%;
  height: 100%;
}

.leftbtn {
  position: absolute;
  left: 0;
  bottom: 10px;
  z-index: 1;
}
.leftbtn .icon,
.leftbtn .hidebtnbox > div {
  width: 3rem;
  height: 3rem;
  background: no-repeat center/2.2rem;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}
.leftbtn .icon:hover,
.leftbtn .hidebtnbox > div:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.leftbtn .icon {
  width: 5rem;
  height: 5rem;
  display: block;
  background-image: url(https://vr.njmuseum.com/img/webp/icon_dot.webp);
  background-size: 2rem;
  z-index: 2;
}
.leftbtn.active .hidebtnbox {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  pointer-events: all;
}
.leftbtn .hidebtnbox {
  position: absolute;
  bottom: 2rem;
  left: 1.1rem;
  opacity: 0;
  -webkit-transform: translateY(20%);
  transform: translateY(20%);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  pointer-events: none;
}
.leftbtn .hidebtnbox > div {
  margin-bottom: 0.1rem;
}
.leftbtn .hidebtnbox > div.honor {
  background-image: url(https://vr.njmuseum.com/img/webp/icon_hjry.webp);
}
.leftbtn .hidebtnbox > div.info {
  background-image: url(https://vr.njmuseum.com/img/webp/icon_sm.webp);
}
.leftbtn .hidebtnbox > div.help {
  background-image: url(https://vr.njmuseum.com/img/webp/icon_help.webp);
  margin-bottom: 2rem;
}

.select {
  position: fixed;
  bottom: 5rem;
  right: -6.5rem;
  width: 16.44rem;
  height: 16.44rem;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.select.zuiwaimian {
  z-index: 20;
}
.select .iconbox {
  position: relative;
  z-index: 5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  width: 6.88rem;
  height: 6.88rem;
  padding: 0.8rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  opacity: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  justify-content: center;
}
.select .iconbox .typeicon,
.select .iconbox .timelineicon {
  position: relative;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  background: no-repeat center/contain;
  z-index: 2;
}
.select .iconbox .line {
  height: 4px;
  width: 100%;
  background: url(https://vr.njmuseum.com/img/webp/select-line.webp) no-repeat center/100% 4px;
}
.select .iconbox .typeicon {
  background-image: url(https://vr.njmuseum.com/img/webp/typeicon.webp);
}
.select .iconbox .typeicon:hover, .select .iconbox .typeicon.active {
  background-image: url(https://vr.njmuseum.com/img/webp/typeicon-active.webp);
}
.select .iconbox .typeicon:hover .option {
  right: -7rem;
}
.select .iconbox .typeicon:hover .option li {
  opacity: 1;
}
.select .iconbox .typeicon:hover .option li:nth-child(1) {
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}
.select .iconbox .typeicon:hover .option li:nth-child(2) {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
.select .iconbox .typeicon:hover .option li:nth-child(3) {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
.select .iconbox .typeicon:hover .option li:nth-child(4) {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.select .iconbox .typeicon:hover .option li:nth-child(1) {
  top: -2rem;
  left: 5rem;
}
.select .iconbox .typeicon:hover .option li:nth-child(2) {
  left: -1rem;
  top: 2.7rem;
}
.select .iconbox .typeicon:hover .option li:nth-child(3) {
  left: -1rem;
  top: 9.7rem;
}
.select .iconbox .typeicon:hover .option li:nth-child(4) {
  left: 5rem;
  top: 14.5rem;
}
.select .iconbox .timelineicon {
  background-image: url(https://vr.njmuseum.com/img/timelineicon.png);
}
.select .iconbox .timelineicon:hover, .select .iconbox .timelineicon.active {
  background-image: url(https://vr.njmuseum.com/img/timelineicon-active.png);
}
.select .bg {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 16.44rem;
  height: 16.44rem;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  opacity: 0;
}
.select .bg .bg1,
.select .bg .bg2,
.select .bg .bg3,
.select .bg .bg4 {
  position: absolute;
  width: 100%;
  height: 100%;
  background: no-repeat center/100% auto;
  left: 0;
}
.select .bg .bg1 {
  z-index: 4;
  background-image: url(https://vr.njmuseum.com/img/webp/select-bg1.webp);
}
.select .bg .bg2 {
  z-index: 3;
  background-image: url(https://vr.njmuseum.com/img/webp/select-bg2.webp);
}
.select .bg .bg3 {
  z-index: 2;
  background-image: url(https://vr.njmuseum.com/img/webp/select-bg3.webp);
}
.select .bg .bg4 {
  z-index: 1;
  background-image: url(https://vr.njmuseum.com/img/webp/select-bg4.webp);
}
.select .option {
  z-index: 1;
  position: absolute;
  width: 16.44rem;
  height: 16.44rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  top: -5.5rem;
  right: -16.44rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.select .option li {
  position: absolute;
  width: 3.9rem;
  height: 3.9rem;
  font-size: 1.1rem;
  color: #664d2e;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-lr;
  letter-spacing: -0.1rem;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  top: 38%;
  left: 44%;
  opacity: 0;
}
.select .option li span {
  position: relative;
  z-index: 2;
}
.select .option li::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(https://vr.njmuseum.com/img/webp/option-bg.webp) no-repeat center/contain;
}
.select .option li:hover:before {
  background-image: url(https://vr.njmuseum.com/img/webp/option-bg-hover.webp);
}
.select .option li.active:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6.5rem;
  height: 6.5rem;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: url(https://vr.njmuseum.com/img/webp/option-bg-active.webp) no-repeat center/contain;
  -webkit-animation: optionactive 1.5s linear infinite;
  animation: optionactive 1.5s linear infinite;
}
@-webkit-keyframes optionactive {
  0% {
    width: 6.5rem;
    height: 6.5rem;
  }
  50% {
    width: 5.4rem;
    height: 5.4rem;
  }
  100% {
    width: 6.5rem;
    height: 6.5rem;
  }
}
@keyframes optionactive {
  0% {
    width: 6.5rem;
    height: 6.5rem;
  }
  50% {
    width: 5.4rem;
    height: 5.4rem;
  }
  100% {
    width: 6.5rem;
    height: 6.5rem;
  }
}
.select.active {
  /*     .bg {
    .bg1,
    .bg2,
    .bg3,
    .bg4 {
      width: 16.44rem;
      opacity: 1;
      left: 0rem;
    }
  } */
}
.select.active .iconbox {
  opacity: 1;
}
.select.active .bg {
  opacity: 1;
}
.select.active .bg2,
.select.active .bg3,
.select.active .bg4 {
  -webkit-animation: bgmove 2s linear infinite;
  animation: bgmove 2s linear infinite;
}
@-webkit-keyframes bgmove {
  0% {
    opacity: 0.8;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0.8;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
}
@keyframes bgmove {
  0% {
    opacity: 0.8;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0.8;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
}

.back_btn {
  position: absolute;
  width: 2.8rem;
  height: 2.8rem;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 2002;
  background: url(https://vr.njmuseum.com/img/webp/back_btn.webp) no-repeat center/contain;
  cursor: pointer;
}

/* .twinkle {
  animation: twinkle 5s linear infinite;
  &:nth-child(6n) {
    transition-delay: 0.5s;
  }
  &:nth-child(6n + 1) {
    transition-delay: 0.8s;
    animation-name: twinkle2;
  }
  &:nth-child(6n + 2) {
    transition-delay: 1.2s;
  }
  &:nth-child(6n + 3) {
    transition-delay: 1.5s;
  }
  &:nth-child(6n + 4) {
    transition-delay: 1.9s;
  }
  &:nth-child(6n + 5) {
    animation-name: twinkle2;
    transition-delay: 2.2s;
  }
} 
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes twinkle2 {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
} */
.iframebox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5607843137);
  display: none;
  z-index: 20;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.iframebox iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.page.zuiwaimian {
  z-index: 3;
}

.infobox {
  text-align: center;
  font-size: 1rem;
  line-height: 2;
  padding: 2.5rem 2rem;
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  width: 100%;
  left: 0;
  color: #fff;
  bottom: 0;
  z-index: 9999;
  display: none;
}
.infobox > span {
  display: inline-block;
  vertical-align: middle;
  padding: 0 0.5rem;
  position: relative;
  top: 0.3rem;
}
.infobox > span a {
  display: block;
}
.infobox > span img {
  width: 2rem;
}
.infobox p {
  display: inline-block;
}
.infobox p span {
  padding: 0 0.5rem;
}
.infobox p i {
  font-style: normal;
}

.honorbox {
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  width: 100%;
  left: 0;
  height: 100vh;
  color: #fff;
  top: 0;
  z-index: 9999;
  overflow: hidden;
  display: none;
}
.honorbox .close {
  position: absolute;
  right: 2vh;
  top: 2vh;
  width: 4vh;
  height: 4vh;
  background: url(https://vr.njmuseum.com/img/close.png) no-repeat center/30px;
  cursor: pointer;
  z-index: 1;
}
.honorbox .centerbox {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.honorbox .centerbox .title {
  height: 6vh;
  background: url(https://vr.njmuseum.com/img/honor/webp/title.webp) no-repeat center/contain;
  width: 100%;
  margin-bottom: 6vh;
  margin-top: -10vh;
}
.honorbox .imgbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  width: 100%;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.honorbox .imgbox img {
  margin: 2vh 0;
  max-height: 29vh;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  background: url(https://vr.njmuseum.com/img/webp/indexoverlay.webp) no-repeat center/100% 100%;
  width: 100%;
  height: 100%;
}

.grid__intro {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.grid__introBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 0;
  -webkit-transition: opacity 360ms cubic-bezier(0.57, 0.09, 0.105, 1.005);
  transition: opacity 360ms cubic-bezier(0.57, 0.09, 0.105, 1.005);
}

.grid__introMessage {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
  width: 22.88rem;
  height: 25.94rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  opacity: 0;
  -webkit-transition: opacity 360ms cubic-bezier(0.57, 0.09, 0.105, 1.005), -webkit-transform 1ms 0.9s linear;
  transition: opacity 360ms cubic-bezier(0.57, 0.09, 0.105, 1.005), -webkit-transform 1ms 0.9s linear;
  transition: opacity 360ms cubic-bezier(0.57, 0.09, 0.105, 1.005), transform 1ms 0.9s linear;
  transition: opacity 360ms cubic-bezier(0.57, 0.09, 0.105, 1.005), transform 1ms 0.9s linear, -webkit-transform 1ms 0.9s linear;
}
.grid__introMessage .bg,
.grid__introMessage .bg .bg1,
.grid__introMessage .bg .bg2,
.grid__introMessage .bg .bg3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: no-repeat center/contain;
  opacity: 0;
}
.grid__introMessage .bg {
  z-index: 0;
  opacity: 1;
}
.grid__introMessage .bg .bg1 {
  z-index: 3;
  background-image: url(../img/nei2.png);
}
.grid__introMessage .bg .bg2 {
  z-index: 2;
  /* background-image: url(https://vr.njmuseum.com/img/webp/grid__intro-bg2.webp); */
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}
.grid__introMessage .bg .bg3 {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  /* background-image: url(https://vr.njmuseum.com/img/webp/grid__intro-bg3.webp); */
}

.grid__introAnimation {
  position: relative;
  width: 16rem;
  height: 12rem;
  margin-top: -1rem;
  margin-bottom: -1rem;
  z-index: 1;
}
.grid__introAnimation:after {
  content: "";
  position: absolute;
  top: 0;
  left: -2rem;
  width: 10rem;
  height: 12rem;
  background-image: url(https://vr.njmuseum.com/img/webp/grid__intro-click1.webp);
  background-position: 50% 50%;
  background-size: 60% auto;
  background-repeat: no-repeat;
  -webkit-animation: drag-anim 2.5s infinite cubic-bezier(0.57, 0.09, 0.105, 1.005);
  animation: drag-anim 2.5s infinite cubic-bezier(0.57, 0.09, 0.105, 1.005);
}

.grid__introText {
  position: relative;
  z-index: 1;
  line-height: 1.5;
  color: #a3855f;
  font-size: 1.2rem;
}

@keyframes drag-anim {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    background-image: url(https://vr.njmuseum.com/img/webp/grid__intro-click1.webp);
  }
  5% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    background-image: url(https://vr.njmuseum.com/img/webp/grid__intro-click2.webp);
  }
  60% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    background-image: url(https://vr.njmuseum.com/img/webp/grid__intro-click2.webp);
  }
  65% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    background-image: url(https://vr.njmuseum.com/img/webp/grid__intro-click1.webp);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    background-image: url(https://vr.njmuseum.com/img/webp/grid__intro-click1.webp);
  }
}
.show-intro .grid__introBg {
  opacity: 0.7;
  -webkit-transition: opacity 540ms cubic-bezier(0.57, 0.09, 0.105, 1.005);
  transition: opacity 540ms cubic-bezier(0.57, 0.09, 0.105, 1.005);
}

.show-intro .grid__introMessage {
  opacity: 1;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  -webkit-transition: opacity 540ms cubic-bezier(0.57, 0.09, 0.105, 1.005), -webkit-transform 0.9s cubic-bezier(0.27, 0.71, 0.285, 0.93);
  transition: opacity 540ms cubic-bezier(0.57, 0.09, 0.105, 1.005), -webkit-transform 0.9s cubic-bezier(0.27, 0.71, 0.285, 0.93);
  transition: opacity 540ms cubic-bezier(0.57, 0.09, 0.105, 1.005), transform 0.9s cubic-bezier(0.27, 0.71, 0.285, 0.93);
  transition: opacity 540ms cubic-bezier(0.57, 0.09, 0.105, 1.005), transform 0.9s cubic-bezier(0.27, 0.71, 0.285, 0.93), -webkit-transform 0.9s cubic-bezier(0.27, 0.71, 0.285, 0.93);
}
@-webkit-keyframes bgmove1 {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes bgmove1 {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.show-intro .grid__introMessage .bg .bg1,
.show-intro .grid__introMessage .bg .bg2,
.show-intro .grid__introMessage .bg .bg3 {
  -webkit-animation: bgmove1 0.5s cubic-bezier(0.27, 0.71, 0.285, 0.93) 0.5s forwards;
  animation: bgmove1 0.5s cubic-bezier(0.27, 0.71, 0.285, 0.93) 0.5s forwards;
}
.show-intro .grid__introMessage .bg .bg1 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.show-intro .grid__introMessage .bg .bg2 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.show-intro .grid__introMessage .bg .bg3 {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.wapbody .logo {
  width: 5rem;
  height: 29rem;
}
.wapbody .honorbox .centerbox .title {
  height: 4vh;
  margin-bottom: 2vh;
  margin-top: -5vh;
}
.wapbody .honorbox .centerbox .imgbox {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.wapbody .honorbox .centerbox .imgbox img {
  max-height: 17vh;
  margin: 1vh 2vw;
}
.wapbody .explorewrap .wwtype {
  left: 2%;
  bottom: 3rem;
  margin: 0;
  width: 96%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.wapbody .explorewrap .wwtype li {
  margin: 0.25rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.wapbody .explorewrap .wwtype li.colors i {
  margin: 0 0.3rem;
}
.wapbody .grid__introAnimation::after {
  background-size: 50% auto;
  background-image: url(https://vr.njmuseum.com/img/webp/wap-grid__intro-click1.webp);
  -webkit-animation-name: drag-anim2;
  animation-name: drag-anim2;
}
@-webkit-keyframes drag-anim2 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    background-image: url(https://vr.njmuseum.com/img/webp/wap-grid__intro-click1.webp);
  }
  5% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    background-image: url(https://vr.njmuseum.com/img/webp/wap-grid__intro-click2.webp);
  }
  60% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    background-image: url(https://vr.njmuseum.com/img/webp/wap-grid__intro-click2.webp);
  }
  65% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    background-image: url(https://vr.njmuseum.com/img/webp/wap-grid__intro-click1.webp);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    background-image: url(https://vr.njmuseum.com/img/webp/wap-grid__intro-click1.webp);
  }
}
@keyframes drag-anim2 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    background-image: url(https://vr.njmuseum.com/img/webp/wap-grid__intro-click1.webp);
  }
  5% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    background-image: url(https://vr.njmuseum.com/img/webp/wap-grid__intro-click2.webp);
  }
  60% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    background-image: url(https://vr.njmuseum.com/img/webp/wap-grid__intro-click2.webp);
  }
  65% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    background-image: url(https://vr.njmuseum.com/img/webp/wap-grid__intro-click1.webp);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    background-image: url(https://vr.njmuseum.com/img/webp/wap-grid__intro-click1.webp);
  }
}
.wapbody .infobox p {
  display: block;
}
.wapbody .infobox p i:nth-child(4) {
  display: none;
}