@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;
}

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


@media (max-width:768px) {

    .l-section,
    #boxContact,
    #boxHighlight,
    #factsheet,
    #plan,
    #box360,
    #boxLocation,
    #boxGallery,
    #boxAds,
    #boxReady,
    #boxProgress,
    #made-for-life{
        padding: 40px 0px !important;
    }
    #noMenu {
        padding: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;
    }


/* Custom css for continue read more */
.cont-read-but {
    position: absolute;
    top: 0px;
    width: 100%;
    background: linear-gradient(#ffffff54 6%, #ffffff 40%);
    color: #ffffff;
    text-align: center;
    display: flex;
    justify-content: center;
}

    .cont-read-but span {
        align-self: center;
        padding: 10px 15px;
        border: 1px solid;
        cursor: pointer;
    }

/* END Custom css for continue read more */

/* Fix row whitespce */
html,
body {
    overflow-x: hidden;
}

/* EDN Fix row whitespce */