html{
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%; 
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-size: calc(100vw*16/320);
}
body{
   font-size: 62.5%;
}
/***** loading *****/
.loader { display: block; position:fixed; z-index: 50; bottom:28px; left:50%; margin-left:-28px; width:56px; height:56px; font-size: 12px; color: #fff;}
.loader center{ position:absolute; bottom:0; width:56px;}
.loader center var{ text-align:center; line-height:56px; font-size:1rem;}
.loader #circles{width:56px; height:56px;}
.circles-wrp{width:56px; height:56px;}
.circles-integer{ display:none;}
/*s4*/
.swiper-container{ height:100%;}
.s4{
	text-align: center;
}
.s4 { position:relative;-webkit-transition:all 0.8s ease-out;transition:all 0.8s ease-out;}
.s4 .page1_text{ position:absolute; left:0; top:0;-webkit-transition:all 0.8s ease-out;transition:all 0.8s ease-out; z-index:3;}
.s4 .page1_img1{ position:static;width: 90%;}
.page1_img1{ position:static; margin-top:8.625rem;}
.page1_img.page1_img2{ position:absolute; top:11rem; left:0; width:100%; z-index:2;}

.s4 .page1_text{
	-webkit-transition: opacity 1s, transform 1s;
	-moz-transition: opacity 1s, transform 1s;
	-ms-transition: opacity 1s, transform 1s;
	-o-transition: opacity 1s, transform 1s;
	transition: opacity 1s, transform 1s;
	opacity: 0;
	width: 100%; z-index:3;
}
.s4 .page1_text.show{
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}
.s4 .page1_text1{ top:2.8rem; width: 100%;z-index: 3;position: absolute;left: 0;}
.s4 .page1_text2,.s4 .page1_text4{ top:4.8125rem;}
.s4 .page1_text3,.s4 .page1_text5{ top:8.4375rem;}
.s4 .page1_text2,.s4 .page1_text4,.s4 .page1_text3,.s4 .page1_text5{
	-webkit-transform: translateY(1rem);
	-moz-transform: translateY(1rem);
	-ms-transform: translateY(1rem);
	-o-transform: translateY(1rem);
	transform: translateY(1rem);
}
.s4 .page1_text6{ 
	top:5.625rem;
	background-image: url(../images/page1_text6_1.png);
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: center center;
}
.s4 .page1_text6 img{
	width: 100%;
	vertical-align: top;
	opacity: 0;
}
.s4 .page1_text6.show img{
	/*-webkit-animation: sec6img 2s 0.5s both;
	-moz-animation: sec6img 2s 0.5s both;
	-ms-animation: sec6img 2s 0.5s both;
	-o-animation: sec6img 2s 0.5s both;
	animation: sec6img 2s 0.5s both;*/
}
@-webkit-keyframes sec6img{
    0%{ opacity: 0;}
    50%{ opacity: 1;}
    100%{ opacity: 0;}
}
@-moz-keyframes sec6img{
    0%{ opacity: 0;}
    50%{ opacity: 1;}
    100%{ opacity: 0;}
}
@-ms-keyframes sec6img{
    0%{ opacity: 0;}
    50%{ opacity: 1;}
    100%{ opacity: 0;}
}
@-o-keyframes sec6img{
    0%{ opacity: 0;}
    50%{ opacity: 1;}
    100%{ opacity: 0;}
}
@keyframes sec6img{
    0%{ opacity: 0;}
    50%{ opacity: 1;}
    100%{ opacity: 0;}
}
.s4 .page1_text2.show.texthide,.s4 .page1_text3.show.texthide,.s4 .page1_text4.show.texthide,.s4 .page1_text5.show.texthide{
	opacity: 0;
	-webkit-transform: translateY(-1rem);
	-moz-transform: translateY(-1rem);
	-ms-transform: translateY(-1rem);
	-o-transform: translateY(-1rem);
	transform: translateY(-1rem);
}
.s4 .page1_img2{ top:11rem;}
.page1_img2{ opacity:0;}
.s4 p{ opacity:0; color:#94d3fd; font-size:1rem; position:absolute; bottom:5.625rem; width:100%; text-align:center;-webkit-transition:all 0.8s ease-out;transition:all 0.8s ease-out;z-index: 2;}

.s4 .arrow{ 
	display: block;
	opacity:0;
	position:absolute; 
	width: auto; 
	height:1.75rem;
	top: auto; 
	bottom:3rem;
	left:0;
	right: 0;
	margin: 0 auto;
	z-index: 2;
}
.s4 .arrow.active{
	-webkit-animation: 	appearTitleRT 1s infinite ease-in-out;
	-moz-animation: 	appearTitleRT 1s infinite ease-in-out;
	-ms-animation: 		appearTitleRT 1s infinite ease-in-out;
	-o-animation: 		appearTitleRT 1s infinite ease-in-out;
	animation: 			appearTitleRT 1s infinite ease-in-out;
}
/*s5*/
.s5 { position:relative;-webkit-transition:all 0.8s ease-out;transition:all 0.8s ease-out; background-repeat:no-repeat; background-position:center; background-size:cover;}
.s5 canvas { width: 100% !important; height: 100% !important;}


.section{ width:100%; height:100%; position:absolute;}
.canvas_hand{ display:none; position:fixed; top:10%; width:40%; left:30%;}

@-webkit-keyframes ani5-1{
    0%{ -webkit-transform: scale(1); opacity: 0;}
    20%, 50%{ -webkit-transform: scale(1); opacity: 0.7;}
    100%{ -webkit-transform: scale(1.6); opacity: 0;}
}




@media only screen and (max-width:767px){
	
}






/***** 动画效果 *****/
.no_animation { -webkit-animation: none !important;}
@-webkit-keyframes Zindex { 0%{ -webkit-transform: skewX(0); }}
@-webkit-keyframes fadeIn{
    0%{ opacity: 0;}
    100%{ opacity: 1;}
}
@-webkit-keyframes fadeOut{
	0%{ opacity: 1;}
    100%{ opacity: 0;}
}
/*试试向下按钮-出现效果*/
@-webkit-keyframes appearTitleRT {
	0%	{ opacity: 0; -webkit-transform: translateY(5px);}
	100%{ opacity: 1; -webkit-transform: translateY(-5px);}
}@-moz-keyframes appearTitleRT {
	0%	{ opacity: 0; -moz-transform: translateY(5px);}
	100%{ opacity: 1; -moz-transform: translateY(-5px);}
}@-ms-keyframes appearTitleRT {
	0%	{ opacity: 0; -ms-transform: translateY(5px);}
	100%{ opacity: 1; -ms-transform: translateY(-5px);}
}@-o-keyframes appearTitleRT {
	0%	{ opacity: 0; -o-transform: translateY(5px);}
	100%{ opacity: 1; -o-transform: translateY(-5px);}
}@keyframes appearTitleRT {
	0%	{ opacity: 0; transform: translateY(5px);}
	100%{ opacity: 1; transform: translateY(-5px);}
}