@keyframes trans {
	0%{transform: translate(10vw, 0); opacity: 0;}
	100%{transform: translate(0, 0); opacity: 1;}
}
@keyframes trans2 {
	0%{transform: translate(10vw, 0); opacity: 0;}
	100%{transform: translate(0, 0); opacity: 1;}
}
@media screen and (min-width: 600px) {
	main{
	}
	#main-in{
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	#main-in > div{
		transition: all .5s;
	}
	footer{
		padding-top: 0;
	}
	footer::before, footer::after{
		display: none;
	}
	#main-footer{
		margin: 0;
		padding-top: 5vw;
	}
	#footer-bg-logo{
		top: 6vw;
	}

	#header-logo > img{
		filter: brightness(50);
	}

	#page-no{
		position: absolute;
		left: 2.5vw;
		top: 8vw;
		z-index: 150;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.page-no-point{
		width: .5vw;
		height: .5vw;
		margin: .5vw;
		background-color: #fff;
		border-radius: .5vw;
		cursor: pointer;
		transition: all .2s;
	}
	#page-no > img{
		width: 2.5vw;
		margin: .5vw;
		cursor: pointer;
		transition: all .2s;
	}
	#page-no-up{
		transform: rotate(-90deg);
	}
	#page-no-down{
		transform: rotate(90deg);
	}
	.page-no-point:nth-child(2){
		transform: scale(1.5);
	}
	@keyframes time {
		0%{height: 0}
		5%{height: 0}
		95%{height: 60vh}
		99%{height: 0}
		100%{height: 0}
	}
	#page-no-line{
		width: .2vw;
		height: 0;
		background-color: #fff;
		border-radius: .2vw;
		margin-top: .5vw;
		animation: time 5s linear infinite;
	}


	.main-big{
		width: 100vw;
		height: 100vh;
		background-size: cover;
		background-repeat: no-repeat;
		position: relative;
		background-position: center;
	}	
	.main-big:nth-child(1){
		background-image: url("/OXYGNIS/image/index-bg-1.jpg");		
	}
	.main-big:nth-child(2){
		background-image: url("/OXYGNIS/image/index-bg-2.jpg");		
	}
	#main-title{
		width: 80vw;
		margin: 0 10vw 0 0;
		position: absolute;
		left: 8vw;
		bottom: 8vw;
		animation: trans 1s backwards;
		animation-delay: 0;
	}
	#main-title > div{
		font-weight: bold;
		color: #fff;
	}
	#main-title > div:nth-child(1){
		font-size: 4.5vw;
		line-height: 6vw;
		transform: translate(.1vw, 0);
	}
	#main-title > div:nth-child(2){
		font-size: 8vw;
		line-height: 11vw;
	}
	#main-des{
		width: 25vw;
		margin: 0 0 0 10vw;
		position: absolute;
		right: 8vw;
		top: 12vw;
	}
	#main-des > p{
		font-size: 1vw;
		line-height: 2vw;
		color: #333;
		animation: trans2 1s backwards;
		animation-delay: .1s;
	}
	.learn-more-button{
		animation: trans2 1s backwards;
		animation-delay: .2s;		
		margin-top: 1.5vw;
	}
}



@media screen and (max-width: 600px) {
	html{		
		width: 100vw;
	}
	body{		
		width: 100vw;
		overflow: hidden;
	}
	main{
		width: 100vw;
		overflow: hidden;
	}
	#main-in{
		width: 100vw;
		height: 100vh;
	}
	#main-in > div{
		display: flex;
		transition: all .5s;
	}
	footer{
		padding-top: 15vw;
	}
	footer::before, footer::after{
		display: none;
	}
	#main-footer{
		margin: 0;
		padding-top: 5vw;
	}

	#header-logo > img{
		filter: brightness(50);
	}

	#page-no{
		position: absolute;
		width: 90vw;
		left: 5vw;
		top: 16vw;
		z-index: 150;
		display: flex;
		align-items: center;
	}
	.page-no-point{
		width: 1.5vw;
		height: 1.5vw;
		margin: 1.5vw;
		background-color: #fff;
		border-radius: 1.5vw;
		cursor: pointer;
	}
	#page-no > img{
		width: 7.5vw;
		margin: 1.5vw;
		cursor: pointer;
		transition: all .2s;
	}
	#page-no-up{
		transform: rotate(180deg);
	}
	#page-no-down{
		transform: rotate(0deg);
	}
	.page-no-point:nth-child(2){
		transform: scale(1.5);
	}
	@keyframes time {
		0%{transform: scale(0, 1);}
		5%{transform: scale(0, 1);}
		95%{transform: scale(1, 1);}
		99%{transform: scale(0, 1);}
		100%{transform: scale(0, 1);}
	}
	#page-no-line{
		width: 60vw;
		height: .6vw;
		background-color: #fff;
		margin: 2vw 0;
		transform: scale(0, 1);
		animation: time 5s linear infinite;
		transform-origin: left;
		order: -1;
	}


	.main-big{
		width: 100vw;
		height: 100vh;
		background-size: cover;
		background-repeat: no-repeat;
		position: relative;
		background-position: center;
		flex-shrink: 0;
	}
	.main-big:nth-child(1){
		background-image: url("/OXYGNIS/image/index-bg-1-small.jpg");		
	}
	.main-big:nth-child(2){
		background-image: url("/OXYGNIS/image/index-bg-2-small.jpg");		
	}
	#main-title{
		width: 90vw;
		margin: 0;
		position: absolute;
		left: 5vw;
		top: 26vw;
		animation: trans 1s backwards;
		animation-delay: 0;
	}
	#main-title > div{
		font-weight: bold;
		color: #fff;
	}
	#main-title > div:nth-child(1){
		font-size: 8vw;
		line-height: 10vw;
		transform: translate(.8vw, 0);
	}
	#main-title > div:nth-child(2){
		font-size: 13.8vw;
		line-height: 15vw;
	}
	#main-des{
		width: 90vw;
		padding: 0 5vw;
		position: absolute;
		left: 0;
		bottom: 5vw;
	}
	#main-des > p{
		font-size: 4vw;
		line-height: 6vw;
		color: #fff;
		animation: trans2 1s backwards;
		animation-delay: .1s;
	}
	.learn-more-button{
		animation: trans2 1s backwards;
		animation-delay: .2s;		
		margin-top: 4.5vw;
	}
}