@charset "UTF-8";

.wrap {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 1000px;
    min-height: 700px;
    background: #02090a;
    overflow: hidden;
}
.logo {
    position: absolute;
    width: 10vw;
    height: 5vw;
    left: 4vw;
    top:4vw;
    background: url(../images/logo.png) no-repeat center center;
    background-size: contain;
    z-index: 9999;
}
.bgClip {
    position: absolute;
    width: 100%;
    height: 100%;
}
.bgClip .bg1 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/bg.png) no-repeat center center;
    background-size: contain;
    
    animation: spacebg1 5s linear 0s normal infinite both;
    -webkit-animation: spacebg1 5s linear 0s normal infinite both;
}
.bgClip .bg2 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/bg.png) no-repeat center center;
    background-size: contain;
    
    animation: spacebg2 5s linear 0s normal infinite both;
    -webkit-animation: spacebg2 5s linear 0s normal infinite both;
}

@keyframes spacebg1 {
    0% { transform: scale(2); }
    100% { transform: scale(1); }
}
@-webkit-keyframes spacebg1 {
    0% { -webkit-transform: scale(2); }
    100% { -webkit-transform: scale(1); }
}

@keyframes spacebg2 {
    0% { transform: scale(1);opacity: 1; }
    100% { transform: scale(0.5);opacity: 0; }
}
@-webkit-keyframes spacebg2 {
    0% { -webkit-transform: scale(1);opacity: 1; }
    100% { -webkit-transform: scale(0.5);opacity: 0; }
}

#startPage {
    position: absolute;
    width: 100%;
    height: 100%;
}
#startPage .title1 {
    position: absolute;
    width: 66%;
    height: 30%;
    left: 17%;
    top:25%;
    background: url(../images/title1.png) no-repeat center center;
    background-size: contain;
    
    transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
    
    transform:scale(1);
    -webkit-transform:scale(1);
    
    opacity: 1;
}
#startPage.playout .title1 {
    transform:scale(0);
    -webkit-transform:scale(0);
    
    opacity: 0;
}
#startPage #startBtn {
    position: absolute;
    width: 30%;
    height: 15%;
    left:35%;
    top:60%;
    background: url(../images/start_btn.png) no-repeat center center;
    background-size: contain;
    cursor: pointer;
    
    transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
    
    transform:translate(0,0) scale(1);
    -webkit-transform:translate(0,0) scale(1);
    
    opacity: 1;
}
#startPage #startBtn:hover {
    background: url(../images/start_btn_hover.png) no-repeat center center;
    background-size: contain;
}
#startPage.playout #startBtn {
    transform:translate(0,-100%) scale(0);
    -webkit-transform:translate(0,-100%) scale(0);
    
    opacity: 0;
}
#startDog {
    position: absolute;
    left:60%;
    top:8%;
    
    transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
    
    transform: translate(0,0) scale(1) rotate(-10deg);
    -webkit-transform: translate(0,0) scale(1) rotate(-10deg);
}
#startPage.current #startDog {
}
#startPage.playout #startDog {
    transform: translate(300%,-50%) scale(0.7) rotate(0deg);
    -webkit-transform: translate(300%,-50%) scale(0.7) rotate(0deg);
}
.dogClip {
    position: absolute;
    width: 20%;
    height: 20%;
}
.dogClip .dog {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/dog.png) no-repeat center center;
    background-size: contain;
    
    animation: dog 5s linear 0s normal infinite both;
    -webkit-animation: dog 5s linear 0s normal infinite both;
}
@keyframes dog {
    0% { transform: translate(0,0); }
    50% { transform: translate(0,10%); }
    100% { transform: translate(0,0); }
}
@-webkit-keyframes dog {
    0% { -webkit-transform: translate(0,0); }
    50% { -webkit-transform: translate(0,10%); }
    100% { -webkit-transform: translate(0,0); }
}
@keyframes fire {
    0% { transform: translate(0,0); }
    50% { transform: translate(20%,50%); }
    100% { transform: translate(0,0); }
}
@-webkit-keyframes fire {
    0% { -webkit-transform: translate(0,0); }
    50% { -webkit-transform: translate(20%,50%); }
    100% { -webkit-transform: translate(0,0); }
}
.dogClip .fire1 {
    position: absolute;
    width: 30%;
    height: 20%;
    top:45%;
    background: url(../images/dog_fire.png) no-repeat center center;
    background-size: contain;
    
    animation: fire 3s linear 0s normal infinite both;
    -webkit-animation: fire 3s linear 0s normal infinite both;
}
.dogClip .fire2 {
    position: absolute;
    width: 25%;
    height: 20%;
    top:90%;
    left: 40%;
    background: url(../images/dog_fire.png) no-repeat center center;
    background-size: contain;
    
    animation: fire 5s linear 0s normal infinite both;
    -webkit-animation: fire 5s linear 0s normal infinite both;
}

