/* GLOBAL STYLES
-------------------------------------------------- */

html,
body {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: "Helvetica Neue", "Helvetica", "Microsoft YaHei", "宋体", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", "Simsun", "sans-self";
	-webkit-font-smoothing: antialiased;
	background-color: #000;
	font-size: calc(100vw / 7.5);
}

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
em,
img,
strong,
sub,
sup,
tt,
dd,
dl,
dt,
form,
label,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
ul,
li,
p,
a,
section {
	margin: 0;
	padding: 0;
}

input,
select,
textarea {
	vertical-align: middle;
}

img {
	border: 0;
	margin: 0;
	padding: 0;
	display: block;
}

ul,
li {
	list-style-type: none;
}

a {
	blr: expression(this.onFocus=this.blur());
}

* {
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	padding-top: constant(safe-area-inset-top); /*为导航栏+状态栏的高度 88px       */     
	padding-left: constant(safe-area-inset-left); /*如果未竖屏时为0 */               
	padding-right: constant(safe-area-inset-right); /*如果未竖屏时为0 */               
	padding-bottom: constant(safe-area-inset-bottom); /*为底下圆弧的高度 34px */
}

div,
a {
	tap-highlight-color: rgba(0, 0, 0, 0);
	focus-ring-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-focus-ring-color: rgba(0, 0, 0, 0);
	-moz-tap-highlight-color: rgba(0, 0, 0, 0);
	-moz-focus-ring-color: rgba(0, 0, 0, 0);
}

.swiper-container {
	width: 100%;
	height: 100%;
}

#audio-player {
	position: absolute;
	z-index: 999;
	top: 0;
	right: 0;
	padding-top: 3%;
	padding-bottom: 3%;
	padding-left: 5%;
	padding-right: 2%;
	width: 7%;
}

.music_btn {
	width: 100%;
}

.music_btn img {
	width: 100%;
}

.container {
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	max-width: 640px;
	overflow: hidden;
}

.align-v {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	-webkit-box-align: center;
	-webkit-justify-content: center;
	justify-content: center;
}

/**********logo**********/

.logo {
	position: absolute;
	z-index: 666;
	top: 2.5%;
	left: 6%;
	width:26%;
}

.logo>img {
	width: 100%;
}


/** 箭头 **/

.arrow {
	position: absolute;
	z-index: 999;
	bottom: 2%;
	right: 46%;
	width: 8%;
}

.arrow>img {
	width: 100%;
}
/*底部标识*/
.bottom,
.info{
	position: absolute;
	z-index: 100;
	bottom: 0;
	left: 0;
	width: 100%;
}
.info{
	z-index: 200;
	bottom: 5%;
	left: 37%;
	width: 26%;
}
.bottom>img,
.info>img{
	width: 100%;
}

/** p1 **/
.p1-top,
.p1-logo{
	position: absolute;
	z-index: 100;
	top: -10px;
	left: 0;
	width: 100%;
}
.p1-logo{
	z-index: 111;
	top: 12%;
	left: 37%;
	width: 26%;
}

.p1-txt{
	margin: 0 auto;
	width:76%;
}
.p1-txt2{
	margin-top: 1%;
}
.p1-t{
	margin: 0 auto;
	width: 10%;
}
.p1-t1{
	margin-top:5%;
}
.p1-t3{
	position: relative;
	z-index: 888;
	padding-bottom: 1.5rem;
}
.p1-info{
	position: absolute;
	z-index: 777;
	bottom:8%;
	left: 40%;
	width: 20%;
}
.p1-top>img,
.p1-logo>img,
.p1-txt>img,
.p1-t>img,
.p1-info>img{
	width: 100%;
}
/** p2 **/
.p2-txt{
	margin: 0 auto;
	width: 76%;
}
.p2-txt2{
	position: relative;
	z-index: 888;
	padding-bottom:2.5rem;
}
.p2-txt>img{
	width: 100%;
}
.info2{
	bottom: 6%;
}
/** p3 **/
.p3-t,
.p3-txt{
	margin-left: 8%;
	width: 24%;
}
.p3-txt{
	position: relative;
	padding-bottom: 0.8rem;
	margin-left: 18%;
	margin-top:3%;
	width: 61%;
}
.p3-s{
	position: absolute;
	z-index: 777;
	left: 0;
	bottom: 0;
	width: 100%;
}
.p3-t>img,
.p3-txt>img,
.p3-s>img{
	width: 100%;
}
.info3{
	bottom: 6%;
}
.bottom3{
	bottom:7%;
}
/** p4 **/
.p4-txt,
.p4-t,
.p4-map{
	margin-left: 8%;
	width: 84%;
}

