@import url("fontawesome-all.min.css");


html, body {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	color:#303030;
	letter-spacing:1px;
	font-family: Arial, Helvetica, "Microsoft JhengHei", 微軟正黑體, Heiti, 黑體, sans-serif;
	vertical-align:middle;
	}


body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}


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

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


.anchor {
    display: block;
    height: 140px;
    margin-top: -140px;
    visibility: hidden;
}


/*Heading*/

h1 { filter: drop-shadow(5px 8px 5px rgba(0, 0, 0, 0.3)); }
h1 span {
font-weight: bold; 
color: #FFF; 
line-height: 1em; 
letter-spacing: 0.1em;
margin-bottom: 20px;
padding: 15px 55px 15px 30px; 
display: inline-block; 
background: #306cbf;
background: linear-gradient(90deg, rgba(48, 108, 191, 1) 20%, rgba(255, 143, 23, 1) 100%);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);}


h2 { font-size:1.7em; font-weight:bold; color:#306cbf; letter-spacing:2px;}


hr.style1 { width:100%; margin: 40px 0 32px 0; height: 8px; border: 0; box-shadow: inset 0 12px 12px -12px rgba(89, 156, 206, 0.5);}


.tablegrid ul { margin:0 !important; padding:0 !important; display: grid; grid-template-columns: 110px 1fr; list-style-type: none;}
.tablegrid ul li { border-bottom:#CCC dotted 1px; padding: 10px 0;}
.tablegrid ul li:nth-last-child(-n+2) { border-bottom: none;}


/* Work Experience Day table */

table.WED { width:100%;  border-collapse:collapse; background: #FFF; box-shadow:0px 0px 10px #c3daea; }
table.WED th { background: #58a4e6; color:#FFF; font-size:1.1em; text-align:left; font-weight:500;  padding: 15px; border-right: #FFF solid 1px;}
table.WED th:last-child { border-right: none; }
table.WED td { padding:15px; border-right: #CCC 1px solid; }
table.WED td:first-child { text-align:center; } 
table.WED td ul li { margin:0 !important; padding:2px 0 !important;}
table.WED tr { border-bottom:#CCC 1px solid;}
table.WED tr:last-child, table.WED tr:first-child { border:none;}

table.WED-small {display:none; width:100%; border-collapse:collapse; background: #FFF; box-shadow:0px 0px 10px #c3daea;}


/* Click btn */
.clickBtn1{
background: #c45200;
background: linear-gradient(0deg, rgba(196, 82, 0, 1) 0%, rgba(246, 146, 30, 1) 100%);
	border-radius:1.2em;
	display:inline-block;
	cursor:pointer;
	color:#FFF !important;
	font-size:1em;
	padding:8px 25px;
	text-decoration:none;
	margin:3px 0;
}
.clickBtn1:hover {
background: #e87c2e;
background: linear-gradient(0deg, rgba(232, 124, 46, 1) 0%, rgba(255, 163, 59, 1) 100%);
}
.clickBtn1:active {
	position:relative;
	top:1px;
}


.clickBtn2{
background: rgb(31,116,201);
background: linear-gradient(0deg, rgba(31,116,201,1) 0%, rgba(75,137,221,1) 100%); 
	border-radius:0.45em;
	display:inline-block;
	cursor:pointer;
	color:#FFF !important;
	font-size:0.9em !important;
	padding:0.1em 0.5em;
	text-decoration:none;
	margin:3px;
}
.clickBtn2:hover {
background: rgb(75,137,221);
background: linear-gradient(0deg, rgba(75,137,221,1) 0%, rgba(31,116,201,1) 100%); 
}
.clickBtn2:active {
	position:relative;
	top:1px;
}


/*to top button*/
 #myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: #FFF solid 2px;
  outline: none;
  background-color: #CCC;
  color: #FFF;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 25px;
}

#myBtn:hover {
  background-color:#999
}


/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	html {
		box-sizing: border-box;
	}

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

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

	a {
		-moz-transition: color .25s ease-in-out;
		-webkit-transition: color .25s ease-in-out;
		-ms-transition: color .25s ease-in-out;
		transition: color .25s ease-in-out;
		text-decoration:none;
		color: #1f74c9;
	}

		a:hover {
			text-decoration: none;
			color:#58a4e6;
		}

	i {
		font-style: italic;
	}

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


/* Section/Article */

	section {
		margin: 0;
	}

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

/* Table */

	table {
		width: 100%;
		border-collapse:collapse;
	}

/* List */

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

/* Wrapper */

	.wrapper {
		position: relative;
		padding: 3em;
	}


/* Page Wrapper */

#page-wrapper { width:100%;}

	#page-wrapper > section {
		margin-bottom: 0;
	}

/* ERB Logo */
#logo { width: 100%;  padding:10px 30px; display:flex; flex-direction: row; align-items:stretch; 
 background: rgb(245,245,245);
background: linear-gradient(0deg, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 30%);  }

#logo-container { flex-grow:1; }
#logo-container ul { list-style:none; white-space:nowrap; margin:0; padding:0; }
#logo-container ul li { display:inline; padding:0 10px;}
#logo-container img { width:auto; height:80px; max-width:auto;}

#social-media { align-self: center;}
#social-media ul { list-style:none; white-space:nowrap; margin:0; padding:0; }
#social-media ul li { display:inline; font-size:1.4em; padding:0 6px; }
#social-media ul li a { color:#303030;}
#social-media ul li a:hover { color:#58a4e6;} 



/* Banner */

#banner { display:flex; justify-content:center;  background: #4394D0;
background: linear-gradient(90deg, rgba(67, 148, 208, 1) 0%, rgba(67, 148, 208, 1) 40%, rgba(246, 146, 30, 1) 60%, rgba(246, 146, 30, 1) 100%);}
#banner2 { display:flex; justify-content:center;  background: #4394D0;
background: linear-gradient(90deg, rgba(67, 148, 208, 1) 0%, rgba(67, 148, 208, 1) 40%, rgba(246, 146, 30, 1) 60%, rgba(246, 146, 30, 1) 100%);}
#HomeBanner img {  height: 100%;  width: 100%; }

#InsideBanner {
  width: 100%; 
  max-width: 1600px; 
  margin: 0 auto; 
}

