/* 
===================== LAYOUT ===================== 
*/
/* ==================================== General ==================================== */

html, body 										{ margin:0; padding:0; border:0; font-size:12px; /*line-height:1.2em; */ line-height: auto!important;
													    	vertical-align:baseline; height:100%;}
body												  { font-family: 'palatino', Arial,'微軟正黑體',sans-serif;
													      width:100%; height:auto; overflow-y:scroll; -webkit-text-size-adjust: none; 
													    }
body * 												{ outline:none; }
body:lang(th), :lang(th)      { font-family: 'sarabun';}

table 												{ border-collapse:collapse; border-spacing:0; width:100%; }

td													  { vertical-align:top; }
ol, ul 												{ /*list-style:none;*/ margin:0; padding:0; }
dl, dt, dd										{ margin:0; padding:0; }
a 													  { margin:0; padding:0; border:0; text-decoration:none;  
														    word-wrap: break-word; color: inherit;}
a img 												{ border:none; }
h1,h2,h3,h4,h5,h6							{ font-weight:normal; margin:0; padding:0; }
strong 												{ font-weight:bold; }
em 													  { font-style:italic; }
.hide												  { display: none; }
.hidemenu											{ display: none; }

.left											  	{ float:left;}
.right												{ float:right; }
.inline 											{ display: inline;}
.block 												{ display: block;}
.blockletter 									{ text-transform: uppercase;}
.cursor	 											{ cursor: pointer;}

.clearfix											{ zoom:1; }
.clearfix:after								{ content:"."; display:block; clear:both; width:0px; height:0px; visibility:hidden; font-size:0; }

