* {
    margin: 0;
    padding: 0;
            box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
*::before,
*::after {
            box-sizing: inherit;
    -webkit-box-sizing: inherit;
}
html, body {
    width: 100%;
    height: 100%;
    max-height: 99999px;
}
body {
    position: relative;
    font-family: Tahoma, Arial,"Heiti TC","微軟正黑體","Microsoft JhengHei",sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    overflow: hidden;
    /* background-color: #000; */
}
body.popup-active,
body.popup-active .wrapper,
body.popup-active .container,
.wrapper.menu-active,
.wrapper.menu-active .container {
    overflow: hidden;
}
img {display: block;}
.a-img-center img,
.a-img img,
a img {width: 100%;}
*.hide {
    display: none;
}
.img-a,
.a-img,
.pos-a/* 針對其他容器 */ {
    position: absolute;
    top: 0;
}
.img-a-center,
.a-img-center,
.pos-a-center /* 針對其他容器 */ {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
}
.w-100 {
    width: 100%;
}
/* 鬼之遮罩 */
#rcLeft,
#tcLeft,
#acLeft {
    position: absolute;
    height: 100%;
    width: 9%;
    top: 0;
    left: 0;
}
#rcRight,
#tcRight,
#acRight {
    position: absolute;
    height: 100%;
    width: 9%;
    top: 0;
    right: 0;
}
.loading-page {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
    background-image: url('../images/loading-1.gif');
    background-position: center center;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    z-index: 9999;
}
.loading-page-score {
    position: fixed;
    display: flex; /* flexbox - 上下左右置中 */
    justify-content: center; /* flexbox - 上下左右置中 */
    align-items: center; /* flexbox - 上下左右置中 */
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    height: 100%;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.86);
    top: 0;
    right: 0;
    left: 0;
    z-index: 9000;
}
.loading-page-score.hide {
    display: none;
}
.cal-img {
    width: 79.21875%;
}
.wrapper {
    position: relative;
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    margin: auto;
    overflow: hidden;
}
.container,
.nav-container,
.popup-container {
    width: 100%;
    height: 100%;
}
.nav-container,
.popup-container {
    overflow: hidden;
}
input[type="text"],
input[type="tel"] {
    border: 0;
    vertical-align: middle;
    white-space: normal;
    background: none;
    line-height: 1;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
input:focus {outline: 0;}
.input-sty {
    position: absolute;
    width: 42%;
    height: 6.5vw;
    max-height: 40px;
    top: 0;
    font-size: 0.7em;
    left: 37%;
    color: #f7eab5;
}
.input-sty::placeholder,
.input-sty::-webkit-input-placeholder, /* Chrome/Opera/Safari */
.input-sty::-moz-placeholder, /* Firefox 19+ */
.input-sty:-ms-input-placeholder, /* IE 10+ */
.input-sty:-moz-placeholder { /* Firefox 18- */
  color: #f7eab5;
  /* opacity: 1; */
}
.preloader{
position:absolute;
z-index:-1;
left:0;
top:0;
width:1px;
height:0px;
overflow:hidden;}
/* loading-icon */
.loading-icon {
    display: block;
    position: absolute;
    height: 32px;
    width: 32px;
    top: 0;
    margin: 0 auto;
    border-radius: 50%;
    border: 3px solid #ce831d;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    -webkit-animation: load-c 1s infinite linear forwards;
            animation: load-c 1s infinite linear forwards;
}
.loading-icon.hide {
    display: none;
}
@-webkit-keyframes load-c {
  from {
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
            transform: rotate(360deg);

  }
}
@keyframes load-c {
  from {
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.tw-smoke-1 {
    -webkit-animation: 1s ease infinite both btn-scale-in;
            animation: 1s ease infinite both btn-scale-in;
}
.tw-smoke-2 {
    -webkit-animation: 1s ease 0.2s infinite both btn-scale-in;
            animation: 1s ease 0.2s infinite both btn-scale-in;
}
.tw-smoke-3 {
    -webkit-animation: 1s ease 0.5s infinite both btn-scale-in;
            animation: 1s ease 0.5s infinite both btn-scale-in;
}
@-webkit-keyframes btn-scale-in {
  0%,100% {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
  }
  20% {
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
  }
  30% {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);
  }
  50% {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
  }
  60% {
    -webkit-transform: scale(1.02);
        -ms-transform: scale(1.02);
            transform: scale(1.02);
  }
  70% {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes btn-scale-in {
  0%,100% {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
  }
  20% {
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
  }
  30% {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);
  }
  50% {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
  }
  60% {
    -webkit-transform: scale(1.02);
        -ms-transform: scale(1.02);
            transform: scale(1.02);
  }
  70% {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
  }
}

/* element(共用) */
.logo {
    width: 15%;
    left: 4.6875%;
    margin-top: 4.375%;
    z-index: 400;
}
.btn-close-bg {
    position: absolute;
    width: 11%;
    top: 0;
    right: 4%;
    margin-top: 3.6%;
    z-index: 99;
}
.btn-close {
    display: block;
    position: absolute;
    width: 15%;
    padding-top: 12%;
    top: 0;
    right: 2%;
    margin-top: 2.5%;
    z-index: 100;
}
.bg-board {
    background: url('../images/bg-mid.png') 0 0 repeat-y;
    background-size: 100% auto;
}
/* menu */
.btn-menu-bg {
    position: absolute;
    width: 9.53125%;
    top: 0;
    right: 4.6875%;
    margin-top: 4.375%;
    z-index: 99;
}
.btn-menu {
    display: block;
    position: absolute;
    /* outline: 1px solid #f00; */
    width: 15%;
    padding-top: 12%;
    top: 0;
    right: 2%;
    margin-top: 2.45%;
    z-index: 100;
}

/* nav-container */
.mask-container {
    display: none;
    z-index: 450;
}
.nav-container {
    display: none;
    z-index: 500;
}
.menu-active .mask-container {
    position: fixed;
    display: block;
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    height: 100%;
    margin: auto;
    top: 0;
    right: 0;
    left: 0;
}
.menu-active .nav-container {
    position: fixed;
    display: block;
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    height: 100%;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.86);
    top: 0;
    right: 0;
    left: 0;
}
.wrapper.menu-active {
    overflow: hidden;
}
.nav {
    position: relative;
    width: 100%;
    height: 100%;
    /* padding-top: 10%; */
}
.nav-inner-1 {
    position: relative;
    width: 80%;
    /* 如果沒有上下置中，把下列屬性拿掉即可 */
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
.nav-inner-2 {
    position: relative;
    width: 80%;
    margin: auto;
}
.bg-nav {
    position: relative;
    width: 80%;
    margin: auto;
}
.bg-nav-2 {
    position: relative;
    width: 80%;
    margin: auto;
}
.nav-inner-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
#navMr {
    position: absolute;
    width: 24%;
    height: 100%;
    top: 0;
    right: 0;
}
#navMl {
    position: absolute;
    width: 24%;
    height: 100%;
    top: 0;
    left: 0;
}
.btn-nav {
    position: absolute;
    width: 80%;
    padding-top: 26%;
    top: 0;
}
.btn-nav-2 {
    position: absolute;
    width: 80%;
    padding-top: 32%;
    top: 0;
}
.btn-nav-index {
    margin-top: 0;
    /* outline: 1px solid #e74c3c; */
}
.btn-nav-plan {
    margin-top: 32%;
    /* outline: 1px solid #e67e22; */
}
.btn-nav-terms {
    margin-top: 63%;
    /* outline: 1px solid #f1c40f; */
}
.btn-nav-rank {
    margin-top: 95%;
    /* outline: 1px solid #2ecc71; */
}
.btn-nav-award {
    margin-top: 126%;
    /* outline: 1px solid #3498db; */
}
.btn-nav-fb {
    margin-top: 159%;
    /* outline: 1px solid #9b59b6; */
}

/* index-container */
.smoke-1 {
    opacity: 0;
    width: 6.40625%;
    left: 46%;
    margin-top: 139.5%;
}
.smoke-2 {
    opacity: 0;
    width: 8.90625%;
    left: 54%;
    margin-top: 133.5%;
}
.smoke-3 {
    opacity: 0;
}
.btn-start {
    opacity: 0;
    display: block;
    width: 36.71875%;
    left: 50%;
    margin-top: 112.5%;
}

/* form-container */
.form-score {
    width: 56%;
    margin-top: 25%;
    text-align: right;
    font-size: 2.1em;
    font-weight: bold;
    color: #a81e1b;
    /* outline: 1px solid #ff0; */
}
.form-award-img {
    width: 76.5625%;
    margin-top: 60.8125%;
}
.form-pos-1 {
    margin-top: 73%;
}
.form-pos-2 {
    margin-top: 85%;
}
.form-pos-3 {
    margin-top: 97.5%;
}
.label-chk {
    position: absolute;
    width: 7.34375%;
    top: 0;
    left: 25%;
    margin-top: 110.5%;
    /* outline: 1px solid #ff0; */
    overflow: hidden;
}
.btn-check-img {
    position: relative;
    width: 200%;
    left: -100%;
}
.checked .btn-check-img {
    left: 0;
}
.btn-chk-agree {
    position: absolute;
    top: 0;
    margin-top: 110.5%;
    opacity: 0;
    left: -100%;
    height: 1px;
    width: 1px;
}
.btn-submit {
    width: 30%;
    margin-top: 122%;
}
.btn-form-terms {
    width: 16%;
    left: 51%;
    margin-top: 108.5%;
    padding-top: 7%;
    /* outline: 1px solid #f00; */
}

/* lose-container */
.lose-result-score {
    width: 59%;
    margin-top: 33.8125%;
    text-align: right;
    font-size: 2.5em;
    font-weight: bold;
    color: #a81e1b;
}
.btn-fbshare-l {
    width: 43.75%;
    left: 5%;
    margin-top: 70%;   
}
.btn-resume-l {
    width: 44.375%;
    left: 5%;
    margin-top: 87.65%;
}
.btn-plan-l {
    width: 43.75%;
    left: 5%;
    margin-top: 106.65%;
}
.btn-rank-l {
    width: 44.375%;
    left: 5%;
    margin-top: 122.715%;
}

/* success-container */
.btn-fbshare-s {
    width: 43.75%;
    left: 50%;
    margin-top: 70%;
}
.btn-resume-s {
    width: 44.375%;
    left: 50%;
    margin-top: 87.65%;
}
.btn-plan-s {
    width: 43.75%;
    left: 50%;
    margin-top: 106.65%;
}
.btn-rank-s {
    width: 44.375%;
    left: 50%;
    margin-top: 122.715%;
}

/* popup-container：terms、rank、award */
.popup-container {
    position: fixed;
    display: block;
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    height: 100%;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.86);
    top: 0;
    right: 0;
    left: 0;
    z-index: 500;
}
.popup-container.hide {display: none;}
/* rank-container */
.head-rank {
    width: 50.9375%;
    left: 12%;
    margin-top: 10%;
}
.btn-again-rank {
    position: absolute;
    width: 20%;
    right: 1%;
    bottom: 1%;
}
.rank-board {
    position: absolute;
    left: 7%;
    top: -5.5%;
    width: 86%;
    height: 108%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#rankLoading {
    position: absolute;
}
.rank-list {
    width: 100%;
    padding-top: 3.3%;
    padding-bottom: 0.7%;
    overflow: hidden;
    display: flex;
    align-items: center;
    text-align: center;
}
.rank-list.list-1 .rank-number::after {
    content: '';
    position: absolute;
    display: block;
    width: 35%;
    padding-top: 30%;
    top: -68%;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    background: url('../images/rank-top1.png') 0 0 no-repeat;
    background-size: 100% 100%;
}
.rank-list.list-2 .rank-number::after {
    content: '';
    position: absolute;
    display: block;
    width: 35%;
    padding-top: 30%;
    top: -68%;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    background: url('../images/rank-top2.png') 0 0 no-repeat;
    background-size: 100% 100%;
}
.rank-list.list-3 .rank-number::after {
    content: '';
    position: absolute;
    display: block;
    width: 35%;
    padding-top: 30%;
    top: -68%;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    background: url('../images/rank-top3.png') 0 0 no-repeat;
    background-size: 100% 100%;
}
.is-user {
    width: 100%;
    padding-top: 2.4%;
    padding-bottom: 3%;
    overflow: hidden;
    display: flex;
    align-items: center;
    text-align: center;
    background: url('../images/rank-brown.png') 0 0 no-repeat;
    background-size: 100% 100%;
}
.rank-number {
    position: relative;
    width: 20%;
    float: left;
    font-size: 1em;
    color: #f2e7b6;
}
.rank-player-photo {
    float: left;
    width: 15%;
}
.rank-player-photo img {
    width: 100%;
    border: 1px solid #000;
}
.rank-name {
    float: left;
    width: 40%;
    white-space: nowrap;
    font-size: 0.7em;
}
.rank-score {
    float: left;
    width: 25%;
    font-size: 1em;
    color: #f2e7b6;
}
.rank-times {
    min-width: 80%;
    display: inline-block;
    padding: 4% 6% 6%;
    background: url('../images/rank-block.png') 0 0 no-repeat;
    background-size: 100% 100%;
}

