@charset "utf-8";
body{
	font-family:"Microsoft Yahei","SimSun";
	font-size:16px;
	color:#000;
	background:#fff;
	-webkit-text-size-adjust: none !important;
}

body{
	-webkit-text-size-adjust: 100% !important;
}

body::-webkit-scrollbar {
width: 0;
}

@media only screen and (max-height: 938px) { body{ font-size: 15px !important; } }
@media only screen and (max-height: 875px) { body{ font-size: 14px !important; } }
@media only screen and (max-height: 813px) { body{ font-size: 13px !important; } }
@media only screen and (max-height: 750px) { body{ font-size: 12px !important; } }
@media only screen and (max-height: 688px) { body{ font-size: 11px !important; } }
@media only screen and (max-height: 625px) { body{ font-size: 10px !important; } }

a{
	color:#c00;
}

a:hover{
	text-decoration: none;
	color: #c00 !important;
}

.fw{
	color: #fff;
}

.fw a{
	color: #fff;
}

.fw a:hover{
	color: #dfdfdf !important;
}

img{
	display:block;
	max-height: 100%;
	max-width: 100%;
}

h1,h2,h3,h4,h5{
	font-family:"Microsoft Yahei","SimHei";
	overflow:hidden;
}

p,li{
	overflow:hidden;
}

table{
	font-size: 1em;
}

.photo{
	position: relative;
	overflow: hidden;
}

.photo img{
	width: 100%;
	height: 100%;
}

.photo p{
	position: absolute;
	left: 0px;
	bottom : 0px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.abs{
	position: absolute;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity: 1;
}

.abs0{
	position: absolute;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity: 0;
}


/* 开场红旗Start */
#flag{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	overflow: hidden;
	z-index: 9999;
}

#flag .temp{
	left: 50%;
	top: 50%;
    width: 1920px;
    height: 970px;
	transform: translate(-50%, -50%);
	background: url("images/flag-temp.jpg") no-repeat center center;
	background-size: cover;
}

@keyframes flag_temp_out{
	from{ }
	to{ opacity: 0; }
}

#flag .temp{
	animation:'flag_temp_out' 0.01s ease-in-out 1s forwards;
	-ms-animation:flag_temp_out 0.01s ease-in-out 1s forwards;
	-moz-animation:flag_temp_out 0.01s ease-in-out 1s forwards;
	-o-animation:'flag_temp_out' 0.01s ease-in-out 1s forwards;
	-webkit-animation:'flag_temp_out' 0.01s ease-in-out 1s forwards;
}

#flag .p0{
	position: absolute;
	left: 50%;
	top: 50%;
    width: 1920px;
    height: 970px;
	transform: translate(-50%, -50%);
    background-image:url("images/flag.png");
    background-size: 100% 4800% !important;
    background-position-y: 0;
    animation: mouse-in 4s;
    animation-timing-function: steps(48);
    animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes mouse-in{
    from{
        background-position-y: 0;
    }
    to{
        background-position-y: -46560px;
    }
}

@keyframes flag_out{
	from{ }
	to{ opacity: 0; left: -100%; }
}

#flag{
	animation:'flag_out' 0.01s ease-in-out 3.8s forwards;
	-ms-animation:flag_out 0.01s ease-in-out 3.8s forwards;
	-moz-animation:flag_out 0.01s ease-in-out 3.8s forwards;
	-o-animation:'flag_out' 0.01s ease-in-out 3.8s forwards;
	-webkit-animation:'flag_out' 0.01s ease-in-out 3.8s forwards;
}


@media only screen and (max-width: 1200px) {
	#flag .p0,#flag .temp{ transform: scale(0.7) translate(-1344px, -679px); }
}

/* 开场红旗End */


.page{
	position: relative;
	width: 100%;
	height: 120vh;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	opacity: 0;
}

.page,.side-arrow1{
	animation:'main_in' 0.01s ease-in-out 3s forwards;
	-ms-animation:main_in 0.01s ease-in-out 3s forwards;
	-moz-animation:main_in 0.01s ease-in-out 3s forwards;
	-o-animation:'main_in' 0.01s ease-in-out 3s forwards;
	-webkit-animation:'main_in' 0.01s ease-in-out 3s forwards;
}

