/* 아침 */
#main .intro.morning{
	background:url(../images/ver5/bg_mainMorning.jpg) no-repeat center top;
	background-size: 1920px 100%;
	height:100%;
}

.img_water_morning { background: url(../images/ver5/water_01_morning.png) no-repeat; background-size: cover; position: absolute; width: 1920px; height: 980px; left: -15px; top: -6px; z-index: 4; filter: url("#turbulence"); }
.img_waterUnder_morning { background: url(../images/ver5/img_waterUnder_morning.png) no-repeat; background-size: cover; position: absolute; width: 1920px; height: 980px; left: -8px; top: 0px; z-index: 5; }

/* 오후 */
#main .intro.afternoon{
	background:url(../images/ver5/bg_mainAfternoon.jpg) no-repeat center top;
	background-size: 1920px 100%;
	height:100%;
}
.img_water_afternoon { background: url(../images/ver5/water_02_afternoon.png) no-repeat; background-size: cover; position: absolute; width: 1920px; height: 980px; left: -15px; top: -6px; z-index: 4; filter: url("#turbulence"); }
.img_waterUnder_afternoon { background: url(../images/ver5/img_waterUnder_afternoon.png) no-repeat; background-size: cover; position: absolute; width: 1920px; height: 659px; left: -11px; top: 24px; z-index: 5; }

/* 밤 */
#main .intro.evening{
	background:url(../images/ver5/bg_mainEvening.jpg) no-repeat center top;
	background-size: 1920px 100%;
	height:100%;
}
.img_water_evening { background: url(../images/ver5/water_03_evening.png) no-repeat; background-size: cover; position: absolute; width: 1920px; height: 980px; left: -15px; top: -6px; z-index: 4; filter: url("#turbulence"); }
.img_waterUnder_evening { background: url(../images/ver5/img_waterUnder_evening.png) no-repeat; background-size: cover; position: absolute; width: 1920px; height: 659px; left: -10px; top: 0px; z-index: 5; }

.windmill_area {
  transform: rotate3d(1, 9, 1, 60deg );
 }
.img_windmill { background: url(../images/ver5/img_windmill.png) no-repeat; position: absolute; width: 300px; height: 300px; left: -28px; top: 140px; z-index: 10;
  animation: spin 15s linear infinite;
}
.water_area { position: absolute; z-index: 1; top: 0; }
.img_water { background: url(../images/ver5/img_water.png) no-repeat; background-size: cover; position: absolute; width: 523px; height: 156px; left: 793px; top: 633px; z-index: 10; filter: url("#turbulence"); }
.img_waterUnder { background: url(../images/ver5/img_waterUnder.png) no-repeat; background-size: cover; position: absolute; width: 396px; height: 194px; left: 789px; top: 667px; z-index: 14; }

.img_water_night { background: url(../images/ver5/img_water_night.png) no-repeat; background-size: cover; position: absolute; width: 297px; height: 138px; left: 937px; top: 629px; z-index: 10; filter: url("#turbulence"); }
/* .img_waterUnder { background: url(../images/ver5/img_waterUnder.png) no-repeat; background-size: cover; position: absolute; width: 396px; height: 194px; left: 789px; top: 667px; z-index: 14; } */

.moving_area{
   position: absolute; width: 396px; height: 194px; left: 49%; top: 62%; z-index: 10; 
}

.duck_area { position: absolute;  z-index: 13; width: 144px; height: 106px;  opacity: 1; animation: moving-boat 15s linear alternate; transform: rotate( -10deg) translateX(152px) translateY(110px);}
.img_duck { background: url(../images/ver5/img_duck.png) no-repeat; background-size: cover; position: absolute; width: 144px; height: 190px;  z-index: 12; animation: rock-boat 3s ease-in-out infinite; }
/* .img_duck::before{ content: ""; width: inherit; height: 44%; position: absolute; bottom: -39%; background: linear-gradient(to bottom, rgb(105 71 71 / 0%),#ffffff96); z-index: 1; filter: blur(4px); z-index: 1; filter: blur(4px); transform: scaleY(-1) rotate( -20deg );} */
/* .img_duck::after{ content: ""; background-image: inherit; width: inherit; height: 32%; position: absolute; bottom: 4%; transform: scaleY(-1) rotate( -20deg ); filter: blur(2px); background-position: bottom; background-size: cover; opacity: 0.5;} */

