html {
	scroll-behavior: smooth;
}
body {
	font-family: 'Kanit', sans-serif !important;
	font-weight: 100 !important;
	font-size: 16px !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
:root {
	--primary: #203669 !important;
	--hov-primary: #333 !important;
	--border_radius: 10px;
	--warning: #E35225 !important;
	--grey-50: #EBEBEB !important;
	--grey-100: #C1C2C2 !important;
	--grey-200: #A3A4A4 !important;
	--grey-300: #797A7A !important;
	--grey-400: #5F6161 !important;
	--grey-500: #373939 !important;
	--grey-600: #323434 !important;
	--grey-700: #272828 !important;
	--grey-800: #1E1F1F !important;
}
.text-muted {
  color: var(--grey-200) !important;
}
.text-warning {
  color: var(--warning) !important;
}
.btn-warning {
  background-color: var(--warning) !important;
  color: #fff;
}
.container {
  max-width: 1600px;
}
a {
	text-decoration:none !important;
}
body .card {
	border-radius: var(--border_radius);
}
body .card-img ,
body .card-img-top {
	border-top-left-radius: var(--border_radius);
	border-top-right-radius: var(--border_radius);
}

img {
	max-width: 100%;
	object-fit: cover;
}
.text-line1 ,
.text-line2 ,
.text-line3 ,
.text-line4 ,
.text-line5 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: pre-wrap;
}
.text-line1 {
  -webkit-line-clamp: 1;
}
.text-line2 {
  -webkit-line-clamp: 2;
}
.text-line3 {
  -webkit-line-clamp: 3;
}
.text-line4 {
  -webkit-line-clamp: 4;
}
.text-line5 {
  -webkit-line-clamp: 5;
}

.box-breadcrumb {
  position: sticky;
  top: 86px;
  left: 0px;
  right: 0px;
  background-color: #fff;
  z-index: 1;
  font-size: 12px;
  box-shadow: 0px 0px 4px rgb(0 0 0 / 10%);
}
  .box-breadcrumb ol.breadcrumb {
    background: transparent;
    margin: 0px;
  }
    .box-breadcrumb ol.breadcrumb li.breadcrumb-item {

    }
      .box-breadcrumb ol.breadcrumb .breadcrumb-item+.breadcrumb-item::before {
        content: "";
        background: url(../images/I-right.png) no-repeat center left;
        background-size: 4px;
        width: 12px;
      }
      .box-breadcrumb ol.breadcrumb li.breadcrumb-item span.material-icons {
        vertical-align: sub;
        font-size: 12px;
      }
      .box-breadcrumb ol.breadcrumb li.breadcrumb-item a {
        color: var(--grey-200);
      }
      .box-breadcrumb ol.breadcrumb li.breadcrumb-item.active {
        color: var(--grey-200);
      }

.owl-nav {
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  height: 0px;
  transform: translateY(-50%);
}
  .owl-nav button {
		display: flex;
		align-items: center;
		transform: translateY(-50%);
		position: absolute;
		transition: opacity .5s;
		opacity: 0.4;
		background: transparent;
		color: #fff;
		padding: 7px;
		border: 1px solid #fff;
		border-radius: 50%;
  }
    .owl-nav button.disabled {
      opacity: 0;
    }
    .owl-nav button:not(.disabled):hover {
      opacity: 1;
    }

  .owl-prev {
    float: left;
    left: 20px
  }
  .owl-next {
    float: right;
    right: 20px;
  }
    .owl-nav img {
      display: block;
      width: 40px;
      height: 40px;
      padding: 8px 3px 8px 8px;
      filter: grayscale(1);
      object-fit: contain;
      transition: .5s;
      box-sizing: border-box;
      background-color: rgba(0, 0, 0, 0.4);
      border-radius: 50%;
    }
    .owl-nav .owl-prev img {
      transform: rotate(180deg);
    }
    .owl-nav .owl-next img {
      margin-left: auto;
    }

