@charset "UTF-8";
.container {
    width: auto;
}
#confetti{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 100;
    display:none;
}
.col-xs-12 {
    min-height: 300px;
    position: z-index: 5
}

.screen {
    position: relative;
}

.mask {
    background: rgba(255, 255, 255, .5);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
}

.mask:before {
    content: "";
    display: block;
    width: 219px;
    height: 191px;
    background: url(http://4.bp.blogspot.com/-CBkA-9fQC4A/U32XS0obrvI/AAAAAAAAA94/CPtO098uPQw/s1600/131.png) 0 0 no-repeat;
    margin: 0 auto;
}

.mask:after {
    content: "你今天已經玩過三次了！";
    font-size: 18px;
    text-align: center;
    display: block;
}

.button:link,
.button:visited {
    display: inline-block;
    border: 1px solid #298fca;
    border-radius: 2px;
    padding: 1em;
    color: #298fca;
    text-align: center;
    min-width: 8em;
}

.button:hover {
    text-decoration: none;
    background: #e3f4ff;
}

.mask {
    text-align: center;
}


/*登入表單*/

.popup {
    background: #fff;
    padding: 10px 10px 15px;
    border: 5px solid #1499ff;
    border-radius: 10px;
    text-align: left;
    max-width: 800px;
    margin: 40px auto;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.popup h1 {
    padding: 8px 10px;
    border-radius: 2px;
    text-align: left;
    margin: 0 auto 15px;
    font: bold 16px/1.1 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
    color: #fff;
    border: 0;
    background: #0880DE url(/st_ec/img/ui/ui-bg_highlight-soft_75_0880de_1x100.png) repeat-x 50% 50%;
}

.popup fieldset {
    display: block;
    font: normal 18px/1.4 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
    color: #333;
    margin: 0 auto;
    padding: 24px 0;
}

.popup fieldset>div {
    margin: 0 auto 10px;
    padding: 0 10px;
    text-align: center;
}

.popup fieldset>div label {
    margin: 0 auto 10px;
    padding: 0 10px;
    text-align: right;
    display: inline-block;
    font: normal 16px/1.4 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
    color: #333;
}


/*登入/取消按鈕*/

input[type=button].popup-modal-dismiss,
input[type=button].submit-login,
a.popup-modal-dismiss {
    width: auto;
    height: auto;
    font: normal 16px/1.4 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
    border-radius: 4px;
    padding: 6px 15px;
    display: inline-block;
    box-sizing: border-box;
    outline: none;
    box-shadow: none;
}

input[type=button].submit-login {
    background: #7db9e8;
    /* Old browsers */
    background: -moz-linear-gradient(top, #7db9e8 4%, #02a8ea 6%, #1e5799 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #7db9e8 4%, #02a8ea 6%, #1e5799 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #7db9e8 4%, #02a8ea 6%, #1e5799 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799', GradientType=0);
    /* IE6-9 */
    color: #fff;
    border: 1px solid #207fb6;
}

input[type=button].popup-modal-dismiss,
a.popup-modal-dismiss {
    color: #333;
    border: 1px solid #666;
    text-decoration: none;
    display: inline-block;
    background: #f7f7f7;
    /* Old browsers */
    background: -moz-linear-gradient(top, #f7f7f7 5%, #f4f4f4 27%, #d6d6d6 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f7f7f7 5%, #f4f4f4 27%, #d6d6d6 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f7f7f7 5%, #f4f4f4 27%, #d6d6d6 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#d6d6d6', GradientType=0);
    /* IE6-9 */
}

.popup fieldset > span#login-err {
    color: #ff6767;
    width: 100%;
    margin: 0 auto 8px;
    text-align: center;
    font: normal 18px/1.4 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
}

input[type=text],
input[type=password] {
    -webkit-appearance: none;
    color: #333;
    margin: 0 auto 8px;
    box-sizing: border-box;
    padding: 3px 8px !important;
    border: 1px solid #ddd;
    text-align: left;
    font: normal 16px/1.4 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
}

input[type=text]:focus,
input[type=password]:focus {
    background-color: #fff;
    border: 1px solid #7db9e8;
}

.popup p {
    font-size: 15px;
    color: #24607b;
}

.notMem {
    font: normal 14px/1.4 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
    color: #333;
    text-align: right;
    border-top: 1px solid #eee;
    padding-top: 8px;
}

.notMem a {
    font: normal 14px/1.4 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
}

#dia-login-success p, #dia-ready-go p, .popup p.dia-p {
    margin: 1em;
    font: normal 24px/1.4 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
    color: #24607b;
    text-align: center;
}

.popup p.dia-p a:link, .popup p.dia-p a:visited {
    text-decoration: underline;
}

.pep-demo {
   /* width: 300px;
    height: 550px;*/
    width:100%;
    height:100%;
    margin: 0 auto;
    padding: 0;
    /*background-color: rgba(0,0,0,0.5);*/
    position: relative;
}

.pep,
.tgt {
    position: absolute;
    display:none;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    /*z-index: 41;*/
}
/*抓寶球*/
.pep {
    /*left: calc(50% - 125px);*/
    /*bottom: 15px;*/
    width:200px;
    height: 200px;

    z-index:100;
    
}
.modata{
    position: absolute;
    width:100%;
    text-align:center;
    margin:5px 0 0;
    z-index: 42;
}
.tgt h3{
    
    border-radius:30px;
    display: inline-block;
    background-color:rgba(0,0,0,0.4);
    color:#fff;
    padding:3px 10px;
    font:bold 16px/1.4 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
    
    
}
.tgt h3 strong{
  background:url(../img/cpball.png) left center no-repeat;
  padding:3px 0 3px 28px;
}
.pep img,
.tgt img{
  display:block;
  width:100%;
  margin:0 auto;
  position: relative;
}
.tgt {
    width:300px;
    height: 300px;
    top: 40px;
    z-index: 40;
    text-align: center;
 
    background:rgba(255,255,255,0);
    box-shadow: 0 0 15px 8px rgba(255,255,255,0);
}

.tgt.pep-dpa {
    background:rgba(255,255,255,0.8);
    box-shadow: 0 0 15px 10px rgba(255,255,255,0.8);
    transition: box-shadow 0.3s ease-in,background 0.3s ease-in;
}

.panel {
    position: absolute;
    z-index:39;
    left:0;
    bottom:0;
    text-align: left;
    margin:auto auto 24px 24px;
}

.ball {
    width: 70px;
    height: 70px;
    display: inline-block;
    margin: 0 0 0 0;
    position: relative;
    background:url(../img/ball.png) center center no-repeat;
    background-size: cover;
}
/*
.ball:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 6;
    width: 20%;
    height: 20%;
    background-color: #FFF;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #AAA, 0 0 0 10px #fff, 0 0 0 16px #3f3f3f;
    margin: 40%;
}

.ball:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    width: 94%;
    height: 10%;
    background-color: rgba(0, 0, 0, 0);
    margin: 45% 3%;
    box-shadow: 12px 0 0 #FFF, -12px 0 0 #FFF;
}*/

.ball:hover {
    -webkit-animation: shak .6s 2;
    animation: shak .6s 2;
}

@-webkit-keyframes shak {
    0%,
    100% {
        -webkit-transform: rotate(-10deg);
    }
    50% {
        -webkit-transform: rotate(10deg);
    }
}

@keyframes shak {
    0%,
    100% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(10deg);
    }
}

.panel.count1 .b1,
.panel.count1 .b2,
.panel.count1 .b3,
.panel.count2 .b2,
.panel.count2 .b3,
.panel.count3 .b3 {
    background:url(../img/ballused.png) center center no-repeat;
    background-size: cover;
}

#dia-alert-box .mfp-close,
#orderLoginForm .mfp-close,
#dia-login-success .mfp-close,
#dia-ready-go .mfp-close {
    background: none;
    color: #fff;
    margin:5px 15px auto auto;
    text-indent: 0;
    width:auto;
    height:auto;
}

