body,html {
	-webkit-tap-highlight-color: transparent
}

.loading .txt,.mask #videoPlay {
	transform: translate(-50%,-50%)
}

.ssBox .ssPop .hbImg,.videoBox {
	opacity: 0
}

body,html {
	height: 100%;
	overflow: hidden
}

body {
	font-family: Sans-serif;
	background-color: #061825;
	-ms-touch-action: none
}

body,dd,dl,h2,h3,p,ul {
	margin: 0
}

dd,dl,ul {
	padding: 0
}

li {
	list-style: none
}

a {
	text-decoration: none
}

img {
	border: none
}

.loading .con,.loading .con .line {
	position: absolute;
	border-radius: 2.5px
}

video {
	object-fit: cover
}

.loading {
	background-color: #0f234c;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10
}

.loading .con {
	font-size: 20px;
	color: #fff;
	bottom: 5%;
	left: 50%;
	margin-left: -25%;
	width: 50%;
	height: 5px;
	background-color: #000;
	display: none
}

.loading .con .line {
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background-color: #fff
}

.load_1,.load_2,.load_3,.loading .txt {
	left: 50%;
	position: absolute
}

.loading .txt {
	font-size: 20px;
	color: #fff;
	top: 70%;
	text-indent: -999em;
	background: url(../i/load_11.png) 50% 50%/contain no-repeat;
	width: 30%;
	height: 20%
}

.load_1 {
	width: 60%;
	margin-left: -30%;
	top: 15%
}

.load_2 {
	width: 50px;
	margin-left: -25px;
	animation: rota_o 1s ease infinite;
	top: 75%
}

.load_3 {
	width: 12%;
	margin-left: -6%;
	top: 32%
}

.myVideo_play {
	position: absolute;
	width: 50px;
	height: 50px;
	right: 10px;
	bottom: 10px;
	display: none;
	z-index: 1000
}

.myVideo_play_box {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	left: 0;
	z-index: 10;
	background-image: url(../i/pos_n.jpg);
	background-size: cover;
	background-position: top center;
	display: none
}

.mask #videoPlay,.myVideo_play_box #androidPlay {
	right: 10px;
	bottom: 10px;
	background-image: url(../i/play.png);
	background-size: contain
}

.myVideo_play_box #androidPlay {
	position: absolute;
	width: 50px;
	height: 50px
}

.videoBox {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden
}

.videoBox .myVideo,.videoBox .myVideo4k {
	height: 126%;
	width: 126%;
	z-index: -1;
	top: -13%;
	left: -13%;
	position: absolute
}

.videoBox .myVideo4k {
	display: none
}

.mask {
	position: absolute;
	z-index: 5;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0)
}

.mask #videoPlay {
	position: absolute;
	width: 50px;
	height: 50px;
	top: 50%;
	left: 50%;
	display: none
}

.videoclose {
	position: absolute;
	right: 40px;
	top: 30px;
	width: 20px;
	z-index: 10;
	display: none
}

.videoback {
	position: absolute;
	left: 20px;
	top: 50%;
	margin-top: -20px;
	width: 34px;
	z-index: 10;
	display: none
}


.tan {
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	display: none;
	position: absolute;
	z-index: 105
}
.tan .tan1 {
	width: 34%;
	bottom:18%;
	right:5%;
	display: none;
	position: absolute;
}
.tan .tan2 {
	width: 34%;
	bottom:18%;
	right:5%;
	display: none;
	position: absolute;
}
.tan .tan3 {
	width: 34%;
	bottom:18%;
	right:5%;
	display: none;
	position: absolute;
}

.end .re,.end .sh {
	position: absolute;
	width: 140px;
	top: 77%;
	filter: brightness(.1);
	left: 50%
}

.end .re {
	margin-left: -183px
}

.end .sh {
	margin-left: 59px
}

.end .pop,.endBox {
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	display: none;
	position: absolute
}

.end .pop {
	background: url(../i/icon.png) top left/20% no-repeat rgba(0,0,0,.7)
}

@media only screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
	body {
		font-family: Sans-serif
	}
}

@media only screen and (device-width:812px) and (device-height:375px) and (-webkit-device-pixel-ratio:3) {
	body {
		font-family: Sans-serif
	}
}

