@charset "utf-8";

body{
    background-color: #56514d;
    height: 100%;
    font-family: Arial,"Apple LiGothic Black", "Impact", "微軟正黑體";

}


/*.wrapper {
    background: url('../images/indexBG.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}*/




/*/////////////////////////////////////////////*/
/*/////////////////// index ///////////////////*/
/*/////////////////////////////////////////////*/
.outsideline{
    display: block;
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    /*background-color: #ccc;*/
}

.insideline{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;

    /*background-color: #eef7f9;*/
    /*border: 1px solid #ff00ff;*/

    top: 0%;
    left: 50%;
    transform: translateX(-50%);
}

.fakeBG{
    display: block;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    /*opacity: 0;*/

}

.zone{
    display: block;
    position: absolute;
    /*border: 1px solid #ccc;*/
    left: 0%;
    width: 100%;
}

.zoneBG{
    display: block;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;

    /*border: 1px solid #ff00ff;*/
}

/*////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////*/
/*//////////////////////////  z1 /////////////////////////////////*/
/*////////////////////////////////////////////////////////////////*/

.z1{ top:0%; }





/*////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////*/
/*//////////////////////////  z2 /////////////////////////////////*/
/*////////////////////////////////////////////////////////////////*/

.z2{
    /*top:100%;*/
    /*height: 600px;*/
}

.btnStart{
    display: block;
    position: absolute;
    width: 28%;
    top: 53%;
    left: 36%;
}

.popupBG{
    display: block;
    display: none;
    position: absolute;
    position: fixed;
    width: 100%;
    height: 100%;

    background-color: rgba(0,0,0,.5);
}

.result{
    display: block;
    display: none;
    position: absolute;
    width: 90%;
    left: 5%;
    top:2%;
}
/*.res2{ display: block; }*/

.recommend{
    display: block;
    display: none;
    position: absolute;
    width: 90%;
    left: 5%;
    top:2%;
}

.drawLots{
    position: absolute;
    top:12%;

    display: none;
}

.standbyLots{
    display: block;
}



.heartbeat {
    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
            animation: heartbeat 1.5s ease-in-out infinite both;
}

/*////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////*/
/*//////////////////////////  z3 /////////////////////////////////*/
/*////////////////////////////////////////////////////////////////*/

.z3{ /*top:215.5%;*/ }



/*////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////*/
/*//////////////////////////  z4 /////////////////////////////////*/
/*////////////////////////////////////////////////////////////////*/
.z4{ /*top:268%;*/ }




/*////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////*/
/*//////////////////////////  z5 /////////////////////////////////*/
/*////////////////////////////////////////////////////////////////*/

.z5{
    display: block;
    position: absolute;
    /*position: relative;*/
    top: 0%;
    left: 0%;

    width: 100%;
    /*padding-bottom: 10px;*/
    /*height: 100%;*/

    background-color: #494541;
    /*border: 1px solid #fff;*/
    }

.z5_title{
    display: block;
    position: relative;
    width: 100%;
    /*float: left;*/
}

.z5_menuBG{
    display: block;
    position: relative;
    width: 100%;
    /*float: left;*/
}

.item{
    display: block;
    position: relative;
    width: 90%;
    left: 5%;
    /*height: 100px;*/
    /*background-color: #56514d;*/
    margin-bottom: 5%;
}

.item > .title{
    display: block;
    position: relative;
    width: 100%;

    /*border:0px #ccc solid;border-radius:10px;*/
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    width:100%;
    /*height:50%;*/
    background-color: #56514d;

    color: #fff;

}
.item > .title > img{
    width: 13%;
    margin-left: 5%;
}
.itemMain{
    display: block;
    position: relative;
    width: 100%;
    /*width:99.9%;*/
    /*width:99.8%;*/
    background-color: #56514d;
    /*background-color: rgba(255,255,255,.5);*/
    padding-bottom: 5%;
    padding-top: 2%;
    /*padding-left:0.1%;*/
    /*color: #fee6d1;*/
}
.item > .buttomCantainer{
    display: block;
    position: relative;
    width: 100%;

    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    background-color: #56514d;
}
.item > .buttomCantainer > .buttomBG{
    /*display: block;
    position: relative;*/
    width: 20%;
    margin-left: 40%;

    /*border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    background-color: #56514d;*/

}

