@charset "utf-8";
/* CSS Document */
.home{
	position: relative;
	width: 100%;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 0%;
	background-image: url(../images/index.jpg);
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	overflow:hidden;
	}
.hcon{
	position:relative;
	width:1000px;
	padding-bottom:1000px;
	margin:0 auto;
	}
/**/
.logo{
	position:absolute;
	width:247px;
	padding-bottom:157px;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 0%;
	background-image: url(../images/logo.png);
	top:0;
	left:0;
	cursor:pointer;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.gh{
	position:absolute;
	width:8%;/*80*/
	padding-bottom:2.9%;/*29*/
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 0%;
	background-image: url(../images/gh.png);
	background-size:100% auto;
	top:55.3%;/*553*/
	left:53.7%;/*537*/
	}
.mubx{
	position:absolute;
	width:41.3%;/*413*/
	top:55.3%;/*553*/
	left:46.8%;/*468*/
	text-align:center;
	}
.mubx a{
	position:relative;
	width:12.348%;/*51*/
	display:inline-block;
	margin:0 4.2%;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 0%;
	background-size:100% auto;
	opacity:0;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.mubx a:nth-child(1){margin:0 4.2% 0 0;}
.mubx a:nth-child(5){margin:0 0 0 4.2%;}
.mubx a > span{
	position:relative;
	width:100%;/*51*/
	padding-bottom:607.84%;
	display:block;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 0%;
	background-size:100% auto;
	opacity:0;
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.mubx a:hover > span{opacity:1;}	
.mu1{
	background-image: url(../images/mu_1.png);
	animation:fadeInRight .6s ease-out;
	animation-fill-mode:forwards;
	-webkit-animation:fadeInRight .6s ease-out;
	-webkit-animation-fill-mode:forwards;
	}	
.mu1 > span{background-image: url(../images/mu_1a.png);}
.mu2{background-image: url(../images/mu_2.png);
	animation:fadeInRight .6s ease-out .2s;
	animation-fill-mode:forwards;
	-webkit-animation:fadeInRight .6s ease-out .2s;
	-webkit-animation-fill-mode:forwards;
	}	
.mu2 > span{background-image: url(../images/mu_2a.png);}
.mu3{background-image: url(../images/mu_3.png);
	animation:fadeInRight .6s ease-out .3s;
	animation-fill-mode:forwards;
	-webkit-animation:fadeInRight .6s ease-out .3s;
	-webkit-animation-fill-mode:forwards;
	}	
.mu3 > span{background-image: url(../images/mu_3a.png);}
.mu4{background-image: url(../images/mu_4.png);
	animation:fadeInRight .6s ease-out .4s;
	animation-fill-mode:forwards;
	-webkit-animation:fadeInRight .6s ease-out .4s;
	-webkit-animation-fill-mode:forwards;
	}	
.mu4 > span{background-image: url(../images/mu_4a.png);}
.mu5{background-image: url(../images/mu_5.png);
	animation:fadeInRight .6s ease-out .5s;
	animation-fill-mode:forwards;
	-webkit-animation:fadeInRight .6s ease-out .5s;
	-webkit-animation-fill-mode:forwards;
	}	
.mu5 > span{background-image: url(../images/mu_5a.png);}
		
/**/			
@media only screen and (max-width:1400px){
/**/
}
@media only screen and (max-width:1000px){	
/**/
.home{background-size:200% auto;}
.hcon{width:100%;padding-bottom:100%;}
/**/
.logo{
	width:24.7%;
	padding-bottom:15.7%;
	background-size:100% auto; 
	}
	
}
@media only screen and (max-width:800px){
/**/
.home{background-image: url(../images/index_m.jpg);background-size:100% auto;}
.hcon{width:100%;padding-bottom:156.25%;}
/**/
.logo{
	width:30.874%;
	padding-bottom:19.62%;
	}
.gh{display:none;}
.mubx {
    width:75%;
    top:52.3%;
    left: 23%;
	}
.mubx a{margin: 0 2.5%;}


}
@media only screen and (max-width:750px){
/**/

}
@media only screen and (max-width:630px){
/**/


}
@media only screen and (max-width:580px){
	
}
@media only screen and (max-width:560px){
/**/
}
@media only screen and (max-width:450px){
/**/
}
@media only screen and (max-width:380px){
/**/
}
@media only screen and (max-width:360px){
/**/

}
@media only screen and (max-width:320px){
/**/

}