/* 
    Document   : custom
    Created on : Aug 19, 2013, 2:46:38 PM
    Author     : kae
    Description:
        Purpose of the stylesheet follows.
*/

@charset "utf-8";

@font-face {
    font-family: ThaiSansLite;
    font-style: normal;
    src: url('../font/thaisanslite_r1.otf');
}

@font-face {
    font-family: ThaiSansLite;
    font-style: normal;
    src: url('../font/thaisanslite_r1.ttf');
}

/*Icons*/
.icon_social_box{ position: absolute; z-index: 999; }
.icon_social_facebook{ background: url('../img/icons/social_icons.png'); width: 45px; height: 45px; display: block; }
.icon_social_google{ background: url('../img/icons/social_icons.png') -146px -45px; width: 45px; height: 45px; display: block; }
.icon_social_youtube{ background: url('../img/icons/social_icons.png') 0px -45px; width: 45px; height: 45px; display: block; }
.icon_social_twitter{ background: url('../img/icons/social_icons.png') -50px 0px; width: 45px; height: 45px; display: block; }

/** Paging **/
.paging_counter{ text-align: center; }
.paging {
    text-align: center;
}
.paging .current,
.paging .disabled,
.paging a {
    text-decoration: none;
    padding: 5px 8px;
    display: inline-block
}
.paging > span {
    display: inline-block;
    border: 1px solid #ccc;
    border-left: 0;
}
.paging > span:hover {
    background: #efefef;
}
.paging .prev {
    border-left: 1px #ccc solid;
}
.paging .next {

}
.paging .disabled {
    color: #ddd;
}
.paging .disabled:hover {
    background: transparent;
}
.paging .current {
    background: #efefef;
    color: #c73e14;
}

