@charset "utf-8";

body{
	background-color: #a49d95;
    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;
}*/




/*/////////////////////////////////////////////*/
/*/////////////////// cut 1 ///////////////////*/
/*/////////////////////////////////////////////*/
.waitting{
    display: block;
    width: 100%;
    height: 100%;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
}

.CUT1,
.CUT2,
.CUT3,
.wrapper
{
    display: block;
    /*display: none;*/

    width: 100%;
    height: 100%;
    
    position: fixed;
    top: 0;
    left: 0;

    overflow: hidden;
}

.indexBG,
.indexInfo
{
    display: block;
    width: 100%;

    position: absolute;
    top: 0;
    left: 0;

    
}



.btnStart{
    display: block;
    width: 38%;
    position: absolute;
    top: 56%;
    left: 29%;
}

.fixed-bottom{
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0%;

    display: none;
}


.dinosaur{
    display: block;
    /*width: 85%;*/
    width: 82%;

    position: absolute;
    /*top: 5%;*/
    top: 7%;
    left: -2%;
}

.vibrate-1 {
    -webkit-animation: vibrate-1 0.3s linear infinite both;
            animation: vibrate-1 0.3s linear infinite both;
}




/* ----------------------------------------------
 * Generated by Animista on 2019-10-7 14:6:38
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation vibrate-1
 * ----------------------------------------
 */
@-webkit-keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}






/*/////////////////////////////////////////////*/
/*//////////////////// cut 2 ///////////////////*/
/*/////////////////////////////////////////////*/

.CUT2{
    /*display: block;*/
    display: none;
}

.ruleBG{
    display: block;
    width: 100%;

    position: absolute;
    top:0;
    left: 0;
}

.btnFind{
    display: block;
    width: 38%;
    position: absolute;
    top: 56%;
    left: 29%;
}




/*/////////////////////////////////////////////*/
/*//////////////////// cut 3 ///////////////////*/
/*/////////////////////////////////////////////*/

.CUT3{
    
    display: none;
    /*display: block;*/
}

.cut3BG{
    display: block;
    
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.7);
    z-index: 11;

}


.rule{
    display: block;
    width: 100%;
    position: absolute;
    top:12%;
    z-index: 12;

}

#video{
    

    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    pointer-events: none;
}

#threeContainer{
    position: fixed;
    z-index: 10;
}

.clock{
    display: block;
    width: 39%;

    position: absolute;
    top:1%;
    left: 2%;
    z-index: 11;
}

.txtTime{
    display: block;
    color: #b0b4b4;
    font-size: 16.5pt;

    position: absolute;
    top: 15.5%;
    left: 16%;
    

    z-index: 11;
}

.btnHowmany{
    display: block;
    width: 50%;

    position: absolute;
    bottom: 0%;

    z-index: 11;
}

.assemble{
    display: none;
    /*display: block;*/
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0%;
    left: 0%;

    z-index: 12;
}

.assembleBG{
    display: block;
    width: 100%;
    position: absolute;
    top: 10%;
}

.fdSet{
    display: block;
    width: 24%;
    
    position: absolute;
    top: 30%;
    left:8%;
}

/*.f1,.f1b{}*/

.f2,.f2b{ left:38%; }

.f3,.f3b{ left:68%; }

.f4,.f4b{
    top:50%;
}

.f5,.f5b{
     top:50%;
     left:38%;
}

.f6,.f6b{
     top:50%;
     left:68%;
}

.f1, .f2, .f3, .f4, .f5, .f6{ display: none; }

.pass{
    display: none;
    /*display: block;*/
    width: 80%;

    position: absolute;
    top: 10%;
    left: 10%;

    z-index: 11;
}

/*/////////////////////////////////////////////*/
/*////////////////// result ///////////////////*/
/*/////////////////////////////////////////////*/
.resultBG{
    display: block;
    width: 100%;

    position: absolute;
    top: 0;
    left: 0;
}

.rbtn{
    display: block;
    width: 50%;

    position: absolute;
    top:46%;
}

.btnFbshare{
    left: 20%;    
}

.btnForm{
    left: 45%;   
}



.btnOffical{
    top: 54%;
    left: 22%;   
}

.fbBGs{
    display: block;
    width: 86%;
    position: absolute;
    top: 24%;
    left: 7%;
}



/*/////////////////////////////////////////////*/
/*////////////////// form   ///////////////////*/
/*/////////////////////////////////////////////*/
.formBG{
    display: block;
    width: 100%;

    position: absolute;
    top: 0;
    left: 0;
}

.btnAbout{
    display: block;
    width: 65%;

    position: absolute;
    top: 63%;
    left: 20%;
}

.chk{
    display: block;
    width: 5%;
    position: absolute;
    top: 62.5%;
    left: 13%;
}

.checkON{ display: block; }
.checkOFF{ display: none; }

.insertBox{
    display: block;
    height: 4%;
    width: 73%;

    position: absolute;
    left: 13%;

    background-color: rgba(0,0,0,0);
    border: 0px;

    font-size: 12pt;
}

#iName{ top:35%; }
#iPhone{ top:45.8%; }
#iMail{ top:56.5%; }

.prompt2{
    /*display: block;*/
    display: none;

    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;

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

.closeAbout{
    display: block;
    width: 10%;

    position: absolute;
    top: 2%;
    left: 85%;

}

.aboutDiv{
    display: block;
    width: 90%;
    height: 90%;

    position: absolute;
    top: 8%;
    left: 5%;

    /*border:1px solid #ff0000;*/
    /*overflow: hidden;*/
    overflow-y: auto;
}

.aboutMain{
    display: block;
    width: 100%;
}


/*/////////////////////////////////////////////*/
/*////////////////// about   ///////////////////*/
/*/////////////////////////////////////////////*/
.aboutBG{
    display: block;
    width: 100%;

    position: absolute;
    top: 0;
    left: 0;
}

.btnSumit{
    display: block;
    width: 45%;

    position: absolute;
    top:56%;
    left:25%;
}




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

.btnMenu{
    display: block;
    width: 15%;

    /*position: absolute;*/
    position: fixed;
    top: 0;
    left: 84%; 
}

.menuDiv{
    display: none;
    width: 100%;
    height: 100%;

    position: fixed;
    top: 0%;
    left: 0%;

    overflow: hidden;

    /*border: 1px solid #ff0000;*/
    /*background-color: rgba(0,0,0,.5);*/
}

.btnCancel{
    display: block;
    width: 11%;

    position: absolute;
    top: 0.5%;
    left: 85.5%;
}

.menuBG{
    display: block;
    width: 70%;

    position: absolute;
    top: 0%;
    left: 30%;
}

.mOption{
    display: block;
    width: 60%;

    position: absolute;
    left: 40%;
}

.m1{ top:12%; }
.m2{ top:20%; }
.m3{ top:28%; }
.m4{ top:36%; }



.prompt,
.prompt3
{
    display: none;
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;

     z-index: 999;
}

.prompt img{
    display: block;
    width: 80%;

    position: absolute;
    top: 5%;
    left: 10%;
}

.prompt3 img{
    display: block;
    width: 100%;

    position: absolute;
    top: 0%;
    left: 0%;
}

.webview
{
    display: none;
    width: 100%;
    height: 100%;

    position: absolute;
    top:0;
    left: 0;

    z-index: 999;
}



.noplay{
    display: none;
    width: 100%;

    position: fixed;
    top:0;
    left: 0;

    z-index: 999;
    pointer-events: none;
}