/* CSS Document */

.container{ position: relative; z-index: 2;}

#top{ position: relative;}
.top-navbar{ min-height: 105px;}

.top-brand{ position: absolute; top: 0; left: 0; z-index: 1; padding: 0;}

.top-navbar .navbar-collapse { padding-left: 465px; padding-right: 100px;}
.top-navbar .navbar-nav .nav-link {
    color: #333333;
	position: relative;
}
.top-navbar .navbar-nav .nav-link:before{
	content:"";
	position: absolute; 
	width: 0;
	top: 0;
	left: 0;
	border-bottom: 3px solid #07355c;
}
.top-navbar .navbar-nav .nav-link:focus, .top-navbar .navbar-nav .nav-link:hover,.top-navbar .navbar-nav .show .nav-link:focus, .top-navbar .navbar-nav .show .nav-link:hover{
    color: #07355c;
	font-weight: bolder;
}
.top-navbar .navbar-nav .nav-link:focus:before, .top-navbar .navbar-nav .nav-link:hover:before, .top-navbar .navbar-nav .show .nav-link:before, .top-navbar .navbar-nav .show .nav-link:before  {
    width: 100%;
}

.top-navbar .navbar-nav .dropdown-menu .dropdown-item.active,.top-navbar .navbar-nav .dropdown-menu .dropdown-item:hover {
    color: #fff;
    background-color: #07355c;
}

