* {
    font-family: "Open Sans", sans-serif, "Microsoft JhengHei";
}
html {
    padding: 0;
    margin: 0;
    height: 100%;
}
body {
    padding: 0;
    margin: 0;
    height: 100%;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGElEQVQYV2P8/v37fwYkwEhY4OvXryhaAG8CD4+u7wChAAAAAElFTkSuQmCC');
}
img {
    max-width: 100%;
}
a {
    color: #249ceb;
    /*font-weight: bold;*/
    text-decoration: none;
}
.wrap {
    position: relative;
    width: 100%;
    min-height: 100%;
    min-width: 320px;
    max-width: 760px;
    margin: 0 auto;
    background: #FEF5CE; 
    background-size: auto;
    box-shadow: 0 0 1em rgba(0,0,0,0.2);
    color: #666666;
}
.container {
    margin: 0 16.5px;
    line-height: 1.5em;
}
#price_info {
    position: relative;
}
#price_info > a#fb_post {
    position: absolute;
    left: 22%;
    right: 22%;
    height: 5%;
    top: 8%;
}
#qr-code-wrapper {
    position: relative;
}
#qr-code-bg {
    position: relative;
}
.wrap.prod #qr-code-bg {
    background-color: #F6F5F3;
}
.wrap.prod-comp #qr-code-bg {
    background-color: #F6F5F3;
}
#qr-code {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}
#qr-code > img {
    margin-top: 12%;
    max-width: 70%;
}

#qr-code .font-code{
    display: block;
    max-width: 60%;
    margin: -4px auto 0;
    padding: 0 0 13px;
}
.click-to-expand[data-expand] {
    cursor: pointer;
}
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
}
div.click-to-expand, div.steps-title {
    position: relative;
}
div.click-to-expand img.arrow {
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 30%;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}
div.click-to-expand.expanded img.arrow {
    transform: rotate(180deg);
}

.fullscreen-overlay {
    height: 0;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    background-color: #ffefda;
    overflow-x: hidden;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.fullscreen-overlay a.closebtn {
    text-decoration: none;
    position: absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    background: url(../img/close_btn.png) no-repeat center;
}
.fullscreen-overlay .fullscreen-overlay-content {
    padding: 120px 40px 40px 40px;
}
@media screen and (max-width: 400px) {
    .fullscreen-overlay a.closebtn {
        width: 40px;
        height: 40px;
    }
    .fullscreen-overlay .fullscreen-overlay-content {
        padding: 80px 20px 20px 20px;
    }
}
body.fullscreen-overlay-shown {
    overflow: hidden;
    height: auto !important;
    
}

.voting-group:last-of-type {
    border-bottom: 1px solid #e4caa8;
}
.voting-group .voting-group-header {
    position: relative;
    border-top: 1px solid #e4caa8;
}
.voting-group .voting-group-header img.arrow {
    position: absolute;
    right: 18%;
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 15%;
}
.voting-group .voting-group-header[aria-expanded="true"] {
    background-color: #fde6c7;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}
.voting-group .voting-group-header[aria-expanded="false"] {
    background-color: #ffefda;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}
.voting-group .voting-group-content {
    background-color: #fde6c7;
}
.voting-group .voting-group-header[aria-expanded="true"] img.arrow {
    transform: rotate(180deg);
    -webkit-transition: 0.2s;
    transition: 0.2s;
}
.voting-group .voting-group-header[aria-expanded="false"] img.arrow {
    transform: rotate(0deg);
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.voting-post.selected .product-image {
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.voting-post.selected-1 .product-image {
    background-image: url('../img/voting/select/select_01.png');
}
.voting-post.selected-2 .product-image {
    background-image: url('../img/voting/select/select_02.png');
}
.voting-post.selected-3 .product-image {
    background-image: url('../img/voting/select/select_03.png');
}
.voting-post.selected-4 .product-image {
    background-image: url('../img/voting/select/select_04.png');
}
.voting-post.selected-5 .product-image {
    background-image: url('../img/voting/select/select_05.png');
}
.voting-post.selected-6 .product-image {
    background-image: url('../img/voting/select/select_06.png');
}
.voting-post.selected-7 .product-image {
    background-image: url('../img/voting/select/select_07.png');
}
.voting-post.selected-8 .product-image {
    background-image: url('../img/voting/select/select_08.png');
}
.voting-post.selected-9 .product-image {
    background-image: url('../img/voting/select/select_09.png');
}
.voting-post.selected-10 .product-image {
    background-image: url('../img/voting/select/select_10.png');
}
.voting-post .product-image {
    padding-top: 100%;
    position: relative;
    background-color: #fff;
}
.voting-post .product-image > img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.voting-post .product-desc {
    font-size: 0.7em;
}
.voting-post .product-desc pre  {
    overflow-x: auto;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    color: #666666;
    margin: 0.5rem 0;
}
.bg-2 {
    background-color: #fde6c7;
}
#vote-form .form-control {
    border-radius: 0;
    border-color: #fff;
}
#vote-form .input-group-text {
    border-radius: 0;
    border: none;
}
#vote-form .custom-checkbox {
    padding-left: 2rem;
    overflow: visible;
}
#vote-form .custom-checkbox .custom-control-label::before,
#vote-form .custom-checkbox .custom-control-label::after{
    width: 1.5rem;
    height: 1.5rem;
    left: -2rem;
}
#vote-form .custom-checkbox .custom-control-label::before {
    border-radius: 0;
    border-color: #fff;
}
#vote-form .custom-control-input:checked~.custom-control-label::before {
    border-color: #fff;
    background-color: #fff;
    color: #666666;
}
#vote-form .custom-control-input:checked~.custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23666666' d='M6.564.75l-3.59 3.612-1.538-1.55L0 3.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}
#vote-form .custom-control-input:focus~.custom-control-label::before {
/*    -webkit-box-shadow: none;
    box-shadow: none;*/
}

