@charset "utf-8";
/* Header, Footer, and Bootstrap Customize */
/* ////////// Bootstrap Customize ////////// */
a, button {transition: all 0.2s; text-decoration: none;}
button {border-radius: 8px;}
a:focus, button:focus {outline: 0;}
a:hover,
a:focus,
a:active,
a:active:hover,
a:active:focus,
button:hover,
button:focus,
button:active,
button:active:hover,
button:active:focus {transition: all 0.2s;}

.btn {height: 45px; font-weight: 600; padding-left: 20px; padding-right: 20px; display: flex; align-content: center; align-items: center; flex-wrap: wrap;}
.btn-animate {background: linear-gradient(to right,#0089f7,#00d7e0,#0089f7); background-size: 200% 100%; background-position: left center; transition: background-position 0.5s ease;}
ิีbutton.btn-animate {}
.btn-animate:hover {background-position: 85% 100%;color: #ffffff !important;}
button.btn-animate:active {color: #ffffff !important;}
.btn:hover {text-decoration: none;}
.btn.mw220 {min-width: 220px;}
.text-gradient {background: -webkit-gradient(linear, left top, right top, from(#0089f7), to(#00d7e0)); background: linear-gradient(to right, #0089f7 0%, #00d7e0 110%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.text-gradient.style-1 {font-weight: 700; font-size: 1.6rem;}

.btn-primary {background: #144cbd; border-color: #144cbd}
.btn-primary:hover {background: #02369F;}

.btn-more {position: relative; font-weight: 500; color: #253656; border: 1px solid #00adec; justify-content: start;}
.btn-more:before {content: ""; display: block; position: absolute; top: 0; right: 45px; bottom: 0; width: 1px; background: #00adec;}
.btn-more:after {content: ""; display: block; margin-left: 10px; width: 17px; height: 17px; mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; }
.btn-more:after {position: absolute; right: 15px; background-color: #00adec; mask-image: url(../images/icon-arrow-right.svg); -webkit-mask-image: url(../images/icon-arrow-right.svg); transform: translateX(0); transition: transform 0.4s ease;}
.btn-more.btn:hover,
:not(.btn-check) + .btn-more.btn:active {border: 1px solid #00adec; background: #00adec; color: #ffffff;}
.btn-more.btn:hover:after,
:not(.btn-check) + .btn-more.btn:active:after {background-color: #ffffff}

.breadcrumb {font-size: 0.86rem; padding-bottom: 5px; padding-top: 15px; font-weight: 600;}
.breadcrumb-item + .breadcrumb-item::before {content: "";background-color: #565a5e;display: block;mask-image: url(../images/icon-breadcrumb-right.svg);-webkit-mask-image: url(../images/icon-breadcrumb-right.svg);-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;-webkit-mask-size: contain;width: 16px;height: 16px;padding: 0;margin: 1px 5px 2px 0;}

.help-block.form-error {}

.modal-backdrop {z-index: 1500;}
.modal {z-index: 1600; background: rgba(255, 255, 255, 0.85);}
.modal-header {border-bottom: 0;}
.modal-header h4.title {font-size: 17px; color: #333333;}
.modal-content {border: none; color: #333333; border-radius: 15px; box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.25); -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.25); -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.25);}
.modal-header, .modal-body, .modal-footer {padding: 15px 30px; }

.modal-title {color: #253656; margin-top: 0;}
.form-control {font-size: 1rem; border-radius: 8px; border: 1px solid #c8cdd3;}
.form-control,
.form-control:focus {font-family: 'Noto Sans Thai'; color: #333333; height: 45px; font-weight: 400;}
textarea.form-control, textarea.form-control:focus {height: auto;}
.form-control::placeholder {color: #999;}
.form-label {color: #62748e; font-weight: 500; font-size: 0.93rem;}

.bootstrap-select > .dropdown-toggle {height: 45px;}
.bootstrap-select > .dropdown-toggle .filter-option {display: flex; align-items: center;}
.bootstrap-select .dropdown-menu li a.dropdown-item {padding: 10px; font-weight: 400;}
.bootstrap-select .dropdown-menu li:not(.disabled) a.dropdown-item.active {background: #144cbd;}
.bootstrap-select .dropdown-toggle {color: #333333; border: 2px solid #7987a1; background: #ffffff; /*border: 1px solid #dee2e6;*/}
.bootstrap-select .dropdown-toggle.btn:hover {background: #ffffff;}
.box-input {display: flex; align-items: center; min-height: 45px; border-radius: 8px; border: 2px solid #7987a1; padding: 0.375rem 0.75rem;}
.box-input label {display: flex; align-items: center; line-height: 1;}
.box-input label input[type="radio"] {width: 1.2rem; height: 1.2rem;}
.box-input input[type="radio"] {margin-right: 8px;}
.box-input.no-border {padding: 0; border: none;}

.zoom img { transition: transform .3s;}
.zoom:hover img {-ms-transform: scale(1.1); /* IE 9 */-webkit-transform: scale(1.1); /* Safari 3-8 */transform: scale(1.1);}

.read-icon {}

.pagination {}
.pagination .page-link {color: #62748e; font-weight: 500; padding: 10px 15px; width: 50px; height: 50px; border-radius: 60px; display: flex; justify-content: center; align-items: center; margin: 0 15px; text-decoration: none;}
.pagination .page-link:hover {background: #e6e6e6;}
.pagination .active > .page-link {background: #0f172a; border-color: #0f172a; color: #ffffff;}
.page-item:first-child .page-link {min-width: 95px; border-top-left-radius: 60px; border-bottom-left-radius: 60px;}
.page-item:last-child .page-link {min-width: 95px; border-top-right-radius: 60px; border-bottom-right-radius: 60px;}



/* ////////// Header ////////// */

/* ---- Menu ---- */
header {min-height: 80px;}
/*Mobile menu*/
#mobile-menu {}
.toggle-offcanvas {padding: 7px 10px; border-radius: 5px; background: #ffffff; border: 2px solid #0089f7; color: #0089f7; transition: 0.3s;}
.toggle-offcanvas:focus {outline: 0;}
.toggle-offcanvas:hover {color: #ffffff; background: #0089f7;}

/* Menu*/
.navbar-brand {padding: 10px 10px 10px 0px; width: 200px; /*height: auto;*/}
/*.navbar-brand span {background-image: url(../images/logo.png); background-color: #eeeeee; background-repeat: no-repeat; background-size: cover; display: block; width: 140px; height: 40px;}*/
.navbar-brand img {width: 190px;}

header #menu-mobile {height: 0; display: none;}
header #menu {background: #ffffff; position: absolute; z-index: 1200; width: 100%; min-height: 80px; margin-bottom: 0; border: none; padding: 0; border-radius: 0; border-bottom: 1px solid #e2e8f0;}
header #menu {}
body.down header #menu {background: #ffffff;}
#menu .navbar-nav.nav-menu {margin-top: 10px;/*padding-top: 10px; padding-bottom: 10px;*/}
#menu .navbar-nav.nav-menu > li > a {color: #0f172a; font-size: 1rem; font-weight: 500;}
#menu .navbar-nav.nav-menu > li > a:after {content: ""; display: block; margin: 3px auto 0; border-radius: 20px; height: 2px; background: none;}
#menu .navbar-nav.nav-menu > li > a:hover,
#menu .navbar-nav.nav-menu > li > a:focus,
#menu .navbar-nav.nav-menu > li.active-menu > a {text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(#0089f7), to(#00d7e0)); background: linear-gradient(to right, #0089f7 0%, #00d7e0 110%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#menu .navbar-nav.nav-menu > li > a:hover:after,
#menu .navbar-nav.nav-menu > li > a:focus:after,
#menu .navbar-nav.nav-menu > li.active-menu > a:after {background: -webkit-gradient(linear, left top, right top, from(#0089f7), to(#00d7e0)); background: linear-gradient(to right, #0089f7 0%, #00d7e0 100%);}
#menu .navbar-nav.nav-menu > li.active-menu > a {}


body.down #menu .navbar-nav.nav-menu  {margin-top: 5px;}
#menu_lists > ul.nav-button li a {height: auto;}
.nav-button button,
.nav-button .btn {font-weight: 600; padding: 7px 30px; border: none; color: #ffffff; }
.nav-button button:hover, .nav-button .btn:hover,
.nav-button button:first-child:active, .nav-button .btn:active,
.nav-button button:focus, .nav-button .btn:focus {background-position: 85% 100%; color: #ffffff; text-decoration: none;}
body.down header #menu {min-height: 50px;}
body.down .navbar-brand {/*padding: 5px 15px; height: auto; margin-left: 0 !important;*/}
body.down .navbar-brand img {width: 130px;}
body.down #menu .navbar-nav {/*margin-top: 3px !important; margin-bottom: 3px !important;*/}
body.down #menu .navbar-nav > li > a {padding: 3px 10px;/*padding-top: 10px; padding-bottom: 10px;*/}

/*Menu*/
body.down header #menu {/*background: #FF0003;*/ position: fixed; min-height: auto; z-index: 1300; top: 0; left: 0; right: 0; -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1); box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);}
/*body.down header #menu:not(.clone) {position: relative; z-index: 900; opacity: 0;}*/
body.down #menu .navbar-nav > li > a {font-size: 0.93rem;}


/* ////////// Footer ////////// */

footer {background: #0f172a; font-size: 0.93rem; color: #62748e;}
footer h3 {font-size: 1.2rem; color: #ffffff; margin-bottom: 15px;}
footer a {color: #62748e;}
footer a:hover {color: #0089f7 ;}
footer ul {list-style-type: none; padding-left: 20px;}
footer ul li {position: relative; padding: 4px 0;}
ul.list-quicklinks {}
ul.list-quicklinks li:before {content: "\25CF"; position: absolute; left: -18px;}
ul.list-quicklinks li:hover:before,
ul.list-quicklinks li:hover a {color: #0089f7;}
ul.list-contact {padding-left: 30px;}
ul.list-contact li {}
ul.list-contact li:before {position: absolute; left: -28px; content: ""; display: block; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center;}
ul.list-contact li.loc {}
ul.list-contact li.loc:before {background-image: url("../images/icon-footer-01.svg")}
ul.list-contact li.tel {}
ul.list-contact li.tel:before {width: 17px; background-image: url("../images/icon-footer-02.svg")}
ul.list-contact li.email {}
ul.list-contact li.email:before {width: 17px; background-image: url("../images/icon-footer-03.svg")}
ul.list-social {}
ul.list-social li {}
ul.list-social li a.social {display: flex; background: #1e293b; width: 40px; height: 40px; border-radius: 8px; align-items: center; justify-content: center; flex-wrap: wrap;}
ul.list-social li a.social:before {content: ""; display: block; background-repeat: no-repeat; width: 20px; height: 20px;}
ul.list-social li a.social.fb:before {background-image: url("../images/icon-social-01.svg");}
ul.list-social li a.social.tw:before {background-image: url("../images/icon-social-02.svg");}
ul.list-social li a.social.ln:before {background-image: url("../images/icon-social-03.svg");}
ul.list-social li a.social:hover {background: #0089f7;}
.copyright {border-top: 1px solid #334155; padding-top: 25px; padding-bottom: 25px;}

/*//////////////////Media Query//////////////////*/
/* xs (Extra small)*/
@media (max-width: 575px) {
    
}
    
/* sm (Small)*/
@media (min-width: 576px) and (max-width: 767px) { 
	
}

/* md (Medium)*/	
@media (min-width: 768px) and (max-width: 991px) {
	
}

@media (max-width: 991px) {
    /* Menu*/
    .navbar-brand {width: 165px;}
    
    /*Menu sticky*/
    header #menu {z-index: 1200;}
    #menu.clone {/*background: #CB69A6;*/opacity: 0;}
    body.down #menu.clone {display: block;}
    /*Mobile menu*/
    .navbar-brand img {width: 150px;}
    body.down .navbar-brand img {width: 110px;}
    header #menu-mobile {display: block;}
    
    
}

/* lg (Large)*/	
@media (min-width: 992px) and (max-width: 1199px) {
	
}
@media (min-width: 992px) {
    /* Menu*/
    .navbar-brand {margin-right: 0px;} 
    
    /*Menu sticky*/
    #menu.clone {position: fixed; z-index: 1000; top: 0; left: 0; right: 0; opacity: 0; /*transform: translateY(-100%); transition: transform 0.10s ease-out;*/}
    body:not(.down) #menu.clone {visibility: hidden;}
    body.down #menu.clone {opacity: 1; z-index: 1500;}
    
    /*Mobile menu*/
    .toggle-offcanvas {display: none;}
}

/* xl (Extra large) */
@media (min-width: 1200px) and (max-width: 1399px) {
	
}
/* xxl (Extra extra large) */
@media (min-width: 1400px) {
	 	
}