	
	button, input, *:focus 	{ outline:none; border:none;}
	* {box-sizing: border-box}
	
	body 			{ margin:0; padding:0; background:#fff; opacity:0;
					      font-family: 'Montserrat Medium','Noto Sans TC';
    	 -webkit-font-smoothing: antialiased;
    				font-weight:normal; color:#333; line-height:1.4;
					  -webkit-font-smoothing: antialiased;
  					 -moz-osx-font-smoothing: grayscale;}
	body.ready 		{ opacity:1; }
	body.font-a 	{ font-size:14px; }
	body.font-aa 	{ font-size:16px; }
	body.tc.font-aa 	{ font-size:18px; }
	body.font-aaa 	{ font-size:18px; }

	div,header,section,ul,li,a,main { position:relative;}
	h1,h2,h3,h4,p 	{ margin:0; }
	a 				{ cursor:pointer; }

	header 				{ position:fixed; top:0; left:0; width:100%; background:#fff; z-index:1000; outline: solid #ececec 1px; /*outline-offset: 1px;*/}
	header img.logo 	{ position:relative; height:50px; width:auto; top:33px; left:0px; transition: all 0.3s ease-out;  }
	header nav 			{ position:absolute; left: auto; top:68px; /*transform:translate(0,-50%);*/ font-size:14px;}
	header 				{ transition: all 0.3s ease-out; }
	/* main 				{ padding-top:130px; } */
	.main { min-height: 100vh; }

	header, header>.pg-container { height: 120px; }
	header>.pg-container 		 {  background-color:transparent; }
	#body.full-general #full-container { margin-top: 120px;  }


	body.smhead header,
	body.smhead header>.pg-container 	{ height:65px;  }      
	body.smhead header img.logo 		{ height:32px; top:16px }
	/* body.smhead main 					{ padding-top:85px; } */
	body.smhead header nav 				{ top:24px }
	body.smhead .top-quicklink 			{ display:none; }

	.clearfix::after { content: ""; clear: both; display: table;}


  	/* • Go to Top
   	------------------------------------------------------------------------- */
	.gotop,
    .gotop span   	{ width:60px; height:60px; }

    .gotop.show 	{ opacity:1; visibility: visible; }           
	.gotop  		{ position:fixed; bottom:120px; right:0; z-index:1500; opacity:0; visibility: hidden; 
					display:block; text-align:center; text-decoration:none; color:#333; cursor:pointer;
			              -webkit-transition: 1s;
			                 -moz-transition: 1s;
			              	      transition: 1s;}
	.gotop:hover	{ color: #fff;}
	.gotop span     { display:block; margin-bottom:0px; background:#ececec;
		                  -webkit-transition: 1s;
		                     -moz-transition: 1s;
		                          transition: 1s;}
	.gotop i 		{ font-size:25px; line-height:normal; margin-top:18px}
	.ews .gotop { display: none; }



  	/* • Custom Page Layout
   	------------------------------------------------------------------------- */
	.pg-container 			{ max-width:80%; margin:0 auto; transition: all 0.3s ease-out; position:relative;}
	.pg-container::after 	{ content: ""; clear: both; display: table; }


  	/* • Common
   	------------------------------------------------------------------------- */
	.float-r	{ float:right;}
	.float-l 	{ float:left}

	.general h1, .general h2, .general h3 	{ margin-bottom:10px;}
	#body .general h2, #body.index h2 { font-size:40px; line-height:1.2; text-transform:uppercase;}
	#body .general h3, #body.index h3 { font-size:32px; line-height:1.2; text-transform:uppercase;}
	
	#body.index h4 	     { font-size:26px; line-height:1.2; text-transform:uppercase;}
	#body .general h4       { font-size:20px; line-height:1.2; text-transform:uppercase;}


   .txt-sky-blue		{ color: rgba(0, 155, 222, 1); }
   .txt-sea-blue   		{ color: rgba(0, 46, 109, 1);  }
   .txt-horizon-blue   	{ color: rgba(154, 202, 235, 1);}
   .txt-green  			{ color: rgba(0, 150, 57, 1);  }
   .txt-yellow 			{ color: rgba(255, 198, 39, 1);}
   .txt-orange  		{ color: rgba(238, 117, 35, 1);}
   .txt-aqua  	 		{ color: rgba(84, 187, 171, 1);}

   .bg-sky-blue			{ background-color: rgba(0, 155, 222, 1); }
   .bg-sea-blue   		{ background-color: rgba(0, 46, 109, 1);  }
   .bg-horizon-blue   	{ background-color: rgba(154, 202, 235, 1);}
   .bg-green  			{ background-color: rgba(0, 150, 57, 1);  }
   .bg-yellow 			{ background-color: rgba(255, 198, 39, 1);}
   .bg-orange  			{ background-color: rgba(238, 117, 35, 1);}
   .bg-aqua  	 		{ background-color: rgba(84, 187, 171, 1);}


  	/* • Inside Page Common
   	------------------------------------------------------------------------- */
    .content-wrapper { padding:50px 0 0 0; max-width: 64%; }
	


  	/* • Search
   	------------------------------------------------------------------------- */
	#body .top-quicklink			{ position:absolute; }
	.top-quicklink	 			{ right:0; top:10px; transition: all 0.3s ease-out;}
	.top-quicklink .tq-col1  	{ float:left; }
	.top-quicklink .tq-col2  	{ float:left; background-color:#ececec; height:40px; }
	.search-box 				{ width:fit-content; height:fit-content; position:relative; border-right:1px solid #fff;}
	.input-search 				{ width:40px; height:40px; border-style:none; padding:10px; font-size:16px; letter-spacing:normal; outline:none;
								  background-color:#ececec; color:#333; transition: all .5s ease-in-out;}
	.input-search::placeholder 	{ color:#333; font-size:14px; letter-spacing:normal;}
	.btn-search 				{ width:40px; height:40px; border-style:none; font-size:16px; font-weight:normal; outline:none; cursor:pointer;
	  					  		  position:absolute; right:0px; color:#333; background-color:#ececec; pointer-events:painted;}
	.btn-search:focus ~ .input-search 	{ width:300px; border-radius:0px; background-color: #ddd;
														  	transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
										-webkit-border-top-left-radius: 5px;
									 -webkit-border-bottom-left-radius: 5px;
										    -moz-border-radius-topleft: 5px;
										 -moz-border-radius-bottomleft: 5px;
											    border-top-left-radius: 5px;
											 border-bottom-left-radius: 5px;}
	.input-search:focus 		{ width:300px; border-radius:0px; background-color:transparent;  border-bottom:1px solid rgba(255,255,255,.5);
														    transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);}

	/* Arabic language */
	#body.ar main 	{/*  direction: rtl; */ /*text-align: right;*/	 }
	#body.ar main #banner 	{ /* direction: ltr; */ /*text-align: right;*/	 }
	.ar .riche { direction: rtl; }
	


	/* ==========================================================================
	    Media Style
	============================================================================= */
	@media only screen and (max-width:1600px) {
	.pg-container 	{ max-width:90%;}
    .content-wrapper { max-width: 80%; }
	}

	@media only screen and (max-width: 1400px) {
	#body .general h2, #body.index h2 { font-size:36px; }
	#body .general h3, #body.index h3 { font-size:30px; }
	#body.index h4      { font-size:24px; }
	#body .general h4 { font-size:20px; }
	}

	@media only screen and (max-width: 1024px) {
	#body .general h2, #body.index h2 	{ font-size:30px; }
	#body .general h3, #body.index h3 	{ font-size:26px; }
	#body.article .general h3	{ font-size:20px; }
	#body.index h4 	    { font-size:20px; }
	#body .general h4 	{ font-size:20px; }
	}


    @media only screen and (max-width:1100px) {
 	.pg-container 	{ max-width:95%;}
    .top-quicklink 	{ display:none; }
	#full-container.content-wrapper { padding-top:0px; }
	#full-container .content-wrapper { padding-top:0px; }

	header img.logo,
	body.smhead header img.logo			{ height:45px; top:11px }
	header, header>.pg-container,
	body.smhead header,
	body.smhead header>.pg-container 	{ height:70px; background-color:#fff; }   
	header>.pg-container { padding-right:0; padding-left:2.5%; width:100%; max-width:100%; }   
 
	#full-container.content-wrapper{ padding-top: 10px;  }

    }


	@media only screen and (max-width:767px) {
 	.pg-container 		 { max-width:90%;}
	header>.pg-container { padding-left:5%; }   

	header img.logo,
	body.smhead header img.logo			{ height:38px; top:11px }
	header, header>.pg-container,
	body.smhead header,
	body.smhead header>.pg-container 	{ height:60px; background-color:#fff; }      

	#body.full-general #full-container { margin-top:60px;  }
	#body.article .general h3	{ font-size:16px; }

	}


	@media only screen and (max-width:300px) {
	header img.logo,
	body.smhead header img.logo			{ height:30px; top:14px; }
	}