.side-arrow1{
	position: fixed;
	width: 98px;
	height: 180px;
	top: 50%;
	margin-top: -90px;
	cursor: pointer;
	transition: right 0.3s;
}

.side-arrow1 i{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain;
}

.side-arrow1 .text1{ background-image: url("images/side-arrow11.png"); }
.side-arrow1 .text2{ background-image: url("images/side-arrow12.png"); }
.side-arrow1 .text3{ background-image: url("images/side-arrow13.png"); }
.side-arrow1 .text4{ background-image: url("images/side-arrow14.png"); }
.side-arrow1 .text5{ background-image: url("images/side-arrow15.png"); }
.side-arrow1 .text6{ background-image: url("images/side-arrow16.png"); }

.side-arrow1.show{
	right: -5px;
}

.side-arrow1.hide{
	right: -98px;
}

@keyframes side_arrow1{
	from{ }
	50%{ transform: scale(0.96,0.96); }
	to{  }
}
.side-arrow1 i{
	animation:'side_arrow1' 2.0s linear 0s infinite;
	-ms-animation:side_arrow1 2.0s linear 0s infinite;
	-moz-animation:side_arrow1 2.0s linear 0s infinite;
	-o-animation:'side_arrow1' 2.0s linear 0s infinite;
	-webkit-animation:'side_arrow1' 2.0s linear 0s infinite;
}

.side-box{
	position: fixed;
	top: 0px;
	width: 410px;
	height: 100%;
	background: rgba(0,0,0,0.6);
	transition: right 0.3s;
}

.side-box.show{
	right: 0px;
}

.side-box.hide{
	right: -410px;
}

.side-arrow2{
	left: 14px;
	width: 24px;
	height: 24px;
	top: 50%;
	margin-top: -12px;
	background: url("images/side-arrow2.png");
	cursor: pointer;
}

.side-line{
	width: 1px;
	height: 100%;
	left: 53px;
	top: 0px;
	background: rgba(233,206,141,0.6);
}

.side-main{
	position: absolute;
	width: 280px;
	left: 85px;
	top: 50%;
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
	transform: translate(0, -50%);
}

.side-main .point{
	width: 10px;
	height: 10px;
	border-radius: 50%;
	left: -36px;
	top: 13px;
	background: #e9ce8d;
}

.side-main h4{
	line-height: 36px;
	font-size: 20px;
	font-family: "SimSun";
	color: #e8cb88;
}

.side-main .text{
	margin-top: 18px;
	border-top: 1px solid rgba(233,206,141,0.2);
	border-bottom: 1px solid rgba(233,206,141,0.2);
	line-height: 36px;
	color: #fff;
	padding: 18px 0px;
}

.side-main .text p{
	text-indent: 2em;
}

@keyframes main_in{
	from{ }
	to{ opacity: 1; }
}

.page,.side-arrow1{
	animation:'main_in' 0.01s ease-in-out 3s forwards;
	-ms-animation:main_in 0.01s ease-in-out 3s forwards;
	-moz-animation:main_in 0.01s ease-in-out 3s forwards;
	-o-animation:'main_in' 0.01s ease-in-out 3s forwards;
	-webkit-animation:'main_in' 0.01s ease-in-out 3s forwards;
}

#page1{
	z-index: 2000;
	background: #fff;
	height: 100vh;
	background-image: url("images/p1-bg.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

#video1{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	object-fit: cover;
	object-position: center center;
	z-index: -1;
}

.p1-shadow{
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	background: rgba(0,0,0,0.25);
}

.p1-main{
	width: 900px;
	height: 609px;
	background-image: url("images/p1-main.png");
	left: 50%;
	top: 50%;
	margin: -361px 0px 0px -450px;
}

.p1-logo{
	width: 235px;
	height: 63px;
	background-image: url("images/p1-logo.png");
	left: 332px;
	top: 0px;
	opacity: 0;
}

