﻿html, body, form {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
    /*font-size: 20px;*/
    margin-right: auto;
    margin-left: auto;
    margin: 0;
    padding: 0;
}

#background {
    width: 100%;
    max-width: 1000px;
    margin: auto;
}

.desktop {
    display: block !important;
}

.mobile {
    display: none !important;
}

.textbox {
    font-size: calc(0.5vw + 20px);
    font-family: 'Noto Sans TC', 'Microsoft JhengHei';
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    padding-left: 1%;
}

.selectionbox {
    font-size: calc(0.5vw + 20px);
    font-family: 'Noto Sans TC', 'Microsoft JhengHei';
    border: none;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent !important;
    padding-left: 1%;
    padding-right: 3.7%;
}

    .selectionbox::-ms-expand {
        display: none;
    }

label {
    font-size: calc(0.3vw + 12px);
    font-family: 'Noto Sans TC', 'Microsoft JhengHei';
}

input:focus {
    outline: none;
}

.radiobutton {
    padding: 0;
    margin: 0;
}

.checkbox {
    padding: 0;
    margin: 0;
    background-color: #FFFFFF;
}

.button {
    cursor: pointer;
}

.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;
}

img {
    display: block;
}

.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;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color: black;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: black;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: black;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: black;
}

::selection {
    color: none;
    background: none;
}
/* end common setting */

#session_kv {
    position: relative;
    background-size: 100%;
    width: 100%;
    height: auto;
    background-color: transparent;
}

#session_banner {
    background: url(https://oss.gratus.com.hk/gratus/PublicImages/EDM/elyze/EGRLF0722B/images/banner.png) no-repeat;
    position: relative;
    background-size: 100%;
    width: 100%;
    padding-top: 60.8889%;
    height: auto;
}

#session_JTBD {
    background: url(https://oss.gratus.com.hk/gratus/PublicImages/EDM/elyze/EGRLF0722B/images/JTBD.png) no-repeat;
    position: relative;
    background-size: 100%;
    width: 100%;
    padding-top: 50.1630%;
    height: auto;
    top: -1%;
    margin-bottom: -8.5%;
    margin-top: -8.5%;
}

#session_technology {
    background: url(https://oss.gratus.com.hk/gratus/PublicImages/EDM/elyze/EGRLF0722B/images/technology.png) no-repeat;
    position: relative;
    background-size: 100%;
    width: 100%;
    padding-top: 69.2778%;
    height: auto;
}

#session_before_n_after {
    background: url(https://oss.gratus.com.hk/gratus/PublicImages/EDM/elyze/EGRLF0722B/images/before_and_after.png) no-repeat;
    position: relative;
    background-size: 100%;
    width: 100%;
    padding-top: 120.5556%;
    height: auto;
}

#session_trial_registration {
    background: url(https://oss.gratus.com.hk/gratus/PublicImages/EDM/elyze/EGRLF0722B/images/trial_registration.png) no-repeat;
    position: relative;
    background-size: 100%;
    width: 100%;
    padding-top: 292.4074%;
    height: auto;
}

#session_brand_promise {
    background: url(https://oss.gratus.com.hk/gratus/PublicImages/EDM/elyze/EGRLF0722B/images/brand_promise.png) no-repeat;
    position: relative;
    background-size: 100%;
    width: 100%;
    padding-top: 55.3148%;
    height: auto;
}

#session_brand_video {
    background: url(https://oss.gratus.com.hk/gratus/PublicImages/EDM/elyze/EGRLF0722B/images/video.png) no-repeat;
    position: relative;
    background-size: 100%;
    width: 100%;
    padding-top: 83.6111%;
    height: auto;
}

#session_disclaimers {
    background: url(https://oss.gratus.com.hk/gratus/PublicImages/EDM/elyze/EGRLF0722B/images/disclaimers.png) no-repeat;
    position: relative;
    background-size: 100%;
    width: 100%;
    padding-top: 114.2222%;
    height: auto;
}

