@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
*{
 	margin:0;
	padding: 0;
	font-family: 'Overpass', sans-serif;
	box-sizing:border-box;
	list-style-type: none;
	text-decoration: none;
	transition-duration: 0.4s;
 }

 	::selection {
	  color: #f76045;
	  background: rgba(94, 62, 255, 1.0);
	}
	html{
		scroll-behavior: smooth;
	}
	body{
		height: 100vh;
		width: 100vw;
		overflow-x: hidden;
		overflow-y: scroll;
		/* min-width: 600px; */
		line-height: 1.6;
	}
	.container{
		width: 100vw;
		overflow-x: hidden;
	}
	p{
		font-size: 1.2vw;
		font-weight: 400;
		padding: 2vw 1vw;
	}
	p.en{
		font-size: 1vw;
	}
	
	h5{
		padding: 4vh 1vw 0 0;
	}
	h6{
		padding: 3vw;
		font-size: 1.2vw;
	}
	a{
		color:#e3e3e3 ;
		animation: flash 1s linear infinite;
	}
	a:hover{
		color:#fff ;
	}
	a.link{
		color: #74fa4b;
		animation: flash 1s linear infinite;
		display: block;
		font-size: 3vh;
		padding: 4px 1vw;
	}
	a.link:hover{
		animation: none;
		color: #74fa4b;
	}
	a.link.active{
		transition-duration: 0.8s;
	}
	.no-animation{
		animation: none;
	}
	
	.wrapper{
		background-image: radial-gradient(#fad7d7,#fa5586, #f76045, #f76045);
    	background-size: 100%;
    	height: 100vw;
/* 		margin: 0% 0 0 0; */
		position: relative;
		/* overflow: hidden; */
		/* perspective: 100px; */
		perspective: 7vw;
	}
	.sections{
		width: 100vw;
		min-height: 100vh;
		height: auto;
		background-image: linear-gradient(to bottom, #f76045 ,rgba(94, 62, 255, 1), rgba(25, 26, 33, 1) );
		background-size: 100%;
		display: flex;
		z-index: 0;
	}
	.sections_s{
		/* min-height: 30vh; */
		/* height: auto; */
		background-image: linear-gradient(to left, #f76045 ,rgba(94, 62, 255, 1.0), #f76045);
		display: inline-block;
		z-index: 0;
	}
	.sections_m{
		height: 150vh;
		background-image: linear-gradient(to bottom, #f76045 ,#5c312f,rgba(33, 29, 28, 1));
		background-size: 100% 100%;
		display: flex;
		z-index: 0;
	}
	.sections_l{
		min-height: 300vh;
		height: auto;
		background-color: rgba(33, 29, 28, 1);
		display: flex;
		z-index: 0;
	}
	#goto1{
		background-image: linear-gradient(to bottom, rgba(33, 29, 28, 1), rgba(94, 62, 255, 1.0), #f76045  );
		background-size: 100%;
	}
	#wave{
		transform: scale(0.8) translateY(10vh) translateZ(-400px);
		z-index: 10;
	}
	#wave_inner{
		transform: scale(4.5) translateY(-60vw) translateX(3vw);
	}
	.bgimg{
		align-items: center;
		justify-content: center;
/* 		position: fixed; */
		width: 100vw;
		margin-left:5vw ;
		perspective: 0px;
		
	}
	.bgimg span{
		position: absolute;
		transform-style: preserve-3d;
	}

	
	.bgimg span img{
		width: 90vw;
	}
	.bgimg span:nth-child(1) img, .bgimg span:nth-child(5) img, .bgimg span:nth-child(7){
		width: 110vw;
	}
	.bgimg span:nth-child(3) img, .bgimg span:nth-child(4) img{
		width: 50vw;
	}
	.bgimg span:nth-child(4) img{
		margin-left:40vw ;
		margin-top:40vw ;
	}
	.bgimg span:nth-child(9) img, .bgimg span:nth-child(10) img{
		width: 90vw;
		min-width: 50vh;
	}

	.bgimg span:nth-child(1){
		animation: bg_wave2 60s reverse infinite;
	}
	.bgimg span:nth-child(3){
		animation: bg_wave3 170s reverse infinite;
	}
	.bgimg span:nth-child(4){
		transform-origin: 70% 70%;
		animation: bg_wave3 280s linear infinite;
	}
	.bgimg span:nth-child(5){
		animation: bg_wave2 80s linear infinite;
	}
	.bgimg span:nth-child(6){
		animation: bg_wave2 80s reverse infinite;
	}
	.bgimg span:nth-child(7){
		animation: bg_wave 20s linear infinite;
	}
	.bgimg span:nth-child(8){
		transform-origin: 40% 45%;
		animation: bg_wave2 9s linear infinite;
	}
	.bgimg span:nth-child(9){
		/* transform-origin: 47% 43%; */
		transform-origin: 51% 47%;
		animation: bg_wave3 30s linear infinite;
	}
	.bgimg span:nth-child(10){
		transform-origin: 50% 50%;
		animation: bg_wave 2s linear infinite;
	}

	.bgimg span:nth-child(2){
		mix-blend-mode: overlay;
		opacity: 1;
		/* mix-blend-mode: color-burn; */
	}
	.bgimg span:nth-child(2) img{
		width: 130vw;
		height: 160vh;
		transform: translateX(-20vw);
	}
	.intro_img{
		width: 34vw;
		margin: 0vw 2vw;
		display: block;
		cursor: pointer;
		float: left;
	}
	.intro_img:hover, .intro_img_B:hover, .icon:hover{
		transform: scale(1.2);
	}
	.intro_img_B{
		width: 22vw;
		margin: 2vw 1vw;
		display: inline-block;
		cursor: pointer;
	}
	.scale{
		width: 72vw;
	}

	.icon{
		position: absolute;
		width: 3vw;
		height: 3vw;
		margin-left: 3vw;
		margin-top: -22vw;
		cursor: pointer;
	}
	#tunnel02{
		position: absolute;
		display: flex;
		perspective: 40vw;
		transform: translateZ(-400px) translateY(0) rotateX(0deg);
		z-index: 100;
	}
	#tunnel01{
		margin: 0 auto;
		display: flex;
		width: 100%;
		height: 100%;
		background-color: rgba(94, 62, 255, 1.0);
		opacity: 0.6;
		transform-style: preserve-3d;
		transform: translateZ(-100px) translateY(0) rotateX(80deg);
	}
	
	.stand span{
	/* 	float: left; */
		display: block;
/* 		width: 100px;
		height: 100px; */
		border-radius: 50%;
	/* 	background-image: radial-gradient(#fff, #e9cef2); */
		background-size: 100%;
		transform-style: preserve-3d;

	}

	.stand span:nth-child(1) {
		transform: translateZ(10vw) translateY(-50vw) translateX(0vw) ;
	}
	.stand span:nth-child(2) {
		transform: translateZ(18vw) translateY(-20vw) translateX(0vw) ;
	}
	.stand span:nth-child(3) {
		transform: translateZ(20vw) translateY(-90vw) translateX(-20vw) ;
	}
	.stand span:nth-child(4) {
		transform: translateZ(18vw) translateY(-10vw) translateX(10vw) ;
	}
	.stand span:nth-child(5) {
		transform: translateZ(20vw) translateY(-50vw) translateX(-70vw) ;
	}
	.stand span:nth-child(6) {
		transform: translateZ(15vw) translateY(10vw) translateX(-120vw) ;
	}
	.stand span:nth-child(7) {
		transform: translateZ(10vw) translateY(-90vw) translateX(0vw) ;
	}
	.stand span:nth-child(8) {
		transform: translateZ(20vw) translateY(-90vw) translateX(-50vw) ;
	}
	.stand span:nth-child(9) {
		transform: translateZ(25vw) translateY(-60vw) translateX(-130vw) ;
	}
	.stand span:nth-child(10) {
		transform: translateZ(20vw) translateY(10vw) translateX(-130vw) ;
	}
	.stand span:nth-child(11) {
		transform: translateZ(15vw) translateY(-90vw) translateX(-210vw) ;
	}
	.stand span:nth-child(12) {
		 transform: translateZ(25vw) translateY(-40vw) translateX(-90vw) ;
	}
	.stand span:nth-child(13) {
		transform: translateZ(15vw) translateY(-120vw) translateX(-240vw) ;
	}
	.stand span:nth-child(14) {
		transform: translateZ(25vw) translateY(-50vw) translateX(-120vw) ;
	}
	.stand span:nth-child(15) {
		transform: translateZ(15vw) translateY(-5vw) translateX(-200vw) ;
	}
	.stand span:nth-child(16) {
		transform: translateZ(20vw) translateY(-90vw) translateX(-210vw) ;
	}
	.stand span:nth-child(17) {
		transform: translateZ(15vw) translateY(-200vw) translateX(-300vw) ;
	}
	.stand span:nth-child(18) {
		transform: translateZ(10vw) translateY(0vw) translateX(-350vw) ;
	}
	.stand span:nth-child(19) {
		transform: translateZ(20vw) translateY(-40vw) translateX(-250vw) ;
	}
	.stand span img{
		transform-origin: 50% 50%;
		animation: bg_wave 1s linear infinite;
		transition-duration: 0.4s;
	}
	.stand span img:hover{
		transform: rotate(190deg);
		transition-duration: 0.4s;
	}
	 
	.stand span:nth-child(10) img, .stand span:nth-child(2) img, .stand span:nth-child(5) img, 
	.stand span:nth-child(7) img, .stand span:nth-child(8) img, .stand span:nth-child(11) img, 
	.stand span:nth-child(17) img, .stand span:nth-child(19) img, .stand span:nth-child(9) img {
		animation:none;
	}
	
	.stand span:nth-child(3) img, .stand span:nth-child(6) img, .stand span:nth-child(12) img, .stand span:nth-child(18) img,{
		animation:bg_wave2 30s reverse infinite;
	}
	.stand span:nth-child(1) img, .stand span:nth-child(4) img,  
	.stand span:nth-child(13) img, .stand span:nth-child(14) img, .stand span:nth-child(15) img, .stand span:nth-child(16) img{
		animation:bg_wave 10s linear infinite;
	}


