/* reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* end reset CSS */


/* common setting */

body {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
}

input, div, select {
    outline: none;
}

td {
    background-color: #F6EBE7;
}


    td img {
        display: block;
    }

.textbox {
    /*font-size: 18px;*/
    font-size: calc(2vw + 3px);
    font-family: 'Microsoft JhengHei';
    border: none;
    background-color: rgba(255, 255, 255, 0);
    color: #909193;
    padding-left: 1.5%;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    -appearance: none;
}

.selectionbox {
    /*font-size: 18px;*/
    font-size: calc(2vw + 3px);
    font-family: 'Microsoft JhengHei';
    border: none;
    background-color: rgba(255, 255, 255, 0);
    color: #909193;
    padding-left: 1.5%;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    -appearance: none;
    padding-right: 10%;
}

    .selectionbox::-ms-expand {
        display: none;
    }

    .selectionbox option {
        /* Whatever color  you want */
        background-color: white;
        color: black;
        border: none;
    }

.radiobutton {
    padding: 0;
    margin: 0;
}

.checkbox {
    padding: 0;
    margin: 0;
}

.error {
    /*background-color: #F7FFB5;*/
    color: #E33A1B;
}

input.error::-webkit-input-placeholder {
    color: #E33A1B;
}

input.error:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #E33A1B;
}

input.error::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #E33A1B;
}

input.error::-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #E33A1B;
}

.ui-icon-circle-triangle-e {
    background-position: -96px -384px !important;
}

.ui-icon-circle-triangle-s {
    background-position: -128px -384px !important;
}

.ui-icon-circle-triangle-w {
    background-position: -160px -384px !important;
}

.ui-icon-circle-triangle-n {
    background-position: -192px -384px !important;
}

body, html {
    margin: 0;
    padding: 0;
}

img {
    display: block;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color: #909193;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #909193;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #909193;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #909193;
}


/* end common setting */

/* css in form */

#background {
    width: 100%;
    max-width: 1242px;
    margin: auto;
}

