@charset "UTF-8";
/* CSS Document */
@font-face {
    font-family: 'cloudbold';
    src: url('fonts/cloud-bold.eot');
    src: url('fonts/cloud-boldd41d.eot?#iefix') format('embedded-opentype'),
         url('fonts/cloud-bold.woff2') format('woff2'),
         url('fonts/cloud-bold.woff') format('woff'),
         url('fonts/cloud-bold.ttf') format('truetype'),
         url('fonts/cloud-bold.svg#cloudbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'cloud';
    src: url('fonts/cloud-light.eot');
    src: url('fonts/cloud-lightd41d.eot?#iefix') format('embedded-opentype'),
         url('fonts/cloud-light.woff2') format('woff2'),
         url('fonts/cloud-light.woff') format('woff'),
         url('fonts/cloud-light.ttf') format('truetype'),
         url('fonts/cloud-light.svg#cloud_lightlight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'cs_chatthai';
    src: url('fonts/cschatthaiui.eot');
    src: url('fonts/cschatthaiuid41d.eot?#iefix') format('embedded-opentype'),
         url('fonts/cschatthaiui.woff2') format('woff2'),
         url('fonts/cschatthaiui.woff') format('woff'),
         url('fonts/cschatthaiui.ttf') format('truetype'),
         url('fonts/cschatthaiui.svg#cs_chatthaiuiregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Resets */
a {
    color: #0383d8;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

* ,
* :after,
* :before {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

* {
    outline: none;
}
header, nav, section, article, aside, footer {
    display: block;
}
iframe {
    max-width: 100%;
    border: none;
}

html, body {margin: 0;padding: 0;color: #333;font-family: 'cs_chatthai', Arial, Helvetica, sans-serif;font-size: 16px;line-height: 125%;}
.container{margin:0 auto;box-sizing: border-box; padding:0 2%; width:1170px;}
.row{width:100%; float:left; padding:50px 0;}
.center{text-align:center;}
.wh{color:#FFF;}
.blue{color:#2E64FE;}
.red{color:#C00;}
.bg_blue{background:#0578da;}
.bg_gold{background:#F5ECCE;}
.bg_gray{background:#eef1f3;}
img{width:auto; max-width:100%;}
.col3{width:33.33%; padding:2%; float:left;}
.col4{width:25%; padding:2%; float:left;}
.special{font-size:24px;font-family:'cloud',Arial, Helvetica, sans-serif; line-height:130%;}

h1{font-size:44px;font-family:'cloudbold',Arial, Helvetica, sans-serif; line-height:130%; margin:0 0 30px 0; padding:0 0 5px 0; font-weight:normal; color:#046ed0; border-bottom:#0d8adb solid 4px; width:100%;}
h2{font-size:34px;font-family:'cloudbold',Arial, Helvetica, sans-serif; line-height:130%; margin:0 0 20px 0; padding:0; font-weight:normal; color:#046ed0;}
h3{font-size:28px;font-family:'cloudbold',Arial, Helvetica, sans-serif; line-height:130%; margin:0 0 20px 0; padding:0; font-weight:normal; color:#046ed0;}

header{float:left; width:100%; background:#FFF;}
header .logodragon{float:left; margin:10px 20px 10px 0;} header .logodragon img{border:none;}
header .logo {background:#0074c0; display:block; float:right; padding:10px 20px; margin:10px 0 10px 0; text-decoration:none; -ms-transition:all .18s ease-in-out; -moz-transition:all .18s ease-in-out; -webkit-transition:all .18s ease-in-out; transition:all .18s ease-in-out;}
header .logo h1{float:left; margin:0; padding:0; color:#FFF; font-family:'cloudbold',Arial, Helvetica, sans-serif; font-size:22px; font-weight:normal; border:none; line-height:100%;}
header .logo:hover {background:#FFF;} header .logo:hover h1{color:#0074c0;}
header .right{float:right; margin:15px 0 0 0; font-size:18px; font-family:'cloud',Arial, Helvetica, sans-serif; color:#0068ac; text-align:right; line-height:140%;}
header .right .slogan{clear:both; font-weight:bold; clear:both;}
header .right .call{font-size:26px; font-weight:bold;}



/* ––––––––––––––––––––––––––––––––––––––––––––––––––
megamenu.js STYLE STARTS HERE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.menu-container {
	float:left;
    width: 100%;
    margin: 0 auto;
    background:#28B463;
 -webkit-box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow:    0px 2px 5px 0px rgba(50, 50, 50, 0.25);
box-shadow:         0px 2px 5px 0px rgba(50, 50, 50, 0.25);
}

.menu-mobile {
    display: none;
    padding: 14px;
}
.menu-mobile{color:#FFF;font-family: 'cloud', sans-serif; font-size:22px; font-weight:bold; text-decoration:none;}
.menu-mobile:after {
    content: "\f394";
    font-family: "Ionicons";
    font-size: 2rem;
    padding: 0;
    float: right;
    position: relative;
    top: 55%;
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);
}

.menu-dropdown-icon:before {
    content: "\f489";
    font-family: "Ionicons"; font-weight:bold;
    display: none;
    cursor: pointer;
    float: right;
    padding: 1.1em 1.8em;
    background: #0997d2;
    color:#FFF;
}

.menu > ul {
    margin: 0 auto;
    width: 100%;
    list-style: none;
    padding: 0;
    position: relative;
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
    box-sizing: border-box;
}

.menu > ul:before,
.menu > ul:after {
    content: "";
    display: table;
}

.menu > ul:after {
    clear: both;
}

.menu > ul > li {
    float: left;border:#e1f3ff solid 1px;
    background:#ABEBC6;
    padding: 0; -ms-transition:all .18s ease-in-out; -moz-transition:all .18s ease-in-out; -webkit-transition:all .18s ease-in-out; transition:all .18s ease-in-out;
    margin: 6px 10px 6px 0;
}
.menu > ul > li.first{border-left:#e1f3ff solid 1px;}
.menu > ul > li a {
    text-decoration: none;
    padding: .4em 1.5em; font-family: 'cloud', sans-serif;
    display: block; color:#3A01DF; font-size:18px; text-transform:uppercase; font-weight:bold;
}
.menu > ul > li:hover{background:#FFF;}
.menu > ul > li:hover a{
	color:#3A01DF;
}

.menu > ul > li > ul {
    display: none;
    width: 100%;
    background: #0068ac; border:#e1f3ff;
    padding: 0;
    position: absolute;
    z-index: 99;
    left: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow:    0px 5px 5px 0px rgba(50, 50, 50, 0.25);
box-shadow:         0px 5px 5px 0px rgba(50, 50, 50, 0.25);
}

.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li {
    margin:0; padding:0;
    list-style: none;
    width: 25%;
    background: none;
    float: left;
}

.menu > ul > li > ul > li a {
    color: #3A01DF; font-size:18px;
    padding: 0; margin:0;
    width: 100%;
    display: block;
}
.menu > ul > li:hover > ul > li a {
    color: #ABEBC6;
}
.menu > ul > li > ul > li:hover{background:#0068ac;}
.menu > ul > li > ul > li a:hover{color:#FFF;}
.menu > ul > li > ul > li > ul {
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul > li > ul:after {
    clear: both;
}


.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul > li > ul > li {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: .8em;
}

.menu > ul > li > ul > li > ul > li a {
    border: 0;
}

.menu > ul > li > ul.normal-sub {
    width: 260px;
    left: auto;
    padding: 0;
}

.menu > ul > li > ul.normal-sub > li {
    width: 100%;
}

.menu > ul > li > ul.normal-sub > li a {
    border: 0; border-bottom:#DDD solid 1px;
    padding: 10px 20px;
}

.productslogo{width:100%; padding:2%; background:#FFF; display:block; -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.55);-moz-box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.55);box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.55); -ms-transition:all .18s ease-in-out; -moz-transition:all .18s ease-in-out; -webkit-transition:all .18s ease-in-out; transition:all .18s ease-in-out;}
.productslogo:hover{transform: scale(1.05); position: relative;-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);-moz-box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.75);box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.75);}
.productslogo img{border:none;}

.iTable{  
    display:table;
    width:100%;  
    margin:auto;  
    border-collapse:collapse;  
}  
.iCaption{  
    display:table-caption; 
    caption-side:top;  
    text-align:center;  
}  
.iRow{
    display:table-row;
}  
.iTd{  
    display:table-cell;
	border-bottom:1px solid #DDD;  
    padding:8px 8px; vertical-align:middle;
}
.iTd h4{padding:0; margin:0;}

.leftnav{width:20%; float:left; padding:0 20px 0 0; border-right:#CCC solid 1px;}
.mainnav{width:80%; float:left; padding:0 0 0 20px;}

.leftnav ul{margin:0; padding:0; list-style:none; width:100%;}
.leftnav ul li{margin:0; padding:0; border-bottom:#CCC dashed 1px; width:100%;}
.leftnav ul li a{display:block; margin:0; padding:7px 0; width:100%;}

.wraperproduct{width:100%; float:left; padding:0 0 30px 0; margin:0 0 30px 0; border-bottom:#CCC solid 1px;}
.wraperproduct .mainimg{text-align:center; margin:0 auto 20px auto; border:none;}

.portbox{width:100%; height:320px; padding:2%; background:#FFF; display:block; -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.55);-moz-box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.55);box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.55); -ms-transition:all .18s ease-in-out; -moz-transition:all .18s ease-in-out; -webkit-transition:all .18s ease-in-out; transition:all .18s ease-in-out; text-align:center; border:none;}
.portbox:hover{transform: scale(1.05); position: relative;-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);-moz-box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.75);box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.75);}
.portbox img{border:none; width:100%; height:80%; margin:0 0 15px 0;}
.picport img{width:30.33%; float:left; padding:.9%; margin:1%; background:#DDD; -ms-transition:all .18s ease-in-out; -moz-transition:all .18s ease-in-out; -webkit-transition:all .18s ease-in-out; transition:all .18s ease-in-out;}
.picport img:hover{transform: scale(1.05); position: relative;-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);-moz-box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.75);box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.75);}

footer{width:100%; float:left;}
footer .contact{width:100%; float:left; padding:40px 0; background:#ABEBC6; color:#28B463; font-size:24px; font-weight:bold;}
footer .copyright{width:100%; float:left; padding:40px 0; background:#28B463; color:#FFF;}

@media (max-width:1000px){
	.container{width:100%;}.menu > ul > li a {padding:.4em 1.2em;} .menu > ul > li {margin:6px 10px 6px 0;}
}
@media (max-width:960px){
	.col4{width:33.33%}
	.menu > ul > li {margin:6px 5px 6px 0;}
}
@media (max-width:860px){
	.col3,.col4{width:50%} .leftnav{display:none;} .mainnav{width:100%; padding:0;}
}
@media only screen and (max-width: 760px) {
    .menu-container {
        width: 100%;
    }
    .menu-mobile {
        display: block;
    }
    .menu-dropdown-icon:before {
        display: block;
    }
    .menu > ul {
        display: none;
    }
    .menu > ul > li {
        width: 100%; margin:0 0 10px 0;
        float: none;
        display: block;
    background:#0068ac;
}
    .menu > ul > li a {
        padding: 1em .8em;
        width: 100%;
        display: block; font-size:18px;
    }
    .menu > ul > li > ul {
        position: relative; margin:0 auto;
    }
    .menu > ul > li > ul.normal-sub {
        width: 100%;
    }
    .menu > ul > li > ul > li {
        float: none;
        width: 100%;
        margin: 0px; padding:0;
    }
	.menu > ul > li > ul.normal-sub > li a {
        padding: .8em 1em;
    }
    .menu > ul > li > ul > li:first-child {
        margin: 0;
    }
    .menu > ul > li > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul > li > ul > li {
        float: none;
    }
    .menu .show-on-mobile {
        display: block;
    }
	.picport img{width:48%;}
}
@media (max-width:540px){
	.col3,.col4{width:100%; padding:2% 0;}header .logo {padding:12px 20px; margin:15px 0 10px 10px;}header .right{float:left; margin:0 0 10px 20px; text-align:left;}	
	h1{font-size:28px;}
	h2{font-size:24px;}
	h3{font-size:20px;}
	header .logodragon{float:left; margin:10px auto 10px auto; height:90px;}
	header .right{font-size:16px; margin:10px 0 0 0; padding:0; float:right; text-align:right;}
	header .logo {background:#0074c0; display:block; float:right; padding:8px 10px; margin:0 0 5px 0; text-decoration:none; -ms-transition:all .18s ease-in-out; -moz-transition:all .18s ease-in-out; -webkit-transition:all .18s ease-in-out; transition:all .18s ease-in-out;}
header .logo h1{float:left; margin:0; padding:0; color:#FFF; font-family:'cloudbold',Arial, Helvetica, sans-serif; font-size:16px; font-weight:normal; border:none; line-height:100%;}
header .right .call{font-size:18px; font-weight:bold;}
	.productslogo{margin-bottom: 15px;}
	.portbox{margin-bottom: 15px;}
	.openscroll{overflow: auto;}
}
.closed {   position: fixed;   z-index: 9999;right: 0;top: 0; }
@media only all and (min-width: 768px) { .closed { width: auto; } }