/* 孵化區 */
	

	.rotate_grid{
		width: 100vw;
		padding: 4vw 2vw 4vw 4vw;
		background-image: linear-gradient(to top, rgba(94, 62, 255, 1.0), #f76045 );
		background-size: 100%;
		z-index: 300;
	}
	
	#navbar05{
		/* position: absolute; */
		margin-left: 10vw;
		width: 80vw;
		min-height: 100vh;
		padding: 4vw 4vw 0 4vw;
		margin-top: 0vh;
		z-index:400;
		background: linear-gradient(to right, rgba(25, 26, 33, 0.2),rgba(94, 62, 255, 1), rgba(25, 26, 33, 0.2));
		background-size: 100%;
	}
	#navbar05 p{
		color: #f76045;
		width: 36vw;
		padding: 2vw;
		float: left;
		font-weight: 400;
	}

	.content h3{
		font-size: 1.9vw;
		position: absolute;
		margin-top: -1.8vw;
		margin-left: 8vw;

	}
	.content p{
		font-size: 1.2vw;
		position: absolute;
		margin-left: -1vw;
		margin-top: 25vw;
	}
	.content h5{
		position: absolute;
		margin-top: -2vw;
		background-color: #fff;
		padding: 1vw;
		text-align: center;
		border-top: 0.5vw solid #fff;
		border-bottom: 0.5vw solid #fff;
	}
	.content h6{
		font-size: 0.6vw;
		position: absolute;
		margin-left: 29vw;
		margin-top: -3vw;
	}
	
	.navbar{
		content: "";
		width: 50vw;
		position: absolute;
		color: #f76045;
		font-weight: 400;
	}

	/* 中線 */
	/* #center_line{
		float: left;
		margin-top: 0px;
		width: 0px;
		height: 100vh;
		background: #eb4034;
		background-size: 2%;
	} */
	
