@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,100");
/* @import url(fontawesome-all.min.css); */
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css);
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,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

:root {
	--bg: #f7f1e8;
	--paper: #fffaf4;
	--paper-2: #f3ebe1;
	--primary: #8f5538;
	--primary-dark: #6f3f2a;
	--text: #332a25;
	--text-light: #76675d;
	--muted: #9a887a;
	--accent: #d9b89c;
	--line: #e5d8ca;
	--white: #fffdf9;
	--highlight: #f3ebe1;
	/* old
	--logo_g :#9b9484;
	--logo_o :#e8a467; */
	--card-color :#3a9991;
	--card-bg :#eaf7f5;
	--logo_g :#3c7164;
	--logo_o :#f4a466;
	--logo_m :#928178;
}

.logo_o {
	color: var(--logo_o);
}

body {
	line-height: 1;
}

ol, ul {
	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;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, /* select, */ textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		/*background: #333131;*/
		background:#fff;
	}

		body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

	body, input, textarea, select {
		font-family: "微軟正黑體";
		font-size: 15pt;
		font-weight: normal;
		line-height: 1.75em;
		/*color: #888787;*/
		color:#333;
	}
	
	img {
		max-width:100%;
	}

	h1, h2, h3, h4, h5, h6 {
		font-weight: bold;
		color: #333131;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
		}

	strong, b {
		font-weight: bold;
		color: #333131;
	}

	em, i {
		font-style: italic;
	}

	a {
		color: var(--logo_o) /* #e48c78 */;
		text-decoration:none;
	}
		/* a:hover {
			color:#cd1c42;
		} */

	sub {
		position: relative;
		top: 0.5em;
		font-size: 0.8em;
	}

	sup {
		position: relative;
		top: -0.5em;
		font-size: 0.8em;
	}

	hr {
		border: 0;
		border-top: solid 1px #ddd;
	}

	blockquote {
		border-left: solid 0.5em #ddd;
		padding: 1em 0 1em 2em;
		font-style: italic;
	}

	p, ul, ol, dl, table {
		margin-bottom: 1em;
	}

	header {
		margin-bottom: 3em;
	}

		header h2 {
			/*font-weight: normal;*/
			font-size: 2em;
			color: #333131;
		}

		header .byline {
			display: block;
			padding: 1.2em 0 0.5em 0;
			font-size: 1.3em;
			font-weight: 300;
		}

@media screen and (max-width: 960px) {
	header {
		margin-bottom: 2em;
	}
}

@media screen and (max-width: 737px) {
	header {
		margin-bottom: 1em;
	}
}
	br.clear {
		clear: both;
	}

/* Row */

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

		.row > * {
			box-sizing: border-box;
		}

		.row.gtr-uniform > * > :last-child {
			margin-bottom: 0;
		}

		.row.aln-left {
			justify-content: flex-start;
		}

		.row.aln-center {
			justify-content: center;
		}

		.row.aln-right {
			justify-content: flex-end;
		}

		.row.aln-top {
			align-items: flex-start;
		}

		.row.aln-middle {
			align-items: center;
		}

		.row.aln-bottom {
			align-items: flex-end;
		}

		.row > .imp {
			order: -1;
		}

		.row > .col-1 {
			width: 8.33333%;
		}

		.row > .off-1 {
			margin-left: 8.33333%;
		}

		.row > .col-2 {
			width: 16.66667%;
		}

		.row > .off-2 {
			margin-left: 16.66667%;
		}

		.row > .col-3 {
			width: 25%;
		}

		.row > .off-3 {
			margin-left: 25%;
		}

		.row > .col-4 {
			width: 33.33333%;
		}

		.row > .off-4 {
			margin-left: 33.33333%;
		}

		.row > .col-5 {
			width: 41.66667%;
		}

		.row > .off-5 {
			margin-left: 41.66667%;
		}

		.row > .col-6 {
			width: 50%;
		}

		.row > .off-6 {
			margin-left: 50%;
		}

		.row > .col-7 {
			width: 58.33333%;
		}

		.row > .off-7 {
			margin-left: 58.33333%;
		}

		.row > .col-8 {
			width: 66.66667%;
		}

		.row > .off-8 {
			margin-left: 66.66667%;
		}

		.row > .col-9 {
			width: 75%;
		}

		.row > .off-9 {
			margin-left: 75%;
		}

		.row > .col-10 {
			width: 83.33333%;
		}

		.row > .off-10 {
			margin-left: 83.33333%;
		}

		.row > .col-11 {
			width: 91.66667%;
		}

		.row > .off-11 {
			margin-left: 91.66667%;
		}

		.row > .col-12 {
			width: 100%;
		}

		.row > .off-12 {
			margin-left: 100%;
		}

		.row.gtr-0 {
			margin-top: 0;
			margin-left: 0px;
		}

			.row.gtr-0 > * {
				padding: 0 0 0 0px;
			}

			.row.gtr-0.gtr-uniform {
				margin-top: 0px;
			}

				.row.gtr-0.gtr-uniform > * {
					padding-top: 0px;
				}

		.row.gtr-25 {
			margin-top: 0;
			margin-left: -10px;
		}

			.row.gtr-25 > * {
				padding: 0 0 0 10px;
			}

			.row.gtr-25.gtr-uniform {
				margin-top: -10px;
			}

				.row.gtr-25.gtr-uniform > * {
					padding-top: 10px;
				}

		.row.gtr-50 {
			margin-top: 0;
			margin-left: -20px;
		}

			.row.gtr-50 > * {
				padding: 0 0 0 20px;
			}

			.row.gtr-50.gtr-uniform {
				margin-top: -20px;
			}

				.row.gtr-50.gtr-uniform > * {
					padding-top: 20px;
				}

		.row {
			margin-top: 0;
			margin-left: -40px;
		}

			.row > * {
				padding: 0 0 0 40px;
			}

			.row.gtr-uniform {
				margin-top: -40px;
			}

				.row.gtr-uniform > * {
					padding-top: 40px;
				}

		.row.gtr-150 {
			margin-top: 0;
			margin-left: -60px;
		}

			.row.gtr-150 > * {
				padding: 0 0 0 60px;
			}

			.row.gtr-150.gtr-uniform {
				margin-top: -60px;
			}

				.row.gtr-150.gtr-uniform > * {
					padding-top: 60px;
				}

		.row.gtr-200 {
			margin-top: 0;
			margin-left: -80px;
		}

			.row.gtr-200 > * {
				padding: 0 0 0 80px;
			}

			.row.gtr-200.gtr-uniform {
				margin-top: -80px;
			}

				.row.gtr-200.gtr-uniform > * {
					padding-top: 80px;
				}

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

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-wide {
					order: -1;
				}

				.row > .col-1-wide {
					width: 8.33333%;
				}

				.row > .off-1-wide {
					margin-left: 8.33333%;
				}

				.row > .col-2-wide {
					width: 16.66667%;
				}

				.row > .off-2-wide {
					margin-left: 16.66667%;
				}

				.row > .col-3-wide {
					width: 25%;
				}

				.row > .off-3-wide {
					margin-left: 25%;
				}

				.row > .col-4-wide {
					width: 33.33333%;
				}

				.row > .off-4-wide {
					margin-left: 33.33333%;
				}

				.row > .col-5-wide {
					width: 41.66667%;
				}

				.row > .off-5-wide {
					margin-left: 41.66667%;
				}

				.row > .col-6-wide {
					width: 50%;
				}

				.row > .off-6-wide {
					margin-left: 50%;
				}

				.row > .col-7-wide {
					width: 58.33333%;
				}

				.row > .off-7-wide {
					margin-left: 58.33333%;
				}

				.row > .col-8-wide {
					width: 66.66667%;
				}

				.row > .off-8-wide {
					margin-left: 66.66667%;
				}

				.row > .col-9-wide {
					width: 75%;
				}

				.row > .off-9-wide {
					margin-left: 75%;
				}

				.row > .col-10-wide {
					width: 83.33333%;
				}

				.row > .off-10-wide {
					margin-left: 83.33333%;
				}

				.row > .col-11-wide {
					width: 91.66667%;
				}

				.row > .off-11-wide {
					margin-left: 91.66667%;
				}

				.row > .col-12-wide {
					width: 100%;
				}

				.row > .off-12-wide {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0px;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0px;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0px;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0px;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -10px;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 10px;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -10px;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 10px;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -20px;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 20px;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -20px;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 20px;
						}

				.row {
					margin-top: 0;
					margin-left: -40px;
				}

					.row > * {
						padding: 0 0 0 40px;
					}

					.row.gtr-uniform {
						margin-top: -40px;
					}

						.row.gtr-uniform > * {
							padding-top: 40px;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -60px;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 60px;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -60px;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 60px;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -80px;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 80px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -80px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 80px;
						}

		}

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

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-normal {
					order: -1;
				}

				.row > .col-1-normal {
					width: 8.33333%;
				}

				.row > .off-1-normal {
					margin-left: 8.33333%;
				}

				.row > .col-2-normal {
					width: 16.66667%;
				}

				.row > .off-2-normal {
					margin-left: 16.66667%;
				}

				.row > .col-3-normal {
					width: 25%;
				}

				.row > .off-3-normal {
					margin-left: 25%;
				}

				.row > .col-4-normal {
					width: 33.33333%;
				}

				.row > .off-4-normal {
					margin-left: 33.33333%;
				}

				.row > .col-5-normal {
					width: 41.66667%;
				}

				.row > .off-5-normal {
					margin-left: 41.66667%;
				}

				.row > .col-6-normal {
					width: 50%;
				}

				.row > .off-6-normal {
					margin-left: 50%;
				}

				.row > .col-7-normal {
					width: 58.33333%;
				}

				.row > .off-7-normal {
					margin-left: 58.33333%;
				}

				.row > .col-8-normal {
					width: 66.66667%;
				}

				.row > .off-8-normal {
					margin-left: 66.66667%;
				}

				.row > .col-9-normal {
					width: 75%;
				}

				.row > .off-9-normal {
					margin-left: 75%;
				}

				.row > .col-10-normal {
					width: 83.33333%;
				}

				.row > .off-10-normal {
					margin-left: 83.33333%;
				}

				.row > .col-11-normal {
					width: 91.66667%;
				}

				.row > .off-11-normal {
					margin-left: 91.66667%;
				}

				.row > .col-12-normal {
					width: 100%;
				}

				.row > .off-12-normal {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0px;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0px;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0px;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0px;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -10px;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 10px;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -10px;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 10px;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -20px;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 20px;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -20px;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 20px;
						}

				.row {
					margin-top: 0;
					margin-left: -40px;
				}

					.row > * {
						padding: 0 0 0 40px;
					}

					.row.gtr-uniform {
						margin-top: -40px;
					}

						.row.gtr-uniform > * {
							padding-top: 40px;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -60px;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 60px;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -60px;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 60px;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -80px;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 80px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -80px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 80px;
						}

		}

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

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-narrow {
					order: -1;
				}

				.row > .col-1-narrow {
					width: 8.33333%;
				}

				.row > .off-1-narrow {
					margin-left: 8.33333%;
				}

				.row > .col-2-narrow {
					width: 16.66667%;
				}

				.row > .off-2-narrow {
					margin-left: 16.66667%;
				}

				.row > .col-3-narrow {
					width: 25%;
				}

				.row > .off-3-narrow {
					margin-left: 25%;
				}

				.row > .col-4-narrow {
					width: 33.33333%;
				}

				.row > .off-4-narrow {
					margin-left: 33.33333%;
				}

				.row > .col-5-narrow {
					width: 41.66667%;
				}

				.row > .off-5-narrow {
					margin-left: 41.66667%;
				}

				.row > .col-6-narrow {
					width: 50%;
				}

				.row > .off-6-narrow {
					margin-left: 50%;
				}

				.row > .col-7-narrow {
					width: 58.33333%;
				}

				.row > .off-7-narrow {
					margin-left: 58.33333%;
				}

				.row > .col-8-narrow {
					width: 66.66667%;
				}

				.row > .off-8-narrow {
					margin-left: 66.66667%;
				}

				.row > .col-9-narrow {
					width: 75%;
				}

				.row > .off-9-narrow {
					margin-left: 75%;
				}

				.row > .col-10-narrow {
					width: 83.33333%;
				}

				.row > .off-10-narrow {
					margin-left: 83.33333%;
				}

				.row > .col-11-narrow {
					width: 91.66667%;
				}

				.row > .off-11-narrow {
					margin-left: 91.66667%;
				}

				.row > .col-12-narrow {
					width: 100%;
				}

				.row > .off-12-narrow {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0px;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0px;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0px;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0px;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -5px;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 5px;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -5px;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 5px;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -10px;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 10px;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -10px;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 10px;
						}

				.row {
					margin-top: 0;
					margin-left: -20px;
				}

					.row > * {
						padding: 0 0 0 20px;
					}

					.row.gtr-uniform {
						margin-top: -20px;
					}

						.row.gtr-uniform > * {
							padding-top: 20px;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -30px;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 30px;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -30px;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 30px;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -40px;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 40px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -40px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 40px;
						}

		}

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

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-narrower {
					order: -1;
				}

				.row > .col-1-narrower {
					width: 8.33333%;
				}

				.row > .off-1-narrower {
					margin-left: 8.33333%;
				}

				.row > .col-2-narrower {
					width: 16.66667%;
				}

				.row > .off-2-narrower {
					margin-left: 16.66667%;
				}

				.row > .col-3-narrower {
					width: 25%;
				}

				.row > .off-3-narrower {
					margin-left: 25%;
				}

				.row > .col-4-narrower {
					width: 33.33333%;
				}

				.row > .off-4-narrower {
					margin-left: 33.33333%;
				}

				.row > .col-5-narrower {
					width: 41.66667%;
				}

				.row > .off-5-narrower {
					margin-left: 41.66667%;
				}

				.row > .col-6-narrower {
					width: 50%;
				}

				.row > .off-6-narrower {
					margin-left: 50%;
				}

				.row > .col-7-narrower {
					width: 58.33333%;
				}

				.row > .off-7-narrower {
					margin-left: 58.33333%;
				}

				.row > .col-8-narrower {
					width: 66.66667%;
				}

				.row > .off-8-narrower {
					margin-left: 66.66667%;
				}

				.row > .col-9-narrower {
					width: 75%;
				}

				.row > .off-9-narrower {
					margin-left: 75%;
				}

				.row > .col-10-narrower {
					width: 83.33333%;
				}

				.row > .off-10-narrower {
					margin-left: 83.33333%;
				}

				.row > .col-11-narrower {
					width: 91.66667%;
				}

				.row > .off-11-narrower {
					margin-left: 91.66667%;
				}

				.row > .col-12-narrower {
					width: 100%;
				}

				.row > .off-12-narrower {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0px;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0px;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0px;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0px;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -5px;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 5px;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -5px;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 5px;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -10px;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 10px;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -10px;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 10px;
						}

				.row {
					margin-top: 0;
					margin-left: -20px;
				}

					.row > * {
						padding: 0 0 0 20px;
					}

					.row.gtr-uniform {
						margin-top: -20px;
					}

						.row.gtr-uniform > * {
							padding-top: 20px;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -30px;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 30px;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -30px;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 30px;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -40px;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 40px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -40px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 40px;
						}

		}

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

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-mobile {
					order: -1;
				}

				.row > .col-1-mobile {
					width: 8.33333%;
				}

				.row > .off-1-mobile {
					margin-left: 8.33333%;
				}

				.row > .col-2-mobile {
					width: 16.66667%;
				}

				.row > .off-2-mobile {
					margin-left: 16.66667%;
				}

				.row > .col-3-mobile {
					width: 25%;
				}

				.row > .off-3-mobile {
					margin-left: 25%;
				}

				.row > .col-4-mobile {
					width: 33.33333%;
				}

				.row > .off-4-mobile {
					margin-left: 33.33333%;
				}

				.row > .col-5-mobile {
					width: 41.66667%;
				}

				.row > .off-5-mobile {
					margin-left: 41.66667%;
				}

				.row > .col-6-mobile {
					width: 50%;
				}

				.row > .off-6-mobile {
					margin-left: 50%;
				}

				.row > .col-7-mobile {
					width: 58.33333%;
				}

				.row > .off-7-mobile {
					margin-left: 58.33333%;
				}

				.row > .col-8-mobile {
					width: 66.66667%;
				}

				.row > .off-8-mobile {
					margin-left: 66.66667%;
				}

				.row > .col-9-mobile {
					width: 75%;
				}

				.row > .off-9-mobile {
					margin-left: 75%;
				}

				.row > .col-10-mobile {
					width: 83.33333%;
				}

				.row > .off-10-mobile {
					margin-left: 83.33333%;
				}

				.row > .col-11-mobile {
					width: 91.66667%;
				}

				.row > .off-11-mobile {
					margin-left: 91.66667%;
				}

				.row > .col-12-mobile {
					width: 100%;
				}

				.row > .off-12-mobile {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0px;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0px;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0px;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0px;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -5px;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 5px;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -5px;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 5px;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -10px;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 10px;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -10px;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 10px;
						}

				.row {
					margin-top: 0;
					margin-left: -20px;
				}

					.row > * {
						padding: 0 0 0 20px;
					}

					.row.gtr-uniform {
						margin-top: -20px;
					}

						.row.gtr-uniform > * {
							padding-top: 20px;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -30px;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 30px;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -30px;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 30px;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -40px;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 40px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -40px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 40px;
						}

		}

