/*-----------------------------------------------------------------------------
		GENERAL STYLE CSS (Body, Fonts, links)  updated-2024
------------------------------------------------------------------------------*/
:root { 
    --primary_color:#27b54a;  /*--not used--*/
	--secondary_color:#464646; /*--not used--*/

	
	--primary_textcolor:#121212;
	--secondary_textcolor:#797676;;  

	--body_color:#ffffff; 
	--div_color:#eeefef;
	--div_color_dark:#bdbdbd;   
	--logo_color:#CF1126;

}



body {	
	font-family: 'Roboto','Noto Sans TC', 'Noto Sans SC',sans-serif;
	line-height: 1.5;
	font-size: 16px;
	margin: 0px;
	padding: 0px;
	color: var(--primary_textcolor);
	background-color: var(--body_color);	
	z-index: 800;	
}

.content {  
	display: block;
	width: 100%;
	position: absolute;
	top: 0;
	margin: 0;
	padding: 0;	
	box-sizing: border-box;
}




/*---------------------------------------------------------
			ICONS (Used on Body and Headers)
----------------------------------------------------------*/

/*-------- Right Arrow for Learn More Link ------*/
.arrow {
	border: solid var(--logo_color);
	border-width: 0 1.5px 1.5px 0;
	display: inline-block;
	padding: 3px;
  }

.arrow-right {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.arrow-bottom {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	margin-bottom:2px;
}

/*--Google Material Icons--*/
.gIcon-thin {
	font-variation-settings:
	'FILL' 0,
	'wght' 350,
	'GRAD' 0,
	'opsz' 20;
  }

.gIcon-small {
	font-variation-settings:
	'FILL' 0,
	'wght' 300,
	'GRAD' 0,
	'opsz' 20;
  }


/*---------------------------------------------------------
							FONTS
----------------------------------------------------------*/

h1 { font-size:280%; margin-bottom:0; margin-top:0; letter-spacing:0.01em; }
h2 { font-size:200%; margin-bottom:0; margin-top:0; letter-spacing:0.01em; }
h3 { font-size:150%; margin-bottom:0; margin-top:0; letter-spacing:0.01em; font-weight:500; }
h4 { font-size:130%; margin-bottom:0; margin-top:0; letter-spacing:0.01em; font-weight:200; }
p  { font-size:100%; margin-bottom:0; margin-top:0; letter-spacing:0.01em; font-weight:100; }
	
/*for Chinese words*/ 
	/*text-align:justify;
	/*text-justify:inner-word;*/


/* p.strong {font-weight:bold;}
p.small  {font-size: 80% ;margin-bottom: 0; margin-top:0;} */


/*---------------------------------------------------------
				LINKS
----------------------------------------------------------*/

/*-- Applied to all links --*/
a:link, a:visited { 
	font-size: 100%;
 	text-decoration: none;
  	font-weight: 100;
  	background-color: transparent;
	letter-spacing: 0.01em; 
}

/*-- Applied to body links --*/
p a:link    {color:var(--logo_color); text-decoration:none;}
p a:visited {color:var(--logo_color);}




/*************************
		Desktop
**************************/	

#mobile, #ipad { display: none; }
#desktop { display: block; }



/*************************
		Big Monitor
**************************/	

@media screen and (min-width: 1920px) {

	.content {
		width: 1920px;
		margin: 0 12vw;
		height: auto;
		text-align: center;
		padding: 0;
		background: var(--body_color);
	}
  
	body {
		background: var(--div_color_dark);	
	}

}


/*************************
		iPad Air & Mini
**************************/	

@media screen and (max-width: 820px) {

	#mobile, #desktop, #desktop-popup { display: none; }
	#ipad { display: block; }	
	
	h1 { font-size:230%; line-height: 1.2; }
	h2 { font-size:145%; line-height: 1.2; }
	h3 { font-size:130%; }
	h4 { font-size:110%; line-height: 1.2; font-weight:400; }
	p  { font-size: 100%; line-height: 1.3; }

	ul li { font-size: 100%; line-height: 1.3; }	
}


/***************************
		iPhone
****************************/	

@media screen and (max-width: 470px) {

	#desktop, #ipad, #desktop-popup  { display: none; }
	#mobile { display: block; }

	h1 { font-size:200%; }
	h2 { font-size:160%; }
	h3 { font-size:130%; }
	h4 { font-size:110%; }
	p  { font-size: 95% }

	ul li { font-size: 95%; }
}