@charset "utf-8";
@import url(reset.css);
@import url(../font/fontface.css);
@import url('https://fonts.googleapis.com/css?family=Kanit:100,200,300&display=swap&subset=thai');
/* ---------------------------------------------------------------- general selector
---------------------------------------------------------------------------------- */
body {text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; text-shadow: rgba(0, 0, 0, .01) 0 0 1px; /*background:url(../img/skin/bg.png) top center no-repeat #fff;*/font-family:'Sukhumvit Set','Kanit', sans-serif;line-height:1.5;color:#000; font-weight:600; }/*font-family: 'Sukhumvit Set','Kanit', sans-serif;*/
body.search { background: none}

* { box-sizing:border-box;}

a { color:#000; outline:none; text-decoration:none; transition:all ease .5s; cursor:pointer;}
a:hover { text-decoration:none; color:#9D8E0E;}
a:focus { outline:none; box-shadow:none;}
img { max-width:100%;}
.row-8 { margin-left:-8px; margin-right:-8px; }
.row-8 .col { padding-left:8px; padding-right:8px;}
.minwidth-0 { min-width:0!important;}
.form-control.form-style-border:focus { box-shadow:none;border-color: #3872bc;}
.tinline { display:inline-block;}
.mobileHide {display:block;}
.mobileShow {display:none;}
.box-shadow { box-shadow:0 0 8px 0 rgba(32,89,134,0.3);}
.text-gradient {background: -webkit-linear-gradient(45deg, #51bbed, #2f2fe8);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.text-gradient-inverse {background: -webkit-linear-gradient(45deg, #2f2fe8, #51bbed);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}

.clear { float:left; width:100%; clear:both;}
.loadpage { position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:999; background: url(../img/skin/logo.png) no-repeat center center #fff ; }/*rgba(237,28,36,0.9)*/
.wrapper { float:left; width:100%; overflow:hidden; margin-top:135px;}
.container-ct { width:1260px;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;}
.container-960 { width:960px;}
.container-800 { width:800px;}

.check-group { float:left; width:100%; text-align:left;}
.check-group .check-list { float:left; width:100%; margin-bottom:10px; }
.check-group label { display: inline-block;cursor: pointer;position: relative;padding-left: 30px;margin-right: 15px;	margin-bottom:0px;	font-weight:normal; color:#ed1c24;}
.check-group label a { text-decoration:underline;color:#ed1c24;}
.check-group label a:hover { color:#000;}
.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 #fff; border-radius:100%;}
.check-group input[type=checkbox]:checked + label:before { background: #ed1c24; border:2px solid #ed1c24;}
.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:100%; background-color:#fff; }
.check-group.checkinline .check-list { width:auto;}

.radio-group { float:left; width:100%; text-align:left;}
.radio-group .radio-list { float:left; width:100%; margin-bottom:10px; }
.radio-group label { display: inline-block;cursor: pointer;position: relative;padding-left: 30px;margin-right: 15px;	margin-bottom:0px;	font-weight:normal;}
.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: #25b1e4; border:2px solid #25b1e4;}
.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:#fff; }
.radio-group.radioinline .radio-list { width:auto;}


.btn {background:linear-gradient(90deg, #51bbed, #2f2fe8); border-radius:50px; border:none; padding:10px 40px; color:#fff!important; font-size:15px; transition:all ease .4s; font-weight:600;}
.btn:hover { background:linear-gradient(90deg, #9D8E0E, #9D8E0E); color:#fff; }
.btn-lg { padding:13px 40px;}


.loading { position:fixed; top:0px; left: 0; width:100%; height:100%; background-color:rgba(93,196,197,0.98); z-index:99; }
.load-flex { display:flex; align-items:center; justify-content:center; position:absolute; top:0px; left: 0; width:100%; height:100%; }

.box-title { float:left; width:100%; padding-bottom:30px; text-align:center;}
.box-title h1 { color:#000;float:left; width:100%; text-transform:uppercase; font-size:60px;}
.box-title h1 span { color:#ed1c24;}
.box-title p { color:#000; float:left; width:100%;}



/*
 |*******************************************************************************************
 | SELECT
 |*******************************************************************************************
*/
.bootstrap-select { width:auto; min-width:300px;}
.dropdown-item {display: block;width: 100%;padding: .375rem 2rem; clear: both; color: #3872bc;font-size:16px; text-align: inherit;white-space: nowrap;background: 0 0; border: 0; text-align:left}
.dropdown-menu{ background-color:#fff;border: 2px solid #a3a3a3; color:#3872bc; border-radius:20px; margin:0; font-size:16px; }
.bootstrap-select>.dropdown-toggle {color: #3872bc!important; border-radius:50px; background:#fff; border: 2px solid #3872bc; font-size:16px; padding: 10px 15px}
.bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:active {color: #3872bc!important; border-radius:50px; background:#fff; border: 2px solid #a3a3a3; font-size:16px; padding: 10px 15px}
.bootstrap-select .dropdown-toggle:focus {outline: 0!important; box-shadow:none!important}
.bootstrap-select .dropdown-toggle .filter-option{ text-align:center}
.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show>.btn-light.dropdown-toggle {border: 2px solid #a3a3a3; background-color:#fff; color:#3872bc;}
.dropdown-item:focus, .dropdown-item:hover {color: #fff;text-decoration: none;background-color: #3872bc;}

.bootstrap-select:before { display:none; position:absolute; content:""; height:100%; width:1px; background-color:#fff; right:50px; top:0px; z-index:2; opacity:0.3;}
.dropdown-toggle::after { background:url(../img/skin/icon-arrow-down-blue.svg) no-repeat center center; width:20px; height:14px; border:none; vertical-align:0;top:2px;position: relative;}
.dropup .dropdown-toggle::after {background:url(../img/skin/icon-arrow-up.svg) no-repeat center center; width:20px; height:14px; border:none; vertical-align:0;}
.bootstrap-select>select { z-index:-10;}
.filter-option-inner-inner { text-align:left;}
/*
 |*******************************************************************************************
 | VIDEO
 |*******************************************************************************************
*/

.video-container {	display:inline-block;cursor:pointer;	margin:auto;	 position: relative; width:100%; float:left;}
.video-space { float:left; width:100%; position:relative; transition:all .5s ease;z-index:1;}
.video-space img { float:left; width:100%;}
.video-button { position:absolute; transition:all .5s ease; z-index:2;}
.video-put { position:absolute; top:0px; left:0px; width:100%; height:100%;z-index:3; cursor:pointer;}
.video-put .player { position:absolute; top:0px; left:0px; width:100%; height:100%;}
.video-text {font-family: 'Prompt', sans-serif; text-transform:uppercase; font-size:16px; font-weight:300; color:#fff; text-align:left; margin-top:10px; }

.inactive-state {background-repeat: no-repeat;background-size: 100%;}
.inactive-state:hover .video-button { }
/*.inactive-state:hover .video-space { opacity:0.9; box-shadow:0 0 0 4px #5dc4c5;}*/

/*
 |*******************************************************************************************
 | POPUP
 |*******************************************************************************************
*/
.section-popup { position:fixed; width:100%; height:100%; top:0px; left:0px; color:#000; text-align:center; display:none; z-index:20;}
.popup-bg { position:absolute; top:0px; left:0px; width:100%; height:100%;  background-color:rgba(0,0,0,0.9);}
.popup-container { width:1000px; height:80%; position:absolute; top:50%; left:50%; margin-left:-500px; transform:translateY(-50%); -webkit-transform:translateY(-50%); background-color:#fff; padding:40px; border-radius:20px; overflow:hidden; }
.popup-close { position:absolute; right:20px; top:20px; width:50px; height:50px; cursor:pointer; z-index:10; background-color:#f7f5fa; display:flex; align-items:center; justify-content:center; border-radius:100%;}
.popup-container:before { right:0; top:0; content:""; z-index:9; position:absolute; width: 0;height: 0;border-style: solid;border-width: 0 90px 90px 0;border-color: transparent #3872bc transparent transparent;}
.popup-close svg { fill:#3872bc; width:25px; height:25px; transition:all .4s ease;}
.popup-close:hover svg { transform:rotate(180deg);}
.box-popup { text-align:left;}
.box-popup h2 { font-weight:600; font-size:40px; padding-bottom:10px; color:#3872bc;}
.box-popup p { font-size:15px; color:#222; line-height:1.4;}

.popup-img { width:70%; float:left; position:relative; padding-bottom:20px; overflow:hidden;}
.popup-img img { position:relative; float:left; }
.popup-img:before { position:absolute; content:""; width:100%; height:100%; top:-30px; right:-30px; background-color:#f58c51;}
.popup-txt { width:calc(30% + 60px);background-color:#fff;margin-left:-60px;position:absolute;right:0px;padding:30px;bottom:-60px;min-height:300px;text-align:left;z-index:2; }
.popup-txt h2 { color:#5dc4c5; margin-bottom:10px;}

.popup-gallery img { float:left; width:100%;}
.popup-gallery .popup-container { width:calc(100% - 80px); height:calc(100% - 80px); margin-left:0; left:40px; padding:0px;}

.popup-video .popup-container { width:960px; height:auto;top:50%; left:50%; margin-left:-480px; transform:translateY(-50%); -webkit-transform:translateY(-50%); display:flex; align-items:center; justify-content:center; padding:0px; background-color:#000;}
.popup-video .popup-container .box-popup { width:100%; height:100%;}
.popup-video .video-container { height:100%;}


.popup-alert .popup-container { width:550px; height:auto; margin-left:-275px; left:50%; padding:0px; padding:50px 40px;}

.popup-event .popup-container { padding:15px; height:auto;}
.popup-body { float:left; width:100%; margin-bottom:15px;}
.popup-body img { float:left; width:100%;}
/*
 |*******************************************************************************************
 | HEADER
 |*******************************************************************************************
*/
.section-header { float:left; width:100%; position:fixed; top:0px; left:0px; text-align:left; background-color:#fff; padding:20px 0 0; z-index:20; display:flex; align-items:center; box-shadow:0 0 30px 0 rgba(0,0,0,0.2);}

.head-row { float:left; width:100%;}
.box-logo { float:left; margin-right:40px; margin-left:0px;}
.box-logo a { display:flex; align-items:center; justify-content:center;}
.box-logo a .logo-image { float:left; width:83px;top: -5px;position: relative;}
.box-logo a .logo-image img { width:100%; float:left;}
.box-logo a .logo-text { float:left; margin-left:20px; font-weight:700; color:#3872bc; font-size: 19px; line-height:1.2; text-transform:uppercase;}
.box-logo a .logo-text span { color:#505050;font-size: 17px;word-spacing: 4px;}

.box-menu-second { float:right; font-size:15px;}
.box-menu-second ul { }
.box-menu-second ul li { margin-left:20px; float:right;}
.box-menu-second ul li a { color:#3872bc; padding-top:10px; padding-bottom:10px; float:left;}
.box-menu-second ul li a:hover {  color:#9D8E0E;}
.box-menu-second ul li:last-child { margin-left:0px;}

.main-menu { display:flex; align-items:center;}
.main-menu .box-menu-second { display:none;}
.box-menu { float:left;  margin-right:auto; margin-left:0; padding:10px 0;}
.box-menu > ul { align-items:center; justify-content:center; text-transform:uppercase; font-size:15px; font-weight:600; margin-right:38px;margin-left:103px;}
.box-menu > ul > li { float:left; padding:0 15px; position:relative; }
.box-menu > ul > li:first-child { padding-left:0px;}
.box-menu > ul > li:before { content:""; position:absolute; right:-1px; width:2px; background-color:#000000; top:20%; height:60%; margin-top:-1px;}
.box-menu > ul > li:last-child:before  { display:none;}
.box-menu > ul > li a { color:#3872bc;}
.box-menu > ul > li svg, .box-menu > ul > li img { width:65px; height:65px; float:left;}
.box-menu ul li a.active{ color:#3872bc;}
.box-menu > ul > li a:hover { color:#9D8E0E;}

.box-tools { float:right; margin-left:40px;}
.box-tools ul { float:left;}
.box-tools ul li { width:30px; height:30px; border-radius:100%; float:left; margin:0 5px; }

.tools-search { width:30px; height:30px; display:flex; align-items:center; justify-content:center;}
.tools-search img,.tools-search svg { width:20px; height:20px; fill:#000; }
.tools-search:hover svg { fill:#3872bc;}
.tools-social { display:flex; align-items:center; justify-content:center;width:30px; height:30px;border-radius:100%;}
.tools-social img,.tools-social svg { width:16px; height:16px; fill:#fff;}
.social-fb { background-color:#0085ff;}
.social-yt { background-color:#db2627;}
.share-fb { background-color:#4e71a8;}
.share-tw { background-color:#17b6ea;}
.share-line { background-color:#00ac00;}

.btn-search-mobile { display:none;}
.btn-menu { position:absolute; z-index:1; display:flex; align-items:center; -webkit-display:flex; -webkit-align-items:center; width:20px; height:17px; cursor:pointer; transition:ease-in-out .2s;-webkit-transition:ease-in-out .2s;  display:none; left:auto; right:10px; top:18px;}
.btn-menu .groupMenu {margin: 0 auto;width: 20px; cursor:pointer; height:17px; position:relative;}
.btn-menu .groupMenu span { position:absolute;width: 20px;height: 2px;border-radius: 5px;background-color: #3872bc;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 .groupMenu span:before { position:absolute; content:""; width:100%; height:100%; background-color:#3872bc; left:-100%; transition:ease .4s;-webkit-transition:ease .4s;}*/
.btn-menu:hover { /*transform:scale(1.1);-ms-transform:scale(1.1);-webkit-transform:scale(1.1);*/}
.btn-menu:hover span:before { left:0px; }
.menuClick .btn-menu { z-index:11;}
.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;}
.menuClick .pan1 { transform:rotate(45deg)!important;-ms-transform:rotate(45deg)!important;-webkit-transform:rotate(45deg)!important; top:6px!important; z-index:2;}
.menuClick .pan2 { width:30px!important; height:30px!important; top:-8px!important;left:-5px!important; border-radius:100%!important; background-color:#3872bc!important}
.menuClick .pan3 { transform:rotate(-45deg)!important;-ms-transform:rotate(-45deg)!important;-webkit-transform:rotate(-45deg)!important; top:6px!important; z-index:2;}

.closeMenu { position:absolute; top:20px; right:20px; width:50px; height:50px; z-index:-1; cursor:pointer;}
.menuClick .closeMenu { z-index:12;}
.menuClick .btn-menu .groupMenu span { background-color:#fff;}
.menuClick .btn-menu .groupMenu span:before { background-color:#fff;}


.box-submenu { position:absolute; left:0px; top:100%; background-color:#fff; padding:30px 0; display:none; margin-left:30px; min-height:390px; }
.box-submenu .submenu-bg { position:absolute; left:-10000px; width:20000px; top:10px; height:calc(100% - 10px); background-color:#fff;box-shadow:0 4px 8px 0 rgba(32,89,134,0.2) inset,0 4px 8px 0 rgba(32,89,134,0.3); transition:all ease .4s;}
.box-submenu ul { position:relative;}
.box-submenu ul a,.box-submenu ul li { color:#505050!important;}
.box-submenu ul a:hover { color:#9D8E0E!important;}
.box-submenu ul li { margin-bottom:5px; white-space:nowrap; }
.box-submenu ul li a.active { color:#3872bc!important;}
.box-submenu ul ul { padding-left:20px; margin-top:5px; }
.box-submenu ul ul li { position:relative;}
.box-submenu ul ul li:before { content:""; position:absolute; left:-15px; height:1px; width:5px; top:10px; background-color:#505050;}

.box-menu > ul li:first-child .box-submenu { margin-left:0px;}


.box-searchbar { position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:#fff; z-index:2; display:none;}
.searchbar-group { float:left; width:100%; padding:47px 0;}
.searchbar-inner { float:left; width:calc(100% - 52px); margin-right:10px;}
.searchbar-filter { float:left; width:calc(30% - 10px); margin-right:10px;}
.searchbar-filter .bootstrap-select { min-width:0px; width:100%;}
.searchbar-filter .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width:100%;}
.searchbar-filter .bootstrap-select > .dropdown-toggle.bs-placeholder, .searchbar-filter .bootstrap-select > .dropdown-toggle.bs-placeholder:hover, .searchbar-filter .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .searchbar-filter .bootstrap-select > .dropdown-toggle.bs-placeholder:active { padding:7px 15px;}
.searchbar-filter .bootstrap-select>.dropdown-toggle { padding:7px 15px;}
.searchbar-filter .content-filter { margin-bottom:0px;}
.searchbar-search { float:left; width:70%;}
.searchbar-search input { float:left; width:calc(100% - 150px); margin-right:10px; padding:7px 30px; background-color:#f2f2f2;}
.searchbar-search button { width:140px; float:left;}
.searchbar-close { float:left; height:42px; width:42px; background-color:#000; padding:12px; border-radius:100%; cursor:pointer;}
.searchbar-close:hover {background: -webkit-linear-gradient(45deg, #51bbed, #2f2fe8);}
.searchbar-close svg { fill:#fff; width:100%;}
.form-style { border-radius:15px; border:none; padding:10px 30px; }
.form-style-border { border:2px solid #a3a3a3; border-radius:30px;}


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

.section-prefooter { float:left; width:100%; position:relative; padding:20px 0; box-shadow:0 0 20px 0 rgba(0,0,0,0.1); background-color:#fff;}
.ft-contact { float:left; width:100%; text-align:center;}
.ft-contact-img { width:120px; height:120px;background:linear-gradient(90deg, #51bbed, #2f2fe8); border-radius:100%; padding:10px; display:inline-block; margin-bottom:10px; }
.ft-contact-img svg { width:100%; fill:#fff;}
.ft-contact-txt { color:#3872bc; font-size:20px; line-height:1.3;}
.ft-contact:hover .ft-contact-txt { color:#9D8E0E;}
.ft-contact:hover .ft-contact-img { background:#9D8E0E; }


.section-footer { float:left; width:100%; position:relative; background-color:#3673BB; padding:40px 0px ;}
.footer-sitemap {float:left; width:100%; }
.footer-sitemap .row { margin-left:-8px; margin-right:-8px;}
.footer-sitemap .col { padding-left:8px; padding-right:8px;}
.footer-sitemap li { color:#fff; }
.footer-sitemap a { color:#fff; }
.footer-sitemap a:hover { color:#9D8E0E; }
.footer-title { color:#fff; margin-bottom:10px; font-size:18px; }
.footer-ul { font-size:14px; margin-bottom:20px;}
.footer-ul ul ul { padding-left:20px;}
.footer-ul ul ul li { position:relative;}
.footer-ul ul ul li:before { content:""; position:absolute; left:-15px; height:1px; width:5px; top:10px; background-color:#fff;}
.footer-address { color:#fff; margin-top:40px;}
.footer-address h2 { font-size:30px; font-weight:700;}

.section-partner { float:left; width:100%; position:relative; padding:30px 0; background-color:#fff;}
.footer-partner { float:left; width:100%; text-align:center;}
.footer-partner h2 { color:#3872bc; font-size:36px; margin-bottom:20px; font-weight:700;}
.group-partner { float:left; width:100%;}
.partner-list { width:20%; float:left; }
.partner-list a {}
.partner-list a img { width:200px;}


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

.section-banner { float:left; width:100%; position:relative; padding:0 0; margin-bottom: 20px;}
.box-banner { float:left; width:100%; border-radius:10px; 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 img { float:left;}
.banner-txt { position:absolute; top:50%; left:100px; transform:translateY(-50%);}
.banner-txt h2 { font-size:50px; float:left; font-weight:700;background: -webkit-linear-gradient(45deg, #51bbed, #2f2fe8);-webkit-background-clip: text;-webkit-text-fill-color: transparent; }
.banner-txt p { font-size:22px; color:#155d96; float:left; clear:both; margin-bottom:10px;}
.banner-txt .btn {}

.banner-textLeft .banner-txt { width:40%; text-align:left;}

.btn-play { width:100px; height:100px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; border-radius:100%; transition:all ease .4s;}
.btn-play:before { position:absolute; content:""; width:105px; height:105px; border:2px solid #fff;top:50%; left:50%; transform:translate(-50%,-50%); border-radius:100%;}
.btn-play:after { position:absolute; content:""; width:115px; height:115px; border:1px solid #fff;top:50%; left:50%; transform:translate(-50%,-50%); border-radius:100%;}
.banner-list:hover .btn-play { background-color:#ed1c24;}
.banner-video { position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:5; background:#000;}
.banner-video .video-container { height:100%; position:absolute;}
.banner-video:before { right:0; top:0; content:""; z-index:9; position:absolute; width: 0;height: 0;border-style: solid;border-width: 0 90px 90px 0;border-color: transparent #3872bc transparent transparent;}
.banner-closeVideo { position:absolute; right:20px; top:20px; width:50px; height:50px; cursor:pointer; z-index:10; background-color:#f7f5fa; display:flex; align-items:center; justify-content:center; border-radius:100%;}
.banner-closeVideo svg { fill:#084ea5; width:25px; height:25px; transition:all .4s ease;}
.banner-closeVideo:hover svg { transform:rotate(180deg);}

.banner-videoplay-icon { position:absolute; top:50%; left:50%; width:90px; transform:translate(-50%,-50%); }
.banner-videoplay-icon svg,.banner-videoplay-icon img { fill:#3872bc; width:100%;}


.media-video { position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:5; background:#000;}
.media-video .video-container { height:100%; position:absolute;}
.media-video:before { right:0; top:0; content:""; z-index:9; position:absolute; width: 0;height: 0;border-style: solid;border-width: 0 90px 90px 0;border-color: transparent #3872bc transparent transparent;}
.media-closeVideo { position:absolute; right:20px; top:20px; width:50px; height:50px; cursor:pointer; z-index:10; background-color:#f7f5fa; display:flex; align-items:center; justify-content:center; border-radius:100%;}
.media-closeVideo svg { fill:#084ea5; width:25px; height:25px; transition:all .4s ease;}
.media-closeVideo:hover svg { transform:rotate(180deg);}

.less700 .section-banner > .container { max-width:960px;}

/*
 |*******************************************************************************************
 | GLOBAL
 |*******************************************************************************************
*/


.box-body { float:left; width:100%; border-radius:10px; background-color:#fff; padding:40px 90px; }
.body-title { color:#3872bc; font-size:36px; margin-bottom:20px; font-weight:700;float: left;width: 100%;}
.btn-viewall { background-color:#fff; padding:15px 20px; border:2px solid #a8bdd2; position:absolute; left:50%; transform:translateX(-50%); bottom:-30px; border-radius:20px; z-index:2;}
.btn-viewall > span { display:flex; align-items:center;}
.btn-viewall > span span { color:#3872bc; font-size:20px; white-space: nowrap;}
.btn-viewall svg, .btn-viewall img { width:16px; fill:#3872bc; margin-left:10px; height:16px;}


.btn-back { background-color:#fff; padding:10px 20px; position:absolute; right:30px; top:-20px; border-radius:50px; z-index:2;}
.btn-back > span { display:flex; align-items:center;}
.btn-back > span span { color:#3872bc; font-size:16px; font-weight:600 }
.btn-back svg, .btn-back img { width:16px; fill:#3872bc; margin-left:10px; height:16px;}

.btn-more { width:100%; float:left}
.btn-more > span  { display:flex; justify-content: center }
.btn-more svg, .btn-more img { width:16px; fill:#ffffff; margin-left:10px; height:16px;}

.btn-pdf { width:auto; float:left}
.btn-pdf > span  { display:flex; justify-content: center }
.btn-pdf svg, .btn-pdf img { width:16px; height:22px; fill:#ffffff; margin-right:10px;}

.box-bodyinner { float:left; width:100%; border-radius:10px 10px 0 0; background-color:#fff; margin-top:30px; overflow:hidden;display:flex;}
.box-noradius { border-radius:none }
.thumb { float:left; width:100%; margin-bottom:30px;}
.thumb-icondate { float:left; width:100%;margin-bottom:10px;}
.thumb-icondate > div { display:flex; align-items:center;}
.thumb-icondate .thumb-icondate-icon { width:50px; height:50px; display:flex; align-items:center; justify-content:center; border-radius:100%; background:linear-gradient(90deg, #038bf8, #06babe); }
.thumb-icondate .thumb-icondate-icon svg,.thumb-icondate .thumb-icondate-icon img { fill:#fff; width:25px;}
.thumb-icondate .thumb-icondate-date { margin-left:10px; font-weight:700; font-size:24px;}
.thumb-txt { float:left; width:100%;font-size:14px; color:#3872bc; margin-bottom:10px; position:relative;}
.thumb-txt h4 { float:left; width:100%;}
.thumb-txt p { float:left; overflow: hidden; display: -webkit-box; -webkit-line-clamp:4; -webkit-box-orient: vertical;}
.thumb-img  { float:left; width:100%; position:relative;}
.thumb-img-border  { border: 1px solid #a8bdd2}
.thumb-img img { float:left; width:100%;}
.thumb-outside { padding-bottom:42px;}

.thumb-btn-outside { position:absolute; bottom:20px; left:0px; width:calc(100% - 30px); margin:0 15px; }
.thumb-btn-outside-100 { width:calc(100% - 0px); margin:0 0px;}
.thumb-date { font-size:18px; float:left; font-weight:700;line-height:1; margin-bottom:5px;}

.thumb-type-box {}
.thumb-type-box:before { content:""; position:absolute; width:calc(100% - 30px); height:calc(100% - 30px); border:1px solid #a8bdd2; background-color:#fff; left:15px; top:0}
.thumb-type-box .thumb-img  {border:1px solid #a8bdd2; border-bottom:none;}
.thumb-noborder:before{ border:none }
.thumb-noborder .thumb-img { border:none;}
.thumb-type-box .thumb-txt { padding:20px;}
.thumb-type-box .thumb-btn-outside { bottom:50px; width:calc(100% - 60px); margin:0 30px;}
.thumb-postlist { background-color:#fff; border:1px solid #ccc; padding:20px; position:relative;}
.thumb-postlist .thumb-txt h4 { color:#3872bc; font-size:16px; line-height:1.3; margin-bottom:5px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.thumb-postlist .thumb-txt p { color:#4b4b4b;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;}
.thumb-postlist .thumb-btn { position:absolute; bottom:-20px; left:20px;}

.thumb-horizon { float:left; width:100%; position:relative;}
.thumb-horizon .thumb-img { width:40%; float:left;}
.thumb-horizon .thumb-txt { width:calc(60% - 20px); float:left; margin-left:20px;}
.thumb-horizon .thumb-txt h4 { color:#3872bc; font-size:16px; margin-bottom:5px;}
.thumb-horizon .thumb-txt p { float:left; width:100%; color:#4b4b4b; margin-bottom:10px;}
.thumb-horizon .thumb-btn { float:left; clear:both;}


.body-sidebar { float:left; width:30%; padding-left:60px; padding-top:40px; padding-bottom:40px;}
.body-content { float:left; width:70%; padding-right:60px; padding-top:40px; padding-left:20px; padding-bottom:40px; background-color:#d9eeff; }



.box-sidebar .sidebar-title { font-size:30px; color:#3872bc; font-weight:700; margin-bottom:10px;}
.box-sidebar .sidebar-list li {padding:2px 0; position:relative;}
.box-sidebar .sidebar-list > ul > li { border-bottom:2px solid #d9eeff; padding-right:15px; }
.box-sidebar .sidebar-list ul li a {}
.box-sidebar .sidebar-list li > ul { padding-left:20px;}
.box-sidebar .sidebar-list li > ul li:before { content:""; position:absolute; left:-15px; height:1px; width:5px; top:14px; background-color:#000;}
.box-sidebar .sidebar-list li a.active { color:#3872bc;}
.body-content .content-title { font-size:28px; color:#3872bc; font-weight:700; margin-top:7px; margin-bottom:20px; padding-left:35px;}
.content-group { background-color:#fff; border-radius:10px; padding:15px; float:left; width:100%; position:relative}
.content-group-editor { padding:30px 35px}
.content-group .thumb:last-child { margin-bottom:0px;}
/*
 |*******************************************************************************************
 | HOME
 |*******************************************************************************************
*/
.section-projectstep { float:left; width:100%; float:left; background-color:#fff;text-align:center; padding:30px 0; margin-bottom:50px;}
.section-projectstep h2 { color:#3872bc; font-size:36px; margin-bottom:20px; font-weight:700;}
.projectstep-list { text-align:center; }
.projectstep-img { position:relative; display:inline-block; width: 100%;}
.projectstep-img img { float:left;width: 100%;}
.projectstep-img-num { position:absolute; width:40px; height:40px; background-color:#3872bc; border-radius:100%; bottom:-20px; left:50%; margin-left:-20px; display:flex; align-items:center; justify-content:center; color:#fff; z-index:1; }
.projectstep-img:hover .projectstep-img-hover { opacity:1;}
.projectstep-img:hover .projectstep-img-dafault { opacity:0; }
.projectstep-img-hover { opacity:0; position:absolute; top:0px; left:0;}
.projectstep-txt { text-align:center;}
.projectstep-txt p { text-align:left; display:inline-block; color:#3872bc;}


.swiper-button { width:60px; height:60px; background:linear-gradient(90deg, #038bf8, #11b9d7); border-radius:100%; display:flex; align-items:center; justify-content:center;transition:all ease .4s;}
.swiper-button svg { fill:#fff; height:30px; float:left;}
.swiper-button-next { right:20px; margin-top:-40px;}
.swiper-button-prev { left:20px; margin-top:-40px;}
.swiper-button:hover { background-color:#ed1c24;}
.swiper-pagination-bullet { width:18px; height:18px; background: #0000ac;}
.swiper-pagination-bullet-active { background:#fff;}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { display:none;}
.swiper-button:hover {background:linear-gradient(90deg, #51bbed, #2f2fe8);}

.swiper-button-outside.swiper-button-next {right: -75px;}
.swiper-button-outside.swiper-button-prev {left: -75px;}



.section-home-announce { background:url(../img/skin/bg-announce.png) right top no-repeat #fff; position:relative; padding-bottom:100px; margin-bottom:50px;}
.section-home-news { position:relative; padding-bottom:60px; margin-bottom:50px;float: left;width: 100%;}
.section-home-media { background:#fff; position:relative; margin-bottom:50px;}
.section-home-showcase { background:#fff; position:relative; margin-bottom:50px;}
.section-home-showcase .btn-viewall  { bottom:-2px;}
.section-home-showcase .body-title  { margin-bottom:-20px;}

.home-media { position:relative;float: left;width: 100%;margin-bottom: 50px;}
.home-media .body-title { position:absolute; top:20px; left:20px; z-index:5; color:#fff;  font-weight:700;}

.announce-list { height:auto}

.showcase-list {box-shadow:0 0 4px 0 rgba(32,89,134,0.5);}
.showcase-img { float:left; width:100%;}
.showcase-img img { float:left; width:100%;}
.showcase-space { background-color:#fff; position:relative; float:left; width:100%; padding:20px;}
.showcase-space a { width:100%; position:relative; top:-42px;}
.showcase-space a span { overflow: hidden;display: -webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical; width:auto;white-space:normal;}
.showcase-list.swiper-slide {}
.showcase-list.swiper-slide-active { transform:scale(1.3)!important; z-index:9!important;box-shadow:0 0 20px 0 rgba(32,89,134,0.5);}

.showcase_slide .swiper-container { padding:80px 4px;}
.swiper-container-3d .swiper-slide-shadow-left { background-image:linear-gradient(to left,rgba(0,0,0,.05),rgba(0,0,0,0))}
.swiper-container-3d .swiper-slide-shadow-right { background-image:linear-gradient(to right,rgba(0,0,0,.05),rgba(0,0,0,0))}

/*
 |*******************************************************************************************
 | CONTENT
 |*******************************************************************************************
*/
.content-header { width:100%; float:left; padding:0 15px; margin-bottom:15px}
.content-date { width:auto; max-width:50%; float:left; font-size: 18px; font-weight:600;}
.content-share { width:50%; float:right; margin-left:auto}
.content-share ul { float:left;}
.content-share ul li { width:30px; height:30px; border-radius:100%; float:left; margin:0 3px; }
.box-content { width:100%; float:left; margin-bottom:15px; color:#4b4b4b;}
.box-content h1 span,.box-content h2 span,.box-content h3 span,.box-content h4 span,.box-content h5 span,.box-content h6 span { color:#ed1c24;}
.box-content h1 { font-size:40px; line-height:1.4; color:#3872bc }
.box-content h2 { font-size:35px; line-height:1.4; color:#3872bc }
.box-content h3 { font-size:32px; line-height:1.4; color:#3872bc }
.box-content h4 { font-size:28px; line-height:1.4; color:#3872bc }
.box-content h5 { font-size:24px; line-height:1.4; color:#3872bc }
.box-content h6 { font-size:20px; line-height:1.4; color:#3872bc }
.box-content p { }
.box-content ul { list-style:outside; padding-left:20px;}
.content-filter { }
.content-filter .col { margin-bottom:10px;}

.tag-group { float:left; width:100%; margin-top:20px; border-top:1px solid #d9eeff; padding-top:20px;}
.tag-group ul { float:left; width:80%;}
.tag-list { float:left; margin-right:10px;}
.tag-list a {padding:5px 10px 4px; font-size:12px; border:2px solid #3872bc; border-radius:20px; float:left;}
.tag-list a:hover { background-color:#3872bc; color:#fff;}

.tag-group .page-view { float:right; padding:7px 0px 6px; font-size:12px;}

.media-img { float:left; width:100%; position:relative;}
.media-img img.media-color { position:absolute; top:0px; left:0; width:100%; height:100%; opacity:0.2; z-index:1;}
.media-img img.media-blue { float:left; width:100%;-webkit-filter:grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-180deg) saturate(450%) contrast(0.8); filter:grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-180deg) saturate(450%) contrast(0.8);}
.media-txt { position:absolute; bottom:20px; left:20px; color:#fff;}
.media-txt { width:calc(100% - 40px); }
.media-txt h2 { font-size:35px; line-height:1.45; font-weight:700;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.media-txt p { font-size:22px; font-weight:700;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.media-icon { }
.media-icon svg ,.media-icon img { margin-top:10px; float:left; fill:#fff; width:80px; transition:all ease .4s; }
.media-list:hover .media-icon svg { transform:scale(1.1);}

.thumb-video  { float:left; width:100%; position:relative; margin-bottom:20px;}
.thumb-video .media-list { float:left; width:100%; position:relative; cursor:pointer;}
.thumb-video .media-txt { width:calc(100% - 30px);}
.thumb-video .media-txt h2 { font-size:32px; padding-right:70px;}
.thumb-video .media-txt p { font-size:16px; padding-right:70px;}
.thumb-video .media-icon svg, .media-icon img { width:50px;}
.thumb-video .media-icon { position:absolute; right:15px; bottom:0px;}
.thumb-video:hover .media-img img { -webkit-filter:grayscale(0%) brightness(60%) sepia(0%) hue-rotate(0deg) saturate(100%) contrast(1.2); filter:grayscale(0%) brightness(60%) sepia(0%) hue-rotate(0deg) saturate(100%) contrast(1.2);}

.search-content .thumb-video .media-txt { left:10px; bottom:10px; width:calc(100% - 20px);}
.search-content .thumb-video .media-txt h2 { font-size:16px;}
.search-content .thumb-video .media-txt p { font-size:11px;}
.search-content .thumb-video .media-icon { right:0px;}
/*
 |*******************************************************************************************
 | SEARCH
 |*******************************************************************************************
*/
.box-search { float: left; width: 100%; background-color: #fff; }
.body-content-search { float:left; width:100%; padding:20px; }
.search-result { float:left; width:100%; text-align:center; color:#3872bc; font-size: 20px; font-weight:600;}
.search-group{ float:left; width:100%}
.search-title { float:left; width:100%; padding:20px 30px }
.search-title button,.search-title a { background:none; border:none; text-align:right; float:right; margin-left:auto; padding:0px;color:#3872bc; font-size: 18px; font-weight:600; text-decoration:underline; cursor:pointer;}
.search-title button:focus { box-shadow:none; outline:0;}
.search-title h2{ float:left; width:80%; margin-bottom:0}
.search-title p{ float:right; width:20%; margin-bottom:0; color:#3872bc; font-size: 18px; font-weight:600; }
.search-content{ float:left; width:100%; position:relative}


/*
 |*******************************************************************************************
 | CONTACT
 |*******************************************************************************************
*/
.box-contact { width:100%; float:left; padding:60px 60px 0 60px; font-weight:600; color:#3872bc; }
.box-contact .title-contact { font-size:36px; font-weight:700; }
.box-contact-address h2{ font-size:36px;font-weight:700;}
.box-contact-address p{ font-size:20px; width:57%; }
.box-contact-address { width:100%; float:left;}
.box-contact-address li {   font-size: 22px; color:#505050; line-height:1.2 }
.contact-address-group { display:flex; align-items:flex-end}
.contact-address { width:70%; float:left;}
.contact-iconlink { width:30%;}
.contact-iconlink .ft-contact { float:left; width:50%;}

.box-contact-blue { width:100%; float:left; background-color:#cce9ff; margin-top:40px; border-radius:10px 10px 0 0; padding:30px 30px}
.contact-topic { float:left; width:100%;margin-bottom:40px;}
.contact-topic h2{ font-size:30px; margin-bottom:20px;font-weight:700;}
.contact-topic p{ font-size:18px; }
.contact-info { float:left; width:calc(60% - 30px); margin-right:30px; float:right;}
.contact-info h3 {font-size:24px; color:#4d4f51; }
.contact-info p {color:#4d4f51;}
.contact-info ul{ margin: 0; padding: 0; }
.contact-info ul li { width:100%; float:left; border:1px solid #9bb1c2;}
.contact-info ul li:first-child { padding:20px 40px; background-color:#a4c6e2  }
.contact-info ul li:nth-of-type(2) { background-color:#c2e6f6 ; padding:10px 20px }

.contact-form { float:left; width:40%; float:right;}
.form-group .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width:100%;}
.form-group .bootstrap-select>.dropdown-toggle,.btn-light:not(:disabled):not(.disabled).active,.form-group  .btn-light:not(:disabled):not(.disabled):active,.form-group .show>.btn-light.dropdown-toggle { border:none;border-radius:15px;padding-left:30px;}

.dropdown > .dropdown-menu.show { max-height:300px!important;min-width: 0px!important; width:100%!important;transform:translate3d(0px, 48px, 0px)!important; overflow: hidden; top:0px!important}

.form-group .bootstrap-select>.dropdown-toggle { color:#495057!important;}
.form-group .dropdown-menu {}
.contact-box-img{ width:15%; padding-right:15px ;float:left}
.contact-box-text{ width:85%; float:left}
.contact-box-text p{ margin-bottom:0; line-height:1.5; font-size:16px}
.contact-box-text span.blue-circle { color:#FFF; z-index:0; position:relative; margin:0 10px}
.contact-box-text span.blue-circle:before { content:"";width:30px;height:30px;position:absolute;background-color:#1d6fb8; bottom:50%; left:50%; transform:translate(-50%,50%); border-radius:100% }
.blue-circle span { color:#fff; z-index:0; position:relative }
.contact-info ul li:last-child {  background-color:#e4f1f9;}


.contact-form {}








@media (max-width: 1199.98px){
	body {font-family: 'Sukhumvit Sets';}

	.box-title h1 { font-size:50px;}
	.box-title p { font-size:15px;}

	.swiper-button { width:50px; height:50px; margin-top:-25px;}
	.swiper-button svg { height:25px;}
	.swiper-button-outside.swiper-button-next { right:-65px;}
	.swiper-button-outside.swiper-button-prev { left:-65px;}

	/*
	 |*******************************************************************************************
	 | HEADER
	 |*******************************************************************************************
	*/
	.box-logo { margin-right:0px; }
	.box-logo a .logo-text { font-size:18px;}
	.box-logo a .logo-text span { font-size:16px;}
	.box-menu ul li { padding:0 15px;}

	.box-menu-second { font-size:14px;}
	.box-menu-second ul li { margin-left:10px;}
	.box-menu-second .btn { font-size:14px; padding-left:20px; padding-right:20px;}

	.box-submenu { margin-left:0px;}
	.box-submenu ul li { padding:0px; float:left; width:100%;}


	/*
	 |*******************************************************************************************
	 | SEARCH
	 |*******************************************************************************************
	*/
	.search-title { padding:20px 20px;}
	.search-title h2 { font-size:28px;}

	/*
	 |*******************************************************************************************
	 | HOME
	 |*******************************************************************************************
	*/
	.projectstep-img { position:relative;}
	.projectstep-img-hover { left:0px;}
	.projectstep-txt p { font-size:15px;}
	.box-body { padding:40px 40px;}

	.media-txt h2 { font-size:30px;}
	.thumb-video .media-txt h2 { font-size:30px;}
	/*
	 |*******************************************************************************************
	 | BANNER
	 |*******************************************************************************************
	*/
	.banner-txt p { font-size:20px;}
	/*.box-banner .swiper-button-next { right:-20px;}
	.box-banner .swiper-button-prev { left:-20px;}*/
	/*
	 |*******************************************************************************************
	 | LIST PAGE
	 |*******************************************************************************************
	*/

	.body-sidebar { padding-left:30px;}
	.body-content { padding-right:30px;}

	/*
	 |*******************************************************************************************
	 | CONTACT
	 |*******************************************************************************************
	*/
	.box-contact-address h2 { font-size:32px;}
	.box-contact-address p { font-size:16px;}
	.box-contact-address li { font-size:16px; margin-bottom:5px;}
	.contact-iconlink .ft-contact-img { width:100px; height:100px;}
	.contact-iconlink .ft-contact-txt { font-size:16px;}
	.contact-info h3 { font-size:18px;}
	.contact-info p { font-size:14px;}
}

@media (max-width: 991.98px) {
	.wrapper { margin-top:143px;}


	/*
	 |*******************************************************************************************
	 | GOLBAL
	 |*******************************************************************************************
	*/
	.box-title h1 { font-size:40px;}
	.box-title p { font-size:14px;}

	.swiper-button { width:40px; height:40px; margin-top:-20px; }
	.swiper-button svg { height:20px;}

	.thumb-type-box .thumb-btn-outside { padding-left:20px; padding-right:20px; }

	/*
	 |*******************************************************************************************
	 | POPUP
	 |*******************************************************************************************
	*/
	.popup-container {width:90%; margin-left:0px; left:5%;}
	.popup-video .popup-container { width:90%; margin-left:0px; left:5%;}
	.popup-event .popup-container { padding:10px;}
	.popup-event .popup-container .popup-body { margin-bottom:10px;}
	/*
	 |*******************************************************************************************
	 | HEADER
	 |*******************************************************************************************
	*/
	.box-menu-second ul li:nth-of-type(3) { clear:both;}
	.box-menu ul  { margin-left:0px; margin-right:0px; float:left; font-size:14px;}
	.box-menu ul li { padding:0 10px;}
	.box-submenu ul li { padding:0px;}
	.section-projectstep > .container { max-width:100%;}
	.section-projectstep > .container > .row { margin-left:-8px; margin-right:-8px; }
	.section-projectstep > .container > .row > .col-6 { padding-left:8px; padding-right:8px;}
	.projectstep-txt p { font-size:13px;}

	.box-searchbar > .container { max-width:none;}
	.searchbar-group { padding:17px 0;}
	.searchbar-search button { width:120px;}
	.searchbar-filter { width:calc(39% - 10px);}
	.searchbar-search { width:61%;}
	.searchbar-search input { width:calc(100% - 130px);}
	/*
	 |*******************************************************************************************
	 | BANNER
	 |*******************************************************************************************
	*/
	.banner-textLeft .banner-txt { left:80px;}


	/*
	 |*******************************************************************************************
	 | HOME
	 |*******************************************************************************************
	*/
	.media-txt h2 { font-size:32px;}
	.media-txt p { font-size:16px;}

	.section-home-showcase .btn-viewall {bottom: 14px;}
	.showcase-space a { padding-left:20px; padding-right:20px;}
	.showcase-space a span { overflow: hidden;display: -webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical; width:auto;white-space:normal;}

	.media-txt  { width:calc(100% - 30px);}
	.media-txt h2 { font-size:24px;}
	.thumb-video .media-txt h2 { font-size:24px;}
	/*
	 |*******************************************************************************************
	 | SEARCH
	 |*******************************************************************************************
	*/
	.search-title h2 { width:75px;}
	.search-title button, .search-title a { font-size:12px;}
	.search-content .thumb-video .media-txt p { font-size:13px;}
	/*
	 |*******************************************************************************************
	 | FOOTER
	 |*******************************************************************************************
	*/
	.partner-list a img { width:150px;}

	/*
	 |*******************************************************************************************
	 | LIST PAGE
	 |*******************************************************************************************
	*/
	.box-sidebar .sidebar-list > ul > li { font-size:14px;}
	.box-sidebar .sidebar-title { font-size:30px;}
	.body-content .content-title { margin-top:2px;}

	/*
	 |*******************************************************************************************
	 | CONTACT
	 |*******************************************************************************************
	*/
	.contact-address { width:60%;}
	.contact-iconlink { width:40%;}
	.contact-iconlink .ft-contact-img { width:80px; height:80px; padding:5px;}

	.contact-form { width:100%;}
	.contact-info { width:100%; margin-right:0px; margin-top:30px;}
	.box-contact-address p { width:100%;}


}
@media (max-width: 767.98px) {


	body { font-weight:600;}
	.container {}
	.container-ct { width:100%;}
	.container-960 { width:100%;}
	.container-800 { width:100%;}

	.wrapper { margin-top:75px;}

	/*
	 |*******************************************************************************************
	 | POPUP
	 |*******************************************************************************************
	*/
	.popup-container:before {border-width: 0 60px 60px 0;}
	.popup-close svg { width:12px; height: 12px;}
	.popup-close { width:30px; height:30px;right:15px;top:15px;}
	/*
	 |*******************************************************************************************
	 | HEADER
	 |*******************************************************************************************
	*/

	.btn-menu { display:block;}
	.btn-menu { left:15px; top:30px;}
	.head-row { text-align:center;}
	.box-logo { display:inline-block; float:none; padding:10px 0;}
	.box-logo a .logo-text { text-align:left; line-height:1.3; font-size:14px; margin-left:10px;}
	.box-logo a .logo-image { width:62px;position: relative;top: -6px;}
	.box-logo a .logo-text span { font-size:14px;}
	.section-header { padding-top:0px;}

	.btn-search-mobile { display:block; position:absolute; right:15px; top:22px;}
	.btn-search-mobile svg { fill:#3b3b3b;}

	.menu-on-mobile { position:fixed; top:0px; left:0px; width:100%; background-color:#fff; display:none; }
	.main-menu { display:block;}
	.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%; background-color:#e4f3ff; text-align:left; padding:0px;}
	.box-menu ul {font-size:16px;}
	.box-menu > ul { float:left; width:100%; }
	.box-menu > ul > li { float:left; width:100%; padding:10px 30px; border-bottom:2px solid #b8d2ed;}
	.box-menu > ul > li:first-child { padding-left:30px;}
	.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:24px;}
	.box-menu > ul > li > a:after { content:""; position:absolute; transform:rotate(90deg); right:20px; top:18px; width:20px; height:20px; background:url(../img/skin/icon-arrow-down-blue.svg) no-repeat center center; transition:all ease .4s;}
	.box-menu > ul > li > a.no-sub:after { display:none;}
	.box-menu > ul > li > a.active:after { transform:rotate(0deg);}
	.box-submenu { position:relative; top:0px; left:0px; display:none; float:left; width:100%; background:none; padding:10px 0; min-height:0;}
	.box-submenu .submenu-bg { display:none;}
	.box-submenu ul { width:100%;}

	.box-tools { margin-left:0px; width:100%; text-align:center; padding:20px 0;}
	.box-tools ul { float:none; display:inline-block;}
	.box-tools ul li.tools-call  { width:auto; height:auto; margin-right:30px;}
	.toolscall-icon { width:30px; height:30px; border-radius:100%;background: linear-gradient(90deg, #51bbed, #2f2fe8); padding:3px; margin-right:10px;}
	.toolscall-icon svg { fill:#fff; }
	.toolscall-text { color:#3872bc;}
	.tools-call a { display:flex; align-items:center;}

	/*
	 |*******************************************************************************************
	 | SEARCH
	 |*******************************************************************************************
	*/
	.search-title h2 { font-size:24px;}
	.search-content .thumb-noborder:before{ border:1px solid #a8bdd2}
	/*
	 |*******************************************************************************************
	 | BANNER
	 |*******************************************************************************************
	*/
	.box-banner { background-color:#ffffff}
	.banner-img { float:left; width:100%;}
	.banner-textLeft .banner-txt { width:100%; position:relative; left:0; top:0px; transform:translateY(0); float:left; width:100%; padding:20px 40px 40px; text-align:center; }
	.banner-textLeft .banner-txt span { display:inline-block; width:80%;}
	.banner-txt h2 {}
	.banner-txt p { text-align:left;}
	.banner-txt .banner-btn { text-align:center; width:100%;}
	.btn-viewall {  bottom:-30px}
	.box-body{ padding :40px }
	.section-banner > .container { padding-left:0; padding-right:0}
	.section-banner > .container > .box-banner { border-radius:0}
	.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { border:2px solid #0000ac; opacity:0.2;}
	.box-banner .swiper-button { top:auto; bottom:10px; margin-top:0px;}


	/*
	 |*******************************************************************************************
	 | HOME
	 |*******************************************************************************************
	*/
	.section-projectstep > .container { max-width:540px;}
	.projectstep-list { margin-bottom:30px;}
	.projectstep-img-hover { opacity:1;}
	.projectstep-img-default { opacity:0;}

	.media-icon svg, .media-icon img { width:30px;}
	.media-txt h2 { font-size:22px;}
	.media-txt p { font-size:16px;}

	.thumb-video .media-txt h2 { font-size:20px;}
	.thumb-video .media-txt p { font-size:14px;}

	.showcase-list.swiper-slide-active { transform:scale(1.3)!important;}
	.showcase-list.swiper-slide { width:60%;}
	.showcase_slide { }
	.showcase_slide .swiper-container { overflow:visible;}

	.showcase_slide-inner { position:relative; overflow:hidden;}

	.section-home-announce { background:url(../img/skin/bg-announce-m.jpg) bottom center no-repeat; background-size:100%;}
	.section-home-news { background:url(../img/skin/bg-news-m.jpg) top center no-repeat; background-size:100%;}
	/*
	 |*******************************************************************************************
	 | FOOTER
	 |*******************************************************************************************
	*/
	.ft-contact { margin-top:10px; margin-bottom:10px;}
	.ft-contact-img { width:100px; height:100px; padding:5px;}
	.footer-address h2 { font-size:24px; margin-bottom:5px;}

	.footer-ul { display:none; margin-top:10px;}
	.footer-title { border-bottom:1px solid rgba(255,255,255,0.2); margin-bottom:0px; padding:5px 0;}
	.footer-toggle:before { position:absolute; content:""; width:16px; height:16px; right:0px; top:0px; background:url(../img/skin/icon-arrow-down-white.svg) center center no-repeat; background-size:100%;right: 10px;top: 10px; transform:rotate(90deg); transition:all ease .4s;}
	.footer-toggle.active:before { transform:rotate(0);}
	/*
	 |*******************************************************************************************
	 | LIST PAGE
	 |*******************************************************************************************
	*/
	.body-sidebar { width:100%; background-color: #d9eeff; padding:20px; padding-left:35px;}
	.box-sidebar .sidebar-title { margin-bottom:0px; font-size:32px;}
	.sidebar-list { display:none;}
	.body-content { width:100%; background-color:#fff; padding:20px;}
	.body-content .content-title { margin-bottom:0px; padding-left:15px;}

	/*
	 |*******************************************************************************************
	 | PAGE DETAIL
	 |*******************************************************************************************
	*/
	.box-bodyinner { display:block;}
	.content-group-editor { padding:15px;}
	.content-group-editor .btn-back { right:0px; top:-35px;}

	/*
	 |*******************************************************************************************
	 | PAGE DETAIL
	 |*******************************************************************************************
	*/
	.contact-address-group { display:block;}
	.contact-address { width:100%; }
	.contact-iconlink { width:100%; float:left; margin-top:30px;}
}
@media (max-width: 575.98px)  {


	.swiper-button { width:30px; height:30px;}
	.swiper-button svg { height:12px;}
	.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { opacity:1; border:2px solid #3c70b9;}
	.swiper-pagination-bullet {  background: #3c70b9;}
	.swiper-pagination-bullet-active  {  background: #fff;}

	.body-title { text-align:center; font-size:28px;}

	.swiper-button-outside.swiper-button-next { right:15px; }
	.swiper-button-outside.swiper-button-prev { left:15px; }
	/*.thumb-outside { padding-bottom:0px; margin-bottom:0px;}
	.thumb-btn-outside { position:relative; bottom:0px; width:auto;}
	.thumb-type-box .thumb-btn-outside { width:auto; bottom:0px;}*/

	.thumb-horizon { border:1px solid #a8bdd2;}
	.thumb-horizon .thumb-img { width:100%;}
	.thumb-horizon .thumb-txt { width:100%; margin-left:0px; padding:20px 20px 15px; }
	/*
	 |*******************************************************************************************
	 | HEADER
	 |*******************************************************************************************
	*/

	.main-menu .menu-second-btn { float:left; width:100%; padding:5px 0;}
	.main-menu .menu-second-btn:nth-of-type(1) { margin-top:5px;}
	.main-menu .menu-second-btn:nth-of-type(2) { margin-bottom:5px;}

	/*
	 |*******************************************************************************************
	 | SEARCH
	 |*******************************************************************************************
	*/

	.box-searchbar { position:fixed; width:100%; height:100%;}
	.box-searchbar > .container { position:absolute; width:100%; height:100%; display:flex; align-items:center;}
	.searchbar-inner { width:100%; margin-right:0px;}
	.searchbar-filter { width:100%; margin-right:0px; margin-bottom:20px;}
	.searchbar-search { width:100%;}
	.searchbar-close { position:fixed; top:15px; right:15px;}
	.searchbar-search input { width:100%;  margin-right:0px; margin-bottom:20px;}
	.searchbar-search button { width:100%;}

	.box-search { margin-left:-15px; width:calc(100% + 30px);}
	.body-content-search {}
	.search-title  { padding-left:0px; padding-right:0px;}
	.search-title h2 { text-align:left; width:69%;}
	.search-title p { width:25%;}
	/*
	 |*******************************************************************************************
	 | BANNER
	 |*******************************************************************************************
	*/
	.section-banner { padding:15px 0;}
	.box-banner .swiper-button { bottom:13px;}
	.banner-textLeft .banner-txt { padding:20px 20px 40px;}
	.banner-textLeft .banner-txt span { width:100%;}

	.thumb-btn-outside-100 { width:auto;}
	.thumb-type-box .thumb-btn-outside{ width:auto; padding-left:40px; padding-right:40px;}
	/*
	 |*******************************************************************************************
	 | HOME
	 |*******************************************************************************************
	*/
	.section-projectstep h2 { font-size:26px;}
	.projectstep-img { width:75%;}
	.projectstep-txt p { font-size:14px;}
	.projectstep-list  { margin-bottom:20px;}

	.section-home-announce { width:calc(100% + 30px); margin-left:-15px; border-radius:0px; padding:40px 20px;}
	.announce_slide .swiper-wrapper { display:block;}
	.announce_slide .swiper-wrapper .swiper-slide { display:block; float:left;}
	.announce-list { margin-bottom:30px;}
	.announce_slide .swiper-button { display:none;}


	.section-home-news { width:calc(100% + 30px); margin-left:-15px; border-radius:0px; padding:40px 20px;}

	.section-home-media { width:calc(100% + 30px); margin-left:-15px; border-radius:0px; padding:20px 0px 60px;}
	.section-home-media .body-title { margin-bottom:10px; }
	.section-home-media .swiper-button-outside.swiper-button-next {right: 15px;bottom: -75px;top: auto;margin-top: 0px;}
	.section-home-media .swiper-button-outside.swiper-button-prev {left: 15px;bottom: -75px;top: auto;margin-top: 0px;}



	.section-home-showcase { width:calc(100% + 30px); margin-left:-15px; border-radius:0px; padding:40px 0 0;}
	.section-home-showcase .swiper-button-outside.swiper-button-next {right: 15px;bottom: 18px;top: auto;margin-top: 0px;}
	.section-home-showcase .swiper-button-outside.swiper-button-prev {left: 15px;bottom: 18px;top: auto;margin-top: 0px;}
	.section-home-showcase .btn-viewall { bottom:0px; position:relative; display:inline-block;}
	.showcase_slide .swiper-container { padding:60px 0px;}
	.showcase-space { height:50px;}
	.section-home-showcase .body-title { margin-bottom:-10px;}


	/*
	 |*******************************************************************************************
	 | FOOTER
	 |*******************************************************************************************
	*/
	.ft-contact-img { width:80px; height:80px;}
	.footer-partner h2 { font-size:26px;}
	.group-partner { text-align:center;}
	.partner-list { width:50%; float:left; display:inline-block; margin:10px 0;}
	.partner-list:last-child { float:none;}

	/*
	 |*******************************************************************************************
	 | LIST PAGE
	 |*******************************************************************************************
	*/
	.box-bodyinner { margin-left:-15px; width:calc(100% + 30px); border-radius:0px;}
	.box-sidebar .sidebar-title { font-size:26px;}
	.body-sidebar { padding-left:20px;}
	.body-content .content-title { font-size:20px; padding-left:0px;}
	.content-group { padding-left:0px; padding-right:0px;}

	/*
	 |*******************************************************************************************
	 | PAGE DETIAL
	 |*******************************************************************************************
	*/
	.content-group-editor .btn-back { right:-15px;}

	.thumb-video .media-txt { left:10px; bottom:10px; width:calc(100% - 20px)}
	.thumb-video .media-icon { right:0px;}
	.thumb-video .media-txt h2 { font-size:20px;padding-right:0px;}
	.thumb-video .media-txt p { font-size:14px;}
	.media-txt h2 { font-size:20px; width:80%;}
	.media-txt p { font-size:14px;}
	.media-txt  { width:calc(100% - 40px);}
	.media-txt p { width:100%; padding-right:70px;}
	.media-icon {position: absolute;right:0px;bottom: auto;top: -5px;}
	.media-icon svg, .media-icon img { width:50px; fill:#3872bc;}

	/*
	 |*******************************************************************************************
	 | PAGE DETIAL
	 |*******************************************************************************************
	*/
	.box-contact { padding:20px;}
	.box-contact-address h2 { font-size:24px;}
	.box-contact-address p { margin-bottom:20px!important;}
	.contact-iconlink { text-align:center;}
	.contact-iconlink .ft-contact { width:auto; display:inline-block; float:none; padding:0 20px;}
	.contact-topic p br { display:none; }

	.box-contact-blue { padding:30px 20px;}
}
@media screen and (max-width: 480px) {

}
@media screen and (max-width: 400px) {

}
@media screen and (max-width: 360px) {

}
@media screen and (max-width: 320px) {

}