﻿@charset "UTF-8";
/* CSS Document
อธิบาย ssr-project.css ใช้กำหนดการแสดงผลส่วนที่ต้องการกำหนด standard ให้กับเว็บทุกโครงการใช้เหมือนกัน */
@import url("ssr-font.css");
body {
	background-color: #FFFFFF;
	color: #000000;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	/* margin-bottom: 0rem; */
}

a:hover{
	text-decoration: none;
}

[ssr-fullwidth="true"] {
	width: 100vw!important;
	position: relative!important;
	left: 50%!important;
	right: 50%!important;
	margin-left: -50vw!important;
	margin-right: -50vw!important;
}

.ssr-section-header, .ssr-nav-tab{
	margin-bottom:4rem;
}

.head-text{
  font-size: 3.6rem!important;
  font-family: 'GraphikTH-SemiBold'!important;
  margin-bottom: 2rem;
  margin: .67em 0;
  line-height: 4.6rem!important;
}
.sub-head-text{
  font-size: 2.5rem!important;
  font-family: 'GraphikTH-Regular'!important;
  color:#003168;
  margin: 2rem 0;
  line-height: 3.5rem!important;
}
.des-text{
  font-family: 'GraphikTH-Regular'!important;
}

svg.icon {
	display: inline-block;
}
.link-ul {
	text-decoration: underline;
}
.container {
	max-width: 1316px;
	position: relative;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: content-box;
}

@media (max-width: 1360px) {
	.container {
		box-sizing: border-box;
	}
	.container-fluid {
	}
}

@media only screen and (min-width: 1400px) {
}
/********************************
Standard font size
*********************************/
.x-large {
	font-size: 7.2rem;
}
.large {
	font-size: 4.8rem;
}
.medium {
	font-size: 1.6rem;
}
.small {
	font-size: 1.2rem;
}
.x-small {
	font-size: 1rem;
}
/********************************
Standard font color
*********************************/
.color-white {
	color: #FFFFFF!important;
}
.color-black {
	color: #000000!important;
}
.color-ligray {
	color: #E9E9E9!important;
}
.color-gray {
	color: #9E9E9E!important;
}
.color-darkgray {
	color: #737678!important;
}
.color-error {
	color: #ea5236!important;
}
.color-success {
	color: #00C851!important;
}
.color-warn {
	color: #ffbb33!important;
}
.link-white {
	color: #FFFFFF!important;
}
.link-white:visited {
	color: #FFFFFF!important;
}
.link-white:hover {
	color: #FFFFFF!important;
}
.link-white:active {
	color: #FFFFFF!important;
}
.link-black {
	color: #000000!important;
}
.link-black:visited {
	color: #000000!important;
}
.link-black:hover {
	color: #000000!important;
}
.link-black:active {
	color: #000000!important;
}
.link-ligray {
	color: #E9E9E9!important;
}
.link-ligray:visited {
	color: #E9E9E9!important;
}
.link-ligray:hover {
	color: #E9E9E9!important;
}
.link-ligray:active {
	color: #E9E9E9!important;
}
.link-gray {
	color: #9E9E9E!important;
}
.link-gray:visited {
	color: #9E9E9E!important;
}
.link-gray:hover {
	color: #9E9E9E!important;
}
.link-gray:active {
	color: #9E9E9E!important;
}
.link-darkgray {
	color: #737678!important;
}
.link-darkgray:visited {
	color: #737678!important;
}
.link-darkgray:hover {
	color: #737678!important;
}
.link-darkgray:active {
	color: #737678!important;
}
/********************************
Standard backgroud color
*********************************/
.bg-white {
	background-color: rgb(255, 255, 255)!important;
}
.bg-white-75 {
	background-color: rgba(255, 255, 255, .75)!important;
}
.bg-white-45 {
	background-color: rgba(255, 255, 255, .45)!important;
}
.bg-white-15 {
	background-color: rgba(255, 255, 255, .15)!important;
}
.bg-black {
	background-color: rgb(0, 0, 0)!important;
}
.bg-black-75 {
	background-color: rgba(0, 0, 0, .75)!important;
}
.bg-black-45 {
	background-color: rgba(0, 0, 0, .45)!important;
}
.bg-black-15 {
	background-color: rgba(0, 0, 0, .15)!important;
}
.bg-ligray {
	background-color: rgb(233, 233, 233)!important;
}
.bg-gray {
	background-color: rgb(158, 158, 158)!important;
}
.bg-darkgray {
	background-color: rgb(115, 118, 120)!important;
}
.bg-liblue {
	background-color: rgb(29, 77, 157)!important;
}
.bg-darkblue {
	background-color: rgb(0, 51, 51)!important;
}
.bg-green {
	background-color: rgb(131, 186, 13)!important;
}
.bg-transparent {
	background-color: transparent!important;
}