.owl-dots {
	margin: 5px auto;
	position: absolute;
	bottom: 0px;
	left: 50%;
	transform: translate(-50%, -50%);
}
	.owl-dot {
		margin: 2px 5px;
		border-radius: 4px;
		background-color: var(--grey-100);
		transition: .5s;
		border: 0px;
		padding: 5px;
		transition: .5s;
		width: 8px;
	}
	.owl-dot.active {
		background-color: var(--grey-300);
		width: 32px;
	}

header {
  position: sticky;
  position: -o-sticky;
  position: -moz-sticky;
  position: -webkit-sticky;
  top: 0px;
  z-index: 1033;
  background-color: #ffffff;
  transition: top .3s;
  box-shadow: 0px 0px 4px rgb(0 0 0 / 50%);
}
	header img.img-logo {
		height: 70px;
	}
	header button.navbar-toggler {
    box-shadow: none;
    outline: none;
	}
  header .navbar-toggler-icon {
    background: none;
    position: relative;
    width: 24px;
  }
		header .navbar-toggler-icon:before {
      height: 3px;
      width: 24px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: var(--grey-800);
      transition: transform ease .5s;
      content: '';
      display: block;
      margin: auto;
		}
		header button[aria-expanded="true"] .navbar-toggler-icon:before {
      transition: transform .5s ease .5s;
      opacity: 1;
      transform: rotate(-40deg);
		}
		header .navbar-toggler-icon:after {
      height: 3px;
      width: 24px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: var(--grey-800);
      box-shadow: 0 8px 0 var(--grey-800), 0 -8px 0 var(--grey-800);
      transition: transform ease .5s,box-shadow .5s ease .5s;
      content: '';
      display: block;
      margin: auto;
		}
		header button[aria-expanded="true"] .navbar-toggler-icon:after {
      transition: transform .5s ease .5s,box-shadow ease .5s;
      box-shadow: 0 0 0;
      transform: rotate(40deg);
		}

div#navbarMain {
  font-size: 18px;
}
  div#navbarMain ul.navbar-nav {

  }
    div#navbarMain ul.navbar-nav li.nav-item {
      position: relative;
    }
    div#navbarMain ul.navbar-nav li.border-left {
      border-color: var(--grey-200);
      padding-left: 30px;
      margin-left: 20px;
    }
    div#navbarMain ul.navbar-nav li.nav-item::after {
      content: "";
      border-bottom: 1px solid var(--grey-300);
      width: 0px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0px;
      transition: .5s;
    }
    div#navbarMain ul.navbar-nav li.nav-item:hover::after ,
    div#navbarMain ul.navbar-nav li.nav-item.active::after {
      width: 50px;
      border-color: #203669;
    }
      div#navbarMain ul.navbar-nav a.nav-link {
        color: var(--grey-300);
        padding: 5px 22px;
        transition: .5s;
      }
      div#navbarMain ul.navbar-nav a.nav-link:hover {
        color: var(--primary);
      }
      div#navbarMain ul.navbar-nav li.nav-item.active a.nav-link {
        color: var(--primary);
      }
      div#navbarMain ul.navbar-nav a.btn {
        border-radius: 20px;
        border-color: var(--grey-800);
        color: var(--grey-700);
        padding-left: 30px;
        padding-right: 30px;
        font-weight: 100;
        transition: .5s;
      }
      div#navbarMain ul.navbar-nav a.btn:hover {
        background-color: #219aa0;
        color: #fff;
      }

section.box-banner {
  
}
  section.box-banner:not(:has(.owl-carousel)) img {
    height: 600px;
    width: 100%;
  }
  section.box-banner .owl-carousel .owl-item img {
    min-height: 200px;
  }

