body{
	font-family:"Microsoft Yahei","SimSun";
	font-size: 16px;
	color:#000;
	background: #c62707;
}

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

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

@media (min-width: 800px) {
	body{ font-size:32px; }
}

a{
	color:#000;
}

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

img{
	display: inline-block;
	vertical-align: top;
	max-height: 100%;
	max-width: 100%;
}

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

.swiper-container {
  width: 100%;
  height: 100%;
  text-align: center;
	max-width: 800px;
}

.swiper-slide{
	width:100%;
	height:100%;
	overflow:hidden;
	position:relative;
}

#home{
	background:url("images/home-bg.jpg") no-repeat center center;
	background-size: cover;
}

.home1{
	width: 66%;
	height: 3.6%;
	left: 6.7%;
	top: 8%;
	background-image: url("images/home1.png");
}

.home2{
	width: 88.8%;
	height: 16.2%;
	left: 5.3%;
	top: 15.3%;
	background-image: url("images/home2.png");
}

.home3{
	width: 82.6%;
	height: 18.4%;
	left: 8.7%;
	top: 37.5%;
	background-image: url("images/home3.png");
}

.home4{
	width: 35.4%;
	height: 3.8%;
	left: 32.3%;
	top: 87.1%;
	background-image: url("images/home4.png");
}

.show{
	background:url("images/show-bg.jpg") no-repeat center center;
	background-size: cover;
}

.show1{
	width: 35.4%;
	height: 3.8%;
	left: 32.3%;
	top: 4.9%;
	background-image: url("images/home4.png");
}

.show2{
	width: 92%;
	height: 11.2%;
	left: 4%;
	top: 10.8%;
}

.show2 img{
	position: absolute;
	top: 50%;
	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%);
}

.show3{
	width: 92%;
	height: 63.7%;
	left: 4%;
	top: 24.2%;
	background-image: url("images/show3.png");
	background-size: 100% 100%;
}

.show3 .text,.show3 .text2{
	position: absolute;
	width: 84%;
	height: 86%;
	left: 8%;
	top: 7%;
	text-align: left;
	color: #2f2f2f;
	overflow-y: scroll;
}

.show3 h3{
	font-size: 1em;
	background: url("images/show3-point.png") no-repeat left center;
	background-size: 0.4em 0.4em;
	padding-left: 1em;
	line-height: 1.5em;
	margin-bottom: 0.5em;
	margin-top: 1em;
}

.show3 h3 span{
	font-size: 1.2em;
	font-weight: bold;
}

.show3 p{
	font-size: 1em;
	padding-left: 1em;
	line-height: 1.6em;
}

.show3 p i{
	font-weight: bold;
	font-style: normal;
	color: #e50000;
}

.show3 .text2 p{
	font-size: 1.2em;
	line-height: 2em;
}

.arrow{
	width: 2.8em;
	height: 2.8em;
	right: -0.5em;
	top: 50%;
	margin-top: -1.4em;
}

.arrow b{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	background: url("images/arrow.png") no-repeat center center;
	background-size: 100% 100%;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}


@-ms-keyframes m1{
	from{ margin-top: -1em; }
	to{ opacity:1; }
}
@-moz-keyframes m1{
	from{ margin-top: -1em; }
	to{ opacity:1; }
}
@-o-keyframes m1{
	from{ margin-top: -1em; }
	to{ opacity:1; }
}
@-webkit-keyframes m1{
	from{ margin-top: -1em; }
	to{ opacity:1; }
}
@keyframes m1{
	from{ margin-top: -1em; }
	to{ opacity:1; }
}

.swiper-slide-active .home1{
	animation:'m1' 0.5s ease-in-out 0.2s forwards;
	-ms-animation:m1 0.5s ease-in-out 0.2s forwards;
	-moz-animation:m1 0.5s ease-in-out 0.2s forwards;
	-o-animation:'m1' 0.5s ease-in-out 0.2s forwards;
	-webkit-animation:'m1' 0.5s ease-in-out 0.2s forwards;
}

.swiper-slide-active .show1{
	animation:'m1' 0.5s ease-in-out 0.2s forwards;
	-ms-animation:m1 0.5s ease-in-out 0.2s forwards;
	-moz-animation:m1 0.5s ease-in-out 0.2s forwards;
	-o-animation:'m1' 0.5s ease-in-out 0.2s forwards;
	-webkit-animation:'m1' 0.5s ease-in-out 0.2s forwards;
}

@-ms-keyframes m2{
	from{ margin-left: 1em; }
	to{ opacity:1; }
}
@-moz-keyframes m2{
	from{ margin-left: 1em; }
	to{ opacity:1; }
}
@-o-keyframes m2{
	from{ margin-left: 1em; }
	to{ opacity:1; }
}
@-webkit-keyframes m2{
	from{ margin-left: 1em; }
	to{ opacity:1; }
}
@keyframes m2{
	from{ margin-left: 1em; }
	to{ opacity:1; }
}