.p1-topic1{
	width: 214px;
	height: 259px;
	background-image: url("images/p1-topic1.png");
	left: 0px;
	top: 134px;
	opacity: 0;
}

.p1-topic2{
	width: 199px;
	height: 259px;
	background-image: url("images/p1-topic2.png");
	left: 235px;
	top: 134px;
	opacity: 0;
}

.p1-topic3{
	width: 178px;
	height: 259px;
	background-image: url("images/p1-topic3.png");
	left: 445px;
	top: 134px;
	opacity: 0;
}

.p1-topic4{
	width: 293px;
	height: 259px;
	background-image: url("images/p1-topic4.png");
	left: 607px;
	top: 134px;
	opacity: 0;
}

.p1-text{
	width: 772px;
	height: 170px;
	background-image: url("images/p1-text.png");
	left: 64px;
	bottom: 0px;
	opacity: 0;
}

.p1-arrow{
	width: 68px;
	height: 52px;
	left: 50%;
	bottom: 50px;
	margin: -0px 0px 0px -34px;
	background-image: url("images/p1-arrow.png");
	opacity: 0;
}

@keyframes p1_topic{
	from{ transform: scale(4,4); }
	to{ opacity:1; }
}
.p1-topic1{
	animation:'p1_topic' 0.5s ease-in-out 3.8s forwards;
	-ms-animation:p1_topic 0.5s ease-in-out 3.8s forwards;
	-moz-animation:p1_topic 0.5s ease-in-out 3.8s forwards;
	-o-animation:'p1_topic' 0.5s ease-in-out 3.8s forwards;
	-webkit-animation:'p1_topic' 0.5s ease-in-out 3.8s forwards;
}
.p1-topic2{
	animation:'p1_topic' 0.5s ease-in-out 4.2s forwards;
	-ms-animation:p1_topic 0.5s ease-in-out 4.2s forwards;
	-moz-animation:p1_topic 0.5s ease-in-out 4.2s forwards;
	-o-animation:'p1_topic' 0.5s ease-in-out 4.2s forwards;
	-webkit-animation:'p1_topic' 0.5s ease-in-out 4.2s forwards;
}
.p1-topic3{
	animation:'p1_topic' 0.5s ease-in-out 4.6s forwards;
	-ms-animation:p1_topic 0.5s ease-in-out 4.6s forwards;
	-moz-animation:p1_topic 0.5s ease-in-out 4.6s forwards;
	-o-animation:'p1_topic' 0.5s ease-in-out 4.6s forwards;
	-webkit-animation:'p1_topic' 0.5s ease-in-out 4.6s forwards;
}
.p1-topic4{
	animation:'p1_topic' 0.5s ease-in-out 5.1s forwards;
	-ms-animation:p1_topic 0.5s ease-in-out 5.1s forwards;
	-moz-animation:p1_topic 0.5s ease-in-out 5.1s forwards;
	-o-animation:'p1_topic' 0.5s ease-in-out 5.1s forwards;
	-webkit-animation:'p1_topic' 0.5s ease-in-out 5.1s forwards;
}

@keyframes p1_move2{
	from{ transform: scale(0.95,0.95); }
	to{ opacity:1; }
}
.p1-logo,.p1-text,.p1-arrow{
	animation:'p1_move2' 0.5s ease-in-out 5.5s forwards;
	-ms-animation:p1_move2 0.5s ease-in-out 5.5s forwards;
	-moz-animation:p1_move2 0.5s ease-in-out 5.5s forwards;
	-o-animation:'p1_move2' 0.5s ease-in-out 5.5s forwards;
	-webkit-animation:'p1_move2' 0.5s ease-in-out 5.5s forwards;
}

.arrow2{
	width: 68px;
	height: 52px;
	left: 50%;
	bottom: 50px;
	margin: -0px 0px 0px -34px;
	background-image: url("images/p1-arrow.png");
	z-index: 1099;
}

#page2{
	background-image: url("images/p2-bg.jpg");
	background-attachment: fixed;
	z-index: 510;
}

