/* clear data
=================================== */
.header .btnMainMenuMobile {display:none; width:45px; height:45px; position:absolute; left:5px; top:15px; padding-left:10px; cursor:pointer; z-index:10;}
.header .btnMainMenuMobile span {
	width:calc(100% - 20px); height:3px; display:block; background-color:#fff; border-radius:0; position:absolute; left:10px; top:50%; margin-top:-2px;
	transition-duration:0.3s; transition-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.header .btnMainMenuMobile span::before {
	content:''; width:100%; height:3px; display:block; background-color:#fff; border-radius:0; position:absolute; left:0; top:-8px;
	transition:top 0.1s 0.34s ease-in, opacity 0.1s ease-in; 
}
.header .btnMainMenuMobile span::after {
	content:''; width:100%; height:3px; display:block; background-color:#fff; border-radius:0; position:absolute; left:0; bottom:-8px; 
	transition:bottom 0.1s 0.34s ease-in, -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition:bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition:bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.header .btnMainMenuMobile.action span {background-color:#fff; -webkit-transform:rotate(225deg); transform:rotate(225deg); transition-delay:0.14s; transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); }
.header .btnMainMenuMobile.action span::before {background-color:#fff; top:0; opacity:0; transition:top 0.1s ease-out, opacity 0.1s 0.14s ease-out; }
.header .btnMainMenuMobile.action span::after {background-color:#fff; bottom:0; -webkit-transform:rotate(-90deg); transform:rotate(-90deg); transition:bottom 0.1s ease-out, -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); transition:bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); transition:bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); }

/* clear image
=================================== */
.section-product-1 .bgForMobile {display:none;}
.section-product-3 .bgForMobile {display:none;}
.section-product-4 .ct_8 {display:none;}
.section-product-4 .bgFadeSection {display:none;}
.obj_group1_mobile {display:none;}
.obj_group2_mobile {display:none;}
.obj_group3_mobile {display:none;}

/* clear orientation
=================================== */
.visible-mobile {display:none;}
.visible-mobile-port {display:none;}

/* media screen
=================================== */
@media only screen and (min-width: 1366px) {

}

@media only screen and (min-width: 1024px) and (max-width: 1365px) {
	html, body {font-size:16px;}
	
	.header .logo {left:20px; top:20px; width:165px;}
	.header .boxMenu {right:20px; top:20px;}
	
	.footer .boxCopyright {left:20px; bottom:20px;}
	.footer .boxSocial {right:20px; bottom:15px;}
	
	#home-page .contentArea {width: 1024px; height: 650px;}
	
	.section-banner .boxListBanner .banner-1 .ct_1 {bottom:70px;}
	.section-banner .boxListBanner .banner-2 .ct_1 {left:40%; bottom:70px;}
	.section-banner .boxListBanner .banner-3 .ct_1 {left:50%; bottom:100px;}
	
	.boxCtrlScrollPage {right:30px;}
	
	.section-vdo {width:880px;}
	.section-vdo .ct_2_1 {padding-left:70px;}
	
	.section-product-1 .ct_3 {left: 38%;}
	
	.section-product-2 .ct_4 {left: 0px; top:100px; width: 100%;}
	.section-product-2 .ct_4_1 {right: 700px;}
	.section-product-2 .ct_4_2 {right: 700px;}
	.section-product-2 .ct_4_3 {left: 700px;}
	.section-product-2 .ct_4_4 {left: 700px;}
	.section-product-2 .flower1 {left: 350px; top: 277px; width: 156px;}
	.section-product-2 .flower2 {left: 500px; top: 145px; width: 179px;}
	
	.section-product-3 .ct_5 {left: 390px; top: -40px; width: 640px;}
	.section-product-3 .ct_5 .des {font-size:0.9em;}
	
	.boxAllStone .stone_11 {left: 20px; top: 120px;}
	.boxAllStone .stone_11 img {width:110px;}
	.boxAllStone .stone_12 {left: 200px; top: 70px;}
	.boxAllStone .stone_12 img {width: 100px;}
	.boxAllStone .stone_13 {left: 130px; top: 148px;}
	.boxAllStone .stone_13 img {width:40px;}
	.boxAllStone .stone_14 {left: 160px; top: 210px;}
	.boxAllStone .stone_14 img {width:100px;}
	
	.section-product-4 .ct_6 {left: 270px; width:700px;}
	.section-product-4 .ct_6 .des {font-size:0.9em;}
	.section-product-4 .ct_7 {left: 90px;}

	.section-product-5 .boxProductFooter > img {padding-bottom:80px;}
	.section-product-5 .boxImgProduct {top: 27.4%;}
	.boxFooterHome {/*padding: 0px 20px 60px 20px;*/ padding:0px 20px 10px 20px;}
	.boxFooterHome .logo {width:190px;}
	
	
	.boxContact1 .boxBg {width: 1600px; margin-left: -800px;}
	.boxContact1 .boxContactInfo {width: 540px;}
	.boxContact1 .boxContactInfo .title {font-size: 24px;}
	.boxContact1 .boxContactInfo .title2 {font-size: 20px; padding:0px 0px 10px 0px;}
	.boxContact1 .boxContactInfo .boxList .oneList .txt_1 {font-size:1.1em;}
	
	.boxContact2 {padding-top: 100px;}
	.boxContact2 .title {padding: 10px 0px 30px; font-size: 28px;}
	.boxContact2 .boxList a {padding: 0px 5px 25px 5px;}
	.boxContact2 .box_1 {padding-bottom: 45px;}
	
	.boxContact3 {padding-top: 130px;}
	.boxContact3 .blueGlow {margin-left: -690px; margin-top: -475px;}
	.boxContact3 .boxObjSmoke2 .smoke_1 {left:0px;}
	.boxContact3 .boxBg {width: 1600px; margin-left: -800px; top:320px;}
	.boxContact3 .boxObjSmoke {top: -40px;}
	.boxContact3 .boxContactForm {width: 580px; min-height: inherit;}
	.boxContact3 .boxContactForm .title {font-size:30px;}
	.boxContact3 .boxContactForm .title2 .title3 {font-size: 26px;}
	

	
	/* 
	EN Lang CSS ====================================== */
	.en {font-size:14px;}
	.en .section-banner .boxListBanner .banner-3 .ct_1 {bottom:60px;}
	.en .section-banner .boxListBanner .banner-3 .ct_1 {left:47%; bottom:50px;}
	.en .section-product-2 .ct_4 .title {font-size: 2em;}
	.en .section-product-2 .ct_4_1 {right: 670px;}
	.en .section-product-2 .ct_4_2 {top: 370px; right: 670px;}
	.en .section-product-2 .ct_4_3 {left: 660px;}
	.en .section-product-2 .ct_4_4 {top:350px; left: 660px;}
	
	.en .section-product-2 .flower1 {left: 360px; top: 247px; width: 140px;}
	.en .section-product-2 .flower2 {left: 500px; top: 145px; width: 150px;}
	
	/* 
	CN Lang CSS ====================================== */
	.cn .section-product-2 .des {font-size: 0.75em;}
	.cn .section-product-3 .ct_5 .des {font-size:0.83em;}
	
	.cn .boxContact1 .boxContactInfo .title {font-size:21px;}
	
	/* 
	add new logo back to office ====================================== */
	.footer .boxBackOfficial {left:20px;}
	.footer .boxCopyright {left: 0px; right: 0px; margin: auto;}
}

@media  (max-width: 1199px){
	/* for product detail only because background relate container
	=============================================== */
	.boxProduct1 .boxBg {width: 1700px; margin-left: -850px;}
	.boxProduct1 .boxContentProduct { left: 360px; padding-top:120px; width: 490px;}
	.boxProduct1 .boxProductItem  {left:70px; top:200px; width:420px;}
	.boxProduct1 .boxProductItem .btnCtrlDetail .imgHover {width:35px; height:35px; background-size:35px auto;}
	.boxProduct1 .boxProductItem .btnCtrlDetail .imgHover:hover {background-position:left -35px;}
	.boxProduct1 .boxProductItem .btnCtrlDetail .txt {top: 35px; left: -33px;}
	.boxProduct1 .boxContentProductPopup {left: 370px; top: 100px; width: 580px;}
	.boxProduct1 .boxObjSmoke {bottom: 120px;}
	
	.boxProduct2 .boxBg {width: 1700px; margin-left: -850px;}
	.boxProduct2 .boxContentProduct {left: 40px; padding:80px 0px 140px 0px;}
	
	.boxProduct3 {height:700px;}
	.boxProduct3 .boxObjSmoke {display:none !important;}
	.boxProduct3 .boxObjSmoke2 {left: -30px; bottom: auto; top: 0px;}
	.boxProduct3 .boxContentProduct .image {display:none !important;}
	.boxProduct3 .woman {left:0px; top: -50px; width: 500px;}
	.boxProduct3 .boxContentProduct .txt1 {left: 605px; top: 110px; font-size: 60px;}
	.boxProduct3 .boxContentProduct .txt2 {left: 655px; top: 145px; font-size: 35px;}
	.boxProduct3 .boxContentProduct .txt2 span {display: inline;}
	.boxProduct3 .boxContentProduct .boxListPoint {position: absolute; left: 610px; top: 230px;}
	.boxProduct3 .boxContentProduct .btnPointPop {position:relative; left: 0px; top:0px; padding-left:55px; margin-bottom:20px;}
	.boxProduct3 .boxContentProduct .btnPointPop .btnClickPop {position:absolute; left:0px; top:2px; width:35px; height:35px; background-size:35px auto;}
	.boxProduct3 .boxContentProduct .btnPointPop .btnClickPop:hover {background-position:left -35px;}
	.boxProduct3 .boxContentProduct .btnPointPop .contentPoint {position:relative; left:0px; top:0px; right:auto; text-align:left;}
	.boxProduct3 .boxContentProduct .btnPointPop .contentPoint .title {font-size:22px;}
	.boxProduct3 .boxContentProduct .btnPointPop .contentPoint .title i {font-size:30px;}
	.boxProduct3 .boxContentProduct .btnPointPop .contentPoint .des {font-size:0.9em; line-height:1.4;}
	.boxProduct3 .boxContentProduct .btnPointPop .contentPoint .des br {display:none;}
	
	.boxPopupProductDetail .boxContentPopupProductDetail .boxList .oneList .boxBgProductDetail img {max-height: 576px;}
	.boxPopupProductDetail .btnClosePopupProductDetail {width:35px; height:35px; background-size:35px auto;}
	.boxPopupProductDetail .btnClosePopupProductDetail:hover {background-position:left -35px;}
	
	#gallery-page .boxListGallery {height:372px;}
	#gallery-page .boxListGallery .boxGroupSet {width:1860px;}
	#gallery-page .boxListGallery .boxGroupSet .oneGallery {border:2px solid #F9B258; margin:6px;}
	#gallery-page .boxListGallery .boxGroupSet .type_1 { left:0px; top:0px; width:360px; height:174px;}
	#gallery-page .boxListGallery .boxGroupSet .type_2 { left:0px; top:186px; width:174px; height:174px;}
	#gallery-page .boxListGallery .boxGroupSet .type_3 { left:186px; top:186px; width:174px; height:174px;}
	#gallery-page .boxListGallery .boxGroupSet .type_4 { left:372px; top:0px; width:174px; height:360px;}
	#gallery-page .boxListGallery .boxGroupSet .type_5 { left:558px; top:0px; width:360px; height:360px;}
	#gallery-page .boxListGallery .boxGroupSet .type_6 { left:930px; top:0px; width:360px; height:360px;}
	#gallery-page .boxListGallery .boxGroupSet .type_7 { left:1302px; top:0px; width:174px; height:174px;}
	#gallery-page .boxListGallery .boxGroupSet .type_8 { left:1488px; top:0px; width:174px; height:174px;}
	#gallery-page .boxListGallery .boxGroupSet .type_9 { left:1302px; top:186px; width:360px; height:174px;}
	#gallery-page .boxListGallery .boxGroupSet .type_10 { left:1674px; top:0px; width:174px; height:360px;}
	#gallery-page .boxListGallery .boxGroupSet.total_1 {width:372px;}
	#gallery-page .boxListGallery .boxGroupSet.total_2 {width:372px;}
	#gallery-page .boxListGallery .boxGroupSet.total_3 {width:372px;}
	#gallery-page .boxListGallery .boxGroupSet.total_4 {width:558px;}
	#gallery-page .boxListGallery .boxGroupSet.total_5 {width:930px;}
	#gallery-page .boxListGallery .boxGroupSet.total_6 {width:1302px;}
	#gallery-page .boxListGallery .boxGroupSet.total_7 {width:1674px;}
	#gallery-page .boxListGallery .boxGroupSet.total_8 {width:1674px;}
	#gallery-page .boxListGallery .boxGroupSet.total_9 {width:1674px;}
	#gallery-page .boxListGallery .boxGroupSet.total_10 {}
	
	/* 
	EN Lang CSS ====================================== */
	.en .boxProduct3 .boxContentProduct .txt2 {top: 124px;}
	
	/* 
	CN Lang CSS ====================================== */
	.cn .boxProduct3 .boxContentProduct .txt2 {padding-top:0px;}
	
}


@media only screen and (max-width: 1023px) {
	.tl_reset_mobile {
		opacity:1 !important; visibility:visible !important; z-index:1 !important; 
		transform: matrix(1, 0, 0, 1, 0, 0) !important; -webkit-transform: matrix(1, 0, 0, 1, 0, 0) !important;
	}
	
	.header {z-index:200;}
	.header .logo {left: 0px; top: 20px; width: 165px; right: 0px; margin: auto;}
	
	.header .boxMenu {
		position: fixed; right: auto; top: 0px; left:-250px; width:250px; height: 100vh; padding-top:70px; overflow: hidden; white-space: nowrap; background:#000;
		-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;
	}
	.header .boxMenu a {display:block; float:none; margin:0px 20px 10px 20px;}
	.header .boxMenu span {display:none;}
	.header .boxMenu .btnLang {float:left; margin:10px 8px 10px 8px;}
	.header .boxMenu .btnLang.lang-th {margin:10px 8px 10px 20px;}
	
	.header.minMenu .boxMenu {top:0px;}
	
	.header .btnMainMenuMobile {display:block;}
	.header .btnMainMenuMobile.action + .boxMenu {display:block; left:0px;}
	
	.footer {display:none !important;}
	.footer .boxCopyright {left:20px; bottom:20px;}
	.footer .boxSocial {right:20px; bottom:15px;}
	
	#home-page {height:auto !important;}
	#home-page .boxStage {position:relative; width:auto; height:auto;}
	#home-page .contentArea {position:relative; width:100%; height:auto;}
	#home-page .boxSection {position:relative; height:auto;}
	#home-page .boxAllSmoke {display:none !important;}
	#home-page .boxAllStone {display:none !important;}
	.boxCtrlScrollPage {display:none;}
	
	#home-page .section-banner .contentArea {top:auto; bottom:0px; height: 100vh;}
	.section-banner .boxListBanner {position:relative; width:100vw; height:100vh;}
	.section-banner .boxListBanner .banner-1 .ct_1 {left:60px; top:auto; bottom:130px;}
	.section-banner .boxListBanner .banner-1 .bg {background-position:80% center;}
	.section-banner .boxListBanner .banner-2 .ct_1 {left:60px; top:auto; bottom:130px;}
	.section-banner .boxListBanner .banner-3 .ct_1 {left:60px; top:auto; bottom:130px;}
	.section-banner .boxListBanner .banner-3 .bg {background-position:left center;}
	
	.bg-vdo {display:none !important;}
	.section-vdo {position:relative; width: 620px; height:auto; z-index:12 !important;}
	.section-vdo .boxMainVdo .boxMainVdoInner {height:356px;}
	.section-vdo .boxMainVdo .boxMainVdoInner video {
		opacity:1 !important; visibility:visible !important; z-index:1 !important; 
		transform: matrix(1, 0, 0, 1, 0, 0) !important; -webkit-transform: matrix(1, 0, 0, 1, 0, 0) !important;
	}
	.section-vdo .ct_2 {padding-top:20px; padding-bottom:40px;}
	.section-vdo .ct_2_1 {display:none !important;}
	.section-vdo .ct_2_2 {display:block;}
	.section-vdo .boxListVdo {float:none; margin-left:-10px; margin-right:-10px; margin-top:20px;}
	.section-vdo .boxListVdo .oneVdo {width:50%; margin:0px;}
	.section-vdo .boxListVdo .oneVdo .thumb {width:auto; height:auto; margin:0px 10px;}
	.section-vdo .boxListVdo:after {display:block; content:''; height:0px; overflow:hidden; clear:both;}
	
	.obj_group1_mobile {display:block; position:absolute; right: 140px; top:-50px;}
		.bgOverlayMobile_1 {display: block; position: absolute; left: -240px; top: -160px; pointer-events: none;}
		.smoke_1_mobile {display: block; position: absolute; left: -170px; top: 0px; width: 550px; pointer-events:none;}
		.smoke_1_mobile .smoke-ani {-webkit-transform: matrix(-0.17364, 0.9848, -0.9848, -0.17364, 0, 0); transform: matrix(-0.17364, 0.9848, -0.9848, -0.17364, 0, 0);}
		.stone_1_mobile {display:block; position:absolute; left:4px; top:0px; pointer-events:none;}
		.stone_2_mobile {display:block; position:absolute; left:14px; top:110px; pointer-events:none;}
		.stone_3_mobile {display:block; position:absolute; left:112px; top:52px; pointer-events:none;}
		.stone_4_mobile {display:block; position:absolute; left:0px; top:171px; pointer-events:none;}
	
	.bg-product-1 {display:none !important;}
	.section-product-1 .bgForMobile {display:block; position:relative; width:100%; margin-bottom: -190px;}
	.section-product-1 .bgForMobile img {display:block; width:100%; height:auto;}
	.section-product-1 .ct_3 {position:relative; left:0px; top:0px; padding:20px; width:100%; text-align:center;}
	.section-product-1 .ct_3 .title2 {float:none; display:inline-block;}
	
	.obj_group2_mobile {display:block; position:absolute; right: 340px; bottom:110px;}
		.bgOverlayMobile_2 {display: block; position: absolute; left: -320px; top: -120px; pointer-events: none;}
		.smoke_2_mobile {display: block; position: absolute; left: -120px; top: -80px; width: 730px; pointer-events:none;}
		.smoke_2_mobile .smoke-ani {-webkit-transform: matrix(-0.64278, 0.76603, -0.76603, -0.64278, 0, 0); transform:matrix(-0.64278, 0.76603, -0.76603, -0.64278, 0, 0);}
		.stone_5_mobile {display:block; position:absolute; left:217px; top:80px; pointer-events:none;}
		.stone_6_mobile {display:block; position:absolute; left:120px; top:88px; pointer-events:none;}
		.stone_7_mobile {display:block; position:absolute; left:0px; top:250px; pointer-events:none;}
	
	.section-product-2 .ct_4 {position:relative; left:0px; top:0px; text-align:center; width:100%; padding:240px 20px 20px 20px;}
	.section-product-2 .ct_4 .title {line-height:1.6;}
	.section-product-2 .ct_4 .title span {display:block;}
	.section-product-2 .ct_4 .title2 {font-size:1.8em;}
	.section-product-2 .flower1 {display:inline-block; position:relative; left:0px; top:0px; margin:0px auto;}
	.section-product-2 .flower2 {display:inline-block; position:relative; left:0px; top:0px; margin:0px auto;}
	.section-product-2 .ct_4_1 {position:static; text-align:center; margin-top:-60px; padding-bottom:20px;}
	.section-product-2 .ct_4_2 {position:static; text-align:center; padding-bottom:20px;}
	.section-product-2 .ct_4_3 {position:static; text-align:center; padding-bottom:20px;}
	.section-product-2 .ct_4_4 {position:static; text-align:center; padding-bottom:20px;}
	.section-product-2 .des {font-size:1em;}
	
	.obj_group3_mobile {display: block; position: absolute; left: -100px; bottom: 40px;}
		.bgOverlayMobile_3 {display: block; position: absolute; left: -250px; top: -300px; width: 830px; height: auto; pointer-events: none;}
		.smoke_3_mobile {display: block; position: absolute; left: -120px; top: -80px; width: 730px; pointer-events:none;}
		.smoke_3_mobile .smoke-ani {-webkit-transform: matrix(-0.64278, 0.76603, -0.76603, -0.64278, 0, 0); transform:matrix(-0.64278, 0.76603, -0.76603, -0.64278, 0, 0); opacity:0.8;}
		.stone_8_mobile {display:block; position:absolute; left: 194px; top: 20px; pointer-events:none;}
		.stone_9_mobile {display:block; position:absolute; left: 54px; top: 140px; pointer-events:none;}
		.stone_10_mobile {display:block; position:absolute; left: 230px; top: 114px; pointer-events:none;}
	
	
	.section-product-3 .ct_5 {position:relative; left:0px; top:0px; width:100%; padding:220px 20px 0px 20px; text-align:center;}
	.section-product-3 .ct_5_1 {padding:0px 35px 20px 35px;}
	.section-product-3 .ct_5_2 {padding:0px 35px 20px 35px;}
	.section-product-3 .ct_5_2:after {left:auto; right:0px; background:url(../images/icon/icon-rq.png) no-repeat right bottom;}
	.section-product-3 .ct_5 .des {font-size:1em;}
	.section-product-3 .ct_5 .des br {display:none;}
	.section-product-3 .bgForMobile {display:block; position:relative; width:100%; margin-top:-80px;}
	.section-product-3 .bgForMobile img {display:block; width:100%; height:auto;}
	
	.section-product-4 {background:url(../images/bg-product-4-mobile.jpg) no-repeat left top; background-size:100% auto; padding-bottom:100px; z-index:2 !important;}
	.section-product-4 .ct_6 {position:relative; width:100%; left:0px; top:0px; text-align:center; padding:20px; text-align:center;}
	.section-product-4 .ct_6 .title {padding:10px;}
	.section-product-4 .ct_6 .title span {display:block;}
	.section-product-4 .ct_6 .title2 {font-size:1.8em; float:none; display:inline-block;}
	.section-product-4 .ct_6 .des {font-size:1em; padding-left:0px;}
	.section-product-4 .ct_6 .boxList_1 {padding-left:0px;}
	.section-product-4 .ct_6 .boxList_1 .oneList {padding:0px 0px 30px 0px;}
	.section-product-4 .ct_6 .boxList_1 .oneList .thumb {position:relative; left:0px; top:0px; padding-bottom:5px;}
	.section-product-4 .des br {display:none;}
	.section-product-4 .ct_7 {display:none !important;}
	.section-product-4 .ct_8 {display:block; text-align:left; padding:10px 0px 50px 20px;}
	.section-product-4 .bgFadeSection {display:block; position:absolute; left:0px; bottom:-100px; width:100%; height:200px;}
	
	.section-product-5 {position:relative; padding-top:107px;}
	.section-product-5 .boxProductFooter > img {position: absolute; left: 50%; right: 0px; width: 1024px; margin: 0px 0px 0px -512px; top:-320px;}
	.section-product-5 .boxImgProduct {margin:0px auto; position:relative; left:-5px; width: 286px; top:0px;}
	.section-product-5 .boxImgProduct .btnProductDetail {left:50%; margin-left:-140px;}
	.boxFooterHome {position:relative; width:100%; padding:200px 20px 20px 20px;}
	.boxFooterHome .title {font-size:0.9em;}
	
	.boxFooterHome .boxSocial a {margin:0px 8px;}
	
	
	.boxContact1 .boxBg {top: -90px; width: 1800px; margin-left: -540px;}
	.boxContact1 .boxContactInfo {max-width:100%; margin:auto; padding-top:510px;}
	
	.boxContact2 .box_1 {padding-bottom: 0px;}
	.boxContact2 .boxList {padding-bottom:30px;}
	
	.boxContact3 {padding-top: 470px;}
	.boxContact3 .boxBg {top:0px; width: 1800px; margin-left: -1260px;}
	.boxContact3 .blueGlow {margin-left: -1080px; margin-top: -830px;}
	.boxContact3 .boxObjSmoke2 .smoke_1 {left: -180px; top: -210px; width: 790px;}
	.boxContact3 .boxContactForm {width:630px; max-width:100%; margin:0px auto; min-height:inherit; padding-bottom: 30px;}
	.boxContact3 .boxContactForm .boxContactFormGroup .btnSubmit {display:block; margin:10px auto 0px auto;}
	
	
	.boxProduct1 {height:auto;}
	.boxProduct1 .boxBgMobile {display:block;}
	.boxProduct1 .boxBgMobile img {display:block; width:100%; height:auto;}
	.boxProduct1 .boxBg {display:none;}
	.boxProduct1 .boxObjSmoke {display:none;}
	.boxProduct1 .boxContentProduct {left:0px; margin:-150px auto 20px auto; padding:0px; width:520px; max-width:100%;}
	.boxProduct1 .boxContentProduct .title2 {font-size:1.5em;}
	.boxProduct1 .boxContentProduct .title3 {font-size:1.3em; line-height: 1.5; padding:15px 0px 15px 0px;}
	.boxProduct1 .boxContentProduct .title3 br {display:none;}
	.boxProduct1 .boxProductItem {
		position:relative; left:0px; top:0px; width:auto; margin-top:20px;
		-webkit-transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1) !important;
		transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1) !important;
	}
	.boxProduct1 .boxProductItem .image {display:none;}
	.boxProduct1 .boxProductItem .btnCtrlDetail {position:relative; left:0px; top:0px; margin:0px auto 10px auto; width:35px;}
	.boxProduct1 .boxProductItem .btnOpenDetail {width:190px;}
	.boxProduct1 .boxProductItem .btnOpenDetail .imgHover {display:none;}
	.boxProduct1 .boxProductItem .btnOpenDetail .txt {display:block; position:relative; left:0px; top:0px; font-family:'EkkamaiStandard', sans-serif; font-size:18px; color:#511d03; width:190px; height:48px; padding:0px 20px 14px 20px; text-align:center; line-height:48px; overflow:hidden; font-weight:bold; background:url(../images/btnStyle2.png) no-repeat left top;}
	.boxProduct1 .boxProductItem .btnOpenDetail .txt:hover, .boxProduct1 .boxProductItem .btnOpenDetail .txt:focus {color:#511d03; background-position:left -48px;}
	.boxProduct1 .boxProductItem .btnCloseDetail .imgHover {width:48px; height:48px; background-size:48px auto;}
	.boxProduct1 .boxProductItem .btnCloseDetail .imgHover:hover {background-position:left -48px;}
	.boxProduct1 .boxProductItem .btnCloseDetail .txt {display:none;}
	.boxProduct1 .boxContentProductPopup {position:relative; left:0px; top:0px; margin:0px auto;}
	.boxProduct1 .boxContentProductPopup .title {padding:30px 0px 15px 0px;}
	.boxProduct1 .boxContentProductPopup .title2 {font-size:1.5em;}
	.boxProduct1 .boxContentProductPopup .title3 {font-size:1.3em;}
	
	.boxProduct2 .boxBg {width: 1600px; margin-left: -1070px; top: -120px;}
	.boxProduct2 .boxContentProduct {max-width:100%; left:0px; padding:330px 0px 40px 0px; margin:0px auto; text-align:center;}
	.boxProduct2 .boxContentProduct .title {padding:30px 0px 15px 0px;}
	.boxProduct2 .boxContentProduct .title2 {font-size:1.5em;}
	.boxProduct2 .boxContentProduct .des {padding:20px 0px 30px 0px; font-size: 0.83em; line-height: 2.2em;}
	.boxProduct2 .boxContentProduct .des p {margin-bottom: 15px;}

	.boxProduct3 {height:auto;}
	.boxProduct3 .boxObjSmoke2 {top:80px;}
	.boxProduct3 .woman {left: 0px; top: 0px; width: 500px; max-width:80%; margin: 0px auto -140px auto; position: relative;}
	.boxProduct3 .boxContentProduct {left:0px; top:0px; width:480px; max-width:100%; margin:0px auto;}
	.boxProduct3 .boxContentProduct .txt1 {display:inline; position:relative; left:0px; top:0px; padding-right:5px;}
	.boxProduct3 .boxContentProduct .txt2 {display:inline; position:relative; left:0px; top:0px;}
	.boxProduct3 .boxContentProduct .boxListPoint {position:relative; left:0px; top:0px;}
	.boxProduct3 .boxContentProduct .btnPointPop .contentPoint .des {font-size: 0.83em; white-space: normal;}
	
	.boxProduct4 .boxBg {top: -460px; width: 1700px; margin-left: -850px;}
	
	.boxPopupProductDetail .boxContentPopupProductDetail .boxList .oneList {overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch;}
	.boxPopupProductDetail .boxContentPopupProductDetail .boxList .oneList .boxContentProductDetail {position: relative; left: 0px; top: 0px; width: 100%; height: auto; z-index: 5;}
	.boxPopupProductDetail .boxContentPopupProductDetail .boxList .oneList .boxBgProductDetail {position: relative; right: 0px; top: 0px; width: auto; height: auto;}
	.boxPopupProductDetail .boxContentPopupProductDetail .boxList .oneList .boxBgProductDetail img {max-height: inherit; position: relative; height: auto; width: 100%;}
	.boxPopupProductDetail .boxObjSmoke {display:none !important;}
	.boxCT_1 {padding: 40px 20px; text-align: center;}
	.boxCT_1 .txt2 {padding-bottom: 40px;}
	.boxCT_1 .txt3 {display:inline-block; float:none; left:0px;}
	.boxCT_1 .txt4 {width:auto;}
	.boxProgressProduct {max-width:460px; width:auto; margin:0px auto;}
	
	#gallery-page .boxObjSmoke {right:-100px;}
	#gallery-page .boxObjSmoke2 {left:-100px;}
	
	/* 
	fancybox CSS ====================================== */
	.gallery-slide .fancybox-image {display:block; border:5px solid #ECAA54;}
	.gallery-slide .fancybox-close {top: -18px; right: -18px; width:36px; height:36px; background:url(../images/product-detail/btnClose.png) no-repeat left top; background-size:100% auto;}
	.gallery-slide .fancybox-close:hover {background-position:left -36px;}

	
	/* 
	TH Lang CSS ====================================== */
	.th .boxProduct3 .boxContentProduct .txt1 {line-height:1;}
	.th .boxProduct3 .boxContentProduct .boxListPoint {padding-top:25px;}
	
	/* 
	EN Lang CSS ====================================== */
	.en .section-product-2 .ct_4 .title {font-size: 2em;}
	.en .boxProduct3 .boxContentProduct .txt1 {line-height:1;}
	.en .boxProduct3 .boxContentProduct .txt2 {top:0px;}
	.en .boxProduct3 .boxContentProduct .boxListPoint {padding-top:25px;}
	
	
	
	.header .boxMenu .hasSubMenu {
		display: block;
		float: none;
		margin: 0px 20px 10px 20px;
		padding-bottom: 0px;
	}
	.header .boxMenu .hasSubMenu .boxSubMenu-1 {
		display: block;
		position: relative;
		left: 0px;
		top: 0px;
		padding: 0px;
		background: none;
		min-width: inherit;
	}
	.header .boxMenu .hasSubMenu .boxSubMenu-1:before {display:none;}
	.header .boxMenu .hasSubMenu .boxSubMenu-1 a {
		margin: 0px 0px 0px 10px;
		border-top: 1px solid transparent;
		font-size: 0.9em;
	}
	
}

@media only screen and (max-width: 767px) {
	.visible-mobile {display:block;}
	
	html, body {font-size:16px;}
	
	.header .logo {width:135px;}
	.header.minMenu .logo {top:20px; width: 135px;}

	
	.section-banner .boxListBanner .banner-1 .ct_1 {left:0px; padding:15px; bottom:50px;}
	.section-banner .boxListBanner .banner-2 .ct_1 {left:0px; padding:15px; bottom:50px;}
	.section-banner .boxListBanner .banner-3 .ct_1 {left:0px; padding:15px; bottom:50px;}
	.section-banner .boxListBanner .banner-3 .bg {background-position: 6% top;}
	.section-banner .boxListBanner .oneBanner .title {font-size:1.4em; padding-bottom:5px; white-space:normal;}
	.section-banner .boxListBanner .oneBanner .des {font-size:0.8em;}
	.section-banner .boxCtrlBanner {bottom:20px;}
	
	.section-vdo {width:100%; padding:15px;}
	.section-vdo .ct_2 {padding-bottom: 0px;}
	.section-vdo .ct_2_2 .title {font-size:1.4em;}
	.section-vdo .des {font-size:0.8em;}
	.section-vdo .boxMainVdo .boxMainVdoInner {height: 200px;}
	.section-vdo .boxListVdo {margin-left:-8px; margin-right:-8px; margin-top: 15px;}
	.section-vdo .boxListVdo .oneVdo .title {font-size:0.8em;}
	.section-vdo .boxListVdo .oneVdo .thumb {margin: 0px 8px;}
	
	.section-product-1 .bgForMobile {margin-bottom: -130px;}
	.section-product-1 .ct_3 {padding:15px;}
	.section-product-1 .ct_3 .title {font-size:1.4em; white-space:normal;}
	.section-product-1 .ct_3 .title2 {font-size:1.4em;}
	.section-product-1 .ct_3 .des {font-size:0.8em;}
		
		.stone_1_mobile {display:none;}
	
	.bgOverlayMobile_2 {left:0px;}
		.smoke_2_mobile .smoke-ani {opacity:0.7;}
		.stone_5_mobile {left: 277px; top: 50px;}
		.stone_5_mobile img {width:100px;}
		.stone_6_mobile {left: 230px; top: 88px;}
		.stone_6_mobile img {width:35px;}
		.stone_7_mobile {left: 150px; top: 160px;}
		.stone_7_mobile img {width:100px;}

	.section-product-2 .ct_4 {padding:100px 15px 15px 15px;}
	.section-product-2 .ct_4 .title {font-size:1.4em; line-height:1.5; white-space:normal; padding-bottom:0px;}
	.section-product-2 .ct_4 .title2 {font-size:0.85em; padding-bottom:20px;}
	.section-product-2 .ct_4 .title2 span {padding-top:10px; padding-bottom:10px;}
	.section-product-2 .flower1 {width: 160px;}
	.section-product-2 .flower2 {width: 180px;}
	.section-product-2 .title3 {font-size: 1em;}
	.section-product-2 .des {font-size: 0.8em; line-height:1.8em; white-space:normal;}
	.section-product-2 .des br {display:none;}
	
	.section-product-3 .ct_5 {padding:220px 15px 15px 15px;}
	.section-product-3 .ct_5 .title {font-size:1.4em; white-space:normal; padding:10px 0px;}
	.section-product-3 .ct_5 .title2 {font-size:1em;}
	.section-product-3 .ct_5 .des {font-size:0.8em;}
	.section-product-3 .ct_5_1 {padding:0px 0px 20px 0px;}
	.section-product-3 .ct_5_2 {padding:0px 0px 20px 0px;}
	.section-product-3 .bgForMobile {margin-top: -60px;}
	
	.section-product-4 {padding-bottom:70px;}
	.section-product-4 .ct_6 {padding:0px 15px;}
	.section-product-4 .ct_6 .title {font-size:1.4em; padding:10px 0px;}
	.section-product-4 .ct_6 .title2 {font-size:0.95em; white-space:normal;}
	.section-product-4 .ct_6 .des {font-size:0.8em;}
	.section-product-4 .ct_6 .boxList_1 .oneList .title3 {font-size:1em;}
	.section-product-4 .ct_7_1 {font-size: 1.3em;}
	.section-product-4 .ct_7_2 {font-size: 3em;}
	.section-product-4 .bgFadeSection {bottom: -70px; height: 140px;}
	
	
	.section-product-5 {padding-top:77px;}
	
	.boxFooterHome .title {font-size: 0.8em;}
	.boxFooterHome .logo {width:160px;}
	.boxFooterHome .boxIcon {font-size: 15px; padding: 0px 4px;}
	.boxFooterHome .des {font-size:0.7em;}
	
	.boxContact1 .boxBg {top: -110px;}
	.boxContact1 .boxContactInfo {padding-top: 450px;}
	.boxContact1 .boxContactInfo .title {padding: 5px 0px; font-size: 28px; line-height: 1.2;}
	.boxContact1 .boxContactInfo .title2 {padding: 0px 0px 5px 0px; font-size: 20px; line-height: 1.6;}
	.boxContact1 .boxContactInfo .des {font-size: 0.9em;}
	.boxContact1 .boxContactInfo .boxList {padding: 10px 0px 30px 0px;}
	.boxContact1 .boxContactInfo .boxList .oneList {text-align:center; }
	.boxContact1 .boxContactInfo .boxList .oneList .txt_1 {font-size:1.1em;}
	.boxContact1 .boxContactInfo .boxList .oneList .boxIcon {font-size: 19px; padding: 0px 5px; top: 4px;}
	.boxContact1 .boxObjSmoke {bottom: 0px;}
	
	.boxContact2 .title {font-size:24px; padding:10px 0px 20px;}
	.boxContact2 .boxList {padding-bottom: 20px;}
	.boxContact2 .boxList a {padding: 0px 3px 6px 3px;}
	.boxContact2 .boxList a img {display:block; height:35px; width:auto;}
	
	.boxContact3 {padding-top: 400px;}
	.boxContact3 .boxObjSmoke {left: -20px; top: -60px;}
	.boxContact3 .boxObjSmoke2 .smoke_1 {left: -320px;}
	.boxContact3 .boxBg {width: 1300px; margin-left: -910px;}
	.boxContact3 .boxContactForm .title {padding:10px 0px 15px 0px; text-align:center; font-size:30px;}
	.boxContact3 .boxContactForm .title2 {float:none; text-align:center; padding:0px;}
	.boxContact3 .boxContactForm .title2:before {display:none;}
	.boxContact3 .boxContactForm .title2:after {display:none;}
	.boxContact3 .boxContactForm .title2 .title3 {font-size:18px; position:relative; padding:5px 10px;}
	.boxContact3 .boxContactForm .title2 .title3:before {display:block; content:''; width:12px; height:12px; position:absolute; left:0px; top:0px; overflow:hidden; background:url(../images/icon/icon-lq.png) no-repeat left top; background-size:12px;}
	.boxContact3 .boxContactForm .title2 .title3:after {display:block; content:''; width:12px; height:12px; position:absolute; right:0px; bottom:0px; overflow:hidden; background:url(../images/icon/icon-rq.png) no-repeat left top; background-size:12px;}
	.boxContact3 .boxContactForm .title2 .address {white-space:normal;}
	.boxContact3 .boxContactForm .des {padding: 5px 0px 20px 0px; text-align:center;}
	.boxContact3 .boxContactForm .boxContactFormGroup {padding:0px;}
	
	.boxProduct1 .boxContentProduct {margin: -110px auto 20px auto;}
	.boxProduct1 .boxContentProduct .des br {display:none;}
	.boxProduct1 .boxContentProductPopup {max-width:100%;}
	.boxProduct1 .boxContentProduct .des b {white-space:nowrap;}
	
	.boxProduct2 .boxContentProduct .des br {display:none;}
	.boxProduct2 .boxContentProduct .des p {margin-bottom: 5px;}
	
	.boxProduct3 .boxContentProduct {width: 370px;}
	.boxProduct3 .boxContentProduct .txt1 {font-size: 50px;}
	.boxProduct3 .boxContentProduct .txt2 {font-size: 30px;}
	
	.boxProduct4 .boxBg {top: -490px;}

	.boxCT_1 .txt1 {font-size: 24px; padding-bottom: 10px;}
	.boxCT_1 .txt1 b { font-size: 30px;}
	.boxCT_1 .txt2 {font-size: 30px; line-height: 30px; padding-bottom: 20px;}
	.boxCT_1 .txt2 i {top: 10px; font-size: 60px;}
	.boxCT_1 .txt3 {font-size: 26px; line-height: 1.4;}
	.boxProgressProduct .txtLabel {font-size:16px;}
	.boxProgressProduct .txtPercent {font-size:16px;}
	.boxCT_1 .txt7 {font-size: 48px; line-height: 40px;}
	.boxCT_1 .txt8 {font-size: 16px; line-height: 14px; }
	
	#gallery-page .titleGallery {padding: 100px 10px 20px; font-size: 1.6em;}
	#gallery-page .contentGallery {padding-top: 400px;}
	#gallery-page .contentGallery .bg {top: -650px; margin-left: -600px; width: 1200px;}
	
	/* 
	EN Lang CSS ====================================== */
	.en .section-product-2 .ct_4 .title {font-size:1.33em; padding-bottom:10px;}
	.en .section-product-2 .ct_4 .title span {display:inline;}
	.en .boxFooterHome .title {font-size:0.8em; padding:25px 0px 10px 0px;}
	
	/* 
	CN Lang CSS ====================================== */
	.cn .boxFooterHome .title {font-size:0.8em; padding:25px 0px 10px 0px;}
	
}

@media only screen and (min-width: 736px) and (max-width: 767px) {
	.section-vdo .boxMainVdo .boxMainVdoInner {height: 404px;}
}
@media only screen and (min-width: 667px) and (max-width: 735px) {
	.section-vdo .boxMainVdo .boxMainVdoInner {height: 365px;}
}
@media only screen and (min-width: 568px) and (max-width: 666px) {
	.section-vdo .boxMainVdo .boxMainVdoInner {height: 310px;}
	
}
@media only screen and (min-width: 480px) and (max-width: 567px) {
	.section-vdo .boxMainVdo .boxMainVdoInner {height: 261px;}
	
}

@media only screen and (max-width: 666px) {
	.boxProduct1 .boxContentProduct {margin: -80px auto 20px auto;}
	
	.boxProduct4 .boxBg {top: -540px;}
	
	#gallery-page .boxObjSmoke {display:none;}
	#gallery-page .boxObjSmoke2 {display:none;}

}

@media only screen and (max-width: 479px) {
	.boxProduct1 .boxContentProduct .title3 {font-size: 1em; padding: 10px 0px 15px 0px;}
	
	
	.boxProduct1 .boxContentProduct .title2 {font-size: 1.3em;}
	.boxProduct1 .boxContentProductPopup .title2 {font-size: 1.3em;}
	.boxProduct2 .boxContentProduct .title2 {font-size: 1.3em;}
	.boxProduct1 .boxContentProduct table {display:block;}
	.boxProduct1 .boxContentProduct table tr {display:block; padding-bottom:20px;}
	.boxProduct1 .boxContentProduct table tr td {display:block;}

	.boxProduct3 .boxContentProduct .txt1 {font-size: 45px;}
	.boxProduct3 .boxContentProduct .txt2 {font-size: 26px;}
	.boxProduct3 .boxObjSmoke2 .stone_1 {left: 0px; bottom: 30px;}
	.boxProduct3 .boxObjSmoke2 .stone_1 img {width:80px;}
	.boxProduct3 .boxObjSmoke2 .stone_2 {left: 17px; bottom: 50px;}
	.boxProduct3 .boxObjSmoke2 .stone_2 img {width:40px;}
	
	
	.boxCT_1 {padding: 60px 15px 40px 15px;}
	.boxCT_1 .txt1 {font-size: 22px; padding-bottom: 0px;}
	.boxCT_1 .txt3 {font-size: 20px; line-height: 1.6;}
	.boxCT_1 .txt4 {font-size:0.83em;}
	
	/* 
	EN Lang CSS ====================================== */
	.en .boxProduct3 .boxContentProduct .txt2 span {font-size:20px;}
	.en .boxCT_1 .txt1 {font-size:22px;}
	
}

@media only screen and (min-width: 412px) and (max-width: 479px) {
	.section-vdo .boxMainVdo .boxMainVdoInner {height: 223px;}
	
	
}
@media only screen and (max-width: 374px) {
	html, body {font-size:16px;}
	
	.section-vdo .boxMainVdo .boxMainVdoInner {height: 171px;}
	.section-product-2 .flower1 {width: 100px;}
	.section-product-2 .flower2 {width: 110px;}
	
	.section-product-2 .ct_4 .title2 {font-size: 0.8em;}
	
	.boxContact2 .title {font-size:20px;}
	.boxContact2 .boxList a img {height: 30px;}
	
	.boxProduct1 .boxContentProduct .title2 {font-size: 1.1em;}
	.boxProduct2 .boxContentProduct .title2 {font-size: 1.1em;}
	.boxProduct1 .boxContentProductPopup .title2 {font-size: 1.1em;}
	
	.boxProduct3 .woman {margin: 0px auto -90px auto;}
	.boxProduct3 .boxContentProduct .txt1 {font-size: 35px;}
	.boxProduct3 .boxContentProduct .txt2 {font-size: 22px;}
	.boxProduct3 .boxContentProduct .boxListPoint {padding-top:10px;}
	.boxProduct3 .boxContentProduct .btnPointPop .contentPoint .title {font-size: 18px;}
	.boxProduct3 .boxContentProduct .btnPointPop .contentPoint .title i {font-size: 24px;}
	
	.boxCT_1 .txt1 {font-size: 18px;}
	.boxCT_1 .txt1 b {font-size: 24px;}
	.boxCT_1 .txt2 {font-size: 24px; line-height: 30px; padding-bottom: 15px;}
	.boxCT_1 .txt2 i {top: 7px; font-size: 50px;}
	.boxCT_1 .txt3 {font-size: 18px; line-height: 1.4;}
	.boxCT_1 .txt7 {padding: 30px 0px 5px 0px;}
	
	
	
	/* 
	EN Lang CSS ====================================== */
	.en .section-vdo .ct_2_2 .title {font-size: 1.33em;}
	.en .boxProduct3 .boxContentProduct .txt2 br {display:none;}
	.en .boxCT_1 .txt1 {font-size:18px;}
	.en .boxCT_1 .txt1 br {display:none;}
	
}

@media only screen and (orientation : portrait) {
	.section-banner .boxListBanner .oneBanner.action .bg {
		-webkit-mask: url(../images/mask/smoke_1.png); mask: url(../images/mask/smoke_1.png);
		-webkit-mask-size:3100% 100%; mask-size: 3100% 100%;	
		
		-webkit-animation: mask_pos 1.2s steps(30) forwards;
		animation: mask_pos 1.2s steps(30) forwards;	
	}
}
@media only screen and (max-width: 767px) and (orientation : portrait) {
	.visible-mobile-port {display:block;}
}
@media only screen and (max-width: 767px) and (orientation : landscape) {
	.visible-mobile-port {display:none;}
}

@media only screen and (orientation : portrait) {
	.visible-port {display:block !important;}
	.visible-land {display:none !important;}
}
@media only screen and (orientation : landscape) {
	.visible-port {display:none !important;}
	.visible-land {display:block !important;}
}

/* 
bootstrap CSS ====================================== */
@media (min-width: 992px){
	.col-md-pdl8 {padding-left:8px;}
	.col-md-pdr8 {padding-right:8px;}
}

@media (min-width: 1200px){
	.boxFooterHome .boxSocial a:first-child {margin-left:0px;}
}