@charset "utf-8";

body{
	background-color: #522816;
    font-family: Arial,"Apple LiGothic Black", "Impact", "微軟正黑體";
}


.bgRed{
    position: fixed;
    width: 100%;
    height: 100%;
}

.bgRed2{
    position: fixed;
    width: 100%;
}

.bgRed3{
    position: fixed;
    
}

.bgRed4{
    position: fixed;
    height: 100%;
}



/* index */
.titleTxt{
    width: 90%;
    left: 5%;
    /*top: 22.5%;*/
    top: 25%;
}

.slogan{
    width: 90%;
    /*z-index: 900;*/
    /*outline: 1px solid orange;*/
    left:5%;
    top: 22.5%;
}

.w90{width: 90%;}


.subtitleTxt{
    width: 90%;
    left: 5%;
    top: 34%;
}

.btnStart{
    width: 22%;
    left: 65%;
    top: 37%;
}

.btnLogin{
    width: 22%;
    left: 65%;
    top: 66%;
}



.itemSlide{
    display: block;
    width:100%;
    height: 48%;
    top:48%;
   
    overflow:hidden;

    /*background-color: #000;*/
    /*border: 1px solid #ff0ff0;*/

}

.itemSlide ul,
.slider {
    position: relative;
    left: 0;
    width: 100%;
    /*padding-top: 3%;*/
    /*border: 1px solid #00ffff;*/
}
/*.itemSlide ul li {
    display: inline-block;
    width: 100%;
}
.itemSlide ul li img{
    width: 100%;
}*/

/*.charactor{
    display: inline-block;
    width: 100%;
}*/

.charactor{
    display: block;
    width: 100%;
    position: absolute;
    left:-20%;
    opacity: 0;
    /*outline: 1px solid orange;*/
}

.square{
    top:77%;
}











/* result */
/*.btnWallpaper{
    width: 80%;
    top: 24.5%;
    left: 10%;
    border: 1px solid #fff;
}*/
/*.resultMan{
    width: 100%;
}*/

.resultMan,
.resultTxt{
    width: 80%;
    top: 29%;
    left: 10%;
    border: 1px solid #fff;
}

.resultTxt{
    /*width: 80%;
    left: 10%;*/
    top:56%;
    border:0;
}

.btn{
    width: 35%;
    
    
}

.btnLeft1{ left:10%; }
.btnLeft2{ left:55%; }
.btnTop1{ top:67%; }
.btnTop2{ top:76%; }

.btnMoremen{
    top: 84%;
    left: 20%;
    width: 15%;
}


.blink-1 {
 -webkit-animation: blink-1 1.5s infinite both;
         animation: blink-1 1.5s infinite both;
}
@-webkit-keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}








/* finish */

.btnDownload{
    width: 20%;
    top: 41.5%;
    left: 57%;
}

.btnGoaward{
    width: 35%;
    top: 73%;
    left: 32%;
}

.finishRemind{
    width: 25%;
    top: 81%;
    left: 37%;
}


/* award */
.awardList{
    /*background-color: #ff00ff;*/
    position: relative;
    padding-top: 6%;
    padding-left: 6%;
}

.awardName{
    color: #fff;
    float: left;
    margin-left: 0%;
    margin-right: 3.5%;
    width: 16%;
    margin-bottom: 1%;
    /* outline: 1px solid; */
    text-align: center;
}

.week{
   /* width: 90%;
    left: 5%;
    position: relative;*/
}




/* menu */
.btn_menuOpen,
.btn_close{
    width: 7%;
    left: 90%;
    top: 4%;
}



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

.menu ol{
    background-color: rgba(255,255,255,.8);
    width: 60%;
    height: 100%;
    left: 40%;

    padding-top: 15%;
}

.menu ol li{
    height: 10%;
    border-bottom: 1px solid #000;
}

.menu ol li:nth-child(6),.menu ol li:nth-child(7){
    border-bottom: 0px
}