.hidden { display: none !important; }
.inline-block { display: inline-block; } /* kc 20181115 added inline block */
.w-6p { width: 6%; }
.w-10p { width: 10%; }
.w-40p { width: 40%; }
.h-0 { height: 0px; }
.h-1 { height: 1px; }
.p-20 { padding: 2.0em; }
.pt-20 { padding-top: 2.0em!important; }
.pb-20 { padding-bottom: 2.0em!important; }
.pl-20 { padding-left: 2.0em!important;}
.pr-20 { padding-right: 2.0em!important; }
.p-10 { padding: 1.0em; }
.pt-10 { padding-top: 1.0em!important; }
.pb-10 { padding-bottom: 1.0em!important; }
.pl-10 { padding-left: 1.0em!important;}
.pr-10 { padding-right: 1.0em!important; }
.p-6 { padding: .6em; }
.pt-6 { padding-top: .6em!important; }
.pb-6 { padding-bottom: .6em!important; }
.pl-6 { padding-left: .6em!important;}
.pr-6 { padding-right: .6em!important; }
.p-0 { padding: 0em; }
.pt-0 { padding-top: 0em!important; }
.pb-0 { padding-bottom: 0em!important; }
.pl-0 { padding-left: 0em!important;}
.pr-0 { padding-right: 0em!important; }
.m-20 { margin: 2.0em; }
.mt-20 { margin-top: 2.0em!important; }
.mb-20 { margin-bottom: 2.0em!important; }
.ml-20 { margin-left: 2.0em!important;}
.mr-20 { margin-right: 2.0em!important; }
.m-10 { margin: 1.0em; }
.mt-10 { margin-top: 1.0em!important; }
.mb-10 { margin-bottom: 1.0em!important; }
.ml-10 { margin-left: 1.0em!important;}
.mr-10 { margin-right: 1.0em!important; }
.m-6 { margin: .6em; }
.mt-6 { margin-top: .6em!important; }
.mb-6 { margin-bottom: .6em!important; }
.ml-6 { margin-left: .6em!important;}
.mr-6 { margin-right: .6em!important; }
.m-0 { margin: 0em; }
.mt-0 { margin-top: 0em!important; }
.mb-0 { margin-bottom: 0em!important; }
.ml-0 { margin-left: 0em!important;}
.mr-0 { margin-right: 0em!important; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.align-top { vertical-align: top; }
.align-middle { vertical-align: middle; }
.align-bottom { vertical-align: bottom; }

form .btn,
div.btn {
    display: block;
    background-color: #534f9c; /* kc 20190225 */
    text-align: center;
    padding: .6em 0;
    color: #fff;
    text-decoration: none;
    border: 0;
    outline: 0;
    cursor: pointer;
    font-size: 1em;
    font-weight: normal;
    margin: 0px auto;
    border-radius: 0;
}
form .btn {
    width: 100%;
}
div.btn.btn-2 {
    background-color: #e67058;
    color: #fff;
}
div.bottom-btn-wrapper {
    padding: 16px 10px;
}
form .btn:hover {
    color: #fff;
    background-color: #534f9c; /* kc 20190225 */
}.btn.grey {
    background-color: #505050;
}.btn.grey:hover {
    background-color: #505050;
}.btn.red {
    color: #fff;
    background-color: #534f9c;
}.btn.red:hover {
    color: #fff;
    background-color: #534f9c;
}.btn.disabled {
    cursor: default;
}
.swal2-confirm.btn {
    background-color: #534f9c;
    border-radius: 0;
    border-color: #534f9c;
}

.bg-red-gradient {
    background: #df0000 url('../img/shadow1.png') repeat top center;
    background-size: 100%;
    color: #fff;
}.bg-light-gradient {
    background: #e8e5e0;
    background-size: 100%;
    color: #333;
}.bg-red {
    background-color: #df0000;
    color: #fff;
}.bg-white {
    background-color: #fff;
    color: #333;
}.bg-purple {
    background-color: #f1e426;
    color: #000000;
}.bg-purple-m {
    background-color: #f1e426;
    color: #000000;
}.bg-crimson {
    background-color: #ec0f64;
    color: #fff;
}.bg-grey {
    background-color: #f7f7f7;
}.bg-step-1 {
    background-image: url('../img/step1.png');
    background-repeat: no-repeat;
    background-size: auto 130px;
    background-position: left -2px;
    border: 2px solid #e66388; /* kc 20190225 */
    min-height: 130px;
}.bg-step-2 {
    background-image: url('../img/step2.png');
    background-repeat: no-repeat;
    background-size: auto 130px;
    background-position: left -2px;
    border: 2px solid #e66388; /* kc 20190225 */
    min-height: 130px;
}.bg-prom-period {
    background-color: #C5B9AB;
    color: #000000; /*andrew 20200130*/
}.bg-prom-period.redeem span{
    font-size: 25px;
    max-width: 250px;
    display: block;
    margin: 0 auto;
    line-height: 27px;
}

#header-desc {
    font-size: 2rem;
}
@media screen and (max-width: 400px) {
    #header-desc {
        font-size: 1.5rem;
    }
}