body{ background-color: #ffffff; font-family: "kwamsookregular"; font-size: 16px; }
.showborder{ border: 1px red solid; }
.clear{ clear: both; }
a{ color: #212121; }
a:hover{ color: #727608; }
h3{ padding: 0px; margin: 0px; font-size: 120%; font-weight: bold; }
.remark{ font-size: 11px; color: #c73e14; padding: 2px; }
.blocks{ border-top-left-radius : 10px; border-top-right-radius : 10px; display: block; background: url('../img/main-right.jpg') repeat-x #FFFFFF; }
.block-left{ background-color: #d9d7d8; padding: 10px; margin: 10px; }
.block-right{ text-align: center; background-color: #d9d7d8; padding: 10px; margin: 10px 10px 10px 0px; min-height: 370px; }

.container{ padding: 0px; margin: 0px auto; }
.row{ padding: 0px; margin: 0px; }
.col-md-12,.col-md-11,.col-md-10,.col-md-9,.col-md-8,.col-md-7,.col-md-6,.col-md-5,.col-md-4,.col-md-3,.col-md-2,.col-md-1{ padding: 0px; margin: 0px; }

input[type="text"], input[type="password"]{ padding: 10px; font-size: 15px; }
select{ padding: 10px; font-size: 15px; }

h1,h2,h3,h4{ }

/*Nav Default*/
.navbar-desktop{  }
#navbar{ width: 100%; padding: 0px 0px 0px 0px; margin: 7px 0px 0px 0px; }
#navbar ul{ width: 100%; padding: 0px; margin: 0px; }
#navbar ul li{ list-style: none; float: left; overflow: hidden; width: 15%; height: 69px; margin: 0px 0px 0px 0px; padding: 0px 0px; text-align: center; }
#navbar ul li.menu1{ background: url('../img/header-menu/menu-1.jpg') no-repeat center; }
#navbar ul li.menu1active{ background: url('../img/header-menu/menu-1-active.jpg') no-repeat center; }
#navbar ul li.menu2{ background: url('../img/header-menu/menu-2.jpg') no-repeat center; }
#navbar ul li.menu2active{ background: url('../img/header-menu/menu-2-active.jpg') no-repeat center; }
#navbar ul li.menu3{ background: url('../img/header-menu/menu-3.jpg') no-repeat center; }
#navbar ul li.menu3active{ background: url('../img/header-menu/menu-3-active.jpg') no-repeat center; }
#navbar ul li.menu4{ background: url('../img/header-menu/menu-4.jpg') no-repeat center; }
#navbar ul li.menu4active{ background: url('../img/header-menu/menu-4-active.jpg') no-repeat center; }
#navbar ul li.menu5{ background: url('../img/header-menu/menu-5.jpg') no-repeat center; }
#navbar ul li.menu5active{ background: url('../img/header-menu/menu-5-active.jpg') no-repeat center; }
#navbar ul li.menu6{ background: url('../img/header-menu/menu-6.jpg') no-repeat center; }
#navbar ul li.menu6active{ background: url('../img/header-menu/menu-6-active.jpg') no-repeat center; }
#navbar ul li:hover{ cursor: pointer; }
#navbar ul li a{ color: #fff; }
#navbar ul li a div{ width: 100%; height: 69px; vertical-align: bottom; display: table-cell; line-height: 30px; }
#navbar ul li a:hover{ background: none; }
#navbar ul li.spliter{ background: url('../img/header-menu/spliter.jpg') no-repeat; width: 10px; margin: 0px 0px 0px 6px; padding: 0px; }
#navbar ul li:hover .lev1{ display: block; }

#navbar ul li .lev1{ position: absolute; margin-top: -5px; z-index: 99; display: none; width: 295px; border-top-style: solid; border-top-width: 4px; border-top-color: rgb(236, 116, 6); background-color: #2da889; }
#navbar ul li .lev1 li{ float: none; padding: 5px 0px 5px 10px; text-align:left; width: 100%; height: auto; line-height:26px; border-bottom:1px solid #eeeeee; border-left:1px solid #eeeeee; border-right:1px solid #eeeeee; white-space: nowrap; }
#navbar ul li .lev1 li:hover{ background-color: #169d7b; }
#navbar ul li .lev1 li a{ font-size: 16px; color: #ffffff; }

/*Nav Mobile*/
.navbar-mobile{ display: none; height: 69px; margin: 15px 0px 0px 0px; }
.navbar-mobile img{ cursor: pointer; }
.navbar-mobile .nav-short{ float: right; }
.navbar-mobile .nav-short ul{  }
.navbar-mobile .nav-short ul li{ float: right; padding: 5px 0px 0px 0px; list-style: none; }
.navbar-mobile .nav-slide{ display: none; position: relative; z-index: 999; }
.navbar-mobile .nav-slide ul{ padding: 0px; margin: 15px 0px 0px 0px; background: #FFFFFF; }
.navbar-mobile .nav-slide ul li{ padding: 10px; border-bottom: 1px #f86b01 solid; cursor: pointer; list-style: none; }
/*.navbar-mobile .nav-slide ul li:hover{ background-color: #f6f2e7; }*/
.navbar-mobile .nav-slide ul li a{ padding: 0px; margin: 0px; font-size: 16px; }

.navbar-mobile ul li .lev1{ width: 100%; padding: 5px 0px 0px 0px; margin: 0px; }
.navbar-mobile ul li .lev1 li{ float: none; list-style: circle; list-style-position: inside;  border-bottom: 0px; padding: 5px 0px 5px 10px; text-align:left; width: 100%; height: auto; line-height:26px; white-space: nowrap; }
.navbar-mobile ul li .lev1 li:hover{ }
.navbar-mobile ul li .lev1 li a{ font-size: 16px;}

.footer_social_map_md{}
.footer_social_map_xd{ display: none; padding: 30px 0px; }

.home-booklet{ background: url('../img/home_bg_book.jpg') no-repeat; display: table; width: 100%; height: 278px; }
.home-booklet .body{ overflow: hidden !important; margin: 43px 0px 0px 70px; width: 530px; height: 180px; }
.home-booklet .body .inner{ height: 180px; width: 800px; left: 0px; }
.home-booklet .body .inner .item{ float: left; overflow: hidden !important; width: 130px; height: 180px; margin-right: 3px; }
.home-booklet .body .inner .item img{ width: 100%; height: 180px; }
.home-booklet .body .inner .item .overlay{ position: absolute; width: 130px; height: 180px; text-align: center; display: none; }
.home-booklet .body .inner .item:hover .overlay{ display: table-cell; vertical-align: middle; padding: 30px 5px 5px 5px; background: url('../img/overlay1.png'); color: #fff; }
.home-booklet .nav-prev{ background: url('../img/icons/icon-next-prev.png') -48px 0px no-repeat; width: 48px; height: 74px; float: left; margin: 90px 0px 0px 7px; cursor: pointer; }
.home-booklet .nav-next{ background: url('../img/icons/icon-next-prev.png') no-repeat; width: 48px; height: 74px; float: right; margin: 90px 7px 0px 0px; cursor: pointer; }

.search_list{}
.search_list ul{ margin: 0px; padding: 0px; }
.search_list ul li{ list-style: none; }
.search_list ul li .posted{ font-size: 12px; color: #999; padding-bottom: 10px; }
.search_list ul li h2{ margin-top: 0px; margin-bottom: 5px; }

#home_multimedia .home_multi_head {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
    position: relative;
}
#home_multimedia .home_multi_head ul {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
}
#home_multimedia .home_multi_head ul li.ones, #home_multimedia .home_multi_head ul li.twos {
    width: 40%;
    padding: 8px 16px;
    border-top: 1px solid #d9d9d9;
    border-left: 1px solid #d9d9d9;
    line-height: 27px;
    float: left;
    margin: 0;
    overflow: hidden;
}
#home_multimedia .home_multi_head ul li.ones {
    background: #ededed;
}
#home_multimedia .home_multi_head ul li.twos {
    border-right: 1px solid #d9d9d9;
    background: #FFF;
}
#home_multimedia .home_multi_head ul li.ones h3.one {
    width: 66%;
    margin: 0;
    padding: 5px 0 0 5%;
    overflow: hidden;
    float: left;
    background: url(/images/home_bg_title.png) 0 7px no-repeat;
    font-size: 17px;
    cursor: pointer;
}
#home_multimedia .home_multi_head ul li.twos h3.two {
    width: 66%;
    margin: 0;
    padding: 5px 0 0 5%;
    overflow: hidden;
    float: left;
    background: url(/images/home_bg_title.png) 0 -30px no-repeat;
    font-size: 17px;
    cursor: pointer;
}
#home_multimedia .home_multi_head ul li a {
    width: 10%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: right;
    color: #366;
}
#home_multimedia .home_multi_show {
    width: 100%;
    height: auto;
    margin: -1px 0 0;
    padding: 17px 19px;
    overflow: hidden;
    float: left;
    border: 1px solid #d9d9d9;
    background: #ededed;
}
#home_multimedia .home_multi_show .home_multi_list, #home_multimedia .home_multi_show .home_multi_list_gallery {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
}
#home_multimedia .home_multi_show #home_casegallery {
    display: none;
}
.home_multi_list .home_vdo1 {
    width: 50%;
    /*height: 250px;*/
    margin: 0 2% 0 0;
    padding: 0;
    overflow: hidden;
    float: left;
    text-align: center;
    position: relative;
    background: #000;
}
.home_multi_list .home_vdo1 .bg_black {
    width: 100%;
    height: 240px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: none;
}
.home_multi_list .home_vdo1 .home_hover_vdo {
    width: 100%;
    height: 480px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: .6;
    filter: alpha(opacity=60);
    background: #84bdaa;
}
.home_multi_list .home_vdo1 .zoom {
    width: 83%;
    height: 35%;
    float: left;
    text-align: center;
    z-index: 2;
    position: relative;
    background: url(/images/enter_icon_zoom.png) center 70px no-repeat;
    color: #fff;
    padding: 40% 5% 0;
    font-size: 88%}
