@import "compass";

/* common */

html {
	font-size: 62.5%;
	 font-family: "Noto Sans JP";
}

body {
	
	background: #fff;
	line-height: 1.8;
	overflow-y: scroll;
}

a {
	text-decoration: none;
	cursor: pointer;
}

.margin-bt-20 {
	margin-bottom: 20px;
}

.margin-bt-10 {
	margin-bottom: 10px;
}

//loading

#loader{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background: #000;
	z-index:100;
	font-family: 'Poppins', sans-serif;

}
#loader-p{
	
	text-align: center;
	font-weight: bold;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
		color:#fff;
	font-weight: 300;
	letter-spacing: 12px;
}

#loader-bar{
	width: 0;
	height: 2px;
	background: #00C3FF;
	position: absolute;
	margin-top: 20px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);			
}
	


.product-title {
	color: #fff;
	font-size: 4.6rem;
	font-family: 'Poppins', sans-serif;
	line-height: 1.0;
	
	@media screen and (max-width: 750px){
		font-size: 3.6rem;
	}
	
}

.product-title-en {
	color: #fff;
	font-size: 1.6rem;
	line-height: 1.0;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
}

.product-title-jp {
	color: #fff;
	font-size: 1.4rem;	
	font-weight: 400;
	margin-bottom: 30px;
}




/* anime */

.js-anime {
    position: relative;
    top: 50px;
    transition: all .5s ease-in-out;
    opacity: 0;
}

.js-anime_play {
    top: 0;
    opacity: 1;
}



.btn-2 {
	color: #333333;
	text-decoration: underline;
	
	i {
		margin-right: 10px;
	}
}


.intro_btn {
	display: block;
	width: 400px;
	margin: 0 auto;
	margin-top: 60px;
	img {width: 100%;}
	
	&:hover {
		opacity: 0.9;
	}
	@media screen and (max-width:750px){
		
		width: 70%;
		
	}
	
}

.wrap {
	width: 1100px;
	margin: 0 auto;

	@media screen and (max-width:750px){

			width: 100%;

	}

}


h2.section-title {
	font-size: 4.5rem;
	font-weight: 700;
	font-family: 'Poppins', sans-serif;
	line-height: 1.0;
	text-align: center;
	span {
		text-align: center;
		display: block;
		font-size: 1.8rem;
		font-weight: 400;
		line-height: 1.0;
		margin: 10px;
	}
	
	p {
		display: block;
		font-size: 1.8rem;
		font-weight: 300;
		line-height: 1.8;
		margin-top: 20px;
	
	}

	@media screen and (max-width:750px){
	
		font-size: 4.0rem;
		
		span {
			font-size: 1.6rem;
		}
		
		p {
			font-size: 1.6rem;			
		}

	}	
	
}


.show {
	opacity: 1 !important;
	box-shadow: 0 0 10px rgba(0,0,0,.3);
	transform: translate3d(0,0,0) !important;
}



#side-nav {
	position: fixed;
	z-index: 500;
	top: 50%;
	right: 0;
	opacity: 0;
	
	
	@include transform(translateY(-50%));
	
	@media screen and (max-width:750px){
		display: none;
	}
	
	li {
		opacity: 0.3;
/*		&:nth-child(1){
			padding-bottom: 20px;
		}		
		&:nth-child(2){
			padding-bottom: 20px;
		}
*/		
		
		padding-bottom: 30px;
		transition: all 0.2s linear;
		a {
			position: relative;
			display: block;
			
			text-decoration: none;
			
			span {
				position: absolute;
				display: block;
				font-size: 1.2rem;
				line-height: 2.0;
				color: #333;
				vertical-align: -webkit-baseline-middle;
				color: #fff;
				right:40px;
				top: -10px;
				font-family: 'Poppins', sans-serif;
				transition: all 0.2s linear;
				font-weight: 300;
				
			}			
			i {

				display: block;
				position: absolute;
				right: 0;
				width: 30px;
				height: 2px;
				background-color: #fff;
				transition: all 0.2s linear;
			}
			
			
			
		}	
	}
	
	.active {
		opacity: 1;
		
		span {
			right:60px;
			color: #2EAFC4;
		}
		
		i {
			width: 50px;
			background: #2EAFC4;
			height: 2px;
			font-weight: 700;
		}
	}
	

	
	
	
}



