/*--------------------------------------------------------
main css
--------------------------------------------------------*/

body{
	background: #001630 url(images/balloonIndex_w_bg.jpg) repeat-x center bottom;
	}
div img {
	max-width: 100%;
	height: auto;
	}
#container{
	width: 100%;
	height: 100%;
	/*overflow: hidden;*/
	display: block;
	}
#tent{
	z-index: 10;
	left: auto;
	right: auto;
	height: 600px;
	}
#wrap{
	position: relative;
	max-width: 100%;
	margin: auto;
	}
@media (max-width: 998px) {
#container{
	max-width: 100%;
	height: 600px;
	background: url(../images/balloonIndex.jpg) no-repeat center top;
	-moz-background-size: cover;
	background-size: cover;
	/*overflow: hidden;*/
	}
#tent{
	margin: auto;
	display: block;
	max-width: 100%;
	background: url(../images/tent.png) no-repeat center top;
	-moz-background-size: cover;
	background-size: cover;

	}}

@media (max-width: 1260px) {
	#container{
	max-width: 1260px;
	background: url(../images/balloonIndex.jpg) no-repeat center top;
	display: block;
	margin: auto;
	}
	#tent{
	max-width: 1260px;
	background: url(../images/tent.png) no-repeat center top;
	display: block;
	margin: auto;
	}}

@media (max-width: 1260px) {
	#menu{
	position: relative;
	top: 0;
	z-index: 12;
	left: auto;
	right: auto;
	display: block;
	margin: auto;
	max-width: 530px;
	width: 100%;
	height: auto;
	visibility: visible;
	overflow: hidden;
	}
	#menu_wrap{
	position: relative;
	max-width: 530px;
	width: 100%;
	min-height: 320px;
	margin: auto;
	display: block;
	visibility: visible;
	}
	.box{
	position: absolute;
	visibility: visible;
	display: block;
	margin: auto;
	width: auto;
	}
	.box{
		width: 50%;
		height: auto;
		}
	.box img{
		width: 50%;
		height: auto;
		}
	.m00{
	z-index: 51;
	left: 0px;
	}
	.m01{
	z-index: 52;
	left: 130px;
	top: 5px;
	}
	.m02{
	z-index: 53;
	left: 258px;
	top: 20px;
	}
	.m03{
	z-index: 54;
	left: 388px;
	top: 20px;
	}
	.m04{
	z-index: 55;
	left: 60px;
	top: 110px;
	}
	.m05{
	z-index: 56;
	left: 200px;
	top: 135px;
	}
	.m06{
	z-index: 57;
	left: 328px;
	top: 128px;
	}}

@media (max-width: 480px) {
	#menu{
	position: relative;
	z-index: 12;
	top: 10px;
	left: 0px;
	right: auto;
	display: block;
	margin: auto;
	max-width: 400px;
	width: 100%;
	height: auto;
	visibility: visible;
	}
	#menu_wrap{
	position: relative;
	max-width: 400px;
	width: 100%;
	height: 200px;
	margin: auto;
	display: block;
	visibility: visible;
	}
	.m00{
	z-index: 51;
	left: 0px;
	}
	.m01{
	z-index: 52;
	left: 100px;
	top: 5px;
	}
	.m02{
	z-index: 53;
	left: 200px;
	top: 20px;
	}
	.m03{
	z-index: 60;
	left: 298px;
	top: 20px;
	}
	.m04{
	z-index: 55;
	left: 30px;
	top: 110px;
	}
	.m05{
	z-index: 56;
	left: 155px;
	top: 105px;
	}
	.m06{
	z-index: 57;
	left: 278px;
	top: 118px;
	}}
@media (max-width: 360px) {
	#menu{
	position: relative;
	z-index: 12;
	top: 10px;
	left: 0px;
	right: auto;
	display: block;
	margin: auto;
	max-width: 320px;
	width: 100%;
	height: auto;
	visibility: visible;
	}
	#menu_wrap{
	position: relative;
	max-width: 320px;
	width: 100%;
	height: 200px;
	margin: auto;
	display: block;
	visibility: visible;
	}
	.m00{
	z-index: 51;
	left: 0px;
	}
	.m01{
	z-index: 52;
	left: 80px;
	top: 5px;
	}
	.m02{
	z-index: 53;
	left: 160px;
	top: 20px;
	}
	.m03{
	z-index: 60;
	left: 238px;
	top: 20px;
	}
	.m04{
	z-index: 55;
	left: 30px;
	top: 110px;
	}
	.m05{
	z-index: 56;
	left: 125px;
	top: 105px;
	}
	.m06{
	z-index: 57;
	left: 218px;
	top: 118px;
	}}
