@charset "utf-8";
@import url(reset.css);
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500;600;700;800;900&family=Varela+Round&display=swap');

/* ---------------------------------------------------------------- general selector
---------------------------------------------------------------------------------- */
html {background-color: var(--Color-secondary)xcursor: none;}
body {text-rendering: optimizeLegibility; line-height: 1.5; font-family: Kanit; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; background:#fff;color:var(--Color-secondary) line-height: 1.5; float: left; width: 100%;}
:root {
    --Color-secondary: #354A50;
    --Color-primary: #83B20C;
}

.clr-primary {color:var(--Color-primary)}
.clr-secondary {color:var(--Color-secondary)}
.bg-clr-primary {background-color:var(--Color-primary)}
.bg-clr-secondary {background-color:var(--Color-secondary)}

* { box-sizing:border-box;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { line-height:1.5}
a { color:var(--Color-secondary) outline:none; text-decoration:none; /*transition:all ease .5s;*/ cursor:pointer;}
a:hover { text-decoration:none; color:var(--Color-primary);}
a:focus { outline:none; box-shadow:none;}
strong,b {font-weight: 600;}
img { max-width:100%;}
.t-bold { font-weight: 600;}
.fw {float: left; width: 100%;}
.p-hl { font-size: 1.2em;}
.p-sm { font-size: 0.9em;}
.pd { padding: 80px 0;}
.tinline { display:inline-block;}
.text-uppercase { text-transform:uppercase;}


.loadpage { position:fixed; top:0px; left:-25%; width:150%; height:100%; z-index:999; opacity: 0.8; background:var(--Color-secondary) ; }/*rgba(237,28,36,0.9)*/
.wrapper { float:left; width:100%; overflow:hidden;}
.container-1366 {max-width: 1366px; padding:0 60px }

/*
 |*******************************************************************************************
 | FORM
 |*******************************************************************************************
*/
.check-group { float:left; width:100%; text-align:left;font-weight:300;}
.check-group .check-title { float:left; margin-right:20px; width:auto; font-weight:400; margin-bottom:10px;}
.check-group .check-line { float:left; margin-right: 20px; color:#ccc}
.check-group .check-list { float:left; width:100%; margin-bottom:10px; }
.check-group.checkinline .check-title { margin-bottom:0px;}
.check-group.checkinline .check-list { margin-bottom:0px;}
.check-group label { display: inline-block;cursor: pointer;position: relative;padding-left: 30px;margin-right: 15px;	margin-bottom:0px;}
.check-group input[type=checkbox] { display:none;}
.check-group label:before { content: "";	display: inline-block; width:20px; height:20px;position:absolute; left:0; top:2px; background-color:#fff; border:2px solid #d9dbda; border-radius:4px;}
.check-group input[type=checkbox]:checked + label:before { background: #fff; border:2px solid #d9dbda;}
.check-group label:after { content:""; position:absolute;} 
.check-group input[type=checkbox]:checked + label:after { width:10px; height:10px; top:7px; left:5px; border-radius:2px; background-color:var(--Color-primary);} 
.check-group.checkinline .check-list { width:auto;}

.radio-group { float:left; width:100%; text-align:left;font-weight:300;}
.radio-group .radio-title { float:left; margin-right:20px; width:auto; font-weight:400; margin-bottom:10px;}
.radio-group .radio-line { float:left; margin-right: 20px; color:#ccc}
.radio-group .radio-list { float:left; width:100%; margin-bottom:10px; }
.radio-group.radioinline .radio-title { margin-bottom:0px;}
.radio-group.radioinline .radio-list { margin-bottom:0px;}
.radio-group label { display: inline-block;cursor: pointer;position: relative;padding-left: 30px;margin-right: 15px;	margin-bottom:0px;}
.radio-group input[type=radio] { display:none;}
.radio-group label:before { content: "";	display: inline-block; width:20px; height:20px;position:absolute; left:0; top:2px; background-color:#fff; border:2px solid #d9dbda; border-radius:100%;}
.radio-group input[type=radio]:checked + label:before { background: #fff; border:2px solid #d9dbda;}
.radio-group label:after { content:""; position:absolute;} 
.radio-group input[type=radio]:checked + label:after { width:10px; height:10px; top:7px; left:5px; border-radius:100%; background-color:var(--Color-primary); } 
.radio-group.radioinline .radio-list { width:auto;}

.form-group .file-input__label {position: relative;display: block;height: 41px;width: 100%;padding: 0.375rem 0.75rem;font-size: 1rem;line-height: 1.5;color: #495057;background-color: #fff;background-clip: padding-box;border: 1px solid #ced4da;border-radius: 0.25rem;transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.form-group .file-input__label input {width: 0.1px;height: 0.1px;opacity: 0;overflow: hidden;position: absolute;z-index: -1;}
.form-group .file-input__label span.upload-icon { border-radius: 3px; background-color: #D9D9D9; right:0px; top: 50%; position: absolute; cursor: pointer;display: flex;align-items: center;font-weight: normal;color:var(--Color-Secondary);font-size:0.9em;float: right;padding: 5px 10px;justify-content: center;margin:0 5px;    transform: translateY(-50%);}
.form-group .file-input__label span.upload-icon:hover { background-color: var(--Color-primary); color:#fff; cursor: pointer;}
.form-group .file-input__label svg {height: 15px;fill: var(--Color-Secondary); margin-right: .5em;}
.form-group .file-input__label span.placehol{font-size: 0.9em; cursor: pointer;display: flex;align-items: center;color: #8f8f8f;float: left;justify-content: center;height: 100%;}
.form-group .file-input__input { width: 0.1px;	height: 0.1px;	opacity: 0;	overflow: hidden;	position: absolute;	z-index: -1;}

/*
 |*******************************************************************************************
 | BUTTON
 |*******************************************************************************************
*/
.btn {background:var(--Color-secondary); border:2px solid var(--Color-secondary); border-radius:5px; padding:10px 30px; color:#fff; font-size:15px; transition:all ease .4s;  text-transform:uppercase; line-height:1.2;}
.btn.focus, .btn:focus {outline: 0;box-shadow:none;}
.btn:hover { background:#000; color:#fff;border:2px solid #000;  }
.btn:hover svg { fill:#fff;}
.btn-secondary { background-color:var(--Color-primary);border:2px solid var(--Color-primary);color:#fff;}
.btn-icon svg {fill:#fff; width:16px; transition:all ease .4s; }
.btn-icon span { display:flex; align-items:center; justify-content:center;}
.btn-icon-right svg {margin-left:10px;}
.btn-icon-left svg {margin-right:10px;}
.btn-lg { font-size:18px; padding:18px 30px 18px; min-width:200; }
.btn-sm { font-size:12px; padding:5px 10px 5px; min-width:0; }
.btn-outline { background-color:#fff; border:2px solid var(--Color-secondary);}
.btn-text { padding:0px!important; color:var(--Color-secondary); background:none; border:none; min-width:1px!important}
.btn-text svg { fill:var(--Color-secondary);}
.btn-text:hover { color:var(--Color-secondary); text-decoration:underline; background:none; border:none;}
.btn-text:hover svg { fill:var(--Color-secondary);}
.btn-white { color:#fff;}
.btn-white svg { fill:#fff;}
.btn-white:hover { color:#fff; text-decoration:underline; background:none; border:none;}
.btn-white:hover svg { fill:#fff;}
/*
 |*******************************************************************************************
 | TITLE
 |*******************************************************************************************
*/

.box-title { float:left; width:100%; padding-bottom:30px; text-align:center;color:var(--Color-secondary);}
.box-title.color-inverse { color: #fff;}
.box-title h1 {font-size:40px;}
.box-title h2 {font-size:35px;}
.box-title h3 {font-size:30px;}
.box-title h4 {font-size:26px;}
.box-title p {}

/*
 |*******************************************************************************************
 | SLIDE
 |*******************************************************************************************
*/
.swiper-button { background:#5f5f5f; padding:10px 15px; width:60px; height:60px; display:flex; align-items:center; justify-content:center; }
.swiper-button img,.swiper-button svg { fill:#fff; width:100%; margin-top:-2px;}
.swiper-button:hover { background-color:#41e82e;}
.swiper-button-next { right:0px;}
.swiper-button-prev { left:0px;}

/*
 |*******************************************************************************************
 | SELECT
 |*******************************************************************************************
*/

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width:100%; min-width:60px;}
.bootstrap-select > .dropdown-toggle {}
.dropdown-toggle::after {content:""; top:50%; transform:translateY(-50%); width: 0;height: 0;border-style: solid;border-width:4px 4px 0 4px;border-color: #131415 transparent transparent transparent; margin:0px; vertical-align:0;}
.dropdown-menu { padding:0px; margin:0px; font-size:14px; width:100%;}
.dropdown-item { padding:7px 10px 3px; color:#5f5f5f!important;}
.dropdown-item.active, .dropdown-item:active { background-color:var(--Color-secondary) color:#fff!important;}
.bootstrap-select .dropdown-toggle:focus { outline:0!important; box-shadow:none;}

.btn-light {display: block;width: 100%;font-size: 0.9em;padding: 0.6em 1.2em;line-height: 1.5;color: #495057;background-color: #fff;background-clip: padding-box;border: 1px solid #ced4da;border-radius: 0.25rem;transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.btn-light:hover{background: #fff;color: #495057;border: 1px solid #495057;}


/*
 |*******************************************************************************************
 | CONTENT
 |*******************************************************************************************
*/
.box-content  { float:left; width:100%;}
.box-content h1	{ font-size:1.8em;}
.box-content h2	{ font-size:1.6em;}
.box-content h3	{ font-size:1.4em;}
.box-content h4	{ font-size:1.2em;}
.box-content h5	{ font-size:1em;}
.box-content h6	{ font-size:0.9em;}
.box-content p {}
.box-content p:last-child { margin-bottom:0px;}
.box-content a.btn {}
.box-content a:hover { text-decoration:underline;}
.box-content iframe	{ border:none; display:block;max-width: 100%;}
.box-content p img {  margin-bottom:0px;}
.box-content img { max-width:100%;}
.box-content ol	{ display:block; list-style:decimal outside; padding-left:20px; }
.box-content ul	{ display:block; list-style:disc outside ;margin-left:0px; padding-left:20px; position:relative;}
.box-content li	{ padding-bottom:3px; position:relative;}
.box-content img {height: auto !important;}


.position_on_scroll { position:absolute; top:450px; left: 0px; width:100%; opacity:0; z-index:-1;}
.greenline-left { position:absolute; left:60px; top:50px; width:2px; height:100%; background-color:#c2c2c3; z-index:2; }
.greenline-left span { position:absolute; top:0px; left:0px; height:70%; background-color:#41e82e; width:4px;}


/*
 |*******************************************************************************************
 | HEADER
 |*******************************************************************************************
*/
.section-header { float:left; background-color: #fff; width:100%; position:fixed; top:0px; left:0px; text-align:left; padding:10px 0;z-index:20; display:flex; align-items:center;justify-content: space-between;padding-right: 120px; box-shadow:0 0 60px 0 rgba(131,178,2,0.7)}
.box-logo { float:left; margin-left:30px; width:140px; position:relative; z-index:2; }
.box-logo a { display:flex; align-items:center; justify-content:center;}
.box-logo a .logo-image { float:left;position: relative;}
.box-logo a .logo-image img,.box-logo a .logo-image svg { width:100%; float:left; fill:#fff}

.menu-on-mobile { margin-left:auto;position:relative;width: 100%;display: flex;justify-content: center;}

.main-menu { display:flex; align-items:center; margin-right:60px;}
.box-menu { float:left;  margin-right:auto; margin-left:0; padding:0px 0;}
.box-menu > ul { align-items:center; justify-content:center; text-transform:uppercase; font-size:14px; font-weight:600; float:left;}
.box-menu > ul > li.menu-li { float:left;  position:relative; margin-right:60px; }
.box-menu > ul > li.menu-li a { color:var(--Color-secondary); z-index:2;padding:10px 0px; float:left;}
.box-menu > ul > li.menu-li svg, .box-menu > ul > li.menu-li img { width:65px; height:65px; float:left;}
.box-menu > ul > li.menu-li a.active { border-bottom:2px solid var(--Color-primary);}
.box-menu > ul > li.menu-li a:hover { color:var(--Color-primary);}

.btn-menu { position:absolute; z-index:1; display:flex; align-items:center; -webkit-display:flex; -webkit-align-items:center;  cursor:pointer;  display:none; left:auto; right:10px; top:18px;}
.btn-menu .groupMenu {margin: 0 auto;width: 22px; cursor:pointer; height:16px; position:relative; float:right;}
.btn-menu .groupMenu span { position:absolute;width: 22px;height: 2px;background-color: var(--Color-secondary);float: left;margin-bottom: 4px; overflow:hidden;-webkit-transition:ease .4s; transition:ease .4s; }
.btn-menu .groupMenu span:last-child {margin-bottom: 0px;}
.btn-menu .pan1 { top:0px; left:0; transform-origin:center center;-webkit-transform-origin:center center;}
.btn-menu .pan2 { top:7px; left:auto; right:0px; transform-origin:center center;-webkit-transform-origin:center center;}
.btn-menu .pan3 { top:14px; left:0; transform-origin:center center;-webkit-transform-origin:center center;}
.btn-menu .btn-menutext { color:var(--Color-secondary); float:right; text-transform:uppercase;  margin-left:15px;}
.btn-menu:hover span:before { left:0px; }
.closeMenu { position:absolute; top:20px; right:20px; width:50px; height:50px; z-index:-1; cursor:pointer;}
.menuClick .groupMenu .pan1 { transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg); top:8px; z-index:2; height:2px;}
.menuClick .groupMenu .pan2 { width:0px; height:0px;}
.menuClick .groupMenu .pan3 { transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg); top:8px; z-index:2; height:2px;}
.menuClick .closeMenu { z-index:12;}
.menuClick .btn-menu { z-index:11;}
.menuClick .btn-menu .groupMenu span { background-color:var(--Color-secondary);}
.menuClick .btn-menu .groupMenu span:before { background-color:var(--Color-secondary);}

.box-system { position: absolute; right: 10px; top: 0;}
.shortcut-menu { transition: all ease .4s; background-color: var(--Color-secondary);padding: 7px 10px;border-radius: 0 0 10px 10px;text-align: center;float: left;color: #fff;margin-left: 5px;min-width: 105px;font-size: 0.9em;}
.shortcut-menu .shortcut-icon svg,.shortcut-menu .shortcut-icon img {}
.shortcut-menu:hover { background-color: var(--Color-primary); color:#fff!important}

/*
 |*******************************************************************************************
 | FOOTER
 |*******************************************************************************************
*/


.section-footer { margin-top: -80px; padding: 120px 0 40px; float:left; width:100%; position:relative; background:var(--Color-primary);  color:#fff;  position:relative;}
.box-footer { display: flex; justify-content: space-between; margin-left: -20px; margin-right: -20px;}
.box-footer a:hover { color: var(--Color-secondary);}

.footer-title { margin-bottom: 10px;}
.footer-tel {}
.footer-col { display: flex; padding: 0 20px;}
.footer-logo { margin-right: 20px;}
.footer-qr { margin-right: 20px; width: 140px; border-radius: 20px;}
.footer-qr img { border-radius: 20px; overflow: hidden; position: relative;}
.link-icon img,.link-icon svg { position: relative; top: 3px; width: 16px; height: 16px; margin-right: 5px; fill:#fff }
.link-icon-line  { display: flex; align-items: center;}
.link-icon-line img,.link-icon-line svg { width: 32px; height: 32px; top: 0; border: 1px solid #fff; border-radius: 5px;}
.link-icon:hover { color: var(--Color-secondary);}
.link-icon:hover svg{ fill: var(--Color-secondary);}
.footer-tel ul {-webkit-columns: 2;-moz-columns: 2;columns: 2;}
.footer-third .footer-content ul { list-style: disc inside;}
/*
 |*******************************************************************************************
 | BANNER
 |*******************************************************************************************
*/

.section-banner { float:left; width:100%; position:relative;}
.box-banner { float:left; width:100%; overflow:hidden; position:relative;}
.banner-list { float:left; width:100%; background-position:center top; background-repeat:no-repeat; background-size:cover; position:relative; text-align:center; }
.banner-img { float:left; width:100%;}
.banner-img img { float:left; width:100%;}
.banner-txt { width:100%;}
.banner-txt { position:absolute; top:50%; bottom:auto; margin-top:40px; left:50%; transform:translateX(-50%) translateY(-50%); text-align:center;}
.banner-detail { width:40%; float:left; margin-left: 60%; position:relative; color:#fff;}
.banner-detail h1 { font-size: 5em; line-height: 1;text-shadow: 3px 4px 14px rgba(0, 0, 0, 0.25); font-weight: 600;}
.banner-detail h2 { position:relative; font-size: 1.2em;text-shadow: 3px 4px 14px rgba(0, 0, 0, 0.25);font-weight: 600;  float:left;clear:both;text-transform:uppercase;}
.banner-detail h3 { font-size:1.2em; text-shadow: 3px 4px 14px rgba(0, 0, 0, 0.25); float:left; width:100%; clear:both; text-transform:uppercase;}
.banner-detail p { font-size:1em;text-shadow: 3px 4px 14px rgba(0, 0, 0, 0.25); color:#fff; float:left; width:100%; clear:both;text-align:left; text-transform:uppercase;}
.banner-detail .btn { float:left;margin-right: 10px;}
.banner-detail .btn svg { width: 16px; height: 16px;}
.banner-button .btn:last-child { margin-right: 0;}
.box-banner .swiper-pagination-bullets {left: 30px;top: 50%; bottom:auto; transform:translateY(-50%); position:absolute; width:auto; text-align:center;}
.box-banner .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block;width:2px; height:30px; background-color:rgba(255,255,255,0.5); border-radius:0; margin:2px auto 2px auto!important;  opacity:1;}
.box-banner .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color:#ba9f57;}
.box-banner .swiper-pagination-bullets .page_count { color:#fff; font-family: 'gothamproregular'; font-size:10px;}

.bannerline-top { position:absolute; bottom:0px; height:25px; width:1px; left:50%; background-color:#fff;z-index: 1;}
.bannerline-bottom { position:absolute; top:100%; height:25px; width:1px; left:50%; background-color:#131415;z-index: 1;}
.banner-list { background-position: center center; background-repeat: no-repeat; background-size: cover; height: 560px;}
/*
 |*******************************************************************************************
 | HOME
 |*******************************************************************************************
*/
.sec {float:left; width:100%;}

.sec-intro { background: url(../../assets/img/main/bg-grey-d.jpg) no-repeat center bottom;}
.box-intro .row .col { position: relative;}
.box-intro .row .col:before { content: ""; position: absolute; right:10px; top: 0; height: 100%; width: 1px; background-color: var(--Color-primary); opacity: 0.5;}
.box-intro .row .col:last-child:before{ display: none;}
.box-intro { font-size: 1.2em; padding: 40px; background-color: #fff; border-radius: 20px; border: 2px solid var(--Color-primary); box-shadow: 0 4px 32px 0 rgba(3,178,185,0.2); }

.box-history-img { width: 40%; float: left; padding-right: 60px;}
.history-img {box-shadow: 0px 0px 23px 0px rgba(0, 0, 0, 0.20); border-radius: 10px; overflow: hidden;}
.box-history-timeline { width: 60%; float: left;}
.sec-history .box-title h2 { line-height: 1;}
.history-timeline { position: relative;}
.history-timeline:before {content: "";position: absolute;width: 1px;height: 100%;left: 15px;background-color: #BFB9B9;}
.history-timeline-list { position: relative; padding-left: 50px; margin-bottom: 30px;}
.history-timeline-list:last-child { margin-bottom: 0;}
.history-timeline-icon { background-color: #fff; font-size: 30px; position: absolute; width: 30px; height: 30px; left: 0; border-radius: 100%; border: 1px solid var(--Color-primary); color: var(--Color-primary); display: flex; align-items: center; justify-content: center;}
.history-timeline-icon span {top: -2px; position: relative;}
.history-timeline-title { font-size: 3em; font-weight: 600;line-height: 0.6;margin-bottom: 20px; color: var(--Color-primary);}

.sec-why { color: #fff; background: url(../../assets/img/main/bg-green-d.jpg) no-repeat center bottom; background-size: cover;}
.why-list-title { font-size: 1.5em; font-weight:600; margin-bottom: 0.2em; }
.why-list-title img { margin-right: .5em;}

.howto-slide { overflow: visible;}
.box-howto .thumbs-img { border-radius: 10px;border: 3px solid #D5DAE8; overflow: hidden; position: relative; margin-bottom: 1em;}
.box-howto .thumbs-txt {  display: flex; align-items: start;}
.box-howto .thumbs-txt .thumbs-txt-num { font-size: 1.5em;font-weight: 600;line-height: 1;padding-bottom: 4px; color: var(--Color-primary); padding-right: 10px; margin-right: 10px; border-right: 1px solid rgba(0, 0, 0, 0.25);}
.box-howto .thumbs-txt .thumbs-txt-desc { float: left;}
.box-howto .thumbs-txt .thumbs-txt-desc p.howto-desc { font-size: 0.8em;}

.accor-list {float: left; width: 100%;  margin-bottom:0px;transition:all ease .4s;}
.accor-list.active .accor-head-symbol:after { height:0;}
.accor-head { border-bottom: 1px solid #eee; float: left; width: 100%; position: relative; cursor:pointer; background-size: cover; padding:.7em 1.5em 0.7em 1.5em; border-radius: 0em;}
.accor-list:first-child .accor-head { border-top: 1px solid #eee;}
.accor-head-symbol { border:2px solid #333; border-radius:100%; width: 20px; height:20px;border-radius:100%;position: absolute; right:1em; top:50%;transform: translateY(-50%) }
.accor-head-symbol:before {content:""; position: absolute; left:50%; top:50%; width: 9px; height:2px; border-radius:2px; background-color:#333; transform: translate(-50%,-50%);}
.accor-head-symbol:after {content:""; position: absolute; left:50%; top:50%; height: 9px; width:2px; border-radius:2px; background-color:#333; transform: translate(-50%,-50%); transition:all ease .4s;}
.accor-head-topic {float: left; width: calc(100% - 100px); color:#333; font-size: 1.1em;}
.accor-list.active .accor-head { background:var(--Color-primary); border-radius: 10px 10px 0 0;}
.accor-list.active .accor-head-symbol { border-color: #fff;}
.accor-list.active .accor-head-symbol:before,
.accor-list.active .accor-head-symbol:after { background-color:#fff;}
.accor-list.active .accor-head-topic  {color:#fff;}
.accor-list.active .accor-head .accor-icon  {color:#fff;}
.accor-icon { float: left; width: 30px;font-size: 1.2em; color:#333;position: relative;  }
.accor-icon:after { content:":"; position: absolute; right:10px;top: 0.4em;}
.accor-body { float: left;width: calc(100% - 0em); padding: 1em 1.5em; margin: 0 0em; border-radius: 0px 0px 10px 10px; background:#EEF3F3; display:none;}
.accor-body-content {float: left; width: calc(100% - 30px);}
.accor-list.default .accor-body-content {float: left; width: calc(100% - 0px);}
.accor-body .accor-icon { color:#333;}

.sec-location  { z-index: 1; position: relative;}
.box-location { display: flex;}
.location-branch { width: 400px; float: left; margin-right: 20px;}
.branch-list { border: 2px solid var(--Color-primary); border-radius: 10px; background-color: #fff; padding: 20px; margin-bottom: 20px;}
.branch-list:last-child { margin-bottom: 0;}
.branch-address { margin-bottom: 10px;}
.branch-icon img,.branch-icon svg { position: relative; top: 3px; width: 16px; height: 16px; margin-right: 5px; fill:var(--Color-secondary) }
.branch-group {display: flex;justify-content: space-between;}
.location-map { position: relative; width:calc(100% - 420px); float: left;}
.location-map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;border: 2px solid var(--Color-primary); border-radius: 10px;background-color: #fff; }

 
/*
 |*******************************************************************************************
 | LOGIN
 |*******************************************************************************************
*/

.login-page { background:url(../../assets/img/system/bg-login.jpg) no-repeat center center}
.wrapper-login { position: relative; display:flex; align-items:center; justify-content: center; width: 100%; height: 100vh;}
.cx-login { width: 400px; max-width: 90%; text-align: center;}
.box-login { background-color: #fff; padding: 40px; border-radius: 15px; margin: 20px 0; text-align: left;}
.form_style_underline { position: relative;}
.form_style_underline label { position: absolute; left: 0; top:12px}
.form_style_underline input {border: none;padding: 10px 0px 10px 30px;border-bottom: 1px solid #ccc;border-radius: 0;}
.form_style_underline .form-control:focus { box-shadow: none; border: none; border-bottom: 1px solid var(--Color-primary);}
.login-title { margin-bottom: 20px;color:var(--Color-secondary);}
.login-title h1 { font-size: 30px; line-height: 1; font-weight: 600; margin-bottom: 5px; }
.login-title p { font-size: 12px;  line-height: 1;}
.box-login .btn { margin-top: 10px;}

/*
 |*******************************************************************************************
 | REGISTER
 |*******************************************************************************************
*/

.register-page { background: linear-gradient(180deg, #83B20C 0%, rgba(131, 178, 12, 0.00) 50%) no-repeat; }
.wrapper-register { overflow: hidden; position: relative; display:flex; align-items:center; justify-content: center; width: 100%; padding: 40px 0;}
.cx-register { width: 960px; }
.box-register { background-color: #fff; border-radius: 15px; border: 2px solid var(--Color-primary); position: relative; margin: 20px 0 0px; text-align: left;}
.cx-register-logo { display: flex; align-items: center;}
.register-logo-txt { color:#fff; margin-left: 20px;}
.register-logo-txt h1 { font-size: 40px; line-height: 1; font-weight: 600; margin-bottom: 5px; }
.register-logo-txt p { font-size: 12px;  line-height: 1;}
.register-title { margin-bottom: 20px;}
.register-title h1 { font-size: 24px; line-height: 1; font-weight: 600;}
.register-title p { font-size: 12px;  line-height: 1; margin-left: 10px; color: #666;}
.register-title-sbtw  { display: flex; justify-content: space-between; align-items: baseline;}
.register-title-auto  { display: flex; justify-content:start;align-items: baseline; }

.regis-body { padding: 40px;}
.regis-foot { display: flex; color: #fff; border-radius:0 0 12px 12px; padding:20px 40px; background-color: var(--Color-primary);}
.regis-foot-left { width: 65%; float:left; }
.regis-foot-left p { font-size: 0.8em;}
.regis-foot-left a { font-weight: 600;}
.regis-foot-right{ width: 45%; float:left; display: flex; align-items: center; justify-content: end;}
.regis-foot-right .btn { float: right; margin-left: 30px;}

.form_style_default label { margin-bottom: 5px;}
.form_style_default input { font-size: 0.9em; padding:.6em 1.2em;}
.form_style_default .form-control:focus { box-shadow: none; border: none; border: 1px solid var(--Color-primary);}
.form-radio-input {width: 300px;display: inline;padding: 0.5em 0.6em;font-size: 0.9em;}
.form-radio-input:focus { box-shadow: none; border: none; border: 1px solid var(--Color-primary);}
.form-require-star{ color: red;}

.box-register .ele { position: absolute;}
.box-register .ele img { float: left; width: 100%;}
.box-register .ele-plus-l1 { left: -230px;top: 50px;width: 70px;height: 70px;opacity: 0.2;}
.box-register .ele-plus-l2 { left: -140px;top: -50px;width: 40px;height: 40px;opacity: 0.5;}
.box-register .ele-plus-l3 { left: -60px;top: 50px;width: 30px;height: 30px;opacity: 0.2;}
.box-register .ele-plus-r1 { right: -110px;top: -30px;width: 70px;height: 70px;opacity: 0.2;}
.box-register .ele-plus-r2 { right: -10px;top: -90px;width: 40px;height: 40px;opacity: 0.5;}
.regis-foot-outside { display: none;}

@media (max-width: 991.98px) {
    .cx-register {max-width: 100%; padding: 15px}
}
@media (max-width: 767.98px) {

    .wrapper-register {padding:60px 0 40px}
    .regis-body { padding: 20px;}
    .cx-register-logo img { width: 90px;}
    .register-logo-txt h1 { font-size: 32px;}
    .register-title { display: block;} 
    .register-title p { margin-left: 0px; margin-top: 10px; line-height: 1.5;}
    .form-radio-input {width: calc(100% - 90px);}
    .regis-foot { padding:20px;}
    .regis-foot-left { display: none;}
    .regis-foot-right { width: 100%; justify-content: space-between;}
    .regis-foot-right .btn { margin-left: 0;}
    .regis-foot-outside { display: block; margin-top: 20px;}

    .regis-foot-outside .link-icon img,  .regis-foot-outside .link-icon svg { fill:var(--Color-secondary)}
    .regis-foot-outside p {font-size: 3.2vw;}
    .regis-foot-outside a {font-weight: 600;color:var(--Color-secondary)}

    .box-register .ele-plus-l1 {right: 20px;left: auto;top: -110px;width: 20px;height: 30px;opacity: 0.2; display: none;}
    .box-register .ele-plus-r1 {right: 0px;top: -70px;width: 50px;height: 50px;opacity: 0.2;}
    .box-register .ele-plus-r2 {right: 70px;top: -120px;width: 30px;height: 40px;opacity: 0.4;}
    
}





@media (min-width: 1680px){
	html {max-width: 2048px;margin: 0 auto;position: relative;}
	.section-header { max-width: 2048px; left:50%; transform:translateX(-50%)} 
}

@media (max-width: 1439.98px){ 
	.container-1366 {max-width: 1280px;}
}
@media (max-width: 1359.98px){
	.container-1366 {max-width: 1140px;}
	/*
	 |*******************************************************************************************
	 | HEADER
	 |*******************************************************************************************
	*/
	.box-menu > ul > li.menu-li { margin-right:25px;}

	/*
	 |*******************************************************************************************
	 | FOOTER
	 |*******************************************************************************************
	*/
	.box-footer { font-size: 0.8em;}

	/*
	 |*******************************************************************************************
	 | HOME
	 |*******************************************************************************************
	*/
	.box-intro { font-size: 1em;}
	.why-list-title { font-size: 1.3em;}
	.box-howto .thumbs-txt .thumbs-txt-desc p.howto-desc br { display: none;}

	.banner-list { height: 460px;}

	
}
@media (max-width: 1199.98px){
	.container-1366 { max-width:960px; padding-right: 15px; padding-left: 15px;}
	
	.breadcrumb {padding: 8px 10px;}
	
	/* 
	 |*******************************************************************************************
	 | HEADER
	 |*******************************************************************************************
	*/
	.shortcut-menu { min-width: 85px;}
	.shortcut-menu .shortcut-icon svg, .shortcut-menu .shortcut-icon img { width: 18px; height: 18px;}
	.box-logo { margin-left: 15px;}
	.box-menu > ul { font-size: 0.9em;}
	.box-menu > ul > li.menu-li { margin-right:15px;}
	.box-menu > ul > li.menu-login a { padding:9px 5px;}


	
	/* 
	 |*******************************************************************************************
	 | BANNER
	 |*******************************************************************************************
	*/

	
	
}

@media (max-width: 991.98px) {
	.container-1366 { max-width:720px; padding-right: 15px; padding-left: 15px;}
	/*
	 |*******************************************************************************************
	 | HEADER
	 |*******************************************************************************************
	*/
	.box-system { display: none;}

	
	.btn-menu { display:flex;}
	.btn-menu { right:20px; top:18px;}

	
	.menu-on-mobile { position:fixed; top:0px; left:0px; width:100%; background-color:#fff; display:none; }
	.main-menu { display:block; margin-right:0px;}
	.main-menu .box-menu-second { float:left; width:100%;display:block; font-size:16px;}
	.main-menu .box-menu-second .btn { font-size:16px;}
	.main-menu .menu-second-btn { display:inline-block; float:none; margin:0px; padding:20px 0; margin:0 10px;}
	.main-menu .menu-second-btn a { width:180px; float:none; display:inline-block;}
	.main-menu .menu-second-txt {float:left; width:50%; margin:0px; border-top:1px solid #ccc;border-bottom:1px solid #ccc; text-align:center; position:relative;}
	.main-menu ul li.menu-second-txt a { float:none; display:inline-block;}
	.main-menu ul li.menu-second-txt:nth-of-type(3) { clear:none;}
	.main-menu ul li.menu-second-txt:nth-of-type(3):before  { content:""; position:absolute; right:0px; top:0px; height:100%; width:1px; background-color:#ccc;}
	
	
	.box-menu { float:left; width:100%; text-align:left; padding:0px; margin-top:70px; }
	.box-menu ul {font-size:16px;}
	.box-menu > ul { float:left; width:100%; }
	.box-menu > ul > li { float:left; width:100%; padding:12px 20px;}
	.box-menu > ul > li:before { display:none;}
	.box-menu > ul > li a { width:100%; float:left;} 
	.box-menu > ul > li a.m-menu { font-size:16px; padding:0px 0px 0;} 
	.box-menu > ul > li.menu-login { float:left; width:60%; margin-right:0px;}
	.box-menu > ul > li.menu-login a { font-size:14px;}
	.box-menu > ul > li.menu-login a svg { width:20px; height:20px;}
	.box-menu > ul > li.menu-login a font { padding-top:4px;}
	.box-menu > ul > li.box-lang { float:right; width:40%; padding:12px 20px}
	.box-menu > ul > li.box-lang .lang-m { float:right;}
	.box-menu > ul > li > ul { position:relative; top:0px; padding:0px; margin:0px; visibility:visible; opacity:1; padding-top:10px;float: left;width: 100%;font-size: 12px;}
	.box-menu > ul > li > ul > li { position:relative; padding-left:20px;}
	.box-menu > ul > li > ul > li:before { position:absolute; content:""; width:4px; height:4px; background-color:#fff; top:16px; left:0px; float:left;}
	.box-menu > ul > li > ul li:last-child a { padding-bottom:0px;}
	.lang-m { float:left; border:3px solid #41e82e;}
	.lang-m-list { background-color:#000; color:#555; float:left; width:auto!important; font-size:11px; padding:5px 10px 1px;}
	.lang-m-list.active { background-color:#41e82e; color:#000; }

	/*
	 |*******************************************************************************************
	 | BANNER
	 |*******************************************************************************************
	*/
	.pd { padding: 50px 0;}
	.banner-list { height: 360px;}

	.banner-txt { margin-top: 25px;}
	.banner-detail { font-size: 0.8em;}
    .banner-detail h1 { font-size: 4em;}
	.banner-button .btn { margin-bottom: 5px;}

	.sec-intro  { padding-top: 40px; padding-bottom: 40px;}
	.box-intro { padding:20px 40px ;}
	.box-intro .row .col:nth-of-type(2n):before { display: none;}
	.box-intro .row .col {text-align: center; padding-top: 20px; padding-bottom: 20px;border-top: 1px solid var(--Color-primary);    display: flex;align-items: center;justify-content: center; }
	.box-intro .row .col:nth-of-type(1),
	.box-intro .row .col:nth-of-type(2) {border-top:none; }
	.box-intro .row .col:before { right: 0; opacity: 1;}

	.box-history-img { padding-right: 20px;}
	.history-timeline-title { font-size: 2em; line-height: 0.9;}

	.location-branch { width: 320px;}
	.location-map {width: calc(100% - 340px);}

	.box-footer { display: block;}
	.footer-col { width: 50%; float: left;}
	.footer-logo { width: 90px;}
	.footer-third { display: none;}
	
	.shortcut-mobile { padding: 15px;}
	.shortcut-menu { width: 50%; border-radius: 10px; margin: 0px 5px; padding:10px 10px 8px}
}
@media (max-width: 767.98px) {
	.loadpage { width:200%; left:-50%;}
	.box-title h2 { font-size: 7vw;}
	/*
	 |*******************************************************************************************
	 | HEADER
	 |*******************************************************************************************
	*/
	
	.section-header  { background-color: var(--Color-primary);}
	.box-logo a .logo-image img, .box-logo a .logo-image svg, .box-logo a .logo-image path {fill:#fff!important}
	.btn-menu .groupMenu span { background-color: #fff;}
	.btn-menu .btn-menutext { color: #fff;}
	.menu-on-mobile { height: calc(100% - 59px); top: 59px; }
	.box-menu { margin-top: 10px;}
	.menuClick .btn-menu .groupMenu span { background-color:#fff;}
	
	/*
	 |*******************************************************************************************
	 | BANNER
	 |*******************************************************************************************
	*/

	.banner-list { height: auto;}

	.box-banner { background-color:#ffffff}
	.banner-list { background: var(--Color-primary)!important;}
	.banner-img { float:left; width:100%;}
	.banner-txt { margin-top: 0px; padding: 20px; float: left; width: 100%; position: relative; background-color: var(--Color-primary); transform: translateY(0); top: 0; left: 0; }
	.banner-txt .container { max-width:100%;}
	.banner-detail { width: 100%; margin-left: 0px;}

	

	.sec-intro { background: none;}
	.box-intro { padding: 0 40px; font-size: 4vw;}
	.box-intro .row .col:before { display: none;}
	.box-intro .row .col {text-align: center; padding-top: 20px; padding-bottom: 20px;border-top: 1px solid var(--Color-primary);    display: flex;align-items: center;justify-content: center; }
	.box-intro .row .col:nth-of-type(1){border-top:none; }
	.box-intro .row .col:nth-of-type(2) {border-top: 1px solid var(--Color-primary);}

	.box-history-timeline { width: 100%;}
	.history-timeline-title .box-title { display: block; float: none; padding-bottom: 0; color: var(--Color-secondary);}
	.history-timeline-desc p { margin-bottom: 10px;}
	.history-timeline-desc p:last-child { margin-bottom: 0px;}
	.history-img { display: block; float: none;}

	.sec-why {background: url(../../assets/img/main/bg-green-m.jpg) no-repeat center bottom; background-size: cover;}
	.why-list { margin-bottom: 30px;} 

	.accor-head-topic { font-size: 1em;}

	.box-location  { display: block;}
	.location-branch { width: 100%;}
	.location-map { width: 100%; height: 300px;}
	.branch-list:last-child { margin-bottom: 20px;}
	

	.box-footer { font-size: 1em;}
	.footer-col { width: 100%;display: flex;justify-content: center; align-items: center; text-align: center;}
	.footer-logo, .footer-qr, .footer-third, .footer-second .footer-title { display: none;}
	.footer-second { margin-top: 20px;}
	.link-icon-line { background-color: #fff; color: var(--Color-secondary); padding-right: 10px; line-height: 1; border-radius: 5px;}
	
	
}
@media (max-width: 575.98px)  {
	
	
	
}