.bg-rank-board {
    padding: 0 10%;
}
.bg-rank-board {
    position: relative;
    flex: 1 0 auto; /* flexbox - 填滿剩餘空間 */
    display: flex; /* flexbox - 上下左右置中 */
    justify-content: center; /* flexbox - 上下左右置中 */
    align-items: center; /* flexbox - 上下左右置中 */
    padding: 0 10%;
    color: #fff;
    font-size: 1.2em;
}
.flex-rank-area { /* flexbox - 下列屬性缺一不可 */
    position: absolute;
    display: flex;
    width: 100%;
    height: 96%;
    margin-top: 4%;
    flex-direction: column;
}

/* terms-container */
.head-terms {
    width: 40.78125%;
    left: 18%;
    margin-top: 10%;
}
.bg-terms-board {
    position: relative;
    flex: 1 0 auto; /* flexbox - 填滿剩餘空間 */
    display: flex; /* flexbox - 上下左右置中 */
    justify-content: center; /* flexbox - 上下左右置中 */
    align-items: center; /* flexbox - 上下左右置中 */
    padding: 0 10%;
    color: #fff;
    font-size: 1.2em;
}
.flex-terms-area { /* flexbox - 下列屬性缺一不可 */
    position: absolute;
    display: flex;
    width: 100%;
    height: 96%;
    margin-top: 4%;
    flex-direction: column;
}
.inner-terms-board {
    /* position: relative; */
    position: absolute;
    left: 10%;
    top: 0;
    width: 80%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    /* background-color: #fff; */
    -webkit-overflow-scrolling: touch;
}
.bg-terms-board img {
    width: 100%;
}