.home_multi_list ul, .home_multi_list ul li, .home_multi_list ul li .images {
    padding: 0;
    float: left;
    overflow: hidden;
}
.home_multi_list .home_vdo1:hover .bg_black {
    display: block;
}
.home_multi_list ul {
    width: 48%;
    margin: 0;
}
.home_multi_list ul li {
    width: 50%;
    margin: 0 0 4%;
    position: relative;
    list-style: none;
}
.home_multi_list ul li .images {
    width: 100%;
    /*height: 119px;*/
    margin: 0;
    position: relative;
    background: #000;
}
.home_multi_list ul li .images .bg_black {
    width: 100%;
    height: 240px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: none;
}
.home_multi_list ul li .images .home_hover_vdo {
    width: 100%;
    height: 240px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: .6;
    filter: alpha(opacity=60);
    background: #84bdaa;
}
.home_multi_list ul li .images .zoom {
    width: 90%;
    height: 35%;
    float: left;
    text-align: center;
    z-index: 2;
    position: relative;
    background: url(/images/enter_icon_zoom.png) center 30px no-repeat;
    color: #fff;
    padding: 44% 5% 0;
    font-size: 88%}
.home_multi_list ul li .images:hover .bg_black {
    display: block;
}
.home_multi_list ul li .vdo_title {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
    text-align: center;
    position: absolute;
    left: 0;
    top: 15%;
    z-index: 1;
    display: none;
}
.home_multi_list ul li .vdo_title a {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
    text-align: center;
    font-family: kalatexaregular;
    font-size: 14px;
    color: #FFF;
}
.home_multi_list_gallery ul {
    width: 102%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
}
.home_multi_list_gallery ul li {
    width: 33.3%;
    margin: 0 0 3%;
    padding: 0;
    overflow: hidden;
    float: left;
    position: relative;
    list-style: none;
}
.home_multi_list_gallery ul li .bg_black {
    width: 95%;
    /*height: 240px;*/
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: none;
}
.home_multi_list_gallery ul li:hover .bg_black, .w2bslikebox {
    display: block;
}
.home_multi_list_gallery ul li .home_hover_vdo {
    width: 100%;
    height: 480px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: .6;
    filter: alpha(opacity=60);
    background: #84bdaa;
}
.home_multi_list_gallery ul li .zoom {
    width: 90%;
    /*height: 35%;*/
    float: left;
    text-align: center;
    z-index: 2;
    position: relative;
    background: url(/images/enter_icon_zoom.png) center 20px no-repeat;
    color: #fff;
    padding: 24% 5% 0;
    font-size: 88%}
