/*-----------------------------------------------------------------------------
		COLLAPSIBLE updated-2026
------------------------------------------------------------------------------*/

/*=================================================================
	PAGES:
	process
==================================================================*/	



/*********************
		DESKTOP
**********************/	

.BigDiv-collapsible {
	display: block;
	width: 80%; 
	margin: 10px auto 60px auto; 
}

.BigDiv-collapsible-innerdiv {
	margin: 10px auto; 	
}


.BigDiv-collapsible-innerdiv button {
	background: transparent;	
}

.BigDiv-collapsible-innerdiv button:focus {
	background:transparent;	
}


/*------- BUTTON -------*/

.collapsible {
	position: relative;
	color: var(--primary_textcolor);  
	cursor: pointer;
	padding: 24px; 
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 130%;
	letter-spacing: 0.05em;
	font-weight: 400;
	font-family:'Roboto','Noto Sans TC', sans-serif;
}

/*-- PLUS SIGN (in BUTTON section) --*/
.collapsible:after {
	content: "";
	position: absolute;
	right: 0;
 	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--primary_color_dark); 
	border-bottom: 2px solid var(--primary_color_dark); 
	transform: translateY(-50%) rotate(45deg); /* down */
	transition: transform 0.25s ease;	
}

.collapsible.active::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--primary_color_dark); 
	border-bottom: 2px solid var(--primary_color_dark); 
  	transform: translateY(-50%) rotate(-135deg); /* up */
}

/*---FAQ (Answers)---*/
.faqcontent {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  border-bottom: 1px solid #eeefef;  
}

.faqcontent p {
	padding: 10px;
	margin-right: 30px;
	margin-left: 14px;
	text-align: left;
}



/*************************
		iPad Mini
**************************/	

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

	.BigDiv-collapsible {
		display: block;
		width: 80%; 
		margin: 10px auto;
		text-align: center;
		padding: 0;
	}

	.faqcontent {
		width: 100%;
		text-align: left; 
	}

	.faqcontent p {
		margin-right: 30px;
		margin-left: 10px;
	}

}



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

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

	.BigDiv-collapsible {
		display: block;
		width: 86%;  
		margin:0 auto;   
	}

	.collapsible {
		padding: 15px auto;
		width: 100%;
		border: none;
		text-align: left;
		outline: none;
		
	}

	.faqcontent p {
		padding: 10px;
		margin-inline: 10px 20px;		
	}

}