/* backgroud small screen only */
@media (max-width: 991px) {
.xs-bg-white {
	background-color: rgb(255, 255, 255)!important;
}
.xs-bg-white-75 {
	background-color: rgba(225, 225, 225, .75)!important;
}
.xs-bg-white-45 {
	background-color: rgba(255, 255, 255, .45)!important;
}
.xs-bg-white-15 {
	background-color: rgba(255, 255, 255, .15)!important;
}
.xs-bg-black {
	background-color: rgb(0, 0, 0)!important;
}
.xs-bg-black-75 {
	background-color: rgba(0, 0, 0, .75)!important;
}
.xs-bg-black-45 {
	background-color: rgba(0, 0, 0, .45)!important;
}
.xs-bg-black-15 {
	background-color: rgba(0, 0, 0, .15)!important;
}
.xs-bg-ligray {
	background-color: rgb(233, 233, 233)!important;
}
.xs-bg-gray {
	background-color: rgb(158, 158, 158)!important;
}
.xs-bg-darkgray {
	background-color: rgb(115, 118, 120)!important;
}
.xs-bg-liblue {
	background-color: rgb(29, 77, 157)!important;
}
.xs-bg-darkblue {
	background-color: rgb(0, 51, 51)!important;
}
.xs-bg-green {
	background-color: rgb(131, 186, 13)!important;
}
.xs-bg-transparent {
	background-color: transparent!important;
}
}

/* backgroud large screen only */
@media (min-width: 992px) {
.lg-bg-white {
	background-color: rgb(255, 255, 255)!important;
}
.lg-bg-white-75 {
	background-color: rgba(225, 225, 225, .75)!important;
}
.lg-bg-white-45 {
	background-color: rgba(255, 255, 255, .45)!important;
}
.lg-bg-white-15 {
	background-color: rgba(255, 255, 255, .15)!important;
}
.lg-bg-black {
	background-color: rgb(0, 0, 0)!important;
}
.lg-bg-black-75 {
	background-color: rgba(0, 0, 0, .75)!important;
}
.lg-bg-black-45 {
	background-color: rgba(0, 0, 0, .45)!important;
}
.lg-bg-black-15 {
	background-color: rgba(0, 0, 0, .15)!important;
}
.lg-bg-ligray {
	background-color: rgb(233, 233, 233)!important;
}
.lg-bg-gray {
	background-color: rgb(158, 158, 158)!important;
}
.lg-bg-darkgray {
	background-color: rgb(115, 118, 120)!important;
}
.lg-bg-liblue {
	background-color: rgb(29, 77, 157)!important;
}
.lg-bg-darkblue {
	background-color: rgb(0, 51, 51)!important;
}
.lg-bg-green {
	background-color: rgb(131, 186, 13)!important;
}
.lg-bg-transparent {
	background-color: transparent!important;
}
}
/********************************
Standard border color
*********************************/
.border-white {
	border-color: #FFFFFF!important;
}
.border-black {
	border-color: #000000!important;
}
.border-ligray {
	border-color: #E9E9E9!important;
}
.border-gray {
	border-color: #9E9E9E!important;
}
.border-darkgray {
	border-color: #737678!important;
}
.border-none {
	border-color: transparent!important;
}
.border-gray-30 {
	border-color: rgba(255,255,255,.3)!important;
}
.border-green {
	border-color: rgb(131, 186, 13)!important;
}

@media (max-width: 991px) {
.xs-border-gray-30 {
	border-color: rgba(255,255,255,.3)!important;
}
.xs-border-ligray {
	border-color: #E9E9E9!important;
}
}
/********************************
Standard svg color
*********************************/
.fill-black {
	fill: #000000!important;
}
.fill-white {
	fill: #ffffff!important;
}

