/*========= Thai =========*/
/*========= Eng =========*/
/* ========= */
/* ==== Helvetica ==== */
@font-face { font-family: 'HelveticaThin'; src: url("../fonts/HelveticaNeueThin.eot"); src: url("../fonts/HelveticaNeueThin.eot") format("embedded-opentype"), url("../fonts/HelveticaNeueThin.woff2") format("woff2"), url("../fonts/HelveticaNeueThin.woff") format("woff"), url("../fonts/HelveticaNeueThin.ttf") format("truetype"), url("../fonts/HelveticaNeueThin.svg#HelveticaNeueThin") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'HelveticaBold'; src: url("../fonts/HelveticaBold.eot"); src: url("../fonts/HelveticaBold.eot") format("embedded-opentype"), url("../fonts/HelveticaBold.woff2") format("woff2"), url("../fonts/HelveticaBold.woff") format("woff"), url("../fonts/HelveticaBold.ttf") format("truetype"), url("../fonts/HelveticaBold.svg#HelveticaBold") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Helvetica'; src: url("../fonts/helveticanormal.eot"); src: url("../fonts/helveticanormal.eot") format("embedded-opentype"), url("../fonts/helveticanormal.woff2") format("woff2"), url("../fonts/helveticanormal.woff") format("woff"), url("../fonts/helveticanormal.ttf") format("truetype"), url("../fonts/helveticanormal.svg#helveticanormal") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'HelveticaLight'; src: url("../fonts/HelveticaNeueLight.eot"); src: url("../fonts/HelveticaNeueLight.eot") format("embedded-opentype"), url("../fonts/HelveticaNeueLight.woff2") format("woff2"), url("../fonts/HelveticaNeueLight.woff") format("woff"), url("../fonts/HelveticaNeueLight.ttf") format("truetype"), url("../fonts/HelveticaNeueLight.svg#HelveticaNeueLight") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'HelveticaLightOblique'; src: url("../fonts/HelveticaLightOblique.eot"); src: url("../fonts/HelveticaLightOblique.eot") format("embedded-opentype"), url("../fonts/HelveticaLightOblique.woff2") format("woff2"), url("../fonts/HelveticaLightOblique.woff") format("woff"), url("../fonts/HelveticaLightOblique.ttf") format("truetype"), url("../fonts/HelveticaLightOblique.svg#HelveticaLightOblique") format("svg"); font-weight: normal; font-style: normal; }
/* ==== Kanit ==== */
@font-face { font-family: 'KanitLight'; src: url("../fonts/kanit-light.eot"); src: url("../fonts/kanit-light.eot") format("embedded-opentype"), url("../fonts/kanit-light.woff") format("woff"), url("../fonts/kanit-light.ttf") format("truetype"), url("../fonts/kanit-light.svg#KanitLight") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Kanit'; src: url("../fonts/kanit-regular.eot"); src: url("../fonts/kanit-regular.eot") format("embedded-opentype"), url("../fonts/kanit-regular.woff") format("woff"), url("../fonts/kanit-regular.ttf") format("truetype"), url("../fonts/kanit-regular.svg#Kanit") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'KanitMedium'; src: url("../fonts/kanit-medium.eot"); src: url("../fonts/kanit-medium.eot") format("embedded-opentype"), url("../fonts/kanit-medium.woff") format("woff"), url("../fonts/kanit-medium.ttf") format("truetype"), url("../fonts/kanit-medium.svg#KanitMedium") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'KanitBold'; src: url("../fonts/kanit-bold.eot"); src: url("../fonts/kanit-bold.eot") format("embedded-opentype"), url("../fonts/kanit-bold.woff") format("woff"), url("../fonts/kanit-bold.ttf") format("truetype"), url("../fonts/kanit-bold.svg#KanitBold") format("svg"); font-weight: normal; font-style: normal; }
.section-banner { /*****************************************/ /* Push reveal */ /*****************************************/ }
.section-banner .slider-banner .bnn-item .bnn-item-wp { display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; flex-direction: column; position: relative; }
.section-banner .slider-banner .bnn-item .bnn-item-wp .bnn-image { background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; }
@media (max-width: 580px) { .section-banner .slider-banner .bnn-item .bnn-item-wp .bnn-image { padding: 5pc 0; } }
.section-banner .slider-banner .bnn-item .bnn-item-wp .bnn-image img { visibility: hidden; }
.section-banner .slider-banner .bnn-item .bnn-item-wp .bnn-desc { position: absolute; left: 10%; overflow: hidden; }
@media (max-width: 1779px) { .section-banner .slider-banner .bnn-item .bnn-item-wp .bnn-desc { position: absolute; left: 8%; } }
@media (max-width: 1440px) { .section-banner .slider-banner .bnn-item .bnn-item-wp .bnn-desc { position: absolute; left: 50px; } }
.section-banner .slider-banner .bnn-item .bnn-item-wp .bnn-desc > div { opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -ms-transition: all 0.3s; -webkit-transform: translateX(-300px); -moz-transform: translateX(-300px); -o-transform: translateX(-300px); transform: translateX(-300px); -ms-transform: translateX(-300px); }
.section-banner .slider-banner .bnn-item .bnn-item-wp .bnn-desc h1 { font-size: 48px; font-family: "HelveticaBold", "KanitMedium", Arial, sans-serif; color: #FFFFFF; letter-spacing: 0.69px; font-size: 59px; }
@media (max-width: 1366px) { .section-banner .slider-banner .bnn-item .bnn-item-wp .bnn-desc h1 { font-size: 36px; } }
@media (max-width: 990px) { .section-banner .slider-banner .bnn-item .bnn-item-wp .bnn-desc h1 { font-size: 25px; } }
.section-banner .slider-banner .bnn-item.active .bnn-item-wp .bnn-desc > div { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); -ms-transform: translateX(0px); opacity: 1; webkit-transition-delay: 0.25s; -moz-transition-delay: 0.25s; transition-delay: 0.25s; }
.section-banner .navOutNext { opacity: 1; -webkit-animation: slideOutBottom 0.7s forwards ease-in-out; animation: slideOutBottom 0.7s forwards ease-in-out; }
.section-banner .navInNext { opacity: 1; -webkit-animation: slideInHalfFromTop 0.7s forwards ease-in-out; animation: slideInHalfFromTop 0.7s forwards ease-in-out; }
.section-banner .navOutPrev { opacity: 1; -webkit-animation: slideOutHalfTop 0.7s forwards ease-in-out; animation: slideOutHalfTop 0.7s forwards ease-in-out; }
.section-banner .navInPrev { opacity: 1; z-index: 1001; -webkit-animation: slideInFromBottom 0.7s forwards ease-in-out; animation: slideInFromBottom 0.7s forwards ease-in-out; }
@-webkit-keyframes slideOutBottom { to { -webkit-transform: translateY(100%); } }
@keyframes slideOutBottom { to { -webkit-transform: translateY(100%); transform: translateY(100%); } }
@-webkit-keyframes slideInHalfFromTop { from { -webkit-transform: translateY(-50%); }
  to { -webkit-transform: translateY(0); } }
@keyframes slideInHalfFromTop { from { -webkit-transform: translateY(-50%); transform: translateY(-50%); }
  to { -webkit-transform: translateY(0); transform: translateY(0); } }
@-webkit-keyframes slideOutHalfTop { to { -webkit-transform: translateY(-50%); } }
@keyframes slideOutHalfTop { to { -webkit-transform: translateY(-50%); transform: translateY(-50%); } }
@-webkit-keyframes slideInFromBottom { from { -webkit-transform: translateY(100%); }
  to { -webkit-transform: translateY(0); } }
@keyframes slideInFromBottom { from { -webkit-transform: translateY(100%); transform: translateY(100%); }
  to { -webkit-transform: translateY(0); transform: translateY(0); } }
.section-banner .bx-wrapper { position: relative; }
.section-banner .bx-wrapper .bx-controls { position: absolute; left: 10%; bottom: 0; z-index: 99; }
@media (max-width: 1779px) { .section-banner .bx-wrapper .bx-controls { position: absolute; left: 8%; bottom: 0; } }
@media (max-width: 1440px) { .section-banner .bx-wrapper .bx-controls { position: absolute; left: 50px; bottom: 0; } }
.section-banner .bx-wrapper .bx-controls .bx-pager { display: flex; display: -webkit-flex; padding-bottom: 50px; }
@media (max-width: 890px) { .section-banner .bx-wrapper .bx-controls .bx-pager { padding-bottom: 20px; } }
.section-banner .bx-wrapper .bx-controls .bx-pager .bx-pager-item { margin-right: 20px; }
.section-banner .bx-wrapper .bx-controls .bx-pager .bx-pager-item a { /*width: 43px;*/ margin-right: 20px; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; font-size: 18px; font-family: "Helvetica", "Kanit", Arial, sans-serif; color: #E5E5E5; text-align: center; }
@media (max-width: 890px) { .section-banner .bx-wrapper .bx-controls .bx-pager .bx-pager-item a { font-size: 12px; } }
.section-banner .bx-wrapper .bx-controls .bx-pager .bx-pager-item a:before { content: ''; width: 43px; height: 43px; border: 1px solid #FFFFFF; display: block; border-radius: 100%; opacity: 0; position: absolute; top: -11px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -ms-transition: all 0.3s; }
@media (max-width: 890px) { .section-banner .bx-wrapper .bx-controls .bx-pager .bx-pager-item a:before { width: 30px; height: 30px; position: absolute; top: -5px; } }
.section-banner .bx-wrapper .bx-controls .bx-pager .bx-pager-item a.active:before { opacity: 1; }
.section-banner .owl-carousel .owl-dots { position: absolute; left: 10%; bottom: 0; display: flex; display: -webkit-flex; z-index: 99; padding-bottom: 50px; }
.section-banner .owl-carousel .owl-dots button { margin-right: 20px; width: 43px; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; font-size: 36px; font-family: "HelveticaBold", "KanitMedium", Arial, sans-serif; color: #878A9D; letter-spacing: 0.69px; font-family: Helvetica; font-size: 18px; color: #E5E5E5; text-align: center; }
@media (max-width: 1366px) { .section-banner .owl-carousel .owl-dots button { font-size: 25px; } }
@media (max-width: 990px) { .section-banner .owl-carousel .owl-dots button { font-size: 18px; } }
.section-banner .owl-carousel .owl-dots button:before { content: ''; width: 43px; height: 43px; border: 1px solid #FFF; display: block; border-radius: 100%; opacity: 0; position: absolute; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -ms-transition: all 0.3s; }
.section-banner .owl-carousel .owl-dots button.active:before { opacity: 1; }

.section-about-us { position: relative; overflow: hidden; }
.section-about-us .circle { position: absolute; left: 10%; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: flex-start; -webkit-align-items: flex-start; width: 50%; height: 100%; z-index: -1; }
.section-about-us .circle span.sm { width: 500px; height: 350px; border-top-left-radius: 320px; border-top-right-radius: 320px; border: 1px solid rgba(0, 0, 0, 0.05); border-bottom: 0; display: block; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); -ms-transform: rotate(180deg); position: absolute; top: -70px; }
.section-about-us .circle span.lg { width: 900px; height: 1000px; border-radius: 100%; border: 1px solid rgba(0, 0, 0, 0.05); border-bottom: 0; transform: rotate(-90deg); display: block; position: absolute; top: -400px; z-index: -1; }
.section-about-us .page-content { padding: 50px 0 50px 10%; position: relative; }
@media (max-width: 1440px) { .section-about-us .page-content { padding: 50px 0 50px 50px; } }
@media (max-width: 680px) { .section-about-us .page-content { padding: 50px; } }
.section-about-us .page-content .about-content { padding-top: 40%; position: relative; }
@media (max-width: 680px) { .section-about-us .page-content .about-content { padding-top: 0; } }
.section-about-us .page-content .about-content .about-item { -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; -ms-transition: all 1s; opacity: 0; position: absolute; top: 0; height: 100%; }
@media (max-width: 680px) { .section-about-us .page-content .about-content .about-item { position: relative; display: none; } }
.section-about-us .page-content .about-content .about-item .about-item-wp { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; height: 100%; }
@media (max-width: 680px) { .section-about-us .page-content .about-content .about-item .about-item-wp { flex-wrap: wrap; } }
.section-about-us .page-content .about-content .about-item .about-item-wp > div { -webkit-flex-basis: 50%; flex-basis: 50%; }
@media (max-width: 680px) { .section-about-us .page-content .about-content .about-item .about-item-wp > div { -webkit-flex-basis: 100%; flex-basis: 100%; } }
.section-about-us .page-content .about-content .about-item .about-item-wp .img-item { background-size: cover; background-repeat: no-repeat; background-position: center; padding-top: 35%; position: relative; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -ms-transition: all 0.5s; opacity: 0; -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -o-transform: translateX(100px); transform: translateX(100px); -ms-transform: translateX(100px); }
@media (max-width: 680px) { .section-about-us .page-content .about-content .about-item .about-item-wp .img-item { margin-top: 0; background: none; padding-top: 0; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -ms-transform: translateX(0); } }
@media (max-width: 640px) { .section-about-us .page-content .about-content .about-item .about-item-wp .img-item { background: none !important; margin: 0; padding: 0; } }
.section-about-us .page-content .about-content .about-item .about-item-wp .img-item img { visibility: hidden; display: none; }
@media (max-width: 680px) { .section-about-us .page-content .about-content .about-item .about-item-wp .img-item img { visibility: visible; display: block; } }
.section-about-us .page-content .about-content .about-item .about-item-wp .content-item { padding-right: 10%; /*padding-top: 100px;*/ }
@media (max-width: 680px) { .section-about-us .page-content .about-content .about-item .about-item-wp .content-item { padding-right: 0; } }
.section-about-us .page-content .about-content .about-item .about-item-wp .content-item h1 { font-size: 48px; font-family: "HelveticaBold", "KanitMedium", Arial, sans-serif; color: #005382; margin: 0 0 20px; }
@media (max-width: 1366px) { .section-about-us .page-content .about-content .about-item .about-item-wp .content-item h1 { font-size: 36px; } }
@media (max-width: 990px) { .section-about-us .page-content .about-content .about-item .about-item-wp .content-item h1 { font-size: 25px; } }
.section-about-us .page-content .about-content .about-item .about-item-wp .content-item p { font-size: 14px; font-family: "Helvetica", "Kanit", Arial, sans-serif; color: #878A9D; letter-spacing: 0.6px; line-height: 25px; }
@media (min-width: 681px) { .section-about-us .page-content .about-content .about-item.active { opacity: 1; } }
@media (max-width: 680px) { .section-about-us .page-content .about-content .about-item.active { display: block; opacity: 1; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; -ms-transition-delay: 0.2s; } }
.section-about-us .page-content .about-content .about-item.active .about-item-wp .img-item { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -ms-transform: translateX(0); }
.section-about-us .page-content .about-filter-wrap { width: 35%; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; position: absolute; bottom: 150px; }
@media (max-width: 1680px) { .section-about-us .page-content .about-filter-wrap { position: absolute; bottom: 50px; } }
@media (max-width: 1366px) { .section-about-us .page-content .about-filter-wrap { position: relative; bottom: 0; width: 90%; padding-top: 50px; } }
@media (max-width: 680px) { .section-about-us .page-content .about-filter-wrap { width: 100%; display: block; padding-top: 50px; } }
@media (max-width: 1366px) { .section-about-us .page-content .about-filter-wrap .about-filter { padding-right: 20px; } }
@media (max-width: 680px) { .section-about-us .page-content .about-filter-wrap .about-filter { padding-right: 0; padding-bottom: 5px; } }
.section-about-us .page-content .about-filter-wrap .about-filter a { font-size: 12px; font-family: "Helvetica", "Kanit", Arial, sans-serif; color: #000000; letter-spacing: 0.51px; line-height: 25px; text-transform: uppercase; display: inline-block; position: relative; }
.section-about-us .page-content .about-filter-wrap .about-filter a:after { content: ''; width: 0; height: 1px; background-color: #951B1E; display: block; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -ms-transition: all 0.3s; }
.section-about-us .page-content .about-filter-wrap .about-filter a.active { font-family: "HelveticaBold", "KanitMedium", Arial, sans-serif; color: #951B1E; }
.section-about-us .page-content .about-filter-wrap .about-filter a.active:after { width: 100%; }
.section-about-us .page-content .about-filter-wrap .about-filter a:hover:after { width: 100%; }

.section-products { position: relative; /*Filter*/ }
.section-products .filter-product { padding: 0 10%; width: 100%; z-index: 9; position: absolute; top: 80px; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; }
.section-products .filter-product .filter-list-pr a { color: #DADADA; text-transform: uppercase; display: inline-block; position: relative; }
.section-products .filter-product .filter-list-pr a:after { content: ''; width: 0; height: 1px; background-color: #FFFFFF; display: block; position: absolute; bottom: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -ms-transition: all 0.3s; opacity: 0; visibility: hidden; }
.section-products .filter-product .filter-list-pr.active a:after, .section-products .filter-product .filter-list-pr a:hover a:after { width: 100%; opacity: 1; visibility: visible; }
@media (max-width: 990px) { .section-products .filter-product { display: none; } }
.section-products .product-slider { background-color: #000; }
.section-products .product-slider #product-list-wp { position: relative; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; }
.section-products .product-slider #product-list-wp .product-item .product-item-wp { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; }
.section-products .product-slider #product-list-wp .product-item .product-item-wp .product-image { width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; }
@media (max-width: 1200px) { .section-products .product-slider #product-list-wp .product-item .product-item-wp .product-image { padding: 10% 0; } }
@media (max-width: 768px) { .section-products .product-slider #product-list-wp .product-item .product-item-wp .product-image { padding: 15% 0 20%; } }
@media (max-width: 640px) { .section-products .product-slider #product-list-wp .product-item .product-item-wp .product-image { padding: 10pc 0 15pc; } }
.section-products .product-slider #product-list-wp .product-item .product-item-wp .product-image img { visibility: hidden; }
.section-products .product-slider #product-list-wp .product-item .product-item-wp .product-desc { position: absolute; width: 45%; padding-left: 10%; color: #FFFFFF; opacity: 0; -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -o-transform: translateY(-100px); transform: translateY(-100px); -ms-transform: translateY(-100px); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; }
@media (max-width: 990px) { .section-products .product-slider #product-list-wp .product-item .product-item-wp .product-desc { position: absolute; width: 90%; } }
.section-products .product-slider #product-list-wp .product-item .product-item-wp .product-desc h2 { font-size: 36px; font-family: "HelveticaBold", "KanitMedium", Arial, sans-serif; color: #FFFFFF; margin: 20px 0; }
@media (max-width: 1366px) { .section-products .product-slider #product-list-wp .product-item .product-item-wp .product-desc h2 { font-size: 25px; } }
@media (max-width: 990px) { .section-products .product-slider #product-list-wp .product-item .product-item-wp .product-desc h2 { font-size: 18px; } }
.section-products .product-slider #product-list-wp .product-item .product-item-wp .product-desc a { font-size: 14px; font-family: "HelveticaBold", "KanitMedium", Arial, sans-serif; color: #FFFFFF; letter-spacing: 1.75px; text-transform: uppercase; background-color: #951B1E; text-align: center; display: inline-block; padding: 15px 50px; margin-top: 30px; }
@media (max-width: 768px) { .section-products .product-slider #product-list-wp .product-item .product-item-wp .product-desc a { font-size: 12px; padding: 10px 30px; } }
.section-products .product-slider #product-list-wp .owl-item.active .product-desc { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1; webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; transition-delay: 0.8s; }
.section-products .product-slider #product-list-wp .owl-dots { position: absolute; bottom: 80px; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; }
@media (max-width: 768px) { .section-products .product-slider #product-list-wp .owl-dots { bottom: 50px; } }
.section-products .product-slider #product-list-wp .owl-dots button { width: 10px; height: 10px; border: 1px solid #FFFFFF; border-radius: 100%; margin: 0 20px; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -ms-transition: all 0.3s; }
.section-products .product-slider #product-list-wp .owl-dots button:before { content: ''; width: 40px; height: 40px; border: 1px solid #FFFFFF; border-radius: 100%; opacity: 0; position: absolute; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -ms-transition: all 0.3s; }
.section-products .product-slider #product-list-wp .owl-dots button.active { background-color: #FFFFFF; }
.section-products .product-slider #product-list-wp .owl-dots button.active:before { opacity: 1; }
.section-products .product-type-wrap { position: absolute; left: 5%; right: 5%; top: 20%; width: 90%; z-index: 9; overflow: auto; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -ms-transition: all 0.3s; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -ms-transform: translateY(100px); }
.section-products .product-type-wrap .icon-close span { top: 20px; right: 20px; background-image: url(../images/close-b.svg); background-size: contain; background-repeat: no-repeat; background-position: center; width: 50px; height: 50px; position: absolute; z-index: 9; cursor: pointer; }
.section-products .product-type-wrap .product-type-wrap-stp { position: relative; background-color: #FFF; overflow: auto; padding: 80px 0; }
.section-products .product-type-wrap .product-type-wrap-bg { padding: 21pc 0; position: relative; overflow: auto; }
.section-products .product-type-wrap .product-type-wrap-filter { position: absolute; left: 0; top: 0; width: 100%; padding: 0 80px 0; background-color: #FFF; }
.section-products .product-type-wrap .product-type-wrap-filter .product-detail-wp { display: flex; display: -webkit-flex; flex-wrap: wrap; }
.section-products .product-type-wrap .product-type-wrap-filter .product-detail-wp .product-detail { -webkit-flex-basis: 22.75%; flex-basis: 22.75%; margin-right: 3%; margin-bottom: 20px; position: relative; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -ms-transition: all 0.3s; -webkit-transform: 100px; -moz-transform: 100px; -o-transform: 100px; transform: 100px; -ms-transform: 100px; }
.section-products .product-type-wrap .product-type-wrap-filter .product-detail-wp .product-detail:nth-child(4n) { margin-right: 0; }
.section-products .product-type-wrap .product-type-wrap-filter .product-detail-wp .product-detail .product-img { padding: 8.5pc 0; background-size: cover; background-repeat: no-repeat; background-position: center; }
.section-products .product-type-wrap .product-type-wrap-filter .product-detail-wp .product-detail .product-img img { display: none; }
.section-products .product-type-wrap .product-type-wrap-filter .product-detail-wp .product-detail .product-content { padding-top: 20px; }
.section-products .product-type-wrap .product-type-wrap-filter .product-detail-wp .product-detail .product-content p { margin-bottom: 0; font-size: 14px; font-family: "HelveticaBold", "KanitMedium", Arial, sans-serif; color: #000000; letter-spacing: 2.05px; text-transform: uppercase; }
.section-products .product-type-wrap .product-type-wrap-filter .product-detail-wp .product-detail a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.section-products .product-type-wrap.active { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -ms-transform: translateY(0); }
.section-products .product-type-wrap.active .product-type-wrap-filter .product-detail-wp .product-detail { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -ms-transform: translateY(0); }
.section-products .spinner { margin: 10pc auto 0; width: 100%; text-align: center; position: absolute; left: 0; top: 0; z-index: 99; }
.section-products .spinner > div { width: 18px; height: 18px; background-color: #005382; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; }
.section-products .spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
.section-products .spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }
@-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); }
  40% { -webkit-transform: scale(1); } }
@keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); }
  40% { -webkit-transform: scale(1); transform: scale(1); } }
.section-projects { padding: 80px 0; }
.section-projects .title h1 { font-size: 48px; font-family: "HelveticaBold", "KanitMedium", Arial, sans-serif; color: #005382; margin: 0 0 40px; }
@media (max-width: 1366px) { .section-projects .title h1 { font-size: 36px; } }
@media (max-width: 990px) { .section-projects .title h1 { font-size: 25px; } }
.section-projects .project-list { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; }
.section-projects .project-list.less { max-width: 1200px; margin: 0 auto; display: flex; }
.section-projects .project-list.less .project-item { -webkit-flex-basis: 33.33%; flex-basis: 33.33%; margin: 0 2%; }
.section-projects .project-list .project-item { background: #005382; -webkit-box-shadow: 0 16px 32px 0 rgba(205, 204, 216, 0.52); -moz-box-shadow: 0 16px 32px 0 rgba(205, 204, 216, 0.52); box-shadow: 0 16px 32px 0 rgba(205, 204, 216, 0.52); position: relative; border: 10px solid #FFF; }
.section-projects .project-list .project-item .item-img { background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; }
.section-projects .project-list .project-item .item-img:before { content: ''; width: 100%; height: 100%; background-color: rgba(13, 53, 98, 0.7); opacity: 0; position: absolute; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -ms-transition: all 0.3s; }
.section-projects .project-list .project-item .item-img img { visibility: hidden; }
.section-projects .project-list .project-item .item-content { padding: 40px 20px; opacity: 0; position: absolute; bottom: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -ms-transition: all 0.3s; }
.section-projects .project-list .project-item .item-content h4 { font-size: 20px; color: #FFFFFF; }
@media (max-width: 1366px) { .section-projects .project-list .project-item .item-content h4 { font-size: 18px; } }
@media (max-width: 990px) { .section-projects .project-list .project-item .item-content h4 { font-size: 16px; } }
.section-projects .project-list .project-item .item-content p { font-size: 12px; color: #FFFFFF; line-height: 17px; }
.section-projects .project-list .project-item a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 9; }
.section-projects .slick-slider button { position: absolute; z-index: 1; text-indent: -9999px; border: 0; background-color: transparent; background-image: url("../images/nav.svg"); background-size: contain; background-repeat: no-repeat; width: 68px; height: 68px; }
@media (max-width: 640px) { .section-projects .slick-slider button { width: 30px; height: 30px; } }
.section-projects .slick-slider button.slick-prev { left: 0; display: none !important; }
.section-projects .slick-slider button.slick-next { right: 50px; }
.section-projects .slick-slider .slick-list { padding-top: 50px !important; padding-bottom: 50px !important; }
.section-projects .slick-slider .slick-list .slick-slide { margin: 0 10px; }
.section-projects .slick-slider .slick-list .slick-slide.slick-current .project-item { -webkit-box-shadow: 0px 0px 32px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 32px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 32px 1px rgba(0, 0, 0, 0.2); }
.section-projects .slick-slider .slick-list .slick-slide.slick-current .project-item .item-img:before { opacity: 1; }
.section-projects .slick-slider .slick-list .slick-slide.slick-current .project-item .item-content { opacity: 1; }
.section-projects .project-content { margin-top: 20px; }
.section-projects .project-content a { font-size: 12px; font-family: "HelveticaBold", "KanitMedium", Arial, sans-serif; color: #951B1E; letter-spacing: 1.75px; text-transform: uppercase; display: inline-block; position: relative; }
.section-projects .project-content a:after { content: ''; width: 100px; height: 1px; background-color: #951B1E; display: block; margin: 5px auto 0; }

/*Section Map*/
.section-maps { display: flex; display: -webkit-flex; flex-wrap: wrap; height: 100%; }
.section-maps .col-left { -webkit-flex-basis: 30%; flex-basis: 30%; }
@media (max-width: 990px) { .section-maps .col-left { -webkit-flex-basis: 100%; flex-basis: 100%; } }
.section-maps .col-left .img-block { height: 100%; position: relative; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; }
.section-maps .col-left .img-block .img-cover { background-size: cover; background-repeat: no-repeat; background-position: right; height: 100%; width: 100%; }
@media (max-width: 990px) { .section-maps .col-left .img-block .img-cover { padding: 10pc 0; } }
.section-maps .col-left .img-block .img-cover img { display: none; }
.section-maps .col-left .img-block .content { position: absolute; width: 100%; padding: 0 5vw; /* Icon Wobble Horizontal */ }
.section-maps .col-left .img-block .content h2 { font-size: 36px; font-family: "HelveticaBold", "KanitMedium", Arial, sans-serif; color: #FFFFFF; margin: 0 0 20px; }
@media (max-width: 1366px) { .section-maps .col-left .img-block .content h2 { font-size: 25px; } }
@media (max-width: 990px) { .section-maps .col-left .img-block .content h2 { font-size: 18px; } }
.section-maps .col-left .img-block .content p { color: #FFFFFF; line-height: 17px; }
@-webkit-keyframes hvr-icon-wobble-horizontal { 16.65% { -webkit-transform: translateX(6px); transform: translateX(6px); }
  33.3% { -webkit-transform: translateX(-5px); transform: translateX(-5px); }
  49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); }
  66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); }
  83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); }
  100% { -webkit-transform: translateX(0); transform: translateX(0); } }
@keyframes hvr-icon-wobble-horizontal { 16.65% { -webkit-transform: translateX(6px); transform: translateX(6px); }
  33.3% { -webkit-transform: translateX(-5px); transform: translateX(-5px); }
  49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); }
  66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); }
  83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); }
  100% { -webkit-transform: translateX(0); transform: translateX(0); } }
.section-maps .col-left .img-block .content a { display: inline-block; margin-top: 30px; color: #FFFFFF; letter-spacing: 1.5px; text-transform: uppercase; padding-right: 30px; position: relative; }
.section-maps .col-left .img-block .content a:after { content: ''; width: 14px; height: 10px; background-image: url(../images/arr.svg); background-size: contain; background-repeat: no-repeat; position: absolute; right: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -ms-transition: all 0.3s; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; }
.section-maps .col-left .img-block .content a:hover:after { -webkit-animation-name: hvr-icon-wobble-horizontal; animation-name: hvr-icon-wobble-horizontal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; box-shadow: none; }
.section-maps .col-right { -webkit-flex-basis: 70%; flex-basis: 70%; }
@media (max-width: 990px) { .section-maps .col-right { -webkit-flex-basis: 100%; flex-basis: 100%; } }
.section-maps .col-right #KMap { height: 400px; }

.info-box-custom { max-width: 350px; display: flex; position: relative; }
.info-box-custom .col-left { -webkit-flex-basis: 80%; flex-basis: 80%; padding: 20px; background-color: #FFF; }
.info-box-custom .col-left .title { font-size: 12px; font-family: "HelveticaBold", "KanitMedium", Arial, sans-serif; color: #103C4D; text-transform: uppercase; margin: 0 0 10px; }
.info-box-custom .col-left .content p { font-size: 12px; font-family: "Helvetica", "Kanit", Arial, sans-serif; color: #7C919A; line-height: 26px; }
.info-box-custom .col-left a { font-size: 14px; font-family: "HelveticaBold", "KanitMedium", Arial, sans-serif; color: #005382; }
.info-box-custom .col-right { -webkit-flex-basis: 20%; flex-basis: 20%; background-color: #005382; }
.info-box-custom .col-right a { display: block; height: 100%; background-image: url("../images/map-icon.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; width: 50%; margin: 0 auto; }
.info-box-custom:before { content: ''; position: absolute; left: -15px; top: 20px; width: 0px; height: 0px; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 15px solid #FFF; }

.no-edit .section-maps .col-right .wrap-map-point { display: none; }

.edit .section-maps .col-left .img-block .img-cover img { display: block; }

/*# sourceMappingURL=homepage.css.map */