.footer {
	font-family: 'Sarabun', sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #FFFFFF !important;
	text-decoration: none;
}
.box {
	border: 4px solid #c06ef5;
}
.box-intro {
	border: 4px solid #DBA63E;
}
.box-pic {
	border: 3px solid #fda005;
}
.b-right {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #006600;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #006600;
	font-family: 'Sarabun', sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #003366 !important;
	text-decoration: none;

}
.detail-s {
	font-family: 'Sarabun', sans-serif;
	font-size: 9px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #666666 !important;
	text-decoration: none;
}
.detail-news {
	font-family: 'Sarabun', sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #333333 !important;
	text-decoration: none;
}
.link-news {
	font-family: 'Sarabun', sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #CEE1FF !important;
	text-decoration: underline;
}
A.link-news:link {
	COLOR: #1D99CC !important; TEXT-DECORATION: none}
A.link-news:visited {
	COLOR: #1D99CC !important; TEXT-DECORATION: none
}
A.link-news:active {
	COLOR: #80DFF1 !important; TEXT-DECORATION: none
}
A.link-news:hover {
	COLOR: #FFBC09 !important; TEXT-DECORATION: none
}
.link-b {
	font-family: 'Sarabun', sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #006600 !important;
	text-decoration: underline;
}
A.link-b:link {
	COLOR: #0066FF !important; TEXT-DECORATION: none}
A.link-b:visited {
	COLOR: #0066FF !important; TEXT-DECORATION: none
}
A.link-b:active {
	COLOR: #FF6699 !important; TEXT-DECORATION: none
}
A.link-b:hover {
	COLOR: #FF6699 !important; TEXT-DECORATION: underline}
.b-right {
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #ADADAD !important;
}
.styles3 {
	font-family: 'Sarabun', sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #333333 !important;
	text-decoration: none;
}

A.styles3:link {
	COLOR: #993300 !important; TEXT-DECORATION: none
}
A.styles3:visited {
	COLOR: #993300 !important; TEXT-DECORATION: none
}
A.styles3:active {
	COLOR: #993300 !important; TEXT-DECORATION: none
}
A.styles3:hover {
	COLOR: #FF9900 !important; TEXT-DECORATION: none
}


.rss {
	font-family: 'Sarabun', sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #663300 !important;
	text-decoration: none;
}

A.rss:link {
	COLOR: #003366 !important; TEXT-DECORATION: none
}
A.rss:visited {
	COLOR: #003366 !important; TEXT-DECORATION: none
}
A.rss:active {
	COLOR: #003366 !important; TEXT-DECORATION: none
}
A.rss:hover {
	COLOR: #FFFF00 !important; TEXT-DECORATION: none
}



.under {
	font-family: 'Sarabun', sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #003366 !important;
	text-decoration: none;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999999 !important;
}

.styles2 {
	font-family: 'Sarabun', sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #0000FF;
	text-decoration: none;
}

A.styles2:visited {
	COLOR: #0000FF !important; TEXT-DECORATION: none
}
A.styles2:active {
	COLOR: #0000FF !important; TEXT-DECORATION: none
}
A.styles2:hover {
	COLOR: #F7694D !important; TEXT-DECORATION: none
}

.title {
	font-family: 'Sarabun', sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bolder;
	font-variant: normal;
	text-transform: none;
	color: #D10522 !important;
	text-decoration: none;
}
.border {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #006600 !important;



}
.b-left {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #006600 !important;
	font-family: 'Sarabun', sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #003366 !important;
	text-decoration: none;





}
.under-g {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #006600 !important;
	border-bottom-color: #006600 !important;
	border-left-color: #006600 !important;
	font-family: 'Sarabun', sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #D10522 !important;
	text-decoration: none;

}
.box-center {
	border: 1px solid #006600 !important;
}
.title4 {
	font-family: 'Sarabun', sans-serif;
	font-size: 24px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #CC0033 !important;
	text-decoration: none;
	
}
.title5 {
	font-family: 'Sarabun', sans-serif;
	font-size: 17px;
	font-style: normal;
	line-height: normal;
	font-weight: none;
	font-variant: normal;
	text-transform: none;
	color: #094781 !important;
	text-decoration: none;
	
}
.title6 {
	font-family: 'Sarabun', sans-serif;
	font-size: 15px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #e40746 !important;
	text-decoration: none;
	
}

.title2 {
	font-family: 'Sarabun', sans-serif;
	font-size: 20px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #990000 !important;
	text-decoration: none;
}

.title3 {
	font-family: 'Sarabun', sans-serif;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #000000 !important;
	text-decoration: none;
}
.styles {
	font-family: 'Sarabun', sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #0033FF !important;
	text-decoration: none;
}

A.styles:visited {
	COLOR: #FFFFFF !important; TEXT-DECORATION: none
}
A.styles:active {
	COLOR: #FFFFFF !important; TEXT-DECORATION: none
}
A.styles:hover {
	COLOR: #ECD90B !important; TEXT-DECORATION: none
}
.styles1 {
	font-family: 'Sarabun', sans-serif;
	text-transform: none;
	color: #003366 !important;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-decoration: none;
}
.styles4 {
	font-family: 'Sarabun', sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #549FB1 !important;
	text-decoration: none;
}
.styles1-run63 {
	font-family: 'Sarabun', sans-serif;
	text-transform: none;
	color: #003366 !important;
	font-size: 20px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-decoration: none;
}
.top {
	font-family: 'Sarabun', sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #0033FF !important;
	text-decoration: none;
}
A.top:link {
	COLOR: #0033FF !important; TEXT-DECORATION: none
}
A.top:visited {
	COLOR: #0033FF !important; TEXT-DECORATION: none
}
A.top:active {
	COLOR:#0033FF !important; TEXT-DECORATION: none
}
A.top:hover {
	COLOR: #f70a1a !important; TEXT-DECORATION: none
}



.red {
	font-family: 'Sarabun', sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #FF3300 !important;
}
.title-c {
	font-family: 'Sarabun', sans-serif;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #CC0000 !important;
	text-decoration: none;
}
.counter {
	font-family: 'Sarabun', sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000066 !important;
	text-decoration: none;
}
.cal {
	font-family: 'Sarabun', sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: bolder;
	font-variant: normal;
	text-transform: none;
	color: #993300 !important;
	text-decoration: none;
}
.more {
	font-family: 'Sarabun', sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #1A87FD !important;
	text-decoration: none;
}

A.more:link {
	COLOR: #D65109 !important; TEXT-DECORATION: none
}
A.more:visited {
	COLOR: #D65109 !important; TEXT-DECORATION: none
}+
A.more:active {
	COLOR:#D65109 !important; TEXT-DECORATION: none
}
A.more:hover {
	COLOR: #5DBFFE !important; TEXT-DECORATION: none
}

.container-fluid,
.container,
.navbar {
  font-family: "Sarabun", sans-serif;
  font-style: normal;
}
/* animation ᷹ marquee */
.scroll-left {
    overflow: hidden;
    white-space: nowrap;
}

.scroll-left img {
    animation: scrollLeft 10s linear infinite;
}

@keyframes scrollLeft {
    from { transform: translateX(400%); }
    to { transform: translateX(-100%); }
}

.logo-bounce img {
    animation: bounce 3s infinite alternate;
}

@keyframes bounce {
    from { transform: translateX(0); }
    to { transform: translateX(40px); }
}
@media only screen and (min-width: 768px) {
  .navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* Optional: removes the default margin that can cause a flicker */
  }
}
.ct-font-18 {
	font-family: 'Sarabun', sans-serif;
	font-size:18px;
	font-weight: 600;
	font-style: Bold;
	color: #000;
}
.ct-font-16 {
	font-family: 'Sarabun', sans-serif;
	font-size:16px;
	font-weight: 400;
	font-style: normal;
	color: #000;
}
.ct-font-16-b {
	font-family: 'Sarabun', sans-serif;
	font-size:16px;
	font-weight: 600;
	font-style: Bold;
	color: #000;
}
.ct-font-14 {
	font-family: 'Sarabun', sans-serif;
	font-size:14px;
	font-weight: 400;
	font-style: normal;
	color: #000;
}
.ct-font-awe-bl {
	font-size:0.5rem;
	vertical-align:middle;
	align-items: center;
}
/*.card {
	border-radius: 10px;
}*/
.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}
nav .navbar-nav li a {
  color: #000 !important;
}
nav .navbar-nav li a:hover {
  color: #0099ff !important;
}
.backtop:hover {
    transform: translateY(-2px);
	-ms-transform: scale(-2px); /* IE 9 */
	-webkit-transform: scale(-2px); /* Safari 3-8 */
    box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, 0.2);
}
#bnoverlay{
		position:fixed;
		width:100%;
		height:100%;
		top:0;
		left:0;
		opacity:0.8;
		display: none;
		background-color: #ccc;
		z-index: 9998;
	}
