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

/*Parallax*/
body {
	/*height: 4550px;*/
	height: 4292px;
	overflow-x: hidden;
}
#content {
	z-index: 4;
	position: relative;
	/*max-width: 940px;*/
	max-width: 1000px;
	padding: 0 10px;
	margin: 0 auto;
	line-height: 1.7;
	
	}
	#content article {
		width: 1000px;
		text-align: center;
		}
		#index-intro,
		#main-section,
		#about {
			/*padding-top: 105px;*/
			}
		#index-intro {
			position: absolute;
			top: 300px;
			left: 50px;
			}
		#main-section {
			position: absolute;
			top: 2180px;
			}
		#about {
			position: absolute;
			top: 3270px;
			}
#manned-flight ,
		#frameless-parachute,
		#english-channel,
		#about {
			/*padding-top: 105px;*/
			}
		#manned-flight {
			position: absolute;
			top: 220px;
			}
		#frameless-parachute {
			position: absolute;
			top: 1280px;
			}
		#english-channel {
			position: absolute;
			top: 3490px;
			}
			
		#about {
			position: absolute;
			top: 3270px;
			}


#parallax-bg3 {
	z-index: 3;
	position: fixed;
	left: 50%; /* align left edge with center of viewport */
	top: 0;
	width: 940px;
	margin-left: -470px; /* move left by half element's width */
	}
	/* 主圖 */
	#bg3-1 {
		position: absolute;
		/*top: -111px;*/
		top: 542px;
		left: calc(50% - 807px);
		}
	#bg3-2 {
		position: absolute;
		top: 2050px;
		left: calc(50% - 506px);
		}
	#bg3-3 {
		position: absolute;
		top: 3000px;
		left: calc(50% - 172px);
		}
	
/* 次圖 */
#parallax-bg2 {
	z-index: 4;
	position: fixed;
	left: 50%; /* align left edge with center of viewport */
	top: 0;
	width: 1200px;
	margin-left: -600px; /* move left by half element's width */
	}
	#bg2-1 {
		position: absolute;
		top: 1850px;
		left: -90px;
		}
	#bg2-2 {
		position: absolute;
		top: 1850px;
		right: 70px;
		}
	#bg2-3 {
		position: absolute;
		top: 1900px;
		right: 125px;
		}
	#bg2-4 {
		position: absolute;
		top: 1980px;
		right: 30px;
		}
	
/* 背景 */
#parallax-bg1 {
	z-index: 1;
	position: fixed;
	left: 50%; /* align left edge with center of viewport */
	top: 0;
	width: 1200px;
	margin-left: -600px; /* move left by half element's width */
	}
	#bg1-1 {
		position: absolute;
		top: 425px;
		left: 190px;
		}
	#bg1-2 {
		position: absolute;
		top: 440px;
		left: 995px;
		}
	#bg1-3 {
		position: absolute;
		top: 500px;
		left: 820px;
		}
	#bg1-4 {
		position: absolute;
		top: 550px;
		left: 450px;
		}
	#bg1-5 {
		position: absolute;
		top: 320px;
		left: 450px;
		}
	#bg1-6 {
		position: absolute;
		top: 270px;
		left: 600px;
		}
	#bg1-7 {
		position: absolute;
		top: 280px;
		left: 590px;
		}
	#bg1-8 {
		position: absolute;
		top: 550px;
		left: 910px;
		}
	#bg1-9 {
		position: absolute;
		top: 500px;
		left: 290px;
		}
	#bg1-10 {
		position: absolute;
		top: 380px;
		left: 350px;
		}
	#bg1-11 {
		position: absolute;
		top: 480px;
		left: 490px;
		}
	#bg1-12 {
		position: absolute;
		top: 590px;
		left: 390px;
		}
	#bg1-13 {
		position: absolute;
		top: 480px;
		left: 190px;
		}
	