/* Container */

.container {
	margin: 0 auto;
	width: 1400px;
}

.container2 {
	margin: 0 auto;
	width: 1800px;
}

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

		.container {
			width: 1200px;
		}

		.container2 {
			width: 1280px;
		}
	}

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

		.container {
			width: 1000px;
		}

		.container2 {
			width: 1000px;
		}
	}

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

		.container {
			width: 95%;
		}

		.container2 {
			width: 95%;
		}
	}

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

		.container {
			width: 95%;
		}

		.container2 {
			width: 95%;
		}
	}

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

		.container {
			width: 90%;
		}

		.container2 {
			width: 90%;
		}

	}

/* Sections/Articles */

	/* section, article {
		margin-bottom: 3em;
	} */

		section > :last-child, section:last-child, article > :last-child, article:last-child {
			margin-bottom: 0;
		}

	.row > section, .row > article {
		margin-bottom: 0;
	}

/* Images */

	.image {
		display: inline-block;
	}

		.image img {
			display: block;
			width: 100%;
		}

		.image.featured {
			display: block;
			width: 100%;
			margin: 0 0 2em 0;
		}

		.image.full {
			display: block;
			width: 100%;
		}

		.image.left {
			float: left;
			margin: 0 2em 2em 0;
		}

		.image.centered {
			display: block;
			margin: 0 0 2em 0;
		}

			.image.centered img {
				margin: 0 auto;
				width: auto;
			}

/* Lists */

	ul {
		list-style: disc;
		padding-left: 1.25em;
	}

		ul > li {
			padding-left: 0.25em;
		}

		ul.alt {
			list-style: none;
			margin: 0;
			padding: 0;
		}

			ul.alt > li {
				display: block;
				border-top: solid 1px #aaa;
				border-top-color: rgba(0, 0, 0, 0.1);
				line-height: 2.5em;
				padding-left: 0;
			}

				ul.alt > li:first-child {
					padding-top: 0;
					border-top: 0;
				}

			ul.alt a {
				text-decoration: none;
				/*color: #888787;*/
				color:#aecae1;
			}

				ul.alt a:hover {
					text-decoration: underline;
				}

	ol {
		list-style: decimal;
		padding-left: 1.25em;
	}

		ol > li {
			padding-left: 0.25em;
		}

/* Lists */

	ul.lists {
		text-align: center;
		padding-left: 0;
		list-style: none;
	}

		ul.lists > li {
			display: inline-block;
			padding: 0em 1em;
		}

/* Featured */

	ul.featured {
		text-align: center;
		padding-left: 0;
		list-style: none;
	}

		ul.featured > li {
			display: inline-block;
			width: 22%;
			margin: 0 2.5% 5% 0;
			padding: 0em 0.50em;
			vertical-align: top;
		}

/* Staff */

	ul.staff {
		margin: 0em 0em 3em 0em;
		padding: 2em 0em 1.5em 0em;
		list-style: none;
		text-align: center;
		box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.1);
	}

		ul.staff > li {
			display: inline-block;
			width: 160px;
			height: 160px;
			margin: 0 0.75em;
			background: #7C9CD0;
			border-radius: 50%;
			padding-left: 0;
		}

		ul.staff img {
			border-radius: 50%;
		}

/* Social */

	ul.social {
		margin: 0em 0em;
		padding: 2em 0em;
		box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1), 0px -1px 0px rgba(255, 255, 255, 0.1);
		/*text-align: center;*/
		list-style: none;
	}

		ul.social > li {
			display: inline-block;
			padding: 0px 3px;
		}

			ul.social > li span {
				display: none;
			}

			ul.social > li a {
				display: inline-block;
				width: 40px;
				height: 40px;
				padding-top: 2px;
				background: #7C9CD0;
				border-radius: 50%;
				line-height: 40px;
				text-align: center;
				color: #333131;
			}

		ul.social .icon {
			font-size: 1em;
			border: none;
		}

/* Icons */

	ul.icons {
		cursor: default;
		padding-left: 0;
		list-style: none;
	}

		ul.icons > li {
			/*display: inline-block;*/
			padding: 0 0 10px 0;
		}
			
			ul.icons > li span{
				font-weight:bold;
				color:#331313;
				line-height:1em;
			}

		ul.icons a.icon {
			/*display: inline-block;*/
			width: 0.8em;
			height: 0.8em;
			line-height: 0.15em;
			text-align: center;
			border: 3px solid #7C9CD0 !important;
		}
		
			ul.icons a.icon:before {
				font-size:0.4em;
			}
	

/* Menu */

	ul.menu {
		cursor: default;
		padding-left: 0;
		list-style: none;
	}

		ul.menu > li {
			display: inline-block;
			line-height: 1em;
			border-left: solid 1px #ddd;
			padding: 0 0 0 0.5em;
			margin: 0 0 0 0.5em;
		}

			ul.menu > li:first-child {
				border-left: 0;
				padding-left: 0;
				margin-left: 0;
			}

/* Actions */

	ul.actions {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		cursor: default;
		list-style: none;
		margin-left: -1em;
		padding-left: 0;
	}

		ul.actions li {
			padding: 0 0 0 1em;
			vertical-align: middle;
		}

		ul.actions.special {
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			width: 100%;
			margin-left: 0;
		}

			ul.actions.special li:first-child {
				padding-left: 0;
			}

		ul.actions.stacked {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			margin-left: 0;
		}

			ul.actions.stacked li {
				padding: 1.3em 0 0 0;
			}

				ul.actions.stacked li:first-child {
					padding-top: 0;
				}

		ul.actions.fit {
			width: calc(100% + 1em);
		}

			ul.actions.fit li {
				-moz-flex-grow: 1;
				-webkit-flex-grow: 1;
				-ms-flex-grow: 1;
				flex-grow: 1;
				-moz-flex-shrink: 1;
				-webkit-flex-shrink: 1;
				-ms-flex-shrink: 1;
				flex-shrink: 1;
				width: 100%;
			}

				ul.actions.fit li > * {
					width: 100%;
				}

			ul.actions.fit.stacked {
				width: 100%;
			}

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

			ul.actions:not(.fixed) {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				margin-left: 0;
				width: 100% !important;
			}

				ul.actions:not(.fixed) li {
					-moz-flex-grow: 1;
					-webkit-flex-grow: 1;
					-ms-flex-grow: 1;
					flex-grow: 1;
					-moz-flex-shrink: 1;
					-webkit-flex-shrink: 1;
					-ms-flex-shrink: 1;
					flex-shrink: 1;
					padding: 1em 0 0 0;
					text-align: center;
					width: 100%;
				}

					ul.actions:not(.fixed) li > * {
						width: 100%;
					}

					ul.actions:not(.fixed) li:first-child {
						padding-top: 0;
					}

					ul.actions:not(.fixed) li input[type="submit"],
					ul.actions:not(.fixed) li input[type="reset"],
					ul.actions:not(.fixed) li input[type="button"],
					ul.actions:not(.fixed) li button,
					ul.actions:not(.fixed) li .button {
						width: 100%;
					}

						ul.actions:not(.fixed) li input[type="submit"].icon:before,
						ul.actions:not(.fixed) li input[type="reset"].icon:before,
						ul.actions:not(.fixed) li input[type="button"].icon:before,
						ul.actions:not(.fixed) li button.icon:before,
						ul.actions:not(.fixed) li .button.icon:before {
							margin-left: -0.5em;
						}

		}

/* Forms */

	/* form {
		width: 80%;
		margin: 0em auto;
	} */

	label {
		color: #3d4449;
		display: block;
		font-size: 0.5em;
		font-weight: 600;
		margin: 5px 0 5px 5px;
	}

	input[type="checkbox"],
	input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		display: block;
		float: left;
		margin-right: -2em;
		opacity: 0;
		width: 1em;
		z-index: -1;
	}

		input[type="checkbox"] + label,
		input[type="radio"] + label {
			text-decoration: none;
			color: #3d4449;
			cursor: pointer;
			display: inline-block;
			font-size: 1em;
			font-weight: 400;
			padding-left: 1.5em;
			padding-right: 0.5em;
			position: relative;
		}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 2;
				text-transform: none !important;
				font-family: 'Font Awesome 5 Free';
				font-weight: 900;
			}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				background: #ffffff;
				border-radius: 0.375em;
				border: solid 1px rgba(210, 215, 217, 0.75);
				content: '';
				display: inline-block;
				font-size: 0.6em;
				height: 2em;
				left: 0;
				line-height: 2em;
				position: absolute;
				text-align: center;
				top: 20%;
				width: 2em;
			}

		input[type="checkbox"]:checked + label:before,
		input[type="radio"]:checked + label:before {
			background: #3d4449;
			border-color: #3d4449;
			color: #ffffff;
			content: '\f00c';
		}

		input[type="checkbox"]:focus + label:before,
		input[type="radio"]:focus + label:before {
			border-color: #62d4e5;
			box-shadow: 0 0 0 1px #62d4e5;
		}

	input[type="checkbox"] + label:before {
		border-radius: 0.375em;
	}

	input[type="radio"] + label:before {
		border-radius: 100%;
	}

		form input[type="text"], form input[type="password"], form input[type="email"] {
			font-family: "微軟正黑體";
			padding: 0 0 0 5px;
		}

		form select, form textarea {
			font-family: "微軟正黑體";
		}

		/* form select:focus {
		} */

		form textarea {
			height: 10em;
		}

			/* form textarea:focus {
			} */

		form .formerize-placeholder, form ::-webkit-input-placeholder, form :-moz-placeholder, form ::-moz-placeholder, form :-ms-input-placeholder {
			/* color: #93989f !important; */
			color: #ccc;
		}

		form ::-moz-focus-inner {
			border: 0;
		}
	
	#contactform {
		width: 100%;
	}
	    
        #contactform p, #contactform canvas{
			padding: 5px;
			margin: 5px;
		}
			#contactform p, #contactform .vadus{
				text-align: right;
			}

			#contactform p span {
				color: #f00;
			}

		#contactform input[type="text"], #contactform textarea{
			width: 100%;
			outline: 0;
			border: 1px solid rgba(0, 0, 0, 0.05);
			background: rgba(0, 0, 0, 0.03);
			padding: 5px;
			margin: 5px;
		}

		#contactform select {
			padding: 7px;
			margin: 5px 0 0 5px;
			border: 1px solid rgba(0, 0, 0, 0.05);
			background: rgba(0, 0, 0, 0.03);
			outline: 0;
		}

		#contactform select.short2 {
			width: 50%;
		}

		#contactform input[type="text"].short {
			width: 76.5%;
		}

		#contactform input[type="text"].short2 {
			width: 50%;
		}
	
		@media screen and (max-width: 481px) {
			#contactform{
				margin: 1em 0 0 0 ;
			}

			#contactform p, #contactform .vadus, #contactform canvas{
				text-align: left;
				margin: 0em !important;
			}

			#contactform input[type="text"], #contactform textarea{
				width: 90%;
			}

			#contactform input[type="button"]{
				margin: 1em 0 0 0;
                width: 92%;
            }
	
		}

	#contactform input[type="text"].among {
		width: 100%;
	}