.main_visual_bg {
	background: url(../img/laser.png);
	background-size: cover;
}

.main_visual_bg_opacity {
	background: #000;
	opacity: 1;
	width: 100%;
	height: 100vh;
	position: absolute;
	transition: all 1s;
	
}

.main_visual {
	width: 100%;
	height: 100vh;
	
	.wrap {
		position: relative;
		height: 100vh;
		
	}
	

	.mk-logo {
		max-width: 377px;
		width: 80%;
		position: absolute;
		top: 25%;
		left: 50%;		
		transform: translateX(-50%);
		
		img {
			width: 100%;
		}
		
	}
	.svg-mk-logo {		
	
		.st0 {
			stroke:transparent;
			fill:transparent;
			stroke: #fff;
			stroke-dasharray: 2000;
			stroke-width: 1px;
			-webkit-animation: mk 2s ease-in 0s forwards;
			animation: mk 2s ease-in forwards;
		}
	
	@keyframes mk {
			 0% {
			 stroke-dashoffset: 2000;
			 fill:transparent;
			}
			 50% {
			 fill:transparent;
			}
			 100% {
			 stroke-dashoffset: 0;
			 fill:#fff;
			}
		}		
	}
	
	.main_visual_title {
		position: absolute;
		top: 16%;
		left: 50%;
		@include transform(translateX(-50%));		
		font-size: 3.8rem;
		color: #fff;
		text-align: center;
		width: 80%;
		font-family: 'Oswald', sans-serif;
				@media screen and (max-width:750px){
			top: 10%;
		}
	}
	
	.main_visual_disc {
		position: absolute;
		top: 12%;
		left: 50%;
		@include transform(translateX(-50%));		
		font-size: 1.8rem;
		color: #fff;
		text-align: center;
		width: 80%;
		
				@media screen and (max-width:750px){
			top: 35%;
		}		
	}
	
	.main_visual_desktop {
		position: absolute;
		top: 23%;
		width: 90%;
		left: 50%;
		@include transform(translateX(-50%));	
		img {
			width: 100%;
		}
		
		@media screen and (max-width:750px){
			top: 48%;
		}

	}
	
	
		
	.main_visual_industrial {
		position: absolute;
		width: 20%;
		left: 40%;
		bottom: 15%;
		
		img {
			width: 100%;
		}

	}		
	.main_visual_metal {
		position: absolute;
		width: 20%;
		left: 60%;
		bottom: 15%;
		
		img {
			width: 100%;
		}

	}
	
	.scroll-btn-2 {
		position: absolute;
		bottom: 100px;
		right: 100px;
		
		p {
			position: absolute;
			bottom: -44px;
			right: -70px;
			font-family: 'Poppins', sans-serif;
			color: #fff;
			font-size: 1.4rem;
		}
		
		a {
			display: block;
		}
		
		a span {
		  position: absolute;
		  top: 0;
		  left: 50%;
		  width: 24px;
		  height: 24px;
		  margin-left: -12px;
		  border-left: 1px solid #fff;
		  border-bottom: 1px solid #fff;
		  -webkit-transform: rotate(-45deg);
		  transform: rotate(-45deg);
		  -webkit-animation: sdb 2s infinite;
		  animation: sdb 2s infinite;
		  opacity: 0;
		  box-sizing: border-box;
		}
		a span:nth-of-type(1) {
		  -webkit-animation-delay: 0s;
		  animation-delay: 0s;
		}
		a span:nth-of-type(2) {
		  top: 16px;
		  -webkit-animation-delay: .15s;
		  animation-delay: .15s;
		}
		a span:nth-of-type(3) {
		  top: 32px;
		  -webkit-animation-delay: .3s;
		  animation-delay: .3s;
		}
		@-webkit-keyframes sdb {
		  0% {
			opacity: 0;
		  }
		  50% {
			opacity: 1;
		  }
		  100% {
			opacity: 0;
		  }
		}
		@keyframes sdb {
		  0% {
			opacity: 0;
		  }
		  50% {
			opacity: 1;
		  }
		  100% {
			opacity: 0;
		  }
		}
	}		
}