.floating {
    position: fixed;
    width: 10%;
    max-width: 170px;
    right: 0;
    top: 0%;
    cursor: pointer;
    z-index: 100;
}

.banner {
    width: 100%;
}

.banner_selection {
    width: 100%;
}

.learn_more {
    width: 213px;
    height: 73px;
    left: 543px;
    top: 815px;
    position: absolute;
    cursor: pointer;
}

#icon {
    display: block;
    margin: auto;
    padding-top: 20px;
    height: 50px;
    cursor: pointer;
}

.slide-image {
    width: 100%;
}

.slide-image-2 {
    width: 100%;
}

/*#treatment_part_slider {
        top: 300px;
        left: 46px;
        width: 988px;
        height: 529px;
        position: absolute;
    }*/

.slick-prev {
    left: 1% !important;
    top: 50% !important;
    width: 10% !important;
    height: 16% !important;
    z-index: 100;
}

.slick-next {
    right: 1.5% !important;
    top: 50% !important;
    width: 10% !important;
    height: 16% !important;
}

    .slick-prev:before, .slick-next:before {
        font-size: 7vw !important;
    }

.parts {
    cursor: pointer;
}

    .parts.abdomen {
        position: absolute;
        left: 12%;
        top: 0%;
        width: 23%;
        /*height: 100%;
            clip-path: polygon(0 0,100% 0,90% 100%,0 100%);
            -webkit-clip-path: polygon(0 0,100% 0,90% 100%,0 100%);*/
    }

    .parts.arm {
        position: absolute;
        left: 38.5%;
        top: 0%;
        width: 23%;
        /*height: 100%;
            clip-path: polygon(10% 0,100% 0,90% 100%,0 100%);
            -webkit-clip-path: polygon(10% 0,100% 0,90% 100%,0 100%);*/
    }

    .parts.leg {
        position: absolute;
        left: 65%;
        top: 0%;
        width: 23%;
        /*height: 100%;
            clip-path: polygon(10% 0,100% 0,100% 100%,0 100%);
            -webkit-clip-path: polygon(10% 0,100% 0,100% 100%,0 100%);*/
    }

#treatment_part_slider {
    position: absolute;
    width: 90%;
    top: 22.7%;
    left: 5%;
}

#parts_background {
    position: absolute;
    width: 100%;
    top: 12%;
}

.name {
    width: 89%;
    height: 3.1%;
    left: 5.5%;
    top: 50.9%;
    position: absolute;
}

.age {
    width: 443px;
    height: 140px;
    left: 561px;
    top: 196px;
    position: absolute;
}

.txt_birth {
    width: 7%;
    left: 7%;
    top: 54.9%;
    position: absolute;
}

.month {
    width: 18.5%;
    height: 3.1%;
    left: 41%;
    top: 54.9%;
    position: absolute;
}

.year {
    padding-right: 7%;
    width: 20.8%;
    height: 3.1%;
    left: 19%;
    top: 54.9%;
    position: absolute;
}

.female {
    width: 5%;
    height: 1.75%;
    left: 72.8%;
    top: 55.5%;
    position: absolute;
}

.male {
    width: 5%;
    height: 1.75%;
    left: 84.4%;
    top: 55.5%;
    position: absolute;
}

.country_code {
    width: 32.9%;
    height: 3.1%;
    left: 5.5%;
    top: 58.8%;
    position: absolute;
}

.tel {
    width: 53.5%;
    height: 3.1%;
    left: 40.5%;
    top: 58.7%;
    position: absolute;
}

.txt_ver_code {
    width: 52%;
    height: 3.1%;
    left: 5.5%;
    top: 62.7%;
    position: absolute;
}

.btn_getSMSVerCode {
    width: 34%;
    height: 3.15%;
    left: 60.5%;
    top: 62.7%;
    position: absolute;
    cursor: pointer;
}

.email {
    width: 28%;
    height: 10.6%;
    left: 21%;
    top: 30%;
    position: absolute;
}