/* Tables */

	table {
		width: 100%;
	}

		/* table tbody tr:nth-child(2n+2) {
			background: #f4f4f4;
		} */

		table td {
			padding: 0.5em 1em 0.5em 1em;
			vertical-align: top;
			border: #ccc 1px solid;
		}

		table th {
			text-align: left;
			/* font-weight: 400; */
			padding: 0.5em 1em 0.5em 1em;
			border: #ccc 1px solid;
		}

		table thead {
			background: #fff;
			color: #333;
		}

		table tfoot {
			background: #eee;
		}
	
	table.alt {
		width: 100%;
		margin-bottom: 0;
		white-space : nowrap;
	}

		/* table.alt tbody tr:nth-child(2n+2) {
			background: #fff;
		} */	

		table.alt tr:last-child td {
			border-bottom: 0;
		}

		table.alt td {
			padding: 0.5em 1em 0.5em 1em;
			border: #ccc 1px solid;
		}

		table.alt tr td:first-child {
			color: #fff;
		}

		table.alt thead th {
			background: #666;
			font-weight: bold;
			padding: 0.5em 1em 0.5em 1em;
		}

		table.alt tr.mintitle td {
			background: #E6E6E6;
			text-align: left;
			font-weight: bold;
		}

		table.alt tr.mintitle td input[type="text"] {
			background: #fff !important;
		}

		table.alt thead {
			color:#fff;
		}

		table.alt tfoot {
			background: #eee;
		}

		table.order {
			min-width: 1000px;
		}

		table.order tr:hover {
			background: #fffeec;
		}		

	.table-wrapper {
		-webkit-overflow-scrolling: touch;
		overflow-x: auto;
	}

	table.alt2 {
		width: 100%;
	}

		table.alt2 tbody tr:first-child {
			background: #deeaf6;
			color: #000;
			font-weight: bold;
			/* letter-spacing: 2.5px; */
		}

		table.alt2 td:first-child {
			background: #deeaf6;
			color: #000;
			font-weight: bold;
			text-align: center;
			/* letter-spacing: 2.5px; */
			white-space : nowrap;
		}

		table.alt2 td {
			padding: 0.25em 0.5em;
			border: #ccc 1px solid;
		}

		table.alt2 thead th {
			background: #444;
			text-align: center;
			font-weight: bold;
			padding: 0.5em 1em 0.5em 1em;
		}

		table.alt2 tr.mintitle td {
			background: #E6E6E6;
			text-align: left;
			font-weight: bold;
		}

		table.alt2 tr.mintitle td input[type="text"] {
			background: #fff !important;
		}

		table.alt2 thead {
			color:#fff;
		}

/* Buttons */

	.button {
		-moz-transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out, color 0.35s ease-in-out;
		-webkit-transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out, color 0.35s ease-in-out;
		-ms-transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out, color 0.35s ease-in-out;
		transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out, color 0.35s ease-in-out;
		position: relative;
		display: inline-block;
		background: #666;
		border: 3px solid #FFF;
		border-radius: 5px;
		font-size: 0.8em;
		padding: 0.1em 1em 0.1em 1em;
		color: #fff !important;
		text-decoration: none;
		text-align: center;
	}

		.button:hover {
			background: #cd1c42;
			border-color: rgba(255, 255, 255, 0.4);
			color: #fff !important;
		}

		.button.alt {
			padding: 0.50em 2em 0.50em 2em;
			border-radius: 5px;
			border-color: rgba(0, 0, 0, 0.1);
			color: #333131 !important;
		}

			.button.alt:hover {
				background: #333131;
				color: #FFF !important;
			}

/* FA Icons */

	.pennant {
		position: relative;
		display: inline-block;
		margin-bottom: 2em;
		padding: 0.40em;
		border-radius: 50%;
		border: 1px solid #787777;
		cursor: default;
	}

	.icon {
		position: relative;
		display: inline-block;
		width: 3em;
		height: 3em;
		border-radius: 50%;
		border: 1px solid #787777;
		line-height: 3em;
		font-size: 1.8em;
		color: #52b788;
		text-decoration: none;
		margin-bottom: 1em;
	}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands';
		}

		.icon:before {
			display: inline-block;
			font-family: 'Font Awesome 5 Free';
			font-size: 1.25em;
			text-decoration: none;
			font-style: normal;
			font-weight: normal;
			line-height: 1;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		.icon2 {
			font-size: 1em;
			color: #7C9CD0;
			padding: 5px 10px;
		}
	
			.icon2.solid:before {
				font-weight: 900;
			}
	
			.icon2.brands:before {
				font-family: 'Font Awesome 5 Brands';
			}
	
			.icon2:before {
				display: inline-block;
				font-family: 'Font Awesome 5 Free';
				font-size: 1.25em;
				text-decoration: none;
				font-style: normal;
				font-weight: normal;
				line-height: 1;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				width: 2em;
			}

/* Header */

	#header {
		background: /* var(--logo_o) #EBC8AE*/ #f8c298;
		box-shadow:rgba(0, 0, 0, 0.5) 0px 1px 10px;
		position: sticky /* fixed */;
		/* padding: 0.75em 1.5em 0.75em 1.5em; */
		text-transform: capitalize;
		top: 0;
		width: 100%;
		z-index: 9999999;
		height: 100%;
	}

		/* #header .container {
			position: relative;
		} */

/* Logo */
#logo {
	/* padding: 0.75em 2.5em 0.75em 1.5em; */
	padding: 0 2.5em 0 1.5em;
	background-color: #FFF/* 8F0 */;
	max-width: 450px;
}
	#logo h1 {
		color: #000;
	}

	#logo a {
		/*display: block;*/
		letter-spacing: 1px;
		font-size: 1.25em;
		/*font-weight: 300;*/
		color: #000;
		width:100%;
	}
	
		#logo a div {
			display:inline-block;
			position:relative;
			top:3px;
			padding:0 0 0 10px;
		}
	
	#logo img {
		max-width:380px;
		height: 100%;
		max-height: 85px;
		/* vertical-align:middle; */
	}

/* Nav */

	#nav {
		position: absolute;
		right: 1em;
		top: 1em;
	}

		#nav > ul {
			margin: 0;
			list-style: none;
			padding-left: 0;
			position:relative;
		}

		#navUnderline{
			position:absolute;
			top: 40px;
			left:0;

			width:0;
			height:6px;

			overflow:visible;
			pointer-events:none;

			transition:
					left .35s cubic-bezier(.22,1,.36,1),
					width .35s cubic-bezier(.22,1,.36,1);
		}

		#navUnderline path{
			fill:none;
			stroke:#e48c78;
			stroke-width:2.5;
			stroke-linecap:round;
		}

			#nav > ul > li {
				float: left;
				padding-left: 0;
			}

				#nav > ul > li:last-child {
					padding-right: 0;
				}

				#nav > ul > li.topb > a, #nav > ul > li.topb > span {
					color: #fff;
					font-size: 0.8em;
				}

				#nav > ul > li > a, #nav > ul > li > span {
					display: block;
					margin-left: 0.7em;
					padding: 0.20em 1em;
					letter-spacing: 0.06em;
					text-decoration: none;
					font-weight: bold;
					font-size: 1em;
					outline: 0;
					color: #333;
					/* color: #fff; */
					border-radius: 5px;
				}				

		#nav > ul > li > ul {
			display: none;
		}

	.dropotron {
		text-align: left;
		line-height: 2em;
		min-width: 10em;
		background: rgba(255, 255, 255, 0.8);
		line-height: 1em;
		padding: 0.85em;
		border-radius: 8px;
		list-style: none;
		cursor: pointer;
	}

		.dropotron a, .dropotron span {
			-moz-transition: color 0.1s ease-in-out;
			-webkit-transition: color 0.1s ease-in-out;
			-ms-transition: color 0.1s ease-in-out;
			transition: color 0.1s ease-in-out;
			display: block;
			padding: 0.5em 1em ;
			border-top: solid 1px;
			border-color: rgba(255, 255, 255, 0.1);
			border-bottom: 0;
			letter-spacing: 0.05em;
			font-size: 1em;
			text-decoration: none;
			color: #000;
		}

		.dropotron li {
			padding-left: 0;
		}

			.dropotron li:first-child > a, .dropotron li:first-child > span {
				border-top: 0;
			}

			.dropotron li.active > a, .dropotron li.active > span {
				color: #FFF;
				background: #C00000;
				border-radius: 5px;
			}

			.dropotron li:hover > a, .dropotron li:hover > span {
				color: #FFF;
				background: #C00000;
				border-radius: 5px;
			}

			.dropotron li.current_page_item > a {
				color: #FFF;
				background: #C00000;
				border-radius: 5px;
			}

		.dropotron.level-0 {
			border-radius: 0px 0px 8px 8px !important;
			margin-left: 0.75em;
		}

		.dropotron.level-1 {
			min-width: 11em;
		}

/* Banner */

	/* #banner {
		position: relative;
		padding: 10em 0 9em 0;
		background: #333 url(../../images/pic01.jpg) no-repeat center;
		background-size: cover;
		text-align: center;
		color: #fff;
	} */

		#banner:after {
			position: absolute;
			display: block;
			content: "";
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}

		#banner header {
			position: relative;
			z-index: 1;
			margin-bottom: 2em;
		}

			#banner header h2 {
				font-size: 3.5em;
				font-weight: 100;
				color: #fff;
			}

			#banner header .byline {
				margin-top: 0.50em;
				font-size: 1.5em;
				font-weight: 100;
			}

		#banner p {
			letter-spacing: -0.02em;
			font-size: 1.3em;
			color: #888787;
		}

		#banner .button {
			position: relative;
			z-index: 1;
		}

.banner {
	margin:0 0 1em 0;
}
	
	.banner img {
		width:100%;
	}

.banner-page {
	position: relative;
	width: 100%;
	height: 500px; /* 可依需求調整高度 */
	overflow: hidden;
	display: flex;
	align-items: center;       /* 垂直置中 */
	justify-content: center;   /* 水平置中 */
}
	
	.banner-page img {
		position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* filter: brightness(0.7); */ 
    z-index: 1;
	}

	.banner-page .text-on-image {
    position: relative;       /* 相對於 flex 容器 */
    z-index: 2;
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 3px 8px rgba(0,0,0,0.5); /* 文字陰影替代色塊 */
    letter-spacing: 2px;
		background-color: rgba(0,0,0,0.5);
		padding: 60px;
		border-radius: 3%;
	}

	.banner-page .text-on-image::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: #4cae7a;
    margin: 20px auto 0;
    border-radius: 2px;
	}

/* 	@media screen and (max-width: 960px) {
		.banner-page .text-on-image {
			padding: 40px 20px 20px;
		}
	} */

/* Main */

	#main {
		position: relative;
		padding: 0em 0em 1em 0em;
		background: #fff;
	}

		#main h3 {
			/*display: block;*/
			/*padding: 1.5em 0em 1.5em 0em;*/
			font-size: 1.2em;
		}

		#main .pennant, #main .icon {
			border-color: #c9c9c9;
		}

		#main .actions {
			padding-top: 1em;
		}

	.homepage #main {
		text-align: left;
	}
		.homepage #main header{
			margin-bottom: 1em;			
		}
		.homepage #main h2 {
			font-size:1.5em;
		}
		
		.homepage #main section {
			padding:0.5em;
		}

	#main #titlehead2 {
		padding: 0.25em 0 0.25em 1em;
		border-bottom:2px solid #01628f;
	}

	#main #titlehead2 h3{
		color:#01628f;
	}


	#main2 {
		position: relative;
		/* padding: 1em 0em 0em 0em; */
		/* background: #fff; */
	}
		
		/* #main2 header {
			margin-bottom:1em;
		}
 */
		/* #main2 h3 {
			display: block;
			padding: 0.1em 0;
			font-size: 1.5em;
		} */

		#main2 #titlehead2 {
			padding: 0.25em 0 0.25em 0em;
			border-bottom:4px solid #01628f;
			margin-bottom: 1em;
		}

			#main2 #titlehead2 h3{
				color:#01628f;
			}


		#main2 .pennant, #main2 .icon {
			border-color: #c9c9c9;
		}

		#main2 .actions {
			padding-top: 1em;
		}
		
		#main2 .imgra img{
			border-radius:100%;
			max-width:200px;
			width:100%;
			height:100%;
		}
		
		#main2 .about {
			padding:0 0 0 1em;
		}
		
		#main2 .contact {
			padding:0 0 0 2em;
		}
		
			#main2 .contact h4{
				font-size:1.2em;
			}
			
			#main2 .contact h5{
				margin-bottom: 0em;
				font-size:1.1em;
			}
			
			#main2 .contact p{
				margin-bottom: 0.4em;
				color:#333;
			}

		@media screen and (max-width: 736px) {
			#main #titlehead2 {
				padding: 0em;
			}

			#main2 .about {
				padding:0;
			}

			#main2 .contact {
				padding:0 0 0 0;
			}
		}
	
	.homepage #main2 {
		margin: 1em 0em 0em 0em;
	}
	
	#main3 {
		position: relative;
		padding: 0em 0em 3em 0em;
		background: #fff;
	}

		#main3 header {
			margin-bottom:1em;
		}

		#main3 h3 {
			display: block;
			padding: 1.5em 0em 1.5em 0em;
			font-size: 1.3em;
		}

		#main3 .pennant, #main2 .icon {
			border-color: #c9c9c9;
		}

		#main3 .actions {
			padding-top: 1em;
		}
		
		#main3 .imgra img{
			border-radius:100%;
		}
		

		
/* Inside */

.inside {
	margin: 0 0 2em 0;
}

#inside a{
	color:#888787;
}

	#inside header h2{
		text-align:left;
		font-size:2em;;
		color:#0d3e66;
	}
		#inside header h2 span.redline{
			box-shadow:#F00 0px 5px 0;
			padding:0 0 5px 0;
		}
	
	#inside .row div{
		background:#fff;
	}
		
	#inside p{
		font-size:16px;
	}


  #sideview header h2{
		  text-align:left;
		  font-size:2em;;
		  color:#0d3e66;
  }
		#sideview header h2 span.redline{
			box-shadow:#F00 0px 5px 0;
			padding:0 0 5px 0;
		}

		#sideview h3{
			font-size:1.5em;
			width:100%;
			padding:0 0 1em 0;
		}
		
		#sideview p {
			font-size:0.8em;
		}