//section MainVisual

.world {
	background: #000000;
	padding: 150px 0 150px;
	
	
	a {
		display: block;
		color: #fff;
		padding: 20px 40px;
		border: solid 2px #fff;
		font-size: 1.8rem;
		text-align: center;
		margin-bottom: 20px;
		width: 300px;
		margin:50px auto 0;
		@include transition(all 0.4s);
		font-weight: 100;
		
		@media screen and (max-width:750px){
			width: 80%;
			padding: 20px 0;
		}
		
		i {
			margin-right: 10px;
			
			
		}
		
		&:hover {
			background: #fff;
			color: #333;
			
		}
		
	}
	
	.intro_logo {
		margin: 0 auto 50px;
		width: 600px;
		
		
		img {
			width: 100%;
		}
		
		@media screen and (max-width:750px){
			width: 80%;
		}
	}
		
	.intro_map {
		margin: 0 auto;
		width: 600px;
		
		
		img {
			width: 100%;
		}
		
		@media screen and (max-width:750px){
			width: 80%;
		}		
	}

	
	.intro_disc {
		margin: 0 auto 60px;
		width: 600px;
		color: #fff;
		line-height: 4.0;
		font-size: 1.4rem;	
		
		@media screen and (max-width:750px){
			width: 80%;
		}
		
	}
	
	.intro_btn {
		width: 500px;
		opacity: 1.0;
		display: block;
		margin: 0 auto;
		padding-top: 100px;
		

		
		img {
			width: 100%;
		}
		
		&:hover {
			opacity: 0.9;
		}
		
	}
	
	.world-txt {
		position: absolute;
		color: #00BCD4;
		top: 105px;
		left: 271px;	
		font-size: 1.6rem;
		font-weight: 700;
		opacity: 0.9;
		
		@media screen and (max-width:750px){
			display: none;
		}
	}
	
	
}

/*
.intro {
	background: #000000;
		padding: 150px 0;
	.intro_img {
		width: 550px;
		margin: 0 auto;

		img {
			width: 100%;
		}
	}	
	
	.intro_disc {
		margin: 0 auto;
		width: 600px;
		color: #fff;
		line-height: 4.0;
		font-size: 1.4rem;
		
		@media screen and (max-width:750px){

			width:80%;

		}		
		
	}
	
	.intro_btn {
		width: 500px;
		opacity: 1.0;
		display: block;
		margin: 0 auto;
		padding-top: 100px;
		img {
			width: 100%;
		}
		
		&:hover {
			opacity: 0.9;
		}	
	}
}
*/


