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,input,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;-webkit-background-origin:content-box;background-origin:content-box;}section,header,footer,nav{display:block;margin:0;padding:0}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}img{border:0;font-size:0}a{text-decoration:none;}
.cf:before,.cf:after{content:"";display:table}.cf:after{clear:both}.cf{*zoom:1}
html{
	-webkit-text-size-adjust:none;
}
html,body{
	position: relative;
	width: 100%;
	height: 100%;
	margin:0 auto;
	overflow-x: hidden;
}
body{
	text-align:justify;
	font-family:"Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",arial,Helvetica,sans-serif;
}
#content{
	position: relative;
	height: 100%;
}
.swiper-container,
.swiper-wrapper,
.swiper-slide{
	position: relative;
	width: 100%;
	height: 100%;
}
.page_downBox{
	position: absolute;
	background: url(../images/page_downBox.png) top center no-repeat;
	background-size: contain;
	width: 12%;
	height: 8%;
	top: 91%;
	left: 44%;
}
.page_down{
	position: absolute;
	background: url(../images/page_down.png) top center no-repeat;
	background-size: contain;
	width: 50%;
	height: 100%;
	top: 55%;
	left: 25%;
    animation: up 2.5s ease infinite;
    -webkit-animation: up 2.5s ease infinite;
}
.page_downBox2{
	position: absolute;
	background: url(../images/page_downBox2.png) top center no-repeat;
	background-size: contain;
	width: 12%;
	height: 8%;
	top: 91%;
	left: 44%;
}
.page_down2{
	position: absolute;
	background: url(../images/page_down2.png) top center no-repeat;
	background-size: contain;
	width: 50%;
	height: 100%;
	top: 55%;
	left: 25%;
    animation: up 2.5s ease infinite;
    -webkit-animation: up 2.5s ease infinite;
}
@keyframes up {
  0% {opacity: 0;}
  50% {opacity: 1; -webkit-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 0);}
  100% {opacity: 0; -webkit-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0);}
}
@-webkit-keyframes up {
	0% {opacity: 0;}
	50% {opacity: 1; -webkit-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 0);}
	100% {opacity: 0; -webkit-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0);}
}
.music_btn{
	position: absolute;
	display: block;
	width: 7%;
	left: 89%;
	top: 3%;
}
.music_btn span{
 	display: block;
  	width: 100%;
  	height: 100%;
 	background:url(../images/music_bg.png) center center no-repeat;
 	background-size: 100% 100%;
}
.music_anim{
    animation: music_a 2s linear infinite;
    -webkit-animation: music_a 2s linear infinite;
}
@keyframes music_a{
	from { transform:rotate(0deg); }
	to { transform:rotate(360deg); }
}
@-webkit-keyframes music_a{
	from{ -webkit-transform:rotate(0deg); }
	to{ -webkit-transform:rotate(360deg); }
}
@-moz-keyframes music_a{
	from{ transform:rotate(0deg); }
	to{ transform:rotate(360deg); }
}
@-o-keyframes music_a{
	from{ transform:rotate(0deg); }
	to{ transform:rotate(360deg); }
}
.page1{
	background: url(../images/page1_bg.jpg) top center no-repeat;
	background-size: cover;
}
.page1_txt1{
	position: absolute;
	background: url(../images/page1_txt1.png) top center no-repeat;
	background-size: contain;
	width: 70%;
	height: 5%;
	top: 14.5%;
	left: 15%;
}
.page1_txt2{
	position: absolute;
	background: url(../images/page1_txt2.png) top center no-repeat;
	background-size: contain;
	width: 72%;
	height: 20%;
	top: 21%;
	left: 14%;
}
.page2{
	background: url(../images/page2_bg.jpg) top center no-repeat;
	background-size: cover;
}
.page2 .num1{
	position: absolute;
	background: url(../images/num1.png) top center no-repeat;
	background-size: contain;
	width: 17%;
	height: 17%;
	top: 22%;
	left: 8%;
}
.page2 .txt1{
	position: absolute;
	background: url(../images/page2_txt1.png) top center no-repeat;
	background-size: contain;
	width: 56%;
	height: 10%;
	top: 21.5%;
	left: 33%;
}
.page2 .icon_box1{
	position: relative;
	width: 58%;
	height: 8%;
	top: 31%;
	left: 33%;
}
.page2 .icon_box1 .icon1,
.page2 .icon_box1 .icon2,
.page2 .icon_box1 .icon3{
	width: 22%;
	height: 100%;
	float: left;
}
.page2 .icon_box1 .icon1{
	background: url(../images/page2_icon_box1_icon1.png) top center no-repeat;
	background-size: contain;
}
.page2 .icon_box1 .icon2{
	background: url(../images/page2_icon_box1_icon2.png) top center no-repeat;
	background-size: contain;
	margin: 0 16%;
}
.page2 .icon_box1 .icon3{
	background: url(../images/page2_icon_box1_icon3.png) top center no-repeat;
	background-size: contain;
}
.page2 .num2{
	position: absolute;
	background: url(../images/num2.png) top center no-repeat;
	background-size: contain;
	width: 17%;
	height: 17%;
	top: 47%;
	left: 73%;
}
.page2 .txt2{
	position: absolute;
	background: url(../images/page2_txt2.png) top center no-repeat;
	background-size: contain;
	width: 56%;
	height: 10%;
	top: 46.5%;
	left: 8%;
	/*border: 1px solid;*/
}
.page2 .icon_box2{
	position: relative;
	width: 65%;
	height: 8%;
	top: 48%;
	left: 8%;
}
.page2 .icon_box2 .icon1,
.page2 .icon_box2 .icon2,
.page2 .icon_box2 .icon3{
	width: 22%;
	height: 100%;
	float: left;
}
.page2 .icon_box2 .icon1{
	background: url(../images/page2_icon_box2_icon1.png) top center no-repeat;
	background-size: contain;
}
.page2 .icon_box2 .icon2{
	background: url(../images/page2_icon_box2_icon2.png) top center no-repeat;
	background-size: contain;
	height: 80%;
	margin: 1.5% -1% 0 -1%;
}
.page2 .icon_box2 .icon3{
	background: url(../images/page2_icon_box2_icon3.png) top center no-repeat;
	background-size: contain;
	width: 38%;
	margin-top: -0%;
}
/*3*/
.page2 .num3{
	position: absolute;
	background: url(../images/num3.png) top center no-repeat;
	background-size: contain;
	width: 17%;
	height: 17%;
	top: 72%;
	left: 8%;
}
.page2 .txt3{
	position: absolute;
	background: url(../images/page2_txt3.png) top center no-repeat;
	background-size: contain;
	width: 56%;
	height: 10%;
	top: 71.5%;
	left: 33%;
}
.page2 .icon_box3{
	position: relative;
	width: 58%;
	height: 9%;
	top: 64.1%;
	left: 33%;
}
.page2 .icon_box3 .icon1,
.page2 .icon_box3 .icon2{
	position: relative;
	width: 46%;
	height: 100%;
	float: left;
}
.page2 .icon_box3 .icon1{
	background: url(../images/page2_icon_box3_icon1.png) top center no-repeat;
	background-size: contain;
	top: 22%;
}
.page2 .icon_box3 .icon2{
	background: url(../images/page2_icon_box3_icon2.png) top center no-repeat;
	background-size: contain;
	width: 50%;
	height: 110%;
	left: 6%;
	top: -8%;
}