.p2-main{
	width: 923px;
	height: 396px;
	background-image: url("images/p2-main.png");
	left: 50%;
	top: 50%;
	margin: -197px 0px 0px -461px;
}

#page3,#page5,#page7,#page9{
	margin-top: 200vh;
	height: auto;
	background:rgba(255,255,255,0.9);
}

.news{
	width: 1000px;
	margin: 0px auto;
	padding: 120px 0px;
}

.news h3{
	font-size: 48px;
	line-height: 60px;
	text-align: center;
	border-bottom: 1px solid #e2e2e2;
	padding-bottom: 50px;
	margin-bottom: 30px;
}

.news p{
	line-height: 36px;
	font-size: 18px;
	padding-top: 20px;
	text-indent: 2em;
}

.news .photo{
	text-indent: 0;
	text-align: center;
	width: 75%;
	margin: 0px auto;
}

.news .photo img{
	width: 100%;
}

.news .photo span{
	font-family: "楷体", "楷体_GB2312", "SimKai";
	display: block;
	line-height: 20px;
	margin-top: 10px;
	color: #333;
}

#page3 .news .photo{
	padding-top: 0;
}

.banner{ width:750px; height:482px; overflow:hidden; position:relative;font-size:0; margin: 20px auto 0px auto;}
.b-img{ height:482px;  position:absolute; left:0; top:0;}
.b-img a{ display:block; height:482px; float:left;}
.b-list{ height:50px; padding-top:450px; position:relative; margin:0 auto;z-index:1;}
.b-list span{ display:block;cursor:pointer; width:10px; height:10px; border-radius:50%; border:3px solid #fff; float:left; margin:0 5px; _margin:0 3px; outline: none;}
.b-list .spcss{border:3px solid #eca91a;}
.bar-left{ position:absolute; z-index:1; display:block; width:100px; height:100%; left:0px; background:none; top:0px; outline: none; }
.bar-right{ position:absolute;z-index:1; display:block; width:100px; height:100%; right:0px; background:none; top:0px; outline: none; }
.bar-left em{ position: absolute; left: 50%; top: 50%; margin: -50px 0px 0px -25px; width:50px; height:100px; background: url("images/photo-arrow1a.png");}
.bar-right em{ position: absolute; left: 50%; top: 50%; margin: -50px 0px 0px -25px; width:50px; height:100px; background: url("images/photo-arrow2a.png");}
.bar-left .emcss{ background: url("images/photo-arrow1b.png");}
.bar-right .emcss{ background: url("images/photo-arrow2b.png");}

#page4{
	background-image: url("images/p4-bg.jpg");
	background-attachment: fixed;
	z-index: 510;
}

.p4-main{
	width: 878px;
	height: 551px;
	background-image: url("images/p4-main.png");
	left: 50%;
	top: 50%;
	margin: -275px 0px 0px -439px;
}

#page6{
	margin-top: 200vh;
	background-image: url("images/p6-bg.jpg");
	background-attachment: fixed;
	z-index: 510;
}

.p6-main{
	width: 656px;
	height: 450px;
	background-image: url("images/p6-main.png");
	left: 50%;
	top: 50%;
	margin: -225px 0px 0px -328px;
}

#page8{
	background-image: url("images/p8-bg.jpg");
	background-attachment: fixed;
	z-index: 510;
}

.p8-main{
	width: 862px;
	height: 437px;
	background-image: url("images/p8-main.png");
	left: 50%;
	top: 50%;
	margin: -218px 0px 0px -431px;
}

#page9{
	margin-top: 0;
}

#page10{
	background-image: url("images/p10-bg.jpg");
	background-attachment: fixed;
}

.p10-main{
	width: 1000px;
	height: 620px;
	left: 50%;
	top: 50%;
	margin: -310px 0px 0px -500px;
}

.p10-text1{
	width: 552px;
	height: 41px;
	left: 50%;
	top: 0px;
	margin-left: -276px;
	background-image: url("images/p10-text1.png");
}