.font-blue {
    color: #249ceb;
}
.font-highlight, .font-highlight:hover {
    color: #e67058;
}
.font-highlight-2, .font-highlight-2:hover {
    color: #534f9c;
    font-weight: bold;
}
.font-large {
    font-size: 1.1rem;
}
.font-code{
    font-size: 1.75rem;
    font-family: "Arial";
    color: #000;
}
.font-code{ pointer-events: none; }
.font-code > a { text-decoration:none; color:inherit; }

@media only screen and (max-width: 400px) {
    .font-code, #shop-name, #vip-id {
        font-size: 1rem;
    }
}

.stamp-date {
    color: #e67058;
}

.form {
    overflow: hidden;
    position: relative;
}.form.input select
,.form.input input {
    padding: .5rem .75rem;
    font-size: 1rem;
    line-height: 1.25;
    color: #464a4c;
    background-color: #fff;
    background-image: none;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    vertical-align: middle;
    max-width: 150px;
}.form.input select {
    height: calc(2.25rem + 2px);
}.form.checkbox input {
    float: left;
    -ms-transform: scale(1.5); /* IE */
    -moz-transform: scale(1.5); /* FF */
    -webkit-transform: scale(1.5); /* Safari and Chrome */
    -o-transform: scale(1.5); /* Opera */
    transform: scale(1.5);
    margin-top: 5px;
}.form.checkbox .line {
    margin-left: 30px;
}.form.error {
    color: #df0000;
}.form .error {
    border-color: #df0000!important;
}
.form.input input[type=number]::-webkit-inner-spin-button, 
.form.input input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0; 
}