section.box-list {

}
section.box-list h1 {
  font-size: 36px;
  text-align: center;
}
.box-list .--tab {
  list-style: none;
  display: flex;
  flex-flow: wrap;
  padding-left: 0;
  margin: 4px 20px;
}
  .box-list .--tab li {
    margin: 10px 0px;
  }
    .box-list .--tab a {
      position: relative;
      padding: 0px 26px;
      color: var(--grey-100);
      border-left: 1px solid var(--grey-50);
      transition: .5s;
      font-size: 16px;
    }
    .box-list .--tab li:first-child a {
      border: none;
      padding-left: 0px;
    }
    .box-list .--tab li.active a ,
    .box-list .--tab li:hover a {
      color: var(--grey-600);
    }
    .box-list .--tab a::before {
      content: "";
      background: url(../images/icon-Union.svg) no-repeat center center;
      background-size: 20px auto;
      width: 40px;
      aspect-ratio: 1;
      display: inline-block;
      vertical-align: middle;
      margin-right: 12px;
      border: 1px solid var(--grey-50);
      border-radius: 50%;
      box-shadow: 0 0 0px #0019FF, 0 0 0px rgb(28 49 112 / 56%);
      transition: .5s;
    }
    .box-list .--tab li:hover a::before ,
    .box-list .--tab li.active a::before {
      filter: brightness(3);
      background-color: #091125 !important;
      box-shadow: 0 0 3px #0019FF, 0 0 11px rgb(28 49 112 / 56%);
      border-color: var(--grey-50);
    }

  section.box-list .link-map {
    width: 40px;
    aspect-ratio: 1;
    border: 1px solid var(--grey-200);
    border-radius: 50%;
    transition: .5s;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 14px 30px auto 14px;
  }
  section.box-list .link-map:hover {
    filter: brightness(3);
    background-color: #091125 !important;
    box-shadow: 0 0 3px #0019FF, 0 0 8px #203669;
    border-color: var(--grey-50);
  }
    section.box-list .link-map img {
      display: block;
    }
    
	section.box-list .card {
		border: 0px;
    transition: .5s;
    border: 1px solid transparent;
	}
	section.box-list .card:hover {
    background: #fbfbfb;
    border-color: var(--grey-50);
	}
		.box-list .card .card-body {
      padding: 10px;
		}
			section.box-list .card .card-img-top {
        overflow: hidden;
			}
        section.box-list .card .card-img-top img {
          aspect-ratio: 440/395;
          transition: cubic-bezier(0, 0.51, 0.72, 0.17) .8s .1s;
        }
        section.box-list .card:hover .card-img-top img {
          transform: scale(1.2);
        }
      @media only screen and (min-width: 1367px) {
        section.box-list .card .card-img-top img {
          aspect-ratio: 567 / 364;
        }
      }
		.box-list .card .card-footer {
			background-color: transparent;
			border: 0px;
      padding: 10px;
		}

.b--view {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 20px;
  color: var(--grey-200);
  font-size: 13px;
}
  .b--view .--location {
    border: 1px solid var(--grey-200);
    border-radius: 20px;
    padding: 0px 12px 4px 8px;
    display: inline-block;
  }
  .b--view .--location::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 2px;
    background: url(../images/icon-location.svg) no-repeat center center;
    background-size: contain;
    top: 5px;
    position: relative;
  }
  .b--view .--view::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url(../images/icon-eye.svg) no-repeat center center;
    background-size: contain;
    top: 5px;
    position: relative;
    margin-left: 4px;
  }

ul.--list-icon {
  list-style: none;
  padding-left: 33px;
}
  ul.--list-icon li {
    padding: 8px 0px;
    position: relative;
  }
    ul.--list-icon li:has(img)::before ,
    ul.--list-icon li img {
      position: absolute;
      left: -33px;
      top: 10px;
      aspect-ratio: 1;
      object-fit: contain;
      width: 12px;
    }
    ul.--list-icon li:has(img)::before {
      content: "";
      border: 1px solid var(--grey-200);
      background-color: #fff;
      border-radius: 50%;
      padding: 5px;
      box-sizing: content-box;
    }
    ul.--list-icon li img {
      margin: 6px;
    }

.b--detail {
  color: var(--grey-200);
  margin: 30px 0px;
  word-break: break-word;
}
.b--detail-r {
  color: var(--grey-200);
  box-shadow: 0 0 12px rgb(0 0 0 / 7%);
  padding: 30px 25px;
  border-radius: var(--border_radius);
  margin-top: 13px;
  position: sticky;
  top: 136px;
  word-break: break-word;
  font-style: 14px;
}
  .b--detail-r .img {
    border: 10px solid #D9D9D9;
    border-radius: var(--border_radius);
  }
  .b--detail-r .img+p {
    border-bottom: 1px dotted var(--grey-200);
  }

