html {
/*filter: saturate(20%);*/
}
.bg-menu{
background-color: #113b51;
margin-top: -1px;
}
.bg-menu img{
max-width: 200px;
}
body {
font-size: 15px !important;
/* font-family: 'Sarabun', sans-serif; */
font-family: 'Prompt', sans-serif !important;
color: #444444 !important;
font-weight: 400 !important;
background-color: #f0f0f0 !important;
}
.footer-right ul li {
display: block;
width: 100%;
margin-bottom: 5px;
}
.footer-right ul li a:hover{
color: white;
}
.bg-menu ul li{
color:white;
margin-left: 15px;
font-family: 'Prompt', sans-serif;
font-size: 18px;
}
.bg-menu ul li a{
text-decoration: none;
color: white;
}
.navbar-toggler{
color: white;
border: 1px solid white;
}
.social-mobile{
background-color: #113b51;
}
.menu-search {
position: relative;
}
.menu-search button {
position: absolute;
right: 0;
background-color: white;
border: none;
border-radius: 0 5px 5px 0;
/* height: 26px; */
top: 1px;
}
.social-mobile ul {
display: flex;
align-items: flex-end;
flex-direction: row;
justify-content: flex-end;
}
.social-mobile ul li{
margin-right: 10px;
margin-top: 10px;
}
.menu-search input {
border-radius: 5px;
border: none;
padding-left: 10px;
font-size: 16px;
}
.content-list .page-header h1{
font-weight: 400;
color: #113b51;
font-size: 1.5rem;
}
.category-list .content-category h1{
font-weight: 400;
color: #113b51;
font-size: 1.5rem;
}
ul.pagination-list {
list-style: none;
padding-left: 0px;
margin-top: 30px;
}
ul.pagination-list li {
display: inline-block;
background-color: white;
margin-right: 5px;
border-radius: 10px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
}
ul.pagination-list li.active {
background-color: #113b51;
margin-right: 5px;
color: white;
}
ul.pagination-list li a {
text-decoration: none;
background-color: transparent;
color: #113b51;
}
li.disabled{
display: none !important;
}
li a[aria-label="Go to start page"]{
display: none !important;
}
.menu-main {
margin-right: 15px;
}
@media (min-width: 992px){
.navbar-expand-lg .navbar-collapse {
display: flex!important;
flex-basis: auto;
justify-content: flex-end;
}
.social-mobile{
display: none;
}
}
@media (max-width: 991px){
.d-none-mobile{
display: none;
}
.menu-search{
display: none;
}
.bg-menu ul li{
margin-top: 10px;
margin-bottom: 5px;
}
.bg-menu{
padding-top: 0px !important;
}
}
/*Footer*/
.footer{
background-color: #113b51;
padding: 30px 0;
color: white;
font-family: 'Prompt', sans-serif;
}
.footer-left img {
max-width: 250px;
margin-bottom: 20px;
}
.footer-left p {
font-weight: 300;
font-size: 15px;
}
.footer-left p.contact-left a{
color: white;
text-decoration: none;
font-size: 16px;
font-weight: 400;
}
.footer-right h4 {
font-weight: 400;
margin-bottom: 15px;
}
.footer-right p {
margin-bottom: 5px;
font-size: 15px;
}
.footer-right a {
color: white;
text-decoration: none;
font-weight: 300;
}
.footer-bottom{
margin-top: 50px;
}
.footer-bottom h4{
font-weight: 300;
font-size: 15px;
}
.footer-social{
margin-top: 50px;
text-align: right;
}
/**********************************************/
/*VDO Detail page*/
.none-file-pdf {
background-color: #8f8f8f !important;
cursor: inherit !important;
}
.vdo-detail{
padding: 50px 0;
margin-top: 80px;
}
.vdo {
border-radius: 25px;
overflow: hidden;
}
.vdo video{
width: 100%;
}
.detail-name h4{
font-weight: 400;
color: #113b51;
/* #111111 */
}
.detail {
margin-top: 15px;
}
.vdo_title_image {
border-radius: 25px;
overflow: hidden;
}
.vdo_title_image img {
width: 100%;
}
.detail-name i {
color: #ffc107;
background-color: white;
border-radius: 10px;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
font-size: 14px;
}
.btn-download button {
background-color: #e63f2f;
color: white;
border: none;
border-radius: 20px;
padding: 10px 30px;
font-family: 'Prompt', sans-serif !important;
}
.btn-download button i{
padding-right: 10px;
}
.btn-download {
text-align: right;
font-family: 'Prompt', sans-serif;
}
/************************************************************/
/*VDO List page*/
/* .list-category{
margin-top: 30px;
} */
.list-category h4{
border-bottom: 2px solid #113b51;
}
.list-category h4 span{
display: inline-block;
background: #113b51;
padding: 10px 20px;
position: relative;
color: #ffffff;
font-size: 18px;
text-transform: capitalize;
font-weight: 400;
}
.list-category h4 span:before{
position: absolute;
content: "";
top: 0;
right: -8px;
border-top: 8px solid #113b51;
border-right: 8px solid transparent;
}
.list-category ul{
list-style: none;
padding: 0px;
margin-top: 15px;
}
.list-category ul li{
border-bottom: 1px dashed #e4e4e4;
margin-bottom: 10px;
padding-bottom: 10px;
padding-top: 0;
}
.list-category ul li a span.catTitle {
padding-right: 4px;
}
.list-category ul.level0 > li a .catCounter {
float: right;
}
.list-category ul >li >a {
color: #000000;
text-decoration: none;
}
.list-vdo-table h4{
font-weight: 400;
color: #113b51;
}
.vdo-list{
padding: 50px 0;
background-color: white;
margin-top: 80px;
}
/* .list-vdo-table{
margin-top: 30px;
} */
table.list-tabe-vdo {
border-collapse: collapse;
width: 100%;
}
table.list-tabe-vdo td,table.list-tabe-vdo th {
border: 2px solid white;
text-align: left;
padding: 8px;
font-weight: 400;
}
table.list-tabe-vdo tr:nth-child(even) {
background-color: #ebf3f5;
}
table.list-tabe-vdo th{
background-color: #113b51;
color:white;
}
table.list-tabe-vdo .center{
text-align:center;
}
table.list-tabe-vdo i{
color: #113b51;
cursor: pointer;
}
table.list-tabe-vdo i.no-pdf{
color: #8f8f8f !important;
cursor: inherit !important;
}
ul.pagination{
margin-top: 30px;
}
ul.pagination li{
background-color: white;
margin-right: 5px;
border-radius: 10px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
}
ul.pagination li.active{
background-color: #113b51;
margin-right: 5px;
color: white;
}
ul.pagination li a{
text-decoration: none;
background-color: transparent;
color: #113b51;
}
/************************************************************/
/* knowledge */
.knowledge{
padding: 50px 0;
background-color: white;
margin-top: 80px;
}
.intro{
text-align: center;
margin:0 0 30px 0;
}
.intro h3{
color: #113b51;
}
.intro p{
color: #113b51;
}
.box-knowledge img{
width: 100%;
}
.box-knowledge img:hover{
transform: scale(1.2);
transition-duration: 3s;
}
.box-knowledge{
position: relative;
overflow: hidden;
cursor: pointer;
}
.box-knowledge h3{
position: absolute;
bottom: 5px;
text-align: center;
width: 100%;
font-size: 20px;
color: white;
}
/************************************************************/
/* Content Detail */
.content-detail{
padding: 50px 0;
background-color: white;
margin-top: 80px;
}
.list-content-detail img{
width: 100%;
border-radius: 15px;
margin-bottom: 15px;
}
.content-detail-description img {
width: auto;
max-width: 100%;
}
.list-content-detail h4{
color: #113b51;
}
.content-detail-description{
margin-top: 30px;
}
.other-content a{
text-decoration: none;
}
.other-content h4{
font-size: 16px;
border-bottom: 0px !important;
cursor: pointer;
margin-top: 15px;
}
@media (max-width: 991px) and (min-width: 768px){
.other-content h4 {
font-size: 13px;
}
}
@media (max-width: 767px){
.other-content h4 {
font-size: 14px;
}
}
.other-content img{
width: 100%;
margin: 20px 0;
border-radius: 15px;
cursor: pointer;
}
.other-content{
overflow: hidden;
}
.other-content img:hover{
transform: scale(1.1);
transition-duration: 0.5s;
}
.other-content{
position: relative;
}
.cate-content h4 span{
display: inline-block;
background: #113b51;
padding: 10px 20px;
position: relative;
color: #ffffff;
font-size: 18px;
text-transform: capitalize;
font-weight: 400;
}
.cate-content h4 span:before{
position: absolute;
content: "";
top: 0;
right: -8px;
border-top: 8px solid #113b51;
border-right: 8px solid transparent;
}
.highlight h4 span{
display: inline-block;
background: #e63f2f;
padding: 10px 20px;
position: relative;
color: #ffffff;
font-size: 18px;
text-transform: capitalize;
font-weight: 400;
}
.highlight h4 span:before{
position: absolute;
content: "";
top: 0;
right: -8px;
border-top: 8px solid #e63f2f;
border-right: 8px solid transparent;
}
.category_22 h4 span{
display: inline-block;
background: #e63f2f;
padding: 10px 20px;
position: relative;
color: #ffffff;
font-size: 18px;
text-transform: capitalize;
font-weight: 400;
}
.category_22 h4 span:before{
position: absolute;
content: "";
top: 0;
right: -8px;
border-top: 8px solid #e63f2f;
border-right: 8px solid transparent;
}
.category_24 h4 span{
display: inline-block;
background: #ffc107;
padding: 10px 20px;
position: relative;
color: #ffffff;
font-size: 18px;
text-transform: capitalize;
font-weight: 400;
}
.category_24 h4 span:before{
position: absolute;
content: "";
top: 0;
right: -8px;
border-top: 8px solid #ffc107;
border-right: 8px solid transparent;
}
.category_25 h4 span{
display: inline-block;
background: #54c554;
padding: 10px 20px;
position: relative;
color: #ffffff;
font-size: 18px;
text-transform: capitalize;
font-weight: 400;
}
.category_25 h4 span:before{
position: absolute;
content: "";
top: 0;
right: -8px;
border-top: 8px solid #54c554;
border-right: 8px solid transparent;
}
.category_27 h4 span{
display: inline-block;
background: #0cddff;
padding: 10px 20px;
position: relative;
color: #ffffff;
font-size: 18px;
text-transform: capitalize;
font-weight: 400;
}
.category_27 h4 span:before{
position: absolute;
content: "";
top: 0;
right: -8px;
border-top: 8px solid #0cddff;
border-right: 8px solid transparent;
}
.rmts h4 span{
display: inline-block;
background: #ffc107;
padding: 10px 20px;
position: relative;
color: #ffffff;
font-size: 18px;
text-transform: capitalize;
font-weight: 400;
}
.rmts h4 span:before{
position: absolute;
content: "";
top: 0;
right: -8px;
border-top: 8px solid #ffc107;
border-right: 8px solid transparent;
}
.cate-content{
position: absolute;
top: 20px;
left: 20px;
}
/************************************************************/
/*Content List*/
.content-list{
padding: 50px 0;
background-color: white;
margin-top: 70px;
}
/************************************************************/
/*login*/
.center-login {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 460px;
height: 450px;
min-height: 400px;
border: 1px solid #dee2e6;
-webkit-box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important;
box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important;
padding: 35px 52px 35px 52px;
background-color: white;
animation: fade 0.5s;
border-radius: 10px;
}
.center{
text-align: center;
}
a.logo-login {
text-align: center;
display: block;
}
.bglogin{
background-color: #113b51;
}
.title-center h1{
font-size: 20px;
color: #111111;
margin-top: 20px;
}
.title-center{
text-align: center;
}
.login-user{
margin-top: 20px;
}
.login-user label{
width: 100%;
color: #113b51;
}
.login-user input{
width: 100%;
height: 35px;
border: 1px solid #d1d1d1;
}
.login-user input[type="submit"]{
width: auto;
background-color: #113b51;
text-align: center;
color: white;
padding: 5px 20px;
width: 150px;
border-radius: 20px;
}
@media (max-width: 767px){
.center-login {
width: 90%;
}
}
/************************************************************/
/*Homepage*/
.highlightBanner .bannergroup img {
width: 100%;
height: 700px;
object-fit: cover;
}
/* .highlightBanner .bannergroup {
position: absolute;
top:0;
} */
.highlightBanner{
position: relative;
}
.boxmenu {
position: absolute;
top: 0;
width: 100%;
}
.intro-text {
position: absolute;
text-align: center;
width: 100%;
top: 20%;
}
.intro-text h2{
color: white;
}
.intro-text p{
color: white;
margin-bottom: 0;
}
.seemore{
text-align: center;
margin: 50px 0 30px;
}
.seemore button{
background-color: #113b51;
color: white;
border: none;
border-radius: 20px;
padding: 10px 50px;
}
.bggreyhomepage{
text-align: center;
background-color: #f0f0f0;
padding: 30px 0;
}
.bggreyhomepage h4{
margin: 30px;
font-size: 36px;
}
.featured-articles .other-content{
text-align: center;
margin: 0px 25px;
}
.slider{
background-color: #113b51;
padding: 60px 0;
}
.featured-articles .other-content h4{
color: white;
font-weight: 300;
font-size: 16px;
}
.featured-articles .detail-name{
color: white;
font-weight: 300;
}
.mt0{
margin-top: 0px !important;
}
@media (min-width: 992px){
}
@media (max-width: 991px){
.featured-articles .detail-name {
font-size: 12px;
}
}
@media (max-width: 991px) and (min-width: 768px){
.featured-articles .other-content h4 {
font-size: 13px;
}
}
@media (max-width: 767px){
.intro-text p{
font-size: 14px;
}
.featured-articles .other-content h4 {
font-size: 14px;
}
}
/************************************************************/
/* Dots */
.slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
position: absolute;
bottom: -50px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 40px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: white;
}
/***********************************************/
/* Arrows */
.slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
bottom: -60px;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
background-color: transparent;
color: transparent;
border: none;
outline: none;
z-index: 555555;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
color: transparent;
outline: none;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
opacity: .25;
}
.slick-prev:before,
.slick-next:before
{
font-family: 'slick';
font-size: 34px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: bold;
padding-left: 3px;
}
.slick-prev
{
left: 35%;
}
[dir='rtl'] .slick-prev
{
right: -25px;
left: auto;
}
.slick-prev:before
{
content: '<';
}
[dir='rtl'] .slick-prev:before
{
content: '→';
}
.slick-next
{
right: 35%;
}
[dir='rtl'] .slick-next
{
right: auto;
left: -25px;
}
.slick-next:before
{
content: '>';
}
[dir='rtl'] .slick-next:before
{
content: '←';
}
/*****************Sub Knowledge***********/
.box-subknowledge {
text-align: center;
}
.box-subknowledge img{
margin-bottom: 15px;
max-width: 100%;
width: 35%;
}
.box-subknowledge a{
color: #113b51;
text-decoration: none;
}
.box-subknowledge a:hover{
color: #113b51;
}
.box-subknowledge h3{
font-size: 16px;
padding: 0 15px;
}
table.list-tabe-vdo a{
text-decoration: none;
color: #444444;
}
table.list-tabe-vdo a:hover{
text-decoration: none;
color: #444444;
}
.component-body > .search{
width: 90%;
margin: auto;
}
.search-results a{
text-decoration: none;
color: #113b51;
}
#searchForm{
margin-top: 120px;
margin-bottom: 30px;
}
.badge {
color: #113b51 !important;
}
dt.result-title {
margin-top: 30px;
}
.search select {
border: 1px solid #e4e4e4;
border-radius: 0;
box-shadow: none;
}
legend {
margin-bottom: 20px !important;
margin-top: 20px;
font-size: 21px;
border-bottom: 1px solid #e5e5e5;
}
.search .phrases .phrases-box .controls label {
display: inline-block;
margin: 0 20px 20px;
}
.search .only label {
display: inline-block;
margin: 0 20px 20px;
}
.search .btn-toolbar input {
border: 1px solid #e4e4e4;
border-radius: 0;
box-shadow: none;
padding-left: 10px;
margin-right: 5px;
}
.search .btn-toolbar button {
background: #113b51;
}
.search .btn-toolbar button {
color: #fff;
}
.btn-toolbar >div >label {
display: none;
}
.top-disclaimer {
padding: 1px;
background-color: #fff;
}
.custom_topdisclaimer{
padding: 15px;
background-color: #e3e3e3;
border-radius: 15px;
margin: 0 20px 20px 20px;
text-align: center;
color: #113b51;
}