body {
    margin: 0;
    padding: 0;
    background: url(../images/wrapBG.jpg) #e31d1a center no-repeat;
    font-family: 'Microsoft JhengHei';
}

.header {
    height: 80px;
    width: 100%;
    background: linear-gradient(#ff5653,#e31d1a);
}
.menu{
    width:640px;
    height:80px;
    margin:0 auto;
    position:relative;
}
.footer {
    width: 100%;
    background: #e31d1a;
    color:white;
    font-size:14px;
    text-align:center;
    padding:10px 0;
}
.wrap {
    width: 640px;
    height: 970px;
    margin: 0 auto;
    position:relative;
}
.menu a{
    position:absolute;
}
.logo{
    top:13px;
    left:20px;
}
.fbBtn {
    top: 13px;
    right: 90px;
}
.m01logo {
    top: 13px;
    right: 20px;
}

.step1{
    width:640px;
    height:970px;
    position:absolute;
   
}
.step1 div{
    position:absolute;
}
.step1_obj1{
    width:364px;
    height:384px;
    background:url(../images/step1_img1.png);
    top:135px;
    left:-35px;
    opacity:0;
}
.step1_obj2 {
    width: 414px;
    height: 186px;
    background: url(../images/step1_img2.png);
    top: 0px;
    left: 195px;
}
.step1_obj3 {
    width: 473px;
    height: 485px;
    background: url(../images/step1_img3.png);
    top: 125px;
    left: 210px;
    opacity:0;
}

.step1_obj4 {
    width: 528px;
    height: 267px;
    background: url(../images/step1_img4.png);
    top: 510px;
    left:50%;
    margin-left:-264px;
}
.step1_btn {
    width: 360px;
    height: 106px;
    background: url(../images/step1_btn.png);
    top: 820px;
    left: 50%;
    margin-left: -180px;
    cursor:pointer;
}
    .step1_btn img {
        display: block;
        position: absolute;
        top: 50%;
        margin-top: -23px;
        right: 30px;
        -webkit-animation: btnMove 1s infinite; /* Safari 4.0 - 8.0 */
        animation: btnMove 1s infinite;
    }

.step2 {
    width: 640px;
    height: 970px;
    position: absolute;
    display: none;
}

    .step2 div {
        position: absolute;
    }

.step2_obj1 {
    width: 479px;
    height: 505px;
    background: url(../images/step2_img1.png);
    top: -14px;
    left: -76px;
}

.step2_obj2 {
    width: 301px;
    height: 115px;
    background: url(../images/step2_img2.png);
    top: 20px;
    left: 250px;
}

.step2_obj3 {
    width: 356px;
    height: 360px;
    background: url(../images/step2_img3.png);
    top: 62px;
    left: 264px;
}
.step2_cont {
    width: 640px;
    height: 520px;
    top: 435px;
    left: 0;
}
.step2_cont1 {
    width: 640px;
    height: 520px;
}

.step2_icon1 {
    display: block;
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translate(-50%);
}
.step2_icon2 {
    display: block;
    position: absolute;
    left: 50%;
    top: 5px;
    transform: translate(-50%);
}
.step2_icon3 {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0px;
    transform: translate(-50%);
}
.turntable {
    position: absolute;
    width: 470px;
    height: 474px;
    left: 50%;
    top: 10px;
    margin-left:-235px;
    background: url(../images/step2_img4.png);
}
.step2_btn {
    display: block;
    position: absolute;
    left: 42.4%;
    top: 195px;
    transform: translate(-50%);
    
    -webkit-animation: btnScale 1s infinite; /* Safari 4.0 - 8.0 */
    animation: btnScale 1s infinite;
    cursor: pointer;
}
.btnrotate {
    -webkit-animation: btnrotate 10s; /* Safari 4.0 - 8.0 */
    animation: btnrotate 10s;
}

.prize_20 {
    display:none;
    width: 548px;
    height: 522px;
    background: url(../images/prizeBG_20.png);
    left: 50%;
    transform: translate(-50%);
}
.prize_20_btn {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%);
    cursor:pointer;
}
.prize_50 {
    display: none;
    width: 548px;
    height: 522px;
    background: url(../images/prizeBG_50.png);
    left: 50%;
    transform: translate(-50%);
}

.prize_50_btn {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%);
    cursor: pointer;
}

.prize_10 {
    display: none;
    width: 548px;
    height: 522px;
    background: url(../images/prizeBG_10.png);
    left: 50%;
    transform: translate(-50%);
}
.prize_10_text1 {
    top: 217px;
    left: 212px;
    font-size: 19px;
    font-weight: bold;
}
.prize_10_text2 {
    top: 274px;
    left: 212px;
    font-size: 19px;
    font-weight: bold;
}
.prize_10_btn {
    position: absolute;
    left: 50%;
    bottom: 72px;
    transform: translate(-50%);
    cursor: pointer;
}

.prize_100 {
    display: none;
    width: 548px;
    height: 522px;
    background: url(../images/prizeBG_100.png);
    left: 50%;
    transform: translate(-50%);
}

.prize_100_text1 {
    top: 217px;
    left: 212px;
    font-size: 19px;
    font-weight: bold;
}

.prize_100_text2 {
    top: 274px;
    left: 212px;
    font-size: 19px;
    font-weight: bold;
}

.prize_100_btn {
    position: absolute;
    left: 50%;
    bottom: 72px;
    transform: translate(-50%);
    cursor: pointer;
}
@keyframes btnMove {
    0% {
        right: 30px;
    }

    50% {
        right: 40px;
    }

    100% {
        right: 30px;
    }
}

@keyframes btnScale {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(0.9);
    }

    60% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes btnrotate {
    0% {
        transform: rotate(0turn);
    }

    100% {
        transform: rotate(20turn);
    }
}