@charset "utf-8";
body{
	font-family:"Microsoft Yahei","SimSun";
	font-size:16px;
	color:#000;
}

@media (max-width: 380px) {
	body{ font-size:14px; }
}

@media (max-width: 325px) {
	body{ font-size:12px; }
}

@media (min-width: 760px) {
	body{ font-size:22px; }
}

a{
	color:#000;
}

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

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

a,input,textarea{
	outline: none;
}

table{
	font-size: 1em;
}

p,li{
	overflow: hidden;
}

.photo{
	position: relative;
}

.fw{
	color: #fff;
}

.fw a{
	color: #fff;
}

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

.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;
}
.abs1{
	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;
}
i{
	position: absolute;
	width: 100%;
	height: 100%;
	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;
	left: 0px;
	top: 0px;
}


#page{
	width: 100%;
	position: relative;
	overflow: hidden;
}
a,img{
	width: 100%;
	height: 100%;
	display: block;
}


.movie{
	width: 100%;
	position:absolute;
	left: 0;
}
.movie1{
	height: 5.79%;
	top: 1.59%;
}
.movie2{
	height: 5.8%;
	top: 8.3%;
}
.movie3{
	height: 4.4%;
	top: 15.88%;
}
.movie4{
	height: 4.4%;
	top: 20.57%;
}
.movie5{
	height: 4.4%;
	top: 25.32%;
}
.movie6{
	height: 3.27%;
	top: 31%;
}
.movie7{
	height: 4.4%;
	top: 35.44%;
}
.movie8{
	height: 5.78%;
	top: 39.33%;
}
.movie9{
	height: 3.27%;
	top: 46.43%;
}
.movie10{
	height: 5.8%;
	top: 50.01%;
}
.movie11{
	height: 5.8%;
	top: 55.7%;
}
.movie12{
	height: 5.8%;
	top: 62.02%;
}
.movie13{
	height: 4.4%;
	top: 69.18%;
}
.movie14{
	height: 4.4%;
	top: 73.97%;
}
.movie15{
	height: 4.4%;
	top: 79.41%;
}
.movie16{
	height: 4.4%;
	top: 84.69%;
}
.movie17{
	height: 5.79%;
	top: 93.74%;
}
.movie video{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	object-fit: cover;
	object-position: center center;
}



.mask{
	width: 100%;
	position:absolute;
	left: 0;
}
.mask1{
	height: 1.58%;
	top: 6.44%;
}
.mask2{
	height: 0.48%;
	top: 8%;
}
.mask3{
	height: 2.2%;
	top: 13.71%;
    width: 110%;
	left: -5%;
}
.mask4{
	height: 0.9%;
    top: 19.78%;
    width: 101%;
}
.mask5{
	height: 1.05%;
	top: 24.58%;
}
.mask6{
	height: 1.6%;
	top: 29.39%;
}
.mask7{
	height: 1.64%;
	top: 34.3%;
}
.mask8{
	height: 0.64%;
	top: 39.25%;
}
.mask9{
	height: 0.91%;
	top: 44.7%;
}
.mask10{
	height: 0.75%;
	top: 49.44%;
}
.mask11{
	height: 0.7%;
	top: 55.45%;
}
.mask12{
	left: -4%;
    width: 104%;
    height: 1.62%;
    top: 60.82%;
}
.mask13{
	height: 0.78%;
	top: 68.62%;
}
.mask14{
	height: 1.84%;
	top: 77.87%;
	width: 120%;
    left: -20%;
}
.mask15{
	height: 0.75%;
	top: 88.67%;
}






.logo1{
	width: 41.2%;
	height: 0.197%; 
	left: 29.47%; 
	top: 0.41%; 
	background-image: url("images/logo1.png");
}
.topic1{
	width: 93.07%;
	height: 1.16%; 
	left: 4.27%; 
	top: 0.98%; 
	background-image: url("images/topic1.png");
}
.link0,.link1,.link2,.link3{
	width: 29.87%;
	height: 0.33%; 
	left: 36.4%; 
}
.link0{
	top: 4.63%; 
	background-image: url("images/link0.png");
}
.link1{
	top: 4.63%; 
	background-image: url("images/link1.png");
}
.link2{
	top: 5%; 
	background-image: url("images/link2.png");
}
.link3{
	top: 5.38%; 
	background-image: url("images/link3.png");
}
.text1{
	width: 98.13%;
	height: 1.9%; 
	left: 1.2%; 
	top: 6.41%; 
	background-image: url("images/text1.png");
}