.home_multi_list_gallery ul li .images {
    width: 95%;
    /*height: 135px;*/
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
}
.home_multi_list_gallery ul li .vdo_title {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
    text-align: center;
    position: absolute;
    left: 0;
    top: 15%;
    z-index: 1;
    display: none;
}
.home_multi_list_gallery ul li .vdo_title a {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
    text-align: center;
    font-family: kalatexaregular;
    font-size: 14px;
    color: #FFF;
}
#home_multimedia .home_content_left #home_books {
    width: 100%;
    height: 316px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
    background: #F0C;
}

.home-logo{ padding-left: 40px; }

.toolbar-social{ padding-right: 50px; }
.toolbar-social .item{ float: left; width: 35px; height: 33px; overflow: hidden; }
.toolbar-social .item span{ padding-left: 40px; text-indent: 1000px; }
.toolbar-social .facebook{ background: url('../img/home_fanpages.png') -211px 0px;  margin: 0px 0px 0px 5px; }
.toolbar-social .facebook:hover{ background: url('../img/home_fanpages.png') -211px -33px; }
.toolbar-social .twitter{ background: url('../img/home_fanpages.png') -252px 0px; margin: 0px 0px 0px 5px; }
.toolbar-social .twitter:hover{ background: url('../img/home_fanpages.png')  -252px -33px; }
.toolbar-social .youtube{ background: url('../img/home_fanpages.png') -294px 0px; margin: 0px 0px 0px 5px; }
.toolbar-social .youtube:hover{ background: url('../img/home_fanpages.png') -294px -33px; }
.toolbar-social .home-search{ float: left; padding-right: 10px; }
.toolbar-social .home-search input{ width: 156px; height: 30px; margin: 3px 0 0 14px; border-radius: 20px; background: 0 0; outline: 0; }