@media (min-width: 1261px) {
	#container{
	max-width: 1260px;
	background: url(../images/balloonIndex.jpg) no-repeat center top;
	display: block;
	margin: auto;
	}
	#tent{
	max-width: 1260px;
	background: url(../images/tent.png) no-repeat center top;
	display: block;
	margin: auto;
	}
	#menu{
	position: relative;
	z-index: 12;
	top: 0;
	left: auto;
	right: auto;
	display: block;
	margin: auto;
	width: 530px;
	height: 289px;
	margin: auto;
	height: auto;
	visibility: visible;
	}
	#menu_wrap{
	position: relative;
	width: 530px;
	height: 289px;
	margin: auto;
	display: block;
	/*background: url(../images/menu_tt.jpg) no-repeat left top;*/
	overflow: hidden;
	visibility: visible;
	}
	.box{
	position: absolute;
	visibility: visible;
	}
	.m00{
	z-index: 51;
	left: 0px;
	}
	.m01{
	z-index: 52;
	left: 130px;
	top: 5px;
	}
	.m02{
	z-index: 53;
	left: 268px;
	top: 20px;
	}
	.m03{
	z-index: 60;
	left: 388px;
	top: 20px;
	}
	.m04{
	z-index: 55;
	left: 60px;
	top: 110px;
	}
	.m05{
	z-index: 56;
	left: 200px;
	top: 135px;
	}
	.m06{
	z-index: 57;
	left: 328px;
	top: 128px;
	}}

	.box a img{
		/*width: auto;*/
		filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
		-webkit-opacity: 0.9;
		-moz-opacity: 0.9;
		-o-opacity: 0.9;
		opacity: 0.9;
	}
	.box a img:hover{
		/*width: auto;*/
		filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
		-webkit-opacity: 1;
		-moz-opacity: 1;
		-o-opacity: 1;
		opacity: 1;
	}

	.m00{
	z-index: 51;
		animation:MyMoveM00 2s infinite alternate;
		-moz-animation:MyMoveM00 2s infinite alternate;
		-webkit-animation:MyMoveM00 2s infinite alternate;
		-o-animation:MyMoveM00 2s infinite alternate;
	}

	.m01{
	z-index: 52;
		animation:MyMoveM01 2.5s infinite alternate;
		-o-animation:MyMoveM01 2.5s infinite alternate;
		-moz-animation:MyMoveM01 2.5s infinite alternate;
		-webkit-animation:MyMoveM01 2.5s infinite alternate;
	}

	.m02{
	z-index: 53;
		animation:MyMoveM02 3s infinite alternate
		-o-animation:MyMoveM02 3s infinite alternate;
		-moz-animation:MyMoveM02 3s infinite alternate;
		-webkit-animation:MyMoveM02 3s infinite alternate;
	}

	.m03{
	z-index: 60;
		animation:MyMoveM03 2s infinite alternate;
		-o-animation:MyMoveM03 2s infinite alternate;
		-moz-animation:MyMoveM03 2s infinite alternate;
		-webkit-animation:MyMoveM03 2s infinite alternate;
	}

	.m04{
	z-index: 55;
		animation:MyMoveM04 3s infinite alternate;
		-o-animation:MyMoveM04 3s infinite alternate;
		-moz-animation:MyMoveM04 3s infinite alternate;
		-webkit-animation:MyMoveM04 3s infinite alternate;
	}

	.m05{
	z-index: 56;
		animation:MyMoveM05 2s infinite alternate;
		-o-animation:MyMoveM05 2s infinite alternate;
		-moz-animation:MyMoveM05 2s infinite alternate;
		-webkit-animation:MyMoveM05 2s infinite alternate;

	}

	.m06{
	z-index: 57;
		animation:MyMoveM06 3s infinite alternate;
		-o-animation:MyMoveM06 3s infinite alternate;
		-moz-animation:MyMoveM06 3s infinite alternate;
		-webkit-animation:MyMoveM06 3s infinite alternate;

	}

	@keyframes MyMoveM00 {
		 from {top:0px;}
		 to {top:8px;}
		}
		@-o-keyframes MyMoveM00 {
		 from {top:0px;}
		 to {top:8px;}
		}
		@-moz-keyframes MyMoveM00 {
		 from {top:0px;}
		 to {top:8px;}
		}
		@-webkit-keyframes MyMoveM00 {
		 from {top:0px;}
		 to {top:8px;}
		}

		@keyframes MyMoveM01 {
		 from {top:5px;}
		 to {top:0px;}
		}
		@-o-keyframes MyMoveM01 {
		 from {top:5px;}
		 to {top:0px;}
		}
		@-moz-keyframes MyMoveM01 {
		 from {top:5px;}
		 to {top:0px;}
		}
		@-webkit-keyframes MyMoveM01 {
		 from {top:5px;}
		 to {top:0px;}
		}

		@keyframes MyMoveM02 {
		 from {top:20px;}
		 to {top:10px;}
		}
		@-o-keyframes MyMoveM02 {
		 from {top:20px;}
		 to {top:10px;}
		}
		@-moz-keyframes MyMoveM02 {
		 from {top:20px;}
		 to {top:10px;}
		}
		@-webkit-keyframes MyMoveM02 {
		 from {top:20px;}
		 to {top:10px;}
		}

				@keyframes MyMoveM03 {
		 from {top:20px;}
		 to {top:14px;}
		}
		@-o-keyframes MyMoveM03 {
		 from {top:20px;}
		 to {top:14px;}
		}
		@-moz-keyframes MyMoveM03 {
		 from {top:20px;}
		 to {top:14px;}
		}
		@-webkit-keyframes MyMoveM03 {
		 from {top:20px;}
		 to {top:14px;}
		}

				@keyframes MyMoveM04 {
		 from {top:110px;}
		 to {top:126px;}
		}
		@-o-keyframes MyMoveM04 {
		 from {top:110px;}
		 to {top:126px;}
		}
		@-moz-keyframes MyMoveM04 {
		 from {top:110px;}
		 to {top:126px;}
		}
		@-webkit-keyframes MyMoveM04 {
		 from {top:110px;}
		 to {top:126px;}
		}

				@keyframes MyMoveM05 {
		 from {top:135px;}
		 to {top:124px;}
		}
		@-o-keyframes MyMoveM05 {
		 from {top:135px;}
		 to {top:124px;}
		}
		@-moz-keyframes MyMoveM05 {
		 from {top:135px;}
		 to {top:124px;}
		}
		@-webkit-keyframes MyMoveM05 {
		 from {top:135px;}
		 to {top:124px;}
		}

		@keyframes MyMoveM06 {
		 from {top:128px;}
		 to {top:122px;}
		}
		@-o-keyframes MyMoveM06 {
		 from {top:128px;}
		 to {top:122px;}
		}
		@-moz-keyframes MyMoveM06 {
		 from {top:128px;}
		 to {top:122px;}
		}
		@-webkit-keyframes MyMoveM06 {
		 from {top:128px;}
		 to {top:122px;}
		}

