* {
    font-family: 'Sarabun', sans-serif;

    padding: 0;
    margin: 0;

    --content_width: 960px !important;
    --body_bg_main: rgba(204, 204, 204, 1.0);
    --content_bg_light_gray: rgba(248, 248, 248, 1.0);
    --home_menu_bg: rgba(242, 242, 242, 1.0);

    --text_title_color: rgb(120,180,180);

    --font_thai_normal: 'Sarabun', sans-serif;
    --font_thai_title: 'Noto Sans Thai', sans-serif;
    --font_section_en_large: 'IBM Plex Sans Thai', sans-serif;

    --text_hilight_color: rgb(0, 162, 255);
    --color_dark_gray   : rgb(90, 90, 95);
    --color_black       : rgb(0,0,0);
    --color_h2          : rgb(60,65,100);
    --color_h3          : rgb(80,80,80);

    --padding_4px :  4px  4px  4px  4px;
    --padding_8px :  8px  8px  8px  8px;
    --padding_10px: 10px 10px 10px 10px;
    --padding_16px: 16px 16px 16px 16px;

    --theme_blue_gradient_to_top : linear-gradient(to top, rgba(27, 50, 124, 0.76), rgb(0, 110, 255));
    --theme_blue_gradient_to_bottom : linear-gradient(to bottom, rgba(27, 50, 124, 0.76), rgb(0, 110, 255));
    --theme_blue_gradient_to_left : linear-gradient(to left, rgba(27, 50, 124, 0.76), rgba(0, 110, 255, 1.0));
    --theme_blue_gradient_to_right: linear-gradient(to right, rgba(27, 50, 124, 0.76), rgb(0, 110, 255));
    
    box-sizing: border-box;
}

body {
    background-color: var(--body_bg_main);
}

.hidden { display: none; height: 0% !important}

.padding_all_4  {padding:  4px  4px  4px  4px;}
.padding_all_8  {padding:  8px  8px  8px  8px;}
.padding_all_16 {padding: 16px 16px 16px 16px;}
.padding_all_32 {padding: 32px 32px 32px 32px;}

.border_radius_all_2 { border-radius: 2px 2px 2px 2px;}
.border_radius_all_4 { border-radius: 4px 4px 4px 4px;}
.border_radius_all_8 { border-radius: 8px 8px 8px 8px;}

.width_5p   { width:   5% !important; }
.width_10p  { width:  10% !important; }
.width_15p  { width:  15% !important; }
.width_20p  { width:  20% !important; }
.width_25p  { width:  25% !important; }
.width_30p  { width:  30% !important; }
.width_40p  { width:  40% !important; }
.width_50p  { width:  50% !important; }
.width_60p  { width:  60% !important; }
.width_70p  { width:  70% !important; }
.width_75p  { width:  75% !important; }
.width_80p  { width:  80% !important; }
.width_90p  { width:  90% !important; }
.width_100p { width: 100% !important; }

.vertical_spacing_5px  { width: 100% !important; height:  5px !important; }
.vertical_spacing_8px  { width: 100% !important; height:  8px !important; }
.vertical_spacing_10px { width: 100% !important; height: 10px !important; }
.vertical_spacing_16px { width: 100% !important; height: 16px !important; }
.vertical_spacing_32px { width: 100% !important; height: 32px !important; }
.vertical_spacing_64px { width: 100% !important; height: 64px !important; }

.align_left { text-align: left; }
.align_right { text-align: right; }
.align_center { text-align: center ; }

.valign_top { vertical-align: middle;}

.float_left  { float: left; }
.float_right { float: right; }
.clear_float { clear: both; }

.title_font {
    font-family: 'Noto Sans Thai', sans-serif;
}

/* page_container */
#page_container {
    border: 0px solid red;
    width: var(--content_width);
    margin: auto;
}

/* header_container */
#header_container {
    border: 0px solid red;
    background-color: var(--body_bg_main);
    width: 100% !important;
    height: 100px !important;
}

#header_data {
    background-color: var(--body_bg_main);
    width: 100% !important;
    height: 70px !important;
}

#header_data #header_logo {
    float: left;
    border: 0px solid red;
    width: 50% !important;
    height: 100% !important;
    padding-left: 24px;
    padding-top: 12px;
}

#header_data #header_logo img {
    border: 0px solid red;
    width: 165px !important;
    height: 48px !important;
}