.form.input input#mobile{
    max-width: 170px;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    right:  0;
    left: 0;
    background-color: rgba(255,255,255,0.5);
}
.windows8 {
    width: 78px;
    height: 78px;
    margin: auto;
    top: 0;
    bottom: 0;
    position: absolute;
    left: 50%;
    margin-left: -39px;
}

.windows8 .wBall {
    position: absolute;
    width: 74px;
    height: 74px;
    opacity: 0;
    transform: rotate(225deg);
    -o-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    animation: orbit 6.96s infinite;
    -o-animation: orbit 6.96s infinite;
    -ms-animation: orbit 6.96s infinite;
    -webkit-animation: orbit 6.96s infinite;
    -moz-animation: orbit 6.96s infinite;
}

.windows8 .wBall .wInnerBall{
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgb(0,0,0);
    left:0px;
    top:0px;
    border-radius: 10px;
}

.windows8 #wBall_1 {
    animation-delay: 1.52s;
    -o-animation-delay: 1.52s;
    -ms-animation-delay: 1.52s;
    -webkit-animation-delay: 1.52s;
    -moz-animation-delay: 1.52s;
}

.windows8 #wBall_2 {
    animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    -ms-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
}

.windows8 #wBall_3 {
    animation-delay: 0.61s;
    -o-animation-delay: 0.61s;
    -ms-animation-delay: 0.61s;
    -webkit-animation-delay: 0.61s;
    -moz-animation-delay: 0.61s;
}

.windows8 #wBall_4 {
    animation-delay: 0.91s;
    -o-animation-delay: 0.91s;
    -ms-animation-delay: 0.91s;
    -webkit-animation-delay: 0.91s;
    -moz-animation-delay: 0.91s;
}

.windows8 #wBall_5 {
    animation-delay: 1.22s;
    -o-animation-delay: 1.22s;
    -ms-animation-delay: 1.22s;
    -webkit-animation-delay: 1.22s;
    -moz-animation-delay: 1.22s;
}
/*Redeem Start*/
#fb_name{
    width: 100%;
    max-width: 200px;
}

#fb-search{
    padding: 5px 18px;
    border-radius: 0.2em;
    margin-left: 10px;
}

#fb-result {
    font-size: 26px;
    background: #AAFE23;
    padding: 0.5em;
    padding-left: 0.7em;
}

#fb-result.incorrect{
    background: #EF0700;
    color: #fff;
}

#fb-confirm-btn{
    background-color: #534f9c;
}

#fb-confirm-btn.disabled{
    background-color: #808080;
    cursor: default;
}

.redeem-page{
    max-width: 527px;
}

.theme-btn{
    background-color: #4D4B94;
    color: #ffffff;
    display: block;
    text-align: center;
    letter-spacing: 2px;
    font-weight: bold;
}

.redeem-share-btn.disabled{
    background-color: #A4A4A4;
    color: #d0d0d0;
    cursor: default;
}

.dialog-overlay{
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.dialog-overlay .overlay-bg{
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.dialog-overlay .overlay-dialog{
    background-color: #fff;
    width: 100%;
    position: fixed;
    text-align: center;
    z-index: 11;
}

.before-redeem{
    color: #F02586;
}

.before-redeem .highlight{
    font-weight: bold;
}

.dialog-overlay .overlay-dialog-btn{
    margin: 0 auto;
    border: none;
    cursor: pointer;
    border:2px solid #4D4B94;
    -webkit-appearance: none;
    border-radius: 0;
}

.dialog-overlay .dialog-header{
    color: #DD5F60;
    font-weight: bold;
}

.dialog-content{
    text-align: center;
}

.dialog-overlay .overlay-dialog-btn.triggered, .redeem-overlay .overlay-dialog-btn:active{
    border:2px solid #4D4B94;
    color: #4D4B94;
    background-color: #ffffff;
}

.btn-wrapper .overlay-dialog-btn{
    display: inline-block;
}

.prom-redeemed p{
    letter-spacing: 2.5px;
    color: #4D4B94;
    font-weight: bold;
}

.prom-redeemed {
    display: inline-block;
}

.prom-options {
    display: inline-block;
}

.loc-list{
    display: inline-block;
}

#steps .click-to-expand .icon, #steps .click-to-expand span, #steps .steps-title span{
    vertical-align: middle;
}

#steps ul{
    list-style: none;
    padding-bottom: 0;
    padding-top: 0.5em;
}

