@charset "utf-8";
/* CSS Document */


body{overflow:hidden;}
body{ font-family:"微软雅黑","黑体";}

.mb{ display:none;}
.pc{ display:block;}
.mb_pad{ display:none;}


#main{ width:100%; position:relative; overflow:hidden; margin-top:82px; background:url(../img/homeBg.jpg) no-repeat; background-size:cover;}
.btnAll{ width:558px; height:842px; position:absolute; top:0; right:0; transform-origin:right top;}
.btn1,.btn2{ width:299px; height:346px; position:absolute; cursor:pointer;}
.btn1{ background:url(../img/homeBtn1.png) no-repeat; background-size:100% 100%; left:0; bottom:30px;}
.btn2{ background:url(../img/homeBtn2.png) no-repeat; background-size:100% 100%; right:100px; top:185px;}
.btn1 img,.btn2 img{ width:100%; height:auto;}
.btn1:hover,.btn2:hover{ opacity:0.55;}


.toSmall{ animation:.3s toSmall 1 linear; -moz-animation:.3s toSmall 1 linear; -ms-animation:.3s toSmall 1 linear; -o-animation:.3s toSmall 1 linear; -webkit-animation:.3s toSmall 1 linear; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -ms-animation-fill-mode:forwards; -o-animation-fill-mode:forwards;}
.toBig{ animation:.3s toBig 1 linear; -moz-animation:.3s toBig 1 linear; -ms-animation:.3s toBig 1 linear; -o-animation:.3s toBig 1 linear; -webkit-animation:.3s toBig 1 linear; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -ms-animation-fill-mode:forwards; -o-animation-fill-mode:forwards;}
@keyframes toBig{
	0%{ transform:scale(1);}
	100%{ transform:scale(1.063);}
}
@-moz-keyframes toBig{
	0%{ transform:scale(1);}
	100%{ transform:scale(1.063);}
}
@-ms-keyframes toBig{
	0%{ transform:scale(1);}
	100%{ transform:scale(1.063);}
}
@-o-keyframes toBig{
	0%{ transform:scale(1);}
	100%{ transform:scale(1.063);}
}
@-webkit-keyframes toBig{
	0%{ transform:scale(1);}
	100%{ transform:scale(1.063);}
}

@keyframes toSmall{
	0%{ transform:scale(1.063);}
	100%{ transform:scale(1);}
}
@-moz-keyframes toSmall{
	0%{ transform:scale(1.063);}
	100%{ transform:scale(1);}
}
@-ms-keyframes toSmall{
	0%{ transform:scale(1.063);}
	100%{ transform:scale(1);}
}
@-o-keyframes toSmall{
	0%{ transform:scale(1.063);}
	100%{ transform:scale(1);}
}
@-webkit-keyframes toSmall{
	0%{ transform:scale(1.063);}
	100%{ transform:scale(1);}
}



@media screen and (max-width: 1100px){
	.pc{ display:none;}
	.mb{ display:block;}
	
	
	
}


@media screen and (max-width: 1300px){
	#main{ margin-top:61px;}
	.mb_pad{ display:none;}
}

@media screen and (max-width: 1024px){
	.pc{ display:none;}
	.mb{ display:block;}
	.mb_pad{ display:none;}
	
	body,html{ width:100%; height:100%; overflow:hidden;}
	#main{ width:100%; overflow:hidden; margin-top:56px;}
	
}


@media screen and (max-width: 770px){
	body,html{ width:100%; height:100%;}
	.pad_mb{ display:none;}
	.mb_pad{ display:block;}
	#main{ margin-top:42px; background:url(../img/homeMbBg.jpg) no-repeat; background-size:cover;}
	.btnAll{ right:-40px; top:150px;}
	
}


/*5*/

@media  (max-width:320px) {
	.btnAll{ right:-40px; top:100px;}
}


/* iphone 4 wechat */
@media  (max-height: 420px) and (max-width: 320px) {
	.btnAll{ right:-40px; top:50px;}
}