/*DUPLICATED*/
/*#session_kv {
    background: url(https://gratushk.oss-cn-hongkong.aliyuncs.com/gratus/PublicImages/EDM/gratus/GPXT11022CA02N/kv_d.png) no-repeat;
    position: relative;
    background-size: 100%;
    width: 100%;
    padding-top: 37.18%;
    height: auto;
}

#session_leadin {
    background: url(https://gratushk.oss-cn-hongkong.aliyuncs.com/gratus/PublicImages/EDM/gratus/GPXT11022CA02N/leadin_d.png) no-repeat;
    position: relative;
    background-size: 100%;
    width: 100%;
    padding-top: 23.346%;
    height: auto;
}

#session_promotion {
    background: url(https://gratushk.oss-cn-hongkong.aliyuncs.com/gratus/PublicImages/EDM/gratus/GPXT11022CA02N/promotion_d.png) no-repeat;
    position: relative;
    background-size: 100%;
    width: 100%;
    padding-top: 21.805%;
    height: auto;
}

#session_free_trial {
    background: url(https://gratushk.oss-cn-hongkong.aliyuncs.com/gratus/PublicImages/EDM/dermes/DSTUG1220A/m/free_trial.png?v=202012211148) no-repeat;
    position: relative;
    background-size: 100%;
    width: 100%;
    padding-top: 52.415%;
    height: auto;
}

#session_reg_form {
    background: url(https://gratushk.oss-cn-hongkong.aliyuncs.com/gratus/PublicImages/EDM/gratus/GPXT11022CA02N/reg_form_d.png) no-repeat;
    position: relative;
    background-size: 100%;
    width: 100%;
    padding-top: 69.709%;
    height: auto;
}

#session_treatment_promise {
    background: url(https://gratushk.oss-cn-hongkong.aliyuncs.com/gratus/PublicImages/EDM/dermes/DSTUG1220A/m/treatment_promise.png?v=202012211148) no-repeat;
    position: relative;
    background-size: 100%;
    width: 100%;
    padding-top: 30.032%;
    height: auto;
}

#session_disclaimers {
    background: url(https://gratushk.oss-cn-hongkong.aliyuncs.com/gratus/PublicImages/EDM/gratus/GPXT11022CA02N/disclaimer_d.png) no-repeat;
    position: relative;
    background-size: 100%;
    width: 100%;
    padding-top: 6.11%;
    height: auto;
}

.name {
    width: 31%;
    height: 6.2%;
    left: 12%;
    top: 32.4%;
    position: absolute;
}

.female {
    width: 3.5%;
    height: 5.5%;
    left: 50%;
    top: 33.3%;
    position: absolute;
}

.male {
    width: 3.5%;
    height: 5.5%;
    left: 57.5%;
    top: 33.3%;
    position: absolute;
}

.year {
    width: 19%;
    height: 6.1%;
    left: 69.4%;
    top: 33.3%;
    position: absolute;
}

.month {
    width: 19%;
    height: 6.1%;
    left: 79%;
    top: 33.3%;
    position: absolute;
}

.tel {
    width: 35%;
    height: 6.2%;
    left: 11%;
    top: 45.3%;
    position: absolute;
}


.referral {
    width: 34%;
    height: 6%;
    left: 52%;
    top: 59%;
    position: absolute;
}

.txt_ver_code {
    width: 21%;
    height: 6%;
    left: 11%;
    top: 59%;
    position: absolute;
}

.btn_getSMSVerCode {
    width: 12.5%;
    height: 5.2%;
    left: 34.8%;
    top: 59%;
    cursor: pointer;
    position: absolute;
}

.email {
    width: 82%;
    height: 6.2%;
    left: 9%;
    top: 29.3%;
    position: absolute;
}

.interest {
    width: 47%;
    height: 6.2%;
    left: 51%;
    top: 45.3%;
    position: absolute;
}

.treatmentLoc {
    width: 82%;
    height: 6.2%;
    left: 9%;
    top: 47.25%;
    position: absolute;
}

.nd-timeslot-picker {
    position: initial !important;
}

.treatmentDateTime {
    width: 82%;
    height: 6.2%;
    left: 9%;
    top: 56.2%;
    position: absolute;
}

.popSelection {
    left: 9% !important;
    top: 62.4% !important
}

.agree {
    width: 4%;
    height: 3%;
    left: 11%;
    top: 70.5%;
    position: absolute;
    border: none;
    background-color: #fff;
    border-color: #fff;
}

.gratus_member {
    width: 4%;
    height: 3%;
    left: 8%;
    top: 66.5%;
    position: absolute;
    border: none;
    background-color: #fff;
    border-color: #fff;
}

.optout_brand {
    width: 4%;
    height: 3%;
    left: 11%;
    top: 76.5%;
    position: absolute;
    border: none;
    background-color: #fff;
    border-color: #fff;
}

.attention {
    width: 16%;
    height: 2.5%;
    left: 34%;
    top: 64%;
    position: absolute;
    cursor: pointer;
}

.tAndc {
    width: 16%;
    height: 2.5%;
    left: 65%;
    top: 64%;
    position: absolute;
    cursor: pointer;
}

.privacy {
    width: 11%;
    height: 2.5%;
    left: 51.5%;
    top: 64%;
    position: absolute;
    cursor: pointer;
}

.popup {
    width: 12%;
    height: 2.5%;
    left: 75.3%;
    top: 67%;
    position: absolute;
    cursor: pointer;
}

.gratus_privacy {
    width: 7%;
    height: 2.5%;
    left: 27%;
    top: 70.5%;
    position: absolute;
    cursor: pointer;
}


.gratus_tandc {
    width: 7%;
    height: 2.5%;
    left: 35.8%;
    top: 70.5%;
    position: absolute;
    cursor: pointer;
}

.submit {
    width: 33.5%;
    height: 8%;
    left: 33%;
    top: 88%;
    position: absolute;
    cursor: pointer;
}

.reset {
    width: 41.5%;
    height: 6%;
    left: 5.5%;
    top: 92%;
    position: absolute;
    cursor: pointer;
}

#video {
    width: 64.7%;
    height: 72.9%;
    top: 20.7%;
    left: 18.3%;
    position: absolute;
}

.loader {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: rgba(100, 100, 100, 0.3);
    z-index: 10;
}

.spinner {
    position: relative;
    left: 47.5%;*/
    /*top: 47.5%;*/
    /*top: 300px;
    width: 5%;
}

.dialog {
    display: none;*/ /* Hidden by default */
    /*position: fixed;*/ /* Stay in place */
    /*z-index: 10;*/ /* Sit on top */
    /*padding-top: 100px;*/ /* Location of the box */
    /*left: 0;
    top: 0;
    width: 100%;*/ /* Full width */
    /*height: 100%;*/ /* Full height */
    /*overflow: auto;*/ /* Enable scroll if needed */
    /*background-color: rgb(0,0,0);*/ /* Fallback color */
    /*background-color: rgba(0,0,0,0.4);*/ /* Black w/ opacity */