.mfp-zoom-out {}

.mfp-zoom-out .mfp-with-anim {
    opacity: 0;
    transition: all 0.3s ease-in-out;
    transform: scale(1.3);
}

.mfp-zoom-out.mfp-bg {
    opacity: 0;
    transition: all 0.3s ease-out;
}

.mfp-zoom-out.mfp-ready .mfp-with-anim {
    opacity: 1;
    transform: scale(1);
}

.mfp-zoom-out.mfp-ready.mfp-bg {
    opacity: 0.8;
}

.mfp-zoom-out.mfp-removing .mfp-with-anim {
    transform: scale(1.3);
    opacity: 0;
}

.mfp-zoom-out.mfp-removing.mfp-bg {
    opacity: 0;
}


/*圓形按鈕*/

a.popup-modal-dismiss.circleBtn {
    display: none;
    width: 150px;
    height: 150px;
    background: #1499ff;
    background-size: cover;
    margin: 0 auto;
    cursor: pointer;
    text-indent: -10000px;
    border: 0;
}


/*錯誤訊息提示*/

#award-msg-error,
#three-times-msg {
    color: #2293df;
    font: 700 36px/1.2 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
    text-align: center;
    padding:0 ;
    margin:0 auto 15px;
}
#award-msg-error > img,
#three-times-msg > img{
    display: block;
    margin:0 auto;
    width:100%;
}