@media (min-width: 955px) and (max-width: 1199px) {
#footer{
	position: fixed;
	z-index: 11;
	bottom: -80px;
	width: 100%;
	display: block;
	}
#footer_wrap{
	clear: both;
	max-width: 980px;
	width: 100%;
	height: 380px;
	margin: auto;
	}
#qjym{
	width: 30%;
	position: relative;
	z-index: 99;
	bottom: 0px;
	left: 0px;
	float: left;
	/*margin: 80px 0 0 0;*/
	}
#contect{
	width: 20%;
	position: relative;
	z-index: 99;
	right: 60px;
	bottom: 0px;
	float: right;
	/*margin: 83px 0 0 0;*/
	}

#qjym,
#qjym img,
#contect img{
	width: auto;
	bottom: 0px;
	}
#contect,
#contect img{
	width: auto;
	bottom: 0px;
	}}
@media (max-width: 360px) {
#footer_wrap{
	clear: both;
	width: 100%;
	height: 300px;
	margin: auto;
	overflow: hidden;
	display: block;
	}

#qjym{
	max-width: 60%;
	}
#qjym img{
	max-width: 100%;
	bottom: 0px;
	}
#contect{
	max-width: 30%;
	margin-left: 5%;
	}
#contect img{
	max-width: 90%;
	bottom: 0px;
	}}
@media (max-width: 954px) {
	#footer{
	margin: 120px auto 0;
	}}
@media (max-width: 520px) {
	#footer{
	margin: 90px auto;
	}}
@media (max-width: 460px) {
	#footer{
	margin: 80px auto;
	}}
@media (max-width: 340px) {
	#footer{
	margin: 40px auto;
	}}
@media (max-width: 310px) {
	#footer{
	margin: 0px auto;
	}}
@media (max-width: 954px) {	/*954 min-width: 981px*/
#footer{
	/*position: fixed;*/
	/*z-index: 11;*/
	clear: both;
	width: 100%;
	/*margin: -85px auto 0;*/
	display: block;
	}

#footer_wrap{
	clear: both;
	width: 100%;
	margin: auto;
	height: 380px;
	overflow: hidden;
	}

#qjym,
#contect{
	margin: 80px 0 0 0;
}
#qjym{
	position: relative;
	float: left;
	left: 0px;
	width: 249px;
	height: 380px;
	}

#contect{
	position: relative;
	float: right;
	width: 104px;
	height: 237px;
	right: 5%;
	}}

.msg_qjym{
	position: absolute;
	z-index: 62;
	left: 40px;
	}
.msg_contect{
	position: absolute;
	z-index: 62;
	top: 70px;
	}

@media (min-width: 1200px) {
#footer{
	position: fixed;
	z-index: 11;
	width: 100%;
	margin: auto;
	top: 350px;
	display: block;
	}
#footer_wrap{
	clear: both;
	width: 960px;
	margin: auto;
	/*overflow: hidden;*/
	}
#qjym{
	position: relative;
	float: left;
	bottom: 0px;
	left: 0px;
	width: 249px;
	height: 380px;
	}

#contect{
	position: relative;
	float: right;
	width: 104px;
	height: 340px;
	/*height: 237px;*/
	right: 10%;
	bottom: 0px;
	}}

.msg_qjym{
	position: absolute;
	z-index: 62;
	top: -80px;
	left: 40px;
	}
.msg_contect{
	position: absolute;
	z-index: 62;
	top: 70px;
	left: -70px;
	}