* {
    margin:0;
    padding:0;
    line-height:1.2;
}

.copy a:link, .copy a:visited {
	color: #fff;
	font-size: 1.2rem;
	display: inline-block;
	padding: 1rem;
	border-radius: 2rem;
	background: #3f66b0;
	z-index: 99;
	position: relative;

}
html{
    background: #fbb03b;
    background:url("../img/bg2.jpg");
    background-position:  center bottom; 
    background-size: cover;
    font-size: 8px;
}
.bg {
	background:url("../img/pig.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position:  left bottom; 
	text-align: right;
}
body{
    width:100vw;
    height:100vh;
    overflow:hidden;
    
}
@media only screen and (min-width:480px){ 
	html {
		font-size: 9px;
	}
}
@media only screen and (min-width:767px){ 
	html {
		font-size: 14px;
	}
}
@media only screen and (min-width:1024px){ 
	html {
		font-size: 16px;
	}
}
@media only screen and (min-width:1600px){ 
	html {
		font-size: 18px;
	}
}

@media (orientation: portrait) { 
  html {
		font-size: 2.7vw !important;
	}
}

.copy {
	width:31.9rem;
	margin:1rem 0 auto auto;
	text-align: center;
}
#game{
    position:relative;
    width:31.9rem;
    height:37.5rem;
    overflow:hidden;
    margin:4rem 0 auto auto;
    background-position:0px 0px;
    background-repeat:no-repeat;
    border: .7rem #fff solid;
    border-radius: 2rem;

}

/* setting : tweet */


/* setting : cursor */
*{
    -webkit-user-select: none;
    user-select: none;
}

/* setting : gameover  */
#gameover{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    -webkit-animation-name:gameover;
    -webkit-animation-timing-function:linear;
    -webkit-animation-duration:13s;
    -webkit-animation-delay:0.5s;
    animation-name:gameover;
    animation-timing-function:linear;
    animation-duration:13s;
    animation-delay:0.5s;
    z-index:20;
    background-position:0px 0px;
    background-repeat:no-repeat;
    opacity:1;
}

@-webkit-keyframes gameover{
      0% {top:-46.5rem;opacity:1;}
      97% {top:-46.5rem;opacity:0;}
    100% {top:0rem;opacity:1;}
}
@keyframes gameover{
      0% {top:-46.5rem;opacity:1;}
      97% {top:-46.5rem;opacity:0;}
    100% {top:0rem;opacity:1;}
}

/* setting : timer  */
#timer{
    position: absolute;
    top:30rem;
    left:.5rem;
    z-index:10;
    width: 30.9rem;
    height: 5rem;
    background-position:0px 0px;
    background-repeat:no-repeat;
}
#progress{
    position: absolute;
    top:.64rem;
    left:9.7rem;
    width:20rem;
    height: 3.6rem;
    background-position:0px 0px;
    background-repeat:repeat-x;
    -webkit-animation-name:progress;
    -webkit-animation-timing-function:linear;
    -webkit-animation-duration:12.5s;
    -webkit-animation-delay:0.5s;
    animation-name:progress;
    animation-timing-function:linear;
    animation-duration:12.5s;
    animation-delay:0.5s;
}
@-webkit-keyframes progress{
      0% {width:0px;}
    100% {width:20rem;}
}
@keyframes progress{
      0% {width:0px;}
    100% {width:20rem;}
}


/* setting : enemys  */
#enemy{
    position: absolute;
    top:18rem;
    left:1rem;
    width:100%;
    height:36rem;
    overflow: hidden;
}
.enemys:checked{
    overflow:hidden;
    -webkit-animation-name:none;
    -webkit-pointer-events: none;
    animation-name:none;
    pointer-events: none;
    pointer-events: none;
    opacity:0;
}
.enemys{
    z-index:3;
    position:absolute;
    top:0rem;
    left:0rem;
    width:2.9rem;
    height:5.5rem;
    display:block;
    -webkit-appearance: button;
    appearance: none;
    background-position:0px 0px;
    background-repeat:no-repeat;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
    cursor:pointer;
    opacity:0.8;
    border:none;
    outline:none;
}
.enemy input {
	opacity: 0;
}

.enemys:hover{
	opacity:1;
}