.page3{
	background: url(../images/page3_bg.jpg) top center no-repeat;
	background-size: cover;
}
.page3_card{
	position: relative;
	background: url(../images/page3_card.png) top center no-repeat;
	background-size: contain;
	width: 90%;
	height: 40%;
	top: 13%;
	left: 4%;
}
.page3_txt1{
	position: relative;
	display: inline-block;
	background: url(../images/page3_txt1.png) top center no-repeat;
	background-size: contain;
	width: 44%;
	height: 10%;
	margin-top: 3%;
	left: 5%;
}
.page3_txt2{
	position: relative;
	display: inline-block;
	background: url(../images/page3_txt2.png) top center no-repeat;
	background-size: contain;
	width: 44%;
	height: 10%;
	margin-top: 3%;
	left: 6%;
}
.page3_round_box{
	position: relative;
	width: 80%;
	height: 23%;
	margin: 0 auto;
	margin-top: 21%;
}
.page3_round1,
.page3_round2{
	width: 45%;
	height: 100%;
	float: left;
}
.page3_round1{
	background: url(../images/page3_round1.png) top center no-repeat;
	background-size: contain;
	color: #fff;
}
.page3_round2{
	background: url(../images/page3_round2.png) top center no-repeat;
	background-size: contain;
	color: #fff;
	float: right;
}
.page3_btn1{
	position: relative;
	text-align: center;
	width: 60%;
	height: 12%;
	margin: 0 auto;
	top: 64%;
	color: #fff;
	border: 2px solid #fff;
}
.page3_btn2{
	position: relative;
	text-align: center;
	width: 60%;
	height: 12%;
	margin: 0 auto;
	top: 64%;
	color: #fff;
	border: 2px solid #fff;
}
.page3_popup1,
.page3_popup2,
.page4_popup1,
.page4_popup2,
.page4_popup3,
.page4_popup4{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 9;
}
.page3_popup1_bg,
.page3_popup2_bg,
.page4_popup1_bg,
.page4_popup2_bg,
.page4_popup3_bg,
.page4_popup4_bg{
	position: absolute;
	width: 86%;
	height: 65%;
	top: 16%;
	left: 7%;
}
.page3_popup1_bg{
	position: absolute;
	background: url(../images/page3_popup1_bg.png) top center no-repeat;
	background-size: contain;
}
.page3_popup2_bg{
	position: absolute;
	background: url(../images/page3_popup2_bg.png) top center no-repeat;
	background-size: contain;
}
.page4_popup1_bg{
	position: absolute;
	background: url(../images/page4_popup1_bg.png) top center no-repeat;
	background-size: contain;
}
.page4_popup2_bg{
	position: absolute;
	background: url(../images/page4_popup2_bg.png) top center no-repeat;
	background-size: contain;
}
.page4_popup3_bg{
	position: absolute;
	background: url(../images/page4_popup3_bg.png) top center no-repeat;
	background-size: contain;
}
.page4_popup4_bg{
	position: absolute;
	background: url(../images/page4_popup4_bg.png) top center no-repeat;
	background-size: contain;
}
.page3_popup1_bg .close,
.page3_popup2_bg .close,
.page4_popup1_bg .close,
.page4_popup2_bg .close,
.page4_popup3_bg .close,
.page4_popup4_bg .close{
	position: absolute;
	background: url(../images/close.png) top center no-repeat;
	background-size: contain;
	width: 8%;
	height: 9%;
	top: -10%;
	right: 1%;
}
.page4{
	background: url(../images/page4_bg.jpg) top center no-repeat;
	background-size: cover;
}
.page4_txt1{
	position: absolute;
	background: url(../images/page4_txt1.png) top center no-repeat;
	background-size: contain;
	width: 92%;
	height: 5%;
	top: 22%;
	left: 4%;
}
.page4_round_box1,
.page4_round_box2{
	position: relative;
	width: 80%;
	height: 23%;
	margin: 0 auto;
	top: 31%;
}
.page4_round_box2{
	top: 38%;
}
.page4_round1,
.page4_round2,
.page4_round3,
.page4_round4{
	position: relative;
	width: 39%;
	height: 100%;
	top: 0;
}
.page4_round1{
	background: url(../images/page4_round1.png) top center no-repeat;
	background-size: contain;
	float: left;
}
.page4_round2{
	background: url(../images/page4_round2.png) top center no-repeat;
	background-size: contain;
	float: right;
}
.page4_round3{
	background: url(../images/page4_round3.png) top center no-repeat;
	background-size: contain;
	float: left;
}
.page4_round4{
	background: url(../images/page4_round4.png) top center no-repeat;
	background-size: contain;
	float: right;
}
.page4_btn1,
.page4_btn2,
.page4_btn3,
.page4_btn4{
	position: absolute;
	text-align: center;
	width: 74%;
	height: 18%;
	top: 92%;
	left: 13%;
	color: #fff;
	font-weight: bold;
	background: #976336;
}
.page5{
	background: url(../images/page5_bg.jpg) top center no-repeat;
	background-size: cover;
}