/*訊息標題*/

#award-msg-error .btnTitle,
#three-times-msg .btnTitle{
    display: block;
    color: #ff6767;
    font: bold 28px/1.4 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
    text-align: center;
    margin: 8px auto;
}

a.prodBtn {
    border-radius: 30px;
    color: #fff;
    text-align: center;
    padding: 8px 15px;
    text-decoration: none;
    margin: 0 auto 24px;
    background: #2293df;
    font: bold 28px/1.4 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
}

.msgTitle {
    font: normal 18px/1 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
    color: #fff;
    background-color:#1499ff;
    padding: 8px 15px 5px;
    display: inline-block;
    margin: 0 auto 15px;
    border-radius:4px;
}

#award-msg-error .mfp-close-btn-in .mfp-close {
    display: block;
    width: 36px;
    height: 36px;
    background: url(../img/closeBtn.png) center center no-repeat;
    background-size: cover;
}

.popup .mfp-close {
    width: 70px;
    height: 70px;
    background: url(../img/closeBtn.png) left top no-repeat;
    background-size: cover;
    cursor: pointer;
    margin: 10px 10px auto auto;
    text-indent: -10000px;
    overflow: hidden;
    opacity: 1;
}

.popup .mfp-close.xHide {
    display: none;
}


/*遊戲得獎*/

#dia-award.popup {
    background: none;
    padding: 5px;
    border: 0;
    border-radius: 0;
    text-align: center;
    max-width: 600px;
    margin: 40px auto;
    position: relative;
    overflow: hidden;
}

#dia-award.popup .mfp-close {
    display: none;
}

.gameResultBox {
    width: 100%;
    margin: 0 auto;
    padding:0 0 80px;
    background: url(../img/awardBg.jpg) center center no-repeat;
    background-size: cover;
}

.gameResultBox .imgRes {
    display: block;
    width: 100%;
    margin: 0 auto;
    border: 0;
}

.gameResultBox .awardBox {
    width: 90%;
    margin: 0 auto;
    background-color: #fff;
    box-sizing: border-box;
    padding: 15px;
    border-radius: 5px;
}

.gameResultBox .awardBox .awardTxt1 {
    color: #45686e;
    font: normal 28px/1.4 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
    text-align: center;
    display: block;
}

.gameResultBox .awardBox .greenLin {
    background-color:#70efba;
    height:4px;
    display: block;
    width: 80%;
    border-radius: 15px;
    margin:0 auto 8px;

}

.gameResultBox .awardBox article strong{
    color:#45686e;
    /*font: bold 48px/1.2 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;*/
    display: block;
    text-align: center;
    margin:0 auto 8px;
}


.gameResultBox i{
    color:#eb6168;
    font-style: normal;
    font: normal 16px/1.2 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
    text-align: center;
    display: none;
    margin:0 auto 8px;
}

.gameResultBox i a{
    color:#eb6168;
    font-style: normal;
    text-decoration: underline;
}
.gameResultBox .tktImg{
    width:90%;
    margin:0 auto;
    display: none;
}
.gameResultBox .tktImg img{
  display:block;
  width:100%;
  margin:0 auto 8px;
}
.gameResultBox .awardBox .null-msg{
  display:none;
}

.gameResultBox .awardSnBox,
.gameResultBox .awardPriceBox{
    background-color:#22bc82;
    box-sizing: border-box;
    border-radius: 30px;
    font: normal 16px/1.2 Verdana;
    color:#fff;
    text-align: center;
    margin:0 auto;
    padding:5px 1em;
    display:none;
}

/*coupon券*/
.gameResultBox.coupon .awardBox strong{
    font: bold 48px/1.2 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
}
.gameResultBox.coupon i.couponTxt{
    display:block;
}


