* {
    margin: 0;
    padding: 0;
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
title{
    display: none;
}
html{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
body{
	overflow: hidden;
	font-family: Microsoft YaHei,Arial,Helvetica,sans-serif;
  	color: #333;
  	font-size: 14px;
    width: 100vw;
    height: 100vh;
}
.box {
    width: max-content;
    height: 100vw;
    transform: rotateZ(90deg) translateY(-100%);
    /* transform-origin: 0px 0px; */
    transform-origin: top left;
}

.general {
    position: absolute;
    opacity: 0; 
}

.module {
    height: 100%;
    position: relative;
}

.node1,
.node2,
.node3,
.node4,
.node5 {
    height: 100%;
    position: relative;
    float: left;
}

.node1 .pic1 {
    height: 6%;
    left: 14%;
    bottom: 7%;
}

.node1 .pic2 {
    height: 48%;
    left: 1.8%;
    bottom: 25%;
}

.node1 .pic3 {
    height: 100%;
    left: 34%;
    bottom: 0%;
}
.node1 .pic3-box {
    width: 19%;
    height: 100%;
    left: 34%;
    bottom: 0%;
}
.node1 .pic3-box img{
    width: 100%;
    height: auto;
    display: block;
    /* float: left;
    max-height: 10%; */
    opacity: 0;
}
.node1 .pic3-box .pic3-img1,.node1 .pic3-box .pic3-img9{
    max-height: 20%;
}
.node1 .pic4 {
    height: 91.5%;
    left: 55.3%;
    bottom: 5%;
}
.node1 .pic4-media{
    height: 10%;
    left: 90%;
    bottom: 80%;
    white-space: nowrap;
    z-index: 2;
    cursor: pointer;
}
.node1 .pic4-media img{
	height: 50%;
    vertical-align: middle;
}
.node1 .pic5 {
    height: 100%;
    left: 75%;
    bottom: 0%;
}
.node1 .pic5-gif{
    height: 100%;
    left: 77%;
    bottom: 0%;
}
.node1 .pic5-gift{
	height: 1%;
    left: 90%;
    bottom: 12%;
    white-space: nowrap;
    z-index: 2;
    cursor: pointer;
}
.node1 .pic5-gift img{
	height: 50%;
    vertical-align: middle;
}
.node1 .pic6 {
    height: 20.7%;
    left: 79%;
    bottom: 24%;
}

.node2 .pic1 {
    height: 91.5%;
    left: 1.1%;
    bottom: 5%;
}

.node2 .pic2 {
    height: 100%;
    left: 13%;
    bottom: 0;
}
.node2 .pic2-gif{
    height: 80%;
    left: 15%;
    bottom: 18%;
}
.node2 .pic2-gift{
	height: 10%;
    left: 26%;
    bottom: 12%;
    white-space: nowrap;
    z-index: 2;
    cursor: pointer;
}
.node2 .pic2-gift img{
	height: 50%;
    vertical-align: middle;
}
.node2 .pic3 {
    height: 68%;
    left: 15%;
    bottom: 21%;
}

.node2 .pic4 {
    height: 91.5%;
    left: 33.1%;
    bottom: 5%;
}

.node2 .pic5 {
    height: 100%;
    left: 45%;
    bottom: 0%;
}
.node2 .pic5-gif{
	height: 75%;
    left: 54%;
    bottom: 18%;
    z-index: 2;
}
.node2 .pic5-gift{
	height: 10%;
    left: 61%;
    bottom: 5%;
    white-space: nowrap;
    z-index: 2;
    cursor: pointer;
}
.node2 .pic5-gift img{
	height: 50%;
    vertical-align: middle;
}
.node2 .pic5-media{
    height: 6%;
    left: 63%;
    bottom: 85%;
    white-space: nowrap;
    z-index: 2;
}
.node2 .pic5-media img{
	height: 100%;
    vertical-align: middle;
}
.node2 .pic5-media2{
    height: 6%;
    left: 63%;
    bottom: 74%;
    white-space: nowrap;
    z-index: 2;
}
.node2 .pic5-media2 img{
	height: 100%;
    vertical-align: middle;
}
.node2 .pic6 {
    height: 74.5%;
    left: 61.5%;
    bottom: 10.5%;
}

.node2 .pic7 {
    height: 91.5%;
    left: 64.1%;
    bottom: 5%;
}

.node2 .pic8 {
    height: 100%;
    left: 77.45%;
    bottom: 0%;
}

.node2 .pic9 {
    height: 53%;
    left: 77.45%;
    bottom: 32%;
}

.node2 .pic10 {
    height: 17%;
    left: 83%;
    bottom: 41%;
}

.node2 .pic11 {
    height: 57%;
    left: 97.1%;
    bottom: 19%;
}

.node3 .pic1 {
    height: 91.5%;
    left: 0.8%;
    bottom: 5%;
}

.node3 .pic2 {
    height: 100%;
    left: 12.8%;
    bottom: 0%;
}
.node3 .pic2-media{
    height: 6%;
    left: 23%;
    bottom: 85%;
    white-space: nowrap;
    z-index: 2;
}
.node3 .pic2-media img{
	height: 100%;
    vertical-align: middle;
}
.node3 .pic2-gif{
    height: 100%;
    left: 14%;
    bottom: 0%;
}
.node3 .pic2-gift{
	height: 10%;
    left: 22%;
    bottom: 5%;
    white-space: nowrap;
    z-index: 2;
    cursor: pointer;
}
.node3 .pic2-gift img{
	height: 50%;
    vertical-align: middle;
}
.node3 .pic3 {
    height: 70%;
    left: 13.8%;
    bottom: 20%;
}

.node3 .pic4 {
    height: 91.5%;
    left: 26.4%;
    bottom: 5%;
}

.node3 .pic5 {
    height: 100%;
    left: 38%;
    bottom: 0%;
}
.node3 .pic5-gif{
    height: 58%;
    left: 46%;
    bottom: 55%;
}
.node3 .pic5-gift{
	height: 10%;
    left: 57%;
    bottom: 5%;
    white-space: nowrap;
    z-index: 2;
    cursor: pointer;
}
.node3 .pic5-gift img{
	height: 50%;
    vertical-align: middle;
}
.node3 .pic6 {
    height: 18%;
    left: 51.6%;
    bottom: 71%;
}

.node3 .pic7 {
    height: 91.5%;
    left: 62.2%;
    bottom: 5%;
}

.node3 .pic8 {
    height: 100%;
    left: 75.2%;
    bottom: 0%;
}

.node3 .pic9 {
    height: 56%;
    left: 75.3%;
    bottom: 19%;
}

.node3 .pic10 {
    height: 46%;
    left: 85.3%;
    bottom: 34%;
}

.node3 .pic11 {
    height: 62%;
    left: 91.1%;
    bottom: 27%;
}

.node3 .pic12 {
    height: 58%;
    left: 97.3%;
    bottom: 25%;
}

.node3 .pic13 {
    height: 20.5%;
    left: 84.2%;
    bottom: 1%;
}

.node4 .pic1 {
    height: 91.5%;
    left: 0.8%;
    bottom: 5%;
}

.node4 .pic2 {
    height: 100%;
    left: 13.8%;
    bottom: 0%;
}
.node4 .pic2-media{
    height: 1%;
    left: 30%;
    bottom: 85%;
    white-space: nowrap;
    z-index: 2;
    cursor: pointer;
}
.node4 .pic2-media img{
	height: 50%;
    vertical-align: middle;
}
.node4 .pic2-media2{
    height: 1%;
    left: 30%;
    bottom: 72%;
    white-space: nowrap;
    z-index: 2;
    cursor: pointer;
}
.node4 .pic2-media2 img{
	height: 50%;
    vertical-align: middle;
}
.node4 .pic3 {
    height: 19%;
    left: 14%;
    bottom: 66%;
}

.node4 .pic4 {
    height: 91.5%;
    left: 33.4%;
    bottom: 5%;
}

.node4 .pic5 {
    height: 100%;
    left: 46.5%;
    bottom: 0%;
}
.node4 .pic5-gif{
    height: 66%;
    left: 48%;
    bottom: 0%;
}
.node4 .pic5-gift{
    height: 10%;
    left: 56%;
    bottom: 5%;
    white-space: nowrap;
    z-index: 2;
    cursor: pointer;
}
.node4 .pic5-gift img{
	height: 50%;
    vertical-align: middle;
}
.node4 .pic6 {
    height: 61%;
    left: 56.8%;
    bottom: 18.5%;
}

.node4 .pic7 {
    height: 91.5%;
    left: 59.8%;
    bottom: 5%;
}

.node4 .pic8 {
    height: 100%;
    left: 72.8%;
    bottom: 0%;
}

.node4 .pic9 {
    height: 13%;
    left: 74.3%;
    bottom: 79.5%;
}

.node5 .pic1 {
    height: 91.5%;
    left: 1.8%;
    bottom: 5%;
}

.node5 .pic2 {
    height: 47%;
    left: 27.1%;
    bottom: 34%;
}

.node5 .pic3 {
    height: 100%;
    left: 17.8%;
    bottom: 0%;
}

.node5 .pic4 {
    height: 100%;
    left: 16.8%;
    bottom: 0%;
}

.node5 .pic5 {
    height: 100%;
    left: 26.2%;
    bottom: 0%;
}

.node5 .pic6 {
    height: 68%;
    left: 44%;
    bottom: 12%;
}

.node5 .pic7 {
    height: 100%;
    left: 58%;
    bottom: 0%;
}
.node5 .pic7-gif{
    height: 100%;
    left: 67%;
    bottom: 0%;
}
.node5 .pic7-gift{
    height: 15%;
    left: 84%;
    bottom: 5%;
    white-space: nowrap;
    z-index: 2;
    cursor: pointer;
}
.node5 .pic7-gift img{
	height: 30%;
    vertical-align: middle;
}
.node5 .pic8 {
    height: 20.5%;
    left: 61%;
    bottom: 24%;
}

.inline-fadeIn{
	animation: fadeIn 2s forwards;
}
.node1 .pic3-box .pic3-img1{ 
    animation-delay: 0s;
}
.node1 .pic3-box .pic3-img2{ 
    animation-delay: 0.5s;
}
.node1 .pic3-box .pic3-img3{ 
    animation-delay: 1s;
}
.node1 .pic3-box .pic3-img4{ 
    animation-delay: 1.5s;
}
.node1 .pic3-box .pic3-img5{ 
    animation-delay: 2s;
}
.node1 .pic3-box .pic3-img6{ 
    animation-delay: 2.5s;
}
.node1 .pic3-box .pic3-img7{ 
    animation-delay: 3s;
}
.node1 .pic3-box .pic3-img8{ 
    animation-delay: 3.5s;
}
.node1 .pic3-box .pic3-img9{ 
    animation-delay: 4s;
}

.loading{	
	width: 100vw;
	height: 100vh;
	position: fixed;
    z-index: 9;
    background-color: #fff;
}
.loading-img{
	width: 100px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    transform-origin: 50% 50%;
	animation: spin 2s linear infinite;
}
.loading-tips{
	transform: rotateZ(90deg) translateY(-100%);
    transform-origin: 0px 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
    width: 100px;
    text-align: center;
}
.loading-tips span{
    display: inline-block;
}
.start-video{
	width: 100vw;
	height: 100vh;
	background-color: #000;
	position: fixed;
    z-index: 8;
}
#start{
	transform: rotateZ(90deg) translateY(-100%);
    transform-origin: 0px 0px;
    width: 100vh;
	height: 100vw;
    object-fit: fill;
}
.start-img{
	width: 50px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -125px;
    transform: rotateZ(90deg);
    animation: amplify 2s linear infinite;
}
.end-video{
    position: relative;
    float: left;
    width: max-content;
    height: 100%;
}
.end-video .pic9 {
    height: 78.5%;
    left: 60%;
    bottom: 10%;
}

.end-video .pic9-logo {
    height: 7.5%;
    left: 75%;
    bottom: 83%;
}
.media-box{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    display: none;
}
.media-box video{
    width: 100vh;
    height: 100vw;
    transform: rotateZ(90deg) translateY(-100%);
    transform-origin: 0vh 0px;
    display: none;
}
.close{
    position: absolute;
    bottom: 4vh;
    right: 3vh;
    width: 10vw;
    transform: rotateZ(90deg) translateY(-100%);
    transform-origin: 0vh 0px;
    z-index: 5;
    cursor: pointer;
}
.bgm{
    position: fixed;
    top: 3vh;
    right: 3vh;
    width: 10vw;
    transform: rotateZ(90deg) translateY(-100%);
    transform-origin: 0vh 0px;
    z-index: 5;
}
.bgm1{
    width: 100%;
    height: 100%;
}
.bgm2{
    width: 100%;
    height: 100%;
    display: none;
}
#end{
    /* width: 80vh; */
    height: 80vw;
    object-fit: fill;
    top: 10vw;
    position: absolute;
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
    }
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes amplify {
	0% {
		transform: scale(1) rotateZ(90deg) ;
	}
	50% {
		transform: scale(1.5) rotateZ(90deg);
    }
	100% {
		transform: scale(1) rotateZ(90deg);
    }
}