.next {
    width: 1130px;
    height: 122px;
    top: 717px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
}

.treatment {
    width: 89%;
    height: 3.1%;
    left: 5.5%;
    top: 66.5%;
    position: absolute;
}

.treatmentLoc {
    width: 89%;
    height: 3.1%;
    left: 5.5%;
    top: 70.4%;
    position: absolute;
}


.nd-timeslot-picker {
    position: initial !important;
}

.treatmentDateTime {
    width: 89%;
    height: 3.1%;
    left: 5.5%;
    top: 74.3%;
    position: absolute;
}

.popSelection {
    left: 51.6% !important;
    top: 74.2% !important;
}

.agree {
    width: 5%;
    height: 2.5%;
    left: 5.5%;
    top: 78.4%;
    position: absolute;
    border: none;
}

.optout_brand {
    width: 5%;
    height: 2.5%;
    left: 5.5%;
    top: 85.1%;
    position: absolute;
    border: none;
}

.gratus_member {
    width: 5%;
    height: 2.5%;
    left: 5.5%;
    top: 80.7%;
    position: absolute;
    border: none;
    background-color: #fff;
    border-color: #fff;
}

.attention {
    width: 16.8%;
    height: 1.4%;
    left: 34.8%;
    top: 79.1%;
    position: absolute;
    cursor: pointer;
}

.tAndc {
    width: 19.5%;
    height: 1.4%;
    left: 67.5%;
    top: 79.1%;
    position: absolute;
    cursor: pointer;
}

.privacy {
    width: 11%;
    height: 1.4%;
    left: 53.8%;
    top: 79.1%;
    position: absolute;
    cursor: pointer;
}

#popup {
    width: 10.4%;
    height: 1.4%;
    left: 72.7%;
    top: 81.2%;
    position: absolute;
    cursor: pointer;
}

.gratus_privacy {
    width: 11.5%;
    height: 1.4%;
    left: 15.7%;
    top: 83.6%;
    position: absolute;
    cursor: pointer;
}

.gratus_tandc {
    width: 11.5%;
    height: 1.4%;
    left: 29.6%;
    top: 83.6%;
    position: absolute;
    cursor: pointer;
}

.submit {
    width: 52%;
    height: 3.8%;
    left: 24%;
    top: 89.9%;
    position: absolute;
}

.reset {
    width: 19.9%;
    height: 11%;
    left: 29.7%;
    top: 82.9%;
    position: absolute;
}

#video {
    position: absolute;
    width: 70%;
    height: 72.8%;
    top: 27%;
    left: 15%;
}

.facebook {
    position: absolute;
    width: 6.3%;
    height: 7%;
    top: 16.8%;
    left: 30.6%;
    cursor: pointer;
}

.youtube {
    position: absolute;
    width: 6.3%;
    height: 6%;
    top: 17.8%;
    left: 38.7%;
    cursor: pointer;
}

.instagram {
    position: absolute;
    width: 6.5%;
    height: 7%;
    top: 16.8%;
    left: 46.7%;
    cursor: pointer;
}

.wechat {
    position: absolute;
    width: 6.5%;
    height: 7%;
    top: 16.8%;
    left: 54.8%;
    cursor: pointer;
}

.emailTo {
    position: absolute;
    width: 6.5%;
    height: 7%;
    top: 16.8%;
    left: 63%;
    cursor: pointer;
}

/* 20180822 By Marco: Simplified Login for gratus */

.loader {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    /*background-color: rgba(100, 100, 100, 0.3);*/
    background-color: #FFFFFF;
    z-index: 100;
}

.spinner {
    position: relative;
    /*top: 50%;*/
    top: 300px;
    left: 47.5%;
    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: 20px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    border: 5px solid #75BB43;
    width: 450px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 35px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: #222;
        text-decoration: none;
        cursor: pointer;
    }