#steps li{
    border-bottom: 2px solid #fff;
}

#steps li p{
    max-width: calc(50% - 40px);
}

#steps li:last-child {
    border-bottom: none;
}

#steps li *{
    display: inline-block;
    vertical-align: middle;
}

#steps li .highlight{
    color: #41389B;
    display: inline;
    vertical-align: baseline;
}

#steps .img-wrapper{
    max-width: 45%;
    width: 100%;
    text-align: center;
}

#steps li span{
    display: inline;
    color: #525288;
}

#tnc .click-to-expand{
    font-size: 1rem;
}

#tnc li{
    font-size: 1em;
}

.qr-code-wrapper-bg{
    background-color: #fff;
    position: absolute !important;
    right: 0;
    z-index: 0 !important;
    box-shadow: 0px 0px 3px;
}

.qr-code-wrapper{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}

#qr-code *{
    position: relative;
    z-index: 1;
}


#info-wrapper{
    background-color: #e4d0b3;
}

#info-wrapper p{
    margin: 0;
    text-align: center;
    color: #9a8979;
}

#btnChgPromotion{
    background-color: #e57310;
    color: white;
}

#waiting-list-div {
    position: absolute;
    top: 30%;
    text-align: center;
    width: 100%;
 }

/* reddem new mock up */
.bg-prom-period{
    background-color: #00b8ac;
    color: #FFFFFF;
    padding: 1em;
}

.shop-info p{
    margin: 0;
    font-weight: bold;
}

.shop-info p:first-child{
    color: #FFFFFF;
}

.before-redeem{
    text-align: center;
}

.before-redeem p{
    margin: 0;
}

.mask-m .before-redeem, .mask-nm .before-redeem{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.loc-info{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.loc-info p{
    text-align: center;
}

.loc-info .header{
    font-weight: bolder;
}

.loc-info{
    color: #FFFFFF;
}

#steps {
    background-color: #fef5ce;
}

#steps .element-to-expand{
    background-color: #fffae4;
    margin: 0 -.6em;
}

#qr-code-bg{
    background-color: #17103A;
    padding-bottom: 5%;
}

.wrap.prod #qr-code{
    top: 20%;
}
.wrap.prod-comp #qr-code{
    top: 15%;
}

.wrap.prod .qr-code-wrapper-bg, .wrap.prod-comp .qr-code-wrapper-bg {
    background-color: unset;
}

.poster-wrapper{
    position: relative;
}

.poster-content{
    position: absolute;
    left: 0;
    right: 0;
}

.poster-content .enlarge{
    color: #534f9c;
    display:inline;
    vertical-align: baseline;
}

div.click-to-expand img.arrow {
    height: 20%;
}

#vip_id{
    max-width: 170px;
    width: 100%;
}

.qr-code-wrapper-bg{
    top: 23%;
    left: 22%;
    max-width: 56%;
    padding-top: 63%;
}

@media (min-width: 485px){
    .poster-content{
        top: 27%;
        padding: 20px;
    }

    .poster-content p{
        font-size: 1.76em;
    }
    
    .poster-content .enlarge{
        font-size: 1.6em;
    }
    
    #qr-code {
        top: 139px;
    }
    
    #qr-code .font-code{
        margin: -35px auto 0;
    }
    
    /* Start Redeem */
    #redeem-btn-wrapper{
        padding: 0 5px 5px;
    }

    .redeem-share-btn{
        padding: 10px;
        margin: 15px 5px;
    }

    .dialog-overlay .overlay-dialog{
        max-width: calc(100% - 90px);
        padding: 30px 20px;
        margin: 0 25px;
        top: calc(50% - 118.5px);
    }

    .dialog-overlay .overlay-dialog-btn{
        width: 90px;
        padding: 3px 0;
        font-size: 16px;
    }

    .dialog-content{
        margin-bottom: 40px;
        font-size: 17px;
    }

    .btn-wrapper .overlay-dialog-btn{
        margin: 0 10px;
    }

    .prom-redeemed p{
        margin: 40px 0;
        font-size: 23px;
    }

    .prom-options {
        margin: 10px 20px 10px 0px;
    }