.biao{
	height: 0.87%; 
	left: 4.13%; 
}
.biao1{
	width: 81.33%;
	top: 13.79%; 
	background-image: url("images/biao1.png");
}
.biao2{
	width: 92%;
	top: 29.85%; 
	background-image: url("images/biao2.png");
}
.biao3{
	width: 98.27%;
	top: 49.59%; 
	left: 0.67%; 
	background-image: url("images/biao3.png");
}
.biao4{
	width: 98.27%;
	top: 61.3%; 
	left: 0.67%;  
	background-image: url("images/biao4.png");
}
.biao5{
	width: 89.07%;
	top: 83.4%; 
	background-image: url("images/biao5.png");
}


.zi{
	width: 86.4%;
	left: 6.8%;
}
.zi1{
	height: 0.99%; 
	top: 15.04%; 
	background-image: url("images/zi1.png");
}
.zi2{
	height: 0.78%; 
	top: 19.69%; 
	background-image: url("images/zi2.png");
}
.zi3{
	height: 0.57%; 
	top: 25.17%; 
	background-image: url("images/zi3.png");
}
.zi4{
	height: 0.57%; 
	top: 31.04%; 
	background-image: url("images/zi4.png");
}
.zi5{
	width: 61.33%;
	height: 2.09%; 
	top: 34.93%; 
	background-image: url("images/zi5.png");
}
.zi6{
	height: 0.99%; 
	top: 39.93%; 
	background-image: url("images/zi6.png");
}
.zi7{
	height: 1.44%; 
	top: 45.29%; 
	background-image: url("images/zi7.png");
}
.zi8{
	height: 0.57%; 
	top: 50.83%; 
	background-image: url("images/zi8.png");
}
.zi9{
	height: 1.21%; 
	top: 56.02%; 
	background-image: url("images/zi9.png");
}
.zi10{
	height: 0.34%; 
	top: 62.42%; 
	background-image: url("images/zi10.png");
}
.zi11{
	height: 1.65%; 
	top: 67.3%; 
	background-image: url("images/zi11.png");
}
.zi12{
	height: 0.99%; 
	top: 73.54%; 
	background-image: url("images/zi12.png");
}
.zi13{
	height: 0.99%; 
	top: 78.53%; 
	background-image: url("images/zi13.png");
}
.zi14{
	height: 0.78%; 
	top: 84.65%; 
	background-image: url("images/zi14.png");
}
.zi15{
	height: 0.78%; 
	top: 89.52%; 
	background-image: url("images/zi15.png");
}
.zi16{
	height: 0.78%; 
	top: 93.3%; 
	background-image: url("images/zi16.png");
}
.zi17{
	height: 0.34%; 
	top: 98.22%; 
	background-image: url("images/zi17.png");
}


.name{
	width: 100%;
	height: 0.76%; 
	left: 0%; 
	top: 98.97%; 
	background-image: url("images/name.png");
}

.link1,.link2,.link3,.display2{ display: none;}
.display1{ display: block;}



.ying .topic1{
	height: 1.168%; 
	background-image: url("images/topic2.png");
}
.ying .text1{
	background-image: url("images/text2.png");
}
.han .topic1{
	height: 1.168%; 
	background-image: url("images/topic3.png");
}
.han .text1{
	background-image: url("images/text3.png");
}

.ying .biao1,.han .biao1{
	width: 89.33%;
	background-image: url("images/biao6.png");
}
.ying .biao2,.han .biao2{
	top: 30.02%;
	background-image: url("images/biao7.png");
}
.ying .biao3,.han .biao3{
	left: 4.13%;
	width: 93.33%;
	top: 49.76%;
	background-image: url("images/biao8.png");
}
.ying .biao4,.han .biao4{
	left: 2.4%;
	width: 96.53%;
	top: 61.26%;
	background-image: url("images/biao9.png");
}
.ying .biao5,.han .biao5{
	left: 2.4%;
	width: 96.53%;
	top: 83.43%;
	background-image: url("images/biao10.png");
}
.han .biao1{background-image: url("images/biao11.png");}
.han .biao2{background-image: url("images/biao12.png");}
.han .biao3{background-image: url("images/biao13.png");}
.han .biao4{background-image: url("images/biao14.png");}
.han .biao5{background-image: url("images/biao15.png");}

