/*----------------------------------------------------------
	2024.03.24	響應式網頁設定
-----------------------------------------------------------*/
@media screen and (max-width: 1400px) {
	#header	.logo	h1	{	font-size:24px; }
	.section-heading	{	font-size:1.70em; }
	.product_category	{	width:12em; margin-left:0.5em; }

	.app	{
		height:100%;
		display: flex;
		flex-direction:column ;
		justify-content: center;
		align-items: center;
		aspect-ratio: 1 / 1;
		border-color: #ccc ;
		border-style: solid ;
		border-width: 1px ;
		border-radius:10px;
		font-size:1em;
		line-height:1.2em;
		height: 100%; /* This will ensure that the divs take the full height of the parent */
	}
	.app:hover		{	border-color:#ccc !important; background-color:#ccc; color:#444; }
	.app		i	{	color:#666;font-size:2.5em; }
	.app:hover	i	{	color:#444; }

	.touch			{	border-color:#96c7ea ; background-color:#bfdff6; color:#5499c9; }
	.touch:hover	{	border-color:#96c7ea ; background-color:#96c7ea; color:#2d71a1; }
	.touch		i	{	color:#5499c9; }
	.touch:hover i	{	color:#2d71a1; }
	.logout			{	border-color:#fcc ; background-color:#fff0f0; color:#f00; }
	.logout:hover	{	border-color:#fcc ; background-color:#ffcccc; color:#a00; }
	.logout		i	{	color:#f00; }
	.logout:hover i	{	color:#a00 !important; }
	.modelcard		{	border-color:#aea ; background-color:#efe; color:#494; }
	.modelcard:hover{	border-color:#aea ; background-color:#aea; color:#252; }
	.modelcard	i	{	color:#494; }
	.modelcard:hover	i	{	color:#252; }
	.modelface		{	border-color:#EEAD15 ; background-color:#F7D993; color:#89630A; }
	.modelface:hover{	border-color:#EEAD15 ; background-color:#EEAD15; color:#553E06; }
	.modelface	i	{	color:#89630A; }
	.modelface:hover	i	{	color:#553E06; }

	.app.disable	{
		border:#ccc dashed 1px ;
		background:#eee ;
		border-radius:10px;
		color:#aaa ;
		cursor: not-allowed !important ;
	}
	.app.disable:hover	{	color:#666 ;	}
	.app.disable	i	{	color:#fff;background-color: #eee ;font-size:2.5em; }
	.app.disable:hover	i	{	text-shadow:#999 0px 0px 1px;	}

	.notice_open			{	position:relative; border-color:#96c7ea ; background-color:#bfdff6; color:#5499c9; font-size:1em; padding:1em; overflow-wrap: break-word; word-break: break-word; white-space:normal; }
	.notice_open:hover		{	position:relative; border-color:#96c7ea ; background-color:#96c7ea; color:#2d71a1; font-size:1em; }
	.notice_open		i	{	color:#5499c9; }
	.notice_open:hover	i	{	color:#2d71a1; }

	.notice_open	span.people{	position:absolute; bottom:12px; right:6px; font-size:3em; font-family:arial ; color:#d5eaf9; letter-spacing:-2px; 
			text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.02),
						-1px 1px 2px rgba(0, 0, 0, 0.02),
						 1px -1px 2px rgba(0, 0, 0, 0.02),
						 -1px -1px 2px rgba(0, 0, 0, 0.02);
	}
}
@media screen and (max-width: 1200px) {
	#header	.logo	h1		{	font-size:22px; }
	.section-heading		{	font-size:1.50em; }
	.product_category		{	width:10em;height:1.2em;margin-left:0.25em; }
	.color-wanted			{	font-size:12px; }
	.navbar	a				{	font-size:14px; padding:7px 0 7px 7px; }
	.navbar .dropdown ul li {	min-width:14em; }
	.navbar .dropdown ul a	{	font-size:14px;	max-width:13em; }
	.navbar .dropdown ul a i{	font-size:14px; }

	.app	{
		height:100%;
		display: flex;
		flex-direction:column ;
		justify-content: center;
		align-items: center;
		aspect-ratio: 1 / 1;
		border-color: #ccc ;
		border-style: solid ;
		border-width: 1px ;
		border-radius:10px;
		font-size:1em;
		line-height:1.2em;
		height: 100%; /* This will ensure that the divs take the full height of the parent */
	}
	.app:hover		{	border-color:#ccc !important; background-color:#ccc; color:#444; }
	.app		i	{	color:#666;font-size:2.5em; }
	.app:hover	i	{	color:#444; }

	.touch			{	border-color:#96c7ea ; background-color:#bfdff6; color:#5499c9; }
	.touch:hover	{	border-color:#96c7ea ; background-color:#96c7ea; color:#2d71a1; }
	.touch		i	{	color:#5499c9; }
	.touch:hover i	{	color:#2d71a1; }
	.logout			{	border-color:#fcc ; background-color:#fff0f0; color:#f00; }
	.logout:hover	{	border-color:#fcc ; background-color:#ffcccc; color:#a00; }
	.logout		i	{	color:#f00; }
	.logout:hover i	{	color:#a00 !important; }
	.modelcard		{	border-color:#aea ; background-color:#efe; color:#494; }
	.modelcard:hover{	border-color:#aea ; background-color:#aea; color:#252; }
	.modelcard	i	{	color:#494; }
	.modelcard:hover	i	{	color:#252; }
	.modelface		{	border-color:#EEAD15 ; background-color:#F7D993; color:#89630A; }
	.modelface:hover{	border-color:#EEAD15 ; background-color:#EEAD15; color:#553E06; }
	.modelface	i	{	color:#89630A; }
	.modelface:hover	i	{	color:#553E06; }

	.app.disable	{
		border:#ccc dashed 1px ;
		background:#eee ;
		border-radius:10px;
		color:#aaa ;
		cursor: not-allowed !important ;
	}
	.app.disable:hover	{	color:#666 ;	}
	.app.disable	i	{	color:#fff;background-color: #eee ;font-size:2.5em; }
	.app.disable:hover	i	{	text-shadow:#999 0px 0px 1px;	}

	.notice_open			{	position:relative; border-color:#96c7ea ; background-color:#bfdff6; color:#5499c9; font-size:1em; padding:1em; overflow-wrap: break-word; word-break: break-word; white-space:normal; }
	.notice_open:hover		{	position:relative; border-color:#96c7ea ; background-color:#96c7ea; color:#2d71a1; font-size:1em; }
	.notice_open		i	{	color:#5499c9; }
	.notice_open:hover	i	{	color:#2d71a1; }

	.notice_open	span.people{	position:absolute; bottom:8px; right:8px; font-size:2.5em; font-family:arial ; color:#d5eaf9; letter-spacing:-2px; 
			text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.02),
						-1px 1px 2px rgba(0, 0, 0, 0.02),
						 1px -1px 2px rgba(0, 0, 0, 0.02),
						 -1px -1px 2px rgba(0, 0, 0, 0.02);
	}
}
@media screen and (max-width: 1000px) {
	#header	.logo	h1		{	font-size:22px; }
	.section-heading		{	font-size:1.50em; }
	.product_category		{	width:10em;height:1em;margin-left:0.25em; }
	.color-wanted			{	font-size:12px; }
	.navbar	a				{	font-size:14px; padding:7px 0 7px 7px; }
	.navbar .dropdown ul li {	min-width:14em; }
	.navbar .dropdown ul a	{	font-size:14px;	max-width:13em; }
	.navbar .dropdown ul a i{	font-size:14px; }

	.app	{
		height:100%;
		display: flex;
		flex-direction:column ;
		justify-content: center;
		align-items: center;
		aspect-ratio: 1 / 1;
		border-color: #ccc ;
		border-style: solid ;
		border-width: 1px ;
		border-radius:10px;
		font-size:1em;
		line-height:1.2em;
		height: 100%; /* This will ensure that the divs take the full height of the parent */
	}
	.app:hover		{	border-color:#ccc !important; background-color:#ccc; color:#444; }
	.app		i	{	color:#666;font-size:2.5em; }
	.app:hover	i	{	color:#444; }

	.touch			{	border-color:#96c7ea ; background-color:#bfdff6; color:#5499c9; }
	.touch:hover	{	border-color:#96c7ea ; background-color:#96c7ea; color:#2d71a1; }
	.touch		i	{	color:#5499c9; }
	.touch:hover i	{	color:#2d71a1; }
	.logout			{	border-color:#fcc ; background-color:#fff0f0; color:#f00; }
	.logout:hover	{	border-color:#fcc ; background-color:#ffcccc; color:#a00; }
	.logout		i	{	color:#f00; }
	.logout:hover i	{	color:#a00 !important; }
	.modelcard		{	border-color:#aea ; background-color:#efe; color:#494; }
	.modelcard:hover{	border-color:#aea ; background-color:#aea; color:#252; }
	.modelcard	i	{	color:#494; }
	.modelcard:hover	i	{	color:#252; }
	.modelface		{	border-color:#EEAD15 ; background-color:#F7D993; color:#89630A; }
	.modelface:hover{	border-color:#EEAD15 ; background-color:#EEAD15; color:#553E06; }
	.modelface	i	{	color:#89630A; }
	.modelface:hover	i	{	color:#553E06; }

	.app.disable	{
		border:#ccc dashed 1px ;
		background:#eee ;
		border-radius:10px;
		color:#aaa ;
		cursor: not-allowed !important ;
	}
	.app.disable:hover	{	color:#666 ;	}
	.app.disable	i	{	color:#fff;background-color: #eee ;font-size:2.5em; }
	.app.disable:hover	i	{	text-shadow:#999 0px 0px 1px;	}

	.notice_open			{	position:relative; border-color:#96c7ea ; background-color:#bfdff6; color:#5499c9; font-size:1em; padding:1em; overflow-wrap: break-word; word-break: break-word; white-space:normal; }
	.notice_open:hover		{	position:relative; border-color:#96c7ea ; background-color:#96c7ea; color:#2d71a1; font-size:1em; }
	.notice_open		i	{	color:#5499c9; }
	.notice_open:hover	i	{	color:#2d71a1; }

	.notice_open	span.people{	position:absolute; bottom:8px; right:8px; font-size:2.5em; font-family:arial ; color:#d5eaf9; letter-spacing:-2px; 
			text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.02),
						-1px 1px 2px rgba(0, 0, 0, 0.02),
						 1px -1px 2px rgba(0, 0, 0, 0.02),
						 -1px -1px 2px rgba(0, 0, 0, 0.02);
	}
}
@media screen and (max-width: 500px) {
	#header	.logo	h1		{	font-size:22px; }
	.section-heading		{	font-size:1.50em; }
	.product_category		{	width:10em;height:1em;margin-left:0.25em; }
	.color-wanted			{	font-size:12px; }
	.navbar	a				{	font-size:14px; padding:7px 0 7px 7px; }
	.navbar .dropdown ul li {	min-width:14em; }
	.navbar .dropdown ul a	{	font-size:14px;	max-width:13em; }
	.navbar .dropdown ul a i{	font-size:14px; }
	.app	{
		height:100%;
		display: flex;
		flex-direction:column ;
		justify-content: center;
		align-items: center;
		aspect-ratio: 1 / 1;
		border-color: #ccc ;
		border-style: solid ;
		border-width: 1px ;
		border-radius:10px;
		font-size:1em;
		line-height:1.2em;
		height: 100%; /* This will ensure that the divs take the full height of the parent */
	}
	.app:hover		{	border-color:#ccc !important; background-color:#ccc; color:#444; }
	.app		i	{	color:#666;font-size:2.5em; }
	.app:hover	i	{	color:#444; }

	.touch			{	border-color:#96c7ea ; background-color:#bfdff6; color:#5499c9; }
	.touch:hover	{	border-color:#96c7ea ; background-color:#96c7ea; color:#2d71a1; }
	.touch		i	{	color:#5499c9; }
	.touch:hover i	{	color:#2d71a1; }
	.logout			{	border-color:#fcc ; background-color:#fff0f0; color:#f00; }
	.logout:hover	{	border-color:#fcc ; background-color:#ffcccc; color:#a00; }
	.logout		i	{	color:#f00; }
	.logout:hover i	{	color:#a00 !important; }
	.modelcard		{	border-color:#aea ; background-color:#efe; color:#494; }
	.modelcard:hover{	border-color:#aea ; background-color:#aea; color:#252; }
	.modelcard	i	{	color:#494; }
	.modelcard:hover	i	{	color:#252; }
	.modelface		{	border-color:#EEAD15 ; background-color:#F7D993; color:#89630A; }
	.modelface:hover{	border-color:#EEAD15 ; background-color:#EEAD15; color:#553E06; }
	.modelface	i	{	color:#89630A; }
	.modelface:hover	i	{	color:#553E06; }

	.app.disable	{
		border:#ccc dashed 1px ;
		background:#eee ;
		border-radius:10px;
		color:#aaa ;
		cursor: not-allowed !important ;
	}
	.app.disable:hover	{	color:#666 ;	}
	.app.disable	i	{	color:#fff;background-color: #eee ;font-size:2.5em; }
	.app.disable:hover	i	{	text-shadow:#999 0px 0px 1px;	}

	.notice_open			{	position:relative; border-color:#96c7ea ; background-color:#bfdff6; color:#5499c9; font-size:1em; padding:1em; overflow-wrap: break-word; word-break: break-word; white-space:normal; }
	.notice_open:hover		{	border-color:#96c7ea ; background-color:#96c7ea; color:#2d71a1; font-size:1em; }
	.notice_open		i	{	color:#5499c9; }
	.notice_open:hover	i	{	color:#2d71a1; }

	.notice_open	span.people{	position:absolute; bottom:10px; right:7px; font-size:2.5em; font-family:arial ; color:#d5eaf9 ; letter-spacing:-2px; 
			text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.02),
						-1px 1px 2px rgba(0, 0, 0, 0.02),
						 1px -1px 2px rgba(0, 0, 0, 0.02),
						 -1px -1px 2px rgba(0, 0, 0, 0.02);
	}
	.max-width-20em	{	max-width:10em; overflow:hidden; }
}