/* setting : house */
#map{
    position:absolute;
    z-index:5;
    top:12rem;
    left:0rem;
    display:block;
    width: 31.9rem;
    height: 16.9rem;
    -webkit-pointer-events: none;
    pointer-events: none;
    pointer-events: none;
    background-position:0px 0px;
    background-repeat:no-repeat;
}
#map .mask{
    position: absolute;
    -webkit-pointer-events: auto;
    pointer-events: auto;
}
#map #mask_1{
    top:0; left:0;
    width: 31.9rem; height: 12.5rem;
}
#map #mask_2{
    top:5rem; left:0;
    width: 1.2rem; height: 11.5rem;
}
#map #mask_3{
    top:5rem; left:6.2rem;
    width: 1.2rem; height: 11.5rem;
}
#map #mask_4{
    top:5rem; left:12.3rem;
    width: 1.2rem; height: 11.5rem;
}
#map #mask_5{
    top:5rem; left:18.4rem;
    width: 1.2rem; height: 11.5rem;
}
#map #mask_6{
    top:5rem; left:24.5rem;
    width: 1.3rem; height: 11.5rem;
}
#map #mask_7{
    top:5rem; left:30.6rem;
    width: 1.3rem; height: 11.5rem;
}


/* setting : score  */
#score_board{
    position: absolute;
    top:8.5rem;
    left:8rem;
    width: 15.7rem;
    height: 10.5rem;
    z-index:10;
    background-position:0px 0px;
    background-repeat:no-repeat;
}


#score_wrap{
  position: absolute;
  top:2rem;
  left:2.5rem;
  width: 11.1rem;
  height: 6.3rem;
  overflow: hidden;
}
#score{
  position: absolute;
  top: -63rem;
  left:0;
  width: 11.1rem;
  height: 69.3rem;
}
.score{
    position:relative;
    display:block;
    width: 11.1rem;
    height: 6.3rem;
    background-color:transparent;
    -webkit-appearance: button;
    appearance: button;
    -webkit-transition:.1s all linear;
    transition:.1s all linear;
    
}
.score:checked{
    position:absolute;
    top:0rem;
    height:0rem;
}
#score_11{
    position:relative;
    display:block;
    width: 11.1rem;
    height: 69.3rem;
    -webkit-appearance: none;
    appearance: none;
    background-position:0px 0px;
    background-repeat:no-repeat;
}



/* setting : position */
.enemys#enemy_1 {top:-9.3rem; left:1.2rem;}
.enemys#enemy_2 {top:-9.3rem; left:7.4rem;}
.enemys#enemy_3 {top:-9.3rem; left:13.5rem;}
.enemys#enemy_4 {top:-9.3rem; left:19.6rem;}
.enemys#enemy_5 {top:-9.3rem; left:25.8rem;}
.enemys#enemy_6 {top:-9.3rem; left:1.2rem;}
.enemys#enemy_7 {top:-9.3rem; left:7.4rem;}
.enemys#enemy_8 {top:-9.3rem; left:13.5rem;}
.enemys#enemy_9 {top:-9.3rem; left:19.6rem;}
.enemys#enemy_10{top:-9.3rem; left:25.8rem;}


/* setting : effect */
.enemys:checked + .effect{}
.effect {
    position:absolute;
    z-index:5;
    width: 10.6rem;
    height: 9.8rem;
    -webkit-pointer-events: none;
    pointer-events: none;
    background-position:0px 0px;
    background-repeat:no-repeat;
    opacity:0;
}

#enemy_1  + .effect{top:0rem; left:0rem;}
#enemy_2  + .effect{top:0rem; left:5rem;}
#enemy_3  + .effect{top:0rem; left:10.5rem;}
#enemy_4  + .effect{top:0rem; left:16.4rem;}
#enemy_5  + .effect{top:0rem; left:21.4rem;}
#enemy_6  + .effect{top:0rem; left:0rem;}
#enemy_7  + .effect{top:0rem; left:5rem;}
#enemy_8  + .effect{top:0rem; left:10.5rem;}
#enemy_9  + .effect{top:0rem; left:16.4rem;}
#enemy_10 + .effect{top:0rem; left:21.4rem;}

.enemys:checked + .effect{
  -webkit-animation-duration:0.5s;
  -webkit-animation-iteration-count:1;
  -webkit-animation-direction: normal;
  animation-duration:0.5s;
  animation-iteration-count:1;
  animation-direction: normal;
}

