@charset "utf-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
}
* { box-sizing:border-box; }
html{ font-size:625%;height:100%;}
body{ font-family:苹方,'PingFangSC-Regular','PingFang SC','Helvetica Neue','Helvetica',STHeitiSC-Light,Arial,
sans-serif,"san francisco",HelveticaNeue-Light,"Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB",
"Hiragino Sans GB W3","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif; -webkit-text-size-adjust:none;
    font-size:.16rem; min-width:320px; background:#1d212d; color:#282828 ; height:100%;position: relative;}
h1,h2,h3,h4,h5,h6{ font-weight:normal; font-size:.14rem;}
form{display:inline}
ul,ol{list-style:none}
a{text-decoration:none; color:#666; font-size:.12rem;}
a:hover, a:active, a:focus{text-decoration:none;}
ins { text-decoration:none; }
em , i { font-style:normal; }
img{vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;}
button,input,textarea{ border-radius: 0; vertical-align:middle;outline:none;border:none;-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;}
textarea{resize:none}
button,input[type="button"],input[type="reset"],input[type="submit"] {cursor:pointer;-webkit-appearance:button;-moz-appearance:button}
input:focus:-moz-placeholder,input:focus::-webkit-input-placeholder {color:transparent}
button::-moz-focus-inner,input::-moz-focus-inner { padding:0; border:0}
input::-webkit-outer-spin-button , input::-webkit-inner-spin-button {-webkit-appearance:none;}
table { border-collapse:collapse; border-spacing:0}
.clearfix:after { content: " ";display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }

.ellipsis{white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}   /*单行省略号*/
.two-ellipsis { display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow:hidden;} /*2行省略号*/
.fl{float: left;	}
.fr{float: right;}
.show{display: block;}
.hide{display: none;}

html,body{
	position: relative;
	width: 100%;
	background: #fff;
	margin: 0 auto;
}
.wrap{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.kv-page{
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color:#fff;
	background-image:url(../public/img/kv.gif) ;
	background-size:cover ;
	background-repeat:no-repeat;
	background-position:center bottom;
	z-index: 99;
}
.kv-page.uphide{
	animation: uphide 0.5s 1 linear;
	-webkit-animation: uphide 0.5s 1 linear;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}
@keyframes uphide{
	from{
		transform: translateY(0);
		-webkit-transform: translateY(0);
	}
	to{
		transform: translateY(-100vh);
		-webkit-transform: translateY(-100vh);
	}
}
@-webkit-keyframes uphide{
	from{
		transform: translateY(0);
		-webkit-transform: translateY(0);
	}
	to{
		transform: translateY(-100vh);
		-webkit-transform: translateY(-100vh);
	}
}

.kv-page .kv-tit{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5.4rem;
	height: 5.7rem;
	background-image:url(../public/img/kv-title1.png) ;
	background-size:100% 100%;
	margin-left: -2.7rem;
	margin-top: -3rem;
	animation: showKvTit 1s 1 linear ;
	-webkit-animation: showKvTit 1s 1 linear ;
	animation-fill-mode: backwards;
	-webkit-animation-fill-mode: backwards;
}
@-webkit-keyframes showKvTit{
	from{
		transform: scale3d(1.1,1.1,1.1);
		-webkit-transform: scale3d(1.1,1.1,1.1);
		top: 48%;
	}
	to{
		top: 50%;
		transform: scale3d(1,1,1);
		-webkit-transform: scale3d(1,1,1);
	}
}
@keyframes showKvTit{
	from{
		transform: scale3d(1.1,1.1,1.1);
		-webkit-transform: scale3d(1.1,1.1,1.1);
		top: 48%;
	}
	to{
		top: 50%;
		transform: scale3d(1,1,1);
		-webkit-transform: scale3d(1,1,1);
	}
}
.map-page{
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
.scroll-wrap{
	position: relative;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	overflow-x:hidden ;
	/*-webkit-overflow-scrolling: touch;*/
	overflow-style: none;
	-ms-overflow-style: none; /* IE 10+ */
	scrollbar-width: none; /* firefox */
	-ms-overflow-style: none;
	z-index: 2;
}
.scroll-wrap::-webkit-scrollbar {
  display: none; 
}
.scroll-wrap .scroll-con{
	position: relative;
	width: 100%;
	height: 42000px;
	z-index: 8888;
}

.map-con{
	position: absolute;
	left: 0;
	top: 0;
	width: 2300px;
	height: 2300px;
	background-image:url(../public/images/bg2.jpg) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	z-index: 8;
	pointer-events: none;
}
.map-con .city-line{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image:url(../public/images/cityline.svg) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	z-index: 8;
}
.map-con .city-name{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image:url(../public/images/cityname.svg) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	z-index: 58;
}
.map-con .city-dot{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image:url(../public/images/citydot.svg) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	z-index: 58;
}
.map-con .boxxy{
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	z-index: 888;
	opacity: 0;
}
.line-wrap{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 58;
}
.line-wrap svg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.map-con .stop-wrap{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 78;
	width: 100%;
	height: 100%;
}
.stop-wrap .stop{
	position: absolute;
	width: 60px;
	height: 60px;
	background-image:url(../public/images/stop-icon.svg) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	animation: hintCli infinite 1s linear;
	display: none;
	pointer-events: auto;
}
@keyframes hintCli{
	0%{
		transform: scale3d(1,1,1);
		-webkit-transform: scale3d(1,1,1);
	}
	50%{
		transform: scale3d(0.8,0.8,0.8);
		-webkit-transform: scale3d(0.8,0.8,0.8);
	}
	100%{
		transform: scale3d(1,1,1);
		-webkit-transform: scale3d(1,1,1);
	}
}
@-webkit-keyframes hintCli{
	0%{
		transform: scale3d(1,1,1);
		-webkit-transform: scale3d(1,1,1);
	}
	50%{
		transform: scale3d(0.8,0.8,0.8);
		-webkit-transform: scale3d(0.8,0.8,0.8);
	}
	100%{
		transform: scale3d(1,1,1);
		-webkit-transform: scale3d(1,1,1);
	}
}
/*个减12*/
.stop-wrap .stop.stop1{
	left: 856px;
	top: 276px;
}
.stop-wrap .stop.stop2{
	left: 862px;
	top: 1196px;
}
.stop-wrap .stop.stop3{
	left: 714px;
	top: 1332px;
}
.stop-wrap .stop.stop4{
	left: 1400px;
	top: 681px;
}
.stop-wrap .stop.stop5{
	left: 732px;
	top: 552px;
}
.stop-wrap .stop.stop6{
	left: 1040px;
	top: 588px;
}
.stop-wrap .stop.stop7{
	left: 1612px;
	top: 870px;
}
.stop-wrap .stop.stop8{
	left: 1344px;
	top: 1214px;
}
.stop-wrap .stop.stop9{
	left: 1110px;
	top: 300px;
}
.stop-wrap .stop.stop10{
	left: 1268px;
	top: 408px;
}
.stop-wrap .stop.stop11{
	left: 540px;
	top: 476px;
}
.stop-wrap .stop.stop12{
	left: 536px;
	top: 1083px;
}
.stop-wrap .stop.stop13{
	left: 510px;
	top: 1277px;
}
.stop-wrap .stop.stop14{
	left: 402px;
	top: 1485px;
}
.stop-wrap .stop.stop15{
	left: 935px;
	top: 1761px;
}




.video-wrap{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9;
	background: rgba(0,0,0,0.3);
	display: none;
	pointer-events: none;
}


.video-wrap .video-con{
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 4.22rem;
	margin-top: -2.11rem;
	z-index: 8;
	transform: translateY(0%);
	-webkit-transform: translateY(0%);
	pointer-events: auto;
}
.video-con.upshow{
	animation: upshow 0.2s 1 linear;
	-webkit-animation: upshow 0.2s 1 linear;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}
@keyframes upshow{
	from{
		transform: translateY(0%) scale3d(0.9,0.9,0.9);
		-webkit-transform: translateY(0%)  scale3d(0.9,0.9,0.9);
	}
	to{
		transform: translateY(-10%)  scale3d(1,1,1);
		-webkit-transform: translateY(-10%)  scale3d(1,1,1);
	}
}
@-webkit-keyframes upshow{
	from{
		transform: translateY(0%) scale3d(0.9,0.9,0.9);
		-webkit-transform: translateY(0%)  scale3d(0.9,0.9,0.9);
	}
	to{
		transform: translateY(-10%)  scale3d(1,1,1);
		-webkit-transform: translateY(-10%)  scale3d(1,1,1);
	}
}
.video-wrap .poster{
	position: relative;
	width: 100%;
	height: 100%;
	background-size:cover;
	background-repeat:no-repeat ;
}
.video-wrap .poster:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.8rem;
  height: 0.8rem;
  background-image: url(../public/img/play-icon.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-left: -0.4rem;
  margin-top: -0.4rem;
}
.video-wrap #video {
  width: 7.5rem;
  height: 4.22rem!important;
  display: none;
}

.wrap .list-icon{
	position: absolute;
	top: 0.08rem;
	right: 0.08rem;
	width: 0.8rem;
	height: 0.8rem;
	background-image:url(../public/images/list.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	z-index: 998;
}
.list-page{
	position: fixed;
	left: 108%;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 888888;
	background: #f4f3ef;
	transform: translateX(0);
	-webkit-transform: translateX(0);
	transition: all 0.58s; 
	-webkit-transition: all 0.58s; 
}
.list-page.listshow{
	transform: translateX(-108%);
	-webkit-transform: translateX(-108%);
}


.list-page .list-container{
	position: relative;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}
.list-container .list-con{
	position: relative;
	width: 100%;
	padding:0 0 0.618rem 0;
}
.list-con .list-word{
	position: relative;
	width: 100%;
	height: 6.28rem;
	background-image:url(../public/img/list-word1.jpg) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	margin-bottom: 0.28rem;
}
.list-wrap{
	position: relative;
	width: 100%;
	/*padding: 0 0.25rem 0;*/
	padding: 0;
}
.list-wrap .item{
	position: relative;
	width: 100%;
	height: 3.63rem;
	margin-bottom: 0.28rem;
	background-size:cover ;
	background-repeat:no-repeat ;
}

.list-page .list-close{
	position: absolute;
	right: 0.28rem;
	top: 50%;
	width: 0.6rem;
	height: 0.6rem;
	margin-top: -0.3rem;
	background-image:url(../public/images/close.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	z-index: 618;
}

.art-page{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 888888;
	background: #fff;
}
.art-page .art-container{
	position: relative;
	width: 100%;
	height: 100%;
}
.art-page .close-art{
	position: fixed;
	right: 0.4rem;
	bottom: 1.8rem;
	width: 0.8rem;
	height: 0.8rem;
	line-height: 0.8rem;
	background: #000;
	color: #fff;
	text-align: center;
	border-radius: 0.8rem;
	z-index: 888;
	font-size: 12px;
}
.music {
  position: fixed;
  top: 0.2rem;
  left: 0.1rem;
  z-index: 9999999;
  width: 0.62rem;
  height: 0.62rem;
  background-image: url("../public/images/music.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.music.music-on {
  animation: rotateMusic 1s infinite linear;
}
@keyframes rotateMusic{
	from{
		transform: rotateZ(0deg);
		-webkit-transform: rotateZ(0deg);
	}
	to{
		transform: rotateZ(360deg);
		-webkiy-transform: rotateZ(360deg);
	}
}
@-webkit-keyframes rotate{
	from{
		transform: rotateZ(0deg);
		-webkit-transform: rotateZ(0deg);
	}
	to{
		transform: rotateZ(360deg);
		-webkiy-transform: rotateZ(360deg);
	}
}