#InsideBanner img {
  width: 100%; 
  height: auto; 
  display: block; 
  max-width: 100%; 
  object-fit: cover; 
}


/*Content*/
#Content { display:flex; justify-content:center; background:#FFF; background: #def4ff;
background: linear-gradient(0deg, rgba(222, 244, 255, 1) 0%, rgba(255, 255, 255, 1) 80%);}
#Content2 { display:flex; justify-content:center; }

#HomeContent { padding:0px 50px 10px 50px; max-width:1400px; }


.Home-point { 
  cursor: pointer;
  display: grid; 
  align-items: stretch; 
  grid-template-columns: 1fr 1fr 1fr; 
  gap: 25px;  
}

.Home-pointDIV{
  background-color: #FFF; 
  box-shadow: 0 0px 30px 0px rgb(68 72 110 / 15%);
  padding: 20px 30px;
  height: 100%; 
  display: flex;
  flex-direction: column;
  border-radius:5px;
}

.Home-pointTitle{
  font-size:1.85em;
  line-height:1.2em;
  font-weight:bold;
  color:#f58a1f;
  padding:10px 0 0 0;
}

.Home-pointTXT{
  font-size:1.4em;
  line-height:1.3em;
  color:#010D77;
  padding:5px 0;
  letter-spacing: 4px;
  text-align: justify;
  -moz-text-align: justify;
}

.Home-pointIcon img{
width:100px; height:100px;
}

#InsideContent { padding:40px 50px 80px 50px; width:100%; max-width:1300px; font-size:115%; line-height: 1.5em;  }


/* Nav */