.swiper-slide-active .home2{
	animation:'m2' 0.5s ease-in-out 0.6s forwards;
	-ms-animation:m2 0.5s ease-in-out 0.6s forwards;
	-moz-animation:m2 0.5s ease-in-out 0.6s forwards;
	-o-animation:'m2' 0.5s ease-in-out 0.6s forwards;
	-webkit-animation:'m2' 0.5s ease-in-out 0.6s forwards;
}

@-ms-keyframes m3{
	from{ margin-top: 1em; }
	to{ opacity:1; }
}
@-moz-keyframes m3{
	from{ margin-top: 1em; }
	to{ opacity:1; }
}
@-o-keyframes m3{
	from{ margin-top: 1em; }
	to{ opacity:1; }
}
@-webkit-keyframes m3{
	from{ margin-top: 1em; }
	to{ opacity:1; }
}
@keyframes m3{
	from{ margin-top: 1em; }
	to{ opacity:1; }
}

.swiper-slide-active .home3{
	animation:'m3' 0.5s ease-in-out 1.0s forwards;
	-ms-animation:m3 0.5s ease-in-out 1.0s forwards;
	-moz-animation:m3 0.5s ease-in-out 1.0s forwards;
	-o-animation:'m3' 0.5s ease-in-out 1.0s forwards;
	-webkit-animation:'m3' 0.5s ease-in-out 1.0s forwards;
}

.swiper-slide-active .home4{
	animation:'m3' 0.5s ease-in-out 1.4s forwards;
	-ms-animation:m3 0.5s ease-in-out 1.4s forwards;
	-moz-animation:m3 0.5s ease-in-out 1.4s forwards;
	-o-animation:'m3' 0.5s ease-in-out 1.4s forwards;
	-webkit-animation:'m3' 0.5s ease-in-out 1.4s forwards;
}

.swiper-slide-active .show2,.swiper-slide-active .show3{
	animation:'m3' 0.5s ease-in-out 0.6s forwards;
	-ms-animation:m3 0.5s ease-in-out 0.6s forwards;
	-moz-animation:m3 0.5s ease-in-out 0.6s forwards;
	-o-animation:'m3' 0.5s ease-in-out 0.6s forwards;
	-webkit-animation:'m3' 0.5s ease-in-out 0.6s forwards;
}

@-ms-keyframes m4{
	from{ }
	to{ opacity:1; }
}
@-moz-keyframes m4{
	from{ }
	to{ opacity:1; }
}
@-o-keyframes m4{
	from{ }
	to{ opacity:1; }
}
@-webkit-keyframes m4{
	from{ }
	to{ opacity:1; }
}
@keyframes m4{
	from{ }
	to{ opacity:1; }
}

#home.swiper-slide-active .arrow{
	animation:'m4' 0.5s ease-in-out 1.4s forwards;
	-ms-animation:m4 0.5s ease-in-out 1.4s forwards;
	-moz-animation:m4 0.5s ease-in-out 1.4s forwards;
	-o-animation:'m4' 0.5s ease-in-out 1.4s forwards;
	-webkit-animation:'m4' 0.5s ease-in-out 1.4s forwards;
}

.show.swiper-slide-active .arrow{
	animation:'m4' 0.5s ease-in-out 0.6s forwards;
	-ms-animation:m4 0.5s ease-in-out 0.6s forwards;
	-moz-animation:m4 0.5s ease-in-out 0.6s forwards;
	-o-animation:'m4' 0.5s ease-in-out 0.6s forwards;
	-webkit-animation:'m4' 0.5s ease-in-out 0.6s forwards;
}

@-ms-keyframes m5{
	from{ }
	50%{ margin-left: -0.8em; }
	to{  }
}
@-moz-keyframes m5{
	from{ }
	50%{ margin-left: -0.8em; }
	to{  }
}
@-o-keyframes m5{
	from{ }
	50%{ margin-left: -0.8em; }
	to{  }
}
@-webkit-keyframes m5{
	from{ }
	50%{ margin-left: -0.8em; }
	to{  }
}
@keyframes m5{
	from{ }
	50%{ margin-left: -0.8em; }
	to{  }
}

.arrow b{
	animation:'m5' 3.0s linear 0s infinite;
	-ms-animation:m5 3.0s linear 0s infinite;
	-moz-animation:m5 3.0s linear 0s infinite;
	-o-animation:'m5' 3.0s linear 0s infinite;
	-webkit-animation:'m5' 3.0s linear 0s infinite;
}




.music{
	position:absolute;
	right:3%;
	top:2%;
	width:9.5%;
	height:6%;
	text-align: right;
	z-index:9999;
}

.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 img{
	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;
}