/*------- box -------*/
.page5_img_box1,
.page5_img_box2,
.page5_img_box3,
.page5_img_box4{
	position: relative;
	width: 86%;
	height: 12.5%;
	margin: 0 auto;
}
.page5_img_box1{
	top: 18%;
}
.page5_img_box2{
	top: 24%;
}
.page5_img_box3{
	top: 31%;
}
.page5_img_box4{
	top: 35%;
}

.page5_img_box1 span,
.page5_img_box2 span,
.page5_img_box3 span,
.page5_img_box4 span{
	display: inline-block;
}

/*------- num -------*/
.page5_num1,
.page5_num2,
.page5_num3,
.page5_num4{
	width: 7%;
	height: 100%;
}
.page5_num1{
	position: absolute;
	background: url(../images/page5_num1.png) top center no-repeat;
	background-size: contain;
	margin-top: -0.5%;
}
.page5_num2{
	position: absolute;
	background: url(../images/page5_num2.png) top center no-repeat;
	background-size: contain;
	width: 10%;
	top: 34%;
	right: 3%;
}
.page5_num3{
	position: absolute;
	background: url(../images/page5_num3.png) top center no-repeat;
	background-size: contain;
	width: 10%;
}
.page5_num4{
	position: absolute;
	background: url(../images/page5_num4.png) top center no-repeat;
	background-size: contain;
	width: 10%;
	right: 3%;
	top: 5%;
}