#enemy_1:checked  + .effect,
#enemy_2:checked  + .effect,
#enemy_3:checked  + .effect,
#enemy_4:checked  + .effect,
#enemy_5:checked  + .effect{
  -webkit-animation-name:effect1;
  animation-name:effect1;
}
#enemy_6:checked  + .effect,
#enemy_7:checked  + .effect,
#enemy_8:checked  + .effect,
#enemy_9:checked  + .effect,
#enemy_10:checked + .effect{
  -webkit-animation-name:effect2;
  animation-name:effect2;
}


/* setting : animation */

/* effect */
@-webkit-keyframes effect1{
      0% { -webkit-transform: translateX(0rem) translateY(0rem); opacity:0;}
     30% { -webkit-transform: translateX(-1rem) translateY(-1rem); opacity:1;}
     80% { -webkit-transform: translateX(-1rem) translateY(-1rem); opacity:1;}
    100% { -webkit-transform: translateX(0rem) translateY(0rem); opacity:0;}
}

@-webkit-keyframes effect2{
      0% { -webkit-transform: translateX(0rem) translateY(0rem); opacity:0;}
     30% { -webkit-transform: translateX(1rem) translateY(-1rem); opacity:1;}
     80% { -webkit-transform: translateX(1rem) translateY(-1rem); opacity:1;}
    100% { -webkit-transform: translateX(0rem) translateY(0rem); opacity:0;}
}


/* enemys */
@-webkit-keyframes enemy_1{
      0% {-webkit-transform:translateY(0rem);}
     40% {-webkit-transform:translateY(12rem);}
     50% {-webkit-transform:translateY(0rem);}
     90% {-webkit-transform:translateY(0rem);}
    100% {-webkit-transform:translateY(0rem);}
}
#enemy_1{
    -webkit-animation-name:enemy_1;
    -webkit-animation-duration:5s;
    -webkit-animation-delay:0s;
}
@-webkit-keyframes enemy_6{
      0% {-webkit-transform:translateY(0rem);}
     40% {-webkit-transform:translateY(0rem);}
     50% {-webkit-transform:translateY(12rem);}
     90% {-webkit-transform:translateY(12rem);}
    100% {-webkit-transform:translateY(0rem);}
}
#enemy_6{
    -webkit-animation-name:enemy_6;
    -webkit-animation-duration:5s;
    -webkit-animation-delay:0s;
}



@-webkit-keyframes enemy_2{
      0% {-webkit-transform:translateY(0rem);}
     40% {-webkit-transform:translateY(0rem);}
     50% {-webkit-transform:translateY(12rem);}
     90% {-webkit-transform:translateY(12rem);}
    100% {-webkit-transform:translateY(0rem);}
}
#enemy_2{
    -webkit-animation-name:enemy_2;
    -webkit-animation-duration:5s;
    -webkit-animation-delay:1s;
}
@-webkit-keyframes enemy_7{
      0% {-webkit-transform:translateY(0rem);}
     20% {-webkit-transform:translateY(12rem);}
     30% {-webkit-transform:translateY(0rem);}
     40% {-webkit-transform:translateY(12rem);}
     45% {-webkit-transform:translateY(0rem);}
     50% {-webkit-transform:translateY(0rem);}
     90% {-webkit-transform:translateY(0rem);}
    100% {-webkit-transform:translateY(0rem);}
}
#enemy_7{
    -webkit-animation-name:enemy_7;
    -webkit-animation-duration:5s;
    -webkit-animation-delay:1s;
}



@-webkit-keyframes enemy_3{
      0% {-webkit-transform:translateY(0rem);}
     40% {-webkit-transform:translateY(0rem);}
     50% {-webkit-transform:translateY(12rem);}
     60% {-webkit-transform:translateY(12rem);}
     90% {-webkit-transform:translateY(0rem);}
    100% {-webkit-transform:translateY(0rem);}
}
#enemy_3{
    -webkit-animation-name:enemy_3;
    -webkit-animation-duration:10s;
    -webkit-animation-delay:2s;
}
@-webkit-keyframes enemy_8{
      0% {-webkit-transform:translateY(0rem);}
     10% {-webkit-transform:translateY(12rem);}
     15% {-webkit-transform:translateY(0rem);}
     20% {-webkit-transform:translateY(12rem);}
     25% {-webkit-transform:translateY(0rem);}
     30% {-webkit-transform:translateY(12rem);}
     40% {-webkit-transform:translateY(0rem);}
     50% {-webkit-transform:translateY(0rem);}
     70% {-webkit-transform:translateY(0rem);}
     90% {-webkit-transform:translateY(12rem);}
    100% {-webkit-transform:translateY(0rem);}
}
#enemy_8{
    -webkit-animation-name:enemy_8;
    -webkit-animation-duration:10s;
    -webkit-animation-delay:2s;
}



