body {
	background-color: #FFF;
	background-image: url('../img/main_bg.png');
	background-attachment: fixed;
	background-position: center;
	-webkit-background-size: cover;
			background-size: cover;
}
header, main, section, footer {
	/*background-color: #FFF;*/
	color: #010101;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 1vw;
}


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


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

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


a, a:hover, a:focus, a:active, a:visited {
	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;
}

/*font style*/
.fc-b { color: #338EFF !important; }
.fc-db { color: #3e667a !important; }
.fc-y { color: #ECD00A !important; }
.fc-r { color: #E05D7F !important; }
.fc-bk { color: #010101 !important; }
.fc-w { color: #FFF !important; }

.bg-b { background-color: #338EFF !important; }
.bg-db { background-color: #3e667a !important; }
.bg-y { background-color: #ECD00A !important; }
.bg-r { background-color: #E05D7F !important; }
.bg-w { background-color: #FFF !important; }
.bg-grey { background-color: #F0F0F0 !important; }
.bg-darkbrown { background-color: #8B773A !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;
}

.trans, .trans:hover, .trans.active {
	-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;
}

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


/* 背景 */
.bg00 {
	color: #3e667a;
	padding: 5% 0;
}

.bg01 {
	color: #FFF;
	padding: 5% 0;
}

.bg02 {
	background-color: #FAF7F0;
	background-image: url('../img/bg02.png');
	background-position: bottom center;
	background-repeat: no-repeat;
	padding: 3% 0;
	-webkit-background-size: 100%;
			background-size: 100%;
}

.bg03 {
	background-image: url('../img/bg03.png');
	background-position: top center;
	background-repeat: no-repeat;
	color: #010101;
	padding: 5% 0;
	-webkit-background-size: 100%;
	background-size: 100%;
}

.bg04 {
	background: #3e667a;
	padding-top: 1%;
	padding-bottom: 1%;
	background-image: url('../img/bg01.png'), url('../img/bg01-2.png');
	background-position: top left, bottom right;
	background-repeat: no-repeat, no-repeat;
	-webkit-background-size: 100%, 100%;
	background-size: 90%, 80%;
}


.bg-navy {
	background: #3e667a;
	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: #fcd767;
	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;
}

a.button {
	display: block;
	width: 90%;
	margin: 0.5em 5%;
	padding: 0.5em;
	font-size: 2.25em;
	font-weight: 700;
	text-align: center;
	line-height: 1em;
	cursor: pointer;
	letter-spacing: 0.1em;
	background-color: #3e667a;
	color: #fff;
}
a.button:hover {
	background-color: #c5bb9c;
	color: #FFF;
}

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

/*
a.button.btn-line { color: #FFF; background-color: #06c755; }
a.button.btn-line:hover { background-color: #02a52f; }*/

.btn-highlight {
	display: inline-block;
	margin: 0.25em 0;
	padding: 0.1em 0.5em;
	font-weight: 700;
	line-height: 1.5em;
	letter-spacing: 0.1em;
	background-color: #ECD00A;
	color: #3e667a;
	cursor: pointer;
}
a.btn-highlight:hover {
	background-color: #3e667a;
	color: #FFF;
}

.btn-txt {
	display: inline-block;
	margin: 0.25em 0;
	padding: 0.1em 0.5em;
	font-weight: 700;
	line-height: 1.25em;
	letter-spacing: 0.1em;
	color: #3e667a;
	text-decoration: underline;
}
.btn-txt:hover {
	color: #ecd00a;
}

a.btn-img { width: 76%; }
a.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 {
	display: inline-block;
	padding: 0.25em;
	text-align: center;
	line-height: 1em;
	letter-spacing: 0.1em;
	background-color: #3e667a;
	color: #fff;
	font-size: 1em;
}
.btn-download:hover {
	background-color: #c5bb9c;
	color: #FFF;
}


@media only screen and (min-width: 576px) {
	a.btn-h2x { line-height: 2.25em; }
}

@media only screen and (max-width: 575px) {
	a.button.btn-line > img { width: 2em; }
	.page-margintop { min-height: calc( 100vh - 92px); margin-top: 92px; }
}


@-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-duration: 2s;
				animation-duration: 2s;
  -webkit-animation-fill-mode: both;
				animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
				animation-iteration-count: infinite;
  -webkit-animation-name: flash;
				animation-name: flash;
}

/*---------------------------- 表頭 ----------------------------*/
header {
	position: fixed;
	z-index: 100;
	top: 0;
	width: 100%;
	background-color: #3E667A;
	height: 70px;
	border-bottom: 1px solid #FFF;
}
main.content, section.content { margin-top: 70px; }


header .header-main-logo { 
	font-size: 1.3em;
	color: #fff;
	vertical-align: middle;
	display: block;
	margin: 4px;
}
/* header .header-main-logo:nth-child(1) {	width: 60%; } */
/* header .header-main-logo:nth-child(2) {	width: 38%; text-align: center; } */


header ul li { display: block; float: left; }
header ul li.itemx6 { width: 16.66666666666667%; }
header ul li.itemx5 { width: 20%; }
header ul li.itemx4 { width: 25%; }
header ul li.itemx3 { width: 33.33333333333333%; }
header ul li.itemx2 { width: 50%; }

header ul li > a.header-link {
	display: block;
	font-size: 1.4em;
	color: #FFF;
	text-align: center;
	background-color: #3E667A;
	height: 69px;
	line-height: 69px;
	border-left: 1px solid #FFF;
	border-right: 1px solid #FFF;
	letter-spacing: 1px;
}
header ul li > a.header-link-lines {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4em;
	color: #FFF;
	text-align: center;
	background-color: #3E667A;
	height: 69px;
	line-height: 1;
	/*border-left: 1px solid #FFF;*/
	border-right: 1px solid #FFF;
	letter-spacing: 1px;
	padding-top: 6px;
}
header ul li > a.header-link-lines span {
	font-size: 0.8em;
	font-family: monospace;
}


header ul li > a:hover {
	background-color: #ffffffb3;
	color: #3e667a;
}
header li > .dropdown {
	position: absolute;
	width: 15em;
	z-index: 999;
	background: #fff;
	box-shadow: 0 3px 5px 0 rgb(0 0 0 / 15%);
	opacity: 0;
	visibility: hidden;
	border: 1px solid #3e667a;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
header li:hover > .dropdown {
	opacity: 1;
	visibility: visible;
	top: 70px;
}
header li > .dropdown > li {
	float: none;
}
header li > .dropdown > li a {
	font-size: 1.2em;
	border-right: 0;
	padding: 10px 15px 10px 20px;
	text-transform: capitalize;
	text-decoration: none;
	background: #fff;
	color: #3E667A;
	text-align: left;
	height: auto;
	line-height: 2;
	font-weight: 300;
	position: relative;
}
header li > .dropdown > li a:after {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\f105";
	top: 50%;
	right: 14px;
	position: absolute;
	transform: translate(-50%, -50%);
}
header li > .dropdown > li:hover a {
	background: #3E667A;
	color: #fff;
}


header li > .dropdown > li .dropright {
	position: absolute;
	width: 15em;
	z-index: 999;
	background: #fff;
	box-shadow: 0 3px 5px 0 rgb(0 0 0 / 15%);
	opacity: 0;
	visibility: hidden;
	border: 1px solid #3e667a;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
header li > .dropdown > li:hover .dropright {
	opacity: 1;
	visibility: visible;
	top: calc(1.2em + 36px);
	left: calc(15em - 2px);
}
header li > .dropdown > li .dropright > li {
	float: none;
}
header li > .dropdown > li .dropright > li a {
	font-size: 1.2em;
	border-right: 0;
	padding: 10px 15px 10px 20px;
	text-transform: capitalize;
	text-decoration: none;
	background: #fff;
	color: #3E667A;
	text-align: left;
	height: auto;
	line-height: 2;
	font-weight: 300;
	position: relative;
}
header li > .dropdown > li .dropright > li a:after {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\f105";
	top: 50%;
	right: 14px;
	position: absolute;
	transform: translate(-50%, -50%);
}
header li > .dropdown > li .dropright > li:hover a {
	background: #3E667A;
	color: #fff;
}



@media only screen and (max-width: 767px) {
	header ul li > a.header-link-lines span { display: none; }
}
@media only screen and (max-width: 575px) {
	main.content, section.content { margin-top: 9.5em; }
	header { height: 9.5em; }
	header ul li > a.header-link { height: 3em; line-height: 3em; }
	header ul.dropdown li > a.header-link { height: 4em; line-height: 2em; }
	header ul li > a.header-link-lines { height: 3em; padding-bottom: 10px; }
	header ul li:first-child > a { border-left: 0; }
	header ul li:last-child > a { border-right: 0; }
	header li:hover .dropdown { top: 41px; }

	header .header-main-logo img { 
		max-width: 210px;
		text-align: center;
	}

	header ul li > a.header-link-lines > div { max-width: 3em; }
	header li > .dropdown { width: 10em; }
	header li > .dropdown > li a { padding: 10px 15px; }
	header li > .dropdown > li .dropright { width: 10em; }
	header li > .dropdown > li:hover .dropright { left: calc(10em - 2px); }
}





/*---------------------------- 主視覺 ----------------------------*/
#main-bn {
	min-height: calc( 100vh - 70px);
	background-color: #FFF;
	background-image: url('../img/index_mainbg.png');
	background-position: center 65%;
	padding-bottom: 3%;
	-webkit-background-size: 25%;
			background-size: 25%;
}

#main-bn .main-title {
	background-color: #000;
	background-position: center;
	margin-bottom: 5%;
	padding: 5em 0.5em;
	-webkit-background-size: cover;
			background-size: cover;
}

#main-bn .main-title h1 {
	font-size: 4em;
	color: #FFF;
	text-align: center;
	line-height: 1.25em;
	font-weight: 900;
	letter-spacing: 0.15em;
	text-shadow: 0 0 5px #000;
	margin-bottom: 0.5em;
}

#main-bn .main-title .main-slogan {
	font-size: 1.625em;
	text-align: center;
	color: #FFF;
	border-top: 1px solid #FFF;
	border-bottom: 4px solid #FFF;
	letter-spacing: 0.5em;
	padding: 0.15em 1em;
	margin: 0.5em auto;
	max-width: 90%;
}

#main-bn .line-section {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	background: #ffffff99;
	border-radius: 20px;
	padding: 10px;
}
#main-bn .line-section:hover img {
	padding-bottom: 30px;
	-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;
}

#main-bn .main_rightimg {
	display: none;
}
@media only screen and (min-width: 768px) and (min-height: 850px) {
	#main-bn .main_rightimg {
		display: block;
		position: absolute;
		bottom: -5%;
		right: 5%;
	}
}


@media only screen and (min-width: 576px) {
	#main-bn .show-bn {
		position: absolute;
		right: 0;
		bottom: -12%;
		max-width: 23em;
	}
}

@media only screen and (max-width: 575px) {
	#main-bn .main-title .main-slogan { letter-spacing: 0; }
}


.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: #fcd767;
	color: #3e667a;
	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;
	}
}

.page-maintitle {
	font-size: 2.35em;
	padding: 0.35em;
	color: #fcd767;
	letter-spacing: 0.15em;
	text-shadow: 2px 0 0 #3e667a, -2px 0 0 #3e667a, 0 2px 0 #3e667a, 0 -2px 0 #3e667a, 2px 2px 0 #3e667a, -2px -2px 0 #3e667a, 2px -2px 0 #3e667a, -2px 2px 0 #3e667a;
}
.page-subtitle {
	display: inline-block;
	font-size: 1.6em;
	font-weight: unset;
	letter-spacing: 0.5em;
	color: #3e667a;
	font-family: 'Rubik';
	position: relative;
}
.page-subtitle:before {
	content: '';
	width: 100px;
	max-width: 100%;
	height: 10px;
	background: url(../img/titleline-before.png);
	position: absolute;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left center;
	left: -120%;
	top: 50%;
	transform: translateY(-50%);
}
.page-subtitle:after {
	content: '';
	width: 100px;
	max-width: 100%;
	height: 10px;
	background: url(../img/titleline-after.png);
	position: absolute;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right center;
	right: -120%;
	top: 50%;
	transform: translateY(-50%);
}



#main-section { padding-bottom: 168px; padding-top: 60px;}
#main-section .class-item .class-bn { 
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

#main-section .class-item:nth-child(2) .class-bn { background-image: url('../img/class01.png'); }
#main-section .class-item:nth-child(2) .class-bn a:hover .main-btn > span { background-color: white; color: #8D8066 }
#main-section .class-item:nth-child(2) .class-bn:hover {filter: hue-rotate(350deg);}

#main-section .class-item:nth-child(1) .class-bn { background-image: url('../img/class02.png'); }
#main-section .class-item:nth-child(1) .class-bn a:hover .main-btn > span { background-color: white; color: #8D8066 }
#main-section .class-item:nth-child(1) .class-bn:hover {filter: hue-rotate(350deg);}

.class-item .class-info .button {
	font-size: 1.2em;
	border: 2px solid #010101;
	font-weight: 700;
	border-radius: 50px;
}

#main-section .class-item:nth-child(2) .class-info .button { background-color: transparent; color: #010101; }
#main-section .class-item:nth-child(2) .class-info .button:hover { background-color: #8d8066; color: #FFF; border-color: #8d8066; }
#main-section .class-item:nth-child(1) .class-info .button { background-color: transparent; color: #010101; }
#main-section .class-item:nth-child(1) .class-info .button:hover { background-color: #8d8066; color: #FFF; border-color: #8d8066; }



@media only screen and (max-width: 1200px) {
	/*.class-item .class-bn { height: 36vh; }*/
}
@media only screen and (max-width: 575px) {
	.class-item .class-info .button { font-size: 0.75em; }
}


.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) {
	body {
		background-image: url('../img/main_bg.png');
		background-repeat: repeat;
		-webkit-background-size: 200%;
						background-size: 200%;
	}

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

/* 講師簡介 */
.teacher-block .t-name {
	font-size: 3em;
	font-weight: 900;
	letter-spacing: 0.1em;
}

.teacher-block .t-intro {
	padding: 1em;
	border-top: 1px solid #338EFF;
	border-right: 1px solid #338EFF;
	font-size: 1.375em;
}


.teacher-block .t-item span {
	display: block;
	background-color: #338EFF;
	color: #FFF;
	margin: 0.25em 1em;
	padding: 0.25em 1em;
	font-weight: inherit;
	letter-spacing: 0.2em;
}

.teacher-block .t-item-content {
	line-height: 1.5em;
	text-align: justify;
	margin: 0.25em 0;
	padding: 0.25em 0;
	letter-spacing: 0.1em;
}

.teacher-block.moveup { margin-top: -3em; }

@media only screen and (max-width: 575px) {
	.teacher-block.moveup { margin-top: inherit; }
}


/* google表單高度 */
.googleform iframe {
	height: 100vh;
	padding: 1em;
	background-color: #FFF;
	border-top: 7px solid #338eff;
	border-bottom: 7px solid #338eff;
}
/* @media only screen and (min-width: 768px) { .googleform iframe { height: 1400px;  } }
@media only screen and (max-width: 767px) { .googleform iframe { height: 1445px;  } }
@media only screen and (max-width: 639px) { .googleform iframe { height: 1500px;  } }
@media only screen and (max-width: 575px) { .googleform iframe { height: 1660px;  } }
@media only screen and (max-width: 413px) { .googleform iframe { height: 1705px;  } }
@media only screen and (max-width: 374px) { .googleform iframe { height: 1830px;  } } */



/*---------------------------- footer ----------------------------*/
footer {
	background-color: #C5BB9C;
	color: #333;
	padding: 4em 0 0 0;
	position: relative;
}
footer .footer_topimg {
	position: absolute;
	top: -200px;
	left: 0;
}


footer h5 {
	font-size: 1.25em;
	color: #010101;
	margin: 0.5em 1em;
}

footer h5 > span {
	display: inline-block;
	background-color: #8b773a;
	color: #fff;
	letter-spacing: 0.2em;
	padding: 0.15em 0.5em;
}

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: #333;
	font-weight: normal;
}

footer a { color: #333; }
footer a:hover { color: #8b773a; }


footer .need-cookie-area {
	color: #fff;
	font-weight: 300;
	letter-spacing: 1px;
}
footer .need-cookie-area a { color: #ECD00A; }
footer .need-cookie-area a:hover { color: #ECD00A; text-decoration: underline; }

footer .agree-need-cookie {
	border: 1px solid #ECD00A;
	color: #ECD00A;
}
footer .agree-need-cookie:hover {
	border: 1px solid #ECD00A;
	background: #ECD00A;
	color: #333;
}

footer .footer-org {
	font-size: 1.4em;
	font-weight: 600;
	color: #FFF;
	letter-spacing: 2px;
	vertical-align: middle;
}
footer .footer-img {
	position: absolute;
	width: auto;
	height: 130%;
	left: -14%;
	top: -15%;
}



/* 側邊快捷功能 */
.right_fix {
	display: block;
	font-size: 1.325em;
	width: 4em;
	border-radius: 2em 0 0 2em;
	padding: 0.75em 0.5em;
	background-color: #FFF;
	border: 2px solid #c5bb9c;
	position: fixed;
	right: -2px;
	top: 40%;
	box-shadow: 0 2px 0px 0 #8b773ac7;
	z-index: 9999;
}

.right_fix ul {
	list-style: none;
	text-align: center;
}

.right_fix ul li {
	border-bottom: 1px solid #ecd00a;
	padding: 0.5em 0;
	min-height: 3em;
}

.right_fix ul li:last-child { border-bottom: none; }

.right_fix ul li a, .right_fix ul li a.btn, .right_fix ul li button {
	display: block;
	color: #010101;
	border: none;
	background-color: transparent;
	line-height: 1.25em;
	padding: 0;
	margin: auto;
}

.right_fix ul li .gotopBtn { line-height: 2.5em; }

@media only screen and (min-width: 992px) and (max-width: 1200px) {
	footer .footer_topimg { width: 570px; height: auto; top: -168px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	footer .footer-img { left: -15%; }
	footer .footer_topimg { width: 500px; height: auto; top: -168px; }
}
@media only screen and (min-width: 677px) and (max-width: 768px) {
	footer .footer-img { left: -16%; }
}
@media only screen and (min-width: 576px) and (max-width: 676px) {
	footer .footer-img { left: -17%; }
}
@media only screen and (max-width: 575px) {
	footer p, footer .add-line { border-left: 1px solid; }
}


/* 我有興趣跳窗表單 */
#formModal {
	display: block;
	opacity: 0;
	position: fixed;
	z-index: -1;
	top: calc(70px + 2%);
	right: 5px;
	width: 100%;
	max-width: 350px;
	height: calc(100vh - 70px - 4%);
	overflow: hidden;
	background-color: #fff;
	/* box-shadow: 0 0 10px rgba(0, 0, 0, .3); */
	box-shadow: 0 0 10px #fcd767;
	border: 1px solid #fcd767;
	border-radius: 1rem;
}

#formModal.show {
	opacity: 1;
	right: calc(5px + 5.5em);
	z-index: 10000;
}

#formModal .close {
	position: absolute;
	top: 0.25em;
	right: 0.75em;
	z-index: 1;
	background-color: #FE8700;
	border-radius: 50%;
	width: 1.5em;
	height: 1.5em;
	opacity: 1;
	color: #FFF;
	text-shadow: none;
}
#formModal .close:hover {
	background-color: #3e667a;
}

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

@media only screen and (max-width: 575px) {
	#formModal {
		max-width: 300px;
		top: calc(9.5em + 2%);
		height: calc(100vh - 9.5em - 4%);
	}
}



/* 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: #8b773a;
	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 #c5bb9c;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	box-shadow: 0px 0px 1px 0px #333;
}
.quickmenu-selector-area {
	font-size: 1em;
	line-height: 1.4;
	width: 22px;
	color: #c5bb9c;
	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: #8b773a;
	border-color: #c5bb9c;
}
.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; }
}