/*    #steps .steps-title .icon{
        max-width: 20px;
    }*/

    #steps li{
        padding: 15px 0 10px;
        width: 91%;
        margin: 0 auto;
    }
    
    #steps li img{
        width: 50%;
    }
    
    #steps .img-wrapper.xs-handle img{
        width: 80%;
    }

    #steps li p{
        max-width: calc(55% - 40px);
        font-size: 1.1em;
    }
    
    #steps .steps-title span, #tnc .click-to-expand span{
        font-size: 1rem;
    }
    
    #steps .steps-title, #tnc .click-to-expand {
        padding-top: 1.2em!important;
        padding-bottom: 1.2em!important;
    }

/* End Redeem*/

/*  Start enroll mask waitting list */
    #waiting-list-div {
       font-size:28px;
    }
/*  End enroll mask waitting list */

    .shop-info{
        margin-top: 1px;
    }

    .shop-info p{
        font-size: 1.7em;
    }

    .before-redeem{
        margin-top: 8px;
    }

    .before-redeem .enlarge{
        font-size: 1.55em;
    }

    .before-redeem .highlight{
        font-size: 1.9rem;
    }

    .loc-info{
        margin-bottom: 15px;
    }
    
    .wrap.prod-comp .loc-info{
         margin-bottom: 15px;
    }
    
    .loc-info p{
        margin: 0;
        margin-bottom: 8px;
    }
    
    .loc-info .header{
        font-size: 1.34rem;
    }
    
    .mask-nm .loc-info .content{
        font-size: 1rem;
        margin-top: 1em;
        margin-bottom: 20px;
    }

    .overlay-dialog p{
        font-size: 20px;
    }
    
    .dialog-overlay .overlay-dialog{
        max-width: 350px;
        height: 150px;
        left: calc(50% - 220px);
        top: calc(50% - 105px);
    }
    
    .overlay-dialog p{
        margin: 17px 0;
    }
    
    .overlay-dialog .dialog-header{
        margin-top: 10px;
    }
   
    #dialog-btn-wrapper{
        margin-top: 34px;
    }
    
    .wrap.prod .bg-prom-period.redeem span, .wrap.prod-comp .bg-prom-period.redeem span {
        max-width: 285px;
    }
    
    .wrap.prod .img-wrapper.xs-handle img, .wrap.prod-comp .img-wrapper.xs-handle img{
        width: 100% !important;
    }
}

@media(max-width: 670px) and (min-width: 535px){
    .poster-content p{
        font-size: 1.45em;
    }
}

@media(max-width: 534px) and (min-width: 485px){
    .poster-content p{
        font-size: 1.35em;
    }
    
    .loc-info {
        margin-bottom: 2.5%;
    }
}

@media (max-width: 485px) and (min-width: 320px){
    .poster-content{
        top: 27%;
        padding: 20px;
    }

    .poster-content p{
        font-size: 1em;
    }
    
    .poster-content .enlarge{
        font-size: 1.6em;
    }
    
    .dialog-overlay .overlay-dialog{
        max-width: 300px;
        left: calc(50% - 195px);
    }
    
    .overlay-dialog .dialog-header {
        font-size: 18px;
        margin-top: 10px;
    }
    
    .bg-prom-period.redeem span{
        font-size: 22px;
        line-height: 22px;
    }
    
    .before-redeem{
        top: 2% !important;
    }
    
    .before-redeem .highlight{
        font-size: 1.35em;
    }
    
    .before-redeem .enlarge{
        font-size: 1.5em;
    }
    
    .shop-info{
        margin-top: 16px;
    }
    
    .shop-info p {
        font-size: 19px;
        line-height: 23px;
    }
    
    #qr-code{
        top: 18%;
    }
    
    #qr-code > img{
        margin-top: 14%;
    }

    #qr-code .font-code{
        font-size: 1.4em;
        margin-top: -31px;
    }
    
    .loc-info{
        bottom: 10px;
    }
    
    .loc-info .header{
        font-size: 1.05em;
    }
    
    .loc-info .content{
        font-size: 0.9em;
        /*margin-bottom: 23px;*/
        margin-bottom: 15px;
    }
    
    #steps .icon{
        max-width: 20px;
    }
    
    #steps .img-wrapper img{
        width: 55%;
    }
    
    #steps .img-wrapper.xs-handle img{
        width: 100%;
    }
    
    #steps li p {
        max-width: calc(50% - 40px);
        font-size: 1em;
    }
    
    #steps .img-wrapper {
        max-width: calc(50% - 20px);
        padding: 10px;
    }
    
    #tnc li{
        font-size: 0.9em;
    }
}