/* Sidebar */

	#sidebar section, #sidebar2 section {
		margin-top: 4em;
	}

		#sidebar section:first-child, #sidebar2 section:first-child {
			border-top: 0;
			margin-top: 0;
			padding-top: 0;
		}

	#sidebar header, #sidebar2 header {
		margin-bottom: 2em;
	}

		#sidebar header h2, #sidebar2 header h2 {
			font-size: 1.6em;
		}

	#sidebar .button, #sidebar2 .button {
		margin: 2em 0em 0em 0em;
	}

	#sidebar .default, #sidebar2 .default {
		margin-top: 2em;
	}

		#sidebar .default li, #sidebar2 .default li {
			text-align: left;
		}

/* Intro */

	#intro {
		position: relative;
		padding: 5em 0em 4em 0em;
		background: #7C9CD0;
		text-align: center;
		color: #FFF;
	}

		#intro p {
			line-height: 1.8em;
			font-size: 1.3em;
			font-weight: 100;
		}

		#intro header h2 {
			color: #FFF;
		}

		#intro .content {
			padding: 0em 3em;
		}

/* Staff */

	#staff {
		position: relative;
		padding: 5em 0em 4em 0em;
		background: #f2f1f1;
		text-align: center;
	}

		#staff p {
			letter-spacing: -0.02em;
			font-size: 1.3em;
			color: #888787;
		}

/* Tweets */

	#tweets {
		position: relative;
		padding: 0.5em 0em 0em 0em;
		/*background: #fff url(../../images/pic02.jpg) no-repeat center;
		background-size: cover;*/
		text-align: center;
		color: #FFF;
	}

		#tweets .tweet {
			display: block;
			font-size: 1.5em;
			line-height: 1.25em;
		}

/* Contact */

	#contact {
		position: relative;
		padding: 5em 0em 5em 0em;
		background: #fff;
		text-align: center;
	}


/* Wide */

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

		/* Basic */

			body, input, textarea, select {
				font-size: 13pt;
				line-height: 1.75em;
			}

	}

/* Normal */

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

		/* Lists */

			ul.lists {
				text-align: center;
			}

				ul.lists > li {
					padding: 0em 0.7em;
				}

		/* Staff */

			ul.staff {
				display: block;
				text-align: center;
			}

				ul.staff > li {
					margin: 0 0.50em;
				}

		/* Intro */

			#intro .content {
				padding: 0em 2em;
			}

	}

/* Narrow */

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

		/* Basic */

			body, input, textarea, select {
				font-size: 11pt;
			}

			form {
				width: 90%;
			}

		/* Featured */

			ul.featured > li {
				width: 30%;
				margin: 0 2.5% 5% 0;
			}

		/* Lists */

			ul.lists {
				text-align: center;
			}

				ul.lists > li {
					margin-bottom: 1em;
					padding: 0em 1em;
				}

		/* Staff */

			ul.staff > li {
				margin: 0 0.50em;
			}

		/* Logo */

			#logo a {
				padding-left: 0.70em;
			}

	}

/* Narrower */

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

		/* Basic */

			body, input, textarea, select {
				font-size: 11pt;
			}

			form {
				width: 90%;
			}

		/* Featured */

			ul.featured > li {
				width: 40% !important;
				margin: 0 2.5% 5% 0;
			}

		/* Lists */

			ul.lists {
				text-align: center;
			}

				ul.lists > li {
					margin-bottom: 0em;
					padding: 0em 1.5em;
				}

		/* Staff */

			ul.staff > li {
				margin: 0 0.75em 0 0.75em;
			}

		/* Header */

			#header {
				padding: 1.5em 0 1.5em 0;
			}

			#logo {
				position: relative;
				left: 0;
				top: 0;
				margin: 0 0 1em 0;
				width: 100%;
				max-width: none;
			}

				#logo h1 {
					display: block;
					text-align: center;
				}

		/* Nav */

			#nav {
				position: relative;
				left: 0;
				top: 0;
			}

				#nav > ul {
					text-align: center;
				}

					#nav > ul > li {
						float: none;
						display: inline-block;
					}

						#nav > ul > li:last-child {
							padding-right: 0;
						}

						#nav > ul > li > a, #nav > ul > li > span {
							display: block;
							margin-left: 0.7em;
							padding: 0.20em 1.2em;
							letter-spacing: 0.06em;
							text-decoration: none;
							font-weight: 100;
							font-size: 0.80em;
							outline: 0;
							color: #000;
						}

			.dropotron.level-0 {
				margin-top: 1em;
			}
			
			.contactleft {
				margin: 0 0 1em 0;
			}

	}

/* Mobile */

	#navPanel, #titleBar {
		display: none;
	}

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

		/* Basic */

			html, body {
				overflow-x: hidden;
			}

			body, input, textarea, select {
				line-height: 1.75em;
				font-size: 11pt;
				letter-spacing: 0;
			}

			body {
				min-width: 320px;
			}

			h2, h3, h4, h5, h6 {
				line-height: 1.2em;
				font-size: 1.5em;
			}

			h4 {
				line-height: 1.5em;
				font-size: 1.2em;
			}

			section, article {
				clear: both;
				/* margin: 0em 0 0em 0 !important; */
			}

				section > :first-child, section:first-child, article > :first-child, article:first-child {
					margin-top: 0 !important;
				}

			header h2 {
				font-size: 1.8em;
			}

			form {
				width: 100%;
			}

		/* Images */

			.image.full {
				width: 70%;
			}

		/* Lists */

			ul.staff {
				text-align: center;
			}

				ul.staff > li {
					display: inline-block;
					margin: 1em 2em;
				}

				ul.staff img {
					width: inherit;
				}

		/* Featured */

			ul.featured > li {
				display: block !important;
				width: 100% !important;
			}

		/* Social */

			ul.social {
				margin-top: 0em !important;
			}

		/* Lists */

			ul.lists > li {
				width: 100%;
			}

		/* Button */

			.button {
				display: block;
				width: 100% !important;
				max-width: 320px;
				margin: 0 auto;
				padding: 0.70em 1em !important;
			}

				.button.alt {
					display: block;
					width: 100% !important;
					padding: 0.70em 1em !important;
				}

		/* Icons */

			.pennant {
				margin-bottom: 0em;
			}

		/* Nav Panel */

			#page-wrapper {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				padding-bottom: 1px;
			}

			#titleBar {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 62px;
				left: 0;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 999999;
				background: #fff;
			}
				
				#titleBar .title {
					display: block;
					font-size:1.25em;
					font-weight: 800;
					letter-spacing: 0.04em;
					color: #000;
					line-height: 60px;
					text-align: center;
					box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 10px;
					background: #EBC8AE;
				}
					
					#titleBar .title a{
						color:#000;
					}
					
					#titleBar .title img {
						max-width:220px;
						vertical-align:middle;
					}
					
					#titleBar .title a:hover {
						color: #D9826B ;
					}
					
					#titleBar .title a div{
						display:inline-block;
						position:relative;
						top:0;
						left:5px;
					}

				#titleBar .toggle {
					position: absolute;
					left: 0;
					top: 0;
					width: 80px;
					height: 60px;
				}

					#titleBar .toggle:before {
						content: '';
						position: absolute;
						left: 7px;
						top: 7px;
						background: rgba(0, 0, 0, 0.75);
						width: 60px;
						height: 44px;
						border-radius: 4px;
					}

					#titleBar .toggle:after {
						content: '';
						display: block;
						width: 20px;
						height: 12px;
						position: absolute;
						left: 28px;
						top: 23px;
						background: url("images/toggle.svg") 0px 0px no-repeat;
						opacity: 0.7;
					}

					#titleBar .toggle:active:after {
						opacity: 0.9;
					}

			#navPanel {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transform: translateX(-275px);
				-webkit-transform: translateX(-275px);
				-ms-transform: translateX(-275px);
				transform: translateX(-275px);
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 100%;
				left: 0;
				overflow-y: auto;
				position: fixed;
				top: 0;
				width: 275px;
				z-index: 10002;
				background: #EBC8AE /* rgba(25, 55, 95, 0.25) */;
				font-size: 1.2em;
			}

				#navPanel .link {
					display: block;
					/*color: #888;*/
					color:#49352D;
					text-decoration: none;
					min-height: 44px;
					line-height: 44px;
					/* border-top: solid 1px rgba(124, 156, 208, 1); */
					padding: 0 1em 0 1em;
				}

					#navPanel .link:first-child {
						border-top: 0;
					}

					#navPanel .link.depth-0 {
						/*color: #333;*/
						color: #49352D;
						font-weight: bold;
					}

					/* #navPanel .link.depth-2 {
						display: none;
					}*/
 
				#navPanel .indent-1 {
					display: inline-block;
					width: 1em;
				}

				#navPanel .indent-2 {
					display: inline-block;
					width: 2em;
				}

				#navPanel .indent-3 {
					display: inline-block;
					width: 3em;
				}

				#navPanel .indent-4 {
					display: inline-block;
					width: 4em;
				}

				#navPanel .indent-5 {
					display: inline-block;
					width: 5em;
				}

				#navPanel .depth-0 {
					/*color: #fff;*/
					color:#333;
				}

				#navPanel a {
					color: #49352D;
				}

				#navPanel ul {
					padding-left: 0;
				}

				#navPanel #navm ul.u0 li.line {
					border-bottom: solid 1px #49352D /* rgba(192, 0, 0, 1) */;
				}

				#navPanel #navm ul.u0 {
					font-weight: bold;
				}

				#navPanel #navm ul.u1{
					display: none;
					font-weight: bold;
				}				
					#navPanel #navm ul.u1 li{
						background-color: rgb(153, 177, 207);
						margin: 5px;
						border-radius: 5px;
					}

					/* #navPanel #navm ul.u1 li a{
						color: #fff;
					} */

				#navPanel #navm ul.u2{
					display: none;
					font-weight: normal;
				}
					#navPanel #navm ul.u2 li{
						border-top: #C00000 solid 1px;
					}

					#navPanel #navm ul.u2 .link:first-child{
						border-top: none;
					}

			body.navPanel-visible #page-wrapper {
				-moz-transform: translateX(275px);
				-webkit-transform: translateX(275px);
				-ms-transform: translateX(275px);
				transform: translateX(275px);
			}

			body.navPanel-visible #titleBar {
				-moz-transform: translateX(275px);
				-webkit-transform: translateX(275px);
				-ms-transform: translateX(275px);
				transform: translateX(275px);
			}

			body.navPanel-visible #navPanel {
				-moz-transform: translateX(0);
				-webkit-transform: translateX(0);
				-ms-transform: translateX(0);
				transform: translateX(0);
			}

		/* Header */

			#header {
				padding: 0 ;
				position:relative;
				z-index:0;
				opacity:0;
				height: 62px;
			}
				
				/* #header a {
					display:none;
				} */

			#logo {
				top: 0em;
				/*margin: 1.15em 0 1.15em 0;*/
				margin:0;
			}
			
			#nav {
				display: none;
			}

		/* Banner */

			#banner {
				padding: 3em 0em 3em 0em;
			}

				#banner header h2 {
					font-size: 2.4em;
				}

				#banner header .byline {
					margin-top: 0.50em;
					font-size: 1.2em;
				}

		/* Intro */

			#intro {
				padding: 4em 0em 3em 0em;
			}

				#intro p {
					font-size: 1.1em;
				}

		/* Main */

			/* #main {
				padding: 1em 0em 1em 0em;
			} */

				#main .actions {
					padding-top: 1em;
				}

			/* .homepage #main {
				padding: 1em 0em 1em 0em;
			} */

			/* #main2 {
				padding: 1em 0em 2em 0em;
			} */

				#main2 .actions {
					padding-top: 1em;
				}
			
			#main2 .contactleft{
				margin:0 0 1em 0;
			}
			
			#main2 .map{
				padding:0;
			}

			.homepage #main2 {
				padding: 1em 0em 2em 0em;
			}
			
			#main3 {
				padding: 0em 0em 2em 0em;
			}

				#main3 .actions {
					padding-top: 1em;
				}

			.homepage #main3 {
				padding: 1em 0em 1em 0em;
			}
			

		/* Sidebar */

			#sidebar .default li, #sidebar2 .default li {
				display: block;
				text-align: left;
			}

		/* Staff */

			#staff {
				padding: 4em 0em 3em 0em;
				text-align: center;
			}

				#staff p {
					font-size: 1.1em;
				}

		/* Tweets */

			#tweets {
				padding: 5em 0em;
			}

				#tweets .tweet {
					font-size: 1.1em;
				}

				#tweets .pennant {
					margin-bottom: 2em;
				}

		/* Contact */

			#contact {
				padding: 4em 0em 4em 0em;
			}

		
	}