/* intro */
	.fadein{
		width: 80vw;
		text-align: center!important;
		transition-duration: 0s;
		z-index: 600;
		padding-bottom: 10vw;
	}
	.fadein p{
		width: 74vw!important;
		padding: 1vw!important;
		color: #fff !important;
		font-weight: 400 !important;
	}
	#fadein01{
		display: block;
		margin-top: -13vw;
	}
	#fadein02{
		display: block;
		margin-top: -13vw;
	}
	#fadein03{
		display: block;
		margin-top: -13vw;
	}
	#fadein04{
		display: block;
		padding-top: 5vw;
		margin: 0 auto;
	}

	#navbar03{
		position: relative!important;
		width: 100vw;
		/* background-color: rgba(247, 102, 69, 0); */
		background-image: linear-gradient(to bottom, rgba(94, 62, 255, 1),#403c52,#f76045);
		padding: 6vw 10vw;
		/* transform: translateY(-200vh);  */
	}
	#navbar03 p{
		width: 80vw;
		padding: 2vw 0vw;
		float: left;
		color: #c7c7c7;
	}
	.bar_h{
		position: fixed;
		top: 0vh;
		left: 10vw;
		z-index: 400;
	}
/* 火星意識文區 */
	#intro01{
		transform: translateY(-100vh);
		width: 80vw;
		top: -160vh;
		background: linear-gradient(to left, rgba(25, 26, 33, 0.2),rgba(94, 62, 255, 1), rgba(25, 26, 33, 0.2));
		background-size: 100%;
		transition-duration: 0s;
		padding: 4vw 4vw 4vw 3vw;
		cursor: text;
	}
	#intro02{
		transform: translateY(-200vh);
		width: 80vw;
		top: -210vh;
		padding: 4vw;
		background: linear-gradient(to left, rgba(25, 26, 33, 0.2),rgba(94, 62, 255, 1), rgba(25, 26, 33, 0.2));
		background-size: 100%;
		transition-duration: 0s;
	}
	#intro01 p, #intro02 p{
		width: 36vw;
		padding: 2vw;
		float: left;
		font-weight: 400;
	}