.sticky { position: fixed; top: 0; z-index:999; border-bottom:#DDD 1px solid; box-shadow:0px 0px 10px #E3E3E3;}

.current { background:#f6921e; color:#FFF; border-radius:0px; }

	#nav {
		width: 100%;
		text-align: center;
		background:#4394d0;
		display:block;
		margin:0;
		padding:0;
		border-top:0px solid #FFF;
		border-bottom:5px solid #FFF;
	}

		#nav > ul {
			display: inline-block;
			padding: 0;
			margin:0;
		}

			#nav > ul > li {
				display: inline-block;
				text-align: center;
			}

				#nav > ul > li > a {
					display: block;
					color: #FFF;
					font-weight:500;
					text-decoration: none;
					font-size: 1.35em;
					letter-spacing: 0.05em;
					height: 3em;
					line-height: 3em;
					-moz-transition: all .25s ease-in-out;
					-webkit-transition: all .25s ease-in-out;
					-o-transition: all .25s ease-in-out;
					-ms-transition: all .25s ease-in-out;
					transition: all .25s ease-in-out;
					outline: 0;
					padding: 0 1.5em;
					border-radius:0;
				}

				#nav > ul > li:hover > a {
					color: #FFF;
					background:#6ebcf5;
					border-radius:0;
				}
				

	.dropotron {
		background: #090979;
		padding: 0.5em;
		border-radius: 0 0 10px 10px;
		min-width: 12em;
		text-align: left;
		margin-top: -1.25em;
		margin-left: -1px;
		list-style: none;
		z-index:998;
	}

		.dropotron.level-0 {
			margin-top: 0px;
			margin-left: 0;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}

		.dropotron a, .dropotron span {
			-moz-transition: all .25s ease-in-out;
			-webkit-transition: all .25s ease-in-out;
			-ms-transition: all .25s ease-in-out;
			transition: all .25s ease-in-out;
			display: block;
			color: #FFF;
			text-decoration: none;
			font-size:1.2em;
			letter-spacing: 0.1em;
			line-height: 3em;
			padding:0 10px;
			font-weight:500;
			border-radius:10px;
		}

		.dropotron li {
			padding: 0;
		}

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

			.dropotron li:hover > a, .dropotron li:hover > span {
				color: #FFF;  border-radius:10px; background: rgb(31,116,201);
background: linear-gradient(0deg, rgba(31,116,201,1) 0%, rgba(75,137,221,1) 100%); 
			}


/* Footer */

	#footer { padding:10px 0px; }


/* Copyright */

	#copyright {
		text-align: center;
		letter-spacing:0.05em;
	}

		#copyright ul {
			display: inline-block;
			color: #333;
			padding: 0.75em 1em;
			font-size: 0.85em;
		}

			#copyright ul li {
				display: inline-block;
				margin-left: 0.5em;
				padding-left: 0.5em;
			}

				#copyright ul li:first-child {
					border-left: 0;
					margin-left: 0;
					padding-left: 0;
				}


/* Large */

	@media screen and (max-width: 1280px) {
#HomeContent { padding:20px 50px 50px 50px; }

		body {
			font-size: 100%;
			line-height: 1.5em;
			letter-spacing: 0.015em;
		}

		.wrapper {
			padding: 0;
		}

		#nav > ul > li > a {
			padding: 0 1em;
			font-size: 1.2em;
		}

		.dropotron a, .dropotron span {
			font-size:1.1em;
		}

		#InsideContent { padding:40px;}

	}

