body{
	margin: 0;
	padding:0;
}
.main{
	width:100%;
	height:100vh;
	position: relative;
}
.test {
	position:absolute;
	overflow:visible;
	background-image:url(/sample.jpg);
	background-size:contain;
width:100vw;
	height:100vh;
	z-index: 20;
	background-repeat: no-repeat;
}


.sample {
	position:absolute;
	overflow:hidden;
	margin: 0 calc(50% - 50vw);
	background-color:transparent;
width:100vw;
	height:100vh;
	z-index: 30;
}

	.sample::before {
		position:absolute;
top:-60%;
		left:-180%;
		border-radius:50% 50% / 50% 80%;
		width:200%;
		aspect-ratio: 1 / 1;
	content:"";
		background-color:#00FFF5;
	animation:wave linear 10s infinite;
	}

@keyframes wave {
	from {
		transform:rotate(0deg);
	}
	to {
		transform:rotate(360deg);
	}
}
@media screen and (max-width: 767px) {
.sample::before {
    position: absolute;
    top: -70%;
    left: -290%;
    border-radius: 50% 50% / 50% 80%;
    width: 300%;
    height: 200%;
    aspect-ratio: 1 / 1;
    content: "";
    background-color: #3168dd;
    animation: wave linear 10s infinite;}
}