@keyframes trans {
	0%{transform: translate(10vw, 0); opacity: 0;}
	100%{transform: translate(0, 0); opacity: .8;}
}
@keyframes trans2 {
	0%{transform: translate(10vw, 0); opacity: 0;}
	100%{transform: translate(0, 0); opacity: 1;}
}
@media screen and (min-width: 600px) {
	.main-info-1{
		background-image: url("/OXYGNIS/image/products/pocketpower/product-main-black.jpg");
	}
	.main-info-2{
		background-image: url("/OXYGNIS/image/products/pocketpower/product-main-white.jpg");
	}
	#main-feature-2 > div:nth-child(1){
		background-image: url("/OXYGNIS/image/products/pocketpower/main-feature-3-1.jpg");
	}
	#main-feature-2 > div:nth-child(2){
		background-image: url("/OXYGNIS/image/products/pocketpower/main-feature-3-2.jpg");
	}
	#main-feature-2 > div:nth-child(3){
		background-image: url("/OXYGNIS/image/products/pocketpower/main-feature-3-3.jpg");
	}
	#main-feature-img > div > img:nth-child(1){
		width: 2.53vw;
		transform: rotate(-15deg);
		left: 50.2vw;
		top: 22.7vw;
		opacity: 0;
	}
	#main-feature-img > div > img:nth-child(2){
		width: 2.83vw;
		transform: rotate(-15deg);
		left: 50.6vw;
		top: 10vw;
		transform-origin: -1vw center;
		opacity: 0;
	}
	#main-feature-img > div > img:nth-child(3){
		transform: translate(0, 0);
		width: 17.93vw;
		left: 40.3vw;
		top: 22vw;
		opacity: 0;
	}
	#main-feature-img > div > img:nth-child(4){
		transform: translate(0, 0);
		width: 19.13vw;
		left: 40vw;
		top: 12.6vw;
		opacity: 0;
	}
	#main-feature-img > div{
/*		transform-style: preserve-3d;*/
		perspective: 250vw;
		perspective-origin: 25% 0%;
	}
	#charge{
		width: 15.3vw;
		position: absolute;
		left: 41.36vw;
		top: 13.6vw;
		transform: rotateY(30deg) rotateX(15deg) scale(1, 1);
		transform-origin: 0 0;
		border-radius: 2.3vw;
		overflow: hidden;
		transition: all .2s;
		opacity: 0;
	}
	#charge > img{
		width: 7.6vw;
		margin: 0;
		padding: 0;
		display: block;
		position: absolute;
		left: 3.85vw;
		top: -0.03vw;
	}
	#charge > video{
		width: 15.3vw;
		margin: 0;
		padding: 0;
		display: block;
		position: relative;
		left: 0;
		top: 0;
	}
}



@media screen and (max-width: 600px) {
	.main-info-1::before{
		background-image: url("/OXYGNIS/image/products/pocketpower/product-main-black-mobile.jpg");
	}
	.main-info-2::before{
		background-image: url("/OXYGNIS/image/products/pocketpower/product-main-white-mobile.jpg");
	}
	#main-feature-2 > div:nth-child(1){
		background-image: url("/OXYGNIS/image/products/pocketpower/main-feature-3-1-mobile.jpg");
	}
	#main-feature-2 > div:nth-child(2){
		background-image: url("/OXYGNIS/image/products/pocketpower/main-feature-3-2-mobile.jpg");
	}
	#main-feature-2 > div:nth-child(3){
		background-image: url("/OXYGNIS/image/products/pocketpower/main-feature-3-3-mobile.jpg");
	}
	@keyframes img-1{
		0%{transform: translate(-10vh, 3vh) rotate(-15deg); opacity: 1;}
		30%{transform: translate(0, 0) rotate(-15deg); opacity: 1;}
		35%{transform: translate(0, 0) rotate(-15deg); opacity: 0;}
		40%{transform: translate(0, 0) rotate(-15deg); opacity: 0;}
		90%{transform: translate(-10vh, 3vh) rotate(-15deg); opacity: 0;}
		95%{transform: translate(-10vh, 3vh) rotate(-15deg); opacity: 0;}
		100%{transform: translate(-10vh, 3vh) rotate(-15deg); opacity: 1;}
	}
	#main-feature-img > div > img:nth-child(1){
		width: 3.795vh;
		transform: translate(0, 0) rotate(-15deg);
		left: calc(50vw - 0vh);
		top: 35vh;
		opacity: 0;
		animation: img-1 10s infinite backwards;
	}
	@keyframes img-2{
		0%{opacity: 1;}
		30%{opacity: 1;}
		35%{opacity: 0;}
		40%{opacity: 0;}
		90%{opacity: 0;}
		95%{opacity: 0;}
		100%{opacity: 1;}
	}
	#main-feature-img > div > img:nth-child(2){
		width: 4.245vh;
		transform: translate(0, 0) rotate(-15deg);
		left: calc(50vw + .5vh);
		top: 15.6vh;
		transform-origin: -1vw center;
		opacity: 0;
		animation: img-2 10s infinite backwards;
	}
	@keyframes img-3{
		0%{transform: translate(0, 0); opacity: 0;}
		30%{transform: translate(-10vw, 3vw); opacity: 0;}
		35%{transform: translate(-10vw, 3vw); opacity: 0;}
		40%{transform: translate(-10vw, 3vw); opacity: 1;}
		60%{transform: translate(0, 0); opacity: 1;}
		90%{transform: translate(0, 0); opacity: 1;}
		95%{transform: translate(0, 0); opacity: 0;}
		100%{transform: translate(0, 0); opacity: 0;}
	}
	#main-feature-img > div > img:nth-child(3){
		transform: translate(0, 0);
		width: 53.79vw;
		left: 26vw;
		top: calc(50vh - 21.5vw);
		opacity: 1;
		animation: img-3 10s infinite backwards;
	}
	@keyframes img-4{
		0%{opacity: 0;}
		30%{opacity: 0;}
		35%{opacity: 0;}
		40%{opacity: 1;}
		60%{opacity: 1;}
		90%{opacity: 1;}
		95%{opacity: 0;}
		100%{opacity: 0;}
	}
	#main-feature-img > div > img:nth-child(4){
		transform: translate(0, 0);
		width: 57.39vw;
		left: 25vw;
		top: calc(50vh - 50vw);
		opacity: 1;
		animation: img-4 10s infinite backwards;
	}
	#main-feature-img > div{
/*		transform-style: preserve-3d;*/
		perspective: 850vw;
		perspective-origin: -25% 5%;
	}
	@keyframes img-5{
		0%{opacity: 0;}
		30%{opacity: 0;}
		35%{opacity: 0;}
		40%{opacity: 0;}
		60%{opacity: 0;}
		65%{opacity: 1;}
		90%{opacity: 1;}
		95%{opacity: 0;}
		100%{opacity: 0;}
	}
	#charge{
		width: 45.8vw;
		position: absolute;
		left: 29vw;
		top: calc(50vh - 46.7vw);
		transform: rotateY(30deg) rotateX(15deg) scale(1, 1);
		transform-origin: 0 0;
		border-radius: 6.5vw;
		overflow: hidden;
		transition: all .2s;
		opacity: 1;
		animation: img-5 10s infinite backwards;
	}
	#charge > img{
		width: 22.8vw;
		margin: 0;
		padding: 0;
		display: block;
		position: absolute;
		left: 12.6vw;
		top: -0.045vw;
	}
	#charge > video{
		width: 45.8vw;
		margin: 0;
		padding: 0;
		display: block;
		position: relative;
		left: 0;
		top: 0;
	}
}