html, body {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;    
    height: 100%;
    width: 768px;
    max-width: 100%;
    border: none;
    background-color: #f39b1c;
    position: relative;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
    margin: 0 auto;
}
ul, *html {
    zoom: expression(function(ele) {
        ele.style.zoom "1";
        document.execCommand("BackgroundImageCache", false, true)
    }
    (this))
}
body.game_bg {
    width: 100%;
    position: relative;
}
.wrap {
    width: 768px;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    background-color: #f69d1d;
    padding-bottom: 50%;
}

/*------ 遊戲場景 ------*/
.countdown {
    position: absolute;
    z-index: 99;
    width: 100%;
    max-width: 768px;
    height: 70%;
    text-align: center;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 68%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 68%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 68%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.countdown_num {
    color: #fff040;
    font-size: 8rem;
    font-weight: bold;
    padding: 50% 0 50%;
    font-family: Arial, Helvetica, sans-serif;
}
.scenes_title {
    width: 100%;
    text-align: center;
    position: absolute;
    z-index: 50;
    margin: 0 auto;
}
.scenes_title img {
    width: 35%;
}
.header_bg {
    width: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    z-index: 9;
}
.counter, .score {
    position: absolute;
    top: 0;
    right: 0;
    width: 32%;
    font-size: 1.4em;
    color: #fff;
    padding: 4% 0 0 0;
    text-align: center;
    z-index: 25;
}
.counter span {
    font-weight: bold;
    color: #ffff00;
    padding: 0 3px;
}
.score {
    right: inherit;
    left: 0;
    padding: 4% 0 0 2.5%;
}
.box {
    width: 100%;
    max-width: 768px;
    text-align: center;
    position: absolute;
    top: 37%;
    z-index: 2;
}
.box img {
    width: 20%;
}
.main_bg img {
    width: 100%;
    max-width: 100%;
}


/*------ 飛天箱 ------*/
.rain-wrap {
    position: absolute;
    z-index: 3;
    width: 110%;
    max-width: 768px;
    height: 500px;
    top: 0;
    left: 0;
    overflow: hidden;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    /* background-color: rgba(238, 74, 74, 0.5); */
}
.envelope {
    width: 100px !important;
    height: auto;
    overflow: hidden;
    position: absolute;
    -webkit-user-select: none;
    border: none;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

/*------ START ------*/
.game_start {
    position: absolute;
    z-index: 99;
    left: 50%;
    right: 50%;
    top: 26%;
    margin-left: -90px;
    padding: 6px 0 10px;
    border-radius: 100%;
    width: 180px;
    height: 180px;
    color: #fff;
    font-size: 2.6rem;
    font-weight: bold;
    text-align: center;
    line-height: 165px;
    background-color: #b22f2f;
    background: -moz-linear-gradient(-45deg,  rgba(255,123,124,1) 0%, rgba(198,0,1,1) 39%, rgba(98,0,1,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(255,123,124,1) 0%,rgba(198,0,1,1) 39%,rgba(98,0,1,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(255,123,124,1) 0%,rgba(198,0,1,1) 39%,rgba(98,0,1,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7b7c', endColorstr='#620001',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    box-shadow: 0 0 25px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.9);
}
.game_start::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 15px;
    top: 15px;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    background-color: #fe0000;
}

/*----- 燈箱 -----*/
.pop {
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transition: all 0.3s;
            transition: all 0.3s;
    z-index: 999;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 34%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 34%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 34%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.pop_bg {
    width: 90%;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    top: 24%;
    -webkit-transform: translateY(-50%);
       -mos-transform: translateY(-50%);
            transform: translateY(-50%);
    padding: 10px;
    background-color: #000;
    color: #fff;
    text-align: center;
    -webkit-transition: all 0.3s;
            transition: all 0.3s;
}
.pop_content {
    background-color: #d5000f;
    border-radius: 15px;
    padding: 20px 20px 0 20px;
    overflow: hidden;
}
.pop_content h2 {
    font-size: 1.5em;
}
.get_num {
    font-size: 18px;
    margin: 10px auto;
}
.get_num span {
    color: #f1ff00;
    font-size: 125%;
    padding: 0 5px;
}
.info {
    font-size: 1.2em;
    line-height: 1.3em;
    margin: 20px 0 0;
}
.reload {
    background-color: #4a1601;
    width: 170px;
    margin: 5px auto 20px;
    padding: 8px 0;
    border-radius: 50px;
    box-shadow: 0 3px #af1513;
}
.pop_content a {
    color: #fdcd78;
    text-decoration: underline;
}
.cupon {
    width: 100%;
    margin: 10px auto 10px;
    font-size: 1.4em;
    line-height: 1.2em;
    font-weight: bold;
}
a.cupon_text {
    display: block;
    text-decoration: none;
    font-size: 1.3em;
    color: #fff;
    background-color: #4a1601;
    width: 170px;
    margin: 5px auto 20px;
    padding: 8px 0;
    border-radius: 50px;
    box-shadow: 0 3px #af1513;
}
.winnder_pic {
    text-align: center;
    width: 100px;
    margin: -17px auto 10px;
}
p.title {
    font-size: 1.5em;
    color: #fceb54;
    margin-bottom: 15px;
}
p.worrying {
    font-size: 22px;
    color: #e10a0a;
    text-decoration: underline;
    margin-bottom: 20px;
    text-align: center;
}
.again {
    display: block;
    padding: 8px;
    text-align: center;
    border-radius: 40px;
    background: #fceb54;
    color: #ff3d4b;
    font-size: 16px;
}
.close {
    background-color: #7d0505;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    line-height: 40px;
    font-size: 1.6em;
    position: absolute;
    top: -12px;
    right: -7px;
    border: 5px solid #000;
    cursor: pointer;
}

/*----- 說明 -----*/
#explain {
    width: 90%;
    position: absolute;
    z-index: 999;
    top: 54%;
    left: 5%;
    background-color: #fdd948;
    color: #562403;
    border-radius: 10px 20px 20px 20px;
    padding: 30px 20px 20px;
}
#explain .game_title {
    font-size: 1.6em;
    position: absolute;
    top: -32px;
    left: 0;
    text-align: center;
    background-color: #fdd947;
    border-radius: 20px 20px 0 0;
    padding: 15px 20px 15px;
    font-weight: bold;
}
#explain p.title {
    font-size: 1.6em;
    color: inherit;
    font-weight: bold;
}
#explain ul {
    margin-bottom: 20px;
}
#explain ul li {
    text-align: left;
    margin: 0 0 10px 20px;
    font-size: 14px;
    line-height: 18px;
    position: relative;
}
#explain ul li::before {
    content: '';
    width:  19px;
    height: 22px;
    background: url('../images/dot.png') top center no-repeat;
    position: absolute;
    left: -22px;
    top: -1px;
}
#explain .attention {
    font-size: 18px;
    line-height: 25px;
    color: #1866c6;
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center;
}
#explain a {
    color: #1965c7;
    text-decoration: underline;
}
.logos {
/*     position: absolute;
    z-index: 999;
    top: 89%; */
    width: 100%;
    text-align: center;
}
.logos img {
    width: 100%;
    margin: 0 auto;
}