.p4-t{
	width: 29%;
}
.p4-txt1{
	margin-top: 8%;
}
.p4-map{
	position: relative;
	z-index: 888;
	margin-top: 12%;
	margin-bottom: 1.9rem;
	width: 84%;
	border: 4px solid #1e9ffd;
	overflow: hidden;
}
.p4-txt>img,
.p4-t>img,
.p4-map>img{
	width: 100%;
}
.info4{
	bottom: 12%;
}
#allmap{
	position: absolute;
	z-index: 111;
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
}
/** p5 **/
.p5-t,
.p5-txt,
.p5-btn{
	margin-left: 8%;
	width: 30%;
}
.p5-txt{
	margin-left: auto;
	margin-right: auto;
	width: 84%;
}
.p5-txt1{
	margin-top: 6%;
}
.p5-btn{
	margin: 0 auto 0.5%;
	width: 66%;
}
.p5-btn1{
	margin-top: 3.5%;
}
.p5-btn3{
	padding-bottom: 2.4rem;
}
.p5-tel{
	position: absolute;
	z-index: 777;
	left: 40%;
	bottom: 10%;
	width: 20%;
}
.p5-t>img,
.p5-txt>img,
.p5-btn img,
.p5-tel img{
	width: 100%;
}
.info5{
	bottom: 18%;
}

@media screen and (min-aspect-ratio: 6/9) {
	
}
@media screen and (max-aspect-ratio: 9/16) {
	.p3-txt{
		padding-bottom: 2rem;
	}
	.p4-map{
		margin-bottom: 3.5rem;
	}
	.p5-btn3{
		padding-bottom: 4rem;
	}
	.p5-btn{
		margin-bottom: 2%;
	}
	.p5-btn1{
		margin-top: 6%;
	}
}

@media screen and (min-width: 1080px) {
	#audio-player {
		right: 38%;
		margin-right: -20px;
		padding-top: 20px;
		padding-right: 20px;
		width: 40px;
	}
	.container {
		max-width:500px;
	}
}

.box100{
	margin: 0 auto;
	width: 100%;
}
.over{
	position: absolute;
	z-index: 111;
	top: 0;
	left: 0;
	width: 100%;
}
.box100>img,
.over>img{
	width: 100%;
}


/**********背景图**********/

.bg {
	width: 100%;
	height: 100%;
	background-image: url(../images/p1-bg.jpg);
	background-size: 100%;
	-webkit-background-size: 100%;
	background-position:center;
	background-repeat: repeat;
}

.bg2 {
	background-image: url(../images/p2-bg.jpg);
}

.bg3 {
	background-image: url(../images/p3-bg.jpg);
}
.bg4 {
	background-image: url(../images/p4-bg.jpg);
}

.bg5 {
	background-image: url(../images/p5-bg.jpg);
}

.wuxian {
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}
.delay-025 {
	-webkit-animation-delay: 0.25s;
	animation-delay: 0.25s;
}
.delay-05 {
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}
.delay-075 {
	-webkit-animation-delay: 0.75s;
	animation-delay: 0.75s;
}
.delay-1 {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
.delay-125 {
	-webkit-animation-delay: 1.25s;
	animation-delay: 1.25s;
}
.delay-15 {
	-webkit-animation-delay: 1.5s;
	animation-delay: 1.5s;
}
.delay-175 {
	-webkit-animation-delay: 1.75s;
	animation-delay: 1.75s;
}
.delay-2 {
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
}
.delay-225 {
	-webkit-animation-delay: 2.25s;
	animation-delay: 2.25s;
}
.delay-25 {
	-webkit-animation-delay: 2.5s;
	animation-delay: 2.5s;
}
.delay-275 {
	-webkit-animation-delay: 2.75s;
	animation-delay: 2.75s;
}
.delay-3 {
	-webkit-animation-delay: 3s;
	animation-delay: 3s;
}
/** 动画 **/

.arrowJT {
	-webkit-animation-name: arrowJT;
	animation-name: arrowJT;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	opacity: 0;
}

@-webkit-keyframes arrowJT {
	0% {
		opacity: 1
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 5vw, 0);
		transform: translate3d(0, 5vw, 0)
	}
}

@keyframes arrowJT{
	0% {
		opacity: 1
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 5vw, 0);
		transform: translate3d(0, 5vw, 0)
	}
}

.quan {
	-webkit-animation-name: quan;
	animation-name: quan;
	animation-duration: 2s;
	-webkit-animation-duration: 2s;
	animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-ms-animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
}

@-webkit-keyframes quan {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes quan {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}