/*coupon券序號*/
.gameResultBox.coupon .awardPriceBox{
    display:inline-block;
    color:#fff;
    margin-bottom:8px;
}

.gameResultBox.coupon .awardPriceBox #awardPrice{
      color:#e7ffdf; 
      font: 700 50px/1.2 Verdana;
      letter-spacing: -2px;
}
.gameResultBox.coupon .awardPriceBox #awardPrice:before{
    content:"$";
    font: 700 40px/1.2 Verdana;

}
.gameResultBox.coupon .awardBox a.popup-modal-dismiss {
    width: 150px;
    height: 150px;
    font: normal 16px/1.4 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
    border-radius: 0;
    padding: 0;
    display: block;
    margin:0 auto -75px;
    box-sizing: border-box;
    border:0;
    outline: none;
    overflow: hidden;
    text-indent: -10000px;
    box-shadow: none;
    background:url(../img/inbtn.png) left top no-repeat;
    background-size: cover;
}

/*wifi券*/
.gameResultBox.wifi i.wifiTxt{
    display:block;
}


/*wifi券序號*/
.gameResultBox.wifi .awardBox strong{
    color:#eb6168;
    font: bold 48px/1.2 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
}
.gameResultBox.wifi .awardSnBox{
    display:inline-block;
    color:#fff;
}
.gameResultBox.wifi .awardSnBox #awardSn{
      color:#e7ffdf; 
      font:normal 30px/1 Arial,"微軟正黑體","Microsoft JhengHei", sans-serif;
      letter-spacing: 0;
}
.gameResultBox.wifi .awardSnBox #awardSn:before{
    content:"序號：";
    display:block;
    text-align:center;    
    font: normal 14px/1.2 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;

}

.gameResultBox.wifi .awardPriceBox{
    display: none;
}

.gameResultBox.wifi .awardBox a.popup-modal-dismiss {
    width: 150px;
    height: 150px;
    font: normal 16px/1.4 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
    border-radius: 0;
    padding: 0;
    display: block;
    margin:0 auto -75px;
    box-sizing: border-box;
    border:0;
    outline: none;
    overflow: hidden;
    text-indent: -10000px;
    box-shadow: none;
    background:url(../img/cancelbtn.png) left top no-repeat;
    background-size: cover;
}



/*機票*/
.gameResultBox.tkt i.tktTxt{
    display:block;
}
.gameResultBox.tkt .tktImg{
    display:block;
}

/*機票序號*/
.gameResultBox.tkt .awardSnBox{
    display:none;
}
.gameResultBox.tkt .awardSnBox #awardSn{
      display:none;
}

.gameResultBox.tkt .awardBox strong{
    color:#eb6168;
    font: bold 26px/1.2 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
}
.gameResultBox.tkt .awardBox a.popup-modal-dismiss {
    width: 150px;
    height: 150px;
    font: normal 16px/1.4 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
    border-radius: 0;
    padding: 0;
    display: block;
    margin:0 auto -75px;
    box-sizing: border-box;
    border:0;
    outline: none;
    overflow: hidden;
    text-indent: -10000px;
    box-shadow: none;
    background:url(../img/cancelbtn.png) left top no-repeat;
    background-size: cover;
}

/*名謝惠顧*/
.gameResultBox.null .awardBox .null-msg{
    display:block;
    font: normal 36px/1.4 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
    color:#45686e;
}
.gameResultBox.null .awardBox .null-msg u{
    font: normal 48px/1.1 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
    font-style: normal; 
    text-decoration: none;
}
.gameResultBox.null .awardSnBox{
    display:none;
    color:#fff;
}
.gameResultBox.null .awardBox #award-msg{
    display:none;
}
.gameResultBox.null .awardSnBox #awardSn{
      display:none;
}
.gameResultBox.null i.nullTxt{
    display:block;
}
.gameResultBox.null .awardBox a.popup-modal-dismiss {
    width: 150px;
    height: 150px;
    font: normal 16px/1.4 Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
    border-radius: 0;
    padding: 0;
    display: block;
    margin:0 auto -75px;
    box-sizing: border-box;
    border:0;
    outline: none;
    overflow: hidden;
    text-indent: -10000px;
    box-shadow: none;
    background:url(../img/yesbtn.png) left top no-repeat;
    background-size: cover;
}