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; }