.navbar-mobile{}
.navbar-mobile img{ margin-left: 10px; }
.navbar-mobile .item{ float: left; width: 35px; height: 33px; overflow: hidden; }
.navbar-mobile .item span{ padding-left: 40px; text-indent: 1000px; }
.navbar-mobile .facebook{ background: url('../img/home_fanpages.png') -211px 0px;  margin: 0px 0px 0px 5px; }
.navbar-mobile .facebook:hover{ background: url('../img/home_fanpages.png') -211px -33px; }
.navbar-mobile .twitter{ background: url('../img/home_fanpages.png') -252px 0px; margin: 0px 0px 0px 5px; }
.navbar-mobile .twitter:hover{ background: url('../img/home_fanpages.png')  -252px -33px; }
.navbar-mobile .youtube{ background: url('../img/home_fanpages.png') -294px 0px; margin: 0px 0px 0px 5px; }
.navbar-mobile .youtube:hover{ background: url('../img/home_fanpages.png') -294px -33px; }

.menu_footer{ }
.menu_footer a.top{ color: #72bbaa; font-size: 16px; font-weight: bold; }
.menu_footer .lev1{ margin: 0px; padding: 0px; }
.menu_footer .lev1 li{ list-style: none; line-height: 25px; }
.menu_footer .lev1 li a{ color: #ffffff; font-size: 16px; }

.region_tab{ }
.region_tab .tab{ display: none; }
.region_tab .tab .item{ padding-bottom: 10px; overflow: hidden; }

.region_tab_menu{ display: table; margin-bottom: 0px; }
.region_tab_menu ul{ margin: 0px; padding: 0px; }
.region_tab_menu ul li{ margin: 0px; padding: 0px 1px 0px 0px; list-style: none; border-top: 1px #ffffff solid; float: left; width: 100px; }
.region_tab_menu ul li.active div{ background-color: #f5f5f5; border: 5px #CCC solid; border-bottom: 0px; }
.region_tab_menu ul li.active div a{ color: #333; }
.region_tab_menu ul li div{ padding: 10px 20px; text-align: center; background-color: #03694F; border: 2px #03694F solid; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.region_tab_menu ul li div a{ color: #ffffff; }

.activity-gallery img{ width: 100%; }

.gallery{  }
.gallery .item{ width: 185px; height: 180px; float: left; margin: 0px 5px 5px 0px; }
.gallery .item .thumbnail{ width: 185px; height: 140px; border: 2px #d9d7d8 solid; margin: 0px; overflow: hidden; }
.gallery .item .thumbnail div{ width: 99%; height: 125px; overflow: hidden; margin: 2px; }
.gallery .item .download{ height: 20px; text-align: center; }

.view-all{ float: right; margin-right: 14px; margin-top: -50px; }

.box_shadow{ webkit-box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px #ccc; }

h1.page_title{ font-size: 22px; }

@media (min-width: 500px) and (max-width: 800px) {

    .col-sd-1, .col-sd-2, .col-sd-3, .col-sd-4, .col-sd-5, .col-sd-6, .col-sd-7, .col-sd-8, .col-sd-9, .col-sd-10, .col-sd-11, .col-sd-12 {
        float: left;
    }
    .col-sd-12 {
        width: 100%;
    }
    .col-sd-11 {
        width: 91.66666667%;
    }
    .col-sd-10 {
        width: 83.33333333%;
    }
    .col-sd-9 {
        width: 75%;
    }
    .col-sd-8 {
        width: 66.66666667%;
    }
    .col-sd-7 {
        width: 58.33333333%;
    }
    .col-sd-6 {
        width: 50%;
    }
    .col-sd-5 {
        width: 41.66666667%;
    }
    .col-sd-4 {
        width: 33.33333333%;
    }
    .col-sd-3 {
        width: 25%;
    }
    .col-sd-2 {
        width: 16.66666667%;
    }
    .col-sd-1 {
        width: 8.33333333%;
    }
}

@media (min-width: 1000px){
    .category_list img{ height: 180px; }
    .index_activity img{ height: 150px; }
    .activity-gallery img{ width: 100%; height: 150px; }
    .booklet_list img{ width: 100%; height: 300px; }
}

@media (max-width: 1200px) {

}

@media (max-width: 1024px) {
    #social_left_block{ display: none; }
    .home-logo{ text-align: center; }
    .default-title{ text-align: center; }
    .calendar-box{ margin-left: 0px !important; }
    .region_tab_menu ul li:nth-child(1) { width: 80px !important; }
    .region_tab_menu ul li:nth-child(1) div { padding: 10px 0px; text-align: center; }
}

@media (max-width: 768px) {
    .navbar-desktop{ display: none; }
    .navbar-mobile{ display: block; }    
    .region_tab .tab .item{ padding-bottom: 10px; height: auto !important; overflow: hidden; }
}

@media (max-width: 500px) {
    #BlockBooklet{ display: none; }
    .navbar-desktop{ display: none; }
    .navbar-mobile{ display: block; }
    .region_tab_menu ul li{ width: 19% !important; font-size: 14px; }
    #home_multimedia .home_multi_head ul li.ones, #home_multimedia .home_multi_head ul li { width: 50% !important; }
    
    .home_vdo1{ width: 100% !important; margin-bottom: 20px !important; }
    .home_multi_list ul{ width: 100% !important; }
    .home_multi_list ul li{ width: 100% !important; float: none !important; }
    .home_multi_list ul li .images{ width: 100% !important; }
    
    .home_multi_list_gallery ul{ width: 100% !important; }
    .home_multi_list_gallery li{ width: 100% !important; float: none !important; }
    .home_multi_list_gallery li .images{ width: 100% !important; }
}

@media (min-width: 500px) and (max-width: 1000px) {
    .navbar-desktop{ display: none; }
    .navbar-mobile{ display: block; }
    .toolbar-social{ display: none; }
}

@media (min-width: 400px) and (max-width: 500px) {
    .navbar-desktop{ display: none; }
    .navbar-mobile{ display: block; }
    .toolbar-social{ display: none; }
    .footer_social_map_md{ display: none; }
    .footer_social_map_xd{ display: block; }
}

@media (max-width: 425px) {
    .region_tab_menu ul li.active div{ padding-bottom: 8px; }
    .region_tab_menu ul li:nth-child(6) { width: 49% !important; }
    .region_tab_menu ul li:nth-child(7) { width: 49% !important; }
}

@media (max-width: 400px) {
    .navbar-desktop{ display: none; }
    .navbar-mobile{ display: block; }
    .toolbar-social{ display: none; }
    .footer_social_map_md{ display: none; }
    .footer_social_map_xd{ display: block; }
    
    .region_tab_menu ul li:nth-child(n){ width: 100% !important; }
}

@media (max-width: 375px) {
    
}

@media (max-width: 350px) {
    .navbar-desktop{ display: none; }
    .navbar-mobile{ display: block; }
    .toolbar-social{ display: none; }
    
}

@media (max-width: 320px) {    
    
}