#msg {
    position: relative;
    width: 100%;
    height: auto;
    line-height: 25px;
    font-size: 18px;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei';
    color: #222;
    text-align: center;
    top: 30px;
    padding-top: 5px;
    padding-bottom: 35px;
}

@media only screen and (max-width: 930px) {
    .desktop {
        display: none !important;
    }

    .mobile {
        display: block !important;
    }

    .textbox {
        font-size: 3vw;
        font-family: 'Noto Sans TC', 'Microsoft JhengHei';
        border: none;
        padding: 0;
        margin: 0;
        background: transparent;
        padding-left: 1.5%;
    }

    .textboxDate {
        font-size: 3vw;
        font-family: 'Noto Sans TC', 'Microsoft JhengHei';
        border: none;
        padding: 0;
        margin: 0;
        background: transparent;
        padding-left: 1.5%;
    }


    .selectionbox {
        font-size: 3vw;
        font-family: 'Noto Sans TC', 'Microsoft JhengHei';
        border: none;
        padding: 0;
        margin: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        background: transparent !important;
        padding-left: 1.5%;
        padding-right: 7.75%;
    }

        .selectionbox::-ms-expand {
            display: none;
        }

    label {
        font-size: 3vw;
    }

    .radiobutton {
        padding: 0;
        margin: 0;
    }

    .checkbox {
        padding: 0;
        margin: 0;
        background-color: #FFFFFF;
    }

    .button {
        cursor: pointer;
    }

    .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;
    }

    img {
        display: block;
    }

    .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;
    }

    .on {
        z-index: 100;
        position: absolute;
    }

    .off {
        position: absolute;
    }

    #session_kv {
        position: relative;
        background-size: 100%;
        width: 100%;
        height: auto;
        background-color: transparent;
    }

    #session_banner {
        background: url(https://oss.gratus.com.hk/gratus/PublicImages/EDM/elyze/EGRLF0722B/images/banner.png) no-repeat;
        position: relative;
        background-size: 100%;
        width: 100%;
        padding-top: 60.8889%;
        height: auto;
    }

    #session_JTBD {
        background: url(https://oss.gratus.com.hk/gratus/PublicImages/EDM/elyze/EGRLF0722B/images/JTBD.png) no-repeat;
        position: relative;
        background-size: 100%;
        width: 100%;
        padding-top: 50.1630%;
        height: auto;
        top: -1%;
        margin-bottom: -8.5%;
        margin-top: -8.5%;
    }

    #session_technology {
        background: url(https://oss.gratus.com.hk/gratus/PublicImages/EDM/elyze/EGRLF0722B/images/technology.png) no-repeat;
        position: relative;
        background-size: 100%;
        width: 100%;
        padding-top: 69.2778%;
        height: auto;
    }

    #session_before_n_after {
        background: url(https://oss.gratus.com.hk/gratus/PublicImages/EDM/elyze/EGRLF0722B/images/before_and_after.png) no-repeat;
        position: relative;
        background-size: 100%;
        width: 100%;
        padding-top: 120.5556%;
        height: auto;
    }

    #session_trial_registration {
        background: url(https://oss.gratus.com.hk/gratus/PublicImages/EDM/elyze/EGRLF0722B/images/trial_registration.png) no-repeat;
        position: relative;
        background-size: 100%;
        width: 100%;
        padding-top: 292.4074%;
        height: auto;
    }

    #session_brand_promise {
        background: url(https://oss.gratus.com.hk/gratus/PublicImages/EDM/elyze/EGRLF0722B/images/brand_promise.png) no-repeat;
        position: relative;
        background-size: 100%;
        width: 100%;
        padding-top: 55.3148%;
        height: auto;
    }

    #session_brand_video {
        background: url(https://oss.gratus.com.hk/gratus/PublicImages/EDM/elyze/EGRLF0722B/images/video.png) no-repeat;
        position: relative;
        background-size: 100%;
        width: 100%;
        padding-top: 83.6111%;
        height: auto;
    }

    #session_disclaimers {
        background: url(https://oss.gratus.com.hk/gratus/PublicImages/EDM/elyze/EGRLF0722B/images/disclaimers.png) no-repeat;
        position: relative;
        background-size: 100%;
        width: 100%;
        padding-top: 114.2222%;
        height: auto;
    }

    .learn_more {
        width: 213px;
        height: 73px;
        left: 543px;
        top: 815px;
        position: absolute;
        cursor: pointer;
    }

    #icon {
        display: block;
        margin: auto;
        padding-top: 20px;
        height: 50px;
        cursor: pointer;
    }

    .slide-image {
        width: 100%;
    }

    .slide-image-2 {
        width: 100%;
    }

    /*#treatment_part_slider {
        top: 300px;
        left: 46px;
        width: 988px;
        height: 529px;
        position: absolute;
    }*/

    .slick-prev {
        left: 1% !important;
        top: 50% !important;
        width: 10% !important;
        height: 16% !important;
        z-index: 100;
    }

    .slick-next {
        right: 1.5% !important;
        top: 50% !important;
        width: 10% !important;
        height: 16% !important;
    }

        .slick-prev:before, .slick-next:before {
            font-size: 10vw !important;
        }

    .parts {
        cursor: pointer;
    }

        .parts.abdomen {
            position: absolute;
            left: 12%;
            top: 0%;
            width: 23%;
            /*height: 100%;
            clip-path: polygon(0 0,100% 0,90% 100%,0 100%);
            -webkit-clip-path: polygon(0 0,100% 0,90% 100%,0 100%);*/
        }

        .parts.arm {
            position: absolute;
            left: 38.5%;
            top: 0%;
            width: 23%;
            /*height: 100%;
            clip-path: polygon(10% 0,100% 0,90% 100%,0 100%);
            -webkit-clip-path: polygon(10% 0,100% 0,90% 100%,0 100%);*/
        }

        .parts.leg {
            position: absolute;
            left: 65%;
            top: 0%;
            width: 23%;
            /*height: 100%;
            clip-path: polygon(10% 0,100% 0,100% 100%,0 100%);
            -webkit-clip-path: polygon(10% 0,100% 0,100% 100%,0 100%);*/
        }

    #treatment_part_slider {
        position: absolute;
        width: 90%;
        top: 22.7%;
        left: 5%;
    }

    #parts_background {
        position: absolute;
        width: 100%;
        top: 12%;
    }

    .name {
        width: 89%;
        height: 3.1%;
        left: 5.5%;
        top: 50.9%;
        position: absolute;
    }

    .age {
        width: 443px;
        height: 140px;
        left: 561px;
        top: 196px;
        position: absolute;
    }

    .txt_birth {
        width: 7%;
        left: 7%;
        top: 54.9%;
        position: absolute;
    }

    .month {
        width: 18.5%;
        height: 3.1%;
        left: 41%;
        top: 54.9%;
        position: absolute;
    }

    .year {
        padding-right: 7%;
        width: 20.8%;
        height: 3.1%;
        left: 19%;
        top: 54.9%;
        position: absolute;
    }

    .female {
        width: 5%;
        height: 1.75%;
        left: 72.8%;
        top: 55.5%;
        position: absolute;
    }

    .male {
        width: 5%;
        height: 1.75%;
        left: 84.4%;
        top: 55.5%;
        position: absolute;
    }

    .country_code {
        width: 32.9%;
        height: 3.1%;
        left: 5.5%;
        top: 58.8%;
        position: absolute;
    }

    .tel {
        width: 53.5%;
        height: 3.1%;
        left: 40.5%;
        top: 58.7%;
        position: absolute;
    }

    .txt_ver_code {
        width: 52%;
        height: 3.1%;
        left: 5.5%;
        top: 62.7%;
        position: absolute;
    }

    .btn_getSMSVerCode {
        width: 34%;
        height: 3.15%;
        left: 60.5%;
        top: 62.7%;
        position: absolute;
        cursor: pointer;
    }

    .email {
        width: 89%;
        height: 8.5%;
        left: 5.5%;
        top: 34.4%;
        position: absolute;
    }

    .next {
        width: 1130px;
        height: 122px;
        top: 717px;
        left: 50%;
        transform: translateX(-50%);
        position: absolute;
    }

    .treatment {
        width: 89%;
        height: 3.1%;
        left: 5.5%;
        top: 66.5%;
        position: absolute;
    }

    .treatmentLoc {
        width: 89%;
        height: 3.1%;
        left: 5.5%;
        top: 70.4%;
        position: absolute;
    }

    .treatmentDateTime {
        width: 89%;
        height: 3.1%;
        left: 5.5%;
        top: 74.3%;
        position: absolute;
    }

    .agree {
        width: 5%;
        height: 2.5%;
        left: 5.5%;
        top: 78.4%;
        position: absolute;
        border: none;
    }

    .optout_brand {
        width: 5%;
        height: 2.5%;
        left: 5.5%;
        top: 85.1%;
        position: absolute;
        border: none;
    }

    .gratus_member {
        width: 5%;
        height: 2.5%;
        left: 5.5%;
        top: 80.7%;
        position: absolute;
        border: none;
        background-color: #fff;
        border-color: #fff;
    }

    .attention {
        width: 16.8%;
        height: 1.4%;
        left: 34.8%;
        top: 79.1%;
        position: absolute;
        cursor: pointer;
    }

    .tAndc {
        width: 19.5%;
        height: 1.4%;
        left: 67.5%;
        top: 79.1%;
        position: absolute;
        cursor: pointer;
    }

    .privacy {
        width: 11%;
        height: 1.4%;
        left: 53.8%;
        top: 79.1%;
        position: absolute;
        cursor: pointer;
    }

    #popup {
        width: 10.4%;
        height: 1.4%;
        left: 72.7%;
        top: 81.2%;
        position: absolute;
        cursor: pointer;
    }

    .gratus_privacy {
        width: 11.5%;
        height: 1.4%;
        left: 15.7%;
        top: 83.6%;
        position: absolute;
        cursor: pointer;
    }

    .gratus_tandc {
        width: 11.5%;
        height: 1.4%;
        left: 29.6%;
        top: 83.6%;
        position: absolute;
        cursor: pointer;
    }

    .submit {
        width: 52%;
        height: 3.8%;
        left: 24%;
        top: 89.9%;
        position: absolute;
    }

    .reset {
        width: 42.2%;
        height: 5.8%;
        left: 5.8%;
        top: 90.5%;
        position: absolute;
    }

    .popSelection {
        left: 5.5% !important;
        top: 76.5% !important;
    }

    #video {
        position: absolute;
        width: 90%;
        height: 60.5%;
        top: 33%;
        left: 5%;
    }

    .facebook {
        position: absolute;
        width: 6.3%;
        height: 7%;
        top: 16.8%;
        left: 30.6%;
        cursor: pointer;
    }

    .youtube {
        position: absolute;
        width: 6.3%;
        height: 6%;
        top: 17.8%;
        left: 38.7%;
        cursor: pointer;
    }

    .instagram {
        position: absolute;
        width: 6.5%;
        height: 7%;
        top: 16.8%;
        left: 46.7%;
        cursor: pointer;
    }

    .wechat {
        position: absolute;
        width: 6.5%;
        height: 7%;
        top: 16.8%;
        left: 54.8%;
        cursor: pointer;
    }

    .emailTo {
        position: absolute;
        width: 6.5%;
        height: 7%;
        top: 16.8%;
        left: 63%;
        cursor: pointer;
    }

    /* end css in form */

    .content {
        padding: 2%;
        border: 1vw solid #75BB43;
        width: 80%;
    }

    .close {
        font-size: 5vw;
    }

    #msg {
        line-height: 4vw;
        font-size: 3vw;
        padding-bottom: 10%;
    }

    .floating {
        width: 22%;
        top: 0%;
        right: 1%;
    }
}
