/* ----------------------------------------------------------------------------------------------------------------------------------------------------------
 * CUSTOM SCAFFOLDING
 * ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.full-width {width: 100%}
.half-width {width: 50%}
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------
 * CUSTOM FONT
 * ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
@font-face {
    font-family: "Century Gothic";
    src: url('../fonts/century_gothic.ttf');
}
@font-face {
    font-family: "Century Gothic Bold";
    src: url('../fonts/century_gothic_bold.ttf');
}
@font-face {
    font-family: "KaiTi";
    src: url('../fonts/kaiti.ttf');
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------
 * BROWSER MOD
 * ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
th:focus,
textarea:focus,
input:focus,
a:active,
button:active,
a:focus,
button:focus {
    border: none;
    outline: 0;
}
/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active
{
    -webkit-box-shadow: 0 0 0 999px #FFF inset !important;
    -webkit-text-fill-color: #171717 !important;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------
 * BOOTSTRAP MOD
 * ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.container {
    margin: 0 auto;
    position: relative;
}
.well {
    position: relative;
}
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------
 * ZBOX MOD
 * ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.zbox {
    height: 0 !important;
    width: 0 !important;
}
.zbox .main_slot {
    
}
.zbox .overlay {
    display: none !important;
}
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------
 * SCROLLBAR
 * ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* width */
::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
    background: #F6F6F6; 
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------
 * LAYOUT
 * ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
html {
    -webkit-font-smoothing: antialiased !important;
}
html * {
    -webkit-font-smoothing: antialiased !important;
}
body {
    background: transparent no-repeat center 0;
    background-color: #E1E1E1;
    font-family: "";
}
#div_PageLoader {
    background: rgba(255, 255, 255, 0.95);
    display: none;
    border-radius: 20px;
    left: 50%;
    padding: 0 40px;
    position: fixed;
    transform: translate(-50%, -50%);
    top: 40%;
    z-index: 1;
}
body.page_fadein .site_container{
    opacity: 1;
}
body.page_fadeout .site_container{
    opacity: 0;
}
body.page_fadeout #div_PageLoader {
    display: block;
}
/*.scroll_wrapper {max-height: 100vh;}*/
.site_container {
    margin: 0 auto;
    position: relative;
    transition:opacity 0.5s ease-in-out;
}
a {
    color: #005DA5;
}
a:link,
a:hover,
a:active,
a:focus,
a:visited {
    text-decoration: none !important;
}
a:hover {
    
}
button {
    
}
p {
    margin-bottom: 10px;
}
#div_ECardPage {
    background: #FFF url('../images/bg.png') no-repeat 0 0;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
    min-height: 940px;
    width: 530px
}
    #div_ECardQuestion {
        align-items: center;
        background: transparent url('../images/question_bg.png') no-repeat center center;
        display: flex;
        justify-content: center;
        min-height: 413px;
    }
        #div_ECardQuestion .body {
            align-items: center;
            display: flex;
            flex-direction: column;
        }
            #div_ECardQuestion .body .question_en {
                font-family: Century Gothic Bold;
                font-size: 20px;
                max-width: 350px;
            }
            #div_ECardQuestion .body .question_cn {
                font-family: KaiTi;
                font-size: 21px;
                margin-top: 30px;
                max-width: 330px;
            }
    #div_ECardProfile {
        background: transparent no-repeat right center;
        height: 395px;
        margin-top: 10px;
        padding-left: 40px;
    }
        #div_ECardProfile .body {
            font-family: "Century Gothic Bold";
            width: 290px;
        }
        #div_ECardProfile .name {
            font-size: 36px;
        }
        #div_ECardProfile .title {
            color: #8BB8CA;
            font-size: 16px;
            height: 48px;
        }
        #div_ECardProfile .phone {
            margin-top: 30px;
        }
        #div_ECardProfile .phone,
        #div_ECardProfile .email {
            font-size: 15px;
        }
        #div_ECardProfile .qr {
            margin-left: 22px;
            margin-top: 30px;
        }
            #div_ECardProfile .qr a {
                align-items: center;
                display: flex;
                flex-direction: column;
                width: 115px;
            }
                #div_ECardProfile .qr .img {
                    background: no-repeat center center;
                    background-size: 142px;
                    height: 115px;
                    width: 115px;
                }
                #div_ECardProfile .qr .add_to_contact {
                    background-color: #00BBB4;
                    color: #FFF;
                    font-family: "Century Gothic Bold";
                    font-size: 13px;
                    text-align: center;
                    width: 115px;
                }
    #div_ECardFooter {
        background-color: #B8D4DF;
        padding: 20px;
        padding-top: 25px;
    }
        #div_ECardFooter .body {
            display: flex;
            justify-content: space-evenly;
        }
            #div_ECardFooter a {
                align-items: center;
                color: #000;
                display: flex;
                flex-direction: column;
                font-family: "Century Gothic";
                font-size: 13px;
                text-align: center;
                width: 105px;
            }
                #div_ECardFooter span.ico {
                    background: transparent url('../images/social_icons.png') no-repeat 0 0;
                    height: 65px;
                    width: 65px;
                }
                #div_ECardFooter span.text {
                    margin-top: 5px;
                    white-space: nowrap;
                }
            #div_ECardFooter span.ico_website {
                background-position: 0 0;
            }
            #div_ECardFooter span.ico_whatsapp {
                background-position: -65px 0;
            }
            #div_ECardFooter span.ico_facebook {
                background-position: -130px 0;
            }
            #div_ECardFooter span.ico_linkedin {
                background-position: -195px 0;
            }
            #div_ECardFooter span.ico_download_vcf {
                background-position: -260px 0;
            }