@media (max-width: 375px){
    .poster-content p {
        font-size: 0.9em;
    }
    
    .bg-prom-period{
        padding: 0.8em;
    }
    
    .bg-prom-period.redeem span {
        font-size: 20px;
        line-height: 20px;
    }

    .before-redeem{
        top: 2% !important;
    }
    
    .before-redeem .highlight{
        font-size: 1.23em;
    }
    
    .before-redeem .enlarge{
        font-size: 1.5em;
    }
    
    .shop-info{
        margin-top: 13px;
    }
    
    .shop-info p {
        font-size: 18px;
    }
    
    #qr-code .font-code{
        font-size: 1.2em;
        margin-top: -20px;
    }
   
    .loc-info p{
        margin: 0 0 9px 0;
    }
    
    .loc-info .content{
        font-size: 0.7em
    }
    
    #steps .icon{
        max-width: 20px;
    }
    
    #steps .img-wrapper.xs-handle img{
        width: 80%;
    }
    
    #steps .img-wrapper {
        max-width: calc(45% - 20px);
        padding: 10px;
    }
    
    #steps li p{
        max-width: calc(60% - 40px);
    }
    
    #steps .steps-title span, #tnc .click-to-expand span{
        font-size: 0.9em;
    }
    
    #steps .steps-title, #tnc .click-to-expand{
        padding: 0.8em !important;
    }
    
    #tnc li{
        font-size: 0.9em;
    }
}

@media (max-width: 320px){
    .poster-content{
        top: 27%;
        padding: 20px;
    }
    
    .poster-content p {
        font-size: 0.7em;
    }
    
    .btn-wrapper .overlay-dialog-btn{
        margin: 0 8px;
    }
    
    .dialog-overlay .overlay-dialog{
        max-width: 250px;
        left: calc(50% - 170px);
        overflow-wrap: break-word;
        height: 115px;
        top: calc(50% - 87.5px);
    } 
    
    .overlay-dialog p {
        margin: 13px 0;
    }
    
    .overlay-dialog .dialog-header {
        margin-top: 5px;
    }
    
    #mobile{
        max-width: 140px;
    }
    
    #dialog-btn-wrapper{ 
        margin-top: 20px;
    }
    
    .before-redeem .highlight{
        font-size: 1em;
    }
    
    .before-redeem .enlarge{
        font-size: 1.5em;
    }
    
    .shop-info{
        margin-top: 13px;
    }
    
    .shop-info p {
        font-size: 14px;
    }
/* 
    #qr-code {
         top: 19%; 
    }
*/
    #qr-code .font-code{
        font-size: 1.1em;
    }
    
    .loc-info{
        bottom: 0px;
    }
    
    .loc-info p{
        margin: 0;
        margin-bottom: 10px;
    }
    
    .loc-info .header{
        font-size: 0.8em;
    }
    
    .loc-info .content{
        font-size: 0.6em
    }
    
    #steps .icon{
        max-width: 20px;
    }
    
    #steps li p {
        font-size: 0.9em;
    }
    
    #steps .img-wrapper img{
        width: 55%;
    }
    
    #steps .img-wrapper.xs-handle img{
        width: 100%;
    }
    
    #steps .steps-title span, #tnc .click-to-expand span{
        font-size: 0.9em;
    }
    
    #steps .steps-title, #tnc .click-to-expand{
        padding: 0.8em !important;
    }
    
    #tnc li{
        font-size: 0.9em;
    }
}

@keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        transform: rotate(180deg);
        animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        transform: rotate(300deg);
        animation-timing-function: linear;
        origin:0%;
    }

    30% {
        opacity: 1;
        transform:rotate(410deg);
        animation-timing-function: ease-in-out;
        origin:7%;
    }

    39% {
        opacity: 1;
        transform: rotate(645deg);
        animation-timing-function: linear;
        origin:30%;
    }

    70% {
        opacity: 1;
        transform: rotate(770deg);
        animation-timing-function: ease-out;
        origin:39%;
    }

    75% {
        opacity: 1;
        transform: rotate(900deg);
        animation-timing-function: ease-out;
        origin:70%;
    }

    76% {
        opacity: 0;
        transform:rotate(900deg);
    }

    100% {
        opacity: 0;
        transform: rotate(900deg);
    }
}