@keyframes moving-boat {
  0%{
    transform: translateX(0px) translateY(0px);
    opacity: 1;
  }

  25%{
    transform: translateX(25px) translateY(25px);
    opacity: 1;    
  }  
  50%{    
    transform: translateX(70px) translateY(50px);    
  }  
  
}
@keyframes rock-boat {

  50% {
    -webkit-transform: rotate(-3.1deg) translateY(-3.1px);
    -moz-transform: rotate(-3.1deg) translateY(-3.1px);
    -ms-transform: rotate(-3.1deg) translateY(-3.1px);
    -o-transform: rotate(-3.1deg) translateY(-3.1px);
    transform: rotate(-3.1deg) translateY(-3.1px);
  }
}
.clock { border-radius: 50%; background: #fff url(../images/ver5/img_clock.png) no-repeat center; background-size: 30px;  position: absolute; width: 25px; height: 25px; left: 885px; top: 388px; z-index: 13; } 
#clockNight.clock { background: #fff url(../images/ver5/img_clock_night.png) no-repeat center;  } 
.clock.simple:after { background: #27233c; border-radius: 50%; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 5%; height: 5%; z-index: 10; }
.minutes-container, .hours-container, .seconds-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.hours {
  background: #27233c;
  height: 23%;
  left: 48.75%;
  position: absolute;
  top: 30%;
  transform-origin: 50% 100%;
  width: 4.9%;
}
.minutes {
  background: #27233c;
  height: 40%;
  left: 49%;
  position: absolute;
  top: 10%;
  transform-origin: 50% 100%;
  width: 2%;
}
.seconds {
  background: #27233c;
  height: 45%;
  left: 49.5%;
  position: absolute;
  top: 14%;
  transform-origin: 50% 80%;
  width: 0.5%;
  z-index: 8;
}
@keyframes rotate {
  100% {
    transform: rotateZ(360deg);
  }
}
.hours-container {
  animation: rotate 43200s infinite linear;
}
.minutes-container {
  animation: rotate 3600s infinite linear;
}
.seconds-container {
  animation: rotate 60s infinite linear;
}
.minutes-container {
  animation: rotate 3600s infinite steps(60);
}
.seconds-container {
  animation: rotate 60s infinite steps(60);
}

.minutes-container {
  transition: transform 0.3s cubic-bezier(.4,2.08,.55,.44);
}
.seconds-container {
  transition: transform 0.2s cubic-bezier(.4,2.08,.55,.44);
}

/* evening effect 정의 */

   /* house ver5 start */
   .house0_ver5{
	width: 811px; height: 503px; position: absolute; left: 27px; top: 227px; z-index: 10;
  }
  .house0_ver5 i { display: block; position: absolute; }
  .house0_ver5 i.leftWin0{ width: 300px; height: 300px; top: 38.4%; left: 58px; background: url(../images/ver5/even_leftWin0.png) no-repeat;
	animation: flicker 5.1s ease-in-out infinite alternate;
   }
  .house0_ver5 i.leftWin1{ width : 197px; height: 87px; top: 96px; left: 263px; filter: blur(1.1px); background: url(../images/ver5/even_leftWin1.png) no-repeat;
    animation: flicker_ver4 3s ease-in-out alternate;
   }
   .house0_ver5 i.leftWin2{ width : 450px; height: 450px; top: -94px; left: 1392px; z-index: 3; filter: blur(1.3px); background: url(../images/ver5/even_leftWin2.png) no-repeat;
	animation: blinking1 3s ease-in-out infinite alternate;
  }
  .house0_ver5 i.leftWin3{ width: 100px; height: 100px; top: 41%; left: 332px; background: url(../images/ver5/even_leftWin3.png) no-repeat;
	animation: blinking 1.2s ease-in-out infinite alternate;
   }
  .house0_ver5 i.leftWin3_1{ width: 100px; height: 100px; top: 199px; left: 488px; background: url(../images/ver5/even_leftWin3_1.png) no-repeat;
	animation: blinking 2s ease-in-out infinite alternate;
   }
  .house0_ver5 i.leftWin4{ width : 171px; height: 64px; top: 185px; left: 1030px; background: url(../images/ver5/even_leftWin4.png) no-repeat;
	animation: blinking1 3.8s ease-in-out infinite alternate;
   }

   .house0_ver5 i.leftWin5{ width : 400px; height: 150px; top: 39%; left: 79.5%; filter: blur(1.1px); background: url(../images/ver5/even_leftWin5.png) no-repeat;
	animation: blinking1 1.5s ease-in-out infinite alternate;
   }

   .house0_ver5 i.leftWin6{ width : 150px; height: 150px; top: -1%; left: 104.1%; filter: blur(0.5px); background: url(../images/ver5/even_leftWin6.png) no-repeat;
	animation: flicker_ver4 4s ease-in-out alternate;
   }
   .house0_ver5 i.leftWin7{ width : 12px; height: 13px; top: 73%; left: 84.1%; filter: blur(0.5px); background: url(../images/ver5/even_leftWin7.png) no-repeat;
    animation: blinking1 3s ease-in-out infinite alternate;
   }
   .house0_ver5 i.leftWin8{ width : 100px; height: 100px; top: 309px; left: 1181px; background: url(../images/ver5/even_leftWin8.png) no-repeat;
    animation: blinking1 3s ease-in-out infinite alternate;
   }
  
   .house0_ver5 i.img_light0{ width : 800px; height: 800px; top: -135px; left: -20%; background: url(../images/ver5/img_light0.png) no-repeat;
	animation: blinking_main 3s ease-out infinite alternate;
   }
  .house0_ver5 i.img_light1{ width : 500px; height: 500px; top: 152px; left: -91px; background: url(../images/ver5/img_light1.png) no-repeat;
	animation: blinking_main2 6s linear infinite alternate;
   }
  .house0_ver5 i.img_light2{ width : 84px; height: 86px; top: 320px; left: 1196px; background: url(../images/ver5/img_light2.png) no-repeat;
	animation: scaled2 10.1s ease-in-out infinite alternate;
   }
  .house0_ver5 i.img_light3{ width: 84px; height: 86px; top: 99px; left: 292px; background: url(../images/ver5/img_light2.png) no-repeat;
	animation: scaled2 10.1s ease-in-out infinite alternate;
   }
   .house0_ver5 i.img_light4 { width: 178px; height: 182px; top: 66px; left: 1734px; background: url(../images/ver5/img_light7.png) no-repeat; animation: blinking_main 2s ease-out infinite alternate; }
   .house0_ver5 i.img_light5{ width : 103px; height: 105px; top: 252px; left: 362px; background: url(../images/ver5/img_light0.png) no-repeat;
    animation: blinking 2s ease-in-out infinite alternate;
  }
   .house0_ver5 i.img_light6{ width : 200px; height: 100px; top: 64%; left: 72.5%; background: url(../images/ver5/img_light6.png) no-repeat;
    animation: blinking_main 3s ease-out infinite alternate;
  }


  .house0_ver5 i.img_beachLight1 { width: 100px; height: 100px; top: 103%; left: 100%; background: url(../images/ver5/img_beachLight1.png) no-repeat; animation: blinking_main 0.9s ease-out infinite alternate; }
  .house0_ver5 i.img_beachLight2 { width: 100px; height: 100px; top: 108%; left: 104%; background: url(../images/ver5/img_beachLight2.png) no-repeat; animation: blinking_main 0.7s ease-in-out infinite alternate;  }
  .house0_ver5 i.img_beachLight3 { width: 100px; height: 100px; top: 109%; left: 112%; background: url(../images/ver5/img_beachLight3.png) no-repeat; animation: blinking_main 0.8s ease-out infinite alternate; }
  .house0_ver5 i.img_beachLight4 { width: 100px; height: 100px; top: 106.5%; left: 120%; background: url(../images/ver5/img_beachLight4.png) no-repeat; animation: blinking_main 0.5s ease-in-out infinite alternate; }
  .house0_ver5 i.img_beachLight5 { width: 100px; height: 100px; top: 102%; left: 122%; background: url(../images/ver5/img_beachLight5.png) no-repeat; animation: blinking_main 0.8s ease-out infinite alternate; }
  
  .house0_ver5 i.img_beachLight6 { width: 100px; height: 100px; top: 84%; left: 203%; background: url(../images/ver5/img_beachLight6.png) no-repeat; animation: blinking_main 0.8s ease-out infinite alternate; }
  .house0_ver5 i.img_beachLight7 { width: 100px; height: 100px; top: 61.5%; left: 172.7%; background: url(../images/ver5/img_beachLight7.png) no-repeat; animation: blinking_main 0.8s ease-out infinite alternate; }

  .ship_area {   }
  .img_ship { width: 700px; height: 400px; top: 2%; left: 18.5%; position: absolute; z-index: 1; background: url(../images/ver5/img_ship.png) no-repeat; animation: rock-boat 5s ease-in-out infinite;  }


  .img_moon { width: 400px; height: 400px; top: -1%; left: 50%; position: absolute; z-index: 56; background: url(../images/ver5/img_moon.png) no-repeat;  }
  .img_moon_under { width: 350px; height: 350px; top: -5%; left: 47%; position: absolute; z-index: 57; background: url(../images/ver5/img_moon_under.png) no-repeat; animation: blinking_main 2s ease-in-out infinite alternate; filter: blur(3px); background-size: 100%; }
   /* .fireworks-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.fireworks-container canvas { position: absolute; top: 0px; width: 1346px; height: 302px; right: 5%; } */


#firework {
  position: absolute; top: 0px; width: 1346px; height: 302px; right: 5%; ;
}

/* #fireworks canvas {  width: 800px; height: 500px; } */
#fireworks {position: absolute; top: -24%; left: 0%; }
#fireworks canvas {  width: 100%; height: 700px; }
  
   /* house ver4 end */

   @keyframes blinker_lighthouse {
      /* animation: blinker 1s linear infinite; */
      50% {
         transform: scale(0.8);
         opacity: 0.7;
      }
    }

    @keyframes blinking_main{
      0% {opacity:0.5; transform: scale(0.7);}
      100% {opacity:1; transform: scale(0.9);}
    }
    @keyframes blinking_main2{
      0% {opacity:0.4; transform: scale(0.5);}
      100% {opacity:1; transform: scale(0.7);}
    }

    @keyframes flicker_ver4 {
      0%,
      19.999%,
      22%,
      62.999%,
      64%,
      64.999%,
      70%,
      100% {
        opacity: 0;
        
      }
      20%,
      21.999%,
      30%,
      40%,
      50%,
      63%,
      63.999%,
      65%,
      69.999% {
        opacity: 0.4;
        
      }
    }

   .scene {
      position: absolute;
      z-index: 10;
      top: -242%; left: -108%;
      width: 100%;
      -webkit-perspective: 500px;
      -moz-perspective: 500px;
      perspective: 500px;
      -webkit-perspective-origin: 50% 50%;
      -moz-perspective-origin: 50% 50%;
      perspective-origin: 50% 50%;
      -webkit-transform: translateY(50%);
      -moz-transform: translateY(50%);
      transform: translateY(50%);
    }
    
    .lightandbeam {
      position: relative;
      margin: 100px auto;
      width: 100%;
      height: 200px;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }
    
    .lighthouse {
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -15px 0 0 -10px;
      z-index: 100;
    }
    
    .lightBase {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 200px;
    }
    
    .beam {
      height: 3px; top: 105px;
      background-image: linear-gradient(
         to right,
         rgba(245, 250, 200, 0.58) 5%,
         rgba(150, 150, 150, 0.05) 20%,
         rgba(50, 50, 50, 0) 50%,
         rgba(30, 30, 30, 0) 60%,
         rgba(0, 0, 0, 0)
       );
      -webkit-transform: translate3d(50%, -15px, 0px);
      -moz-transform: translate3d(50%, -15px, 0px);
      transform: translate3d(50%, -15px, 0px);
    }
    
    .light {
      top: -9px;
      background-image: radial-gradient(
        circle 15px at 50% 50%,
        rgb(200, 200, 200),
        rgba(50, 75, 75, 0.2),
        rgba(0, 0, 0, 0)
      );
      -webkit-transform: translateX(0px) rotateY(-90deg);
      -moz-transform: translateX(0px) rotateY(-90deg);
      transform: translateX(0px) rotateY(-90deg);
    }
    
    .rotate {
      -webkit-animation: spinY 6s infinite linear;
      -moz-animation: spinY 6s infinite linear;
      animation: spinY 6s infinite linear;
    }
    
    @-webkit-keyframes spinY {
      from {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
      }
      to {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
      }
    }
    
    @-moz-keyframes spinY {
      from {
        -moz-transform: rotateY(0);
        transform: rotateY(0);
      }
      to {
        -moz-transform: rotateY(360deg);
        transform: rotateY(360deg);
      }
    }
    
    @keyframes spinY {
      from {
        transform: rotateY(0);
        transform: rotateY(0);
      }
      to {
        transform: rotateY(360deg);
        transform: rotateY(360deg);
      }
    }


    /* flower flake */
.set_albe {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   transform: skew(-16.5deg);
   z-index: 15;
 }
 .set_albe div
 {
     /* transform: skew(16.5deg); */
     position: absolute;
     display: block;
 }
 .set_albe div:nth-child(2n-1)
 {
   filter: blur(1.5px);
   
   
 }
 .set_albe div:nth-child(1)
{
    left: 20%;
    transform: skew(16.5deg) scale(0.3);
    animation: animate_albe 20s linear infinite, swingswing 2s linear alternate;
    animation-delay: -7s;
}
.set_albe div:nth-child(2)
{
    left: 50%;
    transform: skew(16.5deg) scale(0.35);
    animation: animate_albe 25s linear infinite;
    animation-delay: -5s;
}
.set_albe div:nth-child(3)
{
   transform: skew(16.5deg) scale(0.3);
    left: 70%;
    animation: animate_albe 30s linear infinite;
}
.set_albe div:nth-child(4)
{
    left: 0%;
    transform: skew(16.5deg) scale(0.3);
    animation: animate_albe 20s linear infinite;
    animation-delay: -5s;
}
.set_albe div:nth-child(5)
{
    left: 85%;
    transform: skew(16.5deg) scale(0.3);
    animation: animate_albe 23s linear infinite;
    animation-delay: -10s;
}
.set_albe div:nth-child(6)
{
    left: 0%;
    transform: skew(16.5deg) scale(0.2);
    animation: animate_albe 17s linear infinite;
}
.set_albe div:nth-child(7)
{
    left: 38%;
    transform: skew(16.5deg) scale(0.4);
    animation: animate_albe 19s linear infinite;
}
.set_albe div:nth-child(8)
{
    left: 60%;
    transform: skew(16.5deg) scale(0.35);
    animation: animate_albe 19s linear infinite;
}
.set_albe div:nth-child(9)
{
    left: 50%;
    transform: skew(25.5deg) scale(0.35);
    animation: animate_albe 30s linear infinite;
    animation-delay: -5s;
}
.set_albe div:nth-child(10)
{
    left: 90%;
    transform: skew(16.5deg) scale(0.35);
    animation: animate_albe 25s linear infinite;
    animation-delay: -5s;
}
 @keyframes animate_albe
 {
     0%
     {
         opacity: 0;
         top: -10%;
         transform: rotate(0deg);
     }
     10%
     {
         opacity: 1;
     }
     20%
     {
         transform:  rotate(45deg);
     }
     40%
     {
         transform:  rotate(90deg);
     }
     60%
     {
         transform: rotate(135deg);
     }
     80%
     {
         transform:  rotate(180deg);
     }
     100%
     {
         top: 110%;
         transform:  rotate(365deg);
     }
 }
 @keyframes swingswing_albe { 
   20% { transform: rotate(15deg); } 
   40% { transform: rotate(-10deg); } 
   60% { transform: rotate(5deg); } 
   80% { transform: rotate(-5deg); } 
   100% { transform: rotate(0deg); } 
 }
 .set_albe2
 {
     transform: scale(2);
     filter: blur(2px);
 }
 .set_albe3
 {
     transform: scale(0.8);
     filter: blur(4px);
 }
 /* //flower flake */
 

 .fog_area {
   position: absolute;
   top: 0;
   z-index: 5;
   width: 100%;
   height: 100%;
   -webkit-filter: blur(1px);
   filter: blur(1px);
   opacity: 1;
}


@keyframes spin { 

  00% { transform:rotate(0deg); } 
  100% { transform:rotate(360deg); } 
}



#small_lightBox {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 57%;
  left: 10%;
  z-index: 50;
}