.box-passport {
  background-color: #AFDBD0;
  padding: 50px 0px;
}
  .box-passport .b-passport {
    border: 4px solid var(--warning);
    border-radius: 7px;
  }
    .box-passport .img-passport {
      display: block;
      margin: -30px 0px -30px auto;
    }
    .box-passport h1 {
      font-size: 57px;
      margin: 0px;
    }
    .box-passport h3 {
      font-size: 36px;
      margin: 0px;
    }
    .box-passport p {
      color: var(--grey-300);
    }

.box-iframe-map {

}
  .--iframe-map {

  }
    .box-iframe-map .--iframe-map iframe {
      width: 100%;
      height: calc(100vh - 120px);
      /* aspect-ratio: 673/670; */
      border: 0px;
    }
    @media only screen and (min-width: 1367px) {
      .box-iframe-map .--iframe-map iframe {
        aspect-ratio: 860 / 827;
      }
    }

  .box-iframe-map button.a-link {
    width: 40px;
    aspect-ratio: 1;
    border: 1px solid #5F6161;
    border-radius: 50%;
    transition: .5s;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    position: sticky;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
    display: none;
    z-index: 999;
  }

.--map {
  position: relative;
  border: 0px;
  position: sticky;
  top: 105px;
  margin-top: 30px;
}
  .--map:has(.box-popup.active) iframe {
    pointer-events: none;
  }
  .--map .box-popup {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    max-width: 100%;
    width: 500px;
    border-radius: var(--border_radius);
    overflow: hidden;
    background-color: #fff;
    z-index: 99;
    max-width: 90%;
    visibility: hidden;
    opacity: 0;
    box-shadow: 2px 2px 4px rgb(37 30 27 / 25%);
    transition: .5s;
  }
  .--map .box-popup.active {
    visibility: visible;
    opacity: 1;
  }
    .--map .box-popup .btn-close {
        position: absolute;
        right: 6px;
        top: 6px;
        font-size: 20px;
        width: 24px;
        aspect-ratio: 1;
        display: flex;
        background: #fff;
        border: 1px solid var(--grey-500);
        border-radius: 4px;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        z-index: 2;
    }
    .--map .box-popup img {
      aspect-ratio: 170/152;
      width: 170px;
      margin: 0px auto;
      display: block;
      max-width: 30%;
      transition: .5s;
    }
    .--map .box-popup:hover img {
      transform: scale(1.2);
    }
    .--map .box-popup img+div {
      background-color: #fff;
      z-index: 1;
    }

footer {
  border-top: 8px solid #333333;
  background-color: var(--grey-200);
  color: var(--grey-400);
  text-align: center;
  font-size: 13px;
}
  .footer-Copyright {
    background-color: var(--grey-800);
    color: var(--grey-300);
    text-align: center;
  }
/* ---------------------------------------------------**** Mobile and Tablet ****--------------------------------------------------- */
@media only screen and (max-width: 1024px) {
  section.box-list .link-map {
    position: absolute;
    right: 0px;
    margin-top: 4px;
  }
  .box-list .--tab a {
    padding: 0px 10px;
  }
  .box-list .--tab {
    margin: 0px;
  }
  .b--detail-r {
    max-width: 320px;
    margin: auto;
  }
}

