.contents {
  position: relative;
  z-index: 10; }

.efx {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: 1600px;
  transform: translateX(-50%);
  overflow: hidden; }
  .efx p {
    position: absolute;
    opacity: 0.8;
    mix-blend-mode: multiply; }
  .efx .efx1 {
    width: 20%;
    height: auto;
    top: 10px;
    left: -4%;
    animation: waveCircle1 30s linear 0s infinite; }
  .efx .efx2 {
    width: 14%;
    top: 180px;
    left: 0;
    animation: waveCircle2 12s linear 0s infinite; }
  .efx .efx2s {
    width: 10%;
    top: 330px;
    left: 33%;
    animation: waveCircle1 32s linear 0s infinite; }
  .efx .efx3 {
    width: 18%;
    top: 500px;
    left: -8%;
    animation: waveCircle3 24s linear 0s infinite; }
  .efx .efx4 {
    width: 20%;
    top: 240px;
    right: 0;
    animation: waveCircle4 24s linear 0s infinite;
    transform-origin: center; }
  .efx .efx5 {
    width: 20%;
    bottom: 240px;
    left: 0;
    animation: waveCircle2 32s linear 0s infinite;
    transform-origin: center; }
  .efx .efx6 {
    width: 20%;
    top: 64%;
    right: -8%;
    animation: waveCircle2 24s linear 0s infinite;
    transform-origin: center; }
  .efx .efx7 {
    width: 14%;
    top: 92%;
    right: -4%;
    animation: waveCircle3 24s linear 0s infinite;
    transform-origin: center; }

.efx-page {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%; }
  .efx-page .efx-page1 {
    width: 14%;
    top: 6%;
    left: -6%;
    animation: waveCircle1 24s linear 0s infinite;
    transform-origin: center; }
  .efx-page .efx-page2 {
    width: 18%;
    top: 16%;
    left: -16%;
    animation: waveCircle3 40s linear 0s infinite;
    transform-origin: center; }
  .efx-page .efx-page3 {
    width: 18%;
    bottom: 12%;
    right: -10%;
    animation: waveCircle3 40s linear 0s infinite;
    transform-origin: center; }
  .efx-page .efx-page4 {
    width: 12%;
    bottom: -2%;
    right: -1%;
    animation: waveCircle1 20s linear 0s infinite;
    transform-origin: center; }

@keyframes waveCircle1 {
  0% {
    rotate: 0;
    scale: 1; }
  50% {
    scale: 1.4; }
  100% {
    rotate: -360deg;
    scale: 1; } }
@keyframes waveCircle2 {
  0% {
    rotate: 0;
    opacity: 1;
    scale: 1; }
  20% {
    rotate: 60deg; }
  40% {
    rotate: 120deg;
    opacity: 0.6;
    scale: 0.8; }
  60% {
    rotate: 180deg; }
  80% {
    rotate: 240deg; }
  100% {
    rotate: 360deg;
    opacity: 1;
    scale: 1; } }
@keyframes waveCircle4 {
  0% {
    rotate: 0;
    opacity: 1;
    scale: 1;
    transform: translate(0, 0); }
  20% {
    rotate: -60deg; }
  40% {
    rotate: -120deg;
    opacity: 0.6;
    scale: 0.8;
    transform: translate(0, 50%); }
  60% {
    rotate: -180deg; }
  80% {
    rotate: -240deg; }
  100% {
    rotate: -360deg;
    opacity: 1;
    scale: 1;
    transform: translate(0, 0); } }
@keyframes waveCircle3 {
  0% {
    rotate: 0; }
  50% {
    rotate: 90deg; }
  100% {
    rotate: 0; } }
@media screen and (max-width: 736px) {
  .efx-page .efx-page1 {
    top: 8%;
    left: -2%; }
  .efx-page .efx-page2 {
    top: 12%;
    left: -8%; }
  .efx-page .efx-page3 {
    width: 24%;
    bottom: 18%;
    right: -6%; }
  .efx-page .efx-page4 {
    width: 16%;
    bottom: 8%;
    right: -8%; } }