@keyframes bigBoxAnimation {
  100% {transform:rotate(360deg);}
}
@keyframes boxAnimation{
  50% {transform:translateY(-50px);}
}
@keyframes spanAnimation {
  50% {transform:translateX(-50px)}
}
@keyframes boxAnimation2{
  50% {transform:translateY(75px);}
}
@keyframes spanAnimation2 {
  50% {transform:translateX(75px)}
}



.ag-format-container {
width: 1142px;
margin: 0 auto;
}
.ag-sparks {
height: 100%;
/* background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sparks/images/bg.jpg) no-repeat scroll 0 0 #01202d; */

position: relative;
}
.ag-sparks:before,
.ag-sparks:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.ag-sparks:before {
content: "";

-webkit-animation: an-blink 30s linear 3s infinite;
-moz-animation: an-blink 30s linear 3s infinite;
-o-animation: an-blink 30s linear 3s infinite;
animation: an-blink 30s linear 3s infinite;
}
.ag-sparks:after {
content: "";
/* background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sparks/images/lava.png) no-repeat scroll 0 0; */

z-index: 10;
}
.ag-spark {
height: 100%;

position: relative;
}
.ag-spark:before,
.ag-spark:after {
content: "";
/* background-image: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sparks/images/spark.png); */
background-position-x: 50%;
background-repeat: repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

opacity: 0;

will-change: transform;

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.ag-spark:before {
-webkit-animation: an-spark 1800s linear infinite, an-slow-shake 16s linear 10s infinite;
-moz-animation: an-spark 1800s linear infinite, an-slow-shake 16s linear 10s infinite;
-o-animation: an-spark 1800s linear infinite, an-slow-shake 16s linear 10s infinite;
animation: an-spark 1800s linear infinite, an-slow-shake 16s linear 10s infinite;
}
.ag-spark:after {
-webkit-animation: an-spark 3600s linear infinite, an-slow-shake-revert 12s linear infinite;
-moz-animation: an-spark 3600s linear infinite, an-slow-shake-revert 12s linear infinite;
-o-animation: an-spark 3600s linear infinite, an-slow-shake-revert 12s linear infinite;
animation: an-spark 3600s linear infinite, an-slow-shake-revert 12s linear infinite;
}

.ag-lightning {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.ag-lightning:before,
.ag-lightning:after {
content: "";

opacity: 0;

will-change: transform;

position: absolute;
}
.ag-lightning:before {
width: 272px;
background-image: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sparks/images/lightning-1.png);

top: -9.75em;
left: 50%;

-webkit-animation: an-lightning-first 15s linear 2s infinite;
-moz-animation: an-lightning-first 15s linear 2s infinite;
-o-animation: an-lightning-first 15s linear 2s infinite;
animation: an-lightning-first 15s linear 2s infinite;
}
.ag-lightning:after {
width: 254px;
background-image: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sparks/images/lightning-2.png);

top: -10.1875em;
right: -6.1875em;

-webkit-animation: an-lightning-second 15s linear 2s infinite;
-moz-animation: an-lightning-second 15s linear 2s infinite;
-o-animation: an-lightning-second 15s linear 2s infinite;
animation: an-lightning-second 15s linear 2s infinite;
}