/* ---------------------------------------------------**** Tablet ****--------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  div#navbarMain ul.navbar-nav a.btn {
    padding-left: 25px;
    padding-right: 25px;
  }
  div#navbarMain ul.navbar-nav li.border-left {
    padding-left: 20px;
    margin-left: 10px;
  }
  div#navbarMain ul.navbar-nav a.nav-link {
    padding: 5px 10px;
  }
  section.box-banner:not(:has(.owl-carousel)) img {
    height: 300px;
  }
  /* แนวตั้ง */
  @media only screen and (orientation:portrait){
    .box-passport .img-passport {
      margin-left: -30px;
    }
    .box-iframe-map:not([data-show="list"]) .--list-map ,
    .box-iframe-map[data-show="list"] .--iframe-map {
      display: none;
    }
    .box-iframe-map[data-show="list"] .--list-map {
      display: flex;
    }
    .box-iframe-map:not([data-show="list"]) .--iframe-map ,
    .box-iframe-map:not([data-show="list"]) .--iframe-map button.a-link ,
    .box-iframe-map[data-show="list"] .--list-map button.a-link {
      display: block;
    }
    .box-iframe-map .--iframe-map iframe {
      position: initial;
    }
  }
  /* แนวนอน */
  @media only screen and (orientation:landscape){

  }
}

/* ---------------------------------------------------**** Mobile ****--------------------------------------------------- */
@media only screen and (min-width: 320px) and (max-width: 767px) {
	header .navbar-collapse {
    position: fixed;
    top: 0px;
    right: 0px;
    height: calc(100vh - 70px) !important;
    background-color: #e3e3e3;
    margin-top: 70px;
    z-index: 98;
    transition: left 0.5s ease !important;
    width: 350px;
    left: -350px;
  }
  header .navbar-collapse.show {
    left: 0px;
  }
  header .navbar-collapse .navbar-nav {
    height: calc(100vh - 70px);
    overflow-y: auto;
    padding: 0px;
    width: 100%;
    order: 1;
  }
  header .navbar-collapse + .box-shadow {
    content: "";
    left: 0px;
    top: 0px;
    position: fixed;
    width: 100%;
    height: calc(100vh - 70px) !important;
    background-color: rgb(0 0 0 / 46%);
    margin-top: 70px;
    display: none;
  }
  header .navbar-collapse.show + .box-shadow {
    display: block;
  }
  header img.img-logo {
    height: 54px;
  }
  div#navbarMain ul.navbar-nav li.nav-item.active::after {
    background: #203669;
    width: 3px;
    height: 100%;
    left: 0px;
  }
  div#navbarMain ul.navbar-nav li.border-left {
    padding: 20px;
    margin-top: auto;
    margin-left: 0px;
    display: flex;
    justify-content: center;
  }
  div#navbarMain ul.navbar-nav li.nav-item.active {
    background: rgb(32 54 105 / 11%);
  }
  div#navbarMain ul.navbar-nav a.nav-link {
    color: var(--grey-300);
    padding: 20px 22px;
  }
  .box-passport .img-passport {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    max-width: 80%;
  }
  .box-iframe-map:not([data-show="list"]) .--list-map ,
  .box-iframe-map[data-show="list"] .--iframe-map {
    display: none;
  }
  .box-iframe-map[data-show="list"] .--list-map {
    display: flex;
  }
  .box-iframe-map:not([data-show="list"]) .--iframe-map ,
  .box-iframe-map:not([data-show="list"]) .--iframe-map button.a-link ,
  .box-iframe-map[data-show="list"] .--list-map button.a-link {
    display: block;
  }
  .box-iframe-map .--iframe-map iframe {
    position: initial;
  }
  section.box-banner:not(:has(.owl-carousel)) img {
    height: 183px;
  }
  .box-breadcrumb {
    top: 70px;
  }
  /* แนวตั้ง */
  @media only screen and (orientation:portrait){
    .box-passport .b-passport {
      padding-bottom: 120px;
    }
    .--map .box-popup {
      display: block;
    }
  }
  /* แนวนอน */
  @media only screen and (orientation:landscape){
    .box-passport .b-passport {
      padding-bottom: 50px;
    }
  }
}

.-box-shadow-s1 {
  box-shadow: 0px 0px 12.3px 0px #00000012;
  padding: 30px;
}
  .-box-shadow-s1 img {
    object-fit: contain;
    max-height: 100px;
    padding: 15px 40px;
    max-width: 250px;
  }

.box-passport .b-passport {
  border-radius: 8px !important;
  border: 4px solid !important;
  border-image-source: linear-gradient(180deg, #2CE2FC 0%, #5B98DF 52.88%, #75F6D2 100%) !important;
  border-image-slice: 1 !important;
}