@media only screen and (device-width:414px) and (device-height:896px) and (-webkit-device-pixel-ratio:3) {
	body {
		font-family: Sans-serif
	}
}

@media only screen and (device-width:896px) and (device-height:414px) and (-webkit-device-pixel-ratio:3) {
	body {
		font-family: Sans-serif
	}
}

.endBox {
	background: url(../i/endBg.jpg) 50% 50%/cover no-repeat
}

.endBox .i3 {
	position: absolute;
	width: 30%;
	left: 50%;
	top: 20%;
	transform: translateX(-50%)
}

.endBox .i1,.endBox .i2 {
	position: absolute;
	width: 20%;
	left: 50%;
	top: 75%;
	filter: brightness(.1)
}

.endBox .i1 {
	transform: translateX(-150%)
}

.endBox .i2 {
	transform: translateX(50%)
}

.endBox .sharePop,.vrBox {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
	position: absolute
}

.endBox .sharePop {
	background: url(../i/icon.png) top left no-repeat rgba(0,0,0,.8)
}

.vrBox {
	background-color: rgba(0,0,0,0);
	z-index: 10
}

.vrBox .vrBtn {
	position: absolute;
	width: 50%;
	height: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%)
}

.vrBox #panoBox {
	display: block;
	width: 100%;
	height: 100%
}

.vrBox .close {
	position: absolute;
	top: 2%;
	right: 1%;
	width: 20px;
	z-index: 10
}

.goonBox,.hallBox,.mapBox,.selBox{
	right: 0;
	bottom: 0
}
.selBox .xm {
	right: 15px;
	top:10px;
	color: #fff;
	width: 100px;
	height: 100px;
	font-size: 14px;
	text-align: right;
}
.selBox {
	position: absolute;
	top: 0;
	left: 0;
	background: url(../img/selbg.jpg) no-repeat;
    background-size: cover;
    background-position: top center;
	display: none
}

.selBox .selItem,.selBox .selItem .ma,.selBox .tit {
	left: 50%;
	position: absolute
}

.selBox .tit {
	width: 30%;
	transform: translateX(-50%);
	top: 10%
}



.selBox .selItem .bg {
	display: block;
	width: 100%
}

.goonBox,.hallBox,.mapBox,.selBox  .tx2 {
	display: none
}

.selBox .selItem .ma {
	width: 80%;
	margin-left: -40%;
	top: 10%
}

.selBox .selItem .tx,.selBox .selItem .tx2 {
	position: absolute;
	width: 50%;
	left: 50%;
	margin-left: -25%;
	top: 72%
}

/*.selBox .selItem {
	width: 30%;
	top: 45%;
	transform: translate(-50%,-50%);
	margin-top: 5%
}*/

