@charset "utf-8";
/* CSS Document
main #20232c
green #76b220
blue #3e2c82
*/
*,html, body { padding:0; margin:0; color:#20232c;font-family: 'Kanit', sans-serif; font-size:16px; line-height:1.5;}
a { text-decoration:none; -moz-transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; color:#fff;}
a:hover {text-decoration:none;color:#76b220}
img { width:auto;}

header { padding:20px 0 20px 0; }
header.pc { display:block;}
header .logo { text-align:center; }
header .contact { display:none; float:left; margin-top:10px;}
header .contact i { font-size:30px; float:left; margin-top:5px;}
header .contact span { padding-left:10px; float:left; }
header .contact-ti { color:#999999; text-align:left; line-height:1;}
header .contact-de {text-align:left; }
header .contact:first-child { margin-right:30px;}


.nav-pc {display:none;background:#3e2c82 !important; height:44px;}
.nav-menu { width:100%; text-align:center;}
.nav-menu ul li { display:inline-block; list-style:none; padding-left:35px; padding-right:35px; padding-top:5px;}
.nav-menu ul li a { color:#fff; font-size:20px;  }
.nav-menu ul li a:hover { color:#76b220;}

.sliders {}
.sliderzone { /*height:465px; background:#ccc; */width:100%;}

section { padding-top:20px; padding-bottom:20px; min-height:450px;}

.titlepage {font-size:36px; font-weight:bold; margin-bottom:30px;}
.h-about_detail {font-size:16x; }
.h-about_slogan { font-size:20px; margin-top:60px;}
.h-about_slogan span { font-size:24px;}
.h-about_img { }

.h-bgcontent { background:url(../images/template/bg-home.jpg) no-repeat top center; height:360px; }
.h-bgcontent_bg { background:rgba(255,255,255,0.8); width:100%; padding:50px !important; margin-top:80px !important;}

.h-service_detail { }
.h-service_img img { width:100%; }

footer { background:#3e2c82; }
footer div.address { padding-top:20px; padding-bottom:20px; }
footer div.copy { background:#20232c; height:auto; border-bottom:10px solid #76b220;}
footer div.copy a i { color:#fff;text-decoration:none; -moz-transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; padding-left:5px; padding-right:5px;}
footer div.copy a:hover i { color:#76b220;}
footer div.social {}
footer div.copytxt { font-size:14px;}

/*Mobile*/
.nav-mobile { display:none;
width:100%; height:auto; background:#fff; border-bottom:4px solid #3e2c82; position: fixed;z-index:1100; margin-bottom:auto;
}
.nav-mobile .logo { width:100%;}
.nav-mobile .logo img { width:65%; margin-top:10px;}
.nav-mobile .phone { width:100% !important; height:auto; display:block; background:#3e2c82; text-align:center; overflow:hidden;}
.nav-mobile .phone .text span{ color:#fff; font-size:12px; padding-top:10px;}
/*.nav-mobile .secound { height:50px;background:#3e2c82; }*/

.about-text {}
.person { font-size:14px;}
.person .about-photo div.name { width:80%; padding:10px 20px 10px 10px; text-align:right; background:rgba(62,44,130,0.8); position:absolute; margin-top:90%; color:#fff; font-size:14px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;}
.person div.des01 { height:40px; font-weight:normal;}
.person div.des02 { font-weight:lighter;}

.service-text {}

@media only screen and (max-width: 320px) {
	/*.nav-mobile .phone .text span:nth-of-type(2) { display:none;}*/
	.nav-mobile .logo img { width:50%; }
	footer div.social { margin-top:-28px;}
	footer div.copytxt { font-size:12px;}
	
	.h-bgcontent { background:url(../images/template/bg-home.jpg) no-repeat top center; height:500px; padding:5px; overflow:hidden;}
	.h-bgcontent_bg { background:rgba(255,255,255,0.8); width:100%; padding:25px !important; margin-top:10px !important;}
	
	.about-text { text-align:justify;}
	.service-text { text-align:justify;}
}

@media only screen and (min-width: 420px) {
	/*.nav-mobile .phone .text span:nth-of-type(2) { display:none;}*/
	.nav-mobile .logo img { width:50%; }
	footer div.social { margin-top:-28px;}
	footer div.copytxt { font-size:12px;}
	
	.h-bgcontent { background:url(../images/template/bg-home.jpg) no-repeat top center; height:500px; padding:5px; overflow:hidden;}
	.h-bgcontent_bg { background:rgba(255,255,255,0.8); width:100%; padding:25px  !important; margin-top:10px  !important;}
	
	.about-text { text-align:justify;}
	.service-text { text-align:justify;}
}
/* Extra small devices (hones, 600px and down) */
@media only screen and (max-width: 600px) {
	/*header .logo img { width:80%;}*/
	.nav-mobile { display:block;}
	header.pc { display:none;}
	.h-about_img img  { width:100%;}
	.h-about_detail {font-size:14; }
	.h-about_slogan { font-size:16px; margin-top:30px;}
	.h-about_slogan span { font-size:20px;}	
	
	.h-bgcontent { background:url(../images/template/bg-home.jpg) no-repeat top center; height:420px; padding:5px;}
	.h-bgcontent_bg { background:rgba(255,255,255,0.8); width:100%; padding:25px !important; margin-top:10px !important;}
	
	.h-service_detail { }
	.h-service_img img { width:100%; }
	footer div.social { margin-top:-28px;}
	footer div.copytxt { font-size:12px;}
	
	.about-text { text-align:justify;}
	.service-text { text-align:justify;}
} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	header.pc { display:none;}
	.nav-mobile { display:block;}
	.h-bgcontent { background:url(../images/template/bg-home.jpg) no-repeat top center; height:400px; padding:5px;}
	.h-bgcontent_bg { background:rgba(255,255,255,0.8); width:100%; padding:25px !important; margin-top:20px !important;}
	
} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	header.pc { display:none;}
	.nav-mobile { display:block;}
	.h-about_img img  { width:100%;}
	.h-bgcontent { background:url(../images/template/bg-home.jpg) no-repeat top center; height:360px; padding:5px;}
	.h-bgcontent_bg { background:rgba(255,255,255,0.8); width:100%; padding:25px !important; margin-top:20px !important;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
header .contact, .nav-pc { display:block;}	
.nav-mobile { display:none;}	
header.pc { display:block;}
header .logo { text-align:left; }
.h-bgcontent { background:url(../images/template/bg-home.jpg) no-repeat top center; height:360px; padding:5px;}
	.h-bgcontent_bg { background:rgba(255,255,255,0.8); width:100%; padding:25px !important; margin-top:20px !important;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
header .contact, .nav-pc { display:block;}		
.nav-mobile { display:none;}
header.pc { display:block;}
header .logo { text-align:left; }
.h-bgcontent { background:url(../images/template/bg-home.jpg) no-repeat top center; height:360px; padding:5px;}
.h-bgcontent_bg { background:rgba(255,255,255,0.8); width:100%; padding:25px !important; margin-top:50px !important;}
footer div.social { margin-top:4px;}
}


.cd-stretchy-nav {
  position: fixed;
  z-index: 2;
  top:2px;
  right: 2%;
  pointer-events: none;
}
.cd-stretchy-nav .stretchy-nav-bg {
  /* this is the stretching navigation background */
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  border-radius: 30px;
  background: #3e2c82;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  -webkit-transition: height 0.2s, box-shadow 0.2s;
  -moz-transition: height 0.2s, box-shadow 0.2s;
  transition: height 0.2s, box-shadow 0.2s;
}
.cd-stretchy-nav.nav-is-visible {
  pointer-events: auto;
}
.cd-stretchy-nav.nav-is-visible .stretchy-nav-bg {
  height: 100%;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
}

.cd-nav-trigger {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  /* replace text with image */
  overflow: hidden;
  white-space: nowrap;
  color: transparent;
  pointer-events: auto;
}
.cd-nav-trigger span, .cd-nav-trigger span::after, .cd-nav-trigger span::before {
  /* this is the hamburger icon */
  position: absolute;
  width: 16px;
  height: 2px;
  background-color: #ffffff;
}
.cd-nav-trigger span {
  /* middle line of the hamburger icon */
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.cd-nav-trigger span::after, .cd-nav-trigger span::before {
  /* top and bottom lines of the hamburger icon */
  content: '';
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  transition: transform 0.2s;
}
.cd-nav-trigger span::before {
  -webkit-transform: translateY(-6px);
  -moz-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  -o-transform: translateY(-6px);
  transform: translateY(-6px);
}
.cd-nav-trigger span::after {
  -webkit-transform: translateY(6px);
  -moz-transform: translateY(6px);
  -ms-transform: translateY(6px);
  -o-transform: translateY(6px);
  transform: translateY(6px);
}
.no-touch .cd-nav-trigger:hover ~ .stretchy-nav-bg {
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
}
.nav-is-visible .cd-nav-trigger span {
  background-color: transparent;
}
.nav-is-visible .cd-nav-trigger span::before {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.nav-is-visible .cd-nav-trigger span::after {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.cd-stretchy-nav ul {
  position: relative;
  z-index: 2;
  padding: 60px 0 0;
  visibility: hidden;
  -webkit-transition: visibility 0.3s;
  -moz-transition: visibility 0.3s;
  transition: visibility 0.3s;
  text-align: right;background:#3e2c82;
}

.cd-stretchy-nav ul a {
  position: relative; color:#fff; font-size:14px;
  display: block;
  height: 40px;
  line-height: 40px;
  padding: 0 calc(1em + 10px) 0 1em;
  -webkit-transition: color 0.2s;
  -moz-transition: color 0.2s;
  transition: color 0.2s;
}
.cd-stretchy-nav ul li { text-align:left;color:#fff; font-size:14px;}
.cd-stretchy-nav ul li a span{ width:16px; height:16px; float:left; color: rgba(255, 255, 255, 0.7); margin-right:20px;}
.cd-stretchy-nav ul li a span i { color:#fff;}

.cd-stretchy-nav ul span {
  /* navigation item labels */
  display: block;
  opacity: 0;
  -webkit-transform: translateX(-25px);
  -moz-transform: translateX(-25px);
  -ms-transform: translateX(-25px);
  -o-transform: translateX(-25px);
  transform: translateX(-25px);
}

.cd-stretchy-nav.nav-is-visible ul {
  visibility: visible;
}
.cd-stretchy-nav.nav-is-visible ul a::after {
  /* navigation item icons */
  -webkit-transform: translateY(-50%) scale(1);
  -moz-transform: translateY(-50%) scale(1);
  -ms-transform: translateY(-50%) scale(1);
  -o-transform: translateY(-50%) scale(1);
  transform: translateY(-50%) scale(1);
  -webkit-animation: scaleIn 0.15s backwards;
  -moz-animation: scaleIn 0.15s backwards;
  animation: scaleIn 0.15s backwards;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.cd-stretchy-nav.nav-is-visible ul a.active {
  color: #ffffff;
}
.cd-stretchy-nav.nav-is-visible ul a.active::after {
  opacity: 1;
}
.cd-stretchy-nav.nav-is-visible ul a.active::before {
  -webkit-transform: translateX(3px) translateY(-50%) scaleY(1);
  -moz-transform: translateX(3px) translateY(-50%) scaleY(1);
  -ms-transform: translateX(3px) translateY(-50%) scaleY(1);
  -o-transform: translateX(3px) translateY(-50%) scaleY(1);
  transform: translateX(3px) translateY(-50%) scaleY(1);
  -webkit-transition: -webkit-transform 0.15s 0.3s;
  -moz-transition: -moz-transform 0.15s 0.3s;
  transition: transform 0.15s 0.3s;
}
.cd-stretchy-nav.nav-is-visible ul span {
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: slideIn 0.15s backwards;
  -moz-animation: slideIn 0.15s backwards;
  animation: slideIn 0.15s backwards;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  transition: transform 0.2s;
}
.no-touch .cd-stretchy-nav.nav-is-visible ul a:hover {
  color: #ffffff;
}
.no-touch .cd-stretchy-nav.nav-is-visible ul a:hover::after {
  opacity: 1;
}
.no-touch .cd-stretchy-nav.nav-is-visible ul a:hover span {
  -webkit-transform: translateX(-5px);
  -moz-transform: translateX(-5px);
  -ms-transform: translateX(-5px);
  -o-transform: translateX(-5px);
  transform: translateX(-5px);
}
.cd-stretchy-nav.nav-is-visible ul li:first-of-type a::after,
.cd-stretchy-nav.nav-is-visible ul li:first-of-type span {
  -webkit-animation-delay: 0.05s;
  -moz-animation-delay: 0.05s;
  animation-delay: 0.05s;
}
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(2) a::after,
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(2) span {
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(3) a::after,
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(3) span {
  -webkit-animation-delay: 0.15s;
  -moz-animation-delay: 0.15s;
  animation-delay: 0.15s;
}
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(4) a::after,
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(4) span {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(5) a::after,
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(5) span {
  -webkit-animation-delay: 0.25s;
  -moz-animation-delay: 0.25s;
  animation-delay: 0.25s;
}



/* -------------------------------- 

main content basic style

-------------------------------- */
.cd-main-content {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 100px 0;
  background-color: #003c5d;
}

/* -------------------------------- 

keyframes

-------------------------------- */
@-webkit-keyframes scaleIn {
  from {
    -webkit-transform: translateY(-50%) scale(0);
  }
  to {
    -webkit-transform: translateY(-50%) scale(1);
  }
}
@-moz-keyframes scaleIn {
  from {
    -moz-transform: translateY(-50%) scale(0);
  }
  to {
    -moz-transform: translateY(-50%) scale(1);
  }
}
@keyframes scaleIn {
  from {
    -webkit-transform: translateY(-50%) scale(0);
    -moz-transform: translateY(-50%) scale(0);
    -ms-transform: translateY(-50%) scale(0);
    -o-transform: translateY(-50%) scale(0);
    transform: translateY(-50%) scale(0);
  }
  to {
    -webkit-transform: translateY(-50%) scale(1);
    -moz-transform: translateY(-50%) scale(1);
    -ms-transform: translateY(-50%) scale(1);
    -o-transform: translateY(-50%) scale(1);
    transform: translateY(-50%) scale(1);
  }
}
@-webkit-keyframes slideIn {
  from {
    opacity: 0;
    -webkit-transform: translateX(-25px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes slideIn {
  from {
    opacity: 0;
    -moz-transform: translateX(-25px);
  }
  to {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}
@keyframes slideIn {
  from {
    opacity: 0;
    -webkit-transform: translateX(-25px);
    -moz-transform: translateX(-25px);
    -ms-transform: translateX(-25px);
    -o-transform: translateX(-25px);
    transform: translateX(-25px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}