@-webkit-keyframes enemy_4{
      0% {-webkit-transform:translateY(0rem);}
     30% {-webkit-transform:translateY(10rem);}
     50% {-webkit-transform:translateY(12rem);}
     60% {-webkit-transform:translateY(0rem);}
     90% {-webkit-transform:translateY(0rem);}
    100% {-webkit-transform:translateY(0rem);}
}
#enemy_4{
    -webkit-animation-name:enemy_4;
    -webkit-animation-duration:10s;
    -webkit-animation-delay:1s;
}
@-webkit-keyframes enemy_9{
      0% {-webkit-transform:translateY(0rem);}
     20% {-webkit-transform:translateY(0rem);}
     30% {-webkit-transform:translateY(0rem);}
     60% {-webkit-transform:translateY(0rem);}
     70% {-webkit-transform:translateY(12rem);}
     75% {-webkit-transform:translateY(10rem);}
     80% {-webkit-transform:translateY(12rem);}
     85% {-webkit-transform:translateY(10rem);}
     90% {-webkit-transform:translateY(12rem);}
    100% {-webkit-transform:translateY(0rem);}
}
#enemy_9{
    -webkit-animation-name:enemy_9;
    -webkit-animation-duration:10s;
    -webkit-animation-delay:1s;
}




@-webkit-keyframes enemy_5{
      0% {-webkit-transform:translateY(0rem);}
     30% {-webkit-transform:translateY(9rem);}
     60% {-webkit-transform:translateY(12rem);}
    100% {-webkit-transform:translateY(0rem);}
}
#enemy_5{
    -webkit-animation-name:enemy_5;
    -webkit-animation-duration:10s;
    -webkit-animation-delay:2s;
}
@-webkit-keyframes enemy_10{
      0% {-webkit-transform:translateY(0rem);}
     5% {-webkit-transform:translateY(12rem);}
     30% {-webkit-transform:translateY(0rem);}
     60% {-webkit-transform:translateY(0rem);}
     90% {-webkit-transform:translateY(0rem);}
    100% {-webkit-transform:translateY(0rem);}
}
#enemy_10{
    -webkit-animation-name:enemy_10;
    -webkit-animation-duration:10s;
    -webkit-animation-delay:1s;
}

/*effect for moz*/
/* effect */
@keyframes effect1{
      0% { transform: translateX(0rem) translateY(0rem); opacity:0;}
     30% { transform: translateX(-1rem) translateY(-1rem); opacity:1;}
     80% { transform: translateX(-1rem) translateY(-1rem); opacity:1;}
    100% { transform: translateX(0rem) translateY(0rem); opacity:0;}
}

@keyframes effect2{
      0% { transform: translateX(0rem) translateY(0rem); opacity:0;}
     30% { transform: translateX(1rem) translateY(-1rem); opacity:1;}
     80% { transform: translateX(1rem) translateY(-1rem); opacity:1;}
    100% { transform: translateX(0rem) translateY(0rem); opacity:0;}
}


/* enemys */
@keyframes enemy_1{
      0% {transform:translateY(0rem);}
     40% {transform:translateY(12rem);}
     50% {transform:translateY(0rem);}
     90% {transform:translateY(0rem);}
    100% {transform:translateY(0rem);}
}
#enemy_1{
    animation-name:enemy_1;
    animation-duration:5s;
    animation-delay:0s;
}
@keyframes enemy_6{
      0% {transform:translateY(0rem);}
     40% {transform:translateY(0rem);}
     50% {transform:translateY(12rem);}
     90% {transform:translateY(12rem);}
    100% {transform:translateY(0rem);}
}
#enemy_6{
    animation-name:enemy_6;
    animation-duration:5s;
    animation-delay:0s;
}



