CEWall/css/page.css

body {
  overflow: hidden;
}

.section-ww {
  position: relative;
  background: #505050 no-repeat center/cover;
}
.section-ww img {
  opacity: 0;
}
.section-ww .wwbox {
  position: absolute;
  left: 50%;
  top: 50%;
}
.section-ww .wwbox .ww {
  height: 100%;
}
.section-ww .titlebox {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24%;
  font-size: 0;
}
.section-ww .titlebox .title1 {
  position: relative;
  width: 100%;
  -webkit-transition: all 1s 0.8s;
  transition: all 1s 0.8s;
  visibility: hidden;
}
.section-ww .titlebox .title2 {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  visibility: hidden;
  -webkit-transform: translate3d(0, -3%, 0);
          transform: translate3d(0, -3%, 0);
  -webkit-transition: all 1s 1s;
  transition: all 1s 1s;
}
.section-ww .titlebox .name {
  position: relative;
  margin-top: 9%;
  max-width: 100%;
  visibility: hidden;
  -webkit-transform: translate3d(0, -3%, 0);
          transform: translate3d(0, -3%, 0);
  -webkit-transition: all 1s 1.1s;
  transition: all 1s 1.1s;
}
.section-ww.active .tree {
  visibility: visible;
  opacity: 1;
}
.section-ww.active .ewmbox {
  visibility: visible;
  opacity: 1;
}
.section-ww.active .title1 {
  visibility: visible;
  opacity: 1;
}
.section-ww.active .title2 {
  visibility: visible;
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
.section-ww.active .name {
  visibility: visible;
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
.section-ww.down .ww {
  opacity: 1;
  -webkit-animation: down-upout 1s ease-out 0.1s forwards;
          animation: down-upout 1s ease-out 0.1s forwards;
}
.section-ww.active .ww {
  opacity: 0;
  -webkit-animation: activedown-upin 1s ease-out 0.3s forwards;
          animation: activedown-upin 1s ease-out 0.3s forwards;
}
.section-ww.active.up .ww {
  opacity: 0;
  -webkit-animation: activeup-downin 1s ease-out 0.3s forwards;
          animation: activeup-downin 1s ease-out 0.3s forwards;
}
.section-ww.up .ww {
  opacity: 1;
  -webkit-animation: up-downout 1s ease-out 0.3s forwards;
          animation: up-downout 1s ease-out 0.3s forwards;
}

.section-szc {
  background-image: url(https://vr.njmuseum.com/img/szc/webp/bg.webp);
}

.section-xjm {
  background-image: url(https://vr.njmuseum.com/img/xjm/webp/bg.webp);
}

.section-xdm {
  background-image: url(https://vr.njmuseum.com/img/xdm/webp/bg.webp);
}

.section-xfl {
  background-image: url(https://vr.njmuseum.com/img/xfl/webp/bg.webp);
}

.section-sst {
  background-image: url(https://vr.njmuseum.com/img/sst/webp/bg.webp);
}

.section-jcyy {
  background-image: url(https://vr.njmuseum.com/img/jcyy/webp/bg.webp);
}

.section-jz {
  background-image: url(https://vr.njmuseum.com/img/jz/webp/bg.webp);
}

.section-rnsys {
  background-image: url(https://vr.njmuseum.com/img/rnsys/webp/bg.webp);
}

.section-xhjs {
  background-image: url(https://vr.njmuseum.com/img/xhjs/webp/bg.webp);
}

.section-tnd {
  background-image: url(https://vr.njmuseum.com/img/tnd/webp/bg.webp);
}

.section-ft {
  background-image: url(https://vr.njmuseum.com/img/ft/webp/bg.webp);
}

.section-xl {
  background-image: url(https://vr.njmuseum.com/img/xl/webp/bg.webp);
}

.section-dy {
  background-image: url(https://vr.njmuseum.com/img/dy/webp/bg.webp);
}

.section-tyh {
  background-image: url(https://vr.njmuseum.com/img/tyh/webp/bg.webp);
}

.section-mp {
  background-image: url(https://vr.njmuseum.com/img/mp/webp/bg.webp);
}

.section-tld {
  background-image: url(https://vr.njmuseum.com/img/tld/webp/bg.webp);
}

.section-lltgm {
  background-image: url(https://vr.njmuseum.com/img/lltgm/webp/bg.webp);
}

.section-jgyb {
  background-image: url(https://vr.njmuseum.com/img/jgyb/webp/bg.webp);
}

.section-ylwbh {
  background-image: url(https://vr.njmuseum.com/img/ylwbh/webp/bg.webp);
}

.section-mhxxj {
  background-image: url(https://vr.njmuseum.com/img/mhxxj/webp/bg.webp);
}

.section-hylwgt {
  background-image: url(https://vr.njmuseum.com/img/hylwgt/webp/bg.webp);
}

.section-lylwgt {
  background-image: url(https://vr.njmuseum.com/img/lylwgt/webp/bg.webp);
}

.section-mp2 {
  background-image: url(https://vr.njmuseum.com/img/mp2/webp/bg.webp);
}

.section-swllgj {
  background-image: url(https://vr.njmuseum.com/img/swllgj/webp/bg.webp);
}

.section-hyxgg {
  background-image: url(https://vr.njmuseum.com/img/hyxgg/webp/bg.webp);
}

.section-sjhhwmp {
  background-image: url(https://vr.njmuseum.com/img/sjhhwmp/webp/bg.webp);
}

.section-hhwzyp {
  background-image: url(https://vr.njmuseum.com/img/hhwzyp/webp/bg.webp);
}

.section-xl2 {
  background-image: url(https://vr.njmuseum.com/img/xl2/webp/bg.webp);
}

.section-video {
  background: #000 no-repeat center/contain;
}
.section-video.section-video-tnd {
  background-image: url(../video/tnd.webp);
}
.section-video.section-video-yztj {
  background-image: url(../video/yztj.webp);
}
.section-video.section-video-kqax {
  background-image: url(../video/kqax.webp);
}
.section-video.section-video-bh {
  background-image: url(../video/bh.webp);
}
.section-video.section-video-gp {
  background-image: url(../video/gp.webp);
}
.section-video.section-video-nj {
  background-image: url(../video/nj.webp);
}
.section-video.section-video-tyh {
  background-image: url(../video/tyh.webp);
}
.section-video.section-video-yc {
  background-image: url(../video/yc.webp);
}
.section-video.section-video-zh {
  background-image: url(../video/zh.webp);
}
.section-video.section-video-gm {
  background-image: url(../video/gm.webp);
}
.section-video.section-video-sxz {
  background-image: url(../video/sxz.webp);
}

.section-szc .wwbox {
  height: 61vh;
  margin-left: -36%;
  margin-top: -23vh;
  z-index: 1;
}
.section-szc .titlebox {
  margin-left: 10.5%;
  margin-top: -15.5%;
}
.section-szc .titlebox .name {
  position: absolute;
  left: 0%;
  bottom: -12.5%;
}
.section-szc .ewmbox .sys {
  background-image: url(https://vr.njmuseum.com/img/webp/sys-szc.webp);
}

.section-xjm .wwbox {
  height: 82.3vh;
  margin-left: -36%;
  margin-top: -42vh;
  z-index: 1;
}
.section-xjm .titlebox {
  margin-left: 6.5%;
  margin-top: -14.5%;
}
.section-xjm .titlebox .name {
  position: absolute;
  left: 0%;
  bottom: -12.5%;
}
.section-xjm .ewmbox .sys {
  background-image: url(https://vr.njmuseum.com/img/webp/sys-szc.webp);
}

.section-xdm .wwbox {
  height: 89vh;
  margin-left: 2%;
  margin-top: -41vh;
  z-index: 1;
}
.section-xdm .titlebox {
  margin-left: -24.5%;
  margin-top: -14.5%;
}
.section-xdm .titlebox .name {
  position: absolute;
  left: 0%;
  bottom: -12.5%;
}
.section-xdm .ewmbox .sys {
  background-image: url(https://vr.njmuseum.com/img/webp/sys-szc.webp);
}

.section-xfl .wwbox {
  height: 94vh;
  margin-left: -37%;
  margin-top: -44vh;
}
.section-xfl .titlebox {
  margin-left: 7.5%;
  margin-top: -13.5%;
}
.section-xfl .titlebox .name {
  position: absolute;
  left: 0%;
  bottom: -15%;
}
.section-xfl .ewmbox .sys {
  background-image: url(https://vr.njmuseum.com/img/webp/sys-xfl.webp);
}

.section-sst .wwbox {
  height: 85vh;
  margin-left: -24%;
  margin-top: -44vh;
  z-index: 1;
}
.section-sst .titlebox {
  margin-left: 7.5%;
  margin-top: -13.5%;
}
.section-sst .titlebox .name {
  position: absolute;
  left: 0%;
  bottom: -12.5%;
}
.section-sst .ewmbox .sys {
  background-image: url(https://vr.njmuseum.com/img/webp/sys-sst.webp);
}

.section-jcyy .wwbox {
  height: 49.7vh;
  margin-left: -33%;
  margin-top: -6vh;
  z-index: 1;
}
.section-jcyy .titlebox {
  margin-left: 7%;
  margin-top: -16.5%;
}
.section-jcyy .titlebox .name {
  position: absolute;
  left: -11%;
  margin-top: 0;
  max-height: 100%;
}

.section-jz .wwbox {
  height: 73vh;
  margin-left: -12%;
  margin-top: -33vh;
}
.section-jz .titlebox {
  margin-left: -28%;
  margin-top: -14.5%;
}

.section-rnsys .wwbox {
  height: 77vh;
  margin-left: -28%;
  margin-top: -38vh;
}
.section-rnsys .titlebox {
  margin-left: -4%;
  margin-top: -14.5%;
}

.pcbody .section-xhjs .wwbox {
  height: 64vh;
  margin-left: 3%;
  margin-top: -6%;
}
.pcbody .section-xhjs .titlebox {
  margin-left: -31%;
  margin-top: -13%;
}
.pcbody .section-xhjs .name {
  position: absolute !important;
  top: 4%;
  left: 0;
  margin: 0;
}

.section-tnd .wwbox {
  height: 73.7vh;
  margin-left: -29.7%;
  margin-top: -36vh;
}
.section-tnd .titlebox {
  margin-left: 7.3%;
  margin-top: -18.5%;
}

.section-ft .wwbox {
  height: 82.7vh;
  margin-left: 3.3%;
  margin-top: -37vh;
}
.section-ft .titlebox {
  margin-left: -30.7%;
  margin-top: -13.5%;
}
.section-ft .titlebox .name {
  max-width: 110%;
}
.section-ft .titlebox:after {
  content: "";
  position: absolute;
  width: 123%;
  height: 145%;
  top: -30%;
  left: -11%;
  background: url(https://vr.njmuseum.com/img/ft/webp/titlebox.webp) no-repeat center top/100% auto;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 1.2s 1s;
  transition: all 1.2s 1s;
}
.section-ft.active .titlebox:after {
  opacity: 1;
  top: -36%;
  visibility: visible;
}

.section-xl .wwbox {
  height: 73.7vh;
  margin-left: -37.7%;
  margin-top: -28vh;
}
.section-xl .titlebox {
  margin-left: 1.3%;
  margin-top: -10.5%;
}

.section-dy .wwbox {
  height: 62.7vh;
  margin-left: -2.7%;
  margin-top: -32vh;
}
.section-dy .titlebox {
  margin-left: -27.7%;
  margin-top: -13.5%;
}

.section-tyh .wwbox {
  height: 50.7vh;
  right: 41%;
  margin-top: -12vh;
  left: auto;
}
.section-tyh .wwbox .ww {
  position: absolute;
}
.section-tyh .titlebox {
  margin-left: -27.7%;
  margin-top: -14.5%;
}

.section-mp .tree {
  height: 72.7vh;
  left: 0;
  bottom: 8vh;
  visibility: hidden;
  -webkit-transition: all 1s 0.3s;
  transition: all 1s 0.3s;
}
.section-mp .wwbox {
  height: 88.7vh;
  margin-left: -29.7%;
  margin-top: -44vh;
}
.section-mp .titlebox {
  margin-left: -0.7%;
  margin-top: -13.5%;
}

.section-tld .wwbox {
  height: 79vh;
  margin-left: -31.7%;
  margin-top: -21%;
}
.section-tld .titlebox {
  margin-left: -1.7%;
  margin-top: -13.5%;
}

.section-lltgm .wwbox {
  height: 98vh;
  margin-left: -31.7%;
  top: 0;
}
.section-lltgm .titlebox {
  margin-left: 0.3%;
  margin-top: -13.5%;
}
.section-lltgm.active .ww {
  -webkit-animation-name: activeup-downin;
          animation-name: activeup-downin;
}

.section-jgyb .wwbox {
  height: 68vh;
  margin-left: -35.7%;
  margin-top: -13%;
}
.section-jgyb .titlebox {
  margin-left: 3.3%;
  margin-top: -16.5%;
}

.section-ylwbh .wwbox {
  height: 71vh;
  margin-left: -26%;
  top: auto;
  bottom: 0;
}
.section-ylwbh .titlebox {
  margin-left: 1.3%;
  margin-top: -15%;
}
.section-ylwbh .titlebox .name {
  max-width: 110%;
}

.section-mhxxj .wwbox {
  height: 38vh;
  margin-left: -19%;
  z-index: 1;
  margin-top: 1%;
}
.section-mhxxj .titlebox {
  margin-left: -18.5%;
  margin-top: -22%;
  width: 37%;
}

.section-hylwgt .wwbox {
  height: 69vh;
  margin-left: -38%;
  margin-top: -13%;
}
.section-hylwgt .titlebox {
  margin-left: 2.3%;
  margin-top: -12%;
}

.section-lylwgt .wwbox {
  height: 100vh;
  margin-left: -37%;
  top: 0;
}
.section-lylwgt .titlebox {
  margin-left: 3.3%;
  margin-top: -12%;
}

.section-mp2 .wwbox {
  height: 70vh;
  margin-left: -18.7%;
  margin-top: -31vh;
}
.section-mp2 .titlebox {
  margin-left: 2%;
  margin-top: -12%;
}

.section-swllgj .wwbox {
  height: 49vh;
  margin-left: -24.7%;
  top: auto;
  bottom: 6%;
}
.section-swllgj .titlebox {
  margin-left: 2%;
  margin-top: -22%;
}

.section-hyxgg .wwbox {
  height: 96vh;
  margin-left: -43.7%;
  top: 0;
}
.section-hyxgg .titlebox {
  margin-left: 4%;
  margin-top: -12%;
}

.section-sjhhwmp .wwbox {
  height: 70vh;
  margin-left: -5.7%;
  margin-top: -16%;
}
.section-sjhhwmp .titlebox {
  margin-left: -25%;
  margin-top: -13%;
}

.section-hhwzyp .wwbox {
  height: 49vh;
  margin-left: -14.7%;
  top: auto;
  bottom: 0;
}
.section-hhwzyp .titlebox {
  margin-left: 2%;
  margin-top: -20%;
}
.section-hhwzyp .titlebox .name {
  position: absolute;
  top: 0;
  left: -27%;
  margin-top: 0;
}

.section-xl2 .wwbox {
  height: 76vh;
  margin-left: -3%;
  top: auto;
  bottom: 0;
}
.section-xl2 .titlebox {
  margin-left: -30%;
  margin-top: -12%;
}

.ewmbox {
  position: absolute;
  opacity: 0;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 35px;
  height: 35px;
  -webkit-transition: all 1s 0.5s;
  transition: all 1s 0.5s;
}
.ewmbox .sys {
  width: 35px;
  height: 35px;
  background: url(https://vr.njmuseum.com/img/webp/sys.webp) no-repeat center/100% auto;
  cursor: pointer;
}
.ewmbox img {
  position: absolute;
  width: 160px;
  height: 160px;
  opacity: 0;
  top: -160px;
  right: 0;
  -webkit-transition: all 0.5s 0.2s;
  transition: all 0.5s 0.2s;
  visibility: hidden;
}
.ewmbox:hover img {
  top: -175px;
  opacity: 1;
  visibility: visible;
}
.ewmbox.l {
  left: 1.5rem;
}
.ewmbox.l img {
  left: 0;
}
.ewmbox.w .sys {
  background-image: url(https://vr.njmuseum.com/img/webp/sys-w.webp);
}

.wapbody .section-szc {
  background-image: url(../wapimg/szc/bg.webp);
}
.wapbody .section-xjm {
  background-image: url(../wapimg/xjm/bg.webp);
}
.wapbody .section-xdm {
  background-image: url(../wapimg/xdm/bg.webp);
}
.wapbody .section-xfl {
  background-image: url(../wapimg/xfl/bg.webp);
}
.wapbody .section-sst {
  background-image: url(../wapimg/sst/bg.webp);
}
.wapbody .section-jcyy {
  background-image: url(../wapimg/jcyy/bg.webp);
}
.wapbody .section-jz {
  background-image: url(../wapimg/jz/bg.webp);
}
.wapbody .section-rnsys {
  background-image: url(../wapimg/rnsys/bg.webp);
}
.wapbody .section-xhjs {
  background-image: url(../wapimg/xhjs/bg.webp);
}
.wapbody .section-tnd {
  background-image: url(../wapimg/tnd/bg.webp);
}
.wapbody .section-ft {
  background-image: url(../wapimg/ft/bg.webp);
}
.wapbody .section-xl {
  background-image: url(../wapimg/xl/bg.webp);
}
.wapbody .section-dy {
  background-image: url(../wapimg/dy/bg.webp);
}
.wapbody .section-tyh {
  background-image: url(../wapimg/tyh/bg.webp);
}
.wapbody .section-mp {
  background-image: url(../wapimg/mp/bg.webp);
}
.wapbody .section-tld {
  background-image: url(../wapimg/tld/bg.webp);
}
.wapbody .section-lltgm {
  background-image: url(../wapimg/lltgm/bg.webp);
}
.wapbody .section-jgyb {
  background-image: url(../wapimg/jgyb/bg.webp);
}
.wapbody .section-ylwbh {
  background-image: url(../wapimg/ylwbh/bg.webp);
}
.wapbody .section-mhxxj {
  background-image: url(../wapimg/mhxxj/bg.webp);
}
.wapbody .section-hylwgt {
  background-image: url(../wapimg/hylwgt/bg.webp);
}
.wapbody .section-lylwgt {
  background-image: url(../wapimg/lylwgt/bg.webp);
}
.wapbody .section-mp2 {
  background-image: url(../wapimg/mp2/bg.webp);
}
.wapbody .section-swllgj {
  background-image: url(../wapimg/swllgj/bg.webp);
}
.wapbody .section-hyxgg {
  background-image: url(../wapimg/hyxgg/bg.webp);
}
.wapbody .section-sjhhwmp {
  background-image: url(../wapimg/sjhhwmp/bg.webp);
}
.wapbody .section-hhwzyp {
  background-image: url(../wapimg/hhwzyp/bg.webp);
}
.wapbody .section-xl2 {
  background-image: url(../wapimg/xl2/bg.webp);
}
.wapbody .section {
  position: relative;
  overflow: hidden;
}
.wapbody .section-ww .wwbox {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0.5) translateY(20%);
          transform: scale(0.5) translateY(20%);
  -webkit-transition: all 1s 0.7s;
  transition: all 1s 0.7s;
  opacity: 0;
  margin: 0;
}
.wapbody .section-ww .wwbox img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.wapbody .section-ww .name {
  height: 1.4rem;
  width: auto;
  display: block;
  margin: 8rem auto 0;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0;
  -webkit-transform: scale(0.6) translateY(-10%);
          transform: scale(0.6) translateY(-10%);
  -webkit-transition: all 1s 0.7s;
  transition: all 1s 0.7s;
}
.wapbody .section-ww.active .wwbox, .wapbody .section-ww.down .wwbox {
  opacity: 1;
  -webkit-transform: scale(1) translateY(0);
          transform: scale(1) translateY(0);
}
.wapbody .section-ww.active .point, .wapbody .section-ww.down .point {
  opacity: 1;
}
.wapbody .section-ww.active .name, .wapbody .section-ww.down .name {
  opacity: 1;
  -webkit-transform: scale(1) translateY(0);
          transform: scale(1) translateY(0);
}
.wapbody .section-yrzh .point {
  right: 4%;
  top: 52%;
}
.wapbody .section-yrzh .section1-wwbox {
  height: 60vh;
  margin: 4vh 7vw -6vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.wapbody .section-yrzh .section1-wwbox .title2 {
  background-position: top;
  background-size: 80% auto;
}
.wapbody .section-yrzh .logo {
  width: 21.6rem;
  height: 3.6rem;
  margin-bottom: 1.8rem;
}
.wapbody .section-yrzh .txt1 {
  font-size: 2.4rem;
  margin-bottom: 1.2rem;
  letter-spacing: 0.24rem;
}
.wapbody .section-yrzh .txt2 {
  font-size: 1.8rem;
}
.wapbody .section-yrzh .txt3 {
  font-size: 0.9rem;
  letter-spacing: 0.018rem;
}
.wapbody .section-ylwbh .wwbox,
.wapbody .section-hyxgg .wwbox {
  -webkit-transform: scale(1) translateY(20%);
          transform: scale(1) translateY(20%);
}
.wapbody .section-ylwbh img.ww {
  height: auto;
  position: absolute;
  left: 0;
  bottom: 0;
}
.wapbody .section-mhxxj .name,
.wapbody .section-ft .name {
  height: 1.2rem;
}