@charset "utf-8";
:root{
    --view-height: calc((var(--vh, 1vh) * 100));

    --logo-width: 263px;
    --logo-height: 44px;
    
    --primary-lighten5: #F3E8FA;
    --primary-lighten4: #DEC7F0;
    --primary-lighten3: #CAA9E8;
    --primary-lighten2: #9A72D6;
    --primary-base: #6941C5;
    --primary-darken1: #5835B0;
    --primary-darken2: #432594;
    
    --secondary-lighten5: #EBF5FC;
    --secondary-lighten4: #CDE6FA;
    --secondary-lighten3: #ABD0F5;
    --secondary-lighten2: #73A3F0;
    --secondary-base: #3D6EE8;
    --secondary-darken1: #305BD1;
    --secondary-darken2: #2144AD;
    --secondary-darken3: #2144AD;

    --danger-base: #DF0000;
    --danger-lighten5: #ffe6e6;
    --warning-base: #EFE73B;
    --success-base: #008A1E;
    --info-base: #4659E3;

    --grey-lighten5: #F8F8F8;
    --grey-lighten4: #DDD;
    --grey-lighten3: #C6C6C6;
    --grey-lighten2: #AAA;
    --grey-lighten1: #747B8D;
    --grey-base: #555; 
    --grey-darken1: #444;
    --grey-darken2: #333;
    --grey-darken3: #222;
    --grey-darken4: #111111;

    --border-color: var(--grey-lighten4);

    --container-lg: 1760px;
    --container: 1440px;
    --container-md: 1300px;
    --container-sm: 1010px;
    --container-gutter: 20px;;

    --timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
    --transition: .45s var(--timing-function);

    /* Header */
    /* --header-head: 68px;
    --header-body: 80px; */
    --header-height: 90px;

    /* --header-bg-height: 302px; */

    /* Typography */
    --tit-font-size-xxs: 20px;
    --tit-font-size-xs: 24px;
    --tit-font-size-sm: 26px;
    --tit-font-size-md: 28px;
    --tit-font-size: 34px;
    --tit-font-size-lg: 50px;

    --txt-font-size-xs: 12px;
    --txt-font-size-sm: 14px;
    --txt-font-size: 16px; 
    --txt-font-size-lg: 18px;
    --txt-font-size-xl: 19px;

    /* Input */
    --input-height: var(--btn-height-lg);
    --input-border-color: var(--primary-lighten5);
    --input-bg-color: var(--primary-lighten5);
    --input-font-size: 16px;
    --input-border-radius: 8px;
    --input-padding: 20px;
    
    --input-height-sm: var(--btn-height-sm);
    --input-padding-sm: 18px;

    --control-icon-size: 20px; 
    --control-label-font-size: 16px; 
    --control-label-color: var(--grey-darken4); 
    --control-gap: 8px;

    /* Grid gutter */
    --gutter-xxs: 4px;
    --gutter-xs: 5px;
    --gutter-sm: 8px;
    --gutter: 10px;
    --gutter-lg: 15px;
    
    /* Rounded */
    --rounded-sm: 6px;
    --rounded: 15px;

    /* Button */
    --btn-height-xxs: 26px;
    --btn-height-xs: 32px;
    --btn-height-sm: 40px;
    --btn-height: 44px;
    --btn-height-lg: 50px;
    
    --btn-padding-xxs: 0 6px;
    --btn-padding-xs: 0 12px;
    --btn-padding-sm: 0 16px;
    --btn-padding: 0 25px;
    --btn-padding-lg: 0 30px;
    
    --btn-font-size-xxs: 12px;
    --btn-font-size-xs: 14px;
    --btn-font-size-sm: 14px;
    --btn-font-size: 16px;
    --btn-font-size-lg: 18px;
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
    :root{
        /* --header-head: 62px;
        --header-body: 56px;

        --logo-width: 154px;
        --logo-height: 24px;
         */
    }
}
@media screen and (max-width: 1023px){
    :root{
        --header-height : 72px;
        --logo-width: 200px;
    }
}
@media screen and (max-width: 767px){
    :root{


        --tit-font-size-xxs: 18px;
        --tit-font-size-xs: 20px;
        --tit-font-size-sm: 24px;
        --tit-font-size-md: 26px;
        --tit-font-size: 28px;
        --tit-font-size-lg: 34px;

        --txt-font-size-xs: 12px;
        --txt-font-size-sm: 12px;
        --txt-font-size: 14px; 
        --txt-font-size-lg: 16px;
        --txt-font-size-xl: 18px;

        --btn-height: 40px;
        --btn-height-lg: 46px;
        
        --btn-padding: 0 16px;
        --btn-padding-lg: 0 20px;
        
        --btn-font-size: 14px;
        --btn-font-size-lg: 16px;

        --input-font-size: 14px;
        --input-padding: 16px;
        
        --control-label-font-size: 14px; 
        --control-gap: 6px;
    }
}

@media screen and (max-width: 500px){
    :root {
        --logo-width: 180px;
    }
}