.product-desktop {
	width: 100%;
	background: #000000;
	padding: 50px 0;	
	
	
	
	.product-disc {
		padding-top: 30px;
		color: #fff;
		font-size: 1.2rem;
		font-weight: normal;
		width: 100%;
		
		@media screen and (max-width: 750px){
			margin: 0 auto 60px;
			width: 80%;
		
		}
		
	}
	
	
	.feature-list {
		
		color: #fff;
		font-size: 1.2rem;
		font-weight: 400;
		width: 100%;	
		line-height: 2.0;
	}
	
	.feature-list-title {
margin-top: 30px;
		color: #fff;
		font-size: 1.2rem;	
		font-weight: 400;
		margin-bottom: 10px;

		i{
			color: #22fff4;
			margin-right: 10px;
		}

	}	
	
	.product-img {
		img {
			width: 100%;
		}
		
		@media screen and (max-width: 750px){
			margin: 0 auto 60px;
			width: 80%;
		
		}
	}
	
	.col2 {
		width: 46%;
		margin-right: 8%;
		float: left;
		
		&:nth-child(2) {
			margin-right: 0;
		}
		
		
		@media screen and (max-width: 750px){
			float: none;
			width: 100%;	
			margin: 0 auto;
			text-align: center;
		}
		
	}
	
	
	.product-details {
		
	.toggle_btn {
		
		display: block;
		width: 200px;
		padding: 20px 0;  
		border: solid 1px #fff;
		text-align: center;
		color: #fff;
		margin: 0 auto;
		margin-top: 60px;
		margin-bottom: 60px;
		position: relative;
		transition: all 1s;
		
		&:hover {
			background: #fff;
			color: #000;
			
			
			.btn-icon:before , .btn-icon:after {
				background: #000;
				transition: all 1s;
			}
		}
		
		
		.txt {
					font-size: 12px;
					color: #fff;
					vertical-align: center;
					display: inline-block;
		}
		

		.close {
			
			&:before {
				transform: rotate(45deg) !important;
			}
			&:after {
				transform: rotate(-45deg) !important;

			}
		
		
		}
	
	

		.btn-icon {
			width: 12px;
			height: 12px;
			display: inline-block;
			position: relative;
			box-sizing: border-box;
			
			&:before {
				 content: "";
				 height: 2px;
				 background-color: #ffffff;
				 top: 50%;
				 display: block;
				 left: 0;
				 position: absolute;
				 transition: transform 1.5s cubic-bezier(0.19,1,0.22,1);
				 width: 12px;
			
			}
				
			&:after {
				content: "";
				transform: rotate(90deg);
				height: 2px;
				background-color: #ffffff;
				top: 50%;;
				display: block;
				left: 0;
				position: absolute;
				transition: transform 1.5s cubic-bezier(0.19,1,0.22,1);
				width: 12px;


			}
	
		
		}	
		
	}
		
		
	.box-info {
		margin-top: 60px;
		width: 800px;
		
		margin: 0 auto;
		//background: #ffffff;
		display: none;
		border: solid 2px #ffffff;
		border-radius: 3px;
		padding: 50px 60px;
		
		
		@media screen and (max-width: 750px){
			width: 90%;
			margin: 0 auto;
			@include box-sizing(border-box);
		}
		
		.box-info-spec {
			margin-bottom: 60px;
		}
		
		.box-info-spec-title {
			font-size: 1.6rem;
			font-weight: 700;
			
			color: #fff;
			margin-bottom: 30px;
		}
		
		
		.box-info-spec-img {
			width: 80%;
			margin: 0 auto;
			img {
				width: 100%;
			}
			
			@media screen and (max-width: 750px){
			
				margin-bottom: 30px;
			
			}
			
		}
		
		table.box-info-spec-table {
			
			
			color: #fff;
			font-size: 1.4rem;
			line-height: 3.0;
				
			th {
				padding-right: 10px;
			}
			
			tr {
				border-bottom: solid 1px #ffffff;
			}
		}
		
		.lineup {
			
			margin-bottom: 30px;
			
			.lineup-img {
				width: 80%;
				margin: 0 auto;
				img  {
					width: 100%;
				}
				
				@media screen and (max-width: 750px){

					margin-bottom: 30px;

				}				
				
				
			}
			
			.lineup-disc {
				color: #fff;
				h4 {
					font-size: 2.0rem;
					margin-bottom: 10px;
					
				}
				
				h5 {
					font-size: 1.6rem;
				}
				
				p {
					font-size: 1.2rem;
					margin-bottom: 30px;
					
				}
				
				.btn-onyx {
					display: inline-block;
					width: 85px;
					height: 30px;
					background: #333;
					font-size: 1.6rem;
					line-height: 30px;
					border-radius: 20px;
					text-align: center;
					margin-right: 10px;
				}
				
				.btn-fiber {
					background: #2fb5e9;
				}
				
				.lineup-disc-img {
					width: 100%;
					img {
						width: 100%;
					}
				}
				
				table.material-table {
					font-size: 1.2rem;

				@media screen and (max-width: 750px){

					margin-bottom: 60px;

				}					
					
					
					tr{
						td, th{
							border: solid 1px #fff;
							padding: 3px 10px;
						}
					}
				}
				
			}
		}
		
		
	}
			
}

	
}