@media (max-width: 991px) {
.xs-fill-black {
	fill: #000000!important;
}
.xs-fill-white {
	fill: #ffffff!important;
}
}
.stroke-black {
	stroke: #000000!important;
}
.stroke-white {
	stroke: #ffffff!important;
}
/********************************
Standard Button
*********************************/
/*.btn {
	display: inline-block;
	margin: 10px;
	text-align: center;
	text-decoration: none;
	font-size: 1.5em;
	padding: 1.4em 1.6em;
}
.btn-ico {
}
.btn-lg {
	font-size: 2em;
	padding: 14px 16px
}
.btn-sm {
	font-size: 1.1em;
	padding: 14px 16px
}
.btn-block {
	width: 100%;
	display: block;
}*/
/********************************
Utilities font color
*********************************/
.ssr-msg-error {
	color: rgb(234, 82, 54)!important;
}
.ssr-msg-success {
	color: rgb(0, 200, 81)!important;
}
.ssr-msg-warn {
	color: rgb(255, 187, 51)!important;
}
.mt-5 {margin-top: 0.5rem !important;}
.mt-10 {margin-top: 1rem !important;}
.mt-15 {margin-top: 1.5rem !important;}
.mt-20 {margin-top: 2rem !important;}
.mt-25 {margin-top: 2.5rem !important;}
.mt-30 {margin-top: 3rem !important;}
.mt-35 {margin-top: 3.5rem !important;}
.mt-40 {margin-top: 4rem !important;}
.mt-45 {margin-top: 4.5rem !important;}
.mt-50 {margin-top: 5rem !important;}
.mt-55 {margin-top: 5.5rem !important;}
.mt-60 {margin-top: 6rem !important;}
.mt-65 {margin-top: 6.5rem !important;}
.mt-70 {margin-top: 7rem !important;}
.mt-75 {margin-top: 7.5rem !important;}
.mt-80 {margin-top: 8rem !important;}
.mt-85 {margin-top: 8.5rem !important;}
.mt-90 {margin-top: 9rem !important;}
.mt-95 {margin-top: 9.5rem !important;}
.mt-100 {margin-top: 10rem !important;}

.mb-5 {margin-bottom: 0.5rem !important;}
.mb-10 {margin-bottom: 1rem !important;}
.mb-15 {margin-bottom: 1.5rem !important;}
.mb-20 {margin-bottom: 2rem !important;}
.mb-25 {margin-bottom: 2.5rem !important;}
.mb-30 {margin-bottom: 3rem !important;}
.mb-35 {margin-bottom: 3.5rem !important;}
.mb-40 {margin-bottom: 4rem !important;}
.mb-45 {margin-bottom: 4.5rem !important;}
.mb-50 {margin-bottom: 5rem !important;}
.mb-55 {margin-bottom: 5.5rem !important;}
.mb-60 {margin-bottom: 6rem !important;}
.mb-65 {margin-bottom: 6.5rem !important;}
.mb-70 {margin-bottom: 7rem !important;}
.mb-75 {margin-bottom: 7.5rem !important;}
.mb-80 {margin-bottom: 8rem !important;}
.mb-85 {margin-bottom: 8.5rem !important;}
.mb-90 {margin-bottom: 9rem !important;}
.mb-95 {margin-bottom: 9.5rem !important;}
.mb-100 {margin-bottom: 10rem !important;}


@media (min-width: 992px) {
.lg-mt-5 {margin-top: 0.5rem !important;}
.lg-mt-10 {margin-top: 1rem !important;}
.lg-mt-15 {margin-top: 1.5rem !important;}
.lg-mt-20 {margin-top: 2rem !important;}
.lg-mt-25 {margin-top: 2.5rem !important;}
.lg-mt-30 {margin-top: 3rem !important;}
.lg-mt-35 {margin-top: 3.5rem !important;}
.lg-mt-40 {margin-top: 4rem !important;}
.lg-mt-45 {margin-top: 4.5rem !important;}
.lg-mt-50 {margin-top: 5rem !important;}
.lg-mt-55 {margin-top: 5.5rem !important;}
.lg-mt-60 {margin-top: 6rem !important;}
.lg-mt-65 {margin-top: 6.5rem !important;}
.lg-mt-70 {margin-top: 7rem !important;}
.lg-mt-75 {margin-top: 7.5rem !important;}
.lg-mt-80 {margin-top: 8rem !important;}
.lg-mt-85 {margin-top: 8.5rem !important;}
.lg-mt-90 {margin-top: 9rem !important;}
.lg-mt-95 {margin-top: 9.5rem !important;}
.lg-mt-100 {margin-top: 10rem !important;}

.lg-mb-5 {margin-bottom: 0.5rem !important;}
.lg-mb-10 {margin-bottom: 1rem !important;}
.lg-mb-15 {margin-bottom: 1.5rem !important;}
.lg-mb-20 {margin-bottom: 2rem !important;}
.lg-mb-25 {margin-bottom: 2.5rem !important;}
.lg-mb-30 {margin-bottom: 3rem !important;}
.lg-mb-35 {margin-bottom: 3.5rem !important;}
.lg-mb-40 {margin-bottom: 4rem !important;}
.lg-mb-45 {margin-bottom: 4.5rem !important;}
.lg-mb-50 {margin-bottom: 5rem !important;}
.lg-mb-55 {margin-bottom: 5.5rem !important;}
.lg-mb-60 {margin-bottom: 6rem !important;}
.lg-mb-65 {margin-bottom: 6.5rem !important;}
.lg-mb-70 {margin-bottom: 7rem !important;}
.lg-mb-75 {margin-bottom: 7.5rem !important;}
.lg-mb-80 {margin-bottom: 8rem !important;}
.lg-mb-85 {margin-bottom: 8.5rem !important;}
.lg-mb-90 {margin-bottom: 9rem !important;}
.lg-mb-95 {margin-bottom: 9.5rem !important;}
.lg-mb-100 {margin-bottom: 10rem !important;}
}