#header_data #header_menu {
    float: right;
    font-size: 14pt;
    text-align: right;
    width: 50% !important;
    height: 100% !important;
    padding: 30px 20px 0px 0px;
}

#header_data #header_menu ul {
    float: right;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100% !important;
    /*background-color: #333;*/
}

#header_data #header_menu li {
    float: left;
    color: rgb(180,180,180);
    /*width: 150px !important;*/
    height: 100% !important;
    padding: 0px 8px 0px 8px;
}

#header_data #header_menu li a {
    display: block;
    /*color: white;*/
    color: rgb(100,100,100);
    text-align: center;
    /*padding: 14px 16px;*/
    padding: 4px 0px 0px 0px;
    text-decoration: none;
}

#header_data #header_menu li a:hover {
    color: rgb(0,0,0);
    /*background-color: var(--content_bg_light_gray);*/
    height: 100% !important;
}

#content_top {
    background-color: rgb(255,255,255);
    width: 100% !important;
    height: 30px !important;
    border-radius: 24px 24px 0px 0px;
}

/* banner_container */
#banner_container {
    background-image: url(../images/banner_background.png);
    border: 0px solid red;
    background-color: rgb(0,0,0);
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 250px !important;
}

/* content_container */
#content_container {
    background-color: rgb(255,255,255);
    border: 0px solid red;
    width: 100% !important;
}

#content_container #home_main_menu {
    background-color: var(--home_menu_bg);
    border-bottom: 1px solid var(--body_bg_main);
    width: var(--content_width);
    height: 35px !important;

}


/* footer_container */
#footer_container {
    border: 0px solid red;
    background-color: rgb(255,255,255);
    width: 100% !important;
    text-align: center;
    padding: 24px 24px 24px 24px;
    border-radius: 0px 0px 24px 24px;
    margin-bottom: 24px;
}
#footer_container #logo_block {
    padding: 24px 12px 24px 12px;
}
#footer_container .footer_logo {
    border: 0px solid red;
    width: 48px !important;
    height: 48px !important;
    opacity: 0.25;
}
#footer_container .footer_logo:hover {
    border: 0px solid red;
    width: 48px !important;
    height: 48px !important;
    opacity: 1.0;
}

/* ----------------------------------------- */
/* ็HOME MENU */
/* ----------------------------------------- */
#home_main_menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100% !important;
    /*background-color: #333;*/
}

#home_main_menu li {
    float: left;
    color: rgb(180,180,180);
    width: 120px !important;
    height: 100% !important;
    padding: 0px 0px 0px 0px;
}

#home_main_menu li a {
    display: block;
    /*color: white;*/
    color: rgb(120,120,120);
    text-align: center;
    /*padding: 14px 16px;*/
    padding: 4px 0px 0px 0px;
    text-decoration: none;
    border-bottom: 2px solid rgb(0, 0, 0) transparent;
}

#home_main_menu li a:hover {
    color: rgb(255, 255, 255);
    /*background-color: var(--content_bg_light_gray);*/
    background-color: rgb(100,100,100);
    height: 100% !important;
    border-bottom: 2px solid rgb(0, 0, 0);
    /*background-image: var(--theme_blue_gradient_to_left);*/
    animation-name: home_menu_animation;
    animation-duration: 0.2s;
    animation-fill-mode: reverse;
}
@keyframes home_menu_animation {
    from {
        background-color: rgb(255, 0, 0);
        margin-left: 0px;
        margin-right: 0px;
    }
    to {
        background-color: rgb(100,100,100);
        margin-left: 4px;
        margin-right: 4px;
    }
}

#banner_container {

}

#banner_container:hover #banner_company_info_overlay {
  height: 100%;
}

#banner_company_info_name {
    font-family: var(--font_section_en_large);
    color: white;
    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

#banner_company_info_name h3 {
    font-weight: normal;
    font-size: 42pt;
}

#banner_company_info_overlay {
    position: relaitve;
    bottom: 0;
    left: 0;
    right: 0;
    /*background-color: rgba(5, 105, 255, 0.5);*/
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease;
    background-image: var(--theme_blue_gradient_to_left);
}

#banner_company_info_overlay .inputbutton {
    width: 150px !important;
    height: 30px !important;
    background-color: rgb(255, 255, 255);
    border: none;
    border-radius: 4px 4px 4px 4px;
    
}