#countPage {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
#countPage .count3 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/count3.png) no-repeat center center;
    background-size: contain;
    opacity: 0;
}
#countPage.current .count3 {
    animation: countClip 1s linear 0s normal 1 both;
    -webkit-animation: countClip 1s linear 0s normal 1 both;
}
#countPage .count2 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/count2.png) no-repeat center center;
    background-size: contain;
    opacity: 0;
}
#countPage.current .count2 {
    
    animation: countClip 1s linear 1s normal 1 both;
    -webkit-animation: countClip 1s linear 1s normal 1 both;
}
#countPage .count1 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/count1.png) no-repeat center center;
    background-size: contain;
    opacity: 0;
}
#countPage.current .count1 {    
    animation: countClip 1s linear 2s normal 1 both;
    -webkit-animation: countClip 1s linear 2s normal 1 both;
}
@keyframes countClip {
    0% { transform: scale(2); opacity: 0; }
    1% { transform: scale(2); opacity: 1; }
    100% { transform: scale(0); opacity: 1; }
}
@-webkit-keyframes countClip {
    0% { -webkit-transform: scale(2); opacity: 0; }
    1% { -webkit-transform: scale(2); opacity: 1; }
    100% { -webkit-transform: scale(0); opacity: 1; }
}

#gamePage {
    position: absolute;
    width: 100%;
    height: 100%;
    
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    
    transform: scale(0);
    -webkit-transform: scale(0);
}
#gamePage.current {
    
    transform: scale(1);
    -webkit-transform: scale(1);
}
#gamePage #playBtn {
    position: absolute;
    width: 12vw;
    height: 11vw;
    right: 5vw;
    bottom:5vw;
    background: url(../images/playbtn1.png) no-repeat center bottom;
    background-size: contain;
    cursor: pointer;
}
#gamePage #playBtn.push {
    background: url(../images/playbtn2.png) no-repeat center bottom;
    background-size: contain;
}
#gamePage .notetext {
    position: absolute;
    width: 40%;
    left: 30%;
    bottom: 5vw;
    height: 3vw;
    background: url(../images/note.png) no-repeat center center;
    background-size: contain;
}
#gamePage #countBox {
    position: absolute;
    right:5vw;
    top:5vw;
    width: 30vh;
    height: 17vh;
    border: 6px dashed #fff;
    font-size: 0;
    line-height: 0;
    text-align: center;
}
#gamePage #countBox .numberSymbol {
    position: relative;
    display: inline-block;
    width: 44.6%;
    height: 100%;
    overflow: hidden;
}
#gamePage #countBox .numberSymbol > img {
    position: absolute;
    display: block;
    width: 100%;
    height: auto;
    top:0%;
}
#gamePage .plant {
    position: absolute;
    width: 30vw;
    height: 20vw;
    left:50%;
    top:50%;
    margin: -12vw 0 0 -20vw;
    background: url(../images/plant.png) no-repeat center center;
    background-size: contain;
}
#gamePage #step1 {
    position: absolute;
    width: 100%;
    height: 11%;
    left: 50%;
    top:-20%;
}
#gamePage #step1 .coin {
    position: absolute;
    width: 10%;
    height: 120%;
    top:-10%;
    left: 0;
    background: url(../images/coin1.png) no-repeat center center;
    background-size: contain;
    
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
}
#gamePage #step1.clip3 .coin {
    background: url(../images/coin2.png) no-repeat center center;
    background-size: contain;
}
#gamePage #step1 .text {
    position: absolute;
    width: 46%;
    height: 100%;
    left: 12%;
    background: url(../images/text1.png) no-repeat center left;
    background-size: contain;
    
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    
    transform: scale(0) translate(-100%,0);
    -webkit-transform: scale(0) translate(-100%,0);
}
#gamePage #step1.clip2 .text {
    transform: scale(0.5) translate(-50%,0);
    -webkit-transform: scale(0.5) translate(-50%,0);
}
#gamePage #step1.clip3 .text {
    transform: scale(1) translate(0,0);
    -webkit-transform: scale(1) translate(0,0);
}
#gamePage #step2 {
    position: absolute;
    width: 100%;
    height: 11%;
    right: 80%;
    top:14%;
}
#gamePage #step2 .coin {
    position: absolute;
    width: 10%;
    height: 120%;
    top:-10%;
    right: 0;
    background: url(../images/coin1.png) no-repeat center center;
    background-size: contain;
    
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
}
#gamePage #step2.clip3 .coin {
    background: url(../images/coin2.png) no-repeat center center;
    background-size: contain;
}
#gamePage #step2 .text {
    position: absolute;
    width: 88%;
    height: 100%;
    right: 12%;
    background: url(../images/text2.png) no-repeat center right;
    background-size: contain;
    
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    
    transform: scale(0) translate(100%,0);
    -webkit-transform: scale(0) translate(100%,0);
}
#gamePage #step2.clip2 .text {
    transform: scale(0.5) translate(50%,0);
    -webkit-transform: scale(0.5) translate(50%,0);
}
#gamePage #step2.clip3 .text {
    transform: scale(1) translate(0,0);
    -webkit-transform: scale(1) translate(0,0);
}
#gamePage #step3 {
    position: absolute;
    width: 100%;
    height: 11%;
    right: 84%;
    top:82%;
}
#gamePage #step3 .coin {
    position: absolute;
    width: 10%;
    height: 120%;
    top:-10%;
    right: 0;
    background: url(../images/coin1.png) no-repeat center center;
    background-size: contain;
    
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
}
#gamePage #step3.clip3 .coin {
    background: url(../images/coin2.png) no-repeat center center;
    background-size: contain;
}
#gamePage #step3 .text {
    position: absolute;
    width: 88%;
    height: 100%;
    right: 12%;
    background: url(../images/text3.png) no-repeat center right;
    background-size: contain;
    
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    
    transform: scale(0) translate(100%,0);
    -webkit-transform: scale(0) translate(100%,0);
}
#gamePage #step3.clip2 .text {
    transform: scale(0.5) translate(50%,0);
    -webkit-transform: scale(0.5) translate(50%,0);
}
#gamePage #step3.clip3 .text {
    transform: scale(1) translate(0,0);
    -webkit-transform: scale(1) translate(0,0);
}
#gamePage #step4 {
    position: absolute;
    width: 100%;
    height: 11%;
    right: 42%;
    top:115%;
}
#gamePage #step4 .coin {
    position: absolute;
    width: 10%;
    height: 120%;
    top:-10%;
    right: 0;
    background: url(../images/coin1.png) no-repeat center center;
    background-size: contain;
    
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
}
#gamePage #step4.clip3 .coin {
    background: url(../images/coin2.png) no-repeat center center;
    background-size: contain;
}
#gamePage #step4 .text {
    position: absolute;
    width: 88%;
    height: 100%;
    right: 12%;
    background: url(../images/text4.png) no-repeat center right;
    background-size: contain;
    
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    
    transform: scale(0) translate(100%,0);
    -webkit-transform: scale(0) translate(100%,0);
}
#gamePage #step4.clip2 .text {
    transform: scale(0.5) translate(50%,0);
    -webkit-transform: scale(0.5) translate(50%,0);
}
#gamePage #step4.clip3 .text {
    transform: scale(1) translate(0,0);
    -webkit-transform: scale(1) translate(0,0);
}
#gamePage #step5 {
    position: absolute;
    width: 100%;
    height: 11%;
    left: 87%;
    top:80%;
}
#gamePage #step5 .coin {
    position: absolute;
    width: 10%;
    height: 120%;
    top:-10%;
    left: 0;
    background: url(../images/coin1.png) no-repeat center center;
    background-size: contain;
    
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
}
#gamePage #step5.clip3 .coin {
    background: url(../images/coin2.png) no-repeat center center;
    background-size: contain;
}
#gamePage #step5 .text {
    position: absolute;
    width: 88%;
    height: 100%;
    left: 12%;
    background: url(../images/text5.png) no-repeat center left;
    background-size: contain;
    
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    
    transform: scale(0) translate(-100%,0);
    -webkit-transform: scale(0) translate(-100%,0);
}
#gamePage #step5.clip2 .text {
    transform: scale(0.5) translate(-50%,0);
    -webkit-transform: scale(0.5) translate(-50%,0);
}
#gamePage #step5.clip3 .text {
    transform: scale(1) translate(0,0);
    -webkit-transform: scale(1) translate(0,0);
}
#gamePage #step6 {
    position: absolute;
    width: 100%;
    height: 11%;
    left:100%;
    top:25%;
}
#gamePage #step6 .coin {
    position: absolute;
    width: 10%;
    height: 120%;
    top:-10%;
    left: 0;
    background: url(../images/coin1.png) no-repeat center center;
    background-size: contain;
    
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
}
#gamePage #step6.clip3 .coin {
    background: url(../images/coin2.png) no-repeat center center;
    background-size: contain;
}
#gamePage #step6 .text {
    position: absolute;
    width: 88%;
    height: 100%;
    left: 12%;
    background: url(../images/text6.png) no-repeat center left;
    background-size: contain;
    
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    
    transform: scale(0) translate(-100%,0);
    -webkit-transform: scale(0) translate(-100%,0);
}
#gamePage #step6.clip2 .text {
    transform: scale(0.5) translate(-50%,0);
    -webkit-transform: scale(0.5) translate(-50%,0);
}
#gamePage #step6.clip3 .text {
    transform: scale(1) translate(0,0);
    -webkit-transform: scale(1) translate(0,0);
}
#gameDog {
    position: absolute;
    transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
}
#gameDog.pos0 {
    left:80%;
    top:40%;
    
    transform: translate(0,0) scale(-0.7,0.7) rotate(-10deg);
    -webkit-transform: translate(0,0) scale(-0.7,0.7) rotate(-10deg);
}
#gameDog.pos1 {
    left:40%;
    top:5%;
    
    transform: translate(0,0) scale(-0.7,0.7) rotate(-10deg);
    -webkit-transform: translate(0,0) scale(-0.7,0.7) rotate(-10deg);
}
#gameDog.pos2 {
    left:20%;
    top:20%;
    
    transform: translate(0,0) scale(-0.7,0.7) rotate(0deg);
    -webkit-transform: translate(0,0) scale(-0.7,0.7) rotate(0deg);
}
#gameDog.pos3 {
    left:15%;
    top:40%;
    
    transform: translate(0,0) scale(-0.7,0.7) rotate(10deg);
    -webkit-transform: translate(0,0) scale(-0.7,0.7) rotate(10deg);
}
#gameDog.pos4 {
    left:35%;
    top:60%;
    
    transform: translate(0,0) scale(0.7,0.7) rotate(10deg);
    -webkit-transform: translate(0,0) scale(0.7,0.7) rotate(10deg);
}
#gameDog.pos5 {
    left:50%;
    top:50%;
    
    transform: translate(0,0) scale(0.7,0.7) rotate(-10deg);
    -webkit-transform: translate(0,0) scale(0.7,0.7) rotate(-10deg);
}
#gameDog.pos6 {
    left:55%;
    top:30%;
    
    transform: translate(0,0) scale(0.7,0.7) rotate(0deg);
    -webkit-transform: translate(0,0) scale(0.7,0.7) rotate(0deg);
}
#gameDog.pos7 {
    left:100%;
    top:40%;
    
    transform: translate(0,0) scale(1,1) rotate(10deg);
    -webkit-transform: translate(0,0) scale(1,1) rotate(10deg);
}
#awardPage300 {
    position: absolute;
    width: 100%;
    height: 100%;
    
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    
    transform: scale(0);
    -webkit-transform: scale(0);
}
#awardPage300.current {
    
    transform: scale(1);
    -webkit-transform: scale(1);
}
#awardPage300 .award300 {
    position: absolute;
    width: 40vw;
    height: 30vw;
    left:50%;
    top:4vw;
    background: url(../images/award_300.png) no-repeat center center;
    background-size: contain;
    
    margin: 0 0 0 -20vw;
}
#awardPage300 .notetext {
    position: absolute;
    width: 40%;
    left: 30%;
    bottom: 5vw;
    height: 3vw;
    background: url(../images/note.png) no-repeat center center;
    background-size: contain;
}
#awardPage300 .replayBtn {
    position: absolute;
    width: 14vw;
    height: 5vw;
    left: 50%;
    top:36vw;
    margin: 0 0 0 -7vw;
    background: url(../images/replaybtn.png) no-repeat center center;
    background-size: contain;
    
    cursor: pointer;
}
#awardPage300 .replayBtn:hover {
    background: url(../images/replaybtn_hover.png) no-repeat center center;
    background-size: contain;
}

#awardPage500 {
    position: absolute;
    width: 100%;
    height: 100%;
    
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    
    transform: scale(0);
    -webkit-transform: scale(0);
}
#awardPage500.current {
    
    transform: scale(1);
    -webkit-transform: scale(1);
}
#awardPage500 .award500 {
    position: absolute;
    width: 40vw;
    height: 30vw;
    left:50%;
    top:4vw;
    background: url(../images/award_500.png) no-repeat center center;
    background-size: contain;
    
    margin: 0 0 0 -20vw;
}
#awardPage500 .notetext {
    position: absolute;
    width: 40%;
    left: 30%;
    bottom: 5vw;
    height: 3vw;
    background: url(../images/note.png) no-repeat center center;
    background-size: contain;
}
#awardPage500 .replayBtn {
    position: absolute;
    width: 14vw;
    height: 5vw;
    left: 50%;
    top:36vw;
    margin: 0 0 0 -7vw;
    background: url(../images/replaybtn.png) no-repeat center center;
    background-size: contain;
    
    cursor: pointer;
}
#awardPage500 .replayBtn:hover {
    background: url(../images/replaybtn_hover.png) no-repeat center center;
    background-size: contain;
}