/* pseudo*/
	#pseudo01{
		left: 0;
		margin-top: -360vh;
		opacity: 0;
	}
	#pseudo02{
		margin-top: -200vh;
	}

	
/* 實驗室介紹 */
	#navbar06{
		position: relative;
		width: 80vw;
		margin-left: 10vw;
		margin-top: 0vh;
		height:auto;
		padding: 2vw;
		background-color: rgba(25, 26, 33, 0.1);
		background-image: linear-gradient(to bottom, rgba(94, 62, 255, 0.9), rgba(25, 26, 33, 0.2) );
	}
	#navbar06 p{
		width: 38vw;
		padding: 2vw;
		float: left;
		color: #c7c7c7;
	}
	#navbar07{
		position: relative;
		margin: 0 auto;
		width: 50vw;
		min-height: 50vh;
		color: #cfcfcf;
		position: relative!important;
		/* background: rgba(33, 29, 28, 0); */
		/* background-image: linear-gradient(to left, #f76045 ,rgba(94, 62, 255, 0.5), #f76045); */
		padding: 12vh 0vw 0vh 0vw;
		text-align: center;
	}
	#credit{
		margin-top: -2vw;
		background-image: linear-gradient(to bottom, #f76045 ,rgba(94, 62, 255, 1.0), rgba(25, 26, 33, 1));
		background-color: rgba(33, 29, 28, 1);
		/* background-image: linear-gradient(to bottom, #de5b47, rgba(25, 26, 33, 1) ); */
		/* background-image: radial-gradient(rgba(94, 62, 255, 1.0), #f76045, rgba(94, 62, 255, 1.0) ); */
		/* background-size: 100%; */
	}
	#navbar08{
		position: relative!important;
		color: #fff;
		background-color: rgba(25, 26, 33, 1);
		width: 100vw;
		padding: 0vw 5vw 3vw 5vw;
	}

	.supporter_logo{
		height: 10vw;
		margin-right: 2vw;
	}



	/* menu */
	#menu{
		/* position: absolute; */
		position: fixed;
  		top: -20vh;
		display: block;
  		transition: top 0.3s;
		width: 20vw;
		/* padding: 1vw; */
		z-index: 600;
		transition-duration: 1s;
	}
	#menu_btn{
		width: 23vw;
		min-width: 250px;
		padding: 1.8vw 1vw;
		position: fixed;
		top: 0;
		left: 2vw;
	}
	#signup{
		width: 100vw;
		height: 20vh;
		color: rgba(94, 62, 255, 1.0);
		background: rgba(33, 29, 28, 0.95);
		font-size: 3.5vh;
		padding: 5vh 0vw 0 0vw;
		text-align: center;
		/* animation: flash2 8s linear infinite; */
	}

	
	#signup_pic{
		position: absolute;
		width: 5.5vw;
		min-width: 75px;
		left: 65vw;
		top: 20vh;
	}
	.signup_position{
		min-width: 400px;
		width: 75vw;
		text-align: right;
	}
	.socialmedia_links{
		width: 8vw;
		min-width: 100px;
		position: fixed;
		right: 1vw;
		top: 1vw;
	}
	.socialmedia_btn{
		width: 4vw;
		max-width: 45px;
		min-width: 40px;
	}
	#menu_btn:hover, .socialmedia_btn:hover{
		opacity: 0.9;
	}

	#info_bar{
		position: fixed;
		bottom: 0;
		right: 0;
		transition-duration: 1.6s;
	}
	.info_img{
		position: absolute;
		width: 20vh;
	}
	#info_img1{
		width: 60vh;
		bottom: -20vh;
		right: -17vh;
	}
	#info_img2{
		width: 30vh;
		bottom: 3vh;
		right: 3vh;
	}
	#info_img3{
		width: 22vh;
		bottom: 23vh;
		right: 0vh;
		transition-duration: 2.4s;
	}
	#info_img4{
		width: 22vh;
		bottom: 0vh;
		right: 33vh;
		transition-duration: 2.4s;
		/* animation:bg_wave4 20s linear infinite; */
	}

	.nav_btn{
		position: fixed;
		top: 12vh;
		left: -1.5vw;
		width: 3.6vw;
		min-width: 40px;
		max-width: 80px;
		z-index: 600;
	}

	button{
		outline: none;
	}
	button.side_menu{
		border: 0px solid #fff;
		width: 4vw;
		min-width: 35px;
		max-width: 50px;
/* 		height: 3vw;
		min-height: 96px; */
		padding: 0.5vw 1vw 0.5vw 2vw;
		background-color: #f2f2f2;
		cursor: pointer;
		color: #999;
	}
	button.side_menu:hover{
		background-color: rgba(94, 62, 255, 1.0);
		margin-left: 1vw;
	}
	button.side_menu:active{
		background-color: #f76045;
	}

	.nav_btn2{
		position: fixed;
		top: 25vh;
		right: -1.8vw;
		width: 3.6vw;
		min-width: 40px;
		max-width: 80px;
		z-index: 600;
	}
	.nav_btn2 button.side_menu{
		padding: 0.5vw 2.3vw 0.5vw 0.5vw;
	}
	.nav_btn2 button.side_menu:hover{
		margin-left: -1vw;
	}

	.incubator_container {
/* 	  display: flex;
	  flex-wrap: wrap; */

	  width: 90vw;
	  column-width: 40vw;
	  column-gap: 1vw;
	}

	.card {
	  color: #fff;
	/* 	position: absolute; */
	  background-image: linear-gradient(to right, rgba(94, 62, 255, 1.0), #bdbdbd, rgba(94, 62, 255, 1.0));
	  background-size: 200%;
	  animation: a_color_3 5s linear reverse infinite;
	  width: 43vw;
	  height: 4vw;
	  overflow: hidden;
	  cursor: pointer;
	  margin-left: 2vw;
	  margin-bottom: 1vw;
	  border-radius: 2vw;
	  display: inline-block;
	  column-break-inside: avoid;
	}
	.card:hover{
	  animation: a_color_3 3s linear infinite;
	  transition-duration: 0.8s;
	  border-radius: 0;
	}
	/* .card:nth-child(3n+1){
	  background-image: linear-gradient(to right, #88f7c9, rgba(33, 29, 28, 1), #88f7c9);
	} */
	/* .card:nth-child(2n+2){
	  background-image: linear-gradient(to right, #bdbdbd, rgba(33, 29, 28, 1), #bdbdbd);
	} */
	.icon_open{
		content: "";
		float: left;
		margin-top: 1vw;
		margin-left: 10vw;
		background: url('img/icon-open.png') no-repeat;
		background-size: 100%;
		width: 1.5vw;
		height: 1.5vw;
		transition-duration: 0s;
	}
	.icon_close{
		content: "";
		float: left;
		margin-top: 1vw;
		margin-left: 10vw;
		background: url('img/icon-close.png') no-repeat;
		background-size: 100%;
		width: 1.5vw;
		height: 1.5vw;
		transition-duration: 0s;
	}
	.open_card{
	  animation: a_color_3 3s linear infinite;
	  height: 40vw;
	  transition-duration: 0.8s;
	  border-radius: 0;
	}

	.card h1{
		font-size: 1.6vw;
		margin-top: 0vw;
		margin-left: 0vw;
		background: rgba(94, 62, 255, 1.0);
		width: 4vw;
		height: 4vw;
		padding-top: 0.8vw;
		text-align: center;
		border-radius: 0 2vw 2vw 0;
		float: left;
	}
	.card p{
		color: #fff;
		font-size: 1.2vw;
		font-weight: 400;
		margin-left: 4vw;
		margin-top: 4vw;
	}
	.card h2{
		font-size: 0.8vw;
		width: 6vw;
		height: 4vw;
		margin-top: 0vw;
		margin-left: 0vw;
		padding: 1vw;
		text-align: center;
		float: left;
	}
	.card h3{
		font-size: 0.6vw;
		margin-left: 31vw;
		margin-top: 1vw;
	}
	video{
		background-color: #000;
		width: 43vw;
		height: 20vw;
		margin-left: 0vw;
		margin-top: 5vw;
	}
	.gallery, .toggle_height{
		width: 100vw;
		padding-top: 0vh;
		min-height: 60vh;
		/* margin-top: 25vh; */
		background-image: linear-gradient(to left, #f76045, rgba(94, 62, 255, 1.0), #f76045 );
		overflow-x: scroll;
		text-align: center;
		z-index: 300;
	}
	.toggle_height{
		height: 100vh;
	}
	.gallery_img{
	  	width: 420vh;
	  	margin-top: 0vh;
	  	height: 20vh;
	  	animation: gallery_img 30s linear infinite;
		z-index: 301;
	}
	.gallery_img:hover{
		animation-play-state: paused;
	}
	.img_scale{
		float: left;
		height: 20vh;
	}
	.img_s{
		margin-right: 2vh;
		height: 20vh;
		z-index: 500;
		transition-duration: 0.5s;
		cursor: zoom-in;
		opacity: 0.6;
	}
	.img_s:hover{
		transform: scale(1.05, 1.05);
		opacity: 1;
	}
	.img_l{
/* 		display: flex;
		justify-content: center;
		align-items: center; */
		margin-right: 2vh;
		height: 50vh;
		z-index: 600!important;
	}
	.img_l:hover{
		cursor: zoom-out;
	}
	.iii{
		content: "";
		position: absolute;
		margin-top: 1vw;
		margin-left: 1vw;
		background: url('img/icon-scale.png') no-repeat;
		background-size: 100%;
		width: 1.5vw;
		height: 1.5vw;
		transition-duration: 0s;
		z-index: 305;
	}
	.img_scale_close{
		/* display: none; */
		content: "";
		position: absolute;
		margin-top: 1vw;
		margin-left: 1vw;
		background: url('img/icon-X.png') no-repeat;
		background-size: 100%;
		width: 1.5vw;
		height: 1.5vw;
		transition-duration: 0s;
		z-index: 305;
	}
	.img_scale_close:hover{
		cursor: pointer;
	}

	/* toggle menu */

		.toggle-menu, .hidebtn{
			display: none;
		}