@charset "UTF-8";

/* =Reset */
	* {
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	outline: 0;
	box-sizing: content-box; }

	article,aside,dialog,details,
	figcaption,figure,footer,header,
	hgroup,menu,nav,section {display: block; }

	html {height: 100%; overflow: auto; }
	body {font: 100%/1 Helvetica, Arial, Tahoma, Garuda, sans-serif; background: #ddeef5; padding-top: 73px; padding-bottom: 112px; }

	img {vertical-align: baseline; }
	table {border-collapse: collapse; border-spacing: 0; }
	td {vertical-align: top; }
	li {list-style: none; font-size: 18px; line-height: 18px; }
	
	input[type="text"],
	input[type="password"],
	input[type="email"],
	select,
	textarea {
		border: 1px solid #dcdcdc; 
		height: 28px; 
		line-height: 28px; 
		font-size: 18px;
		margin: 0 0 1px;
		width: 100%;
		border-radius: 5px;
		padding: 0 2px 0 5px; }
	
	textarea {overflow: auto; height: 58px; font-family: unset;}

	h1 {font-size: 30px; color: #035aab; font-weight: normal; }
	h2 {font-size: 20px; }
	h3 {font-size: 14px; }
	h4 {font-size: 14px; }
	h5 {font-size: 14px; }
	h6 {font-size: 14px; }
	p {color: #555; font-size: 18px; line-height: 18px; }
	ul, ol {color: #555; font-size: 12px; }

	a {color: #555; text-decoration: none; }
	a:hover {text-decoration: underline; }

#main-header {
	height: 73px;
	position: fixed;
	top: 0;
	z-index: 1001;
	width: 100%;
	background: url(images/header.png) center top no-repeat;
	padding-bottom: 9px; }

#main-header > div {width: 940px; margin: auto; }

#main-logo {float: left; margin-left: -11px; }
#main-logo a {
	width: 151px; 
	height: 70px; 
	display: block; 
	background: url(images/logo.png); 
	margin: 1px 0 0;
	text-indent: -999em; 
	overflow: hidden; }

#main-nav {float: right; }
#main-nav li {
	float: left; 
	padding: 20px 0 0; 
	height: 34px; }

#main-nav li a {
	color: #005a99; 
	font-size: 14px; 
	font-weight: bold; 
	display: block; 
	border-right: 1px dotted #fff; 
	text-decoration: none;
	height: 100%; 
	padding: 0 34px 0 7px; }

#main-nav li:first-child a {border-left: 1px dotted #fff; }

#main-nav .active,
#main-nav li:hover {border-top: 3px solid #fff; padding-top: 17px; }

#main-nav li:hover a,
#main-nav .active a {color: #fff; }

.change-lang {float: right; margin: 20px 0 0 8px; }
.change-lang li {
	margin: 0 0 7px; 
	width: 16px; height: 10px; 
	background: url(images/flag.png) top; 
	text-indent: -999em; 
	float: left;
	overflow: hidden; }

.change-lang li + li {background-position: 0 199px; clear: left; }
.change-lang a {display: block; }

.wrp-slide {position: relative; background: url(images/bg-banner.jpg) top center no-repeat; max-width: 1600px; margin: 0 auto; padding-bottom: 83px; }

.slide-content .text-slide {
	position: absolute; 
	top: 50%; 
	margin: -111px 0 0 -470px;
	width: 935px;
	border-left: 5px solid #1891c6;
	left: 50%; }

.text-slide p {
	font-size: 30px; 
	color: #fff; 
	line-height: 52px; 
	margin-top: 3px; 
	padding: 0 11px;
	white-space: nowrap;
	background: url(images/bg-sky.png); 
	float: left; 
	clear: left; }

.text-slide p:first-child {margin: 0; }

.banner-text {position: absolute; bottom: 36px; left: 35px; font-size: 28px; color: #fff; line-height: 34px; }

.hot-news {position: fixed; bottom: 32px; z-index: 999; background: url(images/bg-hot-news.png) center top no-repeat #c1c1bf; height: 80px; width: 100%; max-width: 1600px; margin: 0 auto 0; z-index: 1000; }
.hot-news div {width: 940px; margin: auto; }
.hot-news div * {float: left; line-height: 80px; color: #009035; font-weight: bold; font-size: 18px; }
.hot-news div h2 {border-right: 1px solid #fff; padding: 0 20px; margin: 0 20px 0 0; font-size: 18px; }
.hot-news #newsContent { display:inline; line-height:0px; font-size:18px; }
.hot-news div p {width: 750px;}
.hot-news #newsContent a {display: inline; text-decoration: none; float: none; }

.text-intro {width: 868px; margin: 0 auto; background: #fff; padding: 39px 33px 14px 37px; border: solid #b7b7b7; border-width: 0 1px 1px; }
.text-intro p {margin: 0 0 24px; line-height: 24px; }
/*.chart {background: url(images/bg-white.png); height: 100px; position: relative; width: 100%; max-width: 1600px; margin: -100px auto 0; z-index: 1000; }
.chart ul {
	border-left: 1px 
	solid #acb1b4; 
	overflow: hidden;
	width: 940px; 
	margin: auto; }

.chart li {
	width: 234px; 
	border-right: 1px solid #acb1b4; 
	float: left;
	height: 100px; }

.chart p {line-height: 1; margin: 26px 0 0 20px; }
.chart p span:first-child {
	font-size: 30px; 
	color: #000; 
	font-weight: bold;
	float: left; 
	margin: 0 0 5px;
	background: url(images/chart.png) right 4px no-repeat; 
	padding: 0 45px 0 0; 
	display: block; }

.chart span + span {
	display: block; 
	width: 100%;
	float: left;
	font-weight: bold;
	font-size: 14px; 
	color: #000; }*/

.wrp-content {width: 940px; margin: auto; }

#section1 {background: url(images/bg-section1.jpg) top center no-repeat; padding-bottom: 70px; }
#section2 {background: url(images/bg-section2.jpg) top center no-repeat; padding-bottom: 182px; max-height: 857px; }
#section3 {background: url(images/bg-section3.jpg) top center no-repeat; max-height: 857px; }
#section4 {background: url(images/bg-section4.jpg) top center no-repeat; max-height: 990px; }

.wrp-section {padding: 82px 0; }

.secondary-menu {margin: 0 0 38px; overflow: hidden; }
.secondary-menu li {float: left; margin: 0 0 0 7px; }
.secondary-menu a {
	display: block; 
	background: url(images/bg-blue.png); 
	white-space: nowrap;
	height: 52px; 
	line-height: 52px; 
	padding: 0 15px 0 10px;
	font-weight: bold;
	font-size: 30px; 
	text-decoration: none;
	color: #fff; }

.secondary-menu li.active {border-left: 5px solid #1891c6; }
.secondary-menu li.active a {padding-left: 5px; }
.secondary-menu li:first-child {margin: 0; }

/*section about us */
.main-content {
	clear: both; 
	background: #fff; 
	position: relative;
	border: 1px solid #b7b7b7; 
	padding: 36px 37px; }

.main-content.bg1 {background: url(images/bg-about.jpg) top center #fff no-repeat;}

.main-content .pointer {
	background: url(images/pointer.png); 
	width: 26px;
	display: block;
	position: absolute;
	top: -14px;
	left: 48px;
	height: 15px; 
	text-indent: -999em; 
	overflow: hidden; }

.blue {color: #035aab; }
.green {color: #009035; }
.red {color: #fe303a; }
.black {color: #000; }

.bg1 h1 {margin: 0 0 53px; line-height: 42px; }
article h1 {margin: 0 0 28px; }
article p {margin: 0 0 24px; line-height: 24px; word-wrap: break-word; }
.gps-txt{margin-top: 24px;}

.banner-footer {margin: 71px 0 0; }
.banner-footer p {margin: 0; }
.banner-footer img {vertical-align: top; }

/*section vistion mission */
.list-mission li {background: url(images/correct.png) left 4px no-repeat; padding-left: 24px; line-height: 24px; }
.vision {padding: 42px 37px 1px; }
.vision .pointer {left: 218px; }
.vision .banner-footer {margin: 42px 0 0; }
.vision p {margin: 0 0 35px; }

.record-buss {padding: 42px 37px 36px; }
.record-buss .pointer {left: 468px; }

/* section load pdf */
.products {padding: 42px 37px 54px; height: 663px; }
.products h1 {font-size: 24px; }
.pdf-content {overflow: hidden; margin: 0 0 34px; }
.pdf-content li {float: left; margin: 0 30px 0 0; width: 181px; }
.pdf-content p {margin: 0; }
.pdf-content h2 {float: left; margin: 9px 0 0; font-size: 14px; }
.pdf-content a:hover h2 {text-decoration: underline; }
.icn-pdf {
	background: url(images/pdf.png);
	width: 15px;
	display: block;
	height: 17px;
	text-indent: -999em;
	overflow: hidden; }

.pdf-content .icn-pdf {margin: 6px 0 0;	float: right; }

.products>p {overflow: hidden; line-height: 42px; margin: 20px 0 0; }
.products>p>span {float: left; color: #009035; font-weight: bold; }
.button-link {
	display: block; 
	text-align: center; 
	background: url(images/link-btn.png); 
	height: 42px; 
	margin: 0 0 0 7px;
	width: 293px; 
	position: relative;
	z-index: 3;
	color: #000;
	float: left;
	line-height: 41px; }

.products h1 {font-size: 30px; }
.products ul {overflow: hidden; }
.products ul li {width: 50%; float: left; font-size: 18px; line-height: 74px; margin: 0 0 6px; height: 74px; overflow: hidden; }
.products ul li img {vertical-align: top; margin: 0 23px 0 0; }

.wrp-boath {
	margin-top: -118px;
	height: 251px;
	max-width: 100%;
	min-width: 940px;
	overflow: hidden; }

.wrp-boath >div {
	position: relative;
	margin: auto;
	height: 251px; }

.icn-both {
	width: 476px; 
	height: 251px; 
	background: url(images/ship.png); 
	text-indent: -999em; 
	overflow: hidden; 
	position: absolute; 
	right: 0; }
	
.tech-section {overflow: hidden; line-height: 148px; margin: 0 0 44px; }
.tech-section .thumb {float: left; margin: 0 23px 0 0; }
.tech-section .thumb + p {margin: 0; }

.wrp-boat {position: relative; }

.wrp-map {padding-top: 42px; height: 687px; }
.wrp-map .pointer {left: 208px; }
.map-portal {position: relative; z-index: 3; }
.wrp-map>p {margin: 0 0 7px; }

.wrp-map .border {width: 208px; height: 94px; position: absolute; }
.wrp-map div[class*='point'] {width: 63px; height: 63px; position: absolute; }
.wrp-map div[class*='point'] p {position: absolute; white-space: nowrap; }

.th-map-thai {position: relative; height: 626px; background: url(images/th-thai-map.png) center top no-repeat; }
.th-map-thai .point-green {top: 212px; left: 371px; }
.th-map-thai .point-green.bottom {top: 241px; left: 417px; }
.th-map-thai .point-red {top: 386px; left: 309px; }

.en-map-thai {position: relative; height: 626px; background: url(images/en-thai-map.png) center top no-repeat; }
.en-map-thai .point-green {top: 212px; left: 371px; }
.en-map-thai .point-green.bottom {top: 241px; left: 417px; }
.en-map-thai .point-red {top: 386px; left: 309px; }

.th-map-world {position: relative; height: 626px; background: url(images/th-worldmap.png) center 13px no-repeat; }
.th-map-world .point-black {top: 137px; left: 359px; }
.th-map-world .point-black.right {top: 183px; left: 435px; }
.th-map-world .point-black.right+.point-black.right {top: 267px; left: 606px; }
.th-map-world .point-black.bottom {top: 216px; left: 217px; }
.th-map-world p {font-size: 18px; color: #009035; font-weight: bold; text-align: center; padding-top: 510px; }
.th-map-world p a {color: #009035; }
.th-map-world p img {margin: 0 16px 0 0; vertical-align: middle; }

.en-map-world {position: relative; height: 626px; background: url(images/en-worldmap.png) center 13px no-repeat; }
.en-map-world .point-black {top: 137px; left: 359px; }
.en-map-world .point-black.right {top: 183px; left: 435px; }
.en-map-world .point-black.right+.point-black.right {top: 267px; left: 606px; }
.en-map-world .point-black.bottom {top: 216px; left: 217px; }
.en-map-world p {font-size: 18px; color: #009035; font-weight: bold; text-align: center; padding-top: 510px; }
.en-map-world p a {color: #009035; }
.en-map-world p img {margin: 0 5px 0 0; vertical-align: middle; }


.wrp-map div.point-green {background: url(images/locator-green.png); width: 45px; height: 45px; }
.point-green .border {background: url(images/border-green-top.png); top: -70px; left: -184px; }
.point-green p {top: -96px; left: -203px; }

.point-green.bottom {background: url(images/locator-green.png); }
.point-green.bottom .border {background: url(images/border-green-bottom.png); top: 21px; left: 21px; }
.point-green.bottom p {top: 87px; left: 139px; }

.point-red {background: url(images/locator-red.png); }
.point-red .border {background: url(images/border-red-top.png); top: -61px; left: -175px; }
.point-red p {top: -87px; left: -194px; }

.point-black {background: url(images/locator-black.png); }
.point-black .border {background: url(images/border-black-left.png); top: -61px; left: -175px; }
.point-black p {top: -87px; left: -194px; }

.point-black.right {background: url(images/locator-black.png); }
.point-black.right .border {background: url(images/border-black-right.png); top: -61px; left: 30px; }
.point-black.right p {top: -56px; left: 144px; }

.point-black.bottom {background: url(images/locator-black.png); }
.point-black.bottom .border {background: url(images/border-black-bottom.png); top: 30px; left: -175px; }
.point-black.bottom p {top: 128px; left: -196px; }

*[class*="point-"]>* {opacity: 0; filter: alpha(opacity=0); transition: opacity 0.5s; }
*[class*="point-"]:hover>* {opacity: 1; filter: alpha(opacity=100); }

.data-port {
	background: #f2f2f2; 
	border: 1px solid #aeaeae; 
	padding: 12px 34px 12px 20px;  
	position: absolute; 
	top: 50px; 
	right: 28px; }

.data-port li {background: url(images/locator-green-s.png) left no-repeat; line-height: 25px; height: 25px; padding: 0 0 0 36px; }
.data-port li+li {background: url(images/locator-red-s.png) left no-repeat; margin-top: 13px; }

.tab-map {overflow: hidden; width: 400px; margin: 32px 0 0; }
.tab-map li {float: left; opacity: 0.4; filter: alpha(opacity=40); }
.tab-map li a {
	background: url(images/btn-peir-act.png); 
	width: 193px; 
	display: block;
	height: 42px; 
	color: #000; 
	line-height: 42px; 
	text-align: center; }

.tab-map li+li {float: right; }
.tab-map .active {opacity: 1; filter: alpha(opacity=100); }

.tech-sup {height: 693px; padding-top: 42px; }
.tech-sup .pointer {left: 428px; }

/* section gallery */
.thumb-gallery {overflow: hidden; }
.thumb-gallery a {float: left; margin: 0 15px; }
.thumb-gallery p {margin: 0 0 9px; }
.thumb-gallery h2 {font-size: 14px; font-weight: normal; }

.wrp-gallery {position: relative; padding: 0 34px 82px; margin: 0 -25px 0; }
.wrp-gallery a[class*='icn-'] {
	background: url(images/prev.png);
	display: block;
	position: absolute;
	width: 47px; 
	top: 47px;
	left: -2px;
	height: 47px;
	text-indent: -999em;
	overflow: hidden; }

.wrp-gallery a.icn-next {background: url(images/next.png); left: auto; right: -4px; }

.activity {padding: 49px 37px 17px; height: 699px; padding-top: 42px; background: url(images/marine-link.jpg) bottom no-repeat #fff; }
.activity h1 {font-size: 30px; }

/*.link {padding-top: 42px; }
.link .pointer {left: 208px; }
.link-external {margin-bottom: 26px; }
.link-external li {color: #000; background: #d8f4ff; height: 26px; line-height: 26px; }
.link-external li+li {background: #fff; }
.link-external li+li+li {background: #d8f4ff; }
.link-external li+li+li+li {background: #fff; }

.external-data {border: solid #e1e1e1; border-width: 0 0 1px; overflow: hidden; }
.external-data section {
	border: solid #e1e1e1;
	border-width: 0 1px;
	width: 263px;
	float: left;
	padding: 0 30px 17px;
	margin-left: -1px; }

.external-data section:first-child {border-left: 0; margin: 0; padding-left: 0; }
.external-data section:first-child+section {width: 214px; }
.external-data section:first-child+section+section {border-right: 0; padding-right: 0; }
.external-data h2 {margin: 8px 0 6px; }

.link-external+div {border-width: 1px 0 1px; }*/
.marine-link {background: #fff; height: 693px; padding-top: 42px; }
.grid4 {margin: 0 -21px 0 0; overflow: hidden; }
.grid4 li {float: left; width: 200px; margin: 0 21px 0 0; }

.link-directory {margin-bottom: 38px; padding-bottom: 38px; }
.link-directory img {margin: 0 0 4px; }
.link-directory p {font-size: 14px; line-height: 18px; }
.link-directory a {display: block; color: #000; font-weight: bold; }

.news-update {padding: 0 0 78px; }
.news-update img {margin: 0 0 4px; }
.marine-link .pointer {left: 200px; }

/* section contact */
.contact-us h1 {position: relative; margin: 0 0 19px; }
.contact-us li {margin: 0 0 6px; }
.contact-us li a:hover {color: #009035; }
/*.contact-us section {margin: 0 0 38px; }*/
.contact-us section {margin: 0 0 10px; }
.contact-us .data-contact {float: left; width: 360px; margin-top: 9px; }
.contact-us .form-contact {float: right; width: 389px; margin: -117px 9px 0 0; }
.contact-us a {color: #009035; }

.submit-form {
	width: 163px; 
	font-size: 18px;
	color: #fff;
	text-align: left;
	height: 32px;
	line-height: 32px;
	padding-left: 11px;
	background: url(images/send.png) left center no-repeat; 
	margin: 21px 0 0; 
	cursor: pointer; }

.contact-us .icn-pdf {float: left; margin: 2px 11px 0 0; }

.form-contact h1 {
	position: relative; 
	color: #009035; 
	line-height: 110px; 
	height: 110px; 
	margin: 0 0 23px;
	font-size: 18px; }

.form-contact p {margin: 0 0 16px; }

.icn-24hr {
	width: 110px;
	position: absolute;
	top: -2px;
	right: 17px;
	display: block;
	height: 110px;
	background: url(images/24h.png);
	text-indent: -999em;
	overflow: hidden;
}

/* main footer */
#main-footer {background: url(images/footer.jpg) top center; overflow: hidden; padding: 5px 0; max-width: 1600px; width: 100%; z-index: 999; margin: 0 auto; position: fixed; bottom: 0; }
#main-footer * {color: #fff; font-size: 13px; }
#main-footer p {line-height: 22px; }
#main-footer img {vertical-align: middle; }
#main-footer p a:first-child {margin-left: 16px; }
#main-footer nav li {display: inline; }
#main-footer>div>div {float: left; }
#main-footer>div>div+div {float: right; }

/* fix slide */
div .pix_diapo {
	width: 100%;
	height: 608px;
	margin: 0;
	background: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none; }
	
div .caption {background: none; padding: 0; bottom: auto; }
div #pix_canvas {display: none; }

.grid4 .iframeBorder iframe {
	width:200px;
	height:200px;
}
.first-map, .second-map{margin:0px 10px 15px;}
.first-map{float: left; margin-left: 0px;}
.second-map{float: right;}
.gg-map{clear: both; display: block; position: relative;}
.contact-us section{display: inline-block;}
.first-map h3, .second-map h3{margin-bottom: 10px; text-decoration: underline;}