@charset "utf-8";
* { margin:0; padding:0;}
@font-face {
    font-family: 'thai_sans';
    src: url('../font/thaisanslite_r1.eot');
    src: url('../font/thaisanslite_r1.eot?#iefix') format('embedded-opentype'),
         url('../font/thaisanslite_r1.woff2') format('woff2'),
         url('../font/thaisanslite_r1.woff') format('woff'),
         url('../font/thaisanslite_r1.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'julius';
    src: url('../font/juliussansone-regular-webfont.eot');
    src: url('../font/juliussansone-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/juliussansone-regular-webfont.woff2') format('woff2'),
         url('../font/juliussansone-regular-webfont.woff') format('woff'),
         url('../font/juliussansone-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'chatthai';
    src: url('../font/cschatthaiui.eot');
    src: url('../font/cschatthaiui.eot?#iefix') format('embedded-opentype'),
         url('../font/cschatthaiui.woff2') format('woff2'),
         url('../font/cschatthaiui.woff') format('woff'),
         url('../font/cschatthaiui.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sans';
    src: url('../font/OpenSans-Regular-webfont.eot');
    src: url('../font/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/OpenSans-Regular-webfont.woff') format('woff'),
         url('../font/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../font/OpenSans-Regular-webfont.svg#open_sans') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sans';
    src: url('../font/opensans-bold-webfont.eot');
    src: url('../font/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/opensans-bold-webfont.woff') format('woff'),
         url('../font/opensans-bold-webfont.ttf') format('truetype'),
         url('../font/opensans-bold-webfont.svg#open_sans') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'montserrat';
    src: url('../font/Montserrat-Bold.woff') format('woff');
	src: url('../font/Montserrat-Bold.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}



html {
	font-size: 62.5%;
	font-family: 'julius', 'chatthai', Arial, Tahoma;
}
body {
	margin:0 auto;
	font-family: 'chatthai', Arial, Tahoma;
	font-weight: normal;
	font-size: 1.4em;
	background-color: #e3e3e3; 
	line-height: 2em;
	color:#333232;
	text-decoration: none;
	width: 100%;
	/*width: 990px;*/
	background-size: cover;

}
a { outline: 0;}
a:link, a:visited{ text-decoration: none; color: #7b7b7b;}
a:hover, #menuBottom a:hover {
	text-decoration: none; 
	color: #fff !important;
	-webkit-transition: color .2s ease;
	-moz-transition: color .2s ease;
	-ms-transition: color .2s ease;
	-o-transition: color .2s ease;
	transition: color .2s ease;
}
img {
	border: 0;
}
.center { margin: 0 auto; }
.flLeft { float: left; }
.flRight { float: right; }
.clear { clear: both;}
.wrap { margin: 0 auto; }
.hidden { display: none !important;}
.cursor { cursor: pointer;}
.colTheme { color: #7b7b7b;}
.colWhite { color: #fff;}
.colBlack { color: #000;}
.txtCenter { text-align: center;}
.txtLeft { text-align: left;}
.txtRight { text-align: right;}
.mgt20 { margin-top: 20px;}
.mgt40 { margin-top: 40px;}
.mgb50 { margin-bottom: 150px;}
.mgl20 { margin-left: 20px;}
.mgr20 { margin-right: 20px;}
.dv-inline { display: inline-block;}

h1 { font-weight: 500; font-size: 2.3em;}
h2 { font-weight: 100; font-size: 2.34em;}

.wrap { margin: 0 50px; display: block; }
#top .logo img { width: 140px; margin-top: 10px; position: absolute;}
.pk-header { font-size: 47px; text-align: right; padding: 60px 0 20px; font-weight: bold;}
.pk-name { font-family: 'open_sans'; letter-spacing: -1px; text-transform: uppercase; color: #000;}
.pk-name::first-letter { color: #e5001c; }
.pk-name > span { color: green;}
.menu { border-top: 1px solid #464646; width: 90.5%; float: right; text-align: right; height: 70px; padding-top: 15px; font-family: 'julius';}
.menu > span { font-size: 21px; letter-spacing: -0.01em; padding-top: 12px;}
.menu > span a { padding: 17px 18px 19px;}
.menu > span a:hover { /*background-color: #2d5e6f;*/ background-color: #c2c4c5; border-top: 1px solid #464646}
.menu > span a.active { background-color: #2d5e6f; color: #fff;}

.banner, .home-product-image-text, .banner-slide { position: relative;}
.banner img { width: 100%;}
.banner-text { position: absolute; bottom: 25px; font: 19px 'chatthai'; color: #fff;}
.banner-text-img { width: 60px !important; margin: 0 15px 10px 30px; float: left;}
.banner-text-divide { border-bottom: 0.02em solid #fff; padding: 2px 0;}
.banner-text-upper { float: left;}

.bg-wooden { font: 21px 'chatthai' !important; line-height: 33px !important; background: url('../images/bg-wooden.png'); background-size: cover; min-height: 200px; width: 100%; margin-top: 50px; text-align: center; color: #666; padding-top: 25px;}
.bg-wooden div:first-child { color: #000; font-weight: bold; padding-bottom: 8px;}

.home-product-box { margin-top: 60px; display: block; height: 540px; position: relative; overflow: hidden;}
.home-product-image { width: 100%; position: absolute; z-index: 999; background-size: 100%; background-position:top center; height: 540px;}
.home-product-text { width: 53%; height: inherit; background-color: #ced4d5; position: relative; z-index: 999;}
.home-product-image img { width: 50%; max-height: 540px;}
.home-product-text div:first-child { text-align: right; font: 25px 'julius'; font-weight: bold; letter-spacing: -1px; background-color: #53777b; color: #fff; padding: 23px 15px 20px;}
.home-product-text div { font-size: 18px; padding: 65px 80px 45px; line-height: 33px;}
.home-product-button { width: 150px; padding: 7px 9px !important; text-align: center; border-radius: 35px; margin-right: 65px; background-color: #879091; color: #e3e3e3; filter: drop-shadow(1px 3px 4px #959595);}
.home-product-button > a { color: #fff !important;}
.home-product-image-text { position: absolute; bottom: 12px; left: -12px;}
.home-product-image-text div { margin-top: 18px; font-size: 19px; color: #e3e3e3;}

.list-product-bottom { margin: 50px 0 95px;}
.list-product-bottom img { width: 90px; margin: 0 8px ;}

.bottom { background-color: #cdcdcd; padding-top: 60px; margin-top: 95px; padding-bottom: 10px;}
.div-flex { display: flex; margin-top: 20px; margin-bottom: 7px;}
.div-flex div:first-child { align-self: flex-end; font-size: 0.98em !important; color:#666;}
.div-flex div:nth-child(2) { flex: 1;}
.div-flex div.company-name { font: 19px 'julius' !important; color: #2d2d2d; -webkit-text-stroke-width: 0.09em; -webkit-text-stroke-color: #2d2d2d; margin-bottom: 5px;}
.div-flex div.txtRight div { margin-top: -2px; color: #666; font-size: 16px;}

.txt-about { margin: 64px 0 40px 0; color: #2d5e6f; font-size: 38px;}
.bg-about { background-image: url('../images/bg-about.png'); background-repeat: no-repeat; background-size: cover; height: 550px; position: relative; font-size: 22px; padding-top: 35px; line-height: 35px; margin-bottom: 150px;}
.txt-about-detail {  position: relative;}
.right-down { position: absolute; display: block; bottom: 25px; right: 20px; font-size: 20px;}
.img-desktop { display: block;}
.img-mobile { display: none;}

.txt-header { font-size: 45px; margin-top: 82px; padding-bottom: 45px;}
.txt-product-header { font-family: 'montserrat';}
.txt-product-sub-header {font-size: 25px; border: 1px solid #999; padding: 15px; color: #2d5e6f;}
.txt-product-detail-header { font-family: 'chatthai';}
.txt-product-detail-sub-header { font-size: 25px; margin-top: 40px;}
.txt-product-detail-description { width: 55%; margin: 30px auto 50px; font-size: 19px; color: #666; line-height: 35px; padding-bottom: 40px;}
/* .product-box { display: flex; flex-flow: row wrap; margin-top: 50px; margin-bottom: 80px; column-gap: 50px;}
.product-box div { flex-basis: 48%; font-size: 35px; padding-bottom: 10px; color: #555; margin-bottom: 130px;} */
.product-box {display: flex; flex-flow: wrap; gap: 45px; margin-top: 30px; margin-bottom: 130px;}
.product-box div { flex: 0 0 30%; font-size: 19px; color: #555;  position: relative;}
.product-box div img { max-width: 100%; border-radius: 15px; margin-bottom: 15px;}
.txt-product-name { display: block; position: absolute !important; top:38%; width: 100%; color: #000 !important; padding: 20px 0; opacity: 0.8;}
.product-box .txtCenter:hover div.txt-product-name  { background: #023103; opacity: .8; color: #fff !important; height: 30px;}

.product-list { display: flex; flex-flow: wrap; gap: 45px; margin-bottom: 150px;}
.product-list div { flex: 1 1 30%;}
.product-list div img { max-width: 100%; border-radius: 23px;}

.portfolio-box, .portfolio-box a { position: relative; /*height: 465px;*/}
.txt-portfolio {display: none;}
.portfolio-box:hover img { opacity: 0.4;}
.txt-portfolio-head { display: block; color: #fff; background-color: #023103; padding: 30px 50px !important; margin: 0 auto; width: fit-content; font-size: 24px; text-align: center;}
.portfolio-box:hover .txt-portfolio { display: block; color: #fff !important; background-color: #023103; padding: 20px 25px !important; transform: translate(50%, -120%); position: absolute; width: 60%; height: 40px; overflow: hidden; line-height: 40px; font-size: 18px !important; margin-left: -90px; bottom: 30px; white-space: nowrap; text-overflow: ellipsis;}
div.txt-portfolio > a { color: #fff;}

.portfolio-detail-left img { height: 100%; max-width: 48%; max-height:310px}
.portfolio-detail-left { width: 100%; display: flex; flex-direction: row; flex-flow: wrap; gap: 20px 20px;}
.portfolio-detail-right { width: 33%; font-size: 20px; line-height: 35px; display: none; }

.service-box { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 50px;}
.service-item { flex: 50%; flex-grow: 0; font-size: 22px; line-height: 35px; color: #7f7f7f;}
.service-img img { width: 95% !important; margin-top: -30px;}
.service-txt-right, .service-txt-left { align-content: center;}
.service-txt-right { margin-left: 30px; max-width: 40%;}
.service-txt-left { text-align: right;}
.span-service-txt-left { padding-right: 30px; margin-left: 100px;}
.service-img:first-child {margin-top: 30px;}
.service-img.upright { text-align: right;}

.service-item.contact-item { flex: 20%!important;}
.contact-company { color: #000; margin: 40px 0 20px;}
.contact-detail { font-size: 19px;}
.contact-map { width: 800px; height: 550px}

.slide-left, .slide-right, .slide-badge {cursor:pointer}
.slide-badge {height:13px; width:13px; padding:0; cursor: pointer; border-radius: 50%; color: #fff;
    display: inline-block; text-align: center;}
.slide-container, .slide-panel { padding: 0.01em 16px; width: 100%;}
.slide-container::before, .slide-container::after { content: ""; display: table; clear: both;}
.slide-section, .slide-code { margin-top: 16px !important; margin-bottom: 16px !important;}
.slide-large { font-size: 18px !important;}
.slide-display-bottommiddle { position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0%); -ms-transform: translate(-50%,0%); }
.slide-transparent, .slide-hover-none:hover { background-color: transparent !important;}
.txtHoverWhite { color: #fff;}
.txtHoverWhite:hover { opacity: .5; cursor: pointer;}
.slide-white, .slide-hover-white:hover { color: #fff !important; background-color: #fff !important;}
.slide-border { border: 1px solid #fff !important;}

@media (max-width: 1024px) { /*sm*/


}

@media (max-width: 767.98px) { /*sm*/
html { height: 100%;}
body { min-width: auto; max-width: 100%; height: 100%;}
.wrap { margin: 0;}
.fixed { min-height: 60px; z-index: 999; width: 100%; background-color: #e3e3e3; padding: 0 !important; margin: 0 !important; position: fixed;}
#top .logo img { width: 40px; margin-top: 10px; margin-left: 10px; z-index: 9999 !important;}
.mobileLogo { display: none;}
.pk-header { font-size: 20px; text-align: left; padding: 20px 0 20px 60px; position: absolute; z-index: 999 !important; width: 60% !important;}
#cssmenu { height: 65px !important;}
.menu { float: none;}

.middle { margin: 0 12px;}

.banner > .banner-text { font-size: 15px; bottom: 8px;}
.banner-text-img { width: 40px !important; margin: 0 10px 5px 10px;}
.bg-wooden { font-size: 17px !important; line-height: 26px !important;}
.bg-wooden div:first-child { padding: 0 55px 20px;}
.home-product-box { overflow: hidden;}
.home-product-image { position: absolute; z-index: 11;}
.home-product-image > img:first-child {height: 540px;}
.home-product-image img { width: 100%;}
.home-product-text { width: 75%; position: relative; z-index: 11;}
.home-product-text div:first-child { font-size: 19px;}
.home-product-text div { font-size: 15px; padding: 15px 18px; line-height: 27px;}
.home-product-image-text .banner-text-img { width: 30px !important; padding-left: 8px; margin-right: 5px;}
.home-product-image-text div { font-size: 15px; margin-top: 4px;}
.list-product-bottom img { width: 70px; margin: 5px 5px 0px;}
.div-flex div.copyright { font-size: 0.75em !important; line-height: 14px; flex-basis: 40%; margin-left: 10px;}
.div-flex div.txtRight div { font-size: 12px; line-height: 1.6em; margin-left: 30px; margin-right: 10px;}
.div-flex div.company-name { margin-left: -30px !important; font-size: 16px !important;}

.img-desktop { display: none !important;}
.img-mobile { display: block !important;}
.txt-about { font-size: 30px; line-height: 34px;}
.bg-about { font-size: 20px; background-size: contain; background-image: url('../images/bg-about-mobile.png'); padding: 35px 10px 0;}
.right-down { bottom: -20px; right: 0; margin-left: 10px;}

.txt-header { font-size: 33px; padding-top: 82px; margin-top: 0;}
.product-box div { flex-basis: 100%; margin-bottom: 30px; font-size: 23px;}
.product-box div img { margin-bottom: 10px;}
.txt-product-detail-description { width: 85%}
.txt-product-detail-description img { width: 100%;}
.product-list div { flex: 1 1 100%; margin-bottom: 30px;}

.txt-portfolio { display: block;}
.portfolio-box, .portfolio-box a { height: auto;}
.portfolio-detail-left { width: 100%;}
.portfolio-detail-right { width: 95%; margin: 10px auto;}
.portfolio-detail-left img { max-width: 100%; max-height: fit-content;}

.service-box { margin-top: 0; display: block;}
.service-img img { width: 100% !important; margin-top: 50px; margin-bottom: 20px;}
.service-img:first-child { margin-top: 0px;}
.service-item { font-size: 17px; line-height: 24px;}

.service-box.img-desktop {display: none;}
.contact-detail { font-size: 15px;}
.contact-item { margin-bottom: 20px;}
.contact-map { width: 100%; display: block;}
.service-item.contact-item { display: block;}

.slide-display-bottommiddle { position: absolute; left: 50%; bottom: -60px; transform: translate(-50%,0%); -ms-transform: translate(-50%,0%); }
.slide-badge { width: 19px; height: 19px; margin: 0 2px; margin-top: 3px;}
}