.p10-num{
	width: 541px;
	height: 205px;
	left: 50%;
	top: 70px;
	margin-left: -270px;
	cursor: pointer;
}

@keyframes p10-frame{
    from{
        background-position-y: 0;
    }
    to{
        background-position-y: -2050px;
    }
}

.p10-num .frame{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-image:url("images/p10-num2.png");
    background-size: 100%;
    background-position-y: 0;
}

.active .p10-num .frame{
	animation: p10-frame 1.0s;
	animation-timing-function: steps(10);
    animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.p10-more{
	width: 87px;
	height: 14px;
	left: 50%;
	top: 265px;
	margin-left: -43px;
	background-image: url("images/p10-more.png");
	cursor: pointer;
}

.p10-text2{
	width: 469px;
	height: 60px;
	left: 50%;
	top: 305px;
	margin-left: -234px;
	background-image: url("images/p10-text2.png");
	cursor: pointer;
}

.p10-card1{
	width: 320px;
	height: 192px;
	left: 0px;
	top: 427px;
	background-image: url("images/p10-card1.png");
	cursor: pointer;
	transition: all 0.2s;
}

.p10-card1:hover{
	background-image: url("images/p10-card1b.png");
}

.p10-card2{
	width: 320px;
	height: 192px;
	left: 50%;
	top: 427px;
	margin-left: -160px;
	background-image: url("images/p10-card2.png");
	cursor: pointer;
	transition: all 0.2s;
}

.p10-card2:hover{
	background-image: url("images/p10-card2b.png");
}

.p10-card3{
	width: 320px;
	height: 192px;
	right: 0px;
	top: 427px;
	background-image: url("images/p10-card3.png");
	cursor: pointer;
	transition: all 0.2s;
}

.p10-card3:hover{
	background-image: url("images/p10-card3b.png");
}

.chart{
	transition: all 0.3s;
	opacity: 0;
	width: 1040px;
	left: 50%;
	top: 50%;
	background: #fff;
	margin-left: -500px;
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
	transform: translate(0, -50%);
	box-shadow: 1px 1px 2px rgba(215,196,151,0.6);
	overflow: hidden;
	height: 0;
}

.chart.show{
	opacity: 1;
	height: auto;
}

.chart .photo{
	max-height: 92vh;
	overflow-y: auto;
	overflow-x: hidden;
}

.chart img{
	width: 1000px;
}

.chart .close{
	position: absolute;
	width: 21px;
	height: 21px;
	cursor: pointer;
	right: 35px;
	top: 27px;
	background: url("images/chart-close.png");
}

.chart .photo-wap{
	display: none;
}

#page11{
	background-image: url("images/p11-bg.jpg");
	background-attachment: fixed;
	height: 100vh;
}

.p11-main{
	width: 1092px;
	height: 600px;
	left: 50%;
	top: 50%;
	margin: -300px 0px 0px -546px;
}

.p11-text{
	width: 1131px;
	height: 270px;
	left: 50%;
	top: 0%;
	margin-left: -565px;
	background-image: url("images/p11-text.png");
}

.p11-editor{
	width: 558px;
	height: 120px;
	left: 50%;
	top: auto;
	bottom: 0%;
	background-image: url("images/p11-editor.png");
	margin-left: -279px;
}

#map{
	position: fixed;
	left: 0%;
	top: 0%;
	height: 100vh;
}