/* .adslick {
	text-align:center;
}

	.adslick .adbg {
		box-shadow: 0px 0px 10px #ccc;
		padding:10px;
		margin:10px;
		position:relative;
		border-radius: 5px;
		overflow: hidden;
	}

	.adslick .adbox {
		width:100%;
		height:300px;
		display:flex;
		align-items: center;
		justify-content: center;
	}

	.adslick img{
		padding: 0 0.5em;
		max-height: 390px;
		background:#fff;
	}

	.adslick h4{
		padding: 0 2em;
	}

	.adslick a {
		color:#333;
		max-width:200px;
		width:100%;
	} */

	.adslick {
    margin: 0 -10px;
	}

	.adslick .hotprod-slide {
		padding: 10px;
	}

	.hotprod {
		background: #fffaf4;
		border: 1px solid #e5d8ca;
		transition:
			transform .25s ease,
			border-color .25s ease,
			box-shadow .25s ease;
	}

	.hotprod:hover {
		transform: translateY(-5px);
		border-color: #d9b89c;
		box-shadow:0 15px 30px rgba(80, 55, 40, .07);
	}

	.hotprod a {
		min-height: 220px;
		padding: 28px;
		display: flex;
		flex-direction: column;
	}

	.hotprod-category {
		color: #8f5538;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: .12em;
	}

	.hotprod-title {
		margin-top: 22px;
		color: #332a25;
		font-size: 20px;
		font-weight: 600;
		line-height: 1.6;
		text-align: center;
	}

	.hotprod-arrow {
		margin-top: auto;
		padding-top: 25px;
		color: #8f5538;
		font-size: 20px;
		transition: transform .2s ease;
	}

	.hotprod:hover .hotprod-arrow {
		transform: translateX(6px);
	}
	

	.adslick .slick-prev,
	.adslick .slick-next {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 42px;
		height: 42px;
		/* border: 1px solid #d9b89c; */
		border-radius: 50%;
		/* background: #fffaf4; */
		z-index: 20;
		transition: all .1s ease;
	}

	.adslick .slick-prev {
		left: -55px;
	}

	.adslick .slick-next {
    right: -55px;
	}

	.adslick .slick-prev::before,
	.adslick .slick-next::before {
		/* font-family: Arial, sans-serif;
		font-size: 17px;
		color: #8f5538;
		top: 3px; */
		
		position: relative;
		content: "";
    display: block;
    width: 15px;
    height: 15px;
    border-top: 5px solid #8f5538;
    border-left: 5px solid #8f5538;
		opacity: 1;
	}

	.adslick .slick-prev::before {
    left: 13px;
	}

	.adslick .slick-next::before {
    left: 11px;
	}

	.adslick .slick-prev::before {
		/* content: "＜"; */
		transform: rotate(-45deg);
	}

	.adslick .slick-next::before {
		/* content: "＞"; */
		transform: rotate(135deg);
	}

	/* .adslick .slick-prev:hover,
	.adslick .slick-next:hover {
		background: #8f5538;
		border: 1px solid #8f5538;
	} */

	.adslick .slick-prev:hover::before,
	.adslick .slick-next:hover::before {
		color: #fffaf4;
	}

	@media (max-width: 600px) {
    .adslick {
			margin: 0 35px;
    }

    .adslick .slick-prev {
			left: -38px;
    }

    .adslick .slick-next {
			right: -38px;
    }

    .adslick .slick-prev,
    .adslick .slick-next {
			width: 32px;
			height: 32px;
    }

    .adslick .slick-prev::before,
    .adslick .slick-next::before {
			font-size: 16px;
    }
	}

.newsimg {
	display:flex;
	align-items: center;
	justify-content: center;
}

.prodbtn {
	margin-bottom: 1em;
}

.prodbtn div div.btncheck {
	/* display:inline-block; */
	padding:0.75em 1em;
	line-height: 1em;
	/* background:linear-gradient(to top, rgba(167, 210, 235, 0.5)0%, rgb(255, 255, 255)100%); */
	border-bottom:1px solid rgba(167, 210, 235, 0.5);
	cursor:pointer;
	font-size: 0.9em;
}

	.prodbtn div div.btncheck:before {
		content:"";
		width: 25px;
		height: 15px;
		float: left;
		background: url(../../images/btn.svg) no-repeat;
		background-size: 15px;
		margin-top: 2px;
	}
	.prodbtn a {
		color: #666;
	}
	
	.prodbtn div div.btncheck:hover {
		background:#2c8cb0;
		color:#fff ;
		transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out, color 0.35s ease-in-out;
	}
	
		.prodbtn div div.btncheck:hover a {
			color:#fff ;
		}
		
	.prodbtn .check {
		background:#2c8cb0;
		color:#fff !important;
	}
		.prodbtn .check a {
			color:#fff;
		}
	
		@media screen and (max-width: 736px) {
			.prodbtn div div.btncheck:before {
				width: 25px;
				height: 30px;
				background-size: 15px;
			}
		}

.prodbtn2 div {
	display:inline-block;
	padding:2px 5px;
	margin: 0 0 0.5em 0 ;
	width: 32.5%;
	text-align: center;
	background:linear-gradient(to top, rgba(238, 238, 238, 0.5)0%, rgba(255, 255, 255, 1)100%);
	border:1px solid #ccc;
	cursor:pointer;
}

	.prodbtn2 a {
		color: #666;
	}
	
	.prodbtn2 div:hover {
		background:#2c8cb0;
		color:#fff ;
		transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out, color 0.35s ease-in-out;
	}
	
		.prodbtn2 div:hover a {
			color:#fff ;
		}
		
	.prodbtn2 .check {
		background:#2c8cb0;
		color:#fff !important;
	}
		.prodbtn2 .check a {
			color:#fff;
		}
	
		@media screen and (max-width: 736px) {
			.prodbtn2 div {
				width: 32%;
			}
		}
	
		.prodbtn3 div div.btncheck {
			/* display:inline-block; */
			padding:0.5em 1em 0.5em 1em;
			line-height: 1em;
			/* background:linear-gradient(to top, rgba(167, 210, 235, 0.5)0%, rgb(255, 255, 255)100%); */
			border-bottom:1px solid rgba(167, 210, 235, 0.5);
			cursor:pointer;
		}
		
			.prodbtn3 div div.btncheck:before {
				content:"";
				width: 30px;
				height: 40px;
				float: left;
				background: url(../../images/btn.svg) no-repeat;
				background-size: 20px;
			}
			.prodbtn3 a {
				color: #666;
			}
			
			.prodbtn3 div div.btncheck:hover {
				/* background:#2c8cb0; */
				color:#f00 ;
				border-bottom:2px solid rgba(255, 0, 0, 0.1) !important;
				transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out, color 0.35s ease-in-out;
			}

				.prodbtn3 div div.btncheck:hover:before {
					background: url(../../images/btnh.svg) no-repeat;
					background-size: 20px;
				}
			
				.prodbtn3 div div.btncheck:hover a {
					color:#fff ;
				}
				
			.prodbtn3 .check {
				border-bottom:2px solid rgba(255, 0, 0, 0.1) !important;
				color:#f00;
			}
				.prodbtn3 div div.check:before {
					background: url(../../images/btnh.svg) no-repeat;
					background-size: 20px;
				}

				.prodbtn3 .check a {
					color:#fff;
				}
			
				@media screen and (max-width: 736px) {
					.prodbtn3{
						margin: 1em 0 0 0;
					}
					
					.prodbtn3 div div.btncheck:before {
						width: 25px;
						height: 30px;
						background-size: 15px;
					}
					
					.prodbtn3 div div.btncheck:hover:before {
						background: url(../../images/btnh.svg) no-repeat;
						background-size: 15px;
					}
			}
		

.prodtag {
	padding: 0 5px 0 0;
	margin: 0 0 0.5em 5px;
	border-bottom: 3px solid #999;
}
.prodtag div{
	display:inline-block;
	border-bottom: 3px solid #999;
	padding: 0.5em;
	width: 33%;
	text-align: center;
	margin:0 0 -3px 0;
}

	.prodtag a{
		color: #666;
	}

	.prodtag div:hover{
		color:#09F;
		border-bottom:3px solid #09F;
		transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
		cursor:pointer;
	}

		.prodtag div:hover a{
			color:#09F;
			transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
			cursor:pointer;
		}

	.prodtag div.check{
		color:#09F;
		border-bottom:3px solid #09F;
	}

		.prodtag div.check a{
			color:#09F;
		}

.prodmore {
	display:block;
	width: 120px;
	position: relative;
	left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 481px) {
	.prodmore {
		position:inherit;
		transform:none;
	}
}

#prodbg {
	box-shadow: 0px 0px 10px #ccc;
	padding:10px;
	margin:10px;
	min-height:330px;
	position:relative;
	text-align: center;
}
	
	#prodbg:hover  {
		/* cursor:pointer; */
		box-shadow: 0px 0px 10px #999;
		transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
	}
	
	#prodbg:hover .button {
			background: #f2852a;
			border-color: rgba(255, 255, 255, 0.4);
			color: #fff !important;
	}

	#prodbg div img {
		max-width:100%;
		max-height:200px;
	}
	
	#prodbg div p {
		font-size:16px;
	}

	.prodtext {
		padding: 1em 0;
	}

@media screen and (max-width: 481px) {
	#prodbg {
		margin:1em;
		min-height:280px;
	}
	
	.prodtext {
		margin: 1em 0 0 0 ;
		padding: 0 0 1em 0;
	}
}

#prodbg2 {
	box-shadow: 0px 0px 5px #ccc;
	padding: 10px;
}

.prodcontent {
	color:#000;
}
	
.imgbox {
	width:100%;
	height:200px;
	display:flex;
	align-items: center;
  justify-content: center;
	overflow: hidden;
}

@media screen and (max-width: 481px) {
	.imgbox {
		height:inherit;
	}
}

.news {
	padding:0 1em;
}

#newshead {
	background: rgba(238, 238, 238, 0.8);
	color:#000;
	font-weight:bold;
	padding:0 1em;
}

.newsli {
	padding: 0.25em 1em;
	border-bottom:1px solid #CCC;
	cursor:pointer;
}
	.newsli:hover a {
		
		color:#cd1c42;
	}

@media screen and (max-width: 481px) {
  .homenewsbox {
	  margin:1em 0 0 0;
  }
}

.homenews {
	font-size: 1.2em;
}

.homenews div div:hover {
	color:#2c8cb0;
	cursor:pointer;	
}

.homenews span{
	color: #2553c9;
	font-size: 0.87em;
}

.homenews span a:hover{
	color:#f00;
}

.homefocus {
	color: #f00;
	font-size: 1.2em;
}

.homefocus span{
	color: #1d891a;
	font-size: 0.87em;
}

.homefocus span a:hover{
	color: #f00;
}

.search {
	display:inline-block;
	/* white-space: nowrap; */
	margin-left:30px;
}

input[type="submit"] {
	/* background: #2c8cb0;
	color:#fff; */
	border: 3px solid #FFF;
	border-radius: 5px;
	font-size: 1em;
	padding: 0.1em 1em 0.1em 1em;
	color: #fff !important;
	text-decoration: none;
	text-align: center;
	cursor:pointer;	
}

input[type="button"] {
	background: #2c8cb0;
	color:#fff;
	border: 3px solid #FFF;
	border-radius: 5px;
	font-size: 1em;
	padding: 0.1em 1em 0.1em 1em;
	color: #fff !important;
	text-decoration: none;
	text-align: center;
	cursor:pointer;	
}


@media screen and (max-width: 960px) {
  .search {
	  margin-left:0px;
  }

  .recolumn {
	flex-direction: column-reverse;
  }
}
.table_note {
	color:red !important;
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom: 0;
}

@media screen and (min-width: 481px) {
	.table_note {
			display: none;
	}
}

.goback {
	cursor: pointer;
}

.goback.button:hover {
	background: #f2852a;
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff !important;
}

#wrapper {
	margin: 2em 0 3em 0;
}

#girdle-wrapper {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: relative;
	text-align: center;
	padding: 1em 0 6em 0;
	margin:  1em 0 2em 0;
}

.girdle {
	margin: 2em 0 ;
}

.submit {
	cursor: pointer;
	display:block;
	width: 120px;
}

.submit.button:hover {
	background: #f2852a;
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff !important;
}


	hr {
    border: 0;
    height: 3px;
    background: #ddd;
    border-radius: 3px;
		margin: 2em 0;
	}



.news-section {
    display:flex;
    gap:clamp(40px, 8vw, 100px);
}


/* 左側 */
.news-title {
    flex:0 0 clamp(160px, 18vw, 220px);
		margin-top: 50px;
}

.news-title span {
    display:block;
    /* font-size:14px; */
    letter-spacing:4px;
    color:#a88b52;
    margin-bottom:10px;
}

.news-title h2 {
    font-size:42px;
    font-weight:500;
    line-height:1.2;
}

/* 右側 */
.news-list {
    flex:1;
}

.news-item {
    display:flex;
    align-items:center;
    /* padding:15px 0; */
    border-bottom:1px solid #ddd;
    color:#222;
    text-decoration:none;
    transition:.3s;
}

.news-item:hover {
    padding-left:15px;
}
.news-date {
    width:130px;
    color:#999;
		padding: 5px 0;
}
.news-date span {
    display:block;
    font-size:13px;
}
.news-date b {
    font-size:22px;
    font-weight:500;
    color:#222;
}

/* 標題 */
.news-content {
    flex:1;
}
.news-content h4 {
    font-size:18px;
    font-weight:400;
}

.tag {
    /* display:inline-block; */
    font-size:11px;
    background:#1b3555;
    color:#fff;
    padding:3px 10px;
    border-radius:20px;
    margin-bottom:8px;
}

/* 箭頭 */
.arrow {
    color:#b08a4b;
    font-size:20px;
}

/* more */
.more-btn {
    display:inline-block;
    margin-top:15px;
    color:#222;
    font-size:13px;
    letter-spacing:2px;
}

@media (max-width: 768px) {
    .news-section {
        display:block;
        padding:10px 20px;
    }
    .news-title {
        width:auto;
        /* margin-bottom:40px; */
    }
    .news-title span {
        font-size:12px;
        margin-bottom:12px;
    }
    .news-title h2 {
        font-size:32px;
    }
    .news-item {
        display:block;
        position:relative;
        padding:20px 35px 20px 0;
    }
    .news-date {
        width:auto;
        display:flex;
        gap:8px;
        align-items:center;
        /* margin-bottom:5px; */
    }
    .news-date span {
        display:inline;
        font-size:12px;
    }
    .news-date b {
        font-size:18px;
    }
    .news-content h3 {
        font-size:16px;
        line-height:1.6;
    }
    .tag {
        margin-bottom:10px;
    }
    .arrow {
        position:absolute;
        right:0;
        top:50%;
        transform:translateY(-50%);
    }
    .more-btn {
        margin-top:25px;
    }
}

#titlehead {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 1em 0 20px;
}

#titlehead::before,
#titlehead::after {
	content: "";
	height: 1px;
	background: #D9826B;
	flex: 1;
}

#titlehead h3 {
	margin: 0 35px;
	font-size: 1.5em;
	color: #49352D;
	letter-spacing: 5px;
}

#3btn {
	padding:60px 0;
	background:#f7f7f7;
}


.feature-card {
	display:block;
	background:#fff;
	text-align:center;
	padding:45px 20px;
	margin:15px;
	border-radius:15px;
	color:#333;
	text-decoration:none;
	box-shadow:0 5px 20px rgba(0,0,0,.08);
	transition:.35s;
}

.feature-card i {
	display:inline-flex;
	width:90px;
	height:90px;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:#f2eadf;
	font-size:38px;
	color:#b58a4a;
}

.feature-card h3 {
	font-size:24px;
	letter-spacing:2px;
	margin:10px 0;
}

.feature-card p {
	color:#777;
	margin:0;
}

