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

/* 오후 */
#main .intro.afternoon{
	background:url(../images/ver3/bg_mainAfternoon.jpg) no-repeat center top;
	background-size: 1920px 100%;
	height:100%;
}
/* 밤 */
#main .intro.evening{
	background:url(../images/ver3/bg_mainEvening.jpg) no-repeat center top;
	background-size: 1920px 100%;
	height:100%;
}

/* evening effect 정의 */

   /* house ver3 start */
   .house0_ver3{
	width: 811px; height: 503px; position: absolute; left: 27px; top: 227px; z-index: 10;
  }
  .house0_ver3 i { display: block; position: absolute; }
  .house0_ver3 i.leftWin0{ width: 200px; height: 200px; top: 94%; left: 302px; background: url(../images/ver3/even_leftWin0.png) no-repeat;
	animation: blinking 1s ease-in-out infinite alternate;
   }
  .house0_ver3 i.leftWin1{ width : 250px; height: 150px; top: 99.5%; left: 69.5%; background: url(../images/ver3/even_leftWin1.png) no-repeat;
	animation: blinking1 1.5s ease-in-out infinite alternate;
   }
   .house0_ver3 i.leftWin2{ width : 200px; height: 200px; top: 57.0%; left: 109.7%; background: url(../images/ver3/even_leftWin2.png) no-repeat;
	animation: blinking1 0.8s ease-in-out infinite alternate;
  }
  .house0_ver3 i.leftWin3{ width: 100px; height: 100px; top: 88%; left: 188.6%; background: url(../images/ver3/even_leftWin3.png) no-repeat;
	animation: blinking 1.2s ease-in-out infinite alternate;
   }
  .house0_ver3 i.leftWin4{ width : 100px; height: 100px; top: 30.3%; left: 127.2%; background: url(../images/ver3/even_leftWin4.png) no-repeat;
	animation: blinking1 1.8s ease-in-out infinite alternate;
   }

   .house0_ver3 i.leftWin5{ width : 100px; height: 100px; top: 33.5%; left: 84.8%; background: url(../images/ver3/even_leftWin5.png) no-repeat;
	animation: blinking1 1.5s ease-in-out infinite alternate;
   }

   .house0_ver3 i.leftWin6{ width : 100px; height: 100px; top: 6.8%; left: 92.9%; background: url(../images/ver3/even_leftWin6.png) no-repeat;
	animation: blinking1 1.5s ease-in-out infinite alternate;
   }
  
   .house0_ver3 i.img_light0{ width : 103px; height: 105px; top: 95px; left: 277px; background: url(../images/ver3/img_light0.png) no-repeat;
	animation: blinking 1s ease-in-out infinite alternate;
   }
  .house0_ver3 i.img_light1{ width : 178px; height: 182px; top: 102px; left: 24px; background: url(../images/ver3/img_light1.png) no-repeat;
	animation: blinker 1.5s linear infinite , scaled2 10.1s ease-in-out infinite alternate;
   }
  .house0_ver3 i.img_light2{ width : 84px; height: 86px; top: 5px; left: 314px; background: url(../images/ver3/img_light2.png) no-repeat;
	animation: scaled2 10.1s ease-in-out infinite alternate;
   }
  .house0_ver3 i.img_light3{ width : 84px; height: 86px; top: 53px; left: 8px; background: url(../images/ver3/img_light2.png) no-repeat;
	animation: scaled2 10.1s ease-in-out infinite alternate;
   }
  .house0_ver3 i.img_light4{ width : 178px; height: 182px; top: -30px; left: 533px; background: url(../images/ver3/img_light7.png) no-repeat;
	
   }
   .house0_ver3 i.img_light5{ width : 103px; height: 105px; top: 252px; left: 362px; background: url(../images/ver3/img_light0.png) no-repeat;
	animation: blinking 2s ease-in-out infinite alternate;
   }
   
   .house1_ver3{
	 width: 594px; height: 357px; position: absolute; left: 642px; top: 17%; z-index: 10;
	}
	.house1_ver3 i { display: block; position: absolute; }
	.house1_ver3 i.leftWin5{ width : 103px; height: 85px; top: 56px; left: 150px; background: url(../images/ver3/even_leftWin5.png) no-repeat;
	  animation: blinking 1s ease-in-out infinite alternate;
	}
	.house1_ver3 i.leftWin6{ width : 82px; height: 70px; top: 61px; left: 241px; background: url(../images/ver3/even_leftWin6.png) no-repeat;
	  animation: blinking1 1.5s ease-in-out infinite alternate;
	}
	.house1_ver3 i.light3{ width : 84px; height: 86px; top: -82px; left: 71px; background: url(../images/ver3/img_light3.png) no-repeat;
	  animation: blinking1 1s ease-in infinite alternate, scaled 1s ease-in-out infinite alternate;    
	}
	.house1_ver3 i.light4{ width : 84px; height: 86px; top: -1px; left: 251px; background: url(../images/ver3/img_light3.png) no-repeat;
	  animation: blinking1 2s ease-in infinite alternate, scaled 1s ease-in-out infinite alternate;    
	}
	.house1_ver3 i.img_playWarp{ width : 692px; height: 296px; top: 64px; left: -38px; background: url(../images/ver3/btn_playWarp.png) no-repeat; transform: scale(0.7);
	  animation: blinking1 1s ease-in infinite alternate, scaled 1s ease-in-out infinite alternate;
	 }
	
  .house2_ver3{
	width: 329px; height: 250px; position: absolute; left: 55%; top: 373px; z-index: 10;
  }
  .house2_ver3 i { display: block; position: absolute; }
  .house2_ver3 i.rightWin0{ width : 126px; height: 114px; top: 2px; left: -125px; background: url(../images/ver3/even_rightWin0.png) no-repeat;
	animation: blinking1 1.5s ease-in-out infinite alternate;
   }
  .house2_ver3 i.rightWin1{ width : 111px; height: 94px; top: 77px; left: 144px; background: url(../images/ver3/even_rightWin1.png) no-repeat;
	animation: blinking 1s ease-in-out infinite alternate;
   }
  .house2_ver3 i.rightWin2{ width : 87px; height: 92px; top: 162px; left: 175px; background: url(../images/ver3/even_rightWin2.png) no-repeat;
	animation: blinking1 1.1s ease-in-out infinite alternate;
   }
   
   .house2_ver3 i.rightWin3{ width: 111px; height: 94px; top: -70%; left: 157px; background: url(../images/ver3/even_rightWin1.png) no-repeat; 
	animation: blinking 1s ease-in-out infinite alternate; background-size: 65% 71%;
   }
  .house2_ver3 i.lemp_light0{ width: 207px; height: 138px; top: 10px; left: -326px; background: url(../images/ver3/lemp_light0.png) no-repeat;
	animation: flicker 3.1s ease-in-out infinite alternate;
   }
  
  .house2_ver3 i.lemp_light1{ width : 83px; height: 83px; top: 219px; left: 299px; background: url(../images/ver3/img_light5.png) no-repeat;
	animation: blinker 1.5s linear infinite , scaled2 10.1s ease-in-out infinite alternate;
   }
  .house2_ver3 i.lemp_light2{ width : 83px; height: 83px; top: 107px; left: 413px; background: url(../images/ver3/img_light6.png) no-repeat; transform: scale( 0.3 );
	animation: scaled2 10.1s ease-in-out infinite alternate;
   }
  .house2_ver3 i.lemp_0{ width : 62px; height: 62px; top: 80px; left: 343px; background: url(../images/ver3/img_lemp0.png) no-repeat;
	animation: swing ease-in-out 1s infinite alternate, blinking2 1.0s ease-in-out infinite alternate;
   }
  .house2_ver3 i.lemp_1{ width : 63px; height: 63px; top: 174px; left: 364px; background: url(../images/ver3/img_lemp1.png) no-repeat;
	animation: swing linear 0.3s infinite alternate, blinking2 1.5s ease-in-out infinite alternate;
   }
  .house2_ver3 i.lemp_2{ width : 81px; height: 81px; top: 153px; left: 435px; background: url(../images/ver3/img_lemp2.png) no-repeat;
	animation: swing1 linear 1.3s infinite alternate, blinking2 3.5s ease-in-out infinite alternate;
   }
   .house2_ver3 i.img_fourLight{ width: 291px; height: 228px; top: -7%; left: 2.5%; background: url(../images/ver3/img_fourLight.png) no-repeat;
	animation: flicker 3.1s ease-in-out infinite alternate;
   }
   .house2_ver3 i.img_oneLight{ width: 200px; height: 200px; top: 170%; left: 24.5%; background: url(../images/ver3/img_oneLight.png) no-repeat;
	animation: flicker 5.1s ease-in-out infinite alternate;
   }
   .house2_ver3 i.img_twoLight{ width: 100px; height: 100px; top: -39%; left: 145.4%; background: url(../images/ver3/img_twoLight.png) no-repeat;
	animation: flicker 5.7s ease-in-out infinite alternate;
   }
   .house2_ver3 i.img_lightHouse1 { width: 200px; height: 200px; top: -126%; left: -88%; background: url(../images/ver3/img_lightHouse1.png) no-repeat; transform: scale( 0.3 );
      animation: blinker_lighthouse 3.5s linear infinite; 
   }
   /* house ver3 end */

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

   .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);
 }
 .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(7)
{
    left: 60%;
    transform: skew(16.5deg) scale(0.35);
    animation: animate_albe 19s linear infinite;
}
 @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: 1;
   width: 100%;
   height: 100%;
   -webkit-filter: blur(1px);
   filter: blur(1px);
   opacity: 1;
}