/* Medium */

	#navPanel, #titleBar {
		display: none;
	}

	@media screen and (max-width: 980px) {
#HomeContent { padding:20px 50px 50px 50px; }
.Home-pointTitle{
  font-size:1.8em;
  line-height:1.2em;
  font-weight:bold;
  color:#f58a1f;
  padding:5px 0;
}

.Home-pointTXT{
  font-size:1.4em;
  line-height:1.3em;
  color:#010D77;
  padding:5px 0;
}
	/* Logo */
	#logo { width: 100%;  padding:15px 30px; display:flex; flex-direction: column; align-items:stretch; justify-content:center;  }
	#logo-container img { width:auto; height:70px; max-width:auto;}

		/* Nav */
			#nav {
				display: none;
			}
	}

		@media screen and (max-width: 980px) and (min-width: 737px) {
#HomeContent { padding:10px 30px 50px 30px; }	
.Home-pointTitle{
  font-size:1.8em;
  line-height:1.2em;
  font-weight:bold;
  color:#f58a1f;
  padding:5px 0;
}

.Home-pointTXT{
  font-size:1.4em;
  line-height:1.3em;
  color:#010D77;
  padding:5px 0;
}
		/* Logo */
		#logo { width: 100%;  padding:10px 30px 10px 50px; display:flex; flex-direction: row; align-items:stretch; justify-content:center;  }
	}

	@media screen and (max-width: 980px) {
			#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: 44px;
				left: 0;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 10001;
				background: none;
			}

				#titleBar .title {
					display: none;
				}

				#titleBar .toggle {
					text-decoration: none;
					position: absolute;
					top: 0;
					left: 0;
					width: 60px;
					height: 44px;
				}

					#titleBar .toggle:before {
						-moz-osx-font-smoothing: grayscale;
						-webkit-font-smoothing: antialiased;
						display: inline-block;
						font-style: normal;
						font-variant: normal;
						text-rendering: auto;
						line-height: 1;
						text-transform: none !important;
						font-family: 'Font Awesome 5 Free';
						font-weight: 900;
					}

					#titleBar .toggle:before {
						-moz-transition: all .15s ease-in-out;
						-webkit-transition: all .15s ease-in-out;
						-ms-transition: all .15s ease-in-out;
						transition: all .15s ease-in-out;
						text-decoration: none;
						content: '\f0c9';
						font-size: 15px;
						position: absolute;
						top: 6px;
						left: 6px;
						display: block;
						width: 54px;
						height: 38px;
						line-height: 38px;
						text-align: center;
						color: rgba(255, 255, 255, 1);
						background-color: rgba(92, 95, 103, 1);
						border-radius: 0.25em;
					}

					#titleBar .toggle:active:before {
						background-color: rgba(92, 95, 103, 0.75);
					}

			#navPanel {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transform: translateX(-290px);
				-webkit-transform: translateX(-290px);
				-ms-transform: translateX(-290px);
				transform: translateX(-290px);
				-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: 290px;
				z-index: 10002;
				background: #242730;
			}

				#navPanel .link {
					display: block;
					color: rgba(255, 255, 255, 1);
					text-transform: uppercase;
					text-decoration: none;
					font-size: 1.1em;
					letter-spacing: 0.15em;
					text-decoration: none;
					height: 44px;
					line-height: 44px;
					border-top: solid 1px rgba(255, 255, 255, 0.05);
					margin: 0 15px 0 15px;
				}

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

				#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;
				}
				#navPanel a:hover { color:#58A4E6}

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

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

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

	}

/* Small */

	@media screen and (max-width: 736px) {
#HomeContent { padding:20px; }
.Home-point {
    grid-template-columns: 1fr; 
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    padding: 0 15px; 
    }

#social-media { border-top:#CCC 1px dotted; width:100%; padding:15px 0 0 0;}

table.WED {display:none;}
table.WED-small { display: table; width: 100%; box-sizing:border-box; }
table.WED-small th { display:none;}
table.WED-small td { display:block; padding:10px 20px;  border-right:none; background: #FFF; border-bottom: #CCC 1px solid;}
table.WED-small td:first-child { border-bottom:none; background:#58A4E6; color:#FFF; font-weight:bold; text-align:left; }
table.WED-small td:last-child { text-align:left; }
table.WED-small td::before { 
content: attr(data-title);
display:block;
color:#58A4E6;
font-size:1em;
line-height:30px;
font-weight:bold;
}

		#InsideContent { padding:20px 30px 30px 30px; }

		body {
			line-height: 1.5em;
			font-size: 10.5pt;
			letter-spacing: 0;
		}

		section {
			clear: both;
		}

		.wrapper {
			padding: 0;
		}

		#logo {
			text-align: center;
			padding-left: 2em;
			padding-right: 2em;
		}

		#footer {
			padding-bottom: 0;
		}

		#copyright {
			padding-top: 0;
			margin-top: 0;
			border-top: 0;
		}

			#copyright ul {
				padding: 1em;
				width: 100%;
			}

				#copyright ul li {
					display:inline-block;
				}

					#copyright ul li:first-child {
						margin-top: 0;
					}

	}

/* Container */

	.container {
		margin: 0 auto;
		max-width: 100%;
		width: 64em;
	}

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

			.container {
				width: 75em;
			}

		}

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

			.container {
				width: calc(100% - 100px);
			}

		}

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

			.container {
				width: calc(100% - 100px);
			}

		}

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

			.container {
				width: calc(100% - 40px);
			}

		}