/*------- img -------*/
.page5_img1{
	background: url(../images/page5_img1.png) top center no-repeat;
	background-size: contain;
	width: 56%;
	height: 100%;
	margin-left: 15%;
}
.page5_img2{
	width: 25%;
	margin-left: 10%;
	margin-top: -9%;
	z-index: 999;
	transform: scale(1,1);
	-webkit-transform:scale(1,1);
	position: relative;
	display: block;
}
.page5_img2_2{
	position: absolute;
	background: url(../images/page5_img2_2.png) top center no-repeat;
	background-size: contain;
	width: 26.4%;
	height: 100%;
	left: 50%;
	margin-top: -10%;
	z-index: 3;
}
.page5_img3{
	background: url(../images/page5_img3.png) top center no-repeat;
	background-size: contain;
	width: 73%;
	height: 100%;
	margin-left: 15%;
}
.page5_img4{
	background: url(../images/page5_img4.png) top center no-repeat;
	background-size: contain;
	width: 63%;
	height: 100%;
	margin-left: 12%;
	margin-top: -2%;
}

/*------- line -------*/
.page5_line1{
	position: absolute;
	background: url(../images/page5_line1.png) top center no-repeat;
	background-size: contain;
	width: 90%;
	height: 100%;
	top: 11%;
	left: 5%;
}
.page5_line2{
	position: absolute;
	background: url(../images/page5_line2.png) top center no-repeat;
	background-size: contain;
	width: 90%;
	height: 100%;
	top: 40%;
	left: 5%;
}
.page5_line3{
	position: absolute;
	background: url(../images/page5_line3.png) top center no-repeat;
	background-size: contain;
	width: 90%;
	height: 100%;
	top: 11%;
	left: 5%;
}
.page5_line4{
	position: absolute;
	background: url(../images/page5_line2.png) top center no-repeat;
	background-size: contain;
	width: 90%;
	height: 100%;
	top: 11%;
	left: 5%;
}
.page6{
	background: url(../images/page6_bg.jpg) top center no-repeat;
	background-size: cover;
}
.page6_txt1{
	position: relative;
	background: url(../images/page6_txt1.png) top center no-repeat;
	background-size: contain;
	width: 86%;
	height: 18%;
	margin: 0 auto;
	top: 17%;
}
.page6_txt2{
	position: relative;
	background: url(../images/page6_txt2.png) top center no-repeat;
	background-size: contain;
	width: 62%;
	height: 5%;
	left: 7%;
	top: 17%;
}
.page6_img_box{
	position: relative;
	width: 86%;
	height: 23%;
	margin: 0 auto;
	top: 17%;
}
.page6_img1{
	position: absolute;
	background: url(../images/page6_img1.png) top center no-repeat;
	background-size: contain;
	width: 40%;
	height: 100%;
	float: left;
}
.page6_img2{
	position: relative;
	background: url(../images/page6_img2.png) top center no-repeat;
	background-size: contain;
	width: 100%;
	height: 75%;
}
.page6_img3{
	position: relative;
	background: url(../images/page6_img3.png) top center no-repeat;
	background-size: contain;
	width: 100%;
	height: 2.5%;
	top: 14%;
}
.page6_txt3{
	position: relative;
	background: url(../images/page6_txt3.png) top center no-repeat;
	background-size: contain;
	width: 86%;
	height: 25%;
	margin: 0 auto;
	top: 24%;
}