body{
    font-size: 16px;
}
@media screen and (max-width:767px){
    body{
        font-size: 14px;
    }
}
/*------------------------ ส่วนหัวเว็บไซด์------------------------------*/
.webHeader img{
    float: left;
    width: 8%;
    margin:10px 10px 10px 0px;
}
.webHeader h2,.webHeader h4{
    text-shadow:1px 1px 8px black;
    color: white;
    font-weight: 300;
}
@media screen and (max-width:767px){
    .container-fluid .container{
        padding-left: 0px;
        padding-right: 0px;
    }
    .webHeader img{
        width: 60px;
        height:60px;
        margin:15px 10px 10px 0px;
    }
    .webHeader h2{
        font-size: 22px;
    } 
}
@media screen and (min-width:768px) and (max-width:991px){
    .webHeader img{
        width: 70px;
        height: 70px;
        margin:15px 10px 10px 0px;
    }
    .webHeader h2{
        font-size: 24px;
    } 
}
/*------------------------จบ ส่วนหัวเว็บไซด์----------------------------*/
/*/////////////////////////////////////////////////////////////////*/
/*-------------------------- slider -------------------------------*/
#index-slider{
    margin-top: 20px;
}
#index-slider .container{
    padding-left: 0px;
    padding-right: 0px;
}
@media screen and (max-width:767px){
    #index-slider{
        margin-top: 0px;
    }
}
/*------------------------ จบ slider ------------------------------*/
/*/////////////////////////////////////////////////////////////////*/
/*------------------------- icon menu -----------------------------*/
#index-iconmenu .container{
    background-color: #990000;
    margin-top: 0px;
}
#index-iconmenu .col-md-1{
    padding-left: 0px;
    padding-right: 0px;
}
#index-iconmenu .col-md-1 img{
    padding-top: 15px;
    margin: 0px auto;
    display: block;
}
#index-iconmenu .col-md-1 p{
    color: white;
    text-align: center;
}
#index-iconmenu .col-md-1 a:hover{
    color: white;

}
#index-iconmenu .col-md-1 a{
    display: block;
    height: auto;
    padding-bottom: 5px;
}
/*ใส่สี*/
#index-iconmenu-1,#index-iconmenu-8{
    background-color: #b30000;
}
#index-iconmenu-2,#index-iconmenu-7{
    background-color:#cc0000;
}
#index-iconmenu-3,#index-iconmenu-6{
    background-color:#e60000;
}
#index-iconmenu-4,#index-iconmenu-5{
    background-color:#ff0000;
}
/*small desktop*/
@media screen and (min-width:992px) and (max-width:1199px){
    #index-iconmenu .col-md-1 img{
        width: 60px;
    }
}
/*tablet*/
@media screen and (min-width:768px) and (max-width:991px){
    #index-iconmenu .container{
        padding-left: 0px;
        padding-right: 0px;
        background-color: white;
    }
    /*ใส่สี*/
    #index-iconmenu-1{
        background-color:#ff1a1a;
    }
    #index-iconmenu-2{
        background-color:#ff3333;
    }
    #index-iconmenu-3{
        background-color:#ff4d4d;
    }
    #index-iconmenu-4{
        background-color:#ff6666;
    }
    #index-iconmenu-5{
        background-color:#ff6666;
    }
    #index-iconmenu-6{
        background-color:#ff4d4d;
    }
    #index-iconmenu-7{
        background-color:#ff3333;
    }
    #index-iconmenu-8{
        background-color:#ff1a1a;
    }
    #index-iconmenu .col-md-1 a{
        padding-top: 10px;
    }
}
/*mobile*/
@media screen and (max-width:767px){
    #index-iconmenu .col-md-1 img{
        /*        display:  none;*/
    }
    #index-iconmenu .container{
        padding-left: 0px;
        padding-right: 0px;
    }
    /*ใส่สี*/
    #index-iconmenu-1{
        background-color: #e60000;
    }
    #index-iconmenu-2{
        background-color: #e60000;
    }
    #index-iconmenu-3{
        background-color:#e60000;
    }
    #index-iconmenu-4{
        background-color:#ff0000;
    }
    #index-iconmenu-5{
        background-color:#ff1a1a;
    }
    #index-iconmenu-6{
        background-color:#ff3333;
    }
    #index-iconmenu-7{
        background-color:#ff4d4d;
    }
    #index-iconmenu-8{
        background-color:  #ff6666;
    }
    #index-iconmenu .col-md-1 a{
        padding-top: 5px;
    }
    #index-iconmenu .col-md-1 a p{
        margin: 5px;
    }
}
/*------------------------ end icon menu---------------------------*/
/*/////////////////////////////////////////////////////////////////*/
/*-----------------------------News--------------------------------*/
#index-news{
    margin:30px 0px;
}
.index-news-headline h2{
    color: #cc0000;
    display: block;
}
.index-news-headline{
    border-bottom: 1px solid #cc0000;
    margin: 20px 0px;
}
#index-news a:hover{
    text-decoration: none;
    color: #cc0000;
}
#index-news-moreNews ul li{
    margin-bottom: 10px;
}
#index-news .col-sm-4 img{
    margin-bottom: 10px;
}
@media screen and (max-width:767px){
    #index-news .col-sm-4{
        padding-left: 0px;
        padding-right: 0px;
    }
    #index-news .col-sm-12{
        padding-left: 0px;
        padding-right: 0px;
    }
    .index-news-headline h2{
        font-size: 22px;
    }
    #index-news{
        margin-bottom: 10px;
    }
}
@media screen and (min-width:768px) and (max-width:991px){
    .index-news-headline h2{
        font-size: 26px;
    }
}
@media screen and (max-width:767px){
    #index-news{
        margin:15px 0px;
    }
}