/*}

.content {
    background-color: #fefefe;
    margin: auto;
    padding: 2%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;*/
/*    border: 1vw solid #f05a41;*/
    /*width: 80%;
    max-width: 993px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 4vw;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: #222;
        text-decoration: none;
        cursor: pointer;
    }

#msg {
    position: relative;
    width: 100%;
    height: auto;
    line-height: 3.5vw;
    font-size: 3vw;
    font-family: 'Microsoft JhengHei';
    color: #222;
    text-align: center;
    top: 4vw;
    padding-top: 5px;
    padding-bottom: 4vw;
}*/
.dialog {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
.content {
    background-color: #fefefe;
    margin: auto;
    padding: 2%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
/*    border: 1vw solid #f05a41;*/
    width: 80%;
    max-width: 993px;
}
.close {
    color: #aaa;
    float: right;
    font-size: 4vw;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: #222;
        text-decoration: none;
        cursor: pointer;
    }

#msg {
    position: relative;
    width: 100%;
    height: auto;
    line-height: 3.5vw;
    font-size: 3vw;
    font-family: 'Microsoft JhengHei';
    color: #222;
    text-align: center;
    top: 4vw;
    padding-top: 5px;
    padding-bottom: 4vw;
}

.spinner {
    position: relative;
    left: 47.5%;
    top: 47.5%;
    top: 300px;
    width: 5%;
}
.loader {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: rgba(100, 100, 100, 0.3);
    z-index: 10;
}

    #session_kv {
    background: url(https://gratushk.oss-cn-hongkong.aliyuncs.com/gratus/PublicImages/EDM/gratus/GPWT11122CA01N/kv.jpg) no-repeat;
    position: relative;
    background-size: 100%;
    width: 100%;
    padding-top: 61.18%;
    height: auto;
}

#session_leadin {
    background: url(https://gratushk.oss-cn-hongkong.aliyuncs.com/gratus/PublicImages/EDM/gratus/GPWT11122CA01N/leadin.jpg) no-repeat;
    position: relative;
    background-size: 100%;
    width: 100%;
    padding-top: 130.346%;
    height: auto;
}

#session_promotion {
    background: url(https://gratushk.oss-cn-hongkong.aliyuncs.com/gratus/PublicImages/EDM/gratus/GPWT11122CA01N/promotion.jpg) no-repeat;
    position: relative;
    background-size: 100%;
    width: 100%;
    padding-top: 37.805%;
    height: auto;
}

/*    #session_free_trial {
        background: url(https://gratushk.oss-cn-hongkong.aliyuncs.com/gratus/PublicImages/EDM/dermes/DSTUG1220A/m/free_trial.png?v=202012211148) no-repeat;
        position: relative;
        background-size: 100%;
        width: 100%;
        padding-top: 52.415%;
        height: auto;
    }*/

#session_reg_form {
    background: url(https://gratushk.oss-cn-hongkong.aliyuncs.com/gratus/PublicImages/EDM/gratus/GPWT11122CA01N/reg_form.jpg) no-repeat;
    position: relative;
    background-size: 100%;
    width: 100%;
    padding-top: 226.709%;
    height: auto;
}

/*    #session_treatment_promise {
        background: url(https://gratushk.oss-cn-hongkong.aliyuncs.com/gratus/PublicImages/EDM/dermes/DSTUG1220A/m/treatment_promise.png?v=202012211148) no-repeat;
        position: relative;
        background-size: 100%;
        width: 100%;
        padding-top: 30.032%;
        height: auto;
    }*/

#session_disclaimers {
    background: url(https://gratushk.oss-cn-hongkong.aliyuncs.com/gratus/PublicImages/EDM/gratus/GPWT11122CA01N/disclaimer.jpg) no-repeat;
    position: relative;
    background-size: 100%;
    width: 100%;
    padding-top: 12.11%;
    height: auto;
}

.name {
    width: 80%;
    height: 6.2%;
    left: 8%;
    top: 8.4%;
    position: absolute;
}