/* award-container */
.head-award {
    width: 40.625%;
    left: 18%;
    margin-top: 10%;
}
.bg-award-board {
    position: relative;
    flex: 1 0 auto; /* flexbox - 填滿剩餘空間 */
    display: flex; /* flexbox - 上下左右置中 */
    justify-content: center; /* flexbox - 上下左右置中 */
    align-items: center; /* flexbox - 上下左右置中 */
    padding: 0 10%;
    color: #fff;
    font-size: 1.2em;
}
.inner-award-board {
    /* position: relative; */
    position: absolute;
    left: 6%;
    top: -4%;
    width: 87%;
    height: 107.5%;
    overflow-y: scroll;
    overflow-x: hidden;
    /* background-color: #fff; */
    -webkit-overflow-scrolling: touch;
}
.award-list li {
    position: relative;
    padding: 10px 5%;
    font-size: 1.1em;
    overflow: hidden;
    text-align: right;
}
.award-name {
    position: absolute;
    display: inline-block;
    top: 10px;
    left: 6%;
}
.flex-award-area { /* flexbox - 下列屬性缺一不可 */
    position: absolute;
    display: flex;
    width: 100%;
    height: 96%;
    margin-top: 4%;
    flex-direction: column;
}

@media screen and (min-width: 641px) {
    .wrapper {
        width: 52.459vh; /* 640/1220 */
        height: auto;
    }
    .popup-container,
    .menu-active .nav-container {
        width: 52.459vh; /* 640/1220 */
        height: 100%;
    }
    .input-sty {

    }
    .form-pos-1 {
        margin-top: 71%;
    }
    .form-pos-2 {
        margin-top: 83%;
    }
    .form-pos-3 {
        margin-top: 95.5%;
    }
}
@media screen and (max-width: 640px) {
    .wrapper {
        
    }
    .input-sty {

    }
}