.map-box{
	position: absolute;
	width: 1920px;
	height: 970px;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.map-text1{
	width: 387px;
	height: 193px;
	left: 50%;
	top: 50%;
	margin: -97px 0px 0px -194px;
	background-image: url("images/map-text1.png");
	opacity: 0;
	transition: opacity 0.2s;
}

.map-bg{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
}

.map-bg2{
	opacity: 0;
	z-index: 200;
}

.map-site-box1{
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	transition: all 0.3s;
}

.map-site{
	overflow: hidden;
}

.map-site i{
	position: absolute;
	top: 0px;
	height: 100%;
	background-size: cover;
}

.map-site1{
	width: 0px;
	height: 75px;
	left: 1177px;
	top: 239px;
	z-index: 24;
	transition: all 0.25s;
}

.map-site1 i{
	left: 0px;
	width: 221px;
	background-image: url("images/map-site1.png");
}

.map-site2{
	width: 0px;
	height: 128px;
	right: 535px;
	top: 230px;
	z-index: 23;
	transition: all 1s;
}

.map-site2 i{
	right: 0px;
	width: 875px;
	background-image: url("images/map-site2.png");
}

.map-site3{
	width: 0px;
	height: 75px;
	left: 591px;
	top: 312px;
	z-index: 22;
	transition: all 0.53s;
}

.map-site3 i{
	left: 0px;
	width: 461px;
	background-image: url("images/map-site3.png");
}

.map-site4{
	width: 0px;
	height: 171px;
	left: 856px;
	top: 362px;
	z-index: 21;
	transition: all 0.6s;
}

.map-site4 i{
	left: 0px;
	width: 526px;
	background-image: url("images/map-site4.png");
}

.map-site5{
	width: 0px;
	height: 194px;
	right: 720px;
	top: 347px;
	z-index: 20;
	transition: all 0.92s;
}

.map-site5 i{
	right: 0px;
	width: 807px;
	background-image: url("images/map-site5.png");
}

.map-site6{
	width: 0px;
	height: 216px;
	left: 0px;
	top: 437px;
	transition: all 1.29s;
	z-index: 210;
}

.map-site6 i{
	left: 0px;
	width: 1129px;
	background-image: url("images/map-site6.png");
}

.map-frame1{
	overflow: hidden;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	z-index: 99;
	opacity: 0;
	transition: all 0.3s;
	background-color: #fff;
	background-image:url("images/map-frame1.jpg");
    background-size: 100% 5600% !important;
    background-position-y: 0;	
}

@keyframes map-frame1{
    from{
        background-position-y: 0;
    }
    to{
        background-position-y: -54320px;
    }
}

@keyframes map-frame1b{
    from{
		background-position-y: -54320px;
    }
    to{
        background-position-y: 0;
    }
}

.map-3d{
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	transition: opacity 0.3s;
	/*background:rgba(255,255,255,0.9);*/
	opacity: 0;
	z-index: 999;
}

.map-3d .topic{
	width: 280px;
	height: 40px;
	left: 820px;
	top: 140px;
	background-image: url("images/map-3d-topic.png");
}

.map-3d .note1{
	width: 1107px;
	height: 161px;
	left: 406px;
	top: 400px;
	background: url("images/map-3d-note1.png");
}

.map-3d .note2{
	width: 48px;
	height: 45px;
	left: 936px;
	top: 760px;
	background: url("images/map-3d-note2.png");
}

.map-3d iframe{
	position: absolute;
	width: 1000px;
	height: 600px;
	top: calc(50% - 20px);
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	transition: opacity 0.3s;
}

.map-frame2{
	overflow: hidden;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	z-index: 201;
	opacity: 0;
	transition: all 0.3s;
	background-image: url("images/map-frame2.jpg");
    background-size: 100% 3500% !important;
    background-position-y: 0;
}

@keyframes map-frame2{
    from{
        background-position-y: 0;
    }
    to{
        background-position-y: -33950px;
    }
}

@keyframes map-frame2b{
    from{
        background-position-y: -33950px;
    }
    to{
		background-position-y: 0;
    }
}

.scene1 .map-text1{
	opacity: 1;
}

.scene2 .map-mask{
	opacity: 0;
	top: 0%;
}

.scene2 .map-text1{
	opacity: 0;
}

.scene2 .map-site1,
.scene3 .map-site1,
.scene4 .map-site1,
.scene5 .map-site1,
.scene6 .map-site1,
.scene7 .map-site1,
.scene8 .map-site1,
.scene9 .map-site1{
	width: 221px;
}

.scene3 .map-site2,
.scene4 .map-site2,
.scene5 .map-site2,
.scene6 .map-site2,
.scene7 .map-site2,
.scene8 .map-site2,
.scene9 .map-site2{
	width: 875px;
}

.scene4 .map-site3,
.scene5 .map-site3,
.scene6 .map-site3,
.scene7 .map-site3,
.scene8 .map-site3,
.scene9 .map-site2{
	width: 461px;
}

.scene5 .map-site4,
.scene6 .map-site4,
.scene7 .map-site4,
.scene8 .map-site4,
.scene9 .map-site2{
	width: 526px;
}

.scene6 .map-site5,
.scene7 .map-site5,
.scene8 .map-site5,
.scene9 .map-site2{
	width: 807px;
}

.scene7 .map-site-box1,
.scene9 .map-site-box1{
	opacity: 0;
}

.scene6 .map-site-box1,
.scene8 .map-site-box1{
	opacity: 1;
}

.scene7 .arrow2{
	background-image: url("images/arrow2.png");
}

.scene7 .side-arrow1{
	right: -98px;
}

.scene7 .side-box{
	right: -410px;
}

.scene7 .map-frame1{
	opacity: 0.9;
    animation: map-frame1 2.3s;
	animation-timing-function: steps(56);
    animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.scene6 .map-frame1{
	opacity: 0;
}

.scene8 .map-frame1{
	opacity: 0;
}

.scene7 .map-3d{
	opacity: 1;
	transition-delay: 2.4s;
}

.scene8 .map-3d,.scene6 .map-3d{
	opacity: 0;
	transition: opacity 0.5s;
}

.scene8 .map-frame2{
	opacity: 0;
	transition: opacity 0.3s;
	transition-delay: 1.4s;
    animation: map-frame2b 1.4s;
	animation-timing-function: steps(35);
    animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.scene9 .map-frame2{
	opacity: 1;
    animation: map-frame2 1.4s;
	animation-timing-function: steps(35);
    animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.scene8 .map-site6{
	width: 0px;
}

.scene9 .map-site6{
	width: 1129px;
	transition-delay: 0.7s;
}

.scene8 .map-bg2{
	opacity: 0;
	transition-delay: 1.4s;
}

.scene9 .map-bg2{
	opacity: 1;
	transition-delay: 0.2s;
}



.music{
	position: fixed;
	right: 1.5em;
	top: 1.5em;
	width: 9.5em;
	height: 2.5em;
	cursor: pointer;
	
	z-index: 9988;
}

.music i{
	position: absolute;
	right: 0px;
	top: 0px;
	width: 2.5em;
	height: 2.5em;
	background-size: auto 100%;
	background-position: right top;
	background-repeat: no-repeat;
}

.music.on i{background-image:url(images/music-on.png); }
.music.off i{background-image:url(images/music-off.png); }
.music img{display: inline-block;}
@-moz-keyframes music{from{ transform:rotate(-360deg); }to{ }}
@-o-keyframes music{from{ transform:rotate(-360deg); }to{ }}
@-webkit-keyframes music{from{ transform:rotate(-360deg); }to{ }}
@keyframes music{from{ transform:rotate(-360deg); }to{ }}
.music.on i{
	animation:'music' 1.5s linear 0s infinite;
	-ms-animation:music 1.5s linear 0s infinite;
	-moz-animation:music 1.5s linear 0s infinite;
	-o-animation:'music' 1.5s linear 0s infinite;
	-webkit-animation:'music' 1.5s linear 0s infinite;
}

.music.first{
	opacity: 0;
}

.music-note{
	position: fixed;
	right: 1.5em;
	top: 0.9em;
	width: 9.5em;
	height: 3.18em;
	cursor: pointer;
	z-index: 9977;
}

.music-note.hide{
	display: none;
	top: -10em;
}

.music-note span{
	position: absolute;
	left: 0px;
	top: 0.86em;
	width: 6em;
	height: 2.32em;
	background: url("images/music-note1.png") no-repeat center center;
	background-size: contain;
}

.music-note i{
	position: absolute;
	right: 0px;
	top: 0px;
	width: 2.5em;
	height: 3.18em;
	background: url("images/music-note2.gif") no-repeat center center;
	background-size: contain;
}