::-webkit-input-placeholder 	{ color: #fff; font-size:16px; }
:-moz-placeholder 						{ color: #fff; font-size:16px; }
::-moz-placeholder 						{ color: #fff; font-size:16px; }
:-ms-input-placeholder 				{ color: #fff; font-size:16px; }

.grey											  	{ color:#999999; }
.mobile												{ display: none; }

.only-desktop									{ display:block!important; }
.only-mobile									{ display:none!important; }

/* ===================== SHARING ===================== */

/* grid */
.full												  { width:100%; }
.half												  { width:50%; }
.one_third										{ width:33.33%; }
.two_third										{ width:66.66%; }
.forty												{ width:40%; }
.sixty												{ width:60%; }

/* sep */
.sep-10												{ height: 0px; clear:both; padding: 5px 0; }
.sep-15												{ height: 0px; clear:both; padding: 8px 0 7px; }
.sep-0												{ height: 0px; clear:both; padding: 0 0; }
.sep-for-4										{ height: 0px; clear:both; padding: 0 0; }
.sep-for-3										{ height: 0px; clear:both; padding: 0 0; }
.sep-for-2										{ height: 0px; clear:both; padding: 0 0; }
.sep-line											{ height: 1px; clear:both; padding: 0 0; margin: 0 10px 0 0; background-color:#fff; }

/* h */
h1 													  { font-size: 48px; }
h2 											  		{ font-size: 36px; }
h3 											  		{ font-size: 24px; }
h4 											  		{ font-size: 16px; }
h5 											  		{ font-size: 12px; }
h6 											  		{ font-size: 10px; }
hr											  		{ padding:0; height:1px; border:0; width: 100px; margin: 1em 0; 
													    	background-color: #fff; text-align:left; }
/* form */
dl										  			{ padding:0; }
dl dt										  		{ width:20%; float:left; padding:2px 0; text-transform:uppercase; }
dl dd											  	{ width:80%; float:left; }

select												{ border:none; /*background:#606 url('../img/bg-purple-80.png') 0 0 repeat; */
												    		color:#606; padding:2px 10px; -webkit-appearance: menulist; }

input[type=text], textarea		{ padding:15px 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; color:#fff; font-size:16px;
            											box-sizing: border-box; width:100%; background:url('../img/bg-white-30.png') 0 0 repeat; border:none; }
textarea											{ height:130px; }
input[type=text].error, textarea.error				{ border: red solid 1px; }
.error-msg										{ color: red; font-size:16px; text-align:left; margin:4px 0 0 0; }
.message_box									{ color:red; font-size:16px; margin: 20px 0 0 0; }

/* pager */
.pager												{ margin:0 0 0 0 !important; padding:0; }
.pager li											{ float:left; margin:0 0 0 5px; padding:0; list-style:none; }
.pager li:first-child					{ margin:0; }
.pager a											{ display:block; width:22px; text-align:center; font-size:11px; 
														    color:#606; background:url('../img/bg-white-30.png') 0 0 repeat; 
														    border:1px solid #c2bfa4; padding-top:1px;}
.pager a:hover, .pager a.active { background:url('../img/bg-purple-80.png') 0 0 repeat; color:#fff;}

.pager a.first, .pager a.prev, 
.pager a.next, .pager a.last		{ background:url('../img/pager.png') no-repeat; text-indent:-9999px;}
.pager a.first									{ background:url('../img/pager.png') no-repeat left top;}
.pager li:hover a.first					{ background-position:left bottom;}
.pager a.prev										{ background:url('../img/pager.png') no-repeat -20px top;}
.pager li:hover a.prev					{ background-position:-20px bottom;}
.pager a.next										{ background:url('../img/pager.png') no-repeat -40px top;}
.pager li:hover a.next					{ background-position:-40px bottom;}
.pager a.last										{ background:url('../img/pager.png') no-repeat right top;}
.pager li:hover a.last					{ background-position:right bottom;}

/* buttons */
.button-warp										{ padding: 0; position: relative; text-align:left; }
.button												  { display:inline-block; padding: 2px 26px; color:#333; 
													      	border:solid 1px #333; text-transform:uppercase; }
.button:hover										{ border:solid 1px #fff; color:#fff; background-color:#333; }


/* ==================================== Structure ==================================== */
#wrap			    									{ position:relative; /*width: 1920px;*/ overflow: hidden;/*margin-left: 113px; padding-right: 200px;*/} 

/* header */
#wrapper-header 								{ z-index:1001;}
/*
#wrapper-header									{ width:100%; height:auto; position:fixed; top:0; z-index:1000; background:rgba(0,0,0,0.8);}
#header						  						{ position:relative; margin:0 auto; max-width:1920px; height:80px; }
*/
.margin 						  					{ position: relative; margin: 0;}

/* bg */
.bgsma_blank                    { background:url('../img/bg0.jpg') no-repeat top left fixed #fff; background-size: cover;/*-webkit-transition: background-image 1s ease-in-out; transition: background-image 1s ease-in-out;*/}
.bgsma 									  			{ background:url('../img/bg1.jpg') no-repeat top left fixed #fff; background-size: cover; /*-webkit-transition: background-image 1s ease-in-out; transition: background-image 1s ease-in-out;*/}
.bgsmb 										  		{ background:url('../img/bg2.jpg') no-repeat top left fixed #fff; background-size: cover;/*-webkit-transition: background-image 1s ease-in-out; transition: background-image 1s ease-in-out;*/}
.bgsmc 										  		{ background:url('../img/bg3.jpg') no-repeat top left fixed #fff; background-size: cover; /*-webkit-transition: background-image 1s ease-in-out; transition: background-image 1s ease-in-out;*/}
.bgsmd 										  		{ background:url('../img/bg4.jpg') no-repeat top left fixed #fff; background-size: cover; /*-webkit-transition: background-image 1s ease-in-out; transition: background-image 1s ease-in-out;*/}
.bgsme 										  		{ background:url('../img/bg5.jpg') no-repeat top left fixed #fff; background-size: cover; /*-webkit-transition: background-image 1s ease-in-out; transition: background-image 1s ease-in-out;*/}
.bgsma #footer,
.bgsmb #footer,
.bgsmc #footer,
.bgsmd #footer,
.bgsme #footer,
.bgsma_blank #footer            { background: #90c31f; }

/* deco */

.deco 
.sma01								  				{ position: absolute; width: 340px; height: 374px; top: 0; left: 1034px; background:url('../img/sma01.png') no-repeat center center; z-index: -1;}
.sma02									  			{ position: absolute; width: 456px; height: 595px; top: 0; right: 268px; background:url('../img/sma02.png') no-repeat center center; z-index: -2;}
.sma03									  			{ position: absolute; width: 502px; height: 479px; bottom: 0; right: 458px; background:url('../img/sma03.png') no-repeat center center; z-index: -3;}
.sma04									  			{ position: absolute; width: 413px; height: 350px; top: 350px; right: 0px; background:url('../img/sma04.png') no-repeat center center; z-index: -4;}
.sma05										  		{ position: absolute; width: 443px; height: 375px; bottom: 0; right: 108px; background:url('../img/sma05.png') no-repeat center center; z-index: -5;}

.sma1bg									  			{ position: absolute; width: 887px; height: 1012px; top: 0; right:0; background:url('../img/sma1.png') no-repeat center center; z-index: -1;}
.sma2bg									  			{ position: absolute; width: 1026px; height: 655px; top: 210px; right: 0; background:url('../img/sma2.png') no-repeat center center; z-index: -1;}
.sma3bg									  			{ position: absolute; width: 1026px; height: 655px; top: 210px; right: 0; background:url('../img/sma3.png') no-repeat center center; z-index: -1;}
.sma4tbg								  			{ position: absolute; width: 80%; height: 80%; bottom: 120px; left: 950px;background-size:contain; background-repeat: no-repeat; z-index: 10001; }
.sma4tbg:hover 									{ width: 90%; height: 90%; /*margin-left: 50px; margin-top: 100px;*/ margin-left: -2.5%; margin-top: -2.5%;}
.sma4t1bg									  		{ background-image:url('../img/cert1.jpg'); }
.sma4t2bg										  	{ background-image:url('../img/cert2.jpg'); }
.sma4t3bg											  { background-image:url('../img/cert3.jpg'); }
.sma4t4bg		  									{ background-image:url('../img/cert4.jpg'); }
.sma4t5bg			  								{ background-image:url('../img/cert5.jpg'); }
.sma4t6bg				  							{ background-image:url('../img/cert6.jpg'); }
.sma4t7bg					  						{ background-image:url('../img/cert7.jpg'); }

.deco .ribbon .rib_top					{ position: absolute; width: 299px; height: 343px; top: 0; right: 76px; background:url('../img/ribbon.png') no-repeat center center; z-index: -1;}
.deco .ribbon .rib_btm					{ position: absolute; width: 299px; height: 343px; bottom: 0; right: 76px; background:url('../img/ribbon.png') no-repeat center center; z-index: -1;}
.ribbon .rib_footer 						{ position: absolute; width: 624px; height: 66px; bottom: 0; left: 0; background:url('../img/rib_footer.png') no-repeat center center; z-index: 1;}


/* heading */
#heading								  			{ width:100%; max-width: 136px; color: #fff; font-size: 22px; line-height: 38px; vertical-align: middle; position:absolute; top:50px; left: 57px; z-index:100;}
#heading img						  			{ width:100%; max-width: 136px; margin-right: 20px; /*filter: drop-shadow(1px 1px 1px #e4e4e4);*/}
#heading span 					  			{ vertical-align:middle; /*display:table-cell;*/}
#heading a							  			{ display: inline-block; }

/* meuns - menu & submenu */
.menus										  		{ width:100%; /*max-width: 1180px;*/ color: #434343; font-size: 13px; font-weight: bold; letter-spacing: 0.5px; vertical-align: middle; text-transform: uppercase;}
.menus img									  	{ width:100%; max-width: 20px; margin: 0 30px 15px 10px; /*filter: drop-shadow(1px 1px 1px #e4e4e4);*/}
.menus span 									  { vertical-align:middle; text-transform: uppercase; display: inline-block;}
.menus span.item 				  			{ /*border: 2px solid #539dd1; border-radius: 25px;*/ padding: 12.5px 20px; margin-right: 15px; margin-bottom: 15px; cursor: pointer;} 
.menus span.item.active	  			{ /*border: 2px solid #fff; background: rgba(83,159,209, 0.7);*/ border-top: 1px solid #90c31f;} 
.menus span.item:hover          { border-top: 1px solid #f2c63f;} 
.menusplain								  		{ width:100%; max-width: 1080px; color: #fff; font-size: 13px; font-weight: bold; letter-spacing: 0.5px; vertical-align: middle; display:inline; text-transform: uppercase; text-decoration: underline; margin-left: 20px; cursor: pointer;}
.menusplain .item.active 				{ background: none;}
.menusplain .item:after 				{ content: '|'; padding: 0 10px; }
.menusplain .item:last-of-type:after	{ content: ''; padding: 0;}
/*
.menus .bsma:hover:before, .menus .bsmb:hover:before { position: absolute; z-index: 100000; content: ''; top: 40px; width:48px; height:30px; cursor:pointer; background:url('../img/mobile-menu-arrow-down.png') center center no-repeat; text-align:center;}
.menus .bsma:before                     { margin-left: 15px;}
.menus .bsmb:before                     { margin-left: 15px;}
*/

/* menu */
#menu											    	{ position:absolute; top:70px; text-align: right; }
/* submenu */
.submenu		  									{ position:absolute; top:70px; left: 75px; padding-left:15px; max-width: 250px; border-left: 1px solid #90c31f;}
.submenu span.item              { display: block;}
.submenu span.item.active       { border-top: 0; color: #90c31f;}
.submenu span.item:hover        { border: 0; color: #f2c63f;}
.submenu:before                 { border-left: 1px solid #000;}
/*
.submenu:before 									{ content: ''; width: 2px; height: 25px; background: #539dd1; position: absolute; bottom: 100%; margin-left: 30px; top: -25px;}
.submenu .item:after  						{ content: ''; width: 18px; height: 2px; background: #539dd1; position: absolute; bottom: 100%; margin-left: 22px; top: 24px;}
.submenu .item:last-of-type:after	{ width: 0;}
*/

.submenu    								   	{ top: 200px; text-align: left;}

/* language */
#language-desktop								{ float:right; width: auto; margin-right: 30px; padding: 0 10px; }
#language-desktop>li 						{ display:inline-block; /*float:left;*/ margin: 0; }
#language-desktop>li:first-child{ content:"/"; /*border-right: 1px solid #fff;*/ }
#language-desktop>li>a					{ display:block; color:#618c02; font-size:12px; padding: 0; }
#language-desktop>li>a:hover		{ color:#f2c63f; }
#language-desktop>li.midline 		{ font-weight: normal; color:#618c02; font-size: 8px;}


#wrapper-content 								{ min-height: 940px; /*position: absolute;*/}

.content 									  		{ float:left;/* display: inline-block; */}

.content img 										{ width:100%;}
.content.text										{ color: #424242; margin-top: 250px;  /*padding-bottom: 5%;/*margin-right: 100px; position:absolute; */}
.content .texts									{ margin-left: 340px;}
	
.content.text .title						{ color: #fff; font-weight: 500; color: #6e9f02; font-size: 43px; line-height:60px; margin-top: 25px; }
.content.text .texts 						{ font-size: 16px; line-height: 26px; font-weight: normal;}

.content.text .home 								{ font-size: 26px; line-height: 43px; color: #f3e9cb; text-shadow: 1px 1px 3px #000;}
.content.text .home .bold						{ font-size: 51px; font-weight: 500; color: #90c31f; padding-right: 10px;} 
.content.text .home:first-of-type   { padding-top: 10%; padding-bottom: 50px;}
.content.text .home:last-of-type    { padding-left: 100px;}

.content.text .map 									{ margin-left: 10px; background: url('../img/map.png'); width:19px; height:25px; display:inline-block;}
.content.text .map:hover 						{ background: url('../img/map_v.png');}

.content.text.smtbl 							  { /*max-width: 1280px;*/ max-width: 90%; margin-bottom: 60px;}
.content.text.smtbl.content .texts	{ border-top: 1px solid #90c31f;}
.content.text.smtbl.sma0 .subtext   { margin: 18px 0;}
.content.text.smtbl .texts          { max-width: 640px;}
.content.text.smtbl.sm0 .texts,
.content.text.smtbl.sma2 .texts,
.content.text.smtbl.sma3 .texts     { max-width: none;}

.content.text.smtbl.smc0,.content.text.smtbl.sme0	{ max-width: 1920px;}

.content.text.smtbl .subtitle				{ margin: 36px 0 0;}
.content.text.smtbl .subtext				{ margin: 36px 0; }
.content.text.smtbl .subtitle	li		{ margin: 0 0 0 36px;}
.content.text.smtbl .subsubtitle		{ margin: 0 0 0 36px;}
.content.text .context.two_third    { margin-right: 36px;}
.content.text .flex-container       { display: flex;}

.content.text.smtbl .subtext h1 		{ font-size: 24px;}

.content.text.smtbl .subsubmenu 		{ padding: 36px 0 18px;}
.content.text.smtbl .smb1t					{ margin-bottom: 120px;}
.content.text.smtbl .smb1t4,
.content.text.smtbl.smb2,
.content.text.smtbl.smb3						{ margin-bottom: 120px;}

.content a 										    	{ color:#424242; text-decoration: underline;}
.content .highlight a 							{ color:#f2c63f; text-decoration: underline;}

.content .world 								  	{ padding: 36px 0 0;}
.content .world .area 							{ position:absolute; }
.content .world .area:hover 				{ opacity:0.2;}

.content .world .area.world1a				{ left: 270px; top: 80px; width: 270px; height: 222px;}
.content .world .area.world1b				{ left:600px; top: 250px; width:120px;	height:32px;}
.content .world .area.world1c				{ left:640px; top: 480px; width:150px;	height:32px;}
.content .world .area.world2a				{ left:720px; top: 90px; width:400px; height:182px;}
.content .world .area.world2b				{ left:1000px; top: 340px; width:110px;	height:32px;}
.content .world .area.world3q			  { left: 840px; top: 273px; width: 160px; height: 110px;}
.content .world .area.world4q				{ left: 970px; top: 443px; width: 260px; height: 170px;}

.content .desc .subtext 						{ position: absolute; text-transform: uppercase;}
.content .desc .world1 .subtext 		{ left: 800px; top: 300px;}
.content .desc .world2 .subtext 		{ left: 500px; top: 300px;}
.content .desc .world3 .subtext 		{ left: 600px; top: 300px;}
.content .desc .world4 .subtext 		{ left: 200px; top: 300px;}

.content .highlight 								{ color: #f2c63f;}
.content .strong 									  { font-weight: bold;}

/* footer */
#wrapper-footer									  	{ position:fixed; margin:0 auto; /*max-width:1920px;*/ width:100%; bottom: 0px; padding:40px 0 40px; color: #a0a0a0; z-index: 1000;}
/*#footer 											    { position:absolute; left:0px; padding: 35px 0px; background-color:#000; text-align:left; font-size:14px; }*/
#footer												      { position:absolute; left:0px; bottom: 0px;  width:100%; color: #fff; background: none; text-align:center; font-size:11px; line-height:16px; text-transform:uppercase;/*text-shadow: 1px 1px 10px #e4e4e4;*/}
.footicon								      			{ position:absolute; left:80px; /*padding: 35px 0px;*/ font-size:14px; margin-top: 8px;}

.footicon										      	{ float:right; /*margin: 0 20px 0 0; padding: 25px 0 0;*/ }
.footicon>ul									    	{ display:inline-block; vertical-align: middle;}
.footicon>ul>li									  	{ display:inline-block; /*float:left; margin: 0 0 0 30px;*/ /*border-left: 1px solid #292929;*/}
.footicon>ul>li>a								  	{ display:block; height: 18px;}

.footicon>ul>li>a.mail							{ width:25px; background:url('../img/mail.png') center center no-repeat; }
.footicon>ul>li>a.utube							{ width:90px; background:url('../img/i_utube.png') center center no-repeat; }
.footicon>ul>li>a.facebook					{ width:90px; background:url('../img/i_fb.png') center center no-repeat; }

.footicon>ul>li>a.mail:hover			  { width:25px; background:url('../img/mail.png') center center no-repeat; }
.footicon>ul>li>a.utube:hover				{ width:90px; background:url('../img/i_utube_v.png') center center no-repeat; }
.footicon>ul>li>a.facebook:hover		{ width:90px; background:url('../img/i_fb_v.png') center center no-repeat; }


/* mobile */
											  
/* slide menu */
.mobile-menu-btn								  	{ position: absolute; top: 70px; right:50px; width: 20px; height: 18px; display: none; z-index: 10003;
													            background:url('../img/mobile-menu-btn.png') center center no-repeat; cursor: pointer; }
.mobile-menu-btn.active							{ background:url('../img/mobile-menu-close.png') center center no-repeat; }

#mobile-plane									      { position:absolute; top:0; left:0; width:100%; height:100%; cursor:pointer;
													            background:#6e9f02; z-index:10001; display:none; }
.wrapper-slide-menu									{ position: fixed; top: 120px; bottom: 0; width: 100%; overflow: auto; z-index: 10002;}

.m-menu 									      		{ display: none;}
.m-logo											      	{ position:absolute; top:40px; left: 37px;  z-index: 10004; display: none;}
.m-logo img								  		  	{ width:100%; max-width: 80px; margin-right: 20px; /*filter: drop-shadow(1px 1px 1px #e4e4e4);*/}	
.m-image 										      	{ display: none;}

.slide-menu									    		{ width: 100%; height:auto; position:relative; display:none; }
.slide-menu>li									  	{ display:block; position:relative;  }
.slide-menu>li:first-child					{ border-top:none; }
.slide-menu>li>span									{ display:block; position:absolute; right:36px; top:18px; width:48px; height:30px; cursor:pointer; background:url('../img/mobile-menu-arrow-down.png') center center no-repeat; text-align:center; }	
.slide-menu>li>span.active					{ background:url('../img/mobile-menu-arrow-up.png') center center no-repeat; }
.slide-menu>li>a									  { display:block; color:#fff;  padding: 25px 0; font-size:15px; text-align:center; cursor: pointer;}
.slide-menu>li>a:hover							{ color:#fff; text-decoration:none; }
.slide-menu>li>ul								  	{ display:none; }
.slide-menu>li>ul>li								{ display:block; }
.slide-menu>li>ul>li>a							{ display:block; color:#fff; padding: 25px 0; font-size:14px; text-align:center; text-decoration:none; cursor: pointer; background: #f2c63f;}
.slide-menu>li>ul>li>a:hover				{ color:#fff; }

/* mobile language */
#language-mobile			  						{ padding: 15px 0; text-align:center; font-size:15px; color:#fff;  }
#language-mobile span								{ display:inline-block; margin: 0 10px; }
#language-mobile span a,
#language-mobile span a:hover				{ color:#fff; text-decoration:none; }


@keyframes fade-out {
	0% { opacity: 1;/* transform: scale(1);*/}
	95% {opacity: 0;/* transform: scale(1);*/}
	100% { opacity: 0;}
}
@keyframes fade-in {
	0% { opacity: 0;/* transform: scale(.1);*/}
	5% {opacity: 0;/* transform: scale(0.95);*/}
	100% { opacity: 1; /*transform: scale(1);*/}
}
												  
@keyframes slideInFromTop {
  0% {transform: translateY(-30%);}
  50% {transform: translateY(0);}
  100% {transform: translateY(-30%);}
}													  
@keyframes slideInFromLeft {
  0% {transform: translateX(0);}
  50% {transform: translateX(-10%);}
  100% {transform: translateX(0);}
}
@keyframes slideInFromRight {
  0% {transform: translateX(0);}
  50% {transform: translateX(20%);}
  100% {transform: translateX(0);}
}
@keyframes slideDown1 {
  0% {transform: translateY(0);}
  100% {transform: translateY(48px);}
}
@keyframes slideDown2 {
  0% {transform: translateY(0);}
  100% {transform: translateY(80px);}
}		
@keyframes slideDown3 {
  0% {transform: translateY(0);}
  100% {transform: translateY(110px);}
}
@keyframes slideUp1 {
  0% {transform: translateY(48px);}
  100% {transform: translateY(0);}
}
@keyframes slideUp2 {
  0% {transform: translateY(80px);}
  100% {transform: translateY(0);}
}		
@keyframes slideUp3 {
  0% {transform: translateY(110px);}
  100% {transform: translateY(0);}
}

@keyframes text-in {
  0% {transform: translateY(-10%); opacity:1;}
  100% {transform: translateY(0); opacity:1;}
}
@keyframes text-out {
  0% {transform: translateY(0); opacity:1;}
  100% {transform: translateY(-10%); opacity:1;}
}