/* hover */
.feature-card:hover {
	transform:translateY(-8px);
	box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.feature-card:hover i {
	color:#333;
}

.index_map {
	margin: 3em 0 -1em 0;
}

.home_about {
	margin: 2em 0 0 0 ;
}

@media(max-width:737px){
	.home_about {
		margin: 0 ;
	}
}

.bg {
	background:var(--paper);
}

.hero {
	width: min(1120px, calc(100% - 48px));
	margin: 0 auto;
	padding: 58px 0 90px;
}

/* Breadcrumb */

.breadcrumb {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 1.5em;
	font-size: 13px;
	color: var(--muted);
}

.breadcrumb a:hover {
	color: var(--primary);
}

.breadcrumb span {
	color: var(--muted);
}


/* Hero Layout */

.hero-content {
	display: grid;
	grid-template-columns:
		minmax(0, 0.9fr)
		minmax(400px, 1.1fr);
	gap: 90px;
	align-items: center;
}


/* Hero Text */

.eyebrow {
	display: block;
	margin-bottom: 16px;
	color: var(--primary);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
}

.hero-title {
	max-width: 560px;
	font-size: clamp(38px, 5vw, 60px);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.04em;
	margin-bottom: 24px;
}

.hero-description {
	max-width: 500px;
	color: var(--text-light);
	font-size: 16px;
	line-height: 2;
}

.hero-line {
	width: 64px;
	height: 2px;
	margin-top: 34px;
	background: var(--accent);
}


/* Lawyer Photo */

.lawyer-photo {
	position: relative;
	max-width: 480px;
	margin-left: auto;
}

.lawyer-photo::before {
	content: "";
	position: absolute;
	width: 85%;
	height: 85%;
	right: -22px;
	bottom: -22px;
	background: var(--accent);
	z-index: 0;
}

.lawyer-photo img {
	position: relative;
	z-index: 1;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: #dfd2c4;
}

		/* ========================================
       Intro Section
    ======================================== */

    .intro {
      background: var(--paper);
      border-top: 1px solid var(--line);
      /* border-bottom: 1px solid var(--line); */
    }

    .intro-inner {
      width: min(900px, calc(100% - 48px));
      margin: 0 auto;
      padding: 110px 0;
    }

    .section-label {
      display: block;
      margin-bottom: 18px;
      color: var(--primary);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.2em;
    }

    .section-title {
      font-size: clamp(30px, 4vw, 44px);
      font-weight: 600;
      line-height: 1.5;
      letter-spacing: 0.03em;
      margin-bottom: 36px;
    }

    .intro-text {
      max-width: 720px;
      color: var(--text-light);
      font-size: 17px;
      line-height: 2.2;
    }

    .intro-quote {
      margin-top: 50px;
      padding-left: 28px;
      border-left: 2px solid var(--accent);
      font-size: 20px;
      font-weight: 500;
      line-height: 1.8;
      color: var(--text);
    }


    /* ========================================
       Experience
    ======================================== */

    /* .experience {
      background: var(--bg);
    } */

    .experience-inner {
      width: min(900px, calc(100% - 48px));
      margin: 0 auto;
      padding: 110px 0;
    }

    .timeline {
      margin-top: 60px;
    }

    .timeline-item {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 36px;
      padding: 0 0 20px;
      position: relative;
    }

    .timeline-item:not(:last-child)::before {
      content: "";
      position: absolute;
      left: 126px;
      top: 31px;
      bottom: 0;
      width: 1px;
      background: var(--line);
    }

    .timeline-year {
      color: var(--primary);
      font-size: 16px;
      font-weight: 600;
      text-align: right;
    }

    .timeline-content {
      position: relative;
      padding-left: 28px;
    }

    .timeline-content::before {
      content: "";
      position: absolute;
      left: -5px;
      top: 10px;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: var(--primary);
      border: 3px solid var(--bg);
    }

    .timeline-title {
      font-size: 19px;
      font-weight: 600;
      margin-bottom: 5px;
    }

    .timeline-description {
      color: var(--text-light);
      font-size: 14px;
    }

		/* ========================================
       Tablet
    ======================================== */

    @media (max-width: 900px) {

      .hero-content {
        grid-template-columns: 1fr;
        gap: 60px;
      }

      .lawyer-photo {
        width: min(480px, 100%);
        margin: 0;
      }

      .practice-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

		/* ========================================
       Mobile
    ======================================== */

		@media (max-width: 768px) {

      .site-header {
        height: 68px;
      }

      .header-inner {
        width: calc(100% - 32px);
      }

      .nav {
        display: none;
      }

      .logo {
        font-size: 17px;
      }

      /* Hero */

      .hero {
        width: calc(100% - 32px);
        padding: 38px 0 70px;
      }

      .breadcrumb {
        margin-bottom: 40px;
        font-size: 12px;
      }

      .hero-content {
        gap: 48px;
      }

      .hero-title {
        font-size: 36px;
      }

      .hero-description {
        font-size: 14px;
      }

      .lawyer-photo {
        max-width: 100%;
      }

      .lawyer-photo::before {
        right: -10px;
        bottom: -10px;
      }


      /* Sections */

      .intro-inner,
      .experience-inner,
      .practice-inner,
      .cta-inner {
        width: calc(100% - 32px);
        padding: 70px 0;
      }

      .intro-text {
        font-size: 15px;
        line-height: 2;
      }

      .intro-quote {
        margin-top: 35px;
        padding-left: 20px;
        font-size: 17px;
      }


      /* Timeline */

      .timeline {
        margin-top: 40px;
      }

      .timeline-item {
        grid-template-columns: 75px 1fr;
        gap: 20px;
        padding-bottom: 35px;
      }

      .timeline-item:not(:last-child)::before {
        left: 79px;
      }

      .timeline-year {
        font-size: 14px;
      }

      .timeline-content {
        padding-left: 20px;
      }

      .timeline-content::before {
        left: -5px;
      }

      .timeline-title {
        font-size: 17px;
      }

    }

		/* ========================================
       Small Mobile
    ======================================== */

    @media (max-width: 480px) {

      .hero-title {
        font-size: 32px;
      }

      .section-title {
        font-size: 29px;
      }

      .timeline-item {
        grid-template-columns: 62px 1fr;
        gap: 14px;
      }

      .timeline-item:not(:last-child)::before {
        left: 66px;
      }

      .timeline-content {
        padding-left: 17px;
      }

      .timeline-title {
        font-size: 16px;
      }
    }


		/* =========================
       Page Hero
    ========================= */

    .page-hero {
      width: min(1120px, calc(100% - 48px));
      margin: 0 auto;
      padding: 72px 0 64px;
    }

		.page-case {
      width: min(1120px, calc(100% - 48px));
      margin: 0 auto;
      padding: 36px 0 64px;
    }    

    /* Title */

    .page-label {
      display: inline-block;
      margin-bottom: 12px;
      color: var(--primary);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .page-title {
      font-size: clamp(36px, 5vw, 56px);
      font-weight: 600;
      letter-spacing: 0.05em;
      line-height: 1.3;
      margin-bottom: 18px;
    }

    .page-description {
      /* max-width: 620px; */
      color: #76675d;
      font-size: 16px;
      line-height: 2;
    }

    /* Decorative line */

    .hero-line {
      width: 64px;
      height: 2px;
      margin-top: 34px;
      background: var(--accent);
    }

		/* =========================
       Article List
    ========================= */

    .article-section {
     /*  background: var(--bg); */
		 background: #fff;
      border-top: 1px solid var(--line);
    }

    .article-container {
      width: min(1120px, calc(100% - 48px));
      margin: 0 auto;
      padding: 64px 0 100px;
    }

    .article-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }

    .article-card {
      display: flex;
      flex-direction: column;
      min-height: 300px;
      padding: 32px;
      background: #fffdf9;
      border: 1px solid var(--line);
      text-decoration: none;
      color: inherit;
      transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
    }

    .article-card:hover {
      transform: translateY(-4px);
      border-color: var(--accent);
      box-shadow:
        0 14px 35px rgba(91, 60, 42, 0.08);
    }

    .article-meta {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      color: var(--muted);
      font-size: 13px;
    }

    .category {
      color: var(--primary);
      font-weight: 600;
    }

    .article-title {
      font-size: 22px;
      line-height: 1.5;
      font-weight: 600;
      margin-bottom: 14px;
    }

    .article-excerpt {
      color: #76675d;
      font-size: 14px;
      line-height: 1.9;
    }

    .read-more {
      margin-top: auto;
      padding-top: 28px;
      color: var(--primary);
      font-size: 13px;
      font-weight: 600;
    }

    .read-more span {
      display: inline-block;
      margin-left: 6px;
      transition: transform 0.2s ease;
    }

    .article-card:hover .read-more span {
      transform: translateX(5px);
    }
		
		/* =========================
			Category Filter
		========================= */

		.filter-wrap {
				margin-top: 42px;
		}

		.filter {
				display: flex;
				flex-wrap: wrap;
				gap: 10px;
		}

		.filter button {
				padding: 9px 18px;
				border: 1px solid var(--accent);
				border-radius: 999px;
				background: transparent;
				color: var(--primary);
				font-size: 13px;
				cursor: pointer;
				transition:
						background .2s ease,
						color .2s ease,
						border-color .2s ease;
		}

		.filter button:hover {
				border-color: var(--logo_o);
				background: rgba(143, 85, 56, .06);
		}

		.filter button.active {
				border-color: var(--primary);
				background: var(--primary);
				color: var(--paper);
		}

		/* =========================
			Pagination
		========================= */

		.pagination {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 8px;

				margin-top: 60px;
		}

		.pagination a {
				width: 38px;
				height: 38px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid var(--line);
				color: var(--muted);
				font-size: 13px;
				transition: .2s ease;
				background: var(--paper);
		}

		.pagination a:hover,
		.pagination a.active {
				border-color: var(--primary);
				background: var(--primary);
				color: var(--paper);
		}
		

		/* =========================
       Responsive
    ========================= */

    @media (max-width: 768px) {

      .page-hero {
        width: min(100% - 32px, 600px);
        padding: 44px 0 48px;
      }

			.page-case {
        width: min(100% - 32px, 600px);
        padding: 44px 0 48px;
      }

      .breadcrumb {
        margin-bottom: 26px;
        font-size: 12px;
      }

      .page-title {
        font-size: 36px;
      }

      .page-description {
        font-size: 14px;
        line-height: 1.9;
      }

      .hero-line {
        margin-top: 26px;
      }

      .article-container {
        width: min(100% - 32px, 600px);

        padding: 44px 0 64px;
      }

      .article-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .article-card {
        min-height: 260px;
        padding: 24px;
      }

      .article-title {
        font-size: 20px;
      }
    }


    @media (max-width: 480px) {

      .logo {
        font-size: 17px;
      }

      .page-hero {
        padding-top: 36px;
      }

			.page-case {
        padding-top: 36px;
      }

      .breadcrumb {
        gap: 7px;
        white-space: nowrap;
      }

      .page-label {
        font-size: 11px;
      }

      .page-title {
        font-size: 32px;
        letter-spacing: 0.03em;
      }

      .page-description {
        font-size: 14px;
      }

      .article-card {
        padding: 22px;
      }

      .article-meta {
        font-size: 12px;
      }

      .article-title {
        font-size: 19px;
      }

			/* Filter */

			.filter-wrap {
				margin-top: 34px;
			}

			.filter {
				flex-wrap: nowrap;
				overflow-x: auto;
				padding-bottom: 8px;
				scrollbar-width: none;
			}

			.filter::-webkit-scrollbar {
				display: none;
			}

			.filter button {
				flex: 0 0 auto;
				white-space: nowrap;
				padding: 8px 16px;
			}
    }		


		/* ========================================
			Article
		======================================== */

		.article-header {
				width: min(1000px, calc(100% - 48px));
				margin: 0 auto;
				padding: 52px 0 70px;
		}

		/* ========================================
			Article Header
		======================================== */

		.article-meta {
			display: flex;
			align-items: center;
			gap: 12px;
			margin-bottom: 20px;
			font-size: 13px;
		}

		.category {
			color: var(--primary);
			font-weight: 600;
			letter-spacing: .05em;
		}

		.date {
			color: var(--muted);
		}

		.article-header .article-title {
			max-width: 850px;
			margin-bottom: 25px;
			font-size: clamp(28px, 5vw, 38px);
			font-weight: 600;
			line-height: 1.4;
			letter-spacing: .03em;
		}

		.article-lead {
			max-width: 700px;
			color: var(--text-light);
			font-size: 16px;
			line-height: 2;
		}

		.title-line {
			width: 60px;
			height: 2px;
			margin-top: 32px;
			background: var(--accent);
		}

		/* ========================================
			Main Article Layout
		======================================== */

		.article-layout {
				width: min(1000px, calc(100% - 48px));
				margin: 0 auto;
				padding: 75px 0 100px;
				display: grid;
				grid-template-columns: minmax(0, 720px) 200px;
				gap: 70px;
				align-items: start;
		}

		/* ========================================
			Article Content
		======================================== */

		.article-content {
				font-size: 16px;
				line-height: 2.1;
		}

		.article-content h2 {
				position: relative;
				margin: 45px 0 22px;
				padding-left: 18px;
				font-size: 28px;
				line-height: 1.5;
		}

		.article-content h2::before {
				content: "";
				position: absolute;
				left: 0;
				top: 8px;
				width: 4px;
				height: 28px;
				background: var(--primary);
		}

		.article-content h3 {
				margin: 10px 0 ;
				font-size: 21px;
				line-height: 1.5;
		}

		.article-content p {
				margin-bottom: 10px;
		}

		.article-content strong {
				color: var(--primary-dark);
		}

		.article-content ul {
				margin: 25px 0 30px;
				padding-left: 25px;
		}

		.article-content li {
				margin-bottom: 8px;
		}

		/* ========================================
			Table
		======================================== */

		.article-table {
				width: 100%;
				margin: 35px 0;
				border-collapse: collapse;
				font-size: 14px;
		}

		.article-table th,
		.article-table td {
				padding: 14px 16px;
				border: 1px solid var(--line);
				text-align: left;
		}

		.article-table th {
				background: var(--highlight);
				color: var(--primary-dark);
				font-weight: 600;
		}

		

		/* ========================================
			Lawyer CTA
		======================================== */

		.lawyer-cta {
				margin-top: 85px;
				padding: 50px 45px;
				background: var(--primary);
				color: #fffaf4;
				text-align: center;
		}

		.lawyer-cta-label {
				margin-bottom: 12px;
				font-size: 12px;
				letter-spacing: .2em;
				opacity: .7;
		}

		.lawyer-cta h2 {
				margin-bottom: 15px;
				font-size: 28px;
				font-weight: 500;
				color: #fff;
		}

		.lawyer-cta p {
				max-width: 540px;
				margin: 0 auto 28px;
				color: rgba(255,250,244,.78);
				font-size: 14px;
		}

		.cta-button {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				padding: 11px 28px;
				border: 1px solid rgba(255,255,255,.5);
				color: #fffaf4;
				font-size: 13px;
				transition: all .2s ease;
		}

		.cta-button:hover {
				background: #fffaf4;
				color: var(--primary);
		}

		/* ========================================
			Previous / Next
		======================================== */

		.article-navigation {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 20px;
				margin-top: 50px;
				padding-top: 35px;
				border-top: 1px solid var(--line);
		}

		.article-nav-item {
				padding: 15px 0;
				transition: color .2s ease;
		}

		.article-nav-item.next {
				text-align: right;
		}

		.nav-label {
				display: block;
				margin-bottom: 6px;
				color: var(--muted);
				font-size: 12px;
		}

		.nav-title {
				color: var(--primary);
				font-size: 15px;
				font-weight: 600;
		}

		.article-nav-item:hover .nav-title {
				color: var(--primary-dark);
		}

		/* ========================================
			Related Articles
		======================================== */

		.related-section {
				padding: 80px 0 100px;
				background: var(--bg);
				border-top: 1px solid var(--line);
		}

		.related-inner {
				width: min(1000px, calc(100% - 48px));
				margin: 0 auto;
		}

		.related-heading {
				margin-bottom: 35px;
				font-size: 28px;
				font-weight: 600;
		}

		.related-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 18px;
		}

		.related-card {
				padding: 25px;
				border: 1px solid var(--line);
				background: var(--white);
				transition:
						transform .2s ease,
						border-color .2s ease;
		}

		.related-card:hover {
				transform: translateY(-4px);
				border-color: var(--accent);
		}

		.related-category {
				margin-bottom: 10px;
				color: var(--primary);
				font-size: 12px;
		}

		.related-title {
				font-size: 17px;
				line-height: 1.6;
		}

		/* ========================================
			Tablet
		======================================== */

		@media (max-width: 900px) {

				.article-layout {
						grid-template-columns: 1fr;
				}
				
				.related-grid {
						grid-template-columns: 1fr 1fr;
				}

		}

		/* ========================================
			Mobile
		======================================== */

		@media (max-width: 768px) {

				.site-header {
						height: 68px;
				}

				.header-inner {
						width: calc(100% - 32px);
				}

				.logo {
						font-size: 17px;
				}

				.nav {
						display: none;
				}

				/* Header */

				.article-header {
						width: calc(100% - 32px);
						padding: 35px 0 50px;
				}

				.breadcrumb {
						margin-bottom: 35px;
						font-size: 12px;
				}

				.article-title {
						font-size: 28px;
				}

				.article-lead {
						font-size: 14px;
				}

				/* Content */

				.article-layout {
						width: calc(100% - 32px);
						padding: 45px 0 65px;
						gap: 35px;
				}

				.article-content {
						font-size: 15px;
						line-height: 2;
				}

				.article-content h2 {
						margin-top: 50px;
						font-size: 24px;
				}

				.article-content h3 {
						font-size: 19px;
				}

				.article-table {
						display: block;
						overflow-x: auto;
						white-space: nowrap;
				}

				/* CTA */

				.lawyer-cta {
						margin-top: 65px;
						padding: 40px 25px;
				}

				.lawyer-cta h2 {
						font-size: 24px;
				}

				/* Navigation */

				.article-navigation {
						grid-template-columns: 1fr;
						gap: 5px;
				}

				.article-nav-item.next {
						text-align: left;
						border-top: 1px solid var(--line);
						padding-top: 20px;
				}

				/* Related */

				.related-section {
						padding: 55px 0 70px;
				}

				.related-inner {
						width: calc(100% - 32px);
				}

				.related-grid {
						grid-template-columns: 1fr;
				}
		}

		/* ========================================
			Footer
		======================================== */
		.site-footer {
			background: #b39e93 /* #b3afa9 */;
			padding: 75px 20px 25px;
		}

		.footer-container {
			width: min(1180px, 100%);
			margin: auto;
		}

		/* ========================================
			Main Footer
		======================================== */

		.footer-main {
			display: grid;
			grid-template-columns:
					1.6fr
					1fr
					1fr;
			gap: 90px;
			padding-bottom: 70px;
			border-bottom: 1px solid #292c34;
		}

		.footer-main a {
			color: var(--text);
		}

		/* ==================================================
			BRAND
		================================================== */

		.footer-brand img{
			background: #fff;
			box-shadow: #ccc 1px 1px 10px /* inset */;
			border: #000 1px solid;
			padding: 10px;
		}

		.footer-brand p {
			font-size: 16px;
		}

		/* .footer-brand a:hover {
				color: var(--primary-dark);
				font-weight: bold;
		} */

		.footer-logo {
				display: inline-block;
				margin-bottom: 24px;
		}

		.footer-logo img {
				display: block;
				/* width: 155px; */
				height: auto;
		}

		.footer-description {
				max-width: 320px;
				margin: 0;
				color: #898d98;
				font-size: 13px;
				line-height: 2;
		}

		/* ==================================================
			SOCIAL
		================================================== */

		.footer-social {
				display: flex;
				gap: 9px;
				margin-top: 28px;
		}

		.footer-social a {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 34px;
				height: 34px;
				border: 1px solid #30333c;
				border-radius: 50%;
				color: #a5a8b0;
				font-size: 11px;
				transition: .25s;
		}

		.footer-social a:hover {
				background: #fff;
				border-color: #fff;
				color: #111318;
		}

		/* ==================================================
			NAV TITLE
		================================================== */

		.footer-nav-title {
				display: flex;
				align-items: center;
				gap: 12px;
				/* padding-bottom: 20px; */
				/* border-bottom: 1px solid #292c34; */
				margin-bottom: 6px;
		}

		.footer-nav-title span {
				color: #6973ff;
				font-size: 10px;
				font-weight: 800;
				letter-spacing: 1px;
		}

		.footer-nav-title h3 {
				margin: 0;
				font-size: 18px;
				font-weight: 600;
		}


		/* ==================================================
			NAV LIST
		================================================== */

		.footer-nav ul {
				padding: 0;
				margin: 0;
				list-style: none;
		}

		.footer-nav li {
				border-bottom: 1px solid #20232a;
		}

		.footer-nav a {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 5px 0;
				color: var(--text);
				font-size: 16px;
				transition: .25s;
		}

		.footer-nav a i {
				color: #555963;
				font-size: 13px;
				font-style: normal;
				opacity: 0;
				transform: translateX(-5px);
				transition: .25s;
		}

		.footer-nav a:hover {
				color: var(--primary-dark);
				padding-left: 6px;
				font-weight: bold;
		}

		.footer-nav a:hover i {
				opacity: 1;
				transform: translateX(0);
		}

		/* ========================================
			Footer Bottom
		======================================== */

		.footer-bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 22px;
			color: #60646e;
			font-size: 12px;
		}

		.footer-bottom-links {
			display: flex;
			gap: 25px;
		}

		.footer-bottom-links a {
			color: #70747e;
			transition: .2s;
		}

		.footer-bottom-links a:hover {
			color: #fff;
		}

		/* ========================================
			Tablet
		======================================== */

		@media (max-width: 800px) {
				.footer-main {
					grid-template-columns:
							1fr 1fr;
					gap: 50px;
			}

			/* .footer-brand {
					grid-column: 1 / -1;
			} */
		}

		/* ========================================
			Mobile
		======================================== */

		@media (max-width: 550px) {

				.site-footer {
						padding: 55px 20px 20px;
				}

				.footer-main {
						display: flex;
						flex-direction: column;
						gap: 45px;
						padding-bottom: 45px;
				}

				.footer-description {
						max-width: 100%;
				}

				.footer-nav-title {
						padding-bottom: 15px;
				}

				.footer-nav a {
						padding: 14px 0;
				}

				.footer-bottom {
						align-items: flex-start;
						flex-direction: column;
						gap: 15px;
						line-height: 1.8;
				}

				.footer-bottom-links {
						gap: 18px;
				}
		}

		/* ==================================================
			Filter
		================================================== */

		.case-filter {
			margin-top: 42px;
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
		}

		.case-filter button {
			padding: 8px 18px;
			border: 1px solid var(--accent);
			border-radius: 999px;
			background: transparent;
			color: var(--primary);
			font-family: inherit;
			font-size: 13px;
			cursor: pointer;
			transition: all .2s ease;
		}

		.case-filter button:hover,
		.case-filter button.active {
			border-color: var(--primary);
			background: var(--primary);
			color: #fffaf4;
		}

		/* ==================================================
			Cases Section
		================================================== */

		.cases-section {
			/* background: var(--bg); */
			background: #fff;
			border-top: 1px solid var(--line);
		}

		.cases-container {
			width: min(1120px, calc(100% - 48px));
			margin: 0 auto;
			padding: 50px 0 ;
		}

		.cases-title {
			font-size: 32px;
			margin-bottom: 1em;
			line-height: 1.4;
		}

		.cases-subtitle {
			font-size: 26px;
			margin-bottom: 1em;
		}

		.cases-description {
      /* max-width: 620px; */
      color: #76675d;
      font-size: 16px;
      line-height: 2;
			margin-bottom: 2.5em;
    }

		/* ==================================================
			Case Card
		================================================== */

		.case-card {
			position: relative;
			display: grid;
			grid-template-columns: 130px 1fr 100px;
			gap: 40px;
			padding: 42px 35px;
			margin-bottom: 18px;
			background: var(--paper);
			border: 1px solid var(--line);
			transition:
					transform .25s ease,
					border-color .25s ease,
					box-shadow .25s ease;
		}

		.case-card:hover {
			transform: translateY(-4px);
			border-color: var(--accent);
			box-shadow:0 15px 35px rgba(91, 60, 42, .07);
		}

		/* Case Number */

		.case-number {
			color: var(--accent);
			font-family: Georgia, serif;
			font-size: 52px;
			line-height: 1;
			letter-spacing: -.03em;
		}

		/* Case Main */

		.case-category {
			display: inline-block;
			margin-bottom: 12px;
			color: var(--primary);
			font-size: 12px;
			font-weight: 600;
			letter-spacing: .08em;
		}

		.case-title {
			margin-bottom: 15px;
			font-size: 25px;
			font-weight: 600;
			line-height: 1.6;
		}

		.case-description {
				max-width: 680px;
				margin-bottom: 22px;
				color: var(--text-light);
				font-size: 14px;
				line-height: 1.9;
		}

		/* ==================================================
			Case Info
		================================================== */

		.case-info {
			display: flex;
			flex-wrap: wrap;
			gap: 25px;
		}

		.case-info-item {
			display: flex;
			flex-direction: column;
			gap: 3px;
		}

		.case-info-label {
			color: var(--muted);
			font-size: 11px;
		}

		.case-info-value {
			color: var(--text);
			font-size: 13px;
			font-weight: 600;
		}

		/* ==================================================
			Arrow
		================================================== */

		.case-arrow {
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--primary);
			font-size: 22px;
		}

		.case-arrow span {
			transition: transform .2s ease;
		}

		.case-card:hover .case-arrow span {
			transform: translateX(6px);
		}

		/* ==================================================
			Featured Case
		================================================== */

		.case-card.featured {
			grid-template-columns: 130px 1fr 100px;
			background: var(--primary);
			border-color: var(--primary);
			color: #fffaf4;
		}

		.case-card.featured .case-number {
			color: rgba(255,255,255,.3);
		}

		.case-card.featured .case-category {
			color: #e6c8af;
		}

		.case-card.featured .case-description {
			color: rgba(255,250,244,.75);
		}

		.case-card.featured .case-info-label {
			color: rgba(255,250,244,.55);
		}

		.case-card.featured .case-info-value {
			color: #fffaf4;
		}

		.case-card.featured .case-arrow {
			color: #fffaf4;
		}

		/* ==================================================
			Bottom Note
		================================================== */

		.case-note {
			margin-top: 45px;
			padding: 22px 25px;
			border-left: 2px solid var(--accent);
			color: var(--muted);
			font-size: 12px;
			line-height: 1.9;
		}

		/* ==================================================
			CTA
		================================================== */

		.case-cta {
			padding: 85px 24px;
			background: var(--highlight);
			text-align: center;
		}

		.case-cta-label {
			margin-bottom: 12px;
			color: var(--primary);
			font-size: 11px;
			letter-spacing: .2em;
		}

		.case-cta h2 {
			margin-bottom: 15px;
			font-size: 30px;
			font-weight: 600;
		}

		.case-cta p {
			max-width: 600px;
			margin: 0 auto 30px;
			color: var(--text-light);
			font-size: 14px;
		}

		.cta-button {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			padding: 12px 30px;
			background: var(--primary);
			color: #fffaf4;
			font-size: 13px;
			transition: background .2s ease;
		}

		.cta-button:hover {
			background: var(--primary-dark);
		}

		/* ==================================================
			Tablet
		================================================== */

		@media (max-width: 850px) {
			.page-description {
        font-size: 14px;
				line-height: 1.9;
      }
			
			.case-card {
				grid-template-columns: 90px 1fr 50px;
				gap: 25px;
			}

			.case-number {
				font-size: 42px;
			}

			.case-title {
				font-size: 22px;
			}

			.footer-inner {
				grid-template-columns: 1fr;
				gap: 35px;
			}
		}

		/* ==================================================
			Mobile
		================================================== */

		@media (max-width: 600px) {			

			.case-filter {
				flex-wrap: nowrap;
				overflow-x: auto;
				padding-bottom: 8px;
				scrollbar-width: none;
			}

			.case-filter::-webkit-scrollbar {
				display: none;
			}

			.case-filter button {
				flex: 0 0 auto;
				white-space: nowrap;
			}

			.cases-container {
				width: calc(100% - 32px);
				padding: 45px 0 65px;
			}

			.cases-description {
        font-size: 14px;
      }

			.case-card,
			.case-card.featured {
				display: block;
				padding: 28px 23px;
			}

			.case-number {
				margin-bottom: 20px;
				font-size: 40px;
			}

			.case-title {
				font-size: 20px;
			}

			.case-description {
				font-size: 13px;
			}

			.case-info {
				gap: 20px;
			}

			.case-arrow {
				justify-content: flex-start;
				margin-top: 25px;
				font-size: 18px;
			}

			/* CTA */
			.case-cta {
				padding: 60px 20px;
			}

			.case-cta h2 {
				font-size: 25px;
			}				
		}


		/* =========================================================
			Contact Page
		========================================================= */

		.contact-page {
			/* background: var(--bg); */
			background: #fff;
			padding: 55px 20px 100px;
			min-height: 700px;
		}

		/* =========================================================
			Page Heading
		========================================================= */

		.contact-heading {
			/* width: min(720px, 100%); */
			margin: 0 auto;
			text-align: center;
		}

		.contact-label {
			display: block;
			margin-bottom: 12px;
			color: var(--primary);
			font-size: 11px;
			font-weight: 600;
			letter-spacing: .25em;
		}

		.contact-heading h1 {
			margin-bottom: 20px;
			color: var(--text);
			font-size: clamp(38px, 5vw, 54px);
			font-weight: 600;
			letter-spacing: .08em;
			line-height: 1.4;
		}

		.contact-heading p {
			color: var(--text-light);
			font-size: 18px;
			line-height: 2;
		}

		.heading-line {
			width: 50px;
			height: 2px;
			margin: 28px auto 0;
			background: var(--accent);
		}

		/* =====================================================
			From Area
		===================================================== */

		.form-heading {
			padding-bottom: 25px;
			/* border-bottom: 1px solid #e8e9ed; */
		}

		.form-heading span {
			color: #6976d9;
			font-size: 9px;
			font-weight: 800;
			letter-spacing: 2px;
		}

		.form-heading h2 {
			margin: 8px 0 0;
			font-size: 27px;
			letter-spacing: -.7px;
		}

		/* =========================================================
			Form
		========================================================= */

		.contact-form-wrap {
			width: min(700px, 100%);
			/* margin: 60px 0 0; */
			padding: 25px 40px;
			background: #eee;
			border: 1px solid var(--line);
			box-shadow: 0 20px 50px rgba(80, 55, 40, .05);
		}

		.contact-form {
			display: flex;
			flex-direction: column;
			gap: 30px;
		}

		/* =========================================================
			Form Group
		========================================================= */

		.form-group {
			display: flex;
			flex-direction: column;
			gap: 9px;
		}

		.form-group label {
			color: var(--text);
			font-size: 18px;
			font-weight: 600;
		}

		.form-group label .required {
			margin-left: 3px;
			color: #a85b45;
			font-size: 16px;
		}

		/* =========================================================
			Input / Select / Textarea
		========================================================= */

		.form-group input,
		.form-group select,
		.form-group textarea {
			width: 100%;
			padding: 13px 5px;
			border: 0;
			border-bottom: 1px solid #d8c9bb;
			border-radius: 0;
			outline: none;
			background: transparent;
			color: var(--text);
			font-size: 16px;
			transition:
				border-color .2s ease,
				background .2s ease;
		}

		.form-group input::placeholder,
		.form-group textarea::placeholder {
			color: #b3a59b;
		}

		.form-group input:focus,
		.form-group select:focus,
		.form-group textarea:focus {
			border-bottom-color: var(--primary);
			background: rgba(217,184,156,.06);
		}

		/* Select */

		.form-group select {
			color: var(--text-light);
			cursor: pointer;
		}

		.form-group select option {
			color: var(--text);
		}

		/* Textarea */

		.form-group textarea {
			min-height: 170px;
			resize: vertical;
			line-height: 1.9;
		}

		/* =========================================================
			Privacy
		========================================================= */

		.form-agreement {
			margin-top: -5px;
		}

		.form-agreement label {
			display: flex;
			align-items: flex-start;
			gap: 9px;
			color: var(--muted);
			font-size: 16px;
			line-height: 1.7;
			cursor: pointer;
		}

		.form-agreement input {
			width: 15px;
			height: 15px;
			margin-top: 4px;
			accent-color: var(--primary);
			cursor: pointer;
		}

		.form-agreement a {
			color: var(--primary);
			text-decoration: underline;
			text-underline-offset: 3px;
		}

		/* =========================================================
			Submit
		========================================================= */

		.form-submit {
			margin-top: 5px;
			text-align: center;
		}


		.form-submit button {
			width: 100%;
			padding: 15px 25px;
			border: 0;
			background: var(--primary);
			color: var(--paper);
			font-size: 14px;
			letter-spacing: .08em;
			cursor: pointer;
			transition:
				background .2s ease,
				transform .2s ease;
		}

		.form-submit button:hover {
			background: var(--primary-dark);
		}

		.form-submit button span {
			display: inline-block;
			margin-left: 8px;
			transition: transform .2s ease;
		}

		.form-submit button:hover span {
			transform: translateX(5px);
		}

		/* =========================================================
			Form Note
		========================================================= */

		.form-note {
			margin-top: -8px;
			color: #a19389;
			font-size: 18px;
			line-height: 1.8;
			text-align: center;
		}

		/* =====================================================
			MAIN GRID
		===================================================== */

		.contact-grid {
			display: grid;
			grid-template-columns:
					0.85fr 1.15fr;
			min-height: 690px;
			margin: 50px 0;
		}

		/* =====================================================
			LEFT INFORMATION
		===================================================== */

		.contact-info {
			position: relative;
			overflow: hidden;
			/* background: var(--logo_g); */
			color: #333;
		}

		.info-inner {
			position: relative;
			z-index: 2;
			padding: 48px;
		}

		.info-label {
			color: var(--text);
			font-size: 10px;
			font-weight: 800;
			letter-spacing: 2px;
		}

		.info-inner h2 {
			margin: 25px 0 20px;
			font-size: 34px;
			line-height: 1.35;
			letter-spacing: -1px;
			color: var(--text);
		}

		.info-description {
			max-width: 370px;
			margin: 0;
			color: var(--text);
			font-size: 15px;
			line-height: 1.9;
		}

		/* =====================================================
			DETAILS
		===================================================== */

		.contact-details {
			margin-top: 48px;
		}

		.contact-item {
			padding: 18px 0;
			/* border-top: 1px solid #343842; */
		}

		.item-label {
			display: block;
			margin-bottom: 7px;
			color: var(--text);
			font-size: 18px;
			font-weight: 800;
			letter-spacing: 1.5px;
		}

		.contact-item a,
		.contact-item address {
			color: var(--text) /* #f4f5f7 */;
			font-size: 16px;
			font-style: normal;
			line-height: 1.6;
			transition: .2s;
		}

		.contact-item a:hover {
			color: var(--logo_o);
		}

		/* =====================================================
			OFFICE
		===================================================== */

		.office-hours {
			margin-top: 20px;
			padding-top: 20px;
			border-top: 1px solid #343842;
		}

		.office-hours > div {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.office-hours strong {
			color: #dddfe4;
			font-size: 11px;
			letter-spacing: 1px;
		}

		.office-hours span {
			color: #858a96;
			font-size: 11px;
		}

		/* =====================================================
			LINE
		===================================================== */

		.contact-line {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 35px;
			padding: 14px 0;
			border-top: 1px solid #343842;
			color: #fff;
			font-size: 12px;
			font-weight: 600;
		}

		.contact-line b {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 35px;
			height: 35px;
			border: 1px solid #454954;
			border-radius: 50%;
			font-size: 15px;
			font-weight: 400;
			transition: .3s;
		}

		.contact-line:hover b {
			background: #8993ff;
			border-color: #8993ff;
			transform: rotate(45deg);
		}

		/* =====================================================
			DECORATION
		===================================================== */

		.info-decoration span {
			position: absolute;
			border-radius: 50%;
			border: 1px solid rgba(137,147,255,.15);
		}

		.info-decoration span:nth-child(1) {
			width: 420px;
			height: 420px;
			right: -220px;
			bottom: -200px;
		}

		.info-decoration span:nth-child(2) {
			width: 270px;
			height: 270px;
			right: -145px;
			bottom: -125px;
		}

		/* =====================================================
			TABLET
		===================================================== */

		@media (max-width: 850px) {
			.contact-grid {
				grid-template-columns: 1fr;
			}

			.contact-form-area {
				/* border-left: 1px solid #e2e4e9; */
				border-top: none;
			}
		}

		/* =========================================================
			Mobile
		========================================================= */

		@media (max-width: 600px) {

			.info-inner{
				padding:24px;
			}

			.contact-page {
				padding:35px 16px 70px;
			}

			.contact-heading h1 {
				font-size: 35px;
			}

			.contact-heading p {
				font-size: 13px;
			}

			.contact-form-wrap {
				margin-top: 45px;
				padding:35px 22px;
			}

			.contact-form {
				gap: 26px;
			}

		}

/* ========================================
   Cards
======================================== */

.cards {
    width: min(1180px, calc(100% - 40px));
    margin: auto;    
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* ========================================
   Card
======================================== */

.card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

/*
    左側色條
*/

.card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: /* var(--card-color) */ var(--logo_g);
}

/*
    Hover
*/

.card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow:
        0 20px 50px rgba(20, 25, 40, .10);
}