.selBox .selItem.sel1 {
	width: 21%;
    left: 17%;
    bottom: 0;
}
.selBox .selItem.sel2 {
	width: 12%;
    left: 35%;
    bottom: 5%;
}
.selBox .selItem.sel3 {
	width: 28%;
    left: 50%;
    top: 4%;
}
.selBox .selItem.sel4 {
	width: 23%;
    left: 48%;
    bottom: 12%;
}
.selBox .selItem.sel5 {
	width: 25%;
    left: 73%;
    bottom: 5%;
}
.selBox .point{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

.point,.point::before,.point::after{position: absolute;width: 12px; height: 12px; border-radius: 50%;content: ''; }
        .point::before{animation: scale 2s infinite; }
        .point::after{animation: scale2 2s infinite; }
        @keyframes scale{0%{ transform: scale(1); opacity:.9}100%{ transform: scale(3); opacity: 0;}}
        @keyframes scale2{0%{ transform: scale(1);opacity:.9;}100%{ transform: scale(6);opacity:0;}}
        

        .point,.point::before,.point::after{
        /* 设置颜色 */
        background-color: rgba(255, 255, 255, .9);}
        .point2,.point2::before,.point2::after{
        /* 设置颜色 */
        background-color: rgba(255, 255, 255, .9);}
        .point3,.point3::before,.point3::after{
        /* 设置颜色 */
        background-color:  rgba(255, 255, 255, .9);}
        .point4,.point4::before,.point4::after{
        /* 设置颜色 */
        background-color:  rgba(255, 255, 255, .9);}

        .point5,.point5::before,.point5::after{
        /* 设置颜色 */
        background-color:  rgb(255, 255, 255, .9);
    }



.selBox .xm {
	position: absolute;

}

.hallBox {
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(27,20,14,.83)
}

.hallBox .tt,.hallBox .xb {
	top: 50%;
	transform: translate(-50%,-50%);
	left: 50%;
	width: 20%;
	position: absolute
}

.hallBox .tt {
	margin-top: -8%
}

.hallBox .xb {
	margin-top: 8%
}

.goonBox {
	position: absolute;
	top: 0;
	left: 0;
	background: url(../i/vrBg.jpg) 50% 50%/cover no-repeat
}

.goonBox .bql,.goonBox .jxxb {
	top: 50%;
	transform: translateY(-50%);
	left: 50%;
	width: 20%;
	position: absolute
}

.goonBox .jxxb {
	margin-left: -27%
}

.goonBox .bql {
	margin-left: 7%
}

.mapBox {
	position: absolute;
	top: 0;
	left: 0
}

.mapBox .des {
	position: absolute;
	width: 5%;
	height: 15%
}

.mapBox .des1 {
	top: 22%;
	left: 34%
}

.mapBox .des2 {
	top: 20%;
	left: 39%
}

.mapBox .des3 {
	top: 20%;
	left: 70%
}

.mapBox .cir {
	position: absolute;
	width: 4%;
	transform-origin: bottom center;
	animation: haha 2s infinite
}

.mapBox .zhen,.mapCloseBox .close {
	transform: translate(-50%,-50%);
	position: absolute
}

.mapBox .map1 {
	top: 32%;
	left: 29%;
	animation: haha1 1.5s infinite
}

.mapBox .map2 {
	top: 35%;
	left: 45%;
	animation: haha2 2s infinite
}

.mapBox .map3 {
	top: 30%;
	left: 75%;
	animation: haha3 2.5s infinite
}

.mapBox .com {
	position: absolute;
	font-size: 60px;
	text-indent: -999em;
	width: 20px;
	top: 4%;
	right: 2%
}

.mapBox .popBGG,.mapCloseBox,.qttBox,.ssBox {
	right: 0;
	bottom: 0;
	display: none
}

.mapBox .zhen {
	top: 50%;
	left: 50%;
	height: 100%
}

.mapBox .popBGG {
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,.5)
}

.mapBox .aaaa,.mapBox .bbbb,.mapBox .cccc {
	position: absolute;
	height: 80%;
	left: 50%;
	top: 10%;
	margin-left: -15%;
	display: none
}

.mapCloseBox {
	position: absolute;
	top: 0;
	left: 0
}

.mapCloseBox .close {
	width: .4rem;
	height: .4rem;
	top: 50%;
	left: 50%;
	margin-top: -18.5%;
	margin-left: 17%
}

.qttBox {
	position: absolute;
	top: 0;
	left: 0
}

.qttBox .bql,.qttBox .qtt {
	top: 50%;
	transform: translateY(-50%);
	left: 50%;
	width: 20%;
	position: absolute
}

.qttBox .qtt {
	margin-left: -27%
}

.qttBox .bql {
	margin-left: 7%
}

.ssBox {
	position: absolute;
	top: 0;
	left: 0
}

.ssBox .buse {
	position: absolute;
	width: 40%;
	left: 50%;
	transform: translateX(-50%);
	top: 5%
}

.ssBox .nt1 {
	position: absolute;
	width: 15%;
	left: 8%;
	bottom: 15%
}

.ssBox .nt2,.ssBox .ssPop {
	position: absolute;
	left: 50%
}

.ssBox .nt2 {
	width: 30%;
	top: 12%;
	margin-left: -15%;
	display: none
}

.ssBox .ssPop {
	width: 55%;
	top: 60%;
	transform: translate(-50%,-50%)
}

.ssBox .ssPop .bg {
	display: block;
	width: 100%
}