@-webkit-keyframes an-blink {
0% {
  background: rgba(255, 255, 255, 0);
}
1.5% {
  background: rgba(0, 0, 0, 0.1);
}
1.66% {
  background: rgba(255, 255, 255, 0.1);
}
1.7% {
  background: rgba(255, 255, 255, 0);
}
2.66% {
  background: rgba(0, 0, 0, 0.1);
}
2.9% {
  background: rgba(255, 255, 255, 0);
}
3.2% {
  background: rgba(255, 255, 255, 0.1);
}
3.4% {
  background: rgba(255, 255, 255, 0);
}
6.7% {
  background: rgba(0, 0, 0, 0.1);
}
6.8% {
  background: rgba(255, 255, 255, 0.1);
}
7.2% {
  background: rgba(255, 255, 255, 0);
}
36.7% {
  background: rgba(0, 0, 0, 0.1);
}
36.8% {
  background: rgba(255, 255, 255, 0.1);
}
37.2% {
  background: rgba(255, 255, 255, 0);
}
53.5% {
  background: rgba(0, 0, 0, 0.1);
}
53.66% {
  background: rgba(255, 255, 255, 0.1);
}
53.7% {
  background: rgba(255, 255, 255, 0);
}
54.66% {
  background: rgba(0, 0, 0, 0.1);
}
54.9% {
  background: rgba(255, 255, 255, 0);
}
55.2% {
  background: rgba(255, 255, 255, 0.1);
}
55.4% {
  background: rgba(255, 255, 255, 0);
}
76.7% {
  background: rgba(0, 0, 0, 0.1);
}
76.8% {
  background: rgba(255, 255, 255, 0.1);
}
77.2% {
  background: rgba(255, 255, 255, 0);
}
100% {
  background: rgba(255, 255, 255, 0);
}
}
@-moz-keyframes an-blink {
0% {
  background: rgba(255, 255, 255, 0);
}
1.5% {
  background: rgba(0, 0, 0, 0.1);
}
1.66% {
  background: rgba(255, 255, 255, 0.1);
}
1.7% {
  background: rgba(255, 255, 255, 0);
}
2.66% {
  background: rgba(0, 0, 0, 0.1);
}
2.9% {
  background: rgba(255, 255, 255, 0);
}
3.2% {
  background: rgba(255, 255, 255, 0.1);
}
3.4% {
  background: rgba(255, 255, 255, 0);
}
6.7% {
  background: rgba(0, 0, 0, 0.1);
}
6.8% {
  background: rgba(255, 255, 255, 0.1);
}
7.2% {
  background: rgba(255, 255, 255, 0);
}
36.7% {
  background: rgba(0, 0, 0, 0.1);
}
36.8% {
  background: rgba(255, 255, 255, 0.1);
}
37.2% {
  background: rgba(255, 255, 255, 0);
}
53.5% {
  background: rgba(0, 0, 0, 0.1);
}
53.66% {
  background: rgba(255, 255, 255, 0.1);
}
53.7% {
  background: rgba(255, 255, 255, 0);
}
54.66% {
  background: rgba(0, 0, 0, 0.1);
}
54.9% {
  background: rgba(255, 255, 255, 0);
}
55.2% {
  background: rgba(255, 255, 255, 0.1);
}
55.4% {
  background: rgba(255, 255, 255, 0);
}
76.7% {
  background: rgba(0, 0, 0, 0.1);
}
76.8% {
  background: rgba(255, 255, 255, 0.1);
}
77.2% {
  background: rgba(255, 255, 255, 0);
}
100% {
  background: rgba(255, 255, 255, 0);
}
}
@-o-keyframes an-blink {
0% {
  background: rgba(255, 255, 255, 0);
}
1.5% {
  background: rgba(0, 0, 0, 0.1);
}
1.66% {
  background: rgba(255, 255, 255, 0.1);
}
1.7% {
  background: rgba(255, 255, 255, 0);
}
2.66% {
  background: rgba(0, 0, 0, 0.1);
}
2.9% {
  background: rgba(255, 255, 255, 0);
}
3.2% {
  background: rgba(255, 255, 255, 0.1);
}
3.4% {
  background: rgba(255, 255, 255, 0);
}
6.7% {
  background: rgba(0, 0, 0, 0.1);
}
6.8% {
  background: rgba(255, 255, 255, 0.1);
}
7.2% {
  background: rgba(255, 255, 255, 0);
}
36.7% {
  background: rgba(0, 0, 0, 0.1);
}
36.8% {
  background: rgba(255, 255, 255, 0.1);
}
37.2% {
  background: rgba(255, 255, 255, 0);
}
53.5% {
  background: rgba(0, 0, 0, 0.1);
}
53.66% {
  background: rgba(255, 255, 255, 0.1);
}
53.7% {
  background: rgba(255, 255, 255, 0);
}
54.66% {
  background: rgba(0, 0, 0, 0.1);
}
54.9% {
  background: rgba(255, 255, 255, 0);
}
55.2% {
  background: rgba(255, 255, 255, 0.1);
}
55.4% {
  background: rgba(255, 255, 255, 0);
}
76.7% {
  background: rgba(0, 0, 0, 0.1);
}
76.8% {
  background: rgba(255, 255, 255, 0.1);
}
77.2% {
  background: rgba(255, 255, 255, 0);
}
100% {
  background: rgba(255, 255, 255, 0);
}
}
@keyframes an-blink {
0% {
  background: rgba(255, 255, 255, 0);
}
1.5% {
  background: rgba(0, 0, 0, 0.1);
}
1.66% {
  background: rgba(255, 255, 255, 0.1);
}
1.7% {
  background: rgba(255, 255, 255, 0);
}
2.66% {
  background: rgba(0, 0, 0, 0.1);
}
2.9% {
  background: rgba(255, 255, 255, 0);
}
3.2% {
  background: rgba(255, 255, 255, 0.1);
}
3.4% {
  background: rgba(255, 255, 255, 0);
}
6.7% {
  background: rgba(0, 0, 0, 0.1);
}
6.8% {
  background: rgba(255, 255, 255, 0.1);
}
7.2% {
  background: rgba(255, 255, 255, 0);
}
36.7% {
  background: rgba(0, 0, 0, 0.1);
}
36.8% {
  background: rgba(255, 255, 255, 0.1);
}
37.2% {
  background: rgba(255, 255, 255, 0);
}
53.5% {
  background: rgba(0, 0, 0, 0.1);
}
53.66% {
  background: rgba(255, 255, 255, 0.1);
}
53.7% {
  background: rgba(255, 255, 255, 0);
}
54.66% {
  background: rgba(0, 0, 0, 0.1);
}
54.9% {
  background: rgba(255, 255, 255, 0);
}
55.2% {
  background: rgba(255, 255, 255, 0.1);
}
55.4% {
  background: rgba(255, 255, 255, 0);
}
76.7% {
  background: rgba(0, 0, 0, 0.1);
}
76.8% {
  background: rgba(255, 255, 255, 0.1);
}
77.2% {
  background: rgba(255, 255, 255, 0);
}
100% {
  background: rgba(255, 255, 255, 0);
}
}