.item > .buttomCantainer > .zClose{ display: none; }
.item > .buttomCantainer > .zOpen{ display: block; }

.store,
.storeHide
{
    display: block;
    position: relative;
    width: 95%;
    /*background-color: rgba(255,255,255,.5);*/

    color: #fee6d1;
    padding-top: 2%;
    padding-bottom: 5%;
    padding-left: 5%;
}

.store h1,
.storeHide h1{
    font-size: 5vw;
    color: #fee6d1;
}

.store h2,
.storeHide h2{
    font-size: 4vw;
    letter-spacing: .2vw;
    /*font-weight: normal;*/
    font-weight: unset;
    color: #a89f98;
}

.store h3,
.storeHide h3{
    font-size: 4vw;
    letter-spacing: .2vw;
    font-weight: lighter;
    color: #a89f98;
}

.storeMenu{
    display: block;
    position: absolute;
    width: 25%;
    height: 50%;
    /*top:0;*/
    margin-top: -20%;
    /*background-color: rgba(0,0,0,.5);*/

}

.s2{ left:25%; }
.s3{ left:50%; }
.s4{ left:75%; }


.storeHide{
    display: none;
}

.sh1{ display: none; }
.sh2{ display: none; }
.sh3{ display: none; }
.sh4{ display: none; }



/*////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////*/
/*//////////////////////////  z6 /////////////////////////////////*/
/*////////////////////////////////////////////////////////////////*/
.z6{
    
}


/*////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////*/
/*//////////////////////////  award /////／////////////////////////*/
/*////////////////////////////////////////////////////////////////*/

.award{
    display: block;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;

    /*background-color: rgba(0,0,0,.5);*/
}

.awardBG{
    display: block;
    position: absolute;
    width: 70%;
    left: 15%;
    top:10%;
}

.closePop{
    display: block;
    position: absolute;
    left: 76%;
    top:6%;
}

/*////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////*/
/*//////////////////////  menu  ///////////////////////////////*/
/*////////////////////////////////////////////////////////////////*/

.menu{
    display: block;
    position: absolute;
    position: fixed;
    width: 100%;
    background-color: #ccc;

    left: 50%;
    bottom: 0%;
    transform: translateX(-50%);
}

.menuBG{
    display: block;
    position: absolute;
    width: 100%;
}

.menubtn{
    display: block;
    position: absolute;
    width: 25%;
    height: 100%;
    /*background-color: rgba(0,0,0,.5);*/
    /*border: 1px solid #ff00ff;*/
    top:0;
}

.m2{ left:25%; }
.m3{ left:50%; }
.m4{ left:75%; }









/*@media screen and (min-width: 800px) {
    .insideline{ width: 520px; }
    .menu{ width: 520px; }

    .store h1,
    .storeHide h1{
        font-size: 20px;
        letter-spacing: .1vw;
    }

    .store h2,
    .storeHide h2{
        font-size: 20px;
        letter-spacing: .1vw;
    }

    .store h3,
    .storeHide h3{
        font-size: 18px;
        letter-spacing: .1vw;
    }

    .itemMain{
        width: 99.6%;
    }
  
}*/

@media screen and (min-width: 800px) {
    .insideline{ width: 480px; }
    .menu{ width: 480px; }

    .store h1,
    .storeHide h1{
        font-size: 20px;
        letter-spacing: .1vw;
    }

    .store h2,
    .storeHide h2{
        font-size: 20px;
        letter-spacing: .1vw;
    }

    .store h3,
    .storeHide h3{
        font-size: 18px;
        letter-spacing: .1vw;
    }

    .itemMain{
        /*width: 99.6%;*/
    }
  
}


/* ----------------------------------------------
 * Generated by Animista on 2019-12-26 17:19:39
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}