.material {
	background: #000;
	width: 100%;
	padding: 50px 0;	
	.wrap {
		width: 100%;
	
	}

	.material-title {
		max-width: 1100px;
		margin: 0 auto 60px;
		text-align: center;
	}

	#slide{
		position: relative;
		width: 100%;
		height: 480px;
		

		
		#stage{
			position: relative;
			width: 100%;
			height: 480px;
			
			li{
				@include transition(all 0.8s ease-in-out 0s);
				position: absolute;
				top: 0;
				left: 0;
				@include opacity(0);
				z-index: 0;
				width: 100%;
				padding-top: 480px;

				
				.img{
					background: center center no-repeat;
					background-size: cover;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
				
				.slider01 {
					background-image:url(../img/slider01_pc.png);
				}				
				.slider02 {
					background-image:url(../img/slider02_pc.png);
				}				
				.slider03 {
					background-image:url(../img/slider03_pc.png);
				}				
				.slider04 {
					background-image:url(../img/slider04_pc.png);
				}				
				.slider05 {
					background-image:url(../img/slider05_pc.png);
				}
				
				.txt{
					position: absolute;
					top: 0;
					right: 0;
					width: 55%;
					height: 100%;
					@include box-sizing;
					padding: 60px 120px 80px 120px;
					color: #fff;
					
					h4{
						font-size: 4rem;
						font-weight: 300;
						line-height: 1.0;
						margin-bottom: 20px;
						font-family: 'Poppins', sans-serif;
						
						/*
						&:after {
							content: "";
							display: block;
							width: 200px;
							height: 2px;
							background: #2EAFC4;
							margin-top: 10px;
							
						}
						*/
						
					}
					
					p{
						font-size: 1.4rem;
						line-height: 1.8;
						margin-bottom: 30px;
						font-weight: 300;
					}
					
					a{
						font-size: 1.4rem;
						color: #fff;
						text-decoration: underline;
						
					}
				}
				
				.txt_left {
					right: auto;
					left: 0;
				}
				
				&.active{
					display: block;
					@include opacity(1);
					z-index: 5;
				}
				
			}
		}
		
		#bullet{
			position: absolute;
			left: 50%;
			@include transform(translateX(-50%));

			z-index: 20;
			
			li{
				position: relative;
				display: inline-block;
				margin-right: 8px;
				width: 10px;
				height: 10px;
				@include border-radius(100%);
				cursor: pointer;
				background: #fff;
				&.active:before{
					display: block;
					content: "";
					position: absolute;
					top: 3px;
					left: 3px;
					width: 4px;
					height: 4px;
					@include border-radius(100%);
					background: #2EAFC4;
				}
			}
		}
		
		.btn_right, .btn_left{
			z-index: 30;
			cursor: pointer;
			position: absolute;
			top: 200px;
			left: 20px;
			width: 60px;
			height: 60px;
			
			
border-top: 3px solid #2EAFC4;
    border-right: 3px solid #2EAFC4;;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);			
			
			/*
			background: url(../images/btn_left.png) center center no-repeat;
			width: 80px;
			height: 480px;
			@include opacity(.5);
			z-index: 30;
			
			&:hover{
				@include opacity(1);
			}
			*/
			
		}
		
		.btn_right{
			left: auto;
			right: 20px;
		    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
		}
		

		
	}




@media screen and (max-width : 750px){


	
	#slide{
		height: auto;
		
		#stage{
			position: relative;
			width: 100%;
			height: 720px;
			
			li{
				
				.img{
					background: center center no-repeat;
					background-size: cover;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 360px;
				}
				
				.txt{
					position: absolute;
					top: 360px;
					right: 0;
					width: 100%;
					height: 360px;
					@include box-sizing;
					padding: 40px;
					background: #333;
					overflow: hidden;
	
				}
				
				&.active{
					display: block;
					@include opacity(1);
					z-index: 5;
				}
				.slider01 {
					background-image:url(../img/slider01.png);
				}				
				.slider02 {
					background-image:url(../img/slider02.png);
				}				
				.slider03 {
					background-image:url(../img/slider03.png);
				}				
				.slider04 {
					background-image:url(../img/slider04.png);
				}				
				.slider05 {
					background-image:url(../img/slider05.png);
				}
				
			}
		}
		
		#bullet{
			position: absolute;
			bottom: 30px;
			left: auto;
			right: 30px;
			margin-left: 0;
			z-index: 20;
			
			li{
				position: relative;
				display: inline-block;
				margin-right: 0;
				margin-left: 16px;
				width: 16px;
				height: 16px;
				@include border-radius(100%);
				cursor: pointer;
				&.active:before{
					display: block;
					content: "";
					position: absolute;
					top: 4px;
					left: 4px;
					width: 8px;
					height: 8px;
					@include border-radius(100%);

				}
			}
		}
		
		.btn_left,.btn_right{
			cursor: pointer;
			position: absolute;
			top: 130px;
			left: 20pz;
			@include opacity(.5);
			z-index: 30;
			
			&:hover{
				@include opacity(1);
			}
		}
		
		.btn_right{
			left: auto;
			right: 20pz;
		}
	}

	




}


}

