:root {
    --font-family: "Jost", "SimSun", Arial, serif;

    --font-size-sm: 14px;
    --font-size: 16px;
    --font-size-lg: 20px;
    --font-size-ml: 22px;
    --font-size-xl: 26px;
    --font-size-title: 30px;
    --font-size-h2: 28px;
    --font-size-h3: 24px;
    --line-height: 1.3;
    --line-height-p: 1.67;
    --margin-p: 30px;

    --max-width: 1920px;
    --container-width: min(100%, 1420px);
    --content-width: min(100%, 1100px);

    --main-padding: 20px;
    --nav-padding: 10px;

    --theme-color-1: #F17A17;
    --theme-color-2: #00173D;
    --theme-color-3: #42414A;
    --theme-color-4: #FFDEC3;
    --theme-color-5: #FFA963;
    --theme-color-6: #9C7D21;

    --primary-color: var(--theme-color-1);
    --secondary-color: var(--theme-color-6);
    --tertiary-color: var(--theme-color-2);

    --border-color-1: #707070;

    --header-logo-width: 240px;
    --footer-logo-width: 240px;

    --header-height: 90px;
    --header-bg-color: #ffffff;
    --header-nav-color: var(--theme-color-2);
    --header-nav-bg-color: #ffffff;
    --header-pulldown-bg-color: #ffffff;
    --header-font-size: 18px;
    --header-font-size-sm: 15px;
    --header-nav-size: 16px;
    --header-weight: 500;
    --header-padding: 20px;
    --header-color: var(--theme-color-6);

    --footer-max-width: min(100%, 1200px);
    --footer-bg-color: var(--theme-color-2);
    --footer-font-color: #ffffff;
    --footer-font-size: 16px;
    --footer-sitemap-title: 18px;
    --footer-title-weight: 500;
    --footer-border: 1px solid var(--footer-bg-color);

    --section-banner-height: 300px;
    --banner-content-bg: #ffffff;
    --banner-title: 36px;
    --banner-title-weight: 500;
    --breadcrumb-size: 16px;
    --breadcrumb-weight: 600;
    --breadcrumb-padding: 12px;
    --breadcrumb-bg-color: var(--theme-color-1);
    --breadcrumb-color: #ffffff;
    --breadcrumb-width: var(--content-width);

    --content-color: var(--theme-color-3);
    --title-color: var(--theme-color-2);
    --subtitle-color: var(--theme-color-1);
    --h2-color: var(--theme-color-1);
    --h3-color: var(--theme-color-2);
    
    --link-color: var(--theme-color-6);
    --link-hover-color: var(--theme-color-1);
    
    --title-weight: 500;
    --subtitle-weight: 500;
    --h2-weight: 500;
    --h3-weight: 500;
    --date-weight: 600;

    --title-margin: 40px;

    --table-bg: #ffffff;
    --table-bg-dark: #eeeeee;
    --table-padding: 4px;
    --font-thead: 14px;
    --font-tbody: 12px;
}
@media screen and (min-width: 768px) {
    :root {        
        --table-padding: 10px;
        --font-thead: 16px;
        --font-tbody: 14px;
    }
}
@media screen and (min-width: 1200px) {
    :root {     
        --font-size-sm: 16px;
        --font-size: 18px;
        --font-size-lg: 22px;
        --font-size-ml: 24px;
        --font-size-xl: 40px;
        --font-size-title: 40px;
        --font-size-h2: 32px;
        --font-size-h3: 28px;

        --header-logo-width: 340px;
        --footer-logo-width: 300px;
        
        --header-height: 116px;
        --header-font-size: 18px;

        --footer-font-size: 16px;
        --footer-sitemap-title: 18px;

        --section-banner-height: 400px;
        --banner-title: 56px;
        --breadcrumb-size: 16px;
        
        --title-margin: 40px;
        
        --table-padding: 15px;
        --font-thead: 20px;
        --font-tbody: 18px;
    }
}