@keyframes enemy_2{
      0% {transform:translateY(0rem);}
     40% {transform:translateY(0rem);}
     50% {transform:translateY(12rem);}
     90% {transform:translateY(12rem);}
    100% {transform:translateY(0rem);}
}
#enemy_2{
    animation-name:enemy_2;
    animation-duration:5s;
    animation-delay:1s;
}
@keyframes enemy_7{
      0% {transform:translateY(0rem);}
     20% {transform:translateY(12rem);}
     30% {transform:translateY(0rem);}
     40% {transform:translateY(12rem);}
     45% {transform:translateY(0rem);}
     50% {transform:translateY(0rem);}
     90% {transform:translateY(0rem);}
    100% {transform:translateY(0rem);}
}
#enemy_7{
    animation-name:enemy_7;
    animation-duration:5s;
    animation-delay:1s;
}



@keyframes enemy_3{
      0% {transform:translateY(0rem);}
     40% {transform:translateY(0rem);}
     50% {transform:translateY(12rem);}
     60% {transform:translateY(12rem);}
     90% {transform:translateY(0rem);}
    100% {transform:translateY(0rem);}
}
#enemy_3{
    animation-name:enemy_3;
    animation-duration:10s;
    animation-delay:2s;
}
@keyframes enemy_8{
      0% {transform:translateY(0rem);}
     10% {transform:translateY(12rem);}
     15% {transform:translateY(0rem);}
     20% {transform:translateY(12rem);}
     25% {transform:translateY(0rem);}
     30% {transform:translateY(12rem);}
     40% {transform:translateY(0rem);}
     50% {transform:translateY(0rem);}
     70% {transform:translateY(0rem);}
     90% {transform:translateY(12rem);}
    100% {transform:translateY(0rem);}
}
#enemy_8{
    animation-name:enemy_8;
    animation-duration:10s;
    animation-delay:2s;
}



@keyframes enemy_4{
      0% {transform:translateY(0rem);}
     30% {transform:translateY(10rem);}
     50% {transform:translateY(12rem);}
     60% {transform:translateY(0rem);}
     90% {transform:translateY(0rem);}
    100% {transform:translateY(0rem);}
}
#enemy_4{
    animation-name:enemy_4;
    animation-duration:10s;
    animation-delay:1s;
}
@keyframes enemy_9{
      0% {transform:translateY(0rem);}
     20% {transform:translateY(0rem);}
     30% {transform:translateY(0rem);}
     60% {transform:translateY(0rem);}
     70% {transform:translateY(12rem);}
     75% {transform:translateY(10rem);}
     80% {transform:translateY(12rem);}
     85% {transform:translateY(10rem);}
     90% {transform:translateY(12rem);}
    100% {transform:translateY(0rem);}
}
#enemy_9{
    animation-name:enemy_9;
    animation-duration:10s;
    animation-delay:1s;
}




@keyframes enemy_5{
      0% {transform:translateY(0rem);}
     30% {transform:translateY(9rem);}
     60% {transform:translateY(12rem);}
    100% {transform:translateY(0rem);}
}
#enemy_5{
    animation-name:enemy_5;
    animation-duration:10s;
    animation-delay:2s;
}
@keyframes enemy_10{
      0% {transform:translateY(0rem);}
     5% {transform:translateY(12rem);}
     30% {transform:translateY(0rem);}
     60% {transform:translateY(0rem);}
     90% {transform:translateY(0rem);}
    100% {transform:translateY(0rem);}
}
#enemy_10{
    animation-name:enemy_10;
    animation-duration:10s;
    animation-delay:1s;
}


/* setting : images */
#gameover{
    background-image: url("../img/over-01.png");
    background-size: cover;
}
#game{
    background-image: url("../img/game.png");
    background-size: cover;
}
#timer{
    background-image:url("../img/timer-01.svg");
    
}
#progress{
    background-image:url("../img/progress.png");
    background-size: cover;
}
.enemys#enemy_1,.enemys#enemy_2,.enemys#enemy_3,.enemys#enemy_4,.enemys#enemy_5{
    background-image: url("../img/enemy1.svg");
    background-size: cover;
}
.enemys#enemy_6,.enemys#enemy_7,.enemys#enemy_8,.enemys#enemy_9,.enemys#enemy_10{
    background-image: url("../img/enemy2.svg");
    background-size: cover;
}
#map{
    background-image: url("../img/map.png");
    background-size: cover;
}
#score_board{
    background-image: url("../img/scoreboard.svg");
    background-size: cover;
}
#score_11{
    background-image: url("../img/score.png");
    background-size: cover;
}
.effect {
    background-image: url("../img/effect.svg");
    background-size: cover;
}