#parallax-bg0 {
	z-index: 1;
	position: fixed;
	left: 50%; /* align left edge with center of viewport */
	top: 0;
	width: 1200px;
	margin-left: -600px; /* move left by half element's width */
	}
	#bg0-1 {
		position: absolute;
		top: 1080px;
		left: 990px;
		}
	#bg0-2 {
		position: absolute;
		top: 1110px;
		left: 90px;
		}
	#bg0-3 {
		position: absolute;
		top: 2000px;
		left: 990px;
		}
	#bg0-4 {
		position: absolute;
		top: 1550px;
		left: 1050px;
		}
	#bg0-5 {
		position: absolute;
		top: 1510px;
		left: 90px;
		}


@media only screen and (max-width: 999px) {
	body {
		height: 4320px;
	}
	#manned-flight {
			top: 130px;
			}
	#content article {
		width: 100%
		}
	.main-item {
		width: 100%;
	}
}

@media only screen and (max-width: 899px) {
	body {
		height: 5300px;
	}
	.main-item {
		width: 426px;
		margin: auto;
	}
	.main-item > div {
		margin-top: 25px;
		margin-bottom: 25px;
	}
	#bg3-2 {
		top: 2770px;
		}
	#english-channel {
		top: 4500px;
	}
	#bg3-3 {
		top: 3700px;
	}
	#index-footer  {
		top: 5050px;
	}
	#bg2-1 {
		top: 2490px;
	}
	#parallax-bg0 {
		width: 100%;
		left: auto;
		margin-left: auto;
	}
	#bg0-1 {
		right: 0;
		left: auto;
	}
	#bg0-3 {
		left: 20%;
	}
	#bg0-4 {
		left: auto;
		right: 5%;
	}
	
}
@media only screen and (max-width: 699px) {
	body {
		height: 5330px;
	}
	
}
@media only screen and (max-width: 599px) {
	body {
		height: 5310px;
	}
	#content article {
		width: 100%;
	}
	#frameless-parachute {
		top: 1400px;
	}
	#english-channel {
		top: 4300px;
	}
	#bg3-2 {
		width: 800px;
		height: auto;
		left: calc(50% - 400px);
	}
	#bg0-2 {
		left: 0;
		top: 1310px;
	}
	#bg0-1 {
		top: 1250px;
	}
	#bg3-3 {
		top: 3600px;
	}
}
@media only screen and (max-width: 499px) {
	body {
		height: 5000px;
	}
	#content article {
		width: 95%;
		ppadding: 0.5em;
	}
	.main-item {
		width: 330px;
	}
	.main-item > div {
		width: 330px;
		height: 330px;
		float: none;
		background-size: 330px;
	}
	.main-item > div h1 {
		font-size: 1.875em;
		margin-top: 30px;
		margin-bottom: 0px;
	}
	.item-description {
		margin: 10px auto;
		line-height: 1.5em;
	}
	.item-btn {
		width: 160px;
		height: 42px;
		margin-left: calc(50% - 80px);
	}
	.item-btn a {
		width: inherit;
		height: inherit;
		border-radius: 28px;
		display: inherit;
		padding-top: 5px;
	}
	.item-btn-description {
		width: 120px;
		margin-left: calc(50% - 60px);
		line-height: 1.5em;
	}
	.item_theme::after {
		width: 180px;
		right: -70px;
		bottom: -60px;
		background-size: 180px;
	}
	.item_video::after {
		width: 150px;
		right: -60px;
		background-size: 160px;
	}
	.item_literature::after {
		width: 110px;
		right: -50px;
		bottom: -50px;
		background-size: 120px;
	}
	.item_consultation::after {
		width: 180px;
		right: -80px;
		bottom:-20px;
		background-size: 200px;
	}
	#bg1-6 {
		position: absolute;
		top: 200px;
		left: 600px;
		}
	#bg1-7 {
		position: absolute;
		top: 210px;
		left: 590px;
		}
	#bg3-2 {
		top: 2600px;
	}
	#bg3-3 {
		top: 3350px;
	}
	#manned-flight {
			top: 70px;
			}
	#english-channel {
		top: 4000px;
	}
	#index-footer {
		top: 4700px;
	}
	#parallax-bg3 {
	top: -100px;
	}
}