body {
	background-color: #F9F9F9;
}
header, main, section, footer {
	color: #282A4F;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 2.5vw;
}

.container {
	width: 100%;
	max-width: 1200px;
}

/*視窗寬度575以上切換*/
@media screen and (min-width: 576px)  {
	header, main, section, footer { font-size: 1vw; }
}

/*視窗寬度1400以上切換*/
@media screen and (min-width: 1400px)  {
	header, main, section, footer { font-size: 0.75vw; }
}

a, a:hover, a:focus, a:active, a:visited,
.trans, a:hover, .trans:focus, .trans:active, .trans:visited {
	text-decoration: none;
	outline: none;
	-webkit-transition: all 0.5s ease;
	   -moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		 -o-transition: all 0.5s ease;
			transition: all 0.5s ease;
}


/*font style*/
.fc-b { color: #8DBCCE !important; }
.fc-db { color: #282A4F !important; }
.fc-lb { color: #e6f9ff !important; }
.fc-y { color: #FFD77C !important; }
.fc-ly { color: #F6F0E0 !important; }
.fc-o { color: #FFB25C !important; }
.fc-g { color: #7bb156 !important; }
.fc-bk { color: #010101 !important; }
.fc-w { color: #FFF !important; }

.bg-b { background-color: #8DBCCE !important; }
.bg-db { background-color: #282A4F !important; }
.bg-lb { background-color: #e6f9ff !important; }
.bg-y { background-color: #FFD77C !important; }
.bg-ly { background-color: #F6F0E0 !important; }
.bg-o { background-color: #FFB25C !important; }
.bg-w { background-color: #FFF !important; }
.bg-grey { background-color: #F0F0F0 !important; }

.bd-b { border-color: #8DBCCE !important; }
.bd-db { border-color: #282A4F !important; }
.bd-lb { border-color: #e6f9ff !important; }
.bd-y { border-color: #FFD77C !important; }
.bd-ly { border-color: #F6F0E0 !important; }
.bd-o { border-color: #FFB25C !important; }
.bd-w { border-color: #FFF !important; }

.fw900 { font-weight: 900 !important; }
.fw700 { font-weight: 700 !important; }
.fw500 { font-weight: 500 !important; }
.fw300 { font-weight: 300 !important; }


.row {
	margin-right: auto;
	margin-left: auto;
}
.btn.focus, .btn:focus {
	box-shadow: none;
	text-decoration: none;
}

.container-fluid {
	padding-left: 0px;
	padding-right: 0px;
}

.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto { padding-left: 0; padding-right: 0; }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, p { margin-bottom: 0; }

address, dl, ol, ul { margin: 0; padding: 0; }

/*隱藏文字*/
.hide-text {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	line-height: 0;
}

/*---------------------------- 全站樣式 ----------------------------*/
.page-margintop { 
	/* min-height: calc( 100vh - 110px); */
	margin-top: 110px;
}
.img-bg {
	background: #fff;
	padding: 20px;
	border-radius: 20px;
}


/* 背景 */
.bg01 {
	background-color: #8DBCCE;
	color: #FFF;
	margin-left: 15vw;
	padding: 8%;
	padding-bottom: 10%;
	border-radius: 8vw 0 0 0;
}
.bg01 .title01 { color: #FFF; }

.bg02 {
	position: relative;
	z-index: 2;
	background-color: #FFF;
	color: #282A4F;
	margin-right: 15vw;
	margin-top: -5%;
	padding: 5%;
	padding-bottom: 0;
	border-radius: 0 8vw 8vw 0;
}

.bg03 { background-color: #FFF; }
.bg03 .inner {
	background-color: #F9F9F9;
	color: #282A4F;
	margin-left: 8vw;
	padding: 8%;
	border-radius: 8vw 0 0 0;
}

.bg04 {
	position: relative;
	background: #343a40;
	color: #FFF;
	padding: 8%;
	border-radius: 8vw 8vw 0 0;
}


.bg-navy {
	background: #282A4F;
	padding-top: 1%;
	padding-bottom: 1%;
	background-image: url(../img/bg01-3.png);
	background-position: top left;
	background-repeat: no-repeat;
	-webkit-background-size: 100%;
	background-size: 90%;
}

.bg-yellow {
	background: #FFD77C;
	padding-top: 1%;
	padding-bottom: 1%;
	background-image: url(../img/bg03-2.png);
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
	background-position: bottom center;
}

/*button*/
.btn-group {
	width: 100%;
	margin: 0 auto;
}

.button {
	display: block;
	width: 94%;
	margin: 0.5em 3%;
	padding: 0.75em;
	font-size: 1.125em;
	font-weight: 700;
	text-align: center;
	line-height: 1em;
	cursor: pointer;
	letter-spacing: 0.1em;
	background-color: #8DBCCE;
	color: #fff;
	border-radius: 0.5em;
	border: 0;
}
.button:hover {
	background-color: #52a1c1;
	color: #FFF;
}

.button > span {
	font-size: 0.75em;
	font-weight: 500;
	padding-left: 0.5em;
}

.button.bg-o { background-color: #FFB25C !important; }
.button.bg-o:hover { background-color: #FFD77C !important; }

.button.bg-w { background-color: #FFF !important; color: #282A4F; }
.button.bg-w:hover { background-color: #FFF !important; color: #8DBCCE; }

.button.btn-line { background-color: #06C755; color: #FFF; }
.button.btn-line:hover { background-color: #d3ffe4; color: #06C755; }
.button.btn-line > img { width: 2em; }

.btn-highlight {
	position: relative;
	display: inline-block;
	margin: 0.25em;
	font-weight: bold;
	border-bottom: 1px solid #FFD77C;
	cursor: pointer;
	z-index: 0;
}
.btn-highlight, .btn-highlight:hover { color: inherit; }

.btn-highlight:after {
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	background-color: #FFD77C;
	left: 0;
	bottom: 0;
	width: 0;
	height: 8px;
}
.btn-highlight:hover:after {
	width: 100%;
}
.btn-highlight:after, .btn-highlight:hover:after {
	-webkit-transition: all 0.5s ease;
	   -moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		 -o-transition: all 0.5s ease;
			transition: all 0.5s ease;
}

a.btn-txt, .btn-txt {
	position: relative;
	z-index: 1;
	display: inline-block;
	background-color: inherit;
	line-height: 1.25em;
	letter-spacing: 0.1em;
	color: #8DBCCE;
	border: none;
	border-bottom: 1px solid #FFD77C;
}
a.btn-txt::after, .btn-txt::after {
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	background-color: #FFD77C;
	left: 0;
	bottom: 0;
	width: 0;
	height: 8px;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
a.btn-txt:hover::after, .btn-txt:hover::after {
	width: 100%;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}


.btn-img { width: 76%; }
.btn-img:hover {
	text-decoration: none;
	-webkit-transform: scale(0.97);
		-ms-transform: scale(0.97);
		 -o-transform: scale(0.97);
			transform: scale(0.97);
}

.btn-download {
	background-color: #E4EEF3;
	color: #8DBCCE;
	border: 1px solid #8DBCCE;
}
.btn-download:hover {
	background-color: #8DBCCE;
	color: #FFF;
	border: 1px solid #8DBCCE;
}

.btn-icon {
	width: 2.5em;
	height: 2.5em;
	line-height: 0.85em;
	margin: 0;
	vertical-align: bottom;
	border-radius: 50% 50% 50% 0;
}


@media only screen and (min-width: 576px) {
	.btn-h2x { line-height: 2.25em; }
	.page-margintop { min-height: calc( 100vh - 70px); margin-top: 70px; }
	.button.btn-line > img { width: auto; }
}



/* 動畫 */
/* 閃爍 */
@-webkit-keyframes flash {
	from, 20%, 40%, to { opacity: 1; }
	10%, 30% { opacity: 0; }
}

@keyframes flash {
	from, 20%, 40%, to { opacity: 1; }
	10%, 30% { opacity: 0; }
}

.flash {
	-webkit-animation: flash 2s both infinite;
			animation: flash 2s both infinite;
}

/* 上下跳動 */
@-webkit-keyframes satellite {
	0%, 100% {
		-webkit-transform:translate(0, 0);
				transform:translate(0, 0)
	}

	50% {
		-webkit-transform:translate(0, 5%);
				transform:translate(0, 5%)
	}
}

@keyframes satellite {
	0%, 100% {
		-webkit-transform:translate(0, 0);
				transform:translate(0, 0)
	}

	50% {
		-webkit-transform:translate(0, 5%);
				transform:translate(0, 5%)
	}
}

.satellite {
	-webkit-animation: satellite 2.5s infinite;
			animation: satellite 2.5s infinite;
}

/* 放大縮小 */
@-webkit-keyframes pulse {
	from, to {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	50% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05);
	}
}

@keyframes pulse {
	from, to {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	50% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05);
	}
}

.pulse {
	-webkit-animation: pulse 2.5s infinite;
			animation: pulse 2.5s infinite;
}


/* 游標向下效果 */
.scroll {
	font-size: 1rem;
	letter-spacing: 0.1em;
	color: #FFF;
	margin: 1em auto;
}

.scroll span {
	position: relative;
	display: block;
	width: 2px;
	height: 40px;
	background: #8DBCCE;
	overflow: hidden;
	margin: auto;
}

.scroll span::before {
	content: "";
	position: absolute;
	width: 2px;
	height: 20px;
	background: #FFF;
	left: 0;
	animation: scroll 1.5s infinite;
}

@keyframes scroll {
	0% { top: -30px; }
	100% { top: 70px; }
}

@-webkit-keyframes scroll {
	0% { top: -30px; }
	100% { top: 70px; }
}

.scroll p {
	position: relative;
	font-family: 'Rubik', arial, sans-serif;
	font-weight: normal;
	padding-top: 1.5em;
	line-height: 1em;
}
.scroll p::before {
	content: "\f078";
	font-family: "FontAwesome";
	font-weight: normal;
	position: absolute;
	top: 0;
	left: 1px;
	right: 0;
	color: #FFF;
	font-size: 1em;
	line-height: 1em;
	margin: 0 auto;
	animation-delay: 2s;
}


.ribbon {
	position: absolute;
	background-color: #FFB25C;
	font-size: 0.75rem;
	top: 2em;
	left: -4em;
	transform: rotate(-45deg);
	width: 15em;
	padding: 0.75em;
	text-align: center;
	color: #FFF;
}

@media only screen and (min-width: 576px) {
	.ribbon { font-size: 1.25rem; }
}

/*---------------------------- 表頭 ----------------------------*/
header {
	position: fixed;
	z-index: 100;
	top: 0;
	width: 100%;
	background-color: #FFF;
	height: 110px;
}
main.content, section.content { margin-top: 110px; }

header .header-main-logo { min-height: 70px; }
header .header-main-logo img {
	margin: 4px;
	width: 90%;
	max-width: 600px;
	max-height: calc(70px - 4px * 2);
}


header ul li { display: block; float: right; }
header ul li.itemx1 { width: 100%; }
header ul li.itemx3 { width: 150px; max-width: 33.33333333%; }
header ul li.itemx4 { width: 150px; max-width: 25%; }
header ul li.itemx5 { width: 150px; max-width: 20%; }

header ul li > a.header-link-lines {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4em;
	color: #282A4F;
	text-align: center;
	background-color: #FFF;
	height: 40px;
	line-height: 1;
	letter-spacing: 1px;
	padding-top: 6px;
	padding-bottom: 10px;
}
header ul li > a.header-link-lines span {
	display: none;
	font-size: 0.8em;
	font-family: monospace;
}

header ul li > a:hover {
	background-color: #8DBCCE;
	color: #FFF;
}

header #user-name {
	max-width: 5em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* 下拉式選單 */
header .dropdown .dropdown-menu {
	border: 0;
    border-radius: 1em;
    box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.2);
}

header .dropdown .dropdown-menu .dropdown-item {
	padding: 0.75em 1.5em;
	border-bottom: 1px solid #F9f9f9;
}
header .dropdown .dropdown-menu .dropdown-item:last-child { border-bottom: 0; }

header .dropdown .dropdown-menu .dropdown-item:hover {
	background-color: #8DBCCE;
	color: #FFF;
}


@media only screen and (min-width: 576px) {
	main.content, section.content { margin-top: 70px; }

	header { height: 70px; }
	header ul li > a.header-link-lines { height: 70px; padding-bottom: 0; }
	header ul li > a.header-link-lines span { display: block; }

	header #user-name { max-width: 7em; }
}

@media only screen and (min-width: 576px) and (max-width: 991px) {
	header { font-size: 1.25vw; }
}


.class-item-bg {
	position: relative;
	width: 90%;
	padding: 30px 30px 30px 50px;
	background: #fff;
	margin: 0 auto;
	border: 1px solid #8d8066;
}
.class-item-left-img {
	height: 90%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	overflow: hidden;
	left: -5%;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
}

.class-item .class-bn {
	width: 100%;
	-webkit-background-size: cover;
	background-size: cover;
	/*height: 30vh;*/
}

.class-item .class-bn h2 {
	font-size: 2.3em;
	font-weight: 700;
	text-align: center;
	color: #FFF;
	line-height: 1.5em;
	letter-spacing: 0.1em;
	padding: 2em 0.5em;
	padding-bottom: 0.5em;
	max-width: 12em;
	margin: auto;
	text-shadow: 1px 1px 3px black;
}

.class-item .class-bn .main-btn {
	font-size: 1.25em;
	padding: 1em;
	padding-bottom: 3.5em;
	text-align: center;
}

.class-item .class-bn .main-btn > span {
	font-size: 1.1em;
	background: #8D8066;
	color: #FFF;
	border: 2px solid;
	border-radius: 50px;
	letter-spacing: 2px;
	padding: 0.5em 2em;
	-webkit-transition: all 0.5s ease;
	   -moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		 -o-transition: all 0.5s ease;
			transition: all 0.5s ease;
}

.class-item .class-bn a:hover .main-btn > span {
	color: #fff;
	-webkit-transition: all 0.5s ease;
	   -moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		 -o-transition: all 0.5s ease;
			transition: all 0.5s ease;
}

.class-item .class-info {
	font-size: 1.25em;
	color: #FFF;
	padding-bottom: 1em;
}

.class-item .class-info p.date-item {
	color: #FFF;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.25em;
	padding: 1em;
	padding-bottom: 0.5em;
	letter-spacing: 0.2em;
	
}

.class-item .class-info p.class-date {
	font-family: 'Rubik', arial, sans-serif;
	color: #010101;
	line-height: 1.5em;
	text-align: center;
	letter-spacing: 0.2em;
	padding-top: 1em;
	padding-bottom: 0.6em;
}

.page-title {
	display: inline-block;
	padding: 8px 25px 8px 25px;
	border-bottom: 1px solid;
	color: #3e667a;
	letter-spacing: 0.3em;
	margin-bottom: 1em;
	margin-top: 1.5em;
	position: relative;
}
.page-title:after {
	content: '';
	width: 10px;
	height: 10px;
	background: #3e667a;
	border-radius: 50%;
	position: absolute;
	bottom: -5px;
	right: -5px;
}
.page-title-white {
	color: #fff;
}
.page-title-white:after {
	background: #fff;
}


/* 課程頁大標 */
.title-block {
	/* width: 80%; */
	margin: auto;
	margin-bottom: 2em;
}

.class-type-icon {
	background-color: #FFD77C;
	color: #282A4F;
	font-size: 2em;
	width: 4em;
	min-width: 4em;
	height: 4em;
	line-height: 1.1em;
	padding: 0.9em;
	letter-spacing: 0.1em;
	border-radius: 100px 100px 0 100px;
	text-align: center;
}
@media only screen and (max-width: 576px) {
	.class-type-icon {
		width: 100%;
		min-width: 100%;
		height: 2em;
		padding: 0.5em;
		letter-spacing: 0.25em;
	}
}


.title01 { color: #8DBCCE; }

.title01 .page-maintitle {
	font-size: 5em;
	padding-right: 30px;
	letter-spacing: 0.15em;
	text-align: left;
	width: 100%;
	font-weight: bold;
}
.title01 .page-subtitle {
	font-size: 1.75em;
	font-weight: unset;
	letter-spacing: 0.1em;
	border-left: 1px solid ;
	padding: 0.5em;
	padding-left: 30px;
	margin-top: 0.5em;
	text-align: left;
}

@media only screen and (min-width: 576px) {
	.title01 .page-maintitle { width: auto; }
	.title01 .page-subtitle { margin-top: 0; }
}

.title02 {
	font-size: 1rem;
	width: 100%;
	padding: 1em;
	padding-left: 2em;
	/* margin-top: -10%; */
	color: #8DBCCE;
	border: 1px solid;
	border-right: 0;
	border-radius: 2em 0 0 0;
}
.title02 .page-maintitle {
	font-size: 1em;
	font-weight: normal;
	line-height: 1.25em;
}

@media only screen and (min-width: 576px) {
	.title02 {
		font-size: 1.125rem;
		width: 5em;
		height: 100%;
		padding: 2em;
		padding-bottom: 0;
		/* margin-top: -5%; */
		word-break: break-word;
		border-right: 1px solid;
		border-bottom: 0;
	}
}

@media only screen and (min-width: 1024px) {
	.title02 { font-size: 1.325rem; }
}

.co {
	margin: 5%;
	padding: 1em;
	border: 2px solid;

}

.co p {
	font-size: 1.325em;
	line-height: 1.5em;
	padding: 0.5em 0;
	padding-left: 2.125em;
	margin-left: 2em;
	border-left: 2px solid;
	letter-spacing: 0.1em;
	text-indent: -1.125em;
}


/* 表格 */
.apply-info {
	max-width: 100%;
	background-color: #fff;
	border: 2px dashed #95ebfb;
	padding: 2em;
	margin: auto;
	border-radius: 2em;
}
.apply-info p {
	font-size: 1.325em;
	line-height: 1.75em;
	letter-spacing: 0.1em;
	text-align: center;
}
.apply-info table {
	font-size: 1.4em;
	max-width: 40em;
	margin: 1em auto ;
}
.apply-info table tr {
	margin-top: 1em;
}
.apply-info table tr th, .apply-info table tr td {
	/* font-size: 1.25em; */
	vertical-align: middle;
	border: none;
}
.apply-info table tr th {
	width: 7.5em;
	background-color: #3e667a;
	color: #FFF;
	text-align: center;
	font-weight: 400;
	letter-spacing: 0.2em;
	border: 5px solid #FFF;
}
.apply-info table tr td {
	border-bottom: 1px dashed #3e667a;
	background-color: #FFF;
	width: 32.5em;
}



.table-yellow {
	font-size: 1.4em;
}
.table-yellow.table-bordered {
	border: 4px solid #fcd767;
}
.table-yellow thead th {
	background-color: #FCD767;
	vertical-align: middle;
	border-bottom: 2px solid #3e667a;
}
.table-yellow.table-bordered th, .table-yellow.table-bordered td {
	border: 1px solid #c1c1c1;
}
.table-yellow tbody th, .table-yellow tbody td {
	background-color: #fff;
	vertical-align: middle;
}


.table-navy {
	font-size: 1.4em;
}
.table-navy.table-bordered {
	border: 4px solid #3e667a;
}
.table-navy thead th {
	color: #ffffff;
	background-color: #3e667a;
	vertical-align: middle;
	border-bottom: 2px solid #FCD767;
}
.table-navy.table-bordered th, .table-navy.table-bordered td {
	border: 1px solid #c1c1c1;
}
.table-navy tbody th, .table-navy tbody td {
	background-color: #fff;
	vertical-align: middle;
}



@media only screen and (max-width: 575px) {
	.class-item .class-bn h2 { font-size: 2.5em; line-height: 1.2; }
	.class-item .class-info { font-size: 2em; }

	.main-slogan {
		max-width: 90%;
		letter-spacing: 0.25em;
		font-size: 1.25em;
	}

	.apply-info { max-width: 100%; }

	.apply-info table, .apply-info table tbody, .apply-info table tbody tr { display: block }

	.apply-info table tr th, .apply-info table tr td {
		display: block;
		width: 100%;
		padding: 0.25em;
		border: none;
	}
}

/*---------------------------- QA ----------------------------*/
.qa p {
	font-size: 1.5em;
	text-align: justify;
	letter-spacing: 1px;
	padding: 1em 2em;
	margin: 1em;
}

.qa .a-block { margin-top: -15%; }

.qa .q-block p {
	background-color: #338EFF;
	color: #FFF;
	border-radius: 2em 2em 2em 0;
}

.qa .a-block p {
	border: 2px solid #338EFF;
	background-color: #FFF;
	color: #338EFF;
	border-radius: 2em 2em 0 2em;
	margin-top: 4em;
}

@media only screen and (max-width: 575px) {
	.qa p {
		letter-spacing: 0;
		padding: 0.5em 1em;
		margin: 0 1em;
	}

	.qa .a-block { margin-top: -1em; }
	.qa .a-block p { margin-top: 1em; }
}

/*---------------------------- 簡介 ----------------------------*/
.point-block { margin: 8em auto; }

.point-block h3 {
	color: #3e667a;
	font-size: 3.25em;
	font-weight: 900;
	text-align: center;
	line-height: 1.25em;
	padding-bottom: 0.5em;
}

.point-block p {
	font-size: 1.625em;
	font-weight: 300;
	letter-spacing: 0.2em;
	text-align: center;
	line-height: 1.5em;
}

.point-block .unemployed {
	border: 2px solid #ECD00A;
	margin: 3em;
	padding: 2em 4em;
	min-height: 47em;
}

.point-block .unemployed h4 {
	font-size: 1.8em;
	line-height: 1.5em;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: #ECD00A;
	padding: 0.8em 0;
	text-align: center;
}

.point-block .unemployed p {
	font-size: 1.325em;
	line-height: 1.75em;
	letter-spacing: 0.1em;
	padding: 1em 0;
	border-top: 1px solid #FFF;
	text-align: center;
}

.point-block.bg-grey h3 {
	color: #010101;
	font-size: 2em;
	text-align: left;
	margin-left: 2em;
	margin-top: 4%;
	max-width: 80%;
	line-height: 1.75em;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.point-block.bg-grey h3 > span {
	display: inline-block;
	background-color: #3e667a;
	color: #FFF;
	padding: 0 0.5em;
	margin: 0.25em;
	font-weight: 700;
}

.point-block .reason p {
	text-align: left;
	font-weight: 700;
	margin-top: 1em;
}

.point-block .reason .reason-content {
	background: #3e667a;
	text-align: center;
	color: #fff;
	line-height: 1.5em;
	font-size: 1.5em;
	padding: 1em;
	margin: 0.5em auto;
}

.point-block .job-content {
	border: 2px solid #fff;
	border-radius: 50%;
	width: 19em;
	height: 19em;
	margin: 1em auto;
	padding: 1em;
}
.point-block .job-content:hover {
	text-decoration: none;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	background-color: #ffffffb3;
}

.point-block .job-content img {
	width: 12em;
	max-width: 150px;
	margin: 1em auto;
}

.point-block .job-content p {
	text-align: center;
	letter-spacing: 0.1em;
	line-height: 1.25em;
	width: 7em;
	margin: auto;
}

.point-block .outline-item {
	position: relative;
	background-color: #fff;
	color: #3e667a;
	width: 1000px;
	max-width: 100%;
	text-align: center;
	font-size: 1.625em;
	font-weight: 700;
	padding: 0.5em;
	margin: 0.5em auto;
	margin-bottom: 2em;
	letter-spacing: 0.15em;
}

.point-block .outline-item::after {
	content: "";
	position: absolute;
	bottom: -1.5em;
	left: 50%;
	transform: translate(-50%, 0);
	width: 0;
	height: 0;
	border-color: #FFF transparent transparent transparent;
	border-style: solid solid solid solid;
	border-width: 0.75em;
}

.point-block .outline-item:last-child::after { border: none; }
.point-block ul li {
	font-size: 1.5em;
	line-height: 1.5em;
	padding: 0.5em;
	padding-left: 0;
	margin-left: 4em;
	list-style-type: square;
}
.point-block ol li {
	font-size: 1.5em;
	line-height: 1.5em;
	padding: 0.5em;
	padding-left: 0;
	margin-left: 4em;
}

.point-block.block-highlight {
	color: #010101;
	text-align: left;
	margin-left: 2em;
	margin-top: 4%;
	max-width: 80%;
	line-height: 1.75em;
	font-weight: 700;
	letter-spacing: 0.1em;
}
.point-block.block-highlight h3 {
	font-size: 2em;
	text-align: left;
	font-weight: 700;
}
.point-block.block-highlight span {
	display: inline-block;
	background-color: #3e667a;
	color: #FFF;
	padding: 0 0.5em;
	margin: 0.25em;
	font-weight: 700;
}


@media only screen and (max-width: 575px) {
	.point-block .num { font-size: 6em; }
	.point-block .job-content {
		width: 15em;
		height: 15em;
	}
	.point-block .job-content img {
		width: 8.5em;
		margin-top: 0;
	}
	.point-block ul li { margin-left: 1.5em; }
}



/*---------------------------- 課程資訊 ----------------------------*/
.info-block { margin: 5em auto 10em auto; }

.title {
	border-top: 1px solid;
	border-bottom: 5px solid;
	color: #338EFF;
	font-size: 3em;
	letter-spacing: 0.25em;
	text-align: center;
	padding: 0.35em;
	margin: 1em auto;
	font-weight: 900;
}

.info-block .info-content h4 {
	font-size: 1.75em;
	font-weight: 900;
	letter-spacing: 0.2em;
	margin: 0.25em 0;
	text-indent: -1.5em;
	margin-left: 1.5em;
}

.info-block .info-content p {
	font-size: 1.25em;
	letter-spacing: 0.1em;
	margin-left: 2em;
	margin-bottom: 2em;
	line-height: 1.75em;
}

.info-block .info-content ol {
	margin-bottom: 2em;
}

.info-block .info-content ol li {
	font-size: 1.25em;
	letter-spacing: 0.1em;
	margin-left: 3.25em;
	padding: 0.5em 0;
	line-height: 1.75em;
}

.info-block .info-content .notice {
	background-color: #E05D7F;
	color: #FFF;
	padding: 2em 4em;
}

.info-block .info-content .notice h5 {
	font-size: 2em;
	text-align: center;
	margin-bottom: 1em;
	letter-spacing: 0.15em;
	font-weight: 900;
}

.info-block .info-content .notice ul li {
	font-size: 1.25em;
	line-height: 1.75em;
	padding: 0.5em 0;
	text-indent: -0.875em;
	list-style-type: none;
	text-align: justify;
}

.info-block .info-content .notice ul li strong {
	display: inline-block;
	padding-right: 0.5em;
}

.info-block .step-block {
	padding: 2em;
	max-width: 37em;
	margin: auto;
}

.num {
	font-family: 'Rubik', arial, sans-serif;
	font-size: 10em;
	line-height: 1em;
	color: #3e667a;
}

.info-block .step-block p {
	font-size: 2em;
	font-weight: 900;
	line-height: 1.5em;
}

.info-block .step-block ul {
	border-bottom: 1px dashed #338EFF;
	padding: 2em;
	padding-top: 0;
}

.info-block .step-block ul li {
	font-size: 1.25em;
	line-height: 1.75em;
	text-align: justify;
	list-style-type: disclosure-closed;
}



/* google表單 */
.page-form iframe.google-form {
	margin-top: 2em;
	height: 90vh;
	background: #FFF;
	border-top: 7px solid #282A4F;
	border-bottom: 7px solid #282A4F;
}


/*---------------------------- footer ----------------------------*/
footer {
	background-color: #282A4F;
	color: #FFF;
	/* padding-bottom: 50px; */
	position: relative;
}

footer hr {
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}

footer h5 {
	font-size: 1.25em;
	color: #8DBCCE;
	margin: 1em;
	margin-bottom: 0.25em;
}

footer p, footer .add-line {
	display: flex;
	align-items: center;
	font-size: 1.125em;
	line-height: 1.5em;
	padding: 0.25em 0;
	padding-left: 1.5em;
	margin: 0 1em;
	letter-spacing: 0.1em;
	color: #FFF;
	font-weight: lighter;
	min-width: 320px;
}

footer a { color: #FFF; font-weight: normal; }
footer a:hover { color: #FFD77C; }

footer .btn-bd-line { color: #06C755; }
footer .btn-bd-line:hover { background-color: #06C755; color: #FFF; }

@media only screen and (min-width: 576px) and (max-width: 767px) {
	footer { font-size: 2.5vw;}
}

@media only screen and (min-width: 768px) {
	footer hr {
		height: 100%;
		border-top: none;
		border-right: 1px solid rgba(255, 255, 255, 0.25);
	}
}



/* 側邊快捷功能 */
.right_fix {
	display: block;
	position: fixed;
	right: 0;
	/* bottom: 110px; */
	bottom: 70px;
	font-size: 1.125rem;
	z-index: 9999;
}

.right_fix ul li a, .right_fix ul li a.btn, .right_fix ul li button {
	display: block;
	font-size: 1em;
	width: 3.5em;
	height: 3.5em;
	color: #F6F0E0;
	border: none;
	background-color: #ff6b5c;
	line-height: 1.2em;
	letter-spacing: 0.1em;
	margin: 0.5em;
	text-align: center;
	border-radius: 50% 50% 0 50%;
	box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.15);
}
.right_fix ul li a:hover, .right_fix ul li a.btn:hover, .right_fix ul li button:hover {
	color: #ff6b5c;
	background-color: #F6F0E0;
}

.right_fix ul li a.line-link {
	background-color: #06C755;
	padding: 0.5em;
}

.right_fix ul li a.line-link svg > * { fill: #F6F0E0; }
.right_fix ul li a.line-link:hover svg > * { fill: #06C755; }

.right_fix ul li a:hover, .right_fix ul li a.btn:hover, .right_fix ul li button:hover {
	color: #ff6b5c;
	background-color: #F6F0E0;
}

.bottom_fix {
	position: fixed;
	bottom: 0;
	width: 100%;	
	z-index: 9999;	
	font-size: 0.625rem;
}

.bottom_fix .act-bar {
	position: relative;
	z-index: 1;
	transform: translate(0, 100%);
	background-color: #3DC7C9;
	background-image: url('../img/bottom_fix_bg.png?v=220902');
	background-position: center;
	background-repeat: no-repeat;
	/* min-height: 50px; */
	box-shadow: 0 -0.15em 0.5em rgba(0, 0, 0, .15);
	padding-right: 5.5em;
	-webkit-background-size: cover;
			background-size: cover;
}

.bottom_fix .need-cookie-area {
	position: relative;
	z-index: 2;
}

.bottom_fix p {
	font-size: 1.125em;
	color: #FFF;
	line-height: 1.5em;
	text-align: center;
	padding: 0.5em;
	letter-spacing: 0.1em;
}

.bottom_fix .btn {
	font-size: 1em;
	font-weight: bold;
	background-color: #FFD77C;
	color: #282A4F;
	border: 1px solid #282A4F;
}
.bottom_fix .btn:hover {
	background-color: #282A4F;
	color: #FFD77C;
	border: 1px solid #282A4F;
}

.bottom_fix .act-bar .open {
	opacity: 1;
	position: absolute;
	font-size: 1.5rem;
	top: -1.1em;
	left: 0;
	width: 100%;
	background-color: transparent;
	color: #FFF;
	border: none;
	text-shadow: 0 0 0.5em #000;
	text-align: right;
	line-height: 1em;
	padding-right: 1.425em;
}

.bottom_fix .act-bar .close {
	width: 1em;
	height: 1em;
}

.bottom_fix .act-bar.show { transform: translate(0, 0); }
.bottom_fix .act-bar.show .open { opacity: 0; }


@media only screen and (min-width: 768px) {
	/* .right_fix { bottom: 100px; } */
	.right_fix { bottom: 50px; }
	
	.bottom_fix { font-size: 1rem; }

	.bottom_fix .btn { font-size: 0.75em; }

	.bottom_fix .act-bar .close {
		width: 1.5em;
		height: 1.5em;
	}
}


/* 我有興趣跳窗表單 */
#formModal {
	display: block;
	opacity: 0;
	position: fixed;
	z-index: -1;
	top: 30px;
	width: 100%;
	height: 100vh;
	/* height: calc(100vh - 9.5em - 4%); */
	overflow: hidden;
	background-color: #fff;
	-webkit-transition: all 0.15s ease-in-out;
	   -moz-transition: all 0.15s ease-in-out;
		-ms-transition: all 0.15s ease-in-out;
		 -o-transition: all 0.15s ease-in-out;
			transition: all 0.15s ease-in-out;
}

#formModal.show {
	opacity: 1;
	transform: translateY(-30px);
	z-index: 10000;
	-webkit-transition: all 0.15s ease-in-out;
	   -moz-transition: all 0.15s ease-in-out;
		-ms-transition: all 0.15s ease-in-out;
		 -o-transition: all 0.15s ease-in-out;
			transition: all 0.15s ease-in-out;
}

#formModal .close, .close {
	position: absolute;
	top: 0.25em;
	right: 0.75em;
	z-index: 1;
	background-color: rgba(0,0,0,.2);
	border-radius: 50%;
	width: 1.5em;
	height: 1.5em;
	opacity: 1;
	color: #FFF;
	text-shadow: none;
}
#formModal .close:hover, .close:hover {
	background-color: #FFD77C;
}

#formModal .formModal-body {
	position: relative;
	height: 100%;
}

@media only screen and (min-width: 576px) {
	#formModal {
		right: 5px;
		top: auto;
		bottom: 174px;
		max-width: 450px;
		/* height: calc(100vh - 80px - 50px - 6em); */
		height: 50%;
		box-shadow: 0 0 10px rgba(0, 0, 0, .5);
		border-radius: 0.5rem;
	}

	#formModal .close { display: none; }
}



/* Qucick Menu */
.quickmenu {
	position: fixed;
	top: 0;
	right: auto;
	bottom: 0;
	left: 0;
	z-index: 500;
	width: 55px;
	height: 100vh;
}

.quickmenu-wrapper {
	height: 100%;
	width: 100%;
	display: table;
}
.quickmenu-content {
	display: table-cell;
	vertical-align: middle;
}
.quickmenu-selector {
	margin: 20px 0;
	width: 100%;
	height: 25px;
	position: relative;
	cursor: pointer;
}
.quickmenu-selector-line {
	height: 1px;
	width: 30px;
	background-color: #FFB25C;
	position: absolute;
	top: 7px;
	left: 0;
	transform: scaleX(0);
	transform-origin: left center;
	transition: all 0.3s;
}
.quickmenu-selector-dot {
	height: 15px;
	width: 15px;
	border-radius: 50%;
	background-color: #ffffff;
	border: 1px solid #FFB25C;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
}
.quickmenu-selector-area {
	font-size: 1em;
	line-height: 1.4;
	width: 1em;
	text-shadow: 2px 0 0 #F9F9F9, -2px 0 0 #F9F9F9, 0 2px 0 #F9F9F9, 0 -2px 0 #F9F9F9, 2px 2px 0 #F9F9F9, -2px -2px 0 #F9F9F9, 2px -2px 0 #F9F9F9, -2px 2px 0 #F9F9F9;
	color: #FFB25C;
	position: relative;
	top: -35px;
	left: 70px;
	opacity: 0;
	transform: scaleX(0);
	transform-origin: left center;
	transition: all 0.3s;
}

.quickmenu-selector.is-selected .quickmenu-selector-line, .quickmenu-selector:hover .quickmenu-selector-line {
	transform: scaleX(1);
}
.quickmenu-selector.is-selected .quickmenu-selector-dot, .quickmenu-selector.is-selected .quickmenu-selector-line {
	background-color: #FFB25C;
	border-color: #FFB25C;
}
.quickmenu-selector:hover .quickmenu-selector-area  {
	opacity: 1;
	transform: scaleX(1);
}

@media only screen and (max-width: 1440px) {
	.quickmenu { width: 40px; }
	.quickmenu-selector-area { top: -35px; left: 45px; }
}