@media (max-width: 991px) {
.xs-mt-5 {margin-top: 0.5rem !important;}
.xs-mt-10 {margin-top: 1rem !important;}
.xs-mt-15 {margin-top: 1.5rem !important;}
.xs-mt-20 {margin-top: 2rem !important;}
.xs-mt-25 {margin-top: 2.5rem !important;}
.xs-mt-30 {margin-top: 3rem !important;}
.xs-mt-35 {margin-top: 3.5rem !important;}
.xs-mt-40 {margin-top: 4rem !important;}
.xs-mt-45 {margin-top: 4.5rem !important;}
.xs-mt-50 {margin-top: 5rem !important;}
.xs-mt-55 {margin-top: 5.5rem !important;}
.xs-mt-60 {margin-top: 6rem !important;}
.xs-mt-65 {margin-top: 6.5rem !important;}
.xs-mt-70 {margin-top: 7rem !important;}
.xs-mt-75 {margin-top: 7.5rem !important;}
.xs-mt-80 {margin-top: 8rem !important;}
.xs-mt-85 {margin-top: 8.5rem !important;}
.xs-mt-90 {margin-top: 9rem !important;}
.xs-mt-95 {margin-top: 9.5rem !important;}
.xs-mt-100 {margin-top: 10rem !important;}

.xs-mb-5 {margin-bottom: 0.5rem !important;}
.xs-mb-10 {margin-bottom: 1rem !important;}
.xs-mb-15 {margin-bottom: 1.5rem !important;}
.xs-mb-20 {margin-bottom: 2rem !important;}
.xs-mb-25 {margin-bottom: 2.5rem !important;}
.xs-mb-30 {margin-bottom: 3rem !important;}
.xs-mb-35 {margin-bottom: 3.5rem !important;}
.xs-mb-40 {margin-bottom: 4rem !important;}
.xs-mb-45 {margin-bottom: 4.5rem !important;}
.xs-mb-50 {margin-bottom: 5rem !important;}
.xs-mb-55 {margin-bottom: 5.5rem !important;}
.xs-mb-60 {margin-bottom: 6rem !important;}
.xs-mb-65 {margin-bottom: 6.5rem !important;}
.xs-mb-70 {margin-bottom: 7rem !important;}
.xs-mb-75 {margin-bottom: 7.5rem !important;}
.xs-mb-80 {margin-bottom: 8rem !important;}
.xs-mb-85 {margin-bottom: 8.5rem !important;}
.xs-mb-90 {margin-bottom: 9rem !important;}
.xs-mb-95 {margin-bottom: 9.5rem !important;}
.xs-mb-100 {margin-bottom: 10rem !important;}
}

.ssr-form-banner#boxContact{
	padding:unset!important;
}

.l-section, #boxContact, #boxHighlight, #factsheet, #plan, #box360, #boxLocation, #boxGallery, #boxAds, #boxReady, #boxProgress, #noMenu{
	padding:80px 0px!important;
}


@media (max-width:768px){
	.l-section, #boxContact, #boxHighlight, #factsheet, #plan, #box360, #boxLocation, #boxGallery, #boxAds, #boxReady, #boxProgress, #noMenu{
		padding:40px 0px!important;
	}
}

/* safari row column fix */

/* .row:before, .row:after {
	display: none !important;
	display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
}

.rowfafari{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } */

.flex-row{
     display: flex;
    display: -webkit-flex;
    flex-wrap:wrap;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: center;
            justify-content: center;
}
.flex-row:before, .flex-row:after{
   display: none;
}