/* ========================================
   Card Top
======================================== */

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.number {
    font-size: 13px;
    color: #a0a4b1;
    font-weight: 700;
    letter-spacing: 1px;
}

.tag {
	color: /* var(--card-color) */ var(--logo_g);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.5px;
	padding: 6px 9px;
	background: var(--card-bg);
	border-radius: 999px;
}

/* ========================================
   Card Content
======================================== */

.card h2 {
	font-size: 20px;
	line-height: 1.3;
	margin-bottom: 12px;
}

.description {
	color: var(--logo_g);
	font-size: 14px;
	line-height: 1.8;
	margin-bottom: 25px;
}

/* ========================================
   Card Bottom
======================================== */

.card-bottom {
	margin-top: 25px;
	padding-top: 17px;
	border-top: 1px solid #f0f1f5;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.more {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #f4f5f8;
	display: grid;
	place-items: center;
	color: #555b6b;
	transition: .25s;
}

.card:hover .more {
	background: /* var(--card-color) */ var(--logo_g);
	color: white;
	transform: translateX(3px);
}

/* ========================================
   Tablet
======================================== */

@media (max-width: 1000px) {

	.cards {
		grid-template-columns:
				repeat(2, minmax(0, 1fr));
	}

}

/* ========================================
   Mobile
======================================== */