.top-language{ position: absolute; right: 15px; top: 50%; margin-top: -15px;}
.top-language .language-btn{ text-transform: uppercase;border: 1px solid #999999; font-size: 1rem; padding: 3px 8px; color: #727272;}
.top-language .language-btn .fa{ margin-right: 5px; color: #07355c; }
.top-language .language-btn::after{ margin-left: 0; }
.top-language .dropdown.show .language-btn{ border: 1px solid #07355c; color: #07355c;}

.top-language .dropdown-menu .dropdown-item.active,.top-language .dropdown-menu .dropdown-item:hover {
    color: #fff;
    background-color: #07355c;
}

#banner{ position: relative;}



.banner-img{ width: 100%;}
.banner-pagination{ bottom: 30px !important;}
.banner-pagination .swiper-pagination-bullet{width: 48px; height: 4px; border-radius: 0; background: #ffffff; opacity: 1;}
.banner-pagination .swiper-pagination-bullet-active{  background: #f9be00;}

.videolist{ cursor: pointer;}
.videos{ display:none;background: rgba(0,0,0,0.9); position:fixed; left:0; right: 0; top:0; bottom: 0; width:100%;z-index: 10000; }
.videos-con{border: 1px solid #080808; position:fixed; width: 100%; height: 100%;}
.videos-con video{position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;}
.vclose { position:absolute;right:5%; top:5%; border-radius:100%; cursor: pointer; }

#index-about{ margin-bottom: 5rem; margin-top: 1rem;}
.container-title{ margin-bottom: 2rem; padding-top: 2rem; }
.container-title h1{ font-weight: bolder; color: #111111; position: relative;}
.container-title .container-title-en{ font-size: 7.14rem; line-height: 7.14rem; text-transform: uppercase; color: rgba(237,237,237,0.8); font-weight: bolder; margin: 0 0 -30px -83px; }

.container-title-center{ text-align: center;}
.container-title-center .container-title-en{ font-size: 5.71rem; margin: 0;  color: rgba(237,237,237,0.06);margin: 0 0 -46px 0px;}
.container-title-center h1{ color: #ffffff;}

.index-about-more{ margin-top: 1rem; margin-bottom: 1rem;}
.index-about-more a{ color: #07355c; font-weight: bolder; text-transform: uppercase; font-size: 1.14rem;}
.index-about-more a:hover{  text-decoration: none;}
.index-about-more a:hover .fa{  text-decoration: none; margin-left: 15px;}
.index-about-more a .fa{ 
	margin-left: 10px;
	transition: all 0.5s;
	-moz-transition: all 0.5s;	/* Firefox 4 */
	-webkit-transition: all 0.5s;	/* Safari บอ Chrome */
	-o-transition: all 0.5s;
}

#index-history{ background: #062743;position: relative;}
.index-history-bg{ background: url(../images/history-bg.jpg) left no-repeat; position: absolute; top: 0; bottom: 0; width: 100%; z-index: 0;}
.index-history-item{}
.index-history-item a{ display: block; color: #ffffff;}
.index-history-item a:hover{ text-decoration: none;}
.index-history-name{ font-size: 1.57rem; font-weight: bolder; color: #ffffff; border-bottom: 2px solid #ffffff; padding-bottom: 10px; margin-bottom: 10px;}

.swiper-pagination-relative{ position: relative; margin-top: 1rem; margin-bottom: 1rem;}
.swiper-history .swiper-pagination-bullet{ background: #ffffff;}
#index-pro{ position: relative;}

#index-about-2{ background: url(../images/about-bg.jpg) center center no-repeat; background-size: cover; background-attachment: fixed; }
#index-about-2 .container{ position: relative; height: 507px; }
.index-about-2-con{ position: absolute; right: 0; bottom: 30px;}

#index-pro{ margin-bottom: 2rem; margin-top: 1rem;}
.swiper-pro{ margin-top: 2rem;}
.pro-item a{ display: block; background: #07355c; color: #ffffff; padding: 8px;}
.pro-item a:hover{ text-decoration: none;}
.pro-item a:hover .pro-item-name{ padding-left: 10px;}
.pro-item a .pro-item-img{  width: 100%; background: #ffffff; text-align: center;}
.pro-item a .pro-item-name{ padding: 8px 5px 0 5px;	transition: all 0.5s;
	-moz-transition: all 0.5s;	/* Firefox 4 */
	-webkit-transition: all 0.5s;	/* Safari บอ Chrome */
	-o-transition: all 0.5s;}
.swiper-pro .swiper-pagination-bullet{ background: #07355c;}

#index-partner{ border-top: 1px solid #e9e9e9; padding: 30px 5px;}
.swiper-partner .swiper-slide {
	text-align: center;
    width: auto !important;
	min-width: 10%;
	padding: 0 15px;
}

#foot{ background: #07355c; color: #ffffff;}
#foot a{ color: #ffffff;}
.foot-1{ color: #ffffff; padding: 5rem 0;}
.foot-1-con{ padding-right: 90px; min-height: 300px; position: relative;}
.foot-nav{ float: left; width: 33.3%; padding: 15px;}
.foot-nav-title{ font-size: 1.57rem; font-weight: bolder; padding-top: 15px; padding-bottom: 15px;}
.foot-nav-title:before{ content:""; border-bottom: 3px solid #f9be00; width: 26px; position: absolute; top: 0;}
.foot-nav-ul li{ list-style: none;}
.foot-nav-ul li a{ opacity: 0.8;}
.foot-nav-ul li a:hover{ opacity: 1; text-decoration: none;}
.foot-contact{ opacity: 0.8;}
.foot-contact:hover{ opacity: 1;}

.foot-link{ position: absolute; right: 0; width: 90px; top: 0;}
.foot-link ul li{ list-style: none; text-align: center; padding: 10px 0;}
.foot-link ul li a{ display: block; width: 40px; height: 40px; background: rgba(255,255,255,0.15); border-radius: 50%; font-size: 16px; text-align: center; line-height: 40px; margin: auto;}
.foot-link ul li a:hover{ background: rgba(255,255,255,0.2);}

.foot-copyright .foot-copyright-con{ border-top: 1px solid rgba(255,255,255,0.2); padding-top: 10px;  padding-bottom: 10px;}
.foot-copyright-l{ float: left;}
.foot-copyright-r{ float: right;}
#particles-js{ width: 100%; height: 100%; background-color: #ffffff; background-image: url(''); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }

#banner-img{ min-height: 300px; position: relative;}
.banner-img-bg{ position: absolute; background-size:100% auto; top: 0; bottom: 0; width: 100%; z-index: 0;}
.banner-img-con{ padding-top: 260px; padding-bottom: 3rem;}
.banner-img-title{ position: relative; padding-bottom: 15px; margin-top: 0; margin-bottom: 0;}
.banner-img-title:after{ content:""; width: 68px; border-bottom: 6px solid #f9be00; position: absolute; bottom: 0;}
.banner-img-title .container-title-en{ color: rgba(255,255,255,0.1);}
.banner-img-title h1{ color: #ffffff;}

#contain{margin-bottom: 5rem; margin-top: 5rem;}
.about-con{ float: left; width: 65%;}
.about-honor{ float: right; width: 30%;}
.swiper-honor{ padding-left: 30px; padding-right: 30px;}
.swiper-honor .swiper-slide{ text-align: center;}
.swiper-honor .swiper-button-next, .swiper-honor .swiper-container-rtl .swiper-button-prev {
    right: 0px;
    left: auto;
	color: #333333;
	font-size: 1rem;
}
.swiper-honor .swiper-button-prev, .swiper-honor .swiper-container-rtl .swiper-button-next {
    left: 0px;
    right: auto;
	color: #333333;
	
}
.swiper-honor .swiper-button-next:after, .swiper-honor .swiper-container-rtl .swiper-button-prev:after {
	font-size: 1.6rem;
}
.swiper-honor .swiper-button-prev:after, .swiper-honor .swiper-container-rtl .swiper-button-next:after{
	font-size: 1.6rem;
}

#about-video{ margin-bottom: 5rem;}
#video video {
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.VideoBtn {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: 100px;
	height: 100px;
	margin-left: -50px;
	margin-top: -50px;
	cursor: pointer;
	z-index: 10;
}
.news-contianer ul.news-con li{ list-style: none;}
.news-contianer ul.news-con li a{ padding:10px 0; display:block; position:relative;}
.news-contianer ul.news-con li a:hover .news-time,.news-contianer ul li a:hover .news-title{  color:#004ba0}
.news-contianer ul.news-con li a hr{ position:absolute; top:4px; width:100%; z-index:-1;}
.news-contianer ul.news-con li a .news-time{
	float:right;
	font-size:1.2857em;
	color:#373636;
	font-weight:500;
	background:#ffffff;
	display:block;
	padding-left:20px;
}
.news-contianer ul.news-con li a .news-title{
	display:inline-block;
	width:50%; 
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size:1.142857em;
	color:#555555;
}
.news-contianer ul.news-con li a .news-title span{	background:#ffffff;
	padding-right:20px;}
.news-con-title{ text-align:center}
.news-share{ border: #c5c5c5 1px dashed; margin:0 auto; margin-top:15px;}
.news-conner{ margin-top:15px; }

.pro-serice{ border-bottom: 1px solid #e8e8e8;}
.pro-serice-container .swiper-wrapper .swiper-slide{ width: auto !important;}
.pro-serice-container .swiper-wrapper .swiper-slide a{ display: block; position: relative; padding: 10px 3px;}
.pro-serice-container .swiper-wrapper .swiper-slide a:hover{ text-decoration: none; font-weight: bolder; color: #063054;}
.pro-serice-container .swiper-wrapper .swiper-slide a.active{font-weight: bolder; color: #063054;}
.pro-serice-container .swiper-wrapper .swiper-slide a:hover:after,.pro-serice-container .swiper-wrapper .swiper-slide a.active:after{border-bottom: 2px solid #063054; width: 100%;}
.pro-serice-container .swiper-wrapper .swiper-slide a:after{ content: ""; position: absolute; left: 0; bottom: 0;}

.pro-container{ margin-left: -15px; margin-right: -15px; margin-top: 1rem;}
.pro-con{ width: 33.3%; float: left; padding: 15px;}

.pro-view-container{ margin-top: 2rem;}
.pro-view-img{ width: 50%; float: left; border: 15px solid #07355c; text-align: center; padding-right: 30px;}
.pro-view-jj-con{ width: 50%; float: left; padding-left: 30px;}

.pro-view-jj-con .pro-con-title{ font-size: 1.85rem; margin-bottom: 15px; margin-top: 10px;border-bottom: 1px solid #d2d2d2; padding-bottom: 1rem;}
.pro-view-jj-con .pro-con-jj{ margin-bottom: 15px;}

.pro-view-conner{ margin-top: 3rem; border-top: 1px solid #d2d2d2;}
.pro-con-title-close{ font-size: 14px; margin-left: 15px; color: #333333;}
.pro-con-title-close a{ color: #07355c;}
.pro-con-title-close a:hover{ text-decoration:none; font-weight:bold;}

.pro-view-conner-con{ padding: 15px 0;}


.clear1{ display: block;}
.clear2{ display: none;}
@media screen and (max-width: 1920px){
	.banner-img-bg{ background-size:auto 150%;}
}
@media screen and (max-width: 991px){
	.top-navbar .navbar-collapse { 
	padding: 15px;
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: 1000;
    background: rgba(255,255,255,0.8);}
	.top-navbar .navbar-toggler { margin-right: 80px;}
	.top-navbar .nav-item { padding: 0 3px; border-bottom: 1px solid #dddddd;}
	.top-navbar .navbar-nav .nav-link:before {
    bottom: 0;
	}
	.top-navbar .nav-item .dropdown-menu{background: none;border: 0;}
	
	.container-title .container-title-en{ font-size: 5rem; line-height: 5rem; margin: 0 0 -30px -30px; }
	
	.foot-1-con{ padding-right: 0px; min-height: 300px; position: relative;}
	.foot-nav{ float: none; width: 100%; padding: 15px;}
	.foot-nav-ul li{ display: inline-block; padding-right: 15px;}
	.foot-link{ position: relative; width: 100%;}
	.foot-link ul li{ display: inline-block; padding: 15px;}
	
	.foot-copyright-l{ width: 100%; text-align: center;}
	.foot-copyright-r{ width: 100%; text-align: center;}
	
	.banner-img-con{ padding-top: 230px; padding-bottom: 3rem;}
	
	.about-con{ float: none; width: 100%;}
	.about-honor{ float: none; width: 100%; margin-top: 1rem;}
	
	.pro-container{ margin-left: -10px; margin-right: -10px;}
	.pro-con{ width: 50%; padding:15px 10px; }
	.clear1{ display: none;}
	.clear2{ display: block;}
	
	.pro-view-img{ width: 100%; float: none; border: 15px solid #07355c; text-align: center; padding-right: 0px;}
	.pro-view-jj-con{ width: 100%; float: none; padding-left: 0px; margin-top: 2rem;}
}
@media screen and (max-width: 768px){
	.top-navbar {
    min-height: 80px;
	}
	.top-brand img{ height: 80px;}
	.container-title .container-title-en{ margin: 0 0 -30px 0px; }
	
	.banner-img-con{ padding-top: 200px; padding-bottom: 3rem;}
}
@media screen and (max-width: 520px){
	.top-navbar {
    min-height: 50px;
	}
	.top-brand img{ height: 50px;}
	
	.pro-con{ width: 100%; float: none; }
	.clear1{ display: none;}
	.clear2{ display: none;}
}