@import url('https://fonts.googleapis.com/css?family=Prompt:200,300,400,500,600&subset=thai');
@font-face {
	font-family: 'DBOzoneX';
	src: url('fonts/DBOzoneX.eot');
	src: local('☺'), url('fonts/DBOzoneX.woff') format('woff'), url('fonts/DBOzoneX.ttf') format('truetype'), url('fonts/DBOzoneX.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
  font-family: 'DBOzoneXUltraLight';
  src: url('fonts/DBOzoneX-UltraLight.eot?#iefix') format('embedded-opentype'),  url('fonts/DBOzoneX-UltraLight.woff') format('woff'), url('fonts/DBOzoneX-UltraLight.ttf')  format('truetype'), url('fonts/DBOzoneX-UltraLight.svg#DBOzoneX-UltraLight') format('svg');
  font-weight: normal;
  font-style: normal;
}
body{
	font-size: 14px;
	font-family: "Prompt";
	padding: 0;
	margin: 0;
	font-weight: 300;
}
.navbar-brand{
  filter: grayscale(90%);
  -webkit-filter: grayscale(90%);
}
a{
	color: #222;
}
.navbar-brand{
	height: 0;
	outline: none;
}
.navbar{
	border-radius: 0;
	border:none;
	background: #fff;
	border-bottom: 1px solid #f1f1f1;
	margin-bottom: 0;
}
.topnav{
	float: right;
	padding: 15px 0;
}
.topnav > ul{
	list-style: none;
	padding: 0;
	display: flex;
	align-content: center;
	align-items: center;
	margin-bottom: 0;
}
.topnav > ul > li{
	padding: 0 5px;
}
.topnav > ul > li > a{
	display: inline-block;
}
.topnav > ul > li > a.phone,
.topnav > ul > li > a.investor{
    height: 33px;
    display: block;
    font-size: 14px;
    padding: 5px 15px;
    padding-top: 7px;
    border-radius: 17px;
    font-weight: bold;
}
.topnav > ul > li .topsocials{
	margin-top: 3px;
}
.topnav > ul > li .setlang > a{
	font-size: 20px;
	padding: 0 8px;
}
.topnav > ul > li > a.phone{
	color: #fff;
	background: #00c601;
}
.topnav > ul > li > a.investor{
	color: #fff;
	background: #39c1cd;
}
.topnav .setlang{
	position: relative;
}
.topnav .setlang a{
	display: inline-block;
	font-weight: bold;
}
.topnav .setlang a:first-child{
	border-right: 2px solid #222;
	padding-right: 10px;
}
.topnav .setlang a.active{
	color: #61cbd6;
}
.boxtopsearch{
	font-size: 22px;
}
.boxtopsearch a{
	display: block;
	padding: 0 5px;
}
.nav .open>a, .nav .open>a:focus,
.nav .open>a:hover{
	background: #39c1cd;
	border-color: #39c1cd;
	color: #fff;
}
.navbar-toggle .icon-bar{
	background: #39c1cd;
	height: 4px;
	width: 30px;
}
.navbar-nav>li>.dropdown-menu{
	border: none;
	border-radius: 0;
	min-width: 100%;
	box-shadow: none;
	background: #39c1cd;
}
.boxourcompany{
	background: url('/web-assets/img/home-bg-about.jpg') top left no-repeat;
	background-size: cover;
	padding: 150px 0;
	padding-bottom: 0;
	color: #fff;
	min-height: 700px;
}
.boxourcompany .infomation{
	width: 50%;
	font-size: 20px;
}
.boxourcompany .infomation .h2{
	font-size: 50px;
}
.boxourcompany .infomation .more{
	margin-top: 20px;
}
.boxourcompany .infomation .more a{
	font-size: 18px;
	padding: 10px 40px;
	border:none;
	background: #0662a5;
}
.boxwather{
	background: url('/web-assets/img/home-bg-water.jpg') top left no-repeat;
	background-size: cover;
	padding: 150px 0;
	padding-bottom: 0;
	color: #fff;
	min-height: 700px;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
.boxwather .infomation{
	font-size: 20px;
	padding-bottom: 150px;
}
.boxwather .infomation .h2{
	font-size: 50px;
}
.boxwather .infomation .h2 span{
	font-weight: 100;
}
.boxwather .infomation .h3{
	font-style:
}
.boxwather .infomation .subinfo{
	width: 50%;
	position: relative;
}
.boxwather .infomation .subinfo a{
	left: 100%;
	top: 20px;
	position: absolute;
	margin-left: 50px;
}
.boxwather .menusec{
	background: rgba(0, 202, 193, 0.9);
	font-size: 15px;
}
.boxwather .menusec > div > ul{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	height: 100%;
}
.boxwather .menusec > div > ul > li{
	float: left;
	width: 14.28%;
	padding: 45px 20px;
	padding-top: 80px;
	text-align: center;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.boxwather .menusec > div > ul > li:hover{
	background: #0582b5;
}
.boxwather .menusec > div > ul > li.active{
	background: #006e9b;
}
.boxwather .menusec > div > ul > li a{
	display: block;
	color: #fff;
}
.boxwather .menusec > div > ul > li a .name{
	padding: 15px 0;
}
.boxwather .menusec > div > ul > li a img{
	width: 100%;
}
.slick-prev:before,
.slick-next:before{
	color: #000;
}
.boxproducts,
.boxrefproducts{
	padding: 80px 0;
}
.headertitle{
	text-align: center;
	font-size: 30px;
	margin-bottom: 20px;
	font-weight: 400;
}
.filterproducts{
	margin-bottom: 20px;
}
.filterproducts .form-control{
	font-size: 18px;
	border-radius: 0;
	height: 40px;
}
.boxsearch{
	position: relative;
}
.boxsearch button[type="submit"]{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	border-right: 0;
	background: none;
	border:none;
	color: #000;
	font-size: 20px;
	padding: 0 10px;
}
.slick-slider{
	outline: none;
}
.slideproducts.slick-dotted.slick-slider{
	margin-bottom: 50px;
}
.slideproducts .productinfo{
	position: relative;
	outline: none;
}
.slideproducts .productinfo .img{
	overflow: hidden;
	margin-bottom: 15px;
}
.slideproducts .productinfo .img > img{
	height: 400px;
	width: 100%;
	object-fit: contain;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.slideproducts .productinfo:hover .img > img:hover{
	-webkit-transform: scale(1.1);
	   -moz-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	     -o-transform: scale(1.1);
	        transform: scale(1.1);
}
.slideproducts .productinfo .name{
	text-align: center;
	font-size: 24px;
	font-weight: 400;
	max-width: 300px;
	margin: auto;
	padding-top: 5px;
	padding-left: 15px;
	padding-right: 15px;
}
.slideproducts .productinfo .brand{
	color: #999;
	text-align: center;
	font-size: 13px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.slideproducts .slick-prev,
.slideproducts .slick-next{
	width: 40px;
	height: 40px;
}
.slideproducts .slick-prev{
	left: -40px;
	background: url('/web-assets/img/i-prev3.png') center center no-repeat;
}
.slideproducts .slick-next{
	right: -40px;
	background: url('/web-assets/img/i-next3.png') center center no-repeat;
}
.slideproducts .slick-prev:before,
.slideproducts .slick-next:before{
	display: none;
}

.boxrefproducts{
	background: #fff;
	padding: 20px 0;
}
.boxrefproducts .headertitle{
	color: #39c1cd;
	font-size : 100px;
}
.slideprojects{
	padding: 0 150px;
}
.slideprojects.slick-dotted.slick-slider{
	margin-bottom: 50px;
}
.slideprojects .productinfo{
	display: flex;
	position: relative;
	background: #fff;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.slideprojects .productinfo .img{
	overflow: hidden;
	/* height: 550px; */
	min-width: 50%;
	max-width: 50%;
}
.slideprojects .productinfo .img > img{
	height: 100%;
	width: 100%;
	object-fit: cover;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.slideprojects .productinfo:hover .img > img{
	-webkit-transform: scale(1.05);
	   -moz-transform: scale(1.05);
	    -ms-transform: scale(1.05);
	     -o-transform: scale(1.05);
	        transform: scale(1.05);
}
.slideprojects .productinfo .info{
	display: flex;
	flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-left: -100px;
	min-width: calc(50% + 100px);
	max-width: calc(50% + 100px);
	position: relative;
	z-index: 1;
}
.slideprojects .productinfo .info  .name{
	text-align: left;
	font-size: 40px;
	font-weight: 400;
	background: #39c1cd;
	color: #fff;
	padding: 45px 60px;
	width: 100%;
}
.slideprojects .productinfo .info  .name .n2{
	font-size: 24px;
}
.slideprojects .productinfo .info .image{
	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
}
.slideprojects .slick-prev,
.slideprojects .slick-next{
	width: 60px;
	height: 120px;
}
.slideprojects .slick-prev{
	left: 0px;
	background: url('/web-assets/image/i-project-prev.png') center center no-repeat;
}
.slideprojects .slick-next{
	right: 0px;
	background: url('/web-assets/image/i-project-next.png') center center no-repeat;
}
.slideprojects .slick-prev:before,
.slideprojects .slick-next:before{
	display: none;
}
a.morelink{
	display: inline-block;
	font-size: 18px;
	padding: 10px 40px;
	border:none;
	background: #0662a5;
	color: #fff;
	border-radius: 5px;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
a.morelink:hover{
	-webkit-transform: scale(1.05);
	   -moz-transform: scale(1.05);
	    -ms-transform: scale(1.05);
	     -o-transform: scale(1.05);
	        transform: scale(1.05);
}
.boxrnewskm{
	background: url('/web-assets/img/home-bg-news.jpg') top left no-repeat;
	background-size: cover;
	padding: 70px 0;
	padding-bottom: 150px;
	height: 600px;
	position: relative;
}
.boxrnewskm > div{
	position: relative;
	z-index: 1;
}
.boxrnewskm::before,
.boxrnewskm::after{
	position: absolute;
	content: '';
	top: 0;
	bottom: 0;
	z-index: 0;
}
.boxrnewskm::before{
	background: rgba(59, 194, 181, 0.5);/*50*/
	left: 0;
	right: 50%;
}
.boxrnewskm::after{
	background: rgba(59, 194, 107, .23);/*23*/
	right: 0;
	left: 50%;
}
.boxrnewskm .headertitle{
	margin-bottom: 40px;
}
.boxrnewskm .productinfo .img{
	overflow: hidden;
	height: 200px;
}
.boxrnewskm .productinfo .img > img{
	min-height: 100%;
	width: 100%;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.boxrnewskm .productinfo:hover .img > img{
	-webkit-transform: scale(1.1);
	   -moz-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	     -o-transform: scale(1.1);
	        transform: scale(1.1);
}
.boxrnewskm .productinfo .name{
	font-size: 17px;
	padding-top: 20px;
	padding-bottom: 20px;
	min-height: 120px;
}
.boxcontacts{
	background: url('/web-assets/img/bg-contact.jpg') center center no-repeat;
	background-size: cover;
	padding: 80px 0;
	padding-bottom: 150px;
	color: #fff;
	position: relative;
}
.boxcontacts .topinfo .people{
	text-align: center;
}
.boxcontacts .topinfo .people img{
	max-width: 100%;
}
.boxcontacts .topinfo .companyinfo{
	text-align: center;
}
.boxcontacts .topinfo .companyinfo .name{
	font-size: 30px;
	border-bottom: 1px solid #fff;
	padding-bottom: 20px;
}
.boxcontacts .topinfo .companyinfo address{
	font-size: 18px;
	padding-top: 16px;
}
.boxcontacts .topinfo .companyinfo .phone{
	font-size: 16px;
}
.boxcontacts .topinfo .maplink{
	text-align: center;
}
.boxcontacts .topinfo .maplink a{
	display: block;
	margin-bottom: 15px;
}
footer{
	position: relative;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
footer.hidefooter{
	padding: 0;
}
footer .sitemapbg{
	background: rgba(255,255,255,0.9);
	padding: 15px 0;
	text-align: center;
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
}
footer .sitemapbg a{
	display: inline-block;
	background: #000;
	color: #fff;
	height: 35px;
	padding: 0 20px;
	border-radius: 18px;
	padding-top: 7px;
	min-width: 200px;
}
footer .sitemapbg a:hover{
	background: #333;
}
footer.hidefooter .sitemapbg a{
	background: #999;
}
footer.hidefooter .sitemapbg a:hover{
	background: #666;
}
footer.hidefooter .sitemapbg a:after{
	content: ' +';
}
footer{
	background: rgb(16,88,161);
	background: linear-gradient(90deg, rgba(16,88,161,1) 0%, rgba(54,184,201,1) 100%);
	color: #fff;
	padding-top: 100px;
	padding-bottom: 70px;
}
footer a{
	display: inline-block;
	color: #fff;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
footer .footermenu{
	display: flex;
	justify-content: space-between;
}
footer .footermenu hr{
	border-color: rgba(255, 255, 255, 0.3);
}
footer .footermenu .left,
footer .footermenu .right{
	width: 35%;
}
footer .footermenu .right{
	width: 40%;
	white-space: nowrap;
}
footer .footermenu .left h4{
	font-size: 50px;
	margin: 0;
	padding: 0;
	font-weight: 800;
}
footer .footermenu .left .sub{
	font-size: 18px;
	font-style: italic;
}
footer .footermenu .left .fullname{
	font-size: 20px;
	text-transform: uppercase;
	font-weight: 400;
}
footer .footermenu .left .address{
	font-size: 16px;
	padding-bottom: 15px;
}
footer .footermenu .left .phone{
	display: flex;
	align-items: center;
	font-size: 20px;
	font-weight: 500;
}
footer .footermenu .left .phone svg{
	margin-right: 10px;
}
footer .footermenu .right h4{
	font-size: 30px;
	margin: 0;
	padding-top: 10px;
	padding-bottom: 10px;
}
footer .footermenu .right .menu{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
    flex-wrap: wrap;
}
footer .footermenu .right .menu > li{
	padding: 5px 30px;
	width: 33.33%;
}
footer .footermenu .right .menu > li > a{
	font-size: 16px;
	font-weight: 400;
}
footer .footermenu .right .social{
	display: flex;
	align-items: center;
}
footer .footermenu .right .social h5{
	font-size: 30px;
	padding: 0;
	margin: 0;
	padding-right: 30px;
}
footer .footermenu .right .social > ul{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
}
footer .footermenu .right .social > ul > li{
	padding-right: 15px;
}
footer .footermenu .right .social > ul > li a{
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
footer .footermenu .right .social > ul > li a:hover{
	-webkit-transform: scale(0.9);
	   -moz-transform: scale(0.9);
	    -ms-transform: scale(0.9);
	     -o-transform: scale(0.9);
	        transform: scale(0.9);
}
.copyright{
	background: #fff;
	padding: 20px 0;
	color: #125ea4;
	font-size: 16px;
	font-weight: 500;
}

.projecttg,
.newstg{
	height: 24vw;
	background: url('/web-assets/img/bg-news.jpg') bottom center no-repeat;
	background-size: cover;
}
.projecttg{
	background-image: url('/web-assets/img/bg-project.jpg');
}
.boxnav{
	background: #fff;
	padding: 20px 0;
}
.boxnav .breadcrumb{
	margin: 0;
	background: none;
}
.boxnav .breadcrumb .glyphicon-home{
	color: #39c1cd;
	padding-right: 5px;
	font-size: 22px;
	vertical-align: top;
}
.morecsr{
    padding: 50px 0;
    border-bottom: 1px solid #ddd;
}
.morecsr .rownews{
    background: #fff;
    padding: 0px;
    margin-bottom: 30px;
    height: 360px;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}
.morecsr .rownews:hover{
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
}
.morecsr .img{
    position: relative;
    overflow: hidden;
    height: 245px;
}
.morecsr .subject{
    font-size: 16px;
    padding: 10px;
    color: #474545;
    font-weight: 400;
}
.morecsr .img .time{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: #0460a3;
    color: #fff;
    padding-top: 3px;
    padding-left: 13px;
    padding-right: 13px;
}
.morecsr #slidenews .img img{
    min-width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;
    -webkit#slidenews: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}
.morecsr .rownews:hover .img img{
    -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
         -o-transform: scale(1.1);
            transform: scale(1.1);
}
#pagination{
	text-align: center;
}
.pagination>li:last-child>a, .pagination>li:last-child>span,
.pagination>li:first-child>a, .pagination>li:first-child>span{
	border-radius: 0;
}
.pagination>li>a, .pagination>li>span{
	border:none;
	font-weight: 400;
	font-size: 18px;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{
    background-color: #39c1cd;
    border-color: #39c1cd;
}
.p_prev span{
}
.pagination>li>a{
	padding: 5px 15px;
	margin: 0;
	margin-left: 3px;
	margin-right: 3px;
}
.pagination>li>a.p_num{
	color: #333;
	background: #eee;
}
.javaword{
	min-height: 100px;
}
.breadcrumb > li{
	font-size: 18px;
}
.breadcrumb > li > a{
	color: #222;
}
.breadcrumb > li:last-child > a{
	color: #39c1cd;
}
.breadcrumb>li+li:before{
	color: #222;
}
.datanotfound{
	padding: 40px 0;
	text-align: center;
	font-size: 20px;
	color: #999;
}
.projectnav{
	text-align: center;
	background: #fff;
	padding: 20px 0;
}
.projectnav a{
	display: inline-block;
	padding: 5px 15px;
	vertical-align: middle;
	font-weight: 400;
}
.projectnav a.center{
	background: #0662a5;
	color: #fff;
}

.topwarter{
	position: relative;
	height: 25vw;
	background: url('/web-assets/img/bg-water3.jpg') center center no-repeat;
	background-size: cover;
}
.topwarter .name{
	position: absolute;
	color: #fff;
	padding: 20px 30px;
	background: rgba(0, 0, 0, 0.5);
	max-width: 750px;
	height: 120px;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	font-size: 50px;
	text-align: center;
	font-weight: 400;
}
.topwarter .name span{
	font-weight: 100;
}
.innerwarter{
	padding-bottom: 100px;
	font-size: 20px;
}
.innerwarter h1{
	font-size: 40px;
	color: #3e4d9d;
	margin: 0;
	margin-bottom: 15px;
}
.innerwarter .middle{
	padding-top: 30px;
	padding-bottom: 30px;
}
.innerwarter .middle p{
}
.innerwarter .middle img{
	width: 100%;
}
.innter_header{
	margin-top: 30px;
}
.coverimage{
	background-size: cover;
}
@media (max-width: 767px) {
	.innter_header{
		margin-top: 20px;
		font-size: 18px;
	}
	.topwarter .name{
		font-size: 4vw;
		max-width: inherit;
		bottom: 0;
		top: auto;
		height: auto;
		padding: 3vw
	}
	.innerwarter{
		padding-bottom: 50px;
		font-size: 16px;
	}
	.innerwarter h1{
		font-size: 30px;
	}
	.innerwarter .middle{
		padding: 15px 0;
	}
	.projecttg, .newstg{
		height: 40vw;
	}
}
@media (max-width: 425px) {
	.innerwarter h1{
		font-size: 20px;
	}
}
.navbar-nav>li>a{
	font-size: 18px;
	padding: 13px 25px;
	font-weight: 400;
}
.nav .dropdown-menu{
	padding: 5px 0;
	border-top: 2px solid #ccc;
}
.nav .dropdown-menu>li>a{
	font-size: 16px;
	padding: 10px 25px;
	color: #fff;
}
.navbar-nav>li:hover > .dropdown-menu{
	display: block;
}
.nav > li:hover>a,
.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover{
	color: #39c1cd!important;
	background: none!important;
}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    color: #262626;
    text-decoration: none;
    background-color: #0a5386;
    color: #fff;
}
/* Customize the label (the checkcontainer) */
.checkcontainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 0px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 300;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkcontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkcontainer .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkcontainer input:checked ~ .checkmark {
  background-color: #3e4d9d;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkcontainer .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkcontainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkcontainer .checkmark:after {
  left: 1px;
  top: 1px;
  bottom: 1px;
  right: 1;
  width: 23px;
  height: 23px;
  border: solid white;
}

/* Customize the label (the radiocontainer) */
.radiocontainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.radiocontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.radiocontainer .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radiocontainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radiocontainer input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radiocontainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radiocontainer .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
.quickcontact{
	margin-top: 15px;
}
.quickcontact a{
  display: inline-block;
  padding: 15px 20px;
  height: 50px;
  width: 122px;
  overflow: hidden;
  text-indent: -999px;
}
.quickcontact a.call{
  background: url('/web-assets/img/a-call.png') left center no-repeat;
}
.quickcontact a.chat{
  background: url('/web-assets/img/a-chat.png') left center no-repeat;
  width: 144px;
}
.quickcontact a.share{
  background: url('/web-assets/img/a-share.png') left center no-repeat;
  width: 90px;
}
.boxotherinfo{
	padding: 0px 0;
	padding-top: 50px;
}
.boxotherinfo .bgtab{
	padding-bottom: 80px;
	font-size: 16px;
}
.boxotherinfo .bgtab .container{
	border: 5px solid #39c1cd;
	min-height: 600px;
	padding: 30px;
}
.boxotherinfo .bgtab .title{
	font-size: 50px;
	padding-bottom: 20px;
	display: none;
}
.boxotherinfo .nav-tabs{
	border: none;
	display: flex;
	justify-content: center;
}
.boxotherinfo .nav-tabs>li>a{
	font-size: 26px;
	padding: 15px 40px;
	color: #7d7f80;
	border: 1px solid #ccc;
	margin: 0 5px;
	border-bottom: none!important;
	border-radius: 15px 15px 0 0;
	font-weight: 400;
}
.boxotherinfo .nav-tabs>li:hover>a,
.boxotherinfo .nav-tabs>li:hover>a:focus,
.boxotherinfo .nav-tabs>li:hover>a:hover{
	color: #ffff!important;
	background: #39c1cd!important;
	border-color: #39c1cd!important;
}
.boxotherinfo .nav-tabs>li.active>a,
.boxotherinfo .nav-tabs>li.active>a:focus,
.boxotherinfo .nav-tabs>li.active>a:hover{
	color: #fff !important;
	background: #39c1cd!important;
	border-color: #39c1cd!important;
}
.docuclists{
	list-style: none;
	padding: 0;
}
.docuclists > li{
	float: left;
}
.docuclists > li .downloadbox{
	position: relative;
	border-bottom: 1px solid #aaa;
	padding: 15px 0;
}
.docuclists > li:last-child .downloadbox{
	border-bottom: none;
}
.docuclists > li .downloadbox .icon{
	float: left;
	width: 40px;
	height:50px;
	background: url('/web-assets/img/i-pdf.png') left top no-repeat;
}
.docuclists > li .downloadbox .info{
	padding-left: 60px;
	position: relative;
	padding-right: 120px;
}
.docuclists > li .downloadbox .info .name{
	font-size: 20px;
	text-transform : uppercase;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.docuclists > li .downloadbox .info .desc{
	color: #999;
}
.docuclists > li .downloadbox .info .btn{
	background: #007de6;
	color: #fff;
	position: absolute;
	top: 0px;
	right: 15px;
}
.lastviews{
	padding: 100px 0;
}
.lastviews .subtitle{
	text-align: center;
	position: relative;
	display: flex;
	justify-content: center;
}
.lastviews .subtitle h3{
	font-size: 40px;
	background: #39c1cd;
	font-weight: bold;
	color: #fff;
	text-transform: uppercase;
	position: relative;
	z-index: 1;
	padding: 30px 50px;
	border-radius: 30px;
	margin: 0;
}
.lastviews .subtitle::before{
	content: '';
	height: 5px;
	background: #39c1cd;
	position: absolute;
	left: -15px;
	right: -15px;
	top: 0;
	bottom: 0;
	margin: auto;
}
#innerBox{
	padding-bottom: 100px;
}
label.error{
	color: red;
	padding-top: 3px;
}
.footerourcompany .name{
	float: left;
}
.footerourcompany .bannerslide{
	padding-left: 160px;
}
.footerourcompany .bannerslide img{
	width: 100%;
	max-height: 35px;
}
.mfp-figure:after{
	background: none;
}
#dataReturn.datalist > li > .info .link > a{
	word-break: break-word;
}
.white-popup-phone,
.white-popup-line {
	padding: 20px 20px;
}
.white-popup-line .mfp-content{
	text-align: center;
	max-width: 340px;
	height: 400px!important;
	position: relative;
	border: none;
}
.white-popup-phone .mfp-content{
	text-align: center;
	max-width: 340px;
	height: 200px!important;
	position: relative;
	border: none;
}
.pagehead{
	color: #fff;
	background: #002955;
	padding: 120px 15px;
	text-align: center;
	font-size: 40px;
	margin-bottom: 50px;
}

/* html */
.about_oasis{
	font-size: 24px;
	color: #555353;
}
.about_oasis > div:not(.clearfix){
	padding-bottom: 30px;
}
.about_oasis h2{
	color: #39c1cd;
	font-size: 60px;
	font-weight: 500;
}
.about_oasis .desc{
	display: flex;
}
.about_oasis .sec1 p,
.about_oasis .sec3 p,
.about_oasis .sec5 p{
	padding-right: 30px;
}
.about_oasis .img{
	min-width: 50%;
	max-width: 50%;
}
.about_oasis .img > img{
	width: 100%;
}
.about_oasis .sec2 .img{
	padding-right: 30px;
}
.about_oasis h3{
	color: #39c1cd;
	font-size : 30px;
	font-weight: 500;

}
.about_oasis .sec5 h3{
	font-size : 40px;
}
.about_oasis .reward{
	background: url('/web-assets/image/demo/about-bg.jpg') center center no-repeat;
	background-size: cover;
	color: #fff;
	padding: 100px 150px;
	margin-bottom: 100px;
}
.about_oasis .reward > ul{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	overflow-y: auto;
	margin-left: -40px;
	margin-right: -40px;
}
.about_oasis .reward > ul > li{
	min-width: 25%;
	max-width: 25%;
	padding: 0 40px;
	font-size: 20px;
}
.about_oasis .reward > ul > li .image > img{
	width: 100%;
}
.about_oasis .reward > ul > li .info{
	padding-top: 30px;
	padding-bottom: 30px;
}
.about_oasis .reward > ul > li .info .name{
	font-weight: 500;
	font-size: 24px;
}
.about_oasis .reward > ul > li .info .name2{
	font-weight: 500;
}
.why_oasis{
	font-size: 26px;
	color: #555353;
}
.why_oasis h2{
	color: #39c1cd;
	font-weight: 500;
	font-size: 38px;
}
.why_oasis .sec1,
.why_oasis .sec2,
.why_oasis .sec3{
	padding-bottom: 100px;
}
.why_oasis .sec2 img{
	width: 100%;
}
.why_oasis .sec3 h2{
	margin-bottom: 30px;
}
.why_oasis .sec4{
	display: flex;
	padding-bottom: 150px;
	align-items: flex-end;
}
.why_oasis .sec4 .info{
	padding-left: 40px;
	color: #959898;
	font-size: 20px;
}
.why_oasis .sec4 .info p{
	margin-bottom: 20px;
}
.why_oasis .sec5{
	display: flex;
	padding-bottom: 40px;
}
.why_oasis .sec5 .info{
	padding-left: 40px;
}
.why_oasis .sec4 .image,
.why_oasis .sec5 .image{
	max-width: 50%;
	min-width: 50%;
}
.why_oasis .sec4 .image img,
.why_oasis .sec5 .image img{
	width: 100%;
}
.why_oasis .sec5 .info h2{
	line-height: 60px;
}
.why_oasis .sec5 .info h2,
.why_oasis .sec5 .info p{
	margin-bottom: 40px;
}
.why_oasis .sec6{
	padding-bottom: 50px;
	overflow: hidden;
}
.why_oasis .sec6 > ul{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
}
.why_oasis .sec6 > ul{
	margin-left: -30px;
	margin-right: -30px;
}
.why_oasis .sec6 > ul > li{
	width: 50%;
	display: flex;
	padding: 30px;
}
.why_oasis .sec6 .info{
	background: #39c1cd;
	color: #fff;
	padding: 15px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.why_oasis .sec6 .image{
	min-width: 40%;
	max-width: 40%;
}
.why_oasis .sec6 .image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.why_oasis .sec6 .info .name{
	font-size: 30px;
	font-weight: 500;
}
.why_oasis .sec6 .info .desc{
	font-size: 20px;
}
.why_oasis .sec7{
	display: flex;
	padding-bottom: 50px;
}
.why_oasis .sec7 .info{
	min-width: 50%;
	max-width: 50%;
	padding-right: 40px;
}
.why_oasis .sec7 .info h2,
.why_oasis .sec7 .info p{
	margin-bottom: 40px;
}
.why_oasis .sec7 .image img{
	max-width: 100%;
	margin-bottom: 40px;
}
.why_oasis .sec8{
	display: flex;
}
.why_oasis .sec8 .image{
	min-width: 50%;
	max-width: 50%;
	padding-right: 40px;
}
.why_oasis .sec8 .image img{
	max-width: 100%;
}
.why_oasis .sec8 .info h2,
.why_oasis .sec8 .info p{
	margin-bottom: 40px;
}
.why_oasis .sec9{
	text-align: center;
	padding-bottom: 100px;
}
.why_oasis .sec9 .image img{
	max-width: 100%;
}
@media (max-width: 1800px) {
	.about_oasis{
		font-size: 20px;
	}
	.about_oasis h2{
		font-size: 40px;
	}
	.about_oasis .sec5 h3{
		font-size: 30px;
	}
	.about_oasis .reward{
		padding: 80px 70px;
	}
	.about_oasis .reward > ul{
		margin-left: -15px;
		margin-right: -15px;
	}
	.about_oasis .reward > ul > li{
		padding: 0 15px
	}
	.about_oasis .reward > ul > li .info{
		font-size: 16px;
		padding: 15px 0;
	}
	.about_oasis .reward > ul > li .info .name{
		font-size: 20px;
	}
	.why_oasis .sec1, .why_oasis .sec2, .why_oasis .sec3{
		padding-bottom: 50px;
	}
	.why_oasis .sec4{
		padding-bottom: 80px;
	}
	.why_oasis{
		font-size: 18px;
	}
	.why_oasis h2{
		font-size: 26px;
	}
	.why_oasis .sec6 > ul{
		margin-left: -15px;
		margin-right: -15px;
	}
	.why_oasis .sec6 > ul > li{
		padding: 15px;
		padding-bottom: 0;
	}
	.why_oasis .sec6 > ul > li:nth-child(2n+0){
		padding-left: 7.5px;
	}
	.why_oasis .sec6 > ul > li:nth-child(1n+0){
		padding-right: 7.5px;
	}
	.why_oasis .sec6 .info{
		padding: 15px 30px;
	}
	.why_oasis .sec6 .info .name{
		font-size: 24px;
	}
	.why_oasis .sec6 .info .desc{
		font-size: 16px;
	}
}
@media (max-width: 1299px) {
	.about_oasis{
		font-size: 18px;
	}
	.about_oasis h2{
		font-size: 30px;
	}
	.about_oasis h3{
		font-size: 24px;
	}
	.about_oasis .reward{
		margin-bottom: 40px;
	}
	.why_oasis .sec1, .why_oasis .sec2, .why_oasis .sec3{
		padding-bottom: 20px;
	}
	.why_oasis .sec4{
		padding-bottom: 30px;
	}
	.why_oasis .sec9,
	.why_oasis .sec7,
	.why_oasis .sec6,
	.why_oasis .sec5{
		padding-bottom: 0;
	}
}
@media (max-width: 1199px) {
	.about_oasis{
		font-size: 16px;
	}
	.about_oasis h2{
		font-size: 24px;
	}
	.about_oasis h3{
		font-size: 20px;
	}
	.about_oasis .sec5 h3{
		font-size: 20px;
	}
	.about_oasis .reward > ul > li .info .name{
		font-size: 16px;
	}
	.about_oasis .reward > ul > li .info{
		font-size: 14px;
	}
	.why_oasis .sec3 h2,
	.why_oasis .sec5 .info h2, .why_oasis .sec5 .info p,
	.why_oasis .sec8 .info h2, .why_oasis .sec8 .info p,
	.why_oasis .sec7 .info h2, .why_oasis .sec7 .info p{
		margin-bottom: 15px;
	}
	.why_oasis .sec5 .info h2{
		line-height: 24px;
	}
	.why_oasis .sec4{
		align-items: flex-start;
	}
	.why_oasis h2{
		font-size: 18px;
	}
	.why_oasis .sec4 .info,
	.why_oasis{
		font-size: 14px;
	}
	.why_oasis .sec6 .info .name{
		font-size: 18px;
	}
}
@media (max-width: 991px) {
	.about_oasis .desc{
		flex-direction: column;
	}
	.about_oasis .sec1 p, .about_oasis .sec3 p, .about_oasis .sec5 p{
		padding-right: 0;
	}
	.about_oasis .txt{
	}
	.about_oasis .img{
		min-width: 100%;
		max-width: 100%;
	}
	.about_oasis > div:not(.clearfix){
		padding-bottom: 0;
	}
	.about_oasis .sec2{
		padding-top: 15px;
	}
	.about_oasis .sec2 .desc{
		flex-direction: column-reverse;
	}
	.about_oasis .reward{
		padding: 30px;
	}
	.about_oasis .reward > ul > li{
		padding: 0 10px;
	}
	.why_oasis .sec6 .info{
		padding: 15px;
	}
	.why_oasis .sec6 .info .name{
		font-size: 16px;
	}
	.why_oasis .sec6 .info .desc{
		font-size: 14px;
	}
	.about_oasis .reward{
		margin-bottom: 0px;
	}
}
@media (max-width: 767px) {
	.about_oasis .reward > ul > li{
		min-width: 33.33%;
		max-width: 33.33%;
	}
	.why_oasis .sec1, .why_oasis .sec2, .why_oasis .sec3{
		padding-bottom: 0px;
	}
	.why_oasis .sec5,
	.why_oasis .sec4{
		flex-wrap: wrap;
		padding-bottom: 15px;
	}
	.why_oasis .sec4 .image, .why_oasis .sec5 .image{
		max-width: 100%;
		min-width: 100%;
		margin-bottom: 15px;
	}
	.why_oasis .sec5 .info,
	.why_oasis .sec4 .info, .why_oasis{
		padding-left: 0;
	}
	.why_oasis .sec4 .info p{
		margin-bottom: 10px;
	}
	.why_oasis .sec5 .info h2{
		margin-top: 0;
	}
	.why_oasis .sec6 > ul > li{
		padding-top: 0;
		padding-bottom: 15px;
	}
	.why_oasis .sec5{
		padding-bottom: 0;
	}
	.why_oasis .sec7 .info{
		padding-right: 0;
	}
}
@media (max-width: 570px) {
	.about_oasis .reward > ul > li{
		min-width: 50%;
		max-width: 50%;
	}
	.why_oasis .sec8,
	.why_oasis .sec7{
		flex-wrap: wrap;
	}
	.why_oasis .sec8 .image,
	.why_oasis .sec7 .info{
		min-width: 100%;
		max-width: 100%;
	}
	.why_oasis .sec6 > ul > li{
		width: 100%;
	}
}



/*home*/
.home_sec2{
    padding: 80px 0;
}
.home_sec2 .colinfo{
    display: flex;
}
.home_sec2 .colinfo .info{
    background: #39c1cd;
    color: #fff;
    padding: 100px;
}
.home_sec2 .colinfo .img,
.home_sec2 .colinfo .info{
    width: 50%;
}
.home_sec2 .colinfo .img > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right;
}
.home_sec2 .colinfo.row1{
    flex-direction: row-reverse;
    margin-bottom: 70px;
}
.home_sec2 .colinfo.row1 h3{
    font-size: 50px;
    margin-bottom: 20px;
}
.home_sec2 .colinfo.row1 p{
    font-size: 24px;
}
.home_sec2 .colinfo.row2 .info{
    font-size: 50px;
    text-align: center;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 80px;
}
@media (max-width: 1800px) {
    .home_sec2 .colinfo .info{
        padding: 50px;
    }
    .home_sec2 .colinfo.row1 h3{
        font-size: 40px;
    }
    .home_sec2 .colinfo.row1 p{
        font-size: 20px;
    }
    .home_sec2 .colinfo.row2 .info{
        font-size: 40px;
        line-height: 60px;
    }
    .home_sec2{
        padding-bottom: 40px;
    }
}
@media (max-width: 991px) {
    .home_sec2 .colinfo{
        flex-wrap: wrap;
    }
    .home_sec2 .colinfo .img, .home_sec2 .colinfo .info{
        width: 100%;
    }
    .home_sec2 .colinfo .info{
        padding: 20px 30px;
        padding-bottom: 30px;
    }
}
@media (max-width: 767px) {
    .home_sec2{
        padding: 15px 0;
    }
    .home_sec2 .colinfo.row1{
        margin-bottom: 15px;
    }
}
@media (max-width: 600px) {
    .home_sec2 .colinfo.row1 h3{
        font-size: 30px;
    }
    .home_sec2 .colinfo.row2 .info{
        font-size: 7vw;
        line-height: 13vw;
    }
}