@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;1,400&family=Noto+Sans+SC:wght@200;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

html {
    scroll-behavior: smooth;
}

body {
    position:relative;
    background: #f5f5f5;
}

/* *{
    font-family: 'Microsoft YaHei', sans-serif;
    font-size: 1.5rem;
} */
/** container */
.container-fullwidth {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
.container-1024 {
    width: 100%;
    max-width: 1024px;
    padding: 0 15px;
    margin: 0 auto;
    text-align: center;
    min-width: 320px;
}
.container-1440 {
    width: 100%;
    height: 100%;
    max-width: 1440px;
    padding: 0 15px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.row {
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}
/** padding */
.pt-20 { padding-top: 20px}
.pt-30 { padding-top: 30px}
.pt-50 { padding-top: 50px}
.pb-20 { padding-bottom: 20px}
.pb-30 { padding-bottom: 30px}
.pb-50 { padding-bottom: 50px}

/** margin */
.mt-10 { margin-top: 10px}
.mt-20 { margin-top: 20px}
.m-auto { margin: 0 auto }

/** display and position */
.d-block { display: block; }
.d-flex { display: flex; }
.fd-row { flex-direction: row; }
.fd-column { flex-direction: column; }
.relative { position: relative; }

/** Align and justify **/
.ai-center { align-items: center; }
.ai-start { align-items: flex-start; }
.ac-center { align-content: center; }
.jc-center { justify-content: center; }
.jc-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

/** text */ 
.text-xxl { font-size: 56px }
.text-heading { font-size: 40px }
.text-sub-heading { font-size: 30px }
.text-content { font-size: 20px }
.text-sub-content { font-size: 16px }

.text-primary { color: #0e50b0 !important; }
.text-secondary { color: #ffa41e !important ; }
.text-tertiary { color: #0db0e6 !important ; }
.text-dark-blue { color: #32455f !important ; }
.text-white { color: #ffffff !important ; }
.text-black { color: #000000 !important ; }

.fw-400 { font-weight: 400 }
.fw-900 { font-weight: 900 }
.light { font-weight: 200 !important}
.regular { font-weight: 400 !important}
.bold { font-weight: 700 !important}
.italic { font-style: italic !important}
.capitalize { text-transform: capitalize !important}

@media only screen and (max-width: 1200px) {
    .text-xxl { font-size: 40px }
    .text-heading { font-size: 32px }
    .en-version .text-sub-heading { font-size: 20px }
    .cn-version .text-sub-heading { font-size: 22px }
    .en-version .text-heading { font-size: 24px }
    .cn-version .text-heading { font-size: 26px }
}

@media only screen and (max-width: 912px) {
    .text-xxl {font-size: 28px}
}
@media (min-width: 561px ) and (max-width: 1200px) {
    .text-content { font-size: 16px }
    .text-sub-content { font-size: 14px } 
}
@media (min-width: 340px) and (max-width: 560px) {
    .text-content { font-size: 18px }
    .text-sub-content { font-size: 16px }
    
}