@-webkit-keyframes an-spark {
0% {
  background-position-y: 0;

  opacity: 0;
}
1%,
99% {
  opacity: 1;
}
100% {
  background-position-y: -3750em;

  opacity: 0;
}
}
@-moz-keyframes an-spark {
0% {
  background-position-y: 0;

  opacity: 0;
}
1%,
99% {
  opacity: 1;
}
100% {
  background-position-y: -3750em;

  opacity: 0;
}
}
@-o-keyframes an-spark {
0% {
  background-position-y: 0;

  opacity: 0;
}
1%,
99% {
  opacity: 1;
}
100% {
  background-position-y: -3750em;

  opacity: 0;
}
}
@keyframes an-spark {
0% {
  background-position-y: 0;

  opacity: 0;
}
1%,
99% {
  opacity: 1;
}
100% {
  background-position-y: -3750em;

  opacity: 0;
}
}

@-webkit-keyframes an-slow-shake {
0% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
25% {
  -webkit-transform: translateX(1.25em);
  transform: translateX(1.25em);
}
50% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
75% {
  -webkit-transform: translateX(-1.25em);
  transform: translateX(-1.25em);
}
100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
}
@-moz-keyframes an-slow-shake {
0% {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  transform: translateX(0);
}
25% {
  -webkit-transform: translateX(1.25em);
  -moz-transform: translateX(1.25em);
  transform: translateX(1.25em);
}
50% {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  transform: translateX(0);
}
75% {
  -webkit-transform: translateX(-1.25em);
  -moz-transform: translateX(-1.25em);
  transform: translateX(-1.25em);
}
100% {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  transform: translateX(0);
}
}
@-o-keyframes an-slow-shake {
0% {
  -webkit-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
25% {
  -webkit-transform: translateX(1.25em);
  -o-transform: translateX(1.25em);
  transform: translateX(1.25em);
}
50% {
  -webkit-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
75% {
  -webkit-transform: translateX(-1.25em);
  -o-transform: translateX(-1.25em);
  transform: translateX(-1.25em);
}
100% {
  -webkit-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
}
@keyframes an-slow-shake {
0% {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
25% {
  -webkit-transform: translateX(1.25em);
  -moz-transform: translateX(1.25em);
  -o-transform: translateX(1.25em);
  transform: translateX(1.25em);
}
50% {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
75% {
  -webkit-transform: translateX(-1.25em);
  -moz-transform: translateX(-1.25em);
  -o-transform: translateX(-1.25em);
  transform: translateX(-1.25em);
}
100% {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
}

@-webkit-keyframes an-slow-shake-revert {
0% {
  -webkit-transform: scale(-1, 1) translateX(0);
  transform: scale(-1, 1) translateX(0);
}
25% {
  -webkit-transform: scale(-1, 1) translateX(1.25em);
  transform: scale(-1, 1) translateX(1.25em);
}
50% {
  -webkit-transform: scale(-1, 1) translateX(0);
  transform: scale(-1, 1) translateX(0);
}
75% {
  -webkit-transform: scale(-1, 1) translateX(-1.25em);
  transform: scale(-1, 1) translateX(-1.25em);
}
100% {
  -webkit-transform: scale(-1, 1) translateX(0);
  transform: scale(-1, 1) translateX(0);
}
}
@-moz-keyframes an-slow-shake-revert {
0% {
  -webkit-transform: scale(-1, 1) translateX(0);
  -moz-transform: scale(-1, 1) translateX(0);
  transform: scale(-1, 1) translateX(0);
}
25% {
  -webkit-transform: scale(-1, 1) translateX(1.25em);
  -moz-transform: scale(-1, 1) translateX(1.25em);
  transform: scale(-1, 1) translateX(1.25em);
}
50% {
  -webkit-transform: scale(-1, 1) translateX(0);
  -moz-transform: scale(-1, 1) translateX(0);
  transform: scale(-1, 1) translateX(0);
}
75% {
  -webkit-transform: scale(-1, 1) translateX(-1.25em);
  -moz-transform: scale(-1, 1) translateX(-1.25em);
  transform: scale(-1, 1) translateX(-1.25em);
}
100% {
  -webkit-transform: scale(-1, 1) translateX(0);
  -moz-transform: scale(-1, 1) translateX(0);
  transform: scale(-1, 1) translateX(0);
}
}
@-o-keyframes an-slow-shake-revert {
0% {
  -webkit-transform: scale(-1, 1) translateX(0);
  -o-transform: scale(-1, 1) translateX(0);
  transform: scale(-1, 1) translateX(0);
}
25% {
  -webkit-transform: scale(-1, 1) translateX(1.25em);
  -o-transform: scale(-1, 1) translateX(1.25em);
  transform: scale(-1, 1) translateX(1.25em);
}
50% {
  -webkit-transform: scale(-1, 1) translateX(0);
  -o-transform: scale(-1, 1) translateX(0);
  transform: scale(-1, 1) translateX(0);
}
75% {
  -webkit-transform: scale(-1, 1) translateX(-1.25em);
  -o-transform: scale(-1, 1) translateX(-1.25em);
  transform: scale(-1, 1) translateX(-1.25em);
}
100% {
  -webkit-transform: scale(-1, 1) translateX(0);
  -o-transform: scale(-1, 1) translateX(0);
  transform: scale(-1, 1) translateX(0);
}
}
@keyframes an-slow-shake-revert {
0% {
  -webkit-transform: scale(-1, 1) translateX(0);
  -moz-transform: scale(-1, 1) translateX(0);
  -o-transform: scale(-1, 1) translateX(0);
  transform: scale(-1, 1) translateX(0);
}
25% {
  -webkit-transform: scale(-1, 1) translateX(1.25em);
  -moz-transform: scale(-1, 1) translateX(1.25em);
  -o-transform: scale(-1, 1) translateX(1.25em);
  transform: scale(-1, 1) translateX(1.25em);
}
50% {
  -webkit-transform: scale(-1, 1) translateX(0);
  -moz-transform: scale(-1, 1) translateX(0);
  -o-transform: scale(-1, 1) translateX(0);
  transform: scale(-1, 1) translateX(0);
}
75% {
  -webkit-transform: scale(-1, 1) translateX(-1.25em);
  -moz-transform: scale(-1, 1) translateX(-1.25em);
  -o-transform: scale(-1, 1) translateX(-1.25em);
  transform: scale(-1, 1) translateX(-1.25em);
}
100% {
  -webkit-transform: scale(-1, 1) translateX(0);
  -moz-transform: scale(-1, 1) translateX(0);
  -o-transform: scale(-1, 1) translateX(0);
  transform: scale(-1, 1) translateX(0);
}
}

@-webkit-keyframes an-lightning-first {
0%, 6.75% {
  height: 0;

  opacity: 0;
}
6.8% {
  height: 22.375em;

  opacity: 1;
}
7.6% {
  opacity: 0;
}
7.7% {
  height: 22.375em;
}
7.8%, 49.9% {
  height: 0;
}
50% {
  height: 22.375em;

  opacity: 1;
}
51% {
  opacity: 0;
}
100% {
  opacity: 0;
}
}
@-moz-keyframes an-lightning-first {
0%, 6.75% {
  height: 0;

  opacity: 0;
}
6.8% {
  height: 22.375em;

  opacity: 1;
}
7.6% {
  opacity: 0;
}
7.7% {
  height: 22.375em;
}
7.8%, 49.9% {
  height: 0;
}
50% {
  height: 22.375em;

  opacity: 1;
}
51% {
  opacity: 0;
}
100% {
  opacity: 0;
}
}
@-o-keyframes an-lightning-first {
0%, 6.75% {
  height: 0;

  opacity: 0;
}
6.8% {
  height: 22.375em;

  opacity: 1;
}
7.6% {
  opacity: 0;
}
7.7% {
  height: 22.375em;
}
7.8%, 49.9% {
  height: 0;
}
50% {
  height: 22.375em;

  opacity: 1;
}
51% {
  opacity: 0;
}
100% {
  opacity: 0;
}
}
@keyframes an-lightning-first {
0%, 6.75% {
  height: 0;

  opacity: 0;
}
6.8% {
  height: 22.375em;

  opacity: 1;
}
7.6% {
  opacity: 0;
}
7.7% {
  height: 22.375em;
}
7.8%, 49.9% {
  height: 0;
}
50% {
  height: 22.375em;

  opacity: 1;
}
51% {
  opacity: 0;
}
100% {
  opacity: 0;
}
}

@-webkit-keyframes an-lightning-second {
0% {
  height: 0;

  opacity: 0;
}
1.66% {
  height: 23.9375em;

  opacity: 1;
}
1.7% {
  opacity: 0;
}
2.66% {
  opacity: 0;
}
3.2% {
  opacity: 1;
}
3.4% {
  opacity: 0;
}
7.8%, 76.9% {
  height: 0;
}
77% {
  height: 23.9375em;

  opacity: 1;
}
78%, 100% {
  opacity: 0;
}
}
@-moz-keyframes an-lightning-second {
0% {
  height: 0;

  opacity: 0;
}
1.66% {
  height: 23.9375em;

  opacity: 1;
}
1.7% {
  opacity: 0;
}
2.66% {
  opacity: 0;
}
3.2% {
  opacity: 1;
}
3.4% {
  opacity: 0;
}
7.8%, 76.9% {
  height: 0;
}
77% {
  height: 23.9375em;

  opacity: 1;
}
78%, 100% {
  opacity: 0;
}
}
@-o-keyframes an-lightning-second {
0% {
  height: 0;

  opacity: 0;
}
1.66% {
  height: 23.9375em;

  opacity: 1;
}
1.7% {
  opacity: 0;
}
2.66% {
  opacity: 0;
}
3.2% {
  opacity: 1;
}
3.4% {
  opacity: 0;
}
7.8%, 76.9% {
  height: 0;
}
77% {
  height: 23.9375em;

  opacity: 1;
}
78%, 100% {
  opacity: 0;
}
}
@keyframes an-lightning-second {
0% {
  height: 0;

  opacity: 0;
}
1.66% {
  height: 23.9375em;

  opacity: 1;
}
1.7% {
  opacity: 0;
}
2.66% {
  opacity: 0;
}
3.2% {
  opacity: 1;
}
3.4% {
  opacity: 0;
}
7.8%, 76.9% {
  height: 0;
}
77% {
  height: 23.9375em;

  opacity: 1;
}
78%, 100% {
  opacity: 0;
}
}

@media only screen and (max-width: 767px) {
.ag-format-container {
  width: 96%;
}

}

@media only screen and (max-width: 639px) {

}

@media only screen and (max-width: 479px) {

}

@media (min-width: 768px) and (max-width: 979px) {
.ag-format-container {
  width: 750px;
}

}

@media (min-width: 980px) and (max-width: 1161px) {
.ag-format-container {
  width: 960px;
}

}

.rainbowWrap { width: 458px; height: 157px; position: absolute; left: 47%; top: 137px; z-index: 5; }
.img_rainbow { width: 100%; height: 157px; background: url('../images/ver5/img_rainbow.png') no-repeat; filter: blur(7px); transition: 0.5s ease-in-out; position: absolute; z-index: 5; left: 0%; animation: rainbowRender 5s ease-in-out, blinking1 4s ease-in-out infinite alternate;  }
@keyframes rainbowRender {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
/* .img_rainbow_blur { width: 100%; height: 157px; background: url('../images/ver5/img_rainbow_blur.png') no-repeat; opacity: 0.5; transition: 0.5s ease-in-out; position: absolute; z-index: 5; left: 0%; animation: rainbowRender_blur 5s ease-in-out; }
@-webkit-keyframes rainbowRender_blur {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
 */