@charset "utf-8";


	:root
	{
		
		/*
		--header-background-color: rgba(30, 30, 30, 0.80);
		
		
		--main-background-color: #ffffff;
		--body-background-color: #eb6231;
		--body-background-color: #f9f6f2;
		--footer-background-color: #efe1db;
		
		--header-background-color: rgba(30, 30, 30, 0.90);
		--header-background-color: rgba(255, 255, 255, 0.98);
		--main-background-color: #fafafa;
		--body-background-color: #f4eee5;
		--footer-background-color: #f4eee5;
		
		--main-background-color: #e9f0f5;
		--main-background-color: #fff;
		--body-background-color: #2a3c39;
		--footer-background-color: #2a3c39;
		--body-background-color: #323237;
		--footer-background-color: #323237;
		*/
		
		

		
		/*
		--system-font-size12: 12pt;
		--system-font-size9: 9pt;
		--system-line-height: 24px;
		--system-font-color: #383838;
		--system-select-backgroundcolor: #fef7f5;
		*/
		/*
		--panel-background-color: #f8f7f5;
		--panel-background-color: #f7f6f5;
		--panel-background-color: #f7f7f7;
		
		--panel-background-color: #f6f6f8;
		--panel-font-color: #383838;
		
		--panel-caption-font-color: #383838;
		--panel-caption-background-font-color: #383838;
		*/
		
		--system-font-size: 13pt;
		--system-line-height: 21pt;
		--system-font-color: #585858;
		--system-font-color: #333333;
		
		--button-font-size: 13pt;
		--button-line-height: 19pt;
		--button-font-color: #ffffff;

	}


	*, *::before, *::after
	{
		margin: 0px auto;
		padding: 0px;
		box-sizing: border-box;
	}


	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, header, main, footer, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video
	{
		margin: 0px auto;
		padding: 0px;
		
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
		vertical-align: middle;
		
		border: none;
		background: none;
		outline: none;
	}


	html, body
	{

		margin: 0 auto;
		padding: 0px 0px 0px 0px;
		
		height: 100%;

		font-family:  sans-serif, Century Gothic, 微軟正黑體;

		color: #797979;
		
		font-size: 13pt;
		line-height: 19pt;	

		color: #555;
		
		font-size: var(--system-font-size);
		line-height: var(--system-line-height);
		color: var(--system-font-color);
		font-weight: normal;
		letter-spacing: 0.5px;
		text-align: left;

		background-color: #323237;
	}



	p
	{
		margin: 0 auto;
		padding: 12px 0px 12px 0px;
	}



	img
	{
		margin: 0 auto;
		padding: 0px 0px 0px 0px;
		
		width: 100%;
		height: 100%;
		border: 0;
		vertical-align: middle;
		
		transition: 
			filter 0.2s,
			transform 0.3s ease-in-out;
	}

		img:hover
		{
			filter: opacity(0.95);
		}

	hr
	{
		border-width: 0 0 1px 0;
		border-bottom: 1px solid #e1e1e1;
		border-color: #e1e1e1 transparent;
	}

	b
	{
		font-weight: bold;
	}


	h1, h2, h3, h4, h5, h6
	{
		margin: 0px auto;
		padding: 5px 0px 5px 0px;
		color: #383838;
	}


	h1{font-size: 31pt;line-height: 35pt;}
	h2{font-size: 29pt;line-height: 33pt;}
	h3{font-size: 25pt;line-height: 29pt;}
	h4{font-size: 19pt;line-height: 23pt;}
	h5{font-size: 15pt;line-height: 19pt;}
	h6{font-size: 13pt;line-height: 17pt;}

	@media screen and (max-width: 450px)
	{
		h1{font-size: 27pt;line-height: 31pt;}
		h2{font-size: 23pt;line-height: 27pt;}
		h3{font-size: 19pt;line-height: 23pt;}
		h4{font-size: 15pt;line-height: 19pt;}
		h5{font-size: 13pt;line-height: 17pt;}
		h6{font-size: 11pt;line-height: 15pt;}	
	}

	mark
	{
		color: #eb6100;
		background: #fff100;
	}


	ol, ul
	{
		
		/*
		margin: 0 auto;
		padding: 0px;
		/*list-style: none;*/
	}

	blockquote, q
	{
		quotes: none;
	}

	blockquote:before, blockquote:after, q:before, q:after 
	{
		content: '';
		content: none;
	}

	table
	{
		border-collapse: collapse;
		border-spacing: 0;
	}

	::selection
	{
		color: #fff;
		background: #06AA54;
	}
/*
::-moz-selection
{
	color: #fff;
	background: #eb6231;
}
*/

/*
.float-left{float: left;}
.float-right{float: right;}
.clearfix{clear: both;}
.clear{clear: both;}

*/

	a, a:link /*一般的、未被點擊過的連結*/
	{
		color: #06aa54;
		text-decoration: none;
		transition: background-color 0.3s, color 0.3s;
	}

		a:hover  /*滑鼠指標移到連結上方時的狀態*/
		{
			color: #06aa54;
			text-decoration: underline;
		}

		a:visited /*已被點擊的連結*/
		{
			color: #51c488;
		}

		a:active, a:focus /*連結被點擊時的狀態*/
		{
			color: #1fb365;
		}


		a:focus-visible
		{
			outline: 2px solid rgba(6, 170, 84, 0.60);
			outline-offset: -2px;
		}



	button
	{
		margin: 0 auto;
		padding: 10px 20px 10px 20px;
		
		font-size: 13pt;
		line-height: 19pt;
		color: #ffffff;
		font-weight: normal;
		letter-spacing: 0.5px;
		text-align: center;
		
		border: 0px solid #dedede;
		border-radius: 5px;
		background: none;
		background-color: #06aa54;
		
		outline: none;
		transition: background-color 0.6s, color 0.3s;
		
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
									
		cursor: pointer;
	}

		button:hover
		{
			background-color: #38bb76;
		}

		button:focus-visible
		{
			outline: 2px solid rgba(0, 0, 0, 0.40);
			outline: 2px solid rgba(6, 170, 84, 0.60);
			outline-offset: -2px;	
		}



	


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

}

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

	.scroll-top,
	.scroll-top:link
	{
		margin: 0px auto;
		padding: 0px;
		
		position: fixed;
		
		bottom: 64px;
		right: 96px;
		
		width: 48px;
		height: 48px;
		
		display: none;
		text-align: center;
		border-radius: 50%;
		border: 0px solid #1c9be9;
		outline: none;
		background-color: rgba(235, 100, 50, 0.00);
		
		background-color: rgba(6, 170, 84, 0.8);
		transition: background-color 0.3s;
		
		background-image: url(../images/icon-scroll-top.svg);
		background-repeat: no-repeat;
        background-position: center;
		background-size: cover;
	 
	}

		.scroll-top:hover,
		.scroll-top:visited
		{
			background-color: rgba(6, 170, 84, 0.6);
		}
		
		.scroll-top:focus-visible
		{
			outline: 2px solid rgba(6, 170, 84, 0.8);
			outline: 2px solid rgba(0, 0, 0, 0.40);
			outline-offset: -2px;
		}
		
@media screen and (min-width: 850px) and (max-width: 1200px) 
{
	.scroll-top,
	.scroll-top:link
	{
		bottom: 64px;
		right: 96px;
	}
}

@media only screen and (max-width: 849px)
{
	.scroll-top,
	.scroll-top:link
	{
		bottom: 64px;
		right: 48px;
	}
}


@media screen and (max-width: 450px)
{
	.scroll-top,
	.scroll-top:link
	{
		bottom: 32px;
		right: 48px;
	}
}