/*------ 共用 ------*/
.hide       { display: none; transition: all 0.3s; -webkit-transition: all 0.3s; }
.show       { display: block; transition: all 0.3s; -webkit-transition: all 0.3s; }
span        { vertical-align: baseline; }
/* .clearfix   { *zoom: 1; } */
.clearfix:after {
    content: '\20';
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}
.header_bg img, .winnder_pic img {
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .wrap                   { padding-bottom: 65vw; }
    #explain                { top: 105vw; }
    .counter, .score        { font-size: 0.95em; }
    .envelope               { width: 17vw !important; }
    .game_start             { top: 45vw; }
    .box                    { top: 73vw; }
    .logos                  { top: 186vw; }
}
@media only screen and (max-width: 570px) {
    .wrap                   { padding-bottom: 120vw; }
}
@media only screen and (max-width: 480px) {
    .wrap                   { padding-bottom: 120vw; overflow: hidden; }
    .rain-wrap              { top: -100px; height: 550px; width: 110%; }
    #explain                { padding: 20px 10px 10px; top: 112vw; left: 2.5%; width: 95%; }
    #explain .attention     { font-size: 14px; line-height: 20px; }
    .countdown              { height: 140vw; }
    .countdown_num          { font-size: 6rem; padding-top: 42vw; }
    .game_start             { top: 40vw; width: 130px; height: 130px; margin-left: -65px; line-height: 120px; font-size: 1.8em; }
    .game_start::before     { left: 10px; top: 10px; width: 110px; height: 110px; }
    .box img                { width: 25%; }
    .pop_bg                 { top: 17%; }
}
@media only screen and (max-width: 410px) {
    .wrap                   { padding-bottom: 170vw; }
    #explain                { top: 115vw; }
    #explain .game_title, #explain p.title { font-size: 22px; }
}

@media only screen and (max-width: 350px) {
    .wrap                   { padding-bottom: 180vw; }
    .counter, .score        { font-size: 0.85em; }
}
@media only screen and (max-width: 330px) {
    .pop_content h2         { font-size: 1.2em; }
    .cupon                  { font-size: 1.2em; }
}