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

: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','Noto Sans TC', sans-serif;
	line-height: 1.5;
	font-size: 1rem;
	background-color: #fff;
	margin: 0px;
	padding: 0px;
	color: var(--primary_textcolor);
	z-index: 800;	
}

.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-left {
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
}

.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;
  }


/*------------------------------------
		 BIG DIV-Styles
-------------------------------------*/	
.BigDiv-colorbg{
	background:#f5f5f7;	
}
 
.BigDiv-borderR {
	border-radius:20px;
	/* box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2); */
}

.Shadows {
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2);
}

.BigDiv-borderLine {
	border:1px solid #f5f5f7;;
}






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

h1 { font-size:210%; margin-bottom:0; margin-top:0; letter-spacing:0.08em; font-weight:700; }
h2 { font-size:160%; margin-bottom:0; margin-top:0; letter-spacing:0.05em; font-weight:600; }
h3 { font-size:130%; margin-bottom:0; margin-top:0; letter-spacing:0.05em; font-weight:400; }
h4 { font-size:100%; margin-bottom:0; margin-top:0; letter-spacing:0.02em; font-weight:400; }
p  { font-size:100%; margin-bottom:0; margin-top:0; letter-spacing:0.01em; }


/*for Chinese words*/ 
/* h1 {	
	text-align:justify;
	text-justify:inner-word;
}  */

p.small  {font-size: 90% ;margin-bottom: 0; margin-top:0;letter-spacing:0.01em;}
.strong {font-weight:600;}


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

/*-- Applied to all links (header needs this) --*/
a:link, a:visited { 
  text-decoration: none;
  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;	
	}

	h1 { font-size:260%; margin-bottom:0; margin-top:0; letter-spacing:0.08em; font-weight:700; }
	h2 { font-size:180%; margin-bottom:0; margin-top:0; letter-spacing:0.05em; font-weight:600; }
	h3 { font-size:150%; margin-bottom:0; margin-top:0; letter-spacing:0.05em; font-weight:400; }
	h4 { font-size:120%; margin-bottom:0; margin-top:0; letter-spacing:0.02em;  }
	p  { font-size:120%; margin-bottom:0; margin-top:0; letter-spacing:0.01em;  }

}



/*************************
		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; }
	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: 180%; }
	h2 { font-size: 130%; }
	h3 { font-size: 130%; }
	h4 { font-size: 110%; }
	p  { font-size: 110%; }

	ul li { font-size: 100%; }


	.BigDiv-borderR {
		margin-bottom:5%;
	}

	.BigDiv-SLine {
		border-right:none;
		border-bottom:solid 1px #eeefef;
		margin:30px 0;
	}
}