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

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

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

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

input{-webkit-appearance:none;}

a{
	color:#000;
}

a:hover{
	text-decoration:none;
}

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

#wrapper{
	position: fixed;
	left: 0px;
	top: 0px;
	height: 100%;
	width: 100%;
	overflow-x: scroll;
}

#prompt{
	position: fixed;
	left: 0px;
	top: 0px;
	height: 100%;
	width: 100%;
	background: #e1e1e1;
	z-index: 99;
}

#prompt .part1{
	width: 40%;
	height: 15%;
	top: 42%;
	left: 30%;
	background-image: url(images/prompt1.png);
	filter:alpha(opacity=100);
	opacity:1;
}

#prompt .part2{
	width: 15%;
	height: 5%;
	bottom: 8%;
	left: 42.5%;
	background-image: url(images/prompt2.png);
	filter:alpha(opacity=100);
	opacity:1;
}

#music-btn{
	position: fixed;
	right: 1.2%;
	top: 1.2%;
	height: 4.8%;
	width: 3%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	z-index: 90;
}

.music-on{
	background-image: url(images/music1.png);
}

.music-off{
	background-image: url(images/music2.png);
}

#page{
	position: relative;
	height: 100%;
	white-space:nowrap;
}

.box{
	display: inline-block !important;
	vertical-align: top;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.abs{
	position: absolute;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

#header .part1{
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image: url(images/header2.png);
}

#footer .part1{
	left: 30%;
	top: 18.8%;
	width: 43%;
	height: 62.5%;
	background-image: url(images/footer1.png);
}


#intro2 .part4{
	left:11.7%;
	top: 21.3%;
	width:72.6%;
	height:25%;
	background-image: url(images/intro4.png);
}

.chapter .part1{
	top:0px;
	background-position:left top;
}

#chapter1 .part1{
	background-image: url(images/chapter1-1.png);
	width:39.5%;
	height:58.5%;
	left:7.6%;
}
#chapter2 .part1{
	background-image: url(images/chapter2-1.png);
	width:35.1%;
	height:57%;
	left:39%;
}
#chapter3 .part1{
	background-image: url(images/chapter3-1.png);
	width:34.3%;
	height:60%;
	left:29%;
}
#chapter4 .part1{
	background-image: url(images/chapter4-1.png);
	width:30.3%;
	height:55%;
	left:28.8%;
}
#chapter5 .part1{
	background-image: url(images/chapter5-1.png);
	width:32.2%;
	height:58.9%;
	left:30.8%;
}
#chapter6 .part1{
	background-image: url(images/chapter6-1.png);
	width:30.4%;
	height:55.7%;
	left:26.5%;
}
#chapter7 .part1{
	background-image: url(images/chapter7-1.png);
	width:39.8%;
	height:58.9%;
	left:35.2%;
}
#chapter8 .part1{
	background-image: url(images/chapter8-1.png);
	width:34.6%;
	height:55.8%;
	left:35%;
}




#chapter2,#chapter3,#chapter4,#chapter5,#chapter6,#chapter7,#chapter8{ margin-left:-0.55%;}


.show1{
	background-color:#e63737;
}
.show2{
	background-color:#fff;
}
.show{ margin-left:-0.5%;}


.show table{
	position: absolute;
	width:100%;
	height: 15.3%;
	left: 0%;
	font-size: 0.7em;
	line-height: 1.8em;
	white-space: normal;
	overflow:hidden;
}
.show1 table{
	background: #f28181;
	top:11%;
	color: #fff;
}
.show2 table{
	background: #cbdcba;
	bottom:11%;
	color:#232323;
}

.show table td{
	padding: 0px 3%;
}


.show .photo{
	width:100%;
	height:69.2%;
	left:0%;
	z-index:100;
}
.show1 .photo{bottom:0px;}
.show2 .photo{ top:6%;}

.show .photo li{
	width:29%;
	float:left;
	margin:0 2.1%;
	display:inline;
}
.show .photo li img{
	width:100%;
	height:100%;
}
.show .photo li p{
	font-size: 0.5em;
	line-height: 1.3em;
	white-space: normal;
	height:3.9em;
	overflow:hidden;
	margin:6% 0;
}
.show1 .photo li p{ color:#fff;}
.show2 .photo li p{ color:#464646;}



@media(max-width:1500px){
	#chapter2,#chapter3,#chapter4,#chapter5,#chapter6,#chapter7,#chapter8,.show{ margin-left:-1%;}
}
@media(max-width:767px){
	.show{ margin-left:-1%;}
	#chapter2,#chapter3,#chapter4,#chapter5,#chapter6,#chapter7,#chapter8{ margin-left:-1%;}
	.show1 table{top:5%;}
	.show .photo li p{ height:2.6em;}
}

/*css添加开始*/
#intro3 .part5{
	left:31.6%;
	top: 20.7%;
	width:60.8%;
	height:53.3%;
	background-image: url(images/intro5.png);
}
#intro3.active .part5{
	animation:'intro4' 0.5s ease-in-out 0.5s forwards;
	-ms-animation:intro4 0.5s ease-in-out 0.5s forwards;
	-moz-animation:intro4 0.5s ease-in-out 0.5s forwards;
	-o-animation:'intro4' 0.5s ease-in-out 0.5s forwards;
	-webkit-animation:'intro4' 0.5s ease-in-out 0.5s forwards;
}
#intro2 .part4,#intro3 .part5{
	filter:alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
}
/*css添加结束*/