@-o-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -o-transform: rotate(180deg);
        -o-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -o-transform: rotate(300deg);
        -o-animation-timing-function: linear;
        -o-origin:0%;
    }

    30% {
        opacity: 1;
        -o-transform:rotate(410deg);
        -o-animation-timing-function: ease-in-out;
        -o-origin:7%;
    }

    39% {
        opacity: 1;
        -o-transform: rotate(645deg);
        -o-animation-timing-function: linear;
        -o-origin:30%;
    }

    70% {
        opacity: 1;
        -o-transform: rotate(770deg);
        -o-animation-timing-function: ease-out;
        -o-origin:39%;
    }

    75% {
        opacity: 1;
        -o-transform: rotate(900deg);
        -o-animation-timing-function: ease-out;
        -o-origin:70%;
    }

    76% {
        opacity: 0;
        -o-transform:rotate(900deg);
    }

    100% {
        opacity: 0;
        -o-transform: rotate(900deg);
    }
}

@-ms-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -ms-transform: rotate(180deg);
        -ms-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -ms-transform: rotate(300deg);
        -ms-animation-timing-function: linear;
        -ms-origin:0%;
    }

    30% {
        opacity: 1;
        -ms-transform:rotate(410deg);
        -ms-animation-timing-function: ease-in-out;
        -ms-origin:7%;
    }

    39% {
        opacity: 1;
        -ms-transform: rotate(645deg);
        -ms-animation-timing-function: linear;
        -ms-origin:30%;
    }

    70% {
        opacity: 1;
        -ms-transform: rotate(770deg);
        -ms-animation-timing-function: ease-out;
        -ms-origin:39%;
    }

    75% {
        opacity: 1;
        -ms-transform: rotate(900deg);
        -ms-animation-timing-function: ease-out;
        -ms-origin:70%;
    }

    76% {
        opacity: 0;
        -ms-transform:rotate(900deg);
    }

    100% {
        opacity: 0;
        -ms-transform: rotate(900deg);
    }
}

@-webkit-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -webkit-transform: rotate(180deg);
        -webkit-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -webkit-transform: rotate(300deg);
        -webkit-animation-timing-function: linear;
        -webkit-origin:0%;
    }

    30% {
        opacity: 1;
        -webkit-transform:rotate(410deg);
        -webkit-animation-timing-function: ease-in-out;
        -webkit-origin:7%;
    }

    39% {
        opacity: 1;
        -webkit-transform: rotate(645deg);
        -webkit-animation-timing-function: linear;
        -webkit-origin:30%;
    }

    70% {
        opacity: 1;
        -webkit-transform: rotate(770deg);
        -webkit-animation-timing-function: ease-out;
        -webkit-origin:39%;
    }

    75% {
        opacity: 1;
        -webkit-transform: rotate(900deg);
        -webkit-animation-timing-function: ease-out;
        -webkit-origin:70%;
    }

    76% {
        opacity: 0;
        -webkit-transform:rotate(900deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: rotate(900deg);
    }
}

@-moz-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -moz-transform: rotate(180deg);
        -moz-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -moz-transform: rotate(300deg);
        -moz-animation-timing-function: linear;
        -moz-origin:0%;
    }

    30% {
        opacity: 1;
        -moz-transform:rotate(410deg);
        -moz-animation-timing-function: ease-in-out;
        -moz-origin:7%;
    }

    39% {
        opacity: 1;
        -moz-transform: rotate(645deg);
        -moz-animation-timing-function: linear;
        -moz-origin:30%;
    }

    70% {
        opacity: 1;
        -moz-transform: rotate(770deg);
        -moz-animation-timing-function: ease-out;
        -moz-origin:39%;
    }

    75% {
        opacity: 1;
        -moz-transform: rotate(900deg);
        -moz-animation-timing-function: ease-out;
        -moz-origin:70%;
    }

    76% {
        opacity: 0;
        -moz-transform:rotate(900deg);
    }

    100% {
        opacity: 0;
        -moz-transform: rotate(900deg);
    }
}