.ssBox .ssPop .hbImg,.ssBox .ssPop .realTu {
	width: 90%;
	top: 50%;
	transform: translate(-50%,-50%);
	left: 50%;
	position: absolute
}

.ssBox .ssPop .realTu {
	border: 5px solid #d2b682
}

.ssBox .close {
	position: absolute;
	top: 1%;
	right: 1%;
	width: 40px;
	height: 40px
}

.ssBox .btnBox {
	position: absolute;
	width: 50%;
	left: 50%;
	transform: translateX(-50%);
	bottom: 12%;
	overflow: hidden
}

.ssBox .btnBox li {
	width: 18%;
	margin: 0 1%;
	float: left
}

.ssBox .btnBox li img {
	display: block;
	width: 100%
}

.xBox {
	position: absolute;
	top: 6%;
	right: 4%;
	z-index: 10;
	display: none
}

.xBox img {
	width: 20px;
	display: block;
	opacity: .8
}

.k4Box {
	position: absolute;
	z-index: 3;
	right: 0;
	bottom: 0;
	display: none
}

.k4Box ul {
	display: flex;
	border: 1px solid #fff;
	padding: 4px;
	border-radius: .3rem;
	background-color: rgba(255,255,255,.5)
}

.k4Box ul li {
	flex: 1;
	color: #000;
	font-size: .18rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	padding: .05rem .1rem;
	transition: .5s;
	border-radius: .15rem
}

.k4Box ul li.current {
	background-color: rgba(0,0,0,.9);
	border-radius: .12rem;
	color: #fff
}

.k4load {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 2;
	display: none
}

.k4load p {
	font-size: .2rem;
	text-align: center;
	color: #fff;
	background-color: #000;
	padding: .1rem
}

.k4load p span {
	color: #c38044;
	padding: 0 .1rem
}

.ssQbox {
	position: absolute;
	width: 20%;
	top: 50%;
	transform: translateY(-50%);
	right: -50%;
	opacity: 0
}

.ssQbox img {
	display: block;
	width: 100%
}

.controls {
	position: absolute;
	z-index: 100;
	bottom: 0;
	left: 0;
	right: 0
}

.controls .progress {
	position: relative;
	height: 10px;
	top: 0;
	left: 0;
	right: 0;
	background-color: #fff
}

.controls .progress .duration {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0;
	background-color: red
}

.controls .progress .dragI {
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 100%;
	background-color: #000
}

.controls .time {
	position: absolute;
	left: 0;
	bottom: 10px;
	font-size: 14px;
	color: #fff
}

@-moz-keyframes rota_o {
	0%,100% {
		transform: none
	}

	70% {
		transform: rotate(30deg)
	}
}

@-webkit-keyframes rota_o {
	0%,100% {
		transform: none
	}

	70% {
		transform: rotate(30deg)
	}
}

@-o-keyframes rota_o {
	0%,100% {
		transform: none
	}

	70% {
		transform: rotate(30deg)
	}
}

@keyframes rota_o {
	0%,100% {
		transform: none
	}

	70% {
		transform: rotate(30deg)
	}
}

@-moz-keyframes fingerHandle {
	0%,100% {
		transform: none
	}

	70% {
		transform: scale3d(.8,.8,.8) translate(-10px)
	}
}

@-webkit-keyframes fingerHandle {
	0%,100% {
		transform: none
	}

	70% {
		transform: scale3d(.8,.8,.8) translate(-10px)
	}
}

@-o-keyframes fingerHandle {
	0%,100% {
		transform: none
	}

	70% {
		transform: scale3d(.8,.8,.8) translate(-10px)
	}
}

@keyframes fingerHandle {
	0%,100% {
		transform: none
	}

	70% {
		transform: scale3d(.8,.8,.8) translate(-10px)
	}
}

@-moz-keyframes haha {
	0%,100% {
		transform: scale3d(1,1,1)
	}

	70% {
		transform: scale3d(.8,.8,.8)
	}
}

@-webkit-keyframes haha {
	0%,100% {
		transform: scale3d(1,1,1)
	}

	70% {
		transform: scale3d(.8,.8,.8)
	}
}