@media (max-width: 650px) {
	.cards {
		width: calc(100% - 30px);
		grid-template-columns: 1fr;
		gap: 15px;
		padding-bottom: 60px;
	}

	.card {
		min-height: 310px;
		padding: 24px;
	}

}

/* =====================================================
   GRID
===================================================== */

.news-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
		margin-top: 2em;
}

/* =====================================================
   CARD
===================================================== */

.news-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 425px;
    padding: 28px;
    border: 1px solid #e1e4eb;
    border-radius: 18px;
    background: #fff;
    box-shadow:
        0 5px 20px rgba(45, 55, 80, .045);
    overflow: hidden;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

/* 卡片左上裝飾 */

.news-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 65px;
    border-radius: 0 0 5px 0;
    background: #6876df;
    transition: height .3s ease;
}

.news-card:nth-child(2)::before {
    background: #45a7a0;
}

.news-card:nth-child(3)::before {
    background: #df8a57;
}

.news-card:hover {
    transform: translateY(-7px);
    border-color: #d6d9e3;
    box-shadow:
        0 18px 45px rgba(45, 55, 80, .11);
}

.news-card:hover::before {
    height: 100%;
}

/* =====================================================
   CARD TOP
===================================================== */

.card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    position: relative;
    z-index: 2;
}

/* =====================================================
   DATE BOX
===================================================== */

.date-box {
    display: grid;
    padding: 13px;
    border-radius: 10px;
    background: #f5f6fa;
    transition: .3s;
}

.news-card:hover .date-box {
    background: #f1f2f7;
}

.date-month {
    grid-column: 1;
    grid-row: 1;
    color: #8d93a2;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.date-day {
    /* grid-column: 2;
    grid-row: 1 / 3; */
    color: #252936;
    font-size: 14px;
    line-height: 1;
}

.date-year {
    grid-column: 1;
    grid-row: 2;
    color: #a0a5b1;
    font-size: 8px;
    font-weight: 600;
}


/* =====================================================
   CATEGORY
===================================================== */

.category {
    padding: 7px 11px;
    border-radius: 20px;
    background: /* #f0f1ff */ #f7e0d1;
    color: /* #6674d8 */ var(--logo_m);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.news-card:nth-child(2) .category {
    background: #eaf7f5;
    color: #3a9991;
}

.news-card:nth-child(3) .category {
    background: #fff2ea;
    color: #d77d4d;
}


/* =====================================================
   CONTENT
===================================================== */

.card-content {
    position: relative;
    z-index: 2;
    /* margin-top: 48px; */
		margin-bottom: 18px;
}

.card-content h3 {
    margin: 0 0 17px;
    color: #242834;
    font-size: 22px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: -.4px;
}

.card-content p {
    margin: 0;
    color: #858b99;
    font-size: 13px;
    line-height: 2;
}


/* =====================================================
   FOOTER
===================================================== */

.card-link {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid #eceef2;
    color: #656b79;
    font-size: 12px;
    font-weight: 600;
    transition: .25s;
}

.card-link .link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #e1e4eb;
    border-radius: 50%;
    color: #59606f;
    font-size: 16px;
    transition: .25s;
}

.news-card:hover .card-link {
    color: #4f5fc9;
}

.news-card:hover .link-icon {
    border-color: #6674d8;
    background: #6674d8;
    color: #fff;
    transform: translateX(4px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {
    .news-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .news-card:nth-child(3) {
        grid-column: 1 / -1;
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 620px) {
    .news-section {
        padding: 65px 15px;
    }

    .news-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 28px;
    }

    .heading-title h2 {
        font-size: 32px;
    }

    .heading-button {
        width: 100%;
        justify-content: space-between;
    }

    .news-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .news-card:nth-child(3) {
        grid-column: auto;
    }

    .news-card {
        min-height: 360px;
        padding: 23px;
    }

    .card-content {
        margin-top: 40px;
    }

    .card-content h3 {
        font-size: 20px;
    }
}