/*-----------------------------------------------------------------------------
		GENERAL STYLE CSS (Body, Fonts, links)  updated-2022
------------------------------------------------------------------------------*/

:root { 
    --primary_color:#222222;
    --primary_color_dark:#5e5e5e;

	--primary_textcolor:#222222;
	--secondary_textcolor:#fff;  

	--body_color:#f4f1eb; 
	--div_color:none;
	--div_color_dark:#bdbdbd; 
	--logo_color:none;  
	--blue_link_color:#06c;
}


body {	
	font-family:'Roboto','PingFang TC', 'Noto Sans TC', sans-serif;
	line-height:1.5;
	font-size:16px;
	background-color:#fff;
	margin:0px;
	padding:0px;
	color:var(--primary_textcolor);
	z-index:800;	
	/* max-width: 1280px; */
}

.content {
    width:100%;
	position:absolute;
	top:0;
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
}



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

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

.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:210%; margin-bottom:0; margin-top:0; letter-spacing:0.08em; font-weight:650; }
h2 { font-size:120%; margin-bottom:0; margin-top:0; letter-spacing:0.05em; font-weight:600; }
h3 { font-size:120%; margin-bottom:0; margin-top:0; letter-spacing:0.05em; font-weight:300; }
h4 { font-size:100%; 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*/ 
/* p  {	
	text-align:justify;
	text-justify:inner-word;
} */

p.small  {font-size: 80% ;margin-bottom: 0; margin-top:0;letter-spacing:0.1em;}


/*---------------------------------------------------------
							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 --*/
h4 a:link    {color:var(--blue_link_color); text-decoration:none;}
h4 a:hover {text-decoration: underline;}
h4 a:visited    {color:var(--blue_link_color); text-decoration:none;}
p a:link    {color:var(--blue_link_color); text-decoration:none;}
p a:visited {color:var(--blue_link_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-color:#fff;
	}
  
	body {
		background: #2a2a2a;	
	}

}


/*************************
		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%; }
}