/*----------------------------end News-----------------------------*/
/*/////////////////////////////////////////////////////////////////*/
/*------------------- supporting and calendar ---------------------*/
#index-calendar .col-md-6 a:hover{
    color: #cc0000;
}
#index-supporting .col-md-6 .col-xs-3 img{
    margin: 10px auto;
}
#index-integrationAndCalendar{
    margin-bottom: 20px;
}
@media screen and (min-width:768px) and (max-width:991px){
    #index-supporting .col-md-6 .col-xs-3 img{
        margin: 5px auto;
        width: 80px;
    }
}
@media screen  and (max-width:767px){
    #index-supporting .col-md-6 .col-xs-3 img{
        margin: 5px auto;
    }
    #index-calendar .col-md-6{
        padding-left: 0px;
        padding-right: 0px;
    }
    #index-supporting .col-md-6{
        padding-left: 0px;
        padding-right: 0px;
    }
}
/*------------ end supporting and calendar -------------*/
/*web structure*/
.web-structure{
    background-color: #f8f8f8;
    padding: 30px 0px;
}
.web-structure hr{
    border-bottom: 1px solid #a6a6a6;
}
.web-structure a img{
    width: 40px;
    height: 40px;
    margin-bottom: 15px;
}
.web-structure ul{
    padding-left: 20px;
}
.web-structure ul li{
    margin: 5px 0px;
}
.web-structure li a:hover{
    color: #000000;
    /*    text-decoration: none;*/
}
.web-structure li,.web-structure p,.web-structure a{
    font-size: 14px;
}
.web-structure h4{
    margin-bottom: 20px;
    color: #cc0000;
}  
@media screen and (max-width: 991px){
    .web-structure .col-md-8 .col-md-4{
        padding-left: 0px;
        padding-right: 0px;
    }
    .web-structure{
        padding: 15px 0px;
    }
    .web-structure ul{
        padding-left: 30px;
    }
    /*    .web-structure ul li{
            margin: 5px 0px;
        }*/
    /*accordion-box*/
    button.ws-accordion {
        background-color: #f8f8f8;
        padding: 10px 0px;
        width: 100%;
        text-align: left;
        border: none;
        outline: none;
        transition: 0.4s;
    }
    /*กล่องลิ้งค์*/
    div.ws-panel {
        padding: 0 18px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-out;

    }
    /*ไอคอน + -*/
    button.ws-accordion:after {
        content: '\002B';
        color: #777;
        font-weight: bold;
        float: right;
        margin-left: 5px;
    }
    button.ws-accordion.active:after {
        content: "\2212";
    }
    /*end accordion-box*/
    .web-structure hr{
        margin: 0px 0px;
    }

}
@media screen and (min-width:992px){
    .web-structure button.ws-accordion{
        display: none;
    }
}
/*end structure*/
/*#webStructure h5{
    color: #cc0000;
}*/
/*#webStructure ul{
    list-style-type: none;
}*/
/*.websHeader{
    color: #b30000;
    border-bottom: 1px solid #990000; 
    margin-top: 10px;
    margin-bottom: 10px;
}*/
/*End Web Structuer*/
/*---------------------------*/
/*Footer*/
.footer{
    background-color: #cc0000;
    padding-top: 10px;
}
.footer p, .footer a{
    font-size: 14px;
    color: white;
    text-align: center;
}
/*End Footer*/
/*---------------------------*/
/*เส้นใต้หัวข้อหลัก*/
.underline{
    display: block;
    border-bottom: 1px solid #000000;
    margin: 10px 0px 15px 0px; 
}
@media screen and (max-width:767px){
    .underline h2{
        font-size: 22px;
    }
}
@media screen and (min-width:768px) and (max-width:991px){
    .underline h2{
        font-size: 26px;
    }
}
.underlinegrey{
    display: block;
    border-bottom: 1px solid #E8E8E8 ;
    margin: 10px 0px 15px 0px; 
}
/*จบ เส้นใต้หัวข้อหลัก*/
/*---------------------------*/
/*///////ลบ เส้น ลิ้ง A////////*/
.tagA{
    color: black;
    text-decoration: none;
}
.tagA:hover{
    text-decoration: none;
}
.tagA:visited{
    text-decoration: none;
}
/*จบ เส้นใต้หัวข้อหลัก*/
/*---------------------------*/
/*----------หัวข้อทุกเพจ-------------*/
@media screen and (max-width:767px){
    .content-head{
        font-size: 20px;
    }
}
@media screen and (min-width:768px) and (max-width:1199px){
    .content-head{
        font-size: 28px;
    }
}
/*-------- จบหัวข้อ ----------------*/
/*-------- อ่านข่าวทั้งหมด -----------*/
.readMoreNews{
    float: right;
}
.readMoreNews a{
    color: black;
    font-size: 16px;
}
.readMoreNews img{
    width: 15px;
    height: 15px;
}
.readMoreNews span {
    color: #cc0000;
}
@media screen and (max-width:767px){
    .readMoreNews a{
        font-size: 14px;
    } 
    .readMoreNews img{
        width: 10px;
        height: 10px;
    }
}
/*-------- จบ อ่านข่าวทั้งหมด -----------*/
/*--------- web navigation ----------*/
.webNavi{
    margin: 10px 0px 10px 0px;
}
.webNavi a{
    color: black;
    font-size: 14px;
}
#webNavi-currentPage{
    color: #cc0000;
}
@media screen and (max-width:768px){
    .webNavi a{
        font-size: 12px;
    }
}
/*---------จบ web navigation -------*/
/*-------------------------------- pagination ------------------------------------------*/
#Pagination-style{
    text-align: center;
}
#Pagination-style .active a {
    background-color: #cc0000;
    border-color: #cc0000;
    color: white;
}
#Pagination-style li a {
    color: #cc0000;
}
/*-------------------------------- end pagination --------------------------------------*/
/*//////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////*/
/*--------------------------- กล่องข่าวรูปแบบที่ 1 news-style1 -------------------------------*/
.news-style1 img{
    padding-top: 15px;
}
.news-style1-text-wrapper{
    height: 250px;
    overflow: hidden;
}
.news-style1 a{
    color: black;
    text-decoration: none;
}
.news-style1 .col-md-3{
    padding-bottom: 15px;
}
.news-style1 .col-md-3:hover{
    background-color: 	#F8F8F8;
    color: #cc0000;
}
.news-style1-content{
    font-size: 16px;
}
.news-style1-date{
    font-size: 14px;
    color: gray;
}
@media screen and (max-width:767px){
    .news-style1 img{
        padding: 10px 0px;
        max-width: 120px;
        float: left;
        margin-right:10px;
    }
    .news-style1-text-wrapper{
        padding-top: 5px;
        padding-bottom: 1px;
    }
    .news-style1-text-wrapper{
        height: 120px;
    }
    .news-style1-date{
        padding-bottom: 10px;
    }
    .news-style1-content{
        font-size: 14px;
    }
    .news-style1-headline{
        font-size: 16px;
    }
}
@media screen and (min-width:768px) and (max-width:991px){
    .news-style1 img{
        width: 150px;
        float: left;
        margin-right: 15px;
    }
    .news-style1-text-wrapper{
        padding-top: 5px;
    }
    .news-style1 a{
        text-decoration: none;
    }
    .news-style1-text-wrapper{
        height: 150px;
    }
    .news-style1-text-wrapper{
        min-height: 150px;
    }
}
@media screen and (min-width:991px) and (max-width:1199px){
    .news-style1-text-wrapper{
        height: 270px;
    }
}
/*--------------------------- จบ กล่องข่าวรูปแบบที่ 1 news-style1 ----------------------------*/
/*//////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////*/
/*-------------------------หัวข้อหน้าเว็บ level2 class head2---------------------------------*/
.head2 hr{
    border-top: 1px solid darkgrey;
}
.head2 h2 img{
    width: 50px;
    height: 50px;
}
@media screen and (max-width:767px){
    .head2 h2{
        font-size: 22px;
    }
    .head2 h2 img{
        width: 30px;
        height: 30px;
    }
}
@media screen and (min-width:768px) and (max-width:991px){
    .head2 h2{
        font-size: 26px;
    }
    .head2 h2 img{
        width: 40px;
        height: 40px;
    }
}
/*---------------------จบ หัวข้อหน้าเว็บ level2 class head2----------------------------------*/
/*-------------------------หัวข้อหน้าเว็บ level-2 ไม่มีรูป+เส้นใต้ ---------------------------------*/
@media screen and (max-width:767px){
    .head-level-2{
        font-size: 18px;
    }
}
@media screen and (min-width:768px) and (max-width:991px){
    .head-level-2{
        font-size: 20px;
    }
}
/*---------------------จบ หัวข้อหน้าเว็บ level-2 ไม่มีรูป+เส้นใต้ ----------------------------------*/
/*-------------------------หัวข้อหน้าเว็บ level-3 ไม่มีรูป+เส้นใต้ ---------------------------------*/
@media screen and (max-width:767px){
    .head-level-3{
        font-size: 16px;
    }
}
@media screen and (min-width:768px) and (max-width:991px){
    .head-level-3{
        font-size: 18px;
    }
}
/*---------------------จบ หัวข้อหน้าเว็บ level-3 ไม่มีรูป+เส้นใต้ ----------------------------------*/
/*//////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////*/
/*--------------------- ตกแต่งตาราง class mytable-1---------------------------------------*/
.mytable-1{
    margin-top: 20px;
    margin-bottom: 20px;
}
.mytable-1 thead{
    background-color: #909090;
    color: white;
}
.mytable-1 thead th{
    text-align: center;
}
.mytable-1-head{
    font-weight: 700;
    background-color: #f8f8f8;
}
.mytable-1 tbody tr td img{
    display: block;
    margin: 0px auto;
    width: 30px;
    height: 30px;
}
/*---------------------จบ ตกแต่งตาราง class mytable-1-------------------------------------*/
/*--------------------- ตกแต่งตาราง class mytable-2---------------------------------------*/
.mytable-2{
    margin-top: 20px;
    margin-bottom: 20px;
}
.mytable-2 thead{
    background-color: #424242;
    color: white;
}
@media screen and (max-width:767px){
    .mytable-2{
        margin-top: 0px;
    }
}
/*---------------------จบ ตกแต่งตาราง class mytable-2-------------------------------------*/
/*--------------------- ตกแต่งตาราง class mytable-3---------------------------------------*/
.mytable-3{
    margin-top: 20px;
    margin-bottom: 20px;
}
.mytable-3 thead{
    background-color:#F0F0F0 ;
}
.mytable-3 thead th{
    text-align: center;
}
.mytable-3 tbody td{
    text-align: center;
}
@media screen and (max-width:767px){
    .mytable-3{
        margin-top: 0px;
    }
}
/*---------------------จบ ตกแต่งตาราง class mytable-3-------------------------------------*/
/*--------------------- ตกแต่งตาราง class mytable-4---------------------------------------*/
.mytable-4{
    margin-top: 20px;
    margin-bottom: 20px;
}
.mytable-4 thead{
    background-color:#F0F0F0 ;
}
.mytable-4 thead th{
    text-align: center;
}
.mytable-4 tbody td{
    text-align: center;
}
.mytable-4 tbody tr td:nth-child(2){
    text-align: left;
}
@media screen and (max-width:767px){
    .mytable-4{
        margin-top: 0px;
    }
}
/*---------------------จบ ตกแต่งตาราง class mytable-4-------------------------------------*/
/*--------------------- ตกแต่งตาราง class mytable-5---------------------------------------*/
.mytable-5{
    margin-top: 10px;
    margin-bottom: 20px;
}
.mytable-5 thead{
    background-color:#F0F0F0 ;
}
.mytable-5 thead th{
    text-align: center;
}
.mytable-5 tbody td{
    text-align: center;
}
.mytable-5 tbody tr td:nth-child(1){
    width: 50px;
}
.mytable-5 tbody tr td:nth-child(2){
    text-align: left;
}
@media screen and (max-width:767px){
    .mytable-5{
        margin-top: 0px;
        font-size: 14px;
    }

}
/*---------------------จบ ตกแต่งตาราง class mytable-5-------------------------------------*/
/*--------------------- ตกแต่งตาราง class mytable-6---------------------------------------*/
.mytable-6{
    margin-top: 10px;
    margin-bottom: 20px;
}
.mytable-6 thead{
    background-color:#F0F0F0 ;
}
.mytable-6 thead th{
    text-align: center;
}
.mytable-6 tbody tr td:nth-child(1){
    text-align: center;
}
@media screen and (max-width:767px){
    .mytable-6{
        margin-top: 0px;
        font-size: 14px;
    }

}
/*---------------------จบ ตกแต่งตาราง class mytable-6-------------------------------------*/
/*--------------------- ตกแต่งตาราง class mytable-7---------------------------------------*/
.mytable-7{
    margin-top: 10px;
    margin-bottom: 20px;
}
.mytable-7 thead{
    background-color:#F0F0F0 ;
}
.mytable-7 thead th{
    text-align: center;
}
@media screen and (max-width:767px){
    .mytable-7{
        margin-top: 0px;
        font-size: 14px;
    }

}
/*---------------------จบ ตกแต่งตาราง class mytable-7-------------------------------------*/
/*//////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////*/
/*------------------------------- กล่องไฮไลท์ข้อความ --------------------------------------*/
.content-highlight{
    background-color: #f8f8f8;
    border-left: 10px solid darkgrey;
    padding: 1px 20px 10px 20px;
    margin-bottom: 10px;
}
@media screen and (max-width:767px){
    .content-highlight{
        padding: 1px 10px 5px 10px;
    }
}
@media screen and (min-width:768px) and (max-width:991px){
    .content-highlight{
        padding: 1px 15px 10px 15px;
    }
}
/*------------------------------- จบ กล่องไฮไลท์ข้อความ------------------------------------*/
/*//////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////*/
/*------------------------------- ช่องว่างท้ายเพจ ------------------------------------------*/
.buttom-space{
    height: 80px;
    display:block;
}
@media screen and (max-width:767px){
    .buttom-space{
        height: 20px;
    }
}
@media screen and (min-width:768px) and (max-width:991px){
    .buttom-space{
        height: 50px;
    }
}
/*------------------------------- จบ ช่องว่างท้ายเพจ ---------------------------------------*/
/*//////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////*/
/*------------------- ฟอร์ม สไตส์ 1 myform-style-1----------------------------------------*/
.myform-style-1{
    background-color: #606060 ;
    padding: 20px 30px;
    color: white;
}
/*------------------------------- ฟอร์ม สไตส์ 1 myform-style-1 ---------------------------*/
/*//////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////*/
/*------------------- ฟอร์ม สไตส์ 2 myform-style-2----------------------------------------*/
.myform-style-2{
    background-color: #f0f0f0 ;
    padding: 20px 30px;
    border: 1px solid #E0E0E0;
}
@media screen and (max-width:767px){
    .myform-style-2{
        padding: 15px 20px 15px 20px;
    }
}
/*------------------ ฟอร์ม สไตส์ 1 myform-style-1 ---------------------------------*/
/*///////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/
/*------------------- ลบ padding ของ .row----------------------------------------*/
.no-padding>[class*='col-']{
    padding-left: 0px;
    padding-right: 0px;
}
/*------------------------------- จบ ช่องว่างท้ายเพจ ---------------------------------*/
/*------------------- เพิ่มระยะห่างระหว่างบรรทัด----------------------------------------*/
.increase-lineHeight{
    line-height: 150%;
}
/*--------------------------- จบ ช่องว่างท้ายเพจ -----------------------------------*/
/*search-box*/
.search-box{
    width: 30%;
    float: right;
}
.search-box input.gsc-search-button-v2 {
    width: auto;
    height: auto; 
}
.search-box .gsib_a {
    padding: 0px 0px 0;
}
.search-box .gsc-control-cse {
    padding: 7px 0px 5px 0px; 
}
.search-box input #gsc-i-id1{
    border-radius: 10px 10px;
}
.search-box .gsc-control-cse {
    font-family: inherit;
    background-color: transparent;
}
/*.search-box .gsc-control-cse {
    background-color: transparent;
}*/
/*tablet*/
@media screen and (min-width:768px) and (max-width:991px){
    .search-box{
        width: 70%;
        float: none;
        margin: 0px auto;
    }
}
/*mobile*/
@media screen and (max-width:767px){
    .search-box{
        width: 100%;
        float: none;
        margin-bottom: 20px;
    }
    .search-box .gsc-control-cse {
        border: none;
    }
}
/*end search-box*/