@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@400&display=swap');
body{ background:#ffffff ;font-family: 'Anuphan', sans-serif; font-size:17px; line-height:2em; color:rgba(58, 89, 147, 1) !important; } 
body img{ height:auto; max-width:100%;}
.clear {clear: both;}
.h1, .h2, .h3, h1, h2, h3{ margin:0px;}
a{ color:#2c2955;}
a:link, a:visited, a:active{ text-decoration: none;color:#3a5993;}
a:hover {text-decoration: none; color:#d30921;}
p { margin:0px; }
#ID1630391724389 a:link, #ID1630391724389 a:visited, #ID1630391724389 a:active{ text-decoration: none; cursor: pointer; color:#fff !important; }
#ID1630391724389 a:hover {text-decoration: none; color:#fff !important; }
.djslider-loader-default{ overflow:visible !important;}
.pagination span, .pagination span a:hover{ color:#333 !important;}
#social{text-align: center !important;}
.md-modal{ width:100% !important; max-width:55% !important; background:none !important; display:block !important;}
.md-content{ background:none !important; padding:0px !important; }
.md-content img{ border:3px solid #fff;}

.item-page-submit-google{ padding-top:5% !important;}
.item-page-submit-google h1{ font-size:3em !important;text-align:center !important; }
.item-page-submit-google .display-4{ font-weight:600 !important; line-height:180% !important;}
.item-page-submit-google tr { border-bottom:1px dashed #e5e5e5;}
.item-page-submit-google td{padding:10px 20px !important;}

/** Joomla 6 ***/
.item-page_joomla6 h1{ font-size:4.5em !important;}
.item-page_joomla6 .display-1{ font-size:4em !important; font-weight:600;}
.item-page_joomla6 .display-2{ font-size:3em !important; font-weight:600;color:#d30921;}
/*** price ***/
.item-page-price h1{ text-align:center;}
#menu-top{background: #f3f3f3;
    color: #333333;
    padding: 0px 0px 0px 0px;}
#price{ background:#d30921;}
.dj-megamenu-clean li a.dj-up_a { height: 70px;}
#messenger{width:50px; height:50px; position: fixed; bottom:20px; right:15px; z-index:9999 !important;}
	#line{ width:50px; height:50px; position: fixed; bottom:80px; right:15px; z-index:9999 !important;}

.item-page-terms-of-use{ padding-top:20px !important;}
/*** box ***/

.item-page-upgrade{line-height: 40px;font-size:20px;}
.item-page-upgrade h1{line-height: 180%;}

.box1:link, .box1:visited, .box1:active{ text-decoration: none; padding:8px 15px; background:#d90a2c; color:#fff; border-radius:30px;}
.box1:hover {text-decoration: none; background:#1b425f;}

.box2:link, .box2:visited, .box2:active{ text-decoration: none; padding:8px 15px; background:#1b425f; color:#fff; border-radius:30px;}
.box2:hover {text-decoration: none; background:#1b425f;}

.box3{ display:block;  width:100%; max-width:200px; text-align:center !important; margin:20px auto 0 auto;}
.box3:link, .box3:visited, .box3:active{ text-decoration: none; padding:8px 15px; background:#d90a2c; color:#fff; border-radius:30px;}
.box3:hover {text-decoration: none; background:#1b425f;}
.box4{ display:block; width:100%; max-width:200px; text-align:center !important;margin:20px auto 0 auto;}
.box4:link, .box4:visited, .box4:active{ text-decoration: none; padding:8px 15px; background:#1b425f; color:#fff; border-radius:30px;}
.box4:hover {text-decoration: none; background:#1b425f;}

.call50{ max-width:50%; margin:0 auto;}
.call70{ max-width:70%; margin:0 auto;}

/*** head-img ***/
#head-img h1{ font-size:1.8em;}
#head-img h2{ font-size:5em;}

/*** top ***/
#top{ background:#f1f1f1 ; color:#111 !important; padding:5px 20px;}

.item-wrapper h3{ font-size:22px !important; }
.mfp_carousel_skin_default .mfp_carousel_item .mfp_thumb_pos_top img{ border:10px solid #fff; box-shadow: 3px 5px 30px 0 rgb(0 0 0 / 15%);}
.mfp_carousel_skin_default .mfp_carousel_item .mfp_carousel_title a{ font-weight:normal !important; font-size:22px !important;}


/*** head-slide  ***/
.f-nav{ background:#fff; z-index: 9995; position: fixed; left: 0; top: 0; width: 100%; box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,.26);}
.f-nav #top{ background:#ffffff;box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,.20); padding-bottom:20px;}

/*** head ***/
#logo{ padding-top:10px;}

/*** head-slide  ***/
.c-nav{ background:#fff; z-index: 9; position: fixed; top:15%; max-width:300px; z-index:10; width:25%; overflow-x: hidden;   }
#menu-sub.stick {
    position: fixed;
    top: 15%;
    z-index: 10;
	width:25%;
    max-width:300px;
	
}
#menu-mobile{ background:#3a3a3a;  top:0; width:100%; z-index:9999;}
.dj-megamenu-clean li a.dj-up_a{color:#111 !important  ;font-size:16px !important  ;}
.dj-megamenu-clean li.hover a.dj-up_a{color:#fff !important ;text-decoration: none;background:#222 !important;}
.dj-megamenu-clean li li{ background:#fff !important; }
.dj-megamenu-clean li div.dj-subwrap .dj-subwrap-in { background:#fff !important;}
.dj-megamenu li div.dj-subwrap{ background:#fff !important; color:#111 !important; box-shadow: 3px 5px 30px 0 rgb(0 0 0 / 15%)}
.dj-megamenu-clean li.active a.dj-up_a{ color:#fff !important ;text-decoration: none;background:#d30921 !important;}

#head{ background:#fff; padding:10px 20px; }
#head p{ padding-top:5px;}
#head a:link, #head a:visited, #head a:active{ color: #111;text-decoration: none;}
#head a:hover {color: #111;text-decoration: none;}
#maximenuck118{ padding-top:5px;}
div#maximenuck118 div.maxidrop-main{ width:250px !important;}
div#maximenuck118 div.floatck{ border:none !important;}
div#maximenuck118.maximenuckh ul.maximenuck li.level1.parent > a:after, div#maximenuck118.maximenuckh ul.maximenuck li.level1.parent > span.separator:after{ left:95% !important;}
/**div#maximenuck118.maximenuckh ul.maximenuck{ background:#000 !important;}**/
.lgx-social-connect-link .lgx-social-title{margin: 0px 0 !important;}
.lgx-social-connect-link .lgx-social-link-list{margin: 0px 0 !important;}
#price{ padding-left:4%; padding-right:4%;}

div#maximenuck118 ul.maximenuck2 a, div#maximenuck118 ul.maximenuck2 li.maximenuck span.separator{ border-bottom:1px dashed #f3f3f3 !important;}

#slide{ padding:0px;  overflow:hidden; font-weight:400;}
#slide h1{ font-size:4em; font-weight:600; color:#2c2955;}
#slide h2{ font-size:3em; font-weight:600; color:#2c2955;}
#slide img{ /*width:100%;*/ height:auto !important;object-fit: cover;}
.camera_wrap .camera_pag .camera_pag_ul{ text-align:center;}

/*** update ***/
#update{ background:#fff url(../images/update-bg.jpg) no-repeat center   ; padding-top:5%; padding-bottom:5%;}
#update h2{ font-size:3.5em; color:#2c2955;}
#update h1{ color:#2c2955;}
.jmgarticleslider-body .item-wrapper{ border:none !important;}
.jmgarticleslider-body .image{    box-shadow: 3px 5px 30px 0 rgb(0 0 0 / 15%);
    margin-bottom: 20px;
    border: 10px solid #fff;
    }
	
/*** video ***/
#video{ padding-top:5%; padding-bottom:5%; background:#f3f3f3;}
#video h2{ padding-top:15px; font-size:2.5em;}

/*** freetemplate ***/
#freetemplate{padding-top:5%; padding-bottom:5%; background:#1c1c1c url(../images/free-template-bg.jpg) no-repeat center bottom; color:#fff;}
#freetemplate h2{ padding-top:15px; font-size:2.5em;}
#freetemplate h3{ line-height:1.8em;}
figure[class*="effectck"] figcaption [class*="title"] {font-family: 'Kanit', sans-serif ; font-size:1.2em !important;}

/*** support ***/
#support{ padding-top:5%; padding-bottom:5%;}
#support h2{font-size:2.5em;}
#support h3{font-size:1.8em; line-height:1.6em;}

/*** customer ***/
#customer{padding-top:5%; padding-bottom:2%; background:#d30921 url(../images/customer-bg.jpg) repeat-x center top; color:#fff;}
#customer-body{background: url(../images/customer-body-bg.jpg) no-repeat center top;margin-top:30px;}
#customer h2{font-size:2.5em;}
#waterwheel-carousel-id img {box-shadow: 3px 5px 30px 0 rgb(0 0 0 / 15%);}


/*** footer ***/
#footer{padding-top:5%; padding-bottom:5%; background:#151414 url(../images/footer-bg.jpg) no-repeat center top ; color:#fff; position:relative; z-index:99;}
#footer h2{font-size:3em; color:#fff; font-weight:800; }
#footer h5{ font-size:14px; color:#888;}
#footer a:link, #footer a:visited, #footer a:active{ text-decoration: none;color:#fff;}
#footer a:hover {text-decoration: none;color:#fff; border-bottom:1px dashed #888; }


/*** breadcrumbs ***/
#breadcrumbs{padding-top:3%; padding-bottom:3%; background:#f9f9fc;}
/*** component ***/
#component{ padding-top:0px; padding-bottom:5%; overflow:hidden !important;  }
#component h1{ font-size:3em; font-weight:800; color:#2c2955;}
#component h2{font-size:2.5em; color:#d90a2c;}

.contentopen.osdownloads-container img { box-shadow: 3px 5px 30px 0 rgb(0 0 0 / 15%); border:1px solid #fff; }
.contentopen.osdownloads-container h3{ font-size:1.2em; padding-bottom:15px;}
.osdownloads-container .columns-2 div.column, .osdownloads-container .columns-3 div.column, .osdownloads-container .columns-4 div.column, .osdownloads-container .columns-5 div.column, .osdownloads-container .columns-6 div.column, .osdownloads-container .columns-7 div.column, .osdownloads-container .columns-8 div.column { padding:15px; }
.osdownloads-modal{ height:300px;font-family: 'Kanit', sans-serif ; }
.osdownloads-modal iframe{ height:300px;}
.btn_download > a, a.modosdownloadsDownloadButton{ background:#d90a2c !important;color:#fff !important;}
.btn_download
.btn_download a:link, .btn_download a:visited, .btn_download a:active{ text-decoration: none;color:#fff !important;}
.btn_download a:hover {text-decoration: none;}

/*** .item-page-home ***/
.item-page-home .page-header { text-align:center;}

.item-page-home .com-content-article__body h2{font-size:2.5em; font-weight:800;color:#2c2955;}
.blog img{ max-width:93% ;box-shadow: 3px 5px 30px 0 rgb(0 0 0 / 15%);}

.blog-items h2{ font-size:1.5em !important;}

.blogpage img{ max-width:95%; width:100%;}


/*** item-page-order ***/
.item-page-order h1{ text-align:center;}

.item-page-terms-of-use h1{ text-align:center !important;}


.item-page-webkit-template-joomla-3 h1{ font-size:1.4em !important;}
.item-page-webkit-template-joomla-3 h2{ text-transform:uppercase; font-weight:800; font-size:3em !important;}

/*** item-page-port ***/
.item-page-ports h1{ text-align:center; font-size:26px !important;}
.item-page-ports h2{ text-align:center;font-size:3.5em !important; font-weight:bold !important;}


.item-page-doc h1{ font-size:1.4em !important;}
.item-page-doc h2{ text-transform:uppercase; font-weight:800; font-size:2.5em !important; padding-bottom:20px; padding-top:7px;}
.item-page-doc h3{ padding-bottom:10px;}

/*** item-page-about ***/
.item-page-about h1{ font-size:1.4em !important;}
.item-page-about h2{ text-transform:uppercase; font-weight:800 !important; font-size:3em !important; padding-top:7px;}
.item-page-about h3{ padding-bottom:10px;font-weight:800 !important;}

/*** item-page-video ***/
.item-page-video h1{ font-size:1.4em !important;}
.item-page-video h2{ text-transform:uppercase; font-weight:800 !important; font-size:3em !important; padding-top:7px;}
.item-page-video h3{ padding-bottom:10px;font-weight:800 !important;}
.item-page-video img{box-shadow: 3px 5px 30px 0 rgb(0 0 0 / 15%); margin-bottom:15px; border:3px solid #fff;transition: all 0.7s ease-in-out 0s;}
.item-page-video img:hover{ border:3px solid #d30921;transition: all 0.7s ease-in-out 0s;
  	webkit-transform: scale(1.03);
  -moz-transform: scale(1.03);
  -ms-transform: scale(1.03);
  transform: scale(1.03);
  }
.v2-img{ box-shadow:none !important; }

#component-right{ overflow:hidden; height:auto; }
#menu-sub{ overflow:hidden !important; }
.readmore{ margin-top:15px;}
.readmore a:link, .readmore a:visited, .readmore a:active{ text-decoration: none; padding:8px 15px; background:#d90a2c; color:#fff; border:none;}
.readmore a:hover {text-decoration: none; background:#1b425f;}

.card-body li{ font-weight:800;}
.list-unstyled{ padding-left:10px; }
.nav-item li{ font-weight:200; border-bottom:1px dashed #fff;}

section{ padding:20px; background:#f3f3f3; color:#eee; border-left:20px solid #444;-webkit-box-shadow: inset 4px 3px 15px -4px rgba(0,0,0,0.43);
-moz-box-shadow: inset 4px 3px 15px -4px rgba(0,0,0,0.43);
box-shadow: inset 4px 3px 15px -4px rgba(0,0,0,0.43); color:#222 !important;}
code{ color:#222;}

.qListItem_link{ font-size:20px !important; font-weight:800 !important;}
.qFaqItem_introtext{ font-size:16px !important; color:#555 !important;}
.qListItem_introtext{font-size:16px !important; color:#999 !important;}
.qListItem_topic{ font-size:14px !important;}
a.NavLeftUL_anchor, span.NavLeftUL_anchor, a.NavLeftUL_toggle{ font-size:16px !important;}



@charset "UTF-8";
/*!
 * Bootstrap v5.0.2 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */


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

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}



figure {
  margin: 0 0 2em;
}
figure.float-start {
  margin-right: 1em;
}
figure.float-end {
  margin-left: 1em;
}
[dir=rtl] figure.float-start {
  margin-right: 0;
  margin-left: 1em;
}
[dir=rtl] figure.float-end {
  margin-right: 1em;
  margin-left: 0;
}

figcaption {
  font-size: 0.9em;
  color: #6d757e;
}

.mod-menu {
  flex-direction: column;
}

meter {
  width: 100%;
}




.error_site .page-header {
  margin-top: 1em;
}

[class^=container-] .span-col-2,
[class*=" container-"] .span-col-2 {
  flex: 0 0 50%;
  max-width: calc(50% - 1em);
}
[class^=container-] .span-col-3,
[class*=" container-"] .span-col-3 {
  flex: 0 0 33.333%;
  max-width: calc(33.333% - 1em);
}
[class^=container-] .span-col-4,
[class*=" container-"] .span-col-4 {
  flex: 0 0 25%;
  max-width: calc(25% - 1em);
}

@supports (display: grid) {
  [class^=span-],
[class*=" span-"] {
    grid-column-end: auto;
    grid-row-end: auto;
  }

  @media (min-width: 576px) {
    [class^=span-col],
[class*=" span-col"] {
      grid-column-end: span 2;
    }
  }

  @media (min-width: 768px) {
    .span-col-2 {
      grid-column-end: span 2;
    }

    .span-col-3 {
      grid-column-end: span 3;
    }

    .span-col-4 {
      grid-column-end: span 4;
    }

    .span-row-2 {
      grid-row-end: span 2;
    }

    .span-row-3 {
      grid-row-end: span 3;
    }

    .span-row-4 {
      grid-row-end: span 4;
    }
  }
  [class^=container-] [class^=span-],
[class^=container-] [class*=" span-"],
[class*=" container-"] [class^=span-],
[class*=" container-"] [class*=" span-"] {
    flex: 0 1 auto;
    max-width: none;
  }
}
.blog-items {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0;
  margin-right: -0.5em;
  margin-bottom: 1em;
  margin-left: -0.5em;
}
@media (min-width: 768px) {
  .blog-items.columns-2 > div {
    width: 50%;
  }
  .blog-items.columns-3 > div {
    width: 33.33333%;
  }
  .blog-items.columns-4 > div {
    width: 25%;
  }
}

.blog-item {
  display: flex;
  flex-direction: column;
  padding: 0 0.5em 1em;
  margin-bottom:30px;
  
}
.boxed .blog-item {
  background-color: white;
  box-shadow: 0 0 2px rgba(51, 57, 66, 0.1), 0 2px 5px rgba(51, 57, 66, 0.08), 0 5px 15px rgba(51, 57, 66, 0.08), inset 0 3px 0 var(--cassiopeia-color-primary);
}
.boxed .blog-item .item-content {
  padding: 25px;
}
.image-left .blog-item, .image-right .blog-item {
  flex-direction: row;
}
.image-left .blog-item .item-image, .image-right .blog-item .item-image {
  flex: 1 0 40%;
}
.blog-item .item-image {
  margin-top: 3px;
  margin-bottom: 15px;
  
}
.boxed .blog-item .item-image {
  margin-bottom: 0;
}
.image-right .blog-item .item-image {
  order: 1;
}
.image-bottom .blog-item .item-image {
  margin-top: -15px;
  order: 1;
}
.image-left .blog-item .item-content {
  padding-left: 25px;
}
.image-right .blog-item .item-content {
  padding-right: 25px;
}
.image-left .blog-item, .image-right .blog-item {
  flex-direction: column;
}
@media (min-width: 768px) {
  .image-left .blog-item, .image-right .blog-item {
    flex-direction: row;
  }
}

.article-info dd {
  padding: 0;
}

@supports (display: grid) {
  .blog-items {
    display: grid;
    margin: 0 0 1em;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-gap: 1em;
	border-bottom: 1px solid #e5e5e5;
	padding-bottom:5%;
  }
  .blog-items .blog-item {
    padding: 0;
  }
  .blog-items[class^=columns-] > div, .blog-items[class*=" columns-"] > div {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
  }
  @media (min-width: 768px) {
    .blog-items.columns-2 {
      grid-template-columns: 1fr 1fr;
    }
    .blog-items.columns-3 {
      grid-template-columns: 1fr 1fr 1fr;
    }
    .blog-items.columns-4 {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
}
.blog-items[class^=masonry-], .blog-items[class*=" masonry-"] {
  display: block;
  -webkit-column-gap: 1em;
     -moz-column-gap: 1em;
          column-gap: 1em;
}
.blog-items[class^=masonry-] .blog-item, .blog-items[class*=" masonry-"] .blog-item {
  display: inline-flex;
  margin-bottom: 1em;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
     -moz-column-break-inside: avoid;
          break-inside: avoid;
}


.breadcrumb {
  margin-bottom: 0;
  background-color: #f9f9fc;
}

/**********************
/*PAGINATION GENERAL
**********************/
.pagenav {
text-align: center; 

line-height: 2.1em; 
text-decoration: none;
border: 1px solid #dadada !important;
display: inline-block;
margin-left:5px;
}

.pagenav ul {
display: inline-block;
*display: inline;
list-style-type: none;
margin-left: 0;
margin-bottom: 0;
text-align: center;  
}

.pagenav li {
display: inline;
padding:  10px;
}

.pagenav a,span.pagenav {
padding: 20px;
}

.pagination {
float:none;
text-align:center;
width:100%;
margin-top:30px;
margin-bottom:40px;	
}

.pagination ul {
padding: 0;
text-align:center;
width:100%;
margin-bottom:40px;
}

.pagination li {
display: inline;
float:left; 


}

.pagination li a {
padding:5px 10px;
text-decoration: none;
display: inline-block;

}

.pagination .active  {
cursor: default;
 background:#252525; 
 font-weight:bold;
} 

.pagination span,.pagination span  a:hover {
cursor: default;
padding:5px 10px;
margin-left:5px;



font-weight:bold;
}

.pagination p.pull-right {
float: none;
text-align: center;
margin-bottom:15px;
}

ul.pager.pagenav  {
border:none !important;
text-align:center;
width:100%;
margin-bottom:25px;
}

 ul.pager.pagenav > li.next > a ,ul.pager.pagenav > li.previous > a {
background:#262626;
color:#fff !important;
margin:10px 12px 20px 0 ;

}
.pager li>a{ border-radius:0px !important; }
 
ul.pager.pagenav > li.next > a:hover ,ul.pager.pagenav > li.previous > a:hover {
border:none;
background:#262626;
color:#fff;
}

div.gk-article > ul.pager.pagenav ul li a:before {
content:"";
}

ul.pagination-list {
padding-bottom:40px;
}
/*html {
  filter: grayscale(100%) !important;
  -o-filter: grayscale(100%) !important;
  -moz-filter: grayscale(100%) !important;
  -webkit-filter: grayscale(100%) !important;
  filter: gray !important;
}*/