.female {
    width: 6.5%;
    height: 5.5%;
    left: 4%;
    top: 18.3%;
    position: absolute;
}

.male {
    width: 6.5%;
    height: 5.5%;
    left: 21.5%;
    top: 18.3%;
    position: absolute;
}

.year {
    width: 25%;
    height: 6.1%;
    left: 50.4%;
    top: 18.3%;
    position: absolute;
}

.month {
    width: 19%;
    height: 6.1%;
    left: 77%;
    top: 18.3%;
    position: absolute;
}

.tel {
    width: 77%;
    height: 6.2%;
    left: 7%;
    top: 27.3%;
    position: absolute;
}


.referral {
    width: 78%;
    height: 6%;
    left: 9%;
    top: 66%;
    position: absolute;
}

.txt_ver_code {
    width: 49%;
    height: 6%;
    left: 8%;
    top: 37%;
    position: absolute;
}

.btn_getSMSVerCode {
    width: 27.5%;
    height: 5.2%;
    left: 63.8%;
    top: 37.4%;
    cursor: pointer;
    position: absolute;
}

.email {
    width: 82%;
    height: 6.2%;
    left: 8%;
    top: 46.3%;
    position: absolute;
}

.interest {
    width: 93%;
    height: 6.2%;
    left: 8%;
    top: 56.35%;
    position: absolute;
}

    .treatmentLoc {
        width: 82%;
        height: 6.2%;
        left: 9%;
        top: 47.25%;
        position: absolute;
    }

    .nd-timeslot-picker {
        position: initial !important;
    }

    .treatmentDateTime {
        width: 82%;
        height: 6.2%;
        left: 9%;
        top: 56.2%;
        position: absolute;
    }

    .popSelection {
        left: 9% !important;
        top: 62.4% !important
    }

.agree {
    width: 5%;
    height: 3%;
    left: 7%;
    top: 74.3%;
    position: absolute;
    border: none;
    background-color: #fff;
    border-color: #fff;
}

    .gratus_member {
        width: 4%;
        height: 3%;
        left: 8%;
        top: 66.5%;
        position: absolute;
        border: none;
        background-color: #fff;
        border-color: #fff;
    }

.optout_brand {
    width: 5%;
    height: 3%;
    left: 7%;
    top: 78.5%;
    position: absolute;
    border: none;
    background-color: #fff;
    border-color: #fff;
}

    .attention {
        width: 16%;
        height: 2.5%;
        left: 34%;
        top: 64%;
        position: absolute;
        cursor: pointer;
    }

    .tAndc {
        width: 16%;
        height: 2.5%;
        left: 65%;
        top: 64%;
        position: absolute;
        cursor: pointer;
    }

    .privacy {
        width: 15%;
        height: 2.5%;
        left: 43%;
        top: 78.5%;
        position: absolute;
        cursor: pointer;
    }

    .popup {
        width: 12%;
        height: 2.5%;
        left: 75.3%;
        top: 67%;
        position: absolute;
        cursor: pointer;
    }

.gratus_privacy {
    width: 14%;
    height: 2.5%;
    left: 43%;
    top: 74.5%;
    position: absolute;
    cursor: pointer;
}


.gratus_tandc {
    width: 14%;
    height: 2.5%;
    left: 61.8%;
    top: 74.5%;
    position: absolute;
    cursor: pointer;
}

.submit {
    width: 73.5%;
    height: 8%;
    left: 13%;
    top: 84%;
    position: absolute;
    cursor: pointer;
}

.invitation {
    width: 42.5%;
    height: 5%;
    left: 29%;
    top: 94%;
    position: absolute;
    cursor: pointer;
}

    .textbox {
        font-size: 5.5vw;
    }

    .selectionbox {
        font-size: 5.5vw;
    }

    .content {
        padding: 2%;
/*        border: 1vw solid #F05A41;*/
        width: 80%;
    }

    .close {
        font-size: 5vw;
    }

    #msg {
        line-height: 4vw;
        font-size: 3vw;
        padding-bottom: 10%;
    }


@media only screen and (min-width: 1242px) {
    .textbox {
        font-size: 40px;
    }

    .selectionbox {
        font-size: 40px;
    }

    .close {
        font-size: 50px;
    }

    #msg {
        line-height: 50px;
        font-size: 35px;
        top: 50px;
    }

    .dialog {
        padding-top: 60px;
    }
}