#vply{
		border: solid 1px #616161;
		position: absolute;
		background-color: #fff;
		z-index: 9999;
		display: none;
		box-shadow: 0 0 5px #000;
	}	
/* /black-ribbon */
.black-ribbon {
  position: fixed;
  z-index: 9999;
  width: 70px;
}
@media only all and (min-width: 768px) {
  .black-ribbon {
    width: auto;
  }
}

.stick-left { left: 0; }
.stick-right { right: 0; }
.stick-top { top: 0; }
.stick-bottom { bottom: 0; }
/* /black-ribbon */

.public-bg {
    background-size: auto;
    padding-top: 30px;
    padding-bottom: 20px;
}
.banner-frame {
    width: 100%;
    height: 300px;
    border: 0;
    overflow: hidden;
}
.hover-scale img {
    transition: 0.3s;
}
.hover-scale img:hover {
    transform: scale(1.02);
}
.news-bar {
	/*background: url('../images/newss.png') no-repeat center;*/
    background-size: auto;
    min-height: 52px;
    display: flex;
    align-items: center;
}
.news-scroll {
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.news-scroll-content {
    display: inline-block;
    padding-left: 100%;
    animation: scrollNews 80s linear infinite;
}
.news-scroll:hover .news-scroll-content {
    animation-play-state: paused;
}
@keyframes scrollNews {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}
.glow-box {
  border: 1px solid #ccc;
  border-radius: 8px;
  /* x-offset y-offset blur spread color */
  box-shadow: 0 0 10px rgba(134, 134, 134, 0.5);
}
.news-box-1 {
  border: 5px solid #1ceee5;
  border-radius: 8px;
}
.news-box-2 {
  border: 5px solid #060080;
  border-radius: 8px;
}
.linkSwiper{
    padding:10px 0;
}
.linkSwiper .swiper-slide{
    text-align:center;
}
.linkSwiper img{
    width:160px;
    height:60px;
    object-fit:cover;
    border-radius:6px;
    transition:.3s;
}
.linkSwiper img:hover{
    transform:scale(1.05);
}
.swiper-button-next,
.swiper-button-prev{
color:#0d6efd;
}
.card-body a img{
    transition: all .3s ease;
}
.card-body a:hover img{
    transform: scale(1.03);
    opacity: .9;
}
.head-g {
	height:280px;
}
.logo-name {
	width: auto;
}
.fr-album-res {
	height:400px; overflow:hidden;
}
.bg-page {
	background:url('../images/bgtem_res_1.jpg') top center no-repeat; margin-top: -5px; background-size: contain;
}
.public-bg {
    background: url('../images/10public.png') no-repeat top center;
}
@media (max-width: 1200px) {
}
@media (max-width: 992px) {
	.head-g {
		height: 100px;
	}
	.fr-album-res {
		height:380px;
	}
	.public-bg {
		background-size: 500px auto;
	}
	.news-bar {
		background:url('');
	}
}
@media (max-width: 768px) {
	.head-g {
		height: 0px;
	}
	.fr-album-res {
		height:360px;
	}
	.public-bg {
		background-size: 400px auto;
	}
}
@media (max-width: 576px) {
	.head-g {
		height: 80px;
	}
	.logo-name {
		max-width: 200px;
	}
	.fr-album-res {
		height:340px;
	}
	.public-bg {
		background-size: 250px auto;
	}
	.bg-page {
		background:url('../images/bgtem_res_1_mobile.jpg') top center no-repeat; margin-top: -5px; background-size: contain;
	}
}
.banner-header {
	background-color:#fff; border-radius:10px;	box-shadow: 5px 5px 5px grey; border:5px solid #fff;margin-top:40px;
}
.ribbon-black{ position: fixed; left:0;top:0;z-index: 1031; width:130px;}