/* 전경 레이어 */
.background-effect-prism {
			width: 100vw; 
			height: 100vh; 
			position:fixed; 
			top:0;
			left:0;
			pointer-events:none;
      z-index: 2;
		}
/* 원경 레이어 */
.background-effect-prism-back {
			width: 100vw; 
			height: 100vh; 
			position:fixed; 
			top:0;
			left:0;
			pointer-events:none;
      z-index: 0;
		}
/* 파티클 */
    .particle {
      position: absolute;
      width: 50px;
      height: 50px;
      display: block;
      border-radius: 100%;
      opacity: 0;
      animation-iteration-count: infinite;
      box-shadow: 10px -5px 3px rgba(255,255,255,0.2);
    }

    @keyframes spark1 {
      0% {opacity: 0;}
      30% {opacity: 1;}
      31% {opacity: 0;}
      32% {opacity: 1;}
      33% {opacity: 0;}
      34% {opacity: 1;}
      35% {opacity: 0;}
      70% {opacity: 1;}
      71% {opacity: 0;}
      90% {opacity: 1;}
      100% {opacity: 0;}
    }

    @keyframes spark2 {
      0% {opacity: 0;}
      70% {opacity: 1;}
      71% {opacity: 0;}
      90% {opacity: 1;}
      100% {opacity: 0;}
    }

    @keyframes sparkmove1 {
      0% {
        translate: -0px 0px;
      filter: blur(4px);}
      100% {translate: -900px 1200px;
      filter: blur(6px);}
    }

    @keyframes sparkmove2 {
      0% {
        translate: 0px 0px;
      filter: blur(1px);}
      100% {translate: -600px 800px;
      filter: blur(3px);}
    }

    /* 전경 */

    .background-effect-prism .particle:nth-child(n) {
      animation-name: spark1, sparkmove1;
      animation-duration: 20s;
      scale:200%;
    }
    .distance1-p {
    }

    .distance2-p {
    }

    /* 원경 */
 .background-effect-prism-back .particle:nth-child(n) {
      animation-name: spark2, sparkmove2;
      animation-duration: 40s;
      scale: 100%;
    }