@-o-keyframes haha {
	0%,100% {
		transform: scale3d(1,1,1)
	}

	70% {
		transform: scale3d(.8,.8,.8)
	}
}

@keyframes haha {
	0%,100% {
		transform: scale3d(1,1,1)
	}

	70% {
		transform: scale3d(.8,.8,.8)
	}
}

@-moz-keyframes haha1 {
	0%,100% {
		transform: rotate(90deg) scale3d(1,1,1) translate(0,0)
	}

	70% {
		transform: rotate(90deg) scale3d(.8,.8,.8) translate(-50%,-50%)
	}
}

@-webkit-keyframes haha1 {
	0%,100% {
		transform: rotate(90deg) scale3d(1,1,1) translate(0,0)
	}

	70% {
		transform: rotate(90deg) scale3d(.8,.8,.8) translate(-50%,-50%)
	}
}

@-o-keyframes haha1 {
	0%,100% {
		transform: rotate(90deg) scale3d(1,1,1) translate(0,0)
	}

	70% {
		transform: rotate(90deg) scale3d(.8,.8,.8) translate(-50%,-50%)
	}
}

@keyframes haha1 {
	0%,100% {
		transform: rotate(90deg) scale3d(1,1,1) translate(0,0)
	}

	70% {
		transform: rotate(90deg) scale3d(.8,.8,.8) translate(-50%,-50%)
	}
}

@-moz-keyframes haha2 {
	0%,100% {
		transform: rotate(0) scale3d(1,1,1) translate(0,0)
	}

	70% {
		transform: rotate(0) scale3d(.8,.8,.8) translate(-50%,-50%)
	}
}

@-webkit-keyframes haha2 {
	0%,100% {
		transform: rotate(0) scale3d(1,1,1) translate(0,0)
	}

	70% {
		transform: rotate(0) scale3d(.8,.8,.8) translate(-50%,-50%)
	}
}

@-o-keyframes haha2 {
	0%,100% {
		transform: rotate(0) scale3d(1,1,1) translate(0,0)
	}

	70% {
		transform: rotate(0) scale3d(.8,.8,.8) translate(-50%,-50%)
	}
}

@keyframes haha2 {
	0%,100% {
		transform: rotate(0) scale3d(1,1,1) translate(0,0)
	}

	70% {
		transform: rotate(0) scale3d(.8,.8,.8) translate(-50%,-50%)
	}
}

@-moz-keyframes haha3 {
	0%,100% {
		transform: rotate(0) scale3d(1,1,1) translate(0,0)
	}

	70% {
		transform: rotate(0) scale3d(.8,.8,.8) translate(-50%,-50%)
	}
}

@-webkit-keyframes haha3 {
	0%,100% {
		transform: rotate(0) scale3d(1,1,1) translate(0,0)
	}

	70% {
		transform: rotate(0) scale3d(.8,.8,.8) translate(-50%,-50%)
	}
}

@-o-keyframes haha3 {
	0%,100% {
		transform: rotate(0) scale3d(1,1,1) translate(0,0)
	}

	70% {
		transform: rotate(0) scale3d(.8,.8,.8) translate(-50%,-50%)
	}
}

@keyframes haha3 {
	0%,100% {
		transform: rotate(0) scale3d(1,1,1) translate(0,0)
	}

	70% {
		transform: rotate(0) scale3d(.8,.8,.8) translate(-50%,-50%)
	}
}

.tmBox {
	position: absolute;
	width: 8%;
	left: 32%;
	right: auto;
	bottom: -4%;
	transform: rotate(90deg);
	transform-origin: 50% 50%
}

.tmBox img {
	width: 100%;
	margin-bottom: 15px;
	margin-left: auto;
	margin-right: auto
}

.tmBox img.a {
	width: 90%
}

.tmBox img.b {
	width: 100%
}

.tmBox img.c {
	width: 50%
}




.caidan {
	position: absolute;
	right:60px;
	top: 10px;
	width: 20%;
	height: auto;
	display: none;
	animation: caidan 2s infinite;
	z-index: 106
}
.candan img {
	width: 100%;

}

@keyframes caidan{0%{ transform: scale(.8); opacity:.7}100%{ transform: scale(1); opacity: 1;}}