/*.menu ol li a{
    width: 100%;
    height: 100%;
    border: 1px solid #ff00ff;
}*/

.menu ol li a img{
    width: 100%;
}






/* form */
.aboutAlert{
    background-color: rgba(0,0,0,.6);
    position: fixed;

}

.alertContent{
    /*width: 100%;*/
    /*position: fixed;*/
    /*left: 5%;
    top:5%;*/
    position: relative;
}

.alertOuter{
    width: 90%;
    height: 90%;
    outline: 2px solid #fff;
    
    /* width: 100%; */
    /* height: 100%; */
    position: fixed;
    top: 5%;
    left: 5%;
    overflow: auto;
    background-image: url(../images/bgRed.jpg);
}

.aboutClose{
    position: absolute;
    width: 10%;
    top: 2%;
    left: 85%;
    width: 10%;
}

.aboutPC{
    width: 40%;
    left: 30%;
    top:7%;
}


.insertBox{
    background-color: rgba(0,0,0,0);
    border: 0px ;
    width: 77%;
    height: 2%;
    position: absolute;
    top: 39.3%;
    left: 11%;
    font-size: larger;
}

#iPhone{
  top: 44.9%;  
}


.checkb,
.checkb2{
    width: 35%;
    top: 47.5%;
    left: 10%;
}

.checkb2{
    width: 45%;
    left:45%;
}

#iMail1,#iMail2{
   top: 50%; 
   background-color: #ebebeb;
   height: 2.4%;
   width: 40%;
}

#iMail2{
   width: 79%; 
}

#MailSelect{
    position: absolute;
    top: 50%;
    left: 54%;
    background-color: #ebebeb;
    border: 0px;
    border-radius:0;
    height: 2.4%;
    width: 35%;
    background-image: url('../images/arrow.png');
    background-repeat: no-repeat;
    background-position: 90%, 20%;
    background-size:10%;
    color: #959595;
    /*font-size: larger;*/
}


#MailSet02,
#MailSet01{
    /*border: 1px solid #ff0ff0;*/
}


.set1{
    /*border: 1px solid #ff0000;*/
}

.set2{
    /*border: 1px solid #0000ff;*/
}


.aa{
    /*margin-top: 5%;*/

}

.btnUpload,.btnSubmit{
    width: 34%;
    top:55%;
    left:33%;
}

.btnSubmit{
    top:86%;
}

.fakeChk{
        top: 80.5%;
    width: 5%;
    left: 10%;
}


.btnAbout{
    display: block;
    /*background-color: rgba(0,0,0,.5);*/
    width: 16%;
    height: 1.5%;
    top: 80.5%;
    left: 31.5%;

}


.lblUpload{
    /*border: 1px solid #ff00ff;*/
    width: 38%;
    height: 4.5%;
    top: 54.5%;
    left: 31%;
}

#file{
    /*border: 1px solid #fff000;*/
}


.testClass{
    position: absolute;
    z-index: 999;
    border: 1px solid #ff0000;
}




.testClass2{
    position: absolute;
    z-index: 999;
    border: 1px solid #ffff00;
    top:25%;
}


.wrapper2 {
        width: 100%;
        min-height: 100%;
        height: auto;
    }

.w640 {
        /*width: 640px;*/
        min-height: 100%;
        height: auto;
        /*outline: 1px solid orange;*/

    }



.testBall{
    width: 35%;
    height: 20%;
    background-color: orange;
    left: 35%;
    top: 35%; 
}

.ballball{
    width: 100%;
    /*outline: 1px solid orange;*/
    top:30%;
}

.crystalTxt{
    top: 30%;
}






.pulsate-bck {
 -webkit-animation: pulsate-bck 0.5s ease-in-out infinite both;
         animation: pulsate-bck 0.5s ease-in-out infinite both;
}
@-webkit-keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}