.ying .zi1,.han .zi1{
	height: 1.27%;
	top: 14.97%; 
	background-image: url("images/zi21.png");
}
.ying .zi2,.han .zi2{
	height: 0.96%;
	top: 19.55%; 
	background-image: url("images/zi22.png");
}
.ying .zi3,.han .zi3{
	height: 0.91%;
	top: 25.04%; 
	background-image: url("images/zi23.png");
}
.ying .zi4,.han .zi4{
	height: 0.68%;
	top: 31.19%; 
	background-image: url("images/zi24.png");
}
.ying .zi5,.han .zi5{
	width: 64%;
	height: 2.86%;
	top: 34.56%; 
	background-image: url("images/zi25.png");
}
.ying .zi6,.han .zi6{
	height: 1.49%;
	top: 39.91%; 
	background-image: url("images/zi26.png");
}
.ying .zi7,.han .zi7{
	height: 2.06%;
	top: 45.22%; 
	background-image: url("images/zi27.png");
}
.ying .zi8,.han .zi8{
	height: 0.68%;
	top: 50.9%; 
	background-image: url("images/zi28.png");
}
.ying .zi9,.han .zi9{
	height: 1.69%;
	top: 55.91%; 
	background-image: url("images/zi29.png");
}
.ying .zi10,.han .zi10{
	height: 0.68%;
	top: 62.36%; 
	background-image: url("images/zi30.png");
}
.ying .zi11,.han .zi11{
	height: 2.44%;
	top: 66.99%; 
	background-image: url("images/zi31.png");
}
.ying .zi12,.han .zi12{
	height: 1.08%;
	top: 73.62%; 
	background-image: url("images/zi32.png");
}
.ying .zi13,.han .zi13{
	height: 1.09%;
	top: 78.52%; 
	background-image: url("images/zi33.png");
}
.ying .zi14,.han .zi14{
	height: 1.09%;
	top: 84.59%; 
	background-image: url("images/zi34.png");
}
.ying .zi15,.han .zi15{
	height: 1.33%;
	top: 89.3%; 
	background-image: url("images/zi35.png");
}
.ying .zi16,.han .zi16{
	height: 1.09%;
	top: 93.18%; 
	background-image: url("images/zi36.png");
}
.ying .zi17,.han .zi17{
	height: 0.69%;
	top: 98.12%; 
	background-image: url("images/zi37.png");
}
.han .zi1{background-image: url("images/zi41.png");}
.han .zi2{background-image: url("images/zi42.png");}
.han .zi3{background-image: url("images/zi43.png");}
.han .zi4{background-image: url("images/zi44.png");}
.han .zi5{background-image: url("images/zi45.png");}
.han .zi6{background-image: url("images/zi46.png");}
.han .zi7{background-image: url("images/zi47.png");}
.han .zi8{background-image: url("images/zi48.png");}
.han .zi9{background-image: url("images/zi49.png");}
.han .zi10{background-image: url("images/zi50.png");}
.han .zi11{background-image: url("images/zi51.png");}
.han .zi12{background-image: url("images/zi52.png");}
.han .zi13{background-image: url("images/zi43.png");}
.han .zi14{background-image: url("images/zi54.png");}
.han .zi15{background-image: url("images/zi55.png");}
.han .zi16{background-image: url("images/zi56.png");}
.han .zi17{background-image: url("images/zi57.png");}


.ying .name{background-image: url("images/name1.png");}
.han .name{background-image: url("images/name2.png");}




.music{
	position:fixed;
	right:0.5em;
	top:1em;
	width:2em;
	height:2em;
	z-index:9999;
}
.music.on{background:url(images/music-on.png) no-repeat; background-size:100% 100%;}
.music.off{background:url(images/music-off.png) no-repeat;background-size:100% 100%;}
.music img{display: inline-block;}
@-ms-keyframes music{from{ transform:rotate(-360deg); }to{ }}
@-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{
	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;
}



@media only screen and (orientation: landscape) {
	#page{ width: 750px; margin: 0px auto;}
	.music{right: 34%;}
}