.application {
	background: #000;
	width: 100%;
	padding: 50px 0;	
	@media screen and (max-width: 750px){
	padding: 150px 0 50px 0;	
	}

	.application-title {
		text-align: center;
		margin: 0 auto 60px;
	}
	
	.col3 {
		float: left;
		width: 33.3%;
		padding: 60px 0;
		&:nth-of-type(1){
			background: #161617;
		}		
		&:nth-of-type(2){
			background: #1f1f20;
		}		
		&:nth-of-type(3){
			background: #161617;
		}
		
	@media screen and (max-width: 750px){
		float: none;
		width: 100%;	
		margin: 0 auto;
		text-align: center;
		
	}

	}
	
	
	
	
	.application-img-01 {
		width: 80%;
		margin: 30px auto;
		
		img {
			width: 100%;
		}
		
	}
	
	.application-txt {
		
		width: 80%;
		margin: 0 auto;
		color: #fff;
		
		h5 {
			font-size: 3.0rem;;
			font-weight: 400;
			
		}
		p{
			font-size: 1.2rem;
			margin-bottom: 20px;
			font-weight: 100;
			line-height: 2.0;
			height: 180px;
			@media screen and (max-width: 750px){
				height: auto;
			}
		}
		
		table{
			width: 100%;
			font-size: 1.4rem;
			font-weight: 200;
		
			tr {
				border-bottom: solid 1px #fff;
			}
			
			span {
				//color: #2EAFC4;
				font-weight: 700;
				font-size: 1.8rem;
			}
		}
		
		
		
		}
		
		
		
		
		
	
	
	
	
}


.contact {
	background: #000;
	width: 100%;
	padding: 150px 0 50px;
	
	.contact-inner {
		width: 100%;
		height: 400px;
		background: url(../img/laser.jpeg) center center;
		background: cover;
		position: relative;
		
		&:before {
			content: "";
			display: block;
			position: absolute;
			width: 100%;
			height: 100%;
			background:rgba(0,0,0,0.5);
			
			
		}
		
		
	}
	
	.contact-text {
		position: absolute;
		z-index: 10;
		left: 50%;
		@include transform(translateX(-50%));		
		top: 150px;
		
	}
	
	.contact-logo {
		margin: 0 auto 30px;
		width: 200px;
		z-index: 10;
		
		img {
			width: 100%;
		}
		
	}
	
	a {
		display: block;
		color: #fff;
		padding: 10px 30px;
		border: solid 2px #fff;
		font-size: 1.4rem;
		text-align: center;
		margin-bottom: 20px;
		@include transition(all 0.4s);
		
		&:hover {
			background: #fff;
			color: #333;
		}
		
		
	}
		
	
}



footer{
	background: #f1f1f1;
	width: 100%;
	padding-top: 50px;
	
	ul {
		
		text-align: center;
		
		li {
			display: inline-block;
			margin: auto 10px;
			
			a {
				color: #333;
				text-decoration: underline;
				font-size: 1.4rem;
				font-weight: 400;
			}
		}
		
		&:last-of-type {padding-bottom: 40px;}
		
	}
	
	p {
			color: #333;
			font-size: 1.0rem;
			font-weight: 400;
			text-align: center;
		
			@media screen and (max-width: 750px){
				width: 80%;
				margin: 0 auto;
			}
	}
	
	.copyright {
		margin-top: 20px;
		padding-bottom: 50px;
	}
	
	.footer-logo {
		width: 203px;
		margin: 0 auto;
		margin-bottom: 30px;
		img {
			width: